"use client";
import { useState, useEffect } from "react";
import { 
  Share2, Image as ImageIcon, Send, X, ArrowLeft, 
  ChevronDown, ChevronUp, Eye, EyeOff, CheckCircle2, MapPin, Globe, ListChecks 
} from "lucide-react";
import Link from "next/link";

export default function ComandoDifusion() {
  const [title, setTitle] = useState("");
  const [message, setMessage] = useState("");
  const [instructions, setInstructions] = useState(""); // NUEVO CAMPO
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [loading, setLoading] = useState(false);
  const [campaigns, setCampaigns] = useState([]);
  const [expandedId, setExpandedId] = useState<number | null>(null);

  // Estados para segmentación
  const [availableNeighborhoods, setAvailableNeighborhoods] = useState<string[]>([]);
  const [selectedNeighborhoods, setSelectedNeighborhoods] = useState<string[]>([]);

  useEffect(() => {
    fetchHistory();
    // Cargar colonias para el filtro
    fetch("/api/reports/full").then(res => res.json()).then(data => {
      const names = data.neighborhoods?.map((n: any) => n.neighborhood) || [];
      setAvailableNeighborhoods(names);
    });
  }, []);

  const fetchHistory = () => {
    fetch("/api/admin/campaign/history")
      .then(res => res.json())
      .then(data => setCampaigns(data));
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const filesArray = Array.from(e.target.files);
      const updatedFiles = [...selectedFiles, ...filesArray].slice(0, 3);
      setSelectedFiles(updatedFiles);
    }
  };

  const toggleNeighborhood = (name: string) => {
    setSelectedNeighborhoods(prev => 
      prev.includes(name) ? prev.filter(n => n !== name) : [...prev, name]
    );
  };

  const handleSend = async () => {
    if (!title || !message || !instructions) return alert("Título, Mensaje e Instrucciones son obligatorios");
    setLoading(true);

    const formData = new FormData();
    formData.append("title", title);
    formData.append("message_text", message);
    formData.append("instructions", instructions); // ENVIAR INSTRUCCIONES
    formData.append("scope", selectedNeighborhoods.length === 0 ? "GENERAL" : selectedNeighborhoods.join(", "));
    formData.append("neighborhoods", JSON.stringify(selectedNeighborhoods));
    
    selectedFiles.forEach((file) => {
      formData.append(`images`, file);
    });

    try {
      const res = await fetch("/api/admin/campaign", { method: "POST", body: formData });
      if (res.ok) {
        alert("¡Misión desplegada exitosamente!");
        setTitle(""); setMessage(""); setInstructions(""); setSelectedFiles([]); setSelectedNeighborhoods([]);
        fetchHistory();
      }
    } catch (error) {
      alert("Error en el despliegue");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-4 md:p-10 bg-[#050505] min-h-screen text-white font-sans">
      <div className="flex items-center gap-4 mb-8">
        <Link href="/admin/dashboard" className="p-2 hover:bg-white/10 rounded-full text-blue-500">
          <ArrowLeft size={28} />
        </Link>
        <div>
          <h1 className="text-3xl font-black uppercase italic tracking-tighter text-blue-600 flex items-center gap-3">
            <Share2 /> Comando Difusión
          </h1>
          <p className="text-gray-500 text-[10px] font-black uppercase tracking-[0.3em]">Segmentación Territorial Digital</p>
        </div>
      </div>

      <div className="grid lg:grid-cols-2 gap-8">
        <div className="bg-[#0a0a0a] border border-gray-900 p-8 rounded-[2.5rem] shadow-2xl space-y-6">
          
          <div>
            <label className="block text-[10px] font-black text-blue-500 uppercase mb-3 tracking-widest italic">Alcance de la Misión</label>
            <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto p-3 border border-gray-800 rounded-xl bg-black/40">
              <button 
                onClick={() => setSelectedNeighborhoods([])}
                className={`px-3 py-1.5 rounded-lg text-[9px] font-black uppercase border transition-all ${selectedNeighborhoods.length === 0 ? 'bg-blue-600 border-blue-500 text-white' : 'border-gray-800 text-gray-500'}`}
              >
                <Globe size={10} className="inline mr-1" /> Todo Zapata
              </button>
              {availableNeighborhoods.map(name => (
                <button 
                  key={name}
                  onClick={() => toggleNeighborhood(name)}
                  className={`px-3 py-1.5 rounded-lg text-[9px] font-black uppercase border transition-all ${selectedNeighborhoods.includes(name) ? 'bg-purple-600 border-purple-500 text-white' : 'border-gray-800 text-gray-500'}`}
                >
                  <MapPin size={10} className="inline mr-1" /> {name}
                </button>
              ))}
            </div>
          </div>

          <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} className="w-full bg-black border border-gray-800 rounded-xl p-4 text-sm focus:border-blue-600 outline-none italic" placeholder="TÍTULO DE LA MISIÓN..." />
          
          <textarea rows={3} value={message} onChange={(e) => setMessage(e.target.value)} className="w-full bg-black border border-gray-800 rounded-xl p-4 text-sm focus:border-blue-600 outline-none italic" placeholder="ESCRIBE EL MENSAJE OFICIAL..." />

          {/* NUEVO CAMPO DE INSTRUCCIONES */}
          <div className="relative">
            <ListChecks className="absolute top-4 left-4 text-magenta-500" size={18} />
            <textarea rows={2} value={instructions} onChange={(e) => setInstructions(e.target.value)} className="w-full bg-black border border-gray-800 rounded-xl p-4 pl-12 text-sm focus:border-magenta-600 outline-none italic text-magenta-200" placeholder="INSTRUCCIONES PARA LOS LÍDERES (EJ: COMPARTIR EN ESTADOS)..." />
          </div>

          <div>
            <label className="block text-[10px] font-black text-gray-500 uppercase mb-2 tracking-widest">Imágenes (Máx 3)</label>
            <div className="flex gap-4 flex-wrap">
              {selectedFiles.map((file, i) => (
                <div key={i} className="relative w-20 h-20 bg-gray-900 rounded-lg border border-gray-800">
                  <img src={URL.createObjectURL(file)} className="w-full h-full object-cover rounded-lg opacity-80" />
                  <button onClick={() => setSelectedFiles(selectedFiles.filter((_, idx) => idx !== i))} className="absolute -top-2 -right-2 bg-red-600 rounded-full p-1"><X size={12} /></button>
                </div>
              ))}
              {selectedFiles.length < 3 && (
                <label className="w-20 h-20 border-2 border-dashed border-gray-800 rounded-lg flex flex-col items-center justify-center text-gray-600 hover:border-blue-600 cursor-pointer transition-all">
                  <ImageIcon size={20} />
                  <input type="file" multiple className="hidden" onChange={handleFileChange} accept="image/*" />
                </label>
              )}
            </div>
          </div>

          <button onClick={handleSend} disabled={loading} className="w-full bg-blue-600 hover:bg-blue-700 py-5 rounded-2xl font-black uppercase italic tracking-widest flex items-center justify-center gap-3 transition-all shadow-lg">
            {loading ? "DESPLEGANDO..." : <><Send size={20} /> EJECUTAR DIFUSIÓN</>}
          </button>
        </div>

        <div className="space-y-4">
          <h2 className="text-[10px] font-black uppercase text-gray-500 tracking-[0.3em] mb-4">Registro de Misiones</h2>
          {campaigns.map((camp: any) => (
            <div key={camp.id} className="bg-[#0a0a0a] border border-gray-900 rounded-2xl overflow-hidden">
              <button onClick={() => setExpandedId(expandedId === camp.id ? null : camp.id)} className="w-full p-5 flex items-center justify-between hover:bg-white/5 transition-colors">
                <div className="flex items-center gap-4 text-left">
                  <div className={`p-2 rounded-lg ${camp.pending > 0 ? 'bg-red-500/10 text-red-500' : 'bg-green-500/10 text-green-500'}`}>
                    {camp.pending > 0 ? <EyeOff size={18} /> : <CheckCircle2 size={18} />}
                  </div>
                  <div>
                    <h4 className="text-xs font-black uppercase italic tracking-tight">{camp.title}</h4>
                    <div className="flex items-center gap-2">
                        <span className="text-[8px] bg-blue-900/30 text-blue-400 px-1.5 py-0.5 rounded font-black uppercase">{camp.scope}</span>
                        <p className="text-[9px] text-gray-600 uppercase font-bold">{new Date(camp.created_at).toLocaleDateString()}</p>
                    </div>
                  </div>
                </div>
                {expandedId === camp.id ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
              </button>
              {expandedId === camp.id && (
                <div className="px-5 pb-5 border-t border-gray-900 bg-black/30">
                  {/* MOSTRAR INSTRUCCIONES EN EL HISTORIAL */}
                  <div className="mt-4 p-3 bg-magenta-900/10 border border-magenta-500/20 rounded-xl">
                    <p className="text-[8px] font-black text-magenta-500 uppercase mb-1">Instrucciones de Misión</p>
                    <p className="text-[11px] text-magenta-100 italic">{camp.instructions || 'Sin instrucciones adicionales'}</p>
                  </div>

                  <div className="grid grid-cols-2 gap-2 mt-4">
                    <div className="space-y-1">
                      <p className="text-[8px] font-black text-red-500 uppercase mb-2">Omisión</p>
                      {camp.trackers?.filter((t: any) => !t.is_read).map((t: any, idx: number) => (
                        <div key={idx} className="text-[10px] bg-red-500/5 border border-red-500/10 p-2 rounded-lg text-red-200 font-bold uppercase">{t.user_name}</div>
                      ))}
                    </div>
                    <div className="space-y-1">
                      <p className="text-[8px] font-black text-blue-500 uppercase mb-2">Cumplimiento</p>
                      {camp.trackers?.filter((t: any) => t.is_read).map((t: any, idx: number) => (
                        <div key={idx} className="text-[10px] bg-blue-500/5 border border-blue-500/10 p-2 rounded-lg text-blue-200 font-bold uppercase flex justify-between">{t.user_name} {t.is_disseminated && <CheckCircle2 size={10} className="text-green-500" />}</div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}