"use client";
import { useState } from "react";
import { Mail, MailOpen, Trash2, ChevronDown, ChevronUp, Phone, Clock, CheckCircle } from "lucide-react";
import { marcarLeido, eliminarMensaje, aprobarInstitucion } from "@/app/actions/mensajes";

export default function MensajesClient({ mensajes }: { mensajes: any[] }) {
  const [expandedId, setExpandedId] = useState<string | null>(null);
  const [lista, setLista] = useState(mensajes);
  const [loadingAprobacion, setLoadingAprobacion] = useState<string | null>(null);

  const handleMarcar = async (id: string) => {
    await marcarLeido(id);
    setLista(prev => prev.map(m => m.id === id ? { ...m, leido: true } : m));
  };

  const handleEliminar = async (id: string) => {
    if (!confirm("¿Eliminar este mensaje?")) return;
    await eliminarMensaje(id);
    setLista(prev => prev.filter(m => m.id !== id));
  };

  const handleAprobar = async (id: string) => {
    if (!confirm("¿Aprobar esta institución para que pueda acceder al sistema?")) return;
    setLoadingAprobacion(id);
    const res = await aprobarInstitucion(id);
    if (res.success) {
      alert("Institución aprobada con éxito. Se le ha enviado un correo.");
      setLista(prev => prev.map(m => m.id === id ? { ...m, mensaje: m.mensaje.replace("[SOLICITUD_COLEGIO]", "[INSTITUCIÓN APROBADA]") } : m));
    } else {
      alert(res.error || "Error al aprobar la institución.");
    }
    setLoadingAprobacion(null);
  };

  return (
    <div className="space-y-3">
      {lista.map((m) => (
        <div key={m.id}
          className={`bg-white rounded-xl border shadow-sm transition-all ${!m.leido ? "border-[#0066ff]/30 bg-blue-50/30" : "border-gray-100"}`}>
          {/* Cabecera */}
          <div className="flex items-center gap-4 p-5 cursor-pointer"
            onClick={() => { setExpandedId(expandedId === m.id ? null : m.id); if (!m.leido) handleMarcar(m.id); }}>
            <div className={`p-2.5 rounded-full ${!m.leido ? "bg-[#0066ff]/10 text-[#0066ff]" : "bg-gray-100 text-gray-400"}`}>
              {m.leido ? <MailOpen className="w-5 h-5" /> : <Mail className="w-5 h-5" />}
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 flex-wrap">
                <span className="font-bold text-gray-800">{m.nombre}</span>
                {!m.leido && (
                  <span className="text-xs bg-[#0066ff] text-white font-bold px-2 py-0.5 rounded-full">Nuevo</span>
                )}
              </div>
              <div className="text-sm text-gray-500 flex items-center gap-3 mt-0.5">
                <span>{m.email}</span>
                {m.telefono && <span className="flex items-center gap-1"><Phone className="w-3 h-3" />{m.telefono}</span>}
                <span className="text-xs font-semibold px-2 py-1 bg-gray-100/50 rounded-lg whitespace-nowrap text-gray-600">
                  Para: {m.colegio?.nombre || "Oficina Principal / Administración Master"}
                </span>
              </div>
            </div>
            <div className="flex items-center gap-3 flex-shrink-0">
              <span className="text-xs text-gray-400 flex items-center gap-1">
                <Clock className="w-3 h-3" />
                {new Date(m.createdAt).toLocaleDateString("es-VE", { day:"2-digit", month:"short", hour:"2-digit", minute:"2-digit" })}
              </span>
              <button onClick={(e) => { e.stopPropagation(); handleEliminar(m.id); }}
                className="text-red-400 hover:text-red-600 hover:bg-red-50 p-1.5 rounded transition-all">
                <Trash2 className="w-4 h-4" />
              </button>
              {expandedId === m.id ? <ChevronUp className="w-4 h-4 text-gray-400" /> : <ChevronDown className="w-4 h-4 text-gray-400" />}
            </div>
          </div>

          {/* Cuerpo expandido */}
          {expandedId === m.id && (
            <div className="px-5 pb-5 pt-0 border-t border-gray-100">
              <p className="text-gray-700 leading-relaxed text-sm whitespace-pre-wrap bg-gray-50 rounded-lg p-4 mt-4">
                {m.mensaje.replace("[SOLICITUD_COLEGIO]", "").replace("[INSTITUCIÓN APROBADA]", "").trim()}
              </p>
              
              {m.mensaje.includes("[INSTITUCIÓN APROBADA]") && (
                <div className="mt-3 bg-green-50 text-green-700 text-sm p-3 rounded-lg flex items-center gap-2 font-semibold border border-green-100">
                  <CheckCircle className="w-5 h-5" />
                  Esta institución ya fue aprobada.
                </div>
              )}

              <div className="mt-4 flex gap-3 flex-wrap">
                {m.mensaje.includes("[SOLICITUD_COLEGIO]") && (
                  <button 
                    onClick={() => handleAprobar(m.id)}
                    disabled={loadingAprobacion === m.id}
                    className="text-xs bg-[#0066ff] text-white px-4 py-2 rounded-lg font-bold hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2 shadow-sm"
                  >
                    {loadingAprobacion === m.id ? "Aprobando..." : <><CheckCircle className="w-4 h-4" /> Aprobar Institución</>}
                  </button>
                )}
                
                <a href={`mailto:${m.email}`}
                  className="text-xs bg-[#1e2a47] text-white px-4 py-2 rounded-lg font-semibold hover:bg-[#f04b50] transition-colors shadow-sm">
                  Responder por Email
                </a>
                {m.telefono && (
                  <a href={`https://wa.me/${m.telefono.replace(/\D/g, "")}`} target="_blank" rel="noreferrer"
                    className="text-xs bg-green-500 text-white px-4 py-2 rounded-lg font-semibold hover:bg-green-600 transition-colors shadow-sm">
                    WhatsApp
                  </a>
                )}
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}