"use client";

import { useEffect, useMemo, useState } from "react";
import { AlertCircle, Gift, RefreshCw, Trash2, Plus } from "lucide-react";

type SubsidioRow = {
  Id_subsidios: number;
  Id_cliente: number;
  porcentaje_subsidio: number;
  fecha_decreto: string;
  fecha_venc: string;
  activo: number;
  nombre_cliente?: string;
  rut_cliente?: string;
};

export default function SubsidiosPage() {
  const [loading, setLoading] = useState(true);
  const [working, setWorking] = useState(false);
  const [mensaje, setMensaje] = useState<{ tipo: "error" | "success"; texto: string } | null>(null);

  const [soloActivos, setSoloActivos] = useState(true);
  const [subsidios, setSubsidios] = useState<SubsidioRow[]>([]);

  const [clienteId, setClienteId] = useState("");
  const [porcentaje, setPorcentaje] = useState("");
  const [fechaDecreto, setFechaDecreto] = useState("");
  const [fechaVenc, setFechaVenc] = useState("");

  const canCreate = useMemo(() => {
    return Boolean(clienteId && porcentaje && fechaDecreto && fechaVenc);
  }, [clienteId, porcentaje, fechaDecreto, fechaVenc]);

  const cargar = async () => {
    setLoading(true);
    setMensaje(null);
    try {
      const res = await fetch(`/api/subsidios?activos=${soloActivos ? "true" : "false"}`);
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al cargar subsidios");
      setSubsidios(data);
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al cargar subsidios" });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void cargar();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [soloActivos]);

  const actualizarSubsidios = async () => {
    setWorking(true);
    setMensaje(null);
    try {
      const res = await fetch("/api/subsidios", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ accion: "actualizar" }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al actualizar subsidios");
      setMensaje({ tipo: "success", texto: data?.message || "Subsidios actualizados" });
      await cargar();
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al actualizar subsidios" });
    } finally {
      setWorking(false);
    }
  };

  const crearSubsidio = async () => {
    setWorking(true);
    setMensaje(null);
    try {
      if (!canCreate) {
        setMensaje({ tipo: "error", texto: "Completa todos los campos" });
        return;
      }

      const res = await fetch("/api/subsidios", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          clienteId: Number(clienteId),
          porcentaje: Number(porcentaje),
          fechaDecreto,
          fechaVencimiento: fechaVenc,
        }),
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al crear subsidio");

      setMensaje({ tipo: "success", texto: data?.message || "Subsidio creado" });
      setClienteId("");
      setPorcentaje("");
      setFechaDecreto("");
      setFechaVenc("");
      await cargar();
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al crear subsidio" });
    } finally {
      setWorking(false);
    }
  };

  const desactivar = async (id: number) => {
    const ok = confirm("¿Está seguro de desactivar este subsidio?");
    if (!ok) return;

    setWorking(true);
    setMensaje(null);
    try {
      const res = await fetch(`/api/subsidios?id=${id}`, { method: "DELETE" });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al desactivar subsidio");
      setMensaje({ tipo: "success", texto: data?.message || "Subsidio desactivado" });
      await cargar();
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al desactivar subsidio" });
    } finally {
      setWorking(false);
    }
  };

  const formatMoney = (valor: any) => {
    const n = typeof valor === "number" ? valor : Number(valor || 0);
    return new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP" }).format(n);
  };

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h1 className="page-title">Subsidios</h1>
        <div className="flex gap-2">
          <button
            className="btn-secondary"
            disabled={working}
            onClick={() => setSoloActivos((v) => !v)}
          >
            {soloActivos ? "Ver todos" : "Ver activos"}
          </button>
          <button className="btn-primary flex items-center gap-2" disabled={working} onClick={actualizarSubsidios}>
            <RefreshCw className="w-4 h-4" />
            Actualizar
          </button>
        </div>
      </div>

      {mensaje ? (
        <div
          className={`mb-4 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>
      ) : null}

      <div className="card mb-6">
        <div className="flex items-center gap-2 mb-4">
          <Gift className="w-5 h-5 text-pink-600" />
          <span className="font-medium">Crear subsidio</span>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">ID Cliente</label>
            <input className="input-field" value={clienteId} onChange={(e) => setClienteId(e.target.value)} inputMode="numeric" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">% Subsidio</label>
            <input className="input-field" value={porcentaje} onChange={(e) => setPorcentaje(e.target.value)} inputMode="numeric" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Fecha Decreto</label>
            <input type="date" className="input-field" value={fechaDecreto} onChange={(e) => setFechaDecreto(e.target.value)} />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Fecha Vencimiento</label>
            <input type="date" className="input-field" value={fechaVenc} onChange={(e) => setFechaVenc(e.target.value)} />
          </div>
        </div>

        <div className="pt-4">
          <button className="btn-success flex items-center gap-2 disabled:opacity-50" disabled={working || !canCreate} onClick={crearSubsidio}>
            <Plus className="w-4 h-4" />
            Crear
          </button>
        </div>
      </div>

      <div className="card">
        <div className="flex items-center gap-2 mb-4">
          <Gift className="w-5 h-5 text-pink-600" />
          <span className="font-medium">Subsidios ({subsidios.length})</span>
        </div>

        {loading ? (
          <div className="text-center py-8 text-gray-500">Cargando...</div>
        ) : subsidios.length === 0 ? (
          <div className="text-center py-8 text-gray-500">No hay subsidios</div>
        ) : (
          <div className="table-container">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 table-header">Socio</th>
                  <th className="px-6 py-3 table-header">RUT</th>
                  <th className="px-6 py-3 table-header">% Subsidio</th>
                  <th className="px-6 py-3 table-header">Decreto</th>
                  <th className="px-6 py-3 table-header">Vencimiento</th>
                  <th className="px-6 py-3 table-header">Activo</th>
                  <th className="px-6 py-3 table-header">Acción</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {subsidios.map((s) => (
                  <tr key={s.Id_subsidios} className="hover:bg-gray-50">
                    <td className="table-cell font-medium">{s.nombre_cliente || s.Id_cliente}</td>
                    <td className="table-cell font-mono text-sm">{s.rut_cliente || "-"}</td>
                    <td className="table-cell text-right font-mono">{s.porcentaje_subsidio}%</td>
                    <td className="table-cell">{s.fecha_decreto}</td>
                    <td className="table-cell">{s.fecha_venc}</td>
                    <td className="table-cell">
                      <span
                        className={
                          s.activo
                            ? "px-2 py-1 rounded-full text-xs bg-green-100 text-green-800"
                            : "px-2 py-1 rounded-full text-xs bg-gray-100 text-gray-800"
                        }
                      >
                        {s.activo ? "Sí" : "No"}
                      </span>
                    </td>
                    <td className="table-cell">
                      <button
                        className="btn-secondary text-sm flex items-center gap-2 disabled:opacity-50"
                        disabled={working || !s.activo}
                        onClick={() => desactivar(s.Id_subsidios)}
                      >
                        <Trash2 className="w-4 h-4" />
                        Desactivar
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}