"use client";

import { useEffect, useMemo, useState } from "react";
import { AlertCircle, RefreshCw, Filter } from "lucide-react";

type Sector = {
  id_sector: number;
  nombre_sector: string;
};

type ResumenItem = {
  Id_cliente: number;
  nombre_cliente?: string;
  rut_cliente?: string;
  nombre_sector?: string;
  boletas_pendientes?: number;
  total_deuda?: number;
};

type ResumenResponse = {
  deudas: ResumenItem[];
  totales: {
    totalDeuda: number;
    totalBoletas: number;
    totalClientes: number;
  };
};

export default function ReporteDeudasPage() {
  const [loading, setLoading] = useState(false);
  const [mensaje, setMensaje] = useState<string | null>(null);
  const [data, setData] = useState<ResumenResponse | null>(null);
  const [sectores, setSectores] = useState<Sector[]>([]);
  const [sectorFiltro, setSectorFiltro] = useState<string>("");
  const [rutFiltro, setRutFiltro] = useState<string>("");

  const totalDeuda = useMemo(() => Number(data?.totales?.totalDeuda || 0), [data]);

  const cargar = async () => {
    setLoading(true);
    setMensaje(null);
    try {
      const params = new URLSearchParams({ resumen: "true" });
      if (sectorFiltro) params.append("sectorId", sectorFiltro);
      if (rutFiltro) params.append("rut", rutFiltro);
      
      const res = await fetch(`/api/reportes/deudas?${params.toString()}`);
      const json = await res.json();
      if (!res.ok) throw new Error(json?.error || "Error al obtener reporte");
      setData(json);
    } catch (e: any) {
      setMensaje(e?.message || "Error al obtener reporte");
    } finally {
      setLoading(false);
    }
  };

  const cargarSectores = async () => {
    try {
      const res = await fetch("/api/mantenedores/sectores");
      const json = await res.json();
      if (res.ok) setSectores(json);
    } catch (e) {
      console.error("Error al cargar sectores:", e);
    }
  };

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

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

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Reporte de Deudas</h1>
        <p className="mt-1 text-sm text-gray-500">Resumen de clientes con deuda y boletas pendientes.</p>
      </div>

      {mensaje && (
        <div className="rounded-md p-4 border bg-red-50 border-red-200">
          <div className="flex">
            <div className="flex-shrink-0">
              <AlertCircle className="h-5 w-5 text-red-400" />
            </div>
            <div className="ml-3">
              <p className="text-sm text-red-700">{mensaje}</p>
            </div>
          </div>
        </div>
      )}

      <div className="bg-white shadow sm:rounded-lg p-4">
        <div className="flex flex-col gap-4">
          <div className="flex items-center gap-2">
            <button
              className="inline-flex items-center px-3 py-2 rounded-md text-sm bg-white border border-gray-200 text-gray-700 hover:bg-gray-50"
              onClick={() => void cargar()}
              disabled={loading}
            >
              <RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
              Recargar
            </button>
            <div className="ml-auto text-sm text-gray-600">Total deuda: ${totalDeuda.toLocaleString("es-CL")}</div>
          </div>

          <div className="flex items-center gap-3">
            <Filter className="h-4 w-4 text-gray-400" />
            <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Filtrar por Sector</label>
                <select
                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                  value={sectorFiltro}
                  onChange={(e) => setSectorFiltro(e.target.value)}
                >
                  <option value="">Todos los sectores</option>
                  {sectores.map((s) => (
                    <option key={s.id_sector} value={s.id_sector}>
                      {s.nombre_sector}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Filtrar por RUT</label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="Ej: 12345678-9"
                  value={rutFiltro}
                  onChange={(e) => setRutFiltro(e.target.value)}
                />
              </div>
            </div>
            {(sectorFiltro || rutFiltro) && (
              <button
                className="px-3 py-2 text-sm text-gray-600 hover:text-gray-900"
                onClick={() => {
                  setSectorFiltro("");
                  setRutFiltro("");
                }}
              >
                Limpiar filtros
              </button>
            )}
          </div>
        </div>

        {data?.totales && (
          <div className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
            <div className="rounded-md border border-gray-200 bg-gray-50 p-3">
              <div className="text-gray-500">Clientes con deuda</div>
              <div className="font-semibold">{Number(data.totales.totalClientes || 0).toLocaleString("es-CL")}</div>
            </div>
            <div className="rounded-md border border-gray-200 bg-gray-50 p-3">
              <div className="text-gray-500">Boletas pendientes</div>
              <div className="font-semibold">{Number(data.totales.totalBoletas || 0).toLocaleString("es-CL")}</div>
            </div>
            <div className="rounded-md border border-gray-200 bg-gray-50 p-3">
              <div className="text-gray-500">Total deuda</div>
              <div className="font-semibold">${Number(data.totales.totalDeuda || 0).toLocaleString("es-CL")}</div>
            </div>
          </div>
        )}
      </div>

      <div className="bg-white shadow sm:rounded-lg overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sector</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Boletas</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Total deuda</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {(data?.deudas || []).map((r) => (
                <tr key={r.Id_cliente}>
                  <td className="px-4 py-3 whitespace-nowrap">
                    <div className="text-sm font-medium text-gray-900">{r.nombre_cliente || `#${r.Id_cliente}`}</div>
                    <div className="text-xs text-gray-500">{r.rut_cliente || ""}</div>
                  </td>
                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">
                    {r.nombre_sector || "-"}
                  </td>
                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700 text-right">
                    {Number(r.boletas_pendientes || 0).toLocaleString("es-CL")}
                  </td>
                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700 text-right">
                    ${Number(r.total_deuda || 0).toLocaleString("es-CL")}
                  </td>
                </tr>
              ))}
              {!loading && (data?.deudas || []).length === 0 && (
                <tr>
                  <td colSpan={4} className="px-4 py-10 text-center text-gray-500">
                    No hay datos.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}