"use client";

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

type Row = {
  sector: number;
  nombre_sector: string;
  cantidad_boletas: number;
  total_boletas: number;
  total_consumo_m3: number;
};

export default function ReporteBoletasPorSectorPage() {
  const now = new Date();
  const [anio, setAnio] = useState(String(now.getFullYear()));
  const [mes, setMes] = useState(String(now.getMonth() + 1));
  const [loading, setLoading] = useState(false);
  const [generandoPDF, setGenerandoPDF] = useState(false);
  const [mensaje, setMensaje] = useState<string | null>(null);
  const [rows, setRows] = useState<Row[]>([]);
  const [sectores, setSectores] = useState<any[]>([]);

  const total = useMemo(
    () => rows.reduce((acc, r) => acc + Number(r.total_boletas || 0), 0),
    [rows]
  );

  const cargar = async () => {
    setLoading(true);
    setMensaje(null);
    try {
      const [reporteRes, sectoresRes] = await Promise.all([
        fetch(`/api/reportes/boletas?anio=${encodeURIComponent(anio)}&mes=${encodeURIComponent(mes)}`),
        fetch('/api/mantenedores/sectores')
      ]);
      
      const reporteData = await reporteRes.json();
      const sectoresData = await sectoresRes.json();
      
      if (!reporteRes.ok) throw new Error(reporteData?.error || "Error al obtener reporte");
      
      setRows(reporteData);
      setSectores(sectoresData);
    } catch (e: any) {
      setMensaje(e?.message || "Error al obtener reporte");
    } finally {
      setLoading(false);
    }
  };

  const descargarPDFsMasivos = async (sectorId?: number) => {
    setGenerandoPDF(true);
    setMensaje(null);
    
    try {
      const body = {
        mes: parseInt(mes),
        anio: parseInt(anio),
        sectorId: sectorId || null,
        tipo: 'individual'
      };

      const response = await fetch('/api/reportes/boletas-pdf', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(body)
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || 'Error al generar PDFs');
      }

      // Descargar el archivo ZIP
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      
      const sectorTexto = sectorId ? `_sector_${sectorId}` : '_todos_sectores';
      link.download = `boletas_${mes}_${anio}${sectorTexto}.zip`;
      
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);

      setMensaje('PDFs generados y descargados correctamente');
    } catch (error: any) {
      setMensaje(error.message || 'Error al generar PDFs');
    } finally {
      setGenerandoPDF(false);
    }
  };

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

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Boletas por Sector</h1>
        <p className="mt-1 text-sm text-gray-500">Resumen por sector (cantidad y totales) con descarga de PDFs.</p>
      </div>

      {mensaje && (
        <div className={`rounded-md p-4 border ${
          mensaje.includes('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.includes('Error') ? 'text-red-400' : 'text-green-400'
              }`} />
            </div>
            <div className="ml-3">
              <p className={`text-sm ${
                mensaje.includes('Error') ? 'text-red-700' : 'text-green-700'
              }`}>{mensaje}</p>
            </div>
          </div>
        </div>
      )}

      <div className="bg-white shadow sm:rounded-lg p-4">
        <div className="flex flex-wrap gap-2 items-end">
          <div>
            <label className="block text-sm font-medium text-gray-700">Año</label>
            <input
              className="mt-1 w-28 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
              value={anio}
              onChange={(e) => setAnio(e.target.value)}
              inputMode="numeric"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">Mes</label>
            <input
              className="mt-1 w-20 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
              value={mes}
              onChange={(e) => setMes(e.target.value)}
              inputMode="numeric"
            />
          </div>
          <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" : ""}`} />
            Consultar
          </button>
          <button
            className="inline-flex items-center px-3 py-2 rounded-md text-sm bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
            onClick={() => descargarPDFsMasivos()}
            disabled={generandoPDF || rows.length === 0}
          >
            {generandoPDF ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                Generando...
              </>
            ) : (
              <>
                <Download className="h-4 w-4 mr-2" />
                Descargar Todos los PDFs
              </>
            )}
          </button>
          <div className="ml-auto text-sm text-gray-600">Total: ${total.toLocaleString("es-CL")}</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">Sector</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Cantidad</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Total boletas</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Consumo m3</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {rows.map((r) => (
                <tr key={r.sector}>
                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{r.nombre_sector}</td>
                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700 text-right">
                    {Number(r.cantidad_boletas || 0).toLocaleString("es-CL")}
                  </td>
                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700 text-right">
                    ${Number(r.total_boletas || 0).toLocaleString("es-CL")}
                  </td>
                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700 text-right">
                    {Number(r.total_consumo_m3 || 0).toLocaleString("es-CL")}
                  </td>
                  <td className="px-4 py-3 whitespace-nowrap text-center">
                    <button
                      className="inline-flex items-center px-2 py-1 rounded text-xs bg-green-600 text-white hover:bg-green-700 disabled:opacity-50"
                      onClick={() => descargarPDFsMasivos(r.sector)}
                      disabled={generandoPDF}
                      title={`Descargar PDFs del sector ${r.nombre_sector}`}
                    >
                      <FileText className="h-3 w-3 mr-1" />
                      PDF Sector
                    </button>
                  </td>
                </tr>
              ))}
              {!loading && rows.length === 0 && (
                <tr>
                  <td colSpan={5} className="px-4 py-10 text-center text-gray-500">
                    No hay datos.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}