"use client";

import { useState } from "react";
import { ClipboardCheck, CheckCircle, XCircle, Play, RotateCcw, AlertCircle } from "lucide-react";

interface PasoResultado {
  paso: number;
  nombre: string;
  estado: "pendiente" | "procesando" | "exitoso" | "error";
  mensaje?: string;
  datos?: any;
}

export default function CierrePage() {
  const [mes, setMes] = useState(new Date().getMonth() + 1);
  const [anio, setAnio] = useState(new Date().getFullYear());
  const [pasos, setPasos] = useState<PasoResultado[]>([
    { paso: 1, nombre: "Validar lecturas y boletas", estado: "pendiente" },
    { paso: 2, nombre: "Validar libros contables", estado: "pendiente" },
    { paso: 3, nombre: "Validar conciliación bancaria", estado: "pendiente" },
    { paso: 4, nombre: "Generar resumen mensual", estado: "pendiente" },
    { paso: 5, nombre: "Cerrar período", estado: "pendiente" }
  ]);
  const [ejecutando, setEjecutando] = useState(false);
  const [mensaje, setMensaje] = useState<{ tipo: string; texto: string } | null>(null);

  const fechaCierre = `${anio}-${String(mes).padStart(2, "0")}-01`;

  const ejecutarPaso = async (numeroPaso: number) => {
    setPasos((prev) => prev.map((p) => 
      p.paso === numeroPaso ? { ...p, estado: "procesando" } : p
    ));

    try {
      const res = await fetch("/api/cierre", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ fechaCierre, paso: numeroPaso })
      });

      const data = await res.json();

      setPasos((prev) => prev.map((p) => 
        p.paso === numeroPaso 
          ? { ...p, estado: data.success ? "exitoso" : "error", mensaje: data.mensaje, datos: data.datos }
          : p
      ));

      return data.success;
    } catch (error) {
      setPasos((prev) => prev.map((p) => 
        p.paso === numeroPaso 
          ? { ...p, estado: "error", mensaje: "Error de conexión" }
          : p
      ));
      return false;
    }
  };

  const ejecutarCierreCompleto = async () => {
    setEjecutando(true);
    setMensaje(null);
    
    setPasos((prev) => prev.map((p) => ({ ...p, estado: "pendiente", mensaje: undefined, datos: undefined })));

    for (let i = 1; i <= 5; i++) {
      const exitoso = await ejecutarPaso(i);
      if (!exitoso && i < 5) {
        setMensaje({ 
          tipo: "error", 
          texto: `El cierre se detuvo en el paso ${i}. Corrija los errores y vuelva a intentar.` 
        });
        setEjecutando(false);
        return;
      }
    }

    setMensaje({ tipo: "success", texto: "¡Cierre mensual completado exitosamente!" });
    setEjecutando(false);
  };

  const abrirPeriodo = async () => {
    if (!confirm("¿Está seguro de reabrir este período? Esto permitirá modificar datos del mes.")) return;

    try {
      const res = await fetch("/api/cierre", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ fechaCierre: `${anio}${String(mes).padStart(2, "0")}`, accion: "abrir" })
      });

      const data = await res.json();
      if (data.success) {
        setMensaje({ tipo: "success", texto: "Período reabierto correctamente" });
        setPasos((prev) => prev.map((p) => ({ ...p, estado: "pendiente", mensaje: undefined })));
      } else {
        setMensaje({ tipo: "error", texto: data.error });
      }
    } catch (error) {
      setMensaje({ tipo: "error", texto: "Error al reabrir período" });
    }
  };

  const getIcono = (estado: string) => {
    switch (estado) {
      case "exitoso": return <CheckCircle className="w-6 h-6 text-green-600" />;
      case "error": return <XCircle className="w-6 h-6 text-red-600" />;
      case "procesando": return <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />;
      default: return <div className="w-6 h-6 border-2 border-gray-300 rounded-full" />;
    }
  };

  return (
    <div>
      <h1 className="page-title">Cierre Mensual</h1>

      {mensaje && (
        <div className={`mb-6 p-4 rounded-lg flex items-center gap-2 ${
          mensaje.tipo === "error" ? "bg-red-50 text-red-700" : "bg-green-50 text-green-700"
        }`}>
          <AlertCircle className="w-5 h-5" />
          {mensaje.texto}
          <button onClick={() => setMensaje(null)} className="ml-auto">×</button>
        </div>
      )}

      <div className="card mb-6">
        <h2 className="section-title">Período a Cerrar</h2>
        <div className="flex gap-4 items-end">
          <div>
            <label className="block text-sm font-medium mb-1">Mes</label>
            <select value={mes} onChange={(e) => setMes(parseInt(e.target.value))} className="input-field w-40">
              {Array.from({ length: 12 }, (_, i) => (
                <option key={i + 1} value={i + 1}>
                  {new Date(2000, i).toLocaleString("es", { month: "long" })}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">Año</label>
            <select value={anio} onChange={(e) => setAnio(parseInt(e.target.value))} className="input-field w-28">
              {[2024, 2025, 2026].map((a) => (
                <option key={a} value={a}>{a}</option>
              ))}
            </select>
          </div>
          <button
            onClick={ejecutarCierreCompleto}
            disabled={ejecutando}
            className="btn-primary flex items-center gap-2"
          >
            <Play className="w-4 h-4" />
            {ejecutando ? "Ejecutando..." : "Ejecutar Cierre"}
          </button>
          <button
            onClick={abrirPeriodo}
            disabled={ejecutando}
            className="btn-secondary flex items-center gap-2"
          >
            <RotateCcw className="w-4 h-4" /> Reabrir Período
          </button>
        </div>
      </div>

      <div className="card">
        <h2 className="section-title flex items-center gap-2">
          <ClipboardCheck className="w-5 h-5" /> Pasos del Cierre
        </h2>

        <div className="space-y-4">
          {pasos.map((paso) => (
            <div 
              key={paso.paso}
              className={`p-4 rounded-lg border-2 ${
                paso.estado === "exitoso" ? "border-green-200 bg-green-50" :
                paso.estado === "error" ? "border-red-200 bg-red-50" :
                paso.estado === "procesando" ? "border-blue-200 bg-blue-50" :
                "border-gray-200"
              }`}
            >
              <div className="flex items-center gap-4">
                {getIcono(paso.estado)}
                <div className="flex-1">
                  <div className="font-medium">
                    Paso {paso.paso}: {paso.nombre}
                  </div>
                  {paso.mensaje && (
                    <div className={`text-sm mt-1 ${paso.estado === "error" ? "text-red-600" : "text-green-600"}`}>
                      {paso.mensaje}
                    </div>
                  )}
                  {paso.datos && (
                    <div className="text-sm text-gray-600 mt-1">
                      {paso.datos.clientes && `Clientes: ${paso.datos.clientes}`}
                      {paso.datos.lecturas && ` | Lecturas: ${paso.datos.lecturas}`}
                      {paso.datos.boletas && ` | Boletas: ${paso.datos.boletas}`}
                    </div>
                  )}
                </div>
                {paso.estado === "pendiente" && !ejecutando && (
                  <button
                    onClick={() => ejecutarPaso(paso.paso)}
                    className="btn-secondary text-sm"
                  >
                    Ejecutar
                  </button>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}