"use client";

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

type ResumenRow = {
  fecha_cierre: number;
  consumo_m3: number;
  deuda_mes_anterior: number;
  total_facturado_en_el_mes: number;
  total_ingresos_en_el_mes: number;
  totalxcobrar: number;
  total_cargo_fijo: number;
  total_consumo: number;
  subsidio_descontadoxfacturar: number;
  total_cuotas_mortuorias: number;
  total_donaciones: number;
  multasxatraso: number;
  total_facturacion_del_mes: number;
};


type ResumenDeudasResponse = {
  deudas: any[];
  totales: {
    totalDeuda: number;
    totalBoletas: number;
    totalClientes: number;
  };
};

export default function ReportesPage() {
  const [tab, setTab] = useState<"resumenes" | "deudas">("resumenes");

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

  const [resumenes, setResumenes] = useState<ResumenRow[]>([]);
  const [resumenDeudas, setResumenDeudas] = useState<ResumenDeudasResponse | null>(null);

  const cargar = async () => {
    setLoading(true);
    setMensaje(null);
    try {
      if (tab === "resumenes") {
        const res = await fetch("/api/reportes/resumenes");
        const data = await res.json();
        if (!res.ok) throw new Error(data?.error || "Error al obtener resumenes");
        setResumenes(data);
      }


      if (tab === "deudas") {
        const res = await fetch("/api/reportes/deudas?resumen=true");
        const data = await res.json();
        if (!res.ok) throw new Error(data?.error || "Error al obtener resumen de deudas");
        setResumenDeudas(data);
      }
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al cargar reporte" });
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Reportes</h1>
        <p className="mt-1 text-sm text-gray-500">Reportes contables y de gestión.</p>
      </div>

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

      <div className="flex flex-wrap gap-2 items-center">
        <button
          className={`px-3 py-2 rounded-md text-sm border ${
            tab === "resumenes" ? "bg-gray-900 text-white border-gray-900" : "bg-white text-gray-700 border-gray-200"
          }`}
          onClick={() => setTab("resumenes")}
          disabled={working}
        >
          Resúmenes
        </button>
        <button
          className={`px-3 py-2 rounded-md text-sm border ${
            tab === "deudas" ? "bg-gray-900 text-white border-gray-900" : "bg-white text-gray-700 border-gray-200"
          }`}
          onClick={() => setTab("deudas")}
          disabled={working}
        >
          Deudas (Resumen)
        </button>


        <button
          className="ml-auto inline-flex items-center px-3 py-2 rounded-md text-sm border border-gray-200 bg-white text-gray-700 hover:bg-gray-50"
          onClick={async () => {
            setWorking(true);
            try {
              await cargar();
            } finally {
              setWorking(false);
            }
          }}
          disabled={working}
        >
          <RefreshCw className={`h-4 w-4 mr-2 ${working ? "animate-spin" : ""}`} />
          Recargar
        </button>
      </div>

      {loading && <div className="text-sm text-gray-500">Cargando...</div>}

      {tab === "resumenes" && (
        <div className="bg-white shadow sm:rounded-lg overflow-hidden">
          <div className="px-4 py-3 border-b border-gray-200">
            <h2 className="text-lg font-semibold text-gray-900">Resúmenes</h2>
          </div>
          <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">Fecha cierre</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Facturación mes</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ingresos mes</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total x cobrar</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {resumenes.map((r) => (
                  <tr key={r.fecha_cierre}>
                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{r.fecha_cierre}</td>
                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
                      ${Number(r.total_facturacion_del_mes || 0).toLocaleString("es-CL")}
                    </td>
                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
                      ${Number(r.total_ingresos_en_el_mes || 0).toLocaleString("es-CL")}
                    </td>
                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
                      ${Number(r.totalxcobrar || 0).toLocaleString("es-CL")}
                    </td>
                  </tr>
                ))}
                {!loading && resumenes.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>
      )}


      {tab === "deudas" && (
        <div className="bg-white shadow sm:rounded-lg p-4">
          <h2 className="text-lg font-semibold text-gray-900">Deudas (Resumen)</h2>
          <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">Total deuda</div>
              <div className="font-semibold">${Number(resumenDeudas?.totales?.totalDeuda || 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(resumenDeudas?.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">Clientes con deuda</div>
              <div className="font-semibold">{Number(resumenDeudas?.totales?.totalClientes || 0).toLocaleString("es-CL")}</div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}