"use client";

import { useState, useEffect } from "react";

// Monday-style columns
const COLUMNS = [
  { id: "brainstorming", name: "💡 Brainstorming", color: "#ff6b6b" },
  { id: "planning", name: "📋 Planning", color: "#ffd93d" },
  { id: "ready", name: "✅ Ready", color: "#6bcb77" },
  { id: "in-progress", name: "🚀 In Progress", color: "#4d96ff" },
  { id: "review", name: "👀 Review", color: "#9b59b6" },
  { id: "done", name: "🎉 Done", color: "#00d2d3" },
];

interface Feature {
  id: string;
  title: string;
  description: string;
  column: string;
  projectId: string;
  approved: boolean;
  implemented: boolean;
}

// Project features - these will be listed for approval
const PROJECT_FEATURES_INITIAL: Feature[] = [
  // SiteMente v1
  { id: "s1", title: "Vertical Pack Cards", description: "Beautiful cards for Real Estate, Restaurant, Clinic verticals on landing", column: "brainstorming", projectId: "sitemente-v1", approved: false, implemented: false },
  { id: "s2", title: "Contact/Onboarding Form", description: "Lead capture form with business type selection", column: "brainstorming", projectId: "sitemente-v1", approved: false, implemented: false },
  { id: "s3", title: "AI Widget Live Demo", description: "Working voice/chat AI widget on landing page", column: "brainstorming", projectId: "sitemente-v1", approved: false, implemented: false },
  { id: "s4", title: "Mobile Responsive Pass", description: "Full mobile responsiveness audit and fixes", column: "planning", projectId: "sitemente-v1", approved: false, implemented: false },
  { id: "s5", title: "Demo Pages SEO", description: "Per-vertical landing pages with unique meta tags", column: "planning", projectId: "sitemente-v1", approved: false, implemented: false },
  { id: "s6", title: "Lead Capture Integration", description: "Connect forms to email/CRM notification", column: "planning", projectId: "sitemente-v1", approved: false, implemented: false },
  { id: "s7", title: "WhatsApp Business Integration", description: "Auto-send leads to WhatsApp", column: "planning", projectId: "sitemente-v1", approved: false, implemented: false },
  { id: "s8", title: "Pricing Toggle", description: "Monthly/Annual toggle with discount display", column: "ready", projectId: "sitemente-v1", approved: false, implemented: false },
  { id: "s9", title: "Case Studies Section", description: "Real testimonials from Costa del Sol clients", column: "ready", projectId: "sitemente-v1", approved: false, implemented: false },
  { id: "s10", title: "Blog Section", description: "SEO blog with AI-generated content tips", column: "in-progress", projectId: "sitemente-v1", approved: false, implemented: false },
  // HolaCompi v1
  { id: "h1", title: "Voice AI Agent", description: "Real voice conversation with callers", column: "brainstorming", projectId: "holacompi-v1", approved: false, implemented: false },
  { id: "h2", title: "WhatsApp Integration", description: "AI responds on WhatsApp Business", column: "brainstorming", projectId: "holacompi-v1", approved: false, implemented: false },
  { id: "h3", title: "Consumer Rights Chatbot", description: "Legal info chatbot for immigrants", column: "brainstorming", projectId: "holacompi-v1", approved: false, implemented: false },
  { id: "h4", title: "Spanish Bureaucracy Guide", description: "AI guide through Spanish paperwork", column: "planning", projectId: "holacompi-v1", approved: false, implemented: false },
  { id: "h5", title: "Multi-language Support", description: "ES, EN, FR, AR, RO language options", column: "planning", projectId: "holacompi-v1", approved: false, implemented: false },
  { id: "h6", title: "Emergency Contacts", description: "Quick access to emergency services by location", column: "ready", projectId: "holacompi-v1", approved: false, implemented: false },
  // Infrastructure
  { id: "i1", title: "Production Deployment", description: "Deploy to production domain (sitemente.com)", column: "planning", projectId: "infrastructure", approved: false, implemented: false },
  { id: "i2", title: "Cloud Backups", description: "Automated daily backups to cloud storage", column: "planning", projectId: "infrastructure", approved: false, implemented: false },
  { id: "i3", title: "Monitoring Setup", description: "Uptime monitoring and alerts", column: "planning", projectId: "infrastructure", approved: false, implemented: false },
  { id: "i4", title: "SSL Certificate", description: "Proper HTTPS for production", column: "ready", projectId: "infrastructure", approved: false, implemented: false },
  { id: "i5", title: "Email Notifications", description: "System sends emails for important events", column: "in-progress", projectId: "infrastructure", approved: false, implemented: false },
];

const PROJECTS = [
  { id: "sitemente-v1", name: "SiteMente v1", emoji: "🏢", description: "AI website platform for local businesses", color: "#8B5CF6" },
  { id: "holacompi-v1", name: "HolaCompi v1", emoji: "🤝", description: "AI ally for immigrants & consumers", color: "#EC4899" },
  { id: "infrastructure", name: "Infrastructure", emoji: "⚙️", description: "DevOps, deployment & maintenance", color: "#10B981" },
];

export default function MondayBoard() {
  const [mounted, setMounted] = useState(false);
  const [selectedProject, setSelectedProject] = useState<string>("sitemente-v1");
  const [features, setFeatures] = useState<Feature[]>([]);
  const [showApproval, setShowApproval] = useState<string | null>(null);

  useEffect(() => {
    setMounted(true);
    setFeatures(PROJECT_FEATURES_INITIAL);
  }, []);

  if (!mounted) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-white/60">Loading...</div>
      </div>
    );
  }

  const projectFeatures = features.filter(f => f.projectId === selectedProject);

  const getColumnFeatures = (columnId: string) => {
    return projectFeatures.filter(f => f.column === columnId);
  };

  const approveFeature = (featureId: string) => {
    setFeatures(prev => prev.map(f => 
      f.id === featureId ? { ...f, approved: true, column: "ready" } : f
    ));
    setShowApproval(null);
  };

  const markImplemented = (featureId: string) => {
    setFeatures(prev => prev.map(f => 
      f.id === featureId ? { ...f, implemented: true, column: "done" } : f
    ));
  };

  const getProgress = () => {
    const total = projectFeatures.length;
    const done = projectFeatures.filter(f => f.column === "done").length;
    return total > 0 ? Math.round((done / total) * 100) : 0;
  };

  const currentFeature = showApproval ? features.find(f => f.id === showApproval) : null;

  return (
    <div className="h-full flex flex-col">
      {/* Project Selector */}
      <div className="flex items-center gap-3 p-4 border-b border-white/10">
        <span className="text-white/60 text-sm">Project:</span>
        <div className="flex gap-2">
          {PROJECTS.map(proj => (
            <button
              key={proj.id}
              onClick={() => setSelectedProject(proj.id)}
              className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition ${
                selectedProject === proj.id 
                  ? "bg-white/20 text-white" 
                  : "text-white/60 hover:text-white hover:bg-white/10"
              }`}
            >
              <span>{proj.emoji}</span>
              <span>{proj.name}</span>
            </button>
          ))}
        </div>
        <div className="ml-auto flex items-center gap-2">
          <div className="w-32 h-2 bg-white/10 rounded-full overflow-hidden">
            <div 
              className="h-full bg-brand-pink transition-all" 
              style={{ width: `${getProgress()}%` }}
            />
          </div>
          <span className="text-xs text-white/60">{getProgress()}%</span>
        </div>
      </div>

      {/* Board */}
      <div className="flex-1 overflow-x-auto p-4">
        <div className="flex gap-3 min-w-max h-full">
          {COLUMNS.map(column => {
            const columnFeatures = getColumnFeatures(column.id);
            return (
              <div 
                key={column.id} 
                className="w-72 flex-shrink-0 flex flex-col rounded-xl bg-white/5 border border-white/10"
              >
                {/* Column Header */}
                <div 
                  className="p-3 rounded-t-xl border-b border-white/10"
                  style={{ backgroundColor: `${column.color}20` }}
                >
                  <div className="flex items-center justify-between">
                    <span className="font-semibold text-sm" style={{ color: column.color }}>
                      {column.name}
                    </span>
                    <span className="text-xs bg-white/10 px-2 py-0.5 rounded-full text-white/70">
                      {columnFeatures.length}
                    </span>
                  </div>
                </div>

                {/* Features List */}
                <div className="flex-1 overflow-y-auto p-2 space-y-2">
                  {columnFeatures.map(feature => (
                    <div
                      key={feature.id}
                      className={`p-3 rounded-lg border transition-all cursor-pointer ${
                        feature.approved 
                          ? "bg-brand-pink/20 border-brand-pink/50" 
                          : feature.implemented
                          ? "bg-green-500/20 border-green-500/50"
                          : "bg-white/5 border-white/10 hover:border-white/30"
                      }`}
                      onClick={() => {
                        if (!feature.approved && !feature.implemented) {
                          setShowApproval(feature.id);
                        }
                      }}
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="flex-1">
                          <h4 className="text-sm font-medium text-white">{feature.title}</h4>
                          <p className="text-xs text-white/50 mt-1">{feature.description}</p>
                        </div>
                        <div className="flex flex-col gap-1">
                          {feature.approved && !feature.implemented && (
                            <button
                              onClick={(e) => {
                                e.stopPropagation();
                                markImplemented(feature.id);
                              }}
                              className="text-xs bg-green-500/30 hover:bg-green-500/50 text-green-300 px-2 py-1 rounded transition"
                            >
                              ✓ Done
                            </button>
                          )}
                          {feature.approved && (
                            <span className="text-xs text-brand-pink">✓ Approved</span>
                          )}
                          {feature.implemented && (
                            <span className="text-xs text-green-400">🎉 Live</span>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                  
                  {columnFeatures.length === 0 && (
                    <div className="text-center text-white/30 text-xs py-4">
                      No items
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Approval Modal */}
      {showApproval && currentFeature && (
        <div
          className="fixed inset-0 bg-black/70 flex items-center justify-center z-50"
          onClick={() => setShowApproval(null)}
        >
          <div
            className="bg-[#1a1625] border border-white/20 rounded-2xl p-6 max-w-md w-full mx-4"
            onClick={e => e.stopPropagation()}
          >
            <h3 className="text-xl font-bold text-white mb-2">🚀 Approve Feature?</h3>
            <p className="text-white/70 mb-4">{currentFeature.description}</p>
            
            <div className="bg-white/5 rounded-xl p-4 mb-6">
              <h4 className="text-sm font-semibold text-brand-pink mb-2">{currentFeature.title}</h4>
              <p className="text-xs text-white/50">{currentFeature.description}</p>
            </div>

            <div className="flex gap-3">
              <button
                onClick={() => setShowApproval(null)}
                className="flex-1 px-4 py-2 rounded-lg border border-white/20 text-white/70 hover:bg-white/10 transition"
              >
                Cancel
              </button>
              <button
                onClick={() => approveFeature(currentFeature.id)}
                className="flex-1 px-4 py-2 rounded-lg bg-brand-pink text-white font-semibold hover:bg-[#ff7bc0] transition"
              >
                ✅ Approve
              </button>
            </div>
            
            <p className="text-xs text-white/40 mt-4 text-center">
              Clicking approve will move this to Ready column for implementation
            </p>
          </div>
        </div>
      )}
    </div>
  );
}