"use client";

import { useState, useEffect } from "react";
import { useParams, useRouter } from "next/navigation";
import { ArrowLeft, Download, Printer } from "lucide-react";
import { downloadBoletaPDF, type BoletaData } from "@/components/BoletaPDF";
import BoletaPreview from "@/components/BoletaPreview";

export default function BoletaIndividualPage() {
  const params = useParams();
  const router = useRouter();
  const [boleta, setBoleta] = useState<BoletaData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [generandoPDF, setGenerandoPDF] = useState(false);

  useEffect(() => {
    if (params.id) {
      cargarBoleta();
    }
  }, [params.id]);

  const cargarBoleta = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(`/api/facturacion/${params.id}/pdf`);
      if (!res.ok) {
        throw new Error('Error al cargar boleta');
      }
      const data = await res.json();
      setBoleta(data);
    } catch (err: any) {
      setError(err.message || 'Error al cargar boleta');
    } finally {
      setLoading(false);
    }
  };

  const descargarPDF = async () => {
    if (!boleta) return;
    
    setGenerandoPDF(true);
    try {
      await downloadBoletaPDF(boleta, `boleta_${boleta.num_boleta}.pdf`);
    } catch (err) {
      console.error('Error al generar PDF:', err);
      alert('Error al generar PDF');
    } finally {
      setGenerandoPDF(false);
    }
  };

  const imprimirDirecto = async () => {
    if (!boleta) return;
    
    try {
      const { pdf } = await import('@react-pdf/renderer');
      const { BoletaPDF } = await import('@/components/BoletaPDF');
      const blob = await pdf(<BoletaPDF boleta={boleta} />).toBlob();
      
      const url = URL.createObjectURL(blob);
      const printWindow = window.open(url, '_blank');
      
      if (printWindow) {
        printWindow.onload = () => {
          printWindow.print();
        };
      } else {
        alert('Por favor, permite las ventanas emergentes para imprimir');
      }
    } catch (err) {
      console.error('Error al imprimir:', err);
      alert('Error al preparar la impresión');
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Cargando boleta...</p>
        </div>
      </div>
    );
  }

  if (error || !boleta) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="text-red-600 mb-4">
            <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 18.5c-.77.833.192 2.5 1.732 2.5z" />
            </svg>
          </div>
          <h2 className="text-xl font-semibold text-gray-900 mb-2">Error al cargar boleta</h2>
          <p className="text-gray-600 mb-4">{error}</p>
          <button
            onClick={() => router.back()}
            className="btn-secondary flex items-center gap-2"
          >
            <ArrowLeft className="w-4 h-4" />
            Volver
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto p-6">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-4">
          <button
            onClick={() => router.back()}
            className="btn-secondary flex items-center gap-2"
          >
            <ArrowLeft className="w-4 h-4" />
            Volver
          </button>
          <div>
            <h1 className="text-2xl font-bold text-gray-900">
              Boleta N° {boleta.num_boleta}
            </h1>
            <p className="text-gray-600">
              {boleta.datos_cliente.nombre_cliente} - {boleta.datos_lectura.mes_facturacion}
            </p>
          </div>
        </div>
        <div className="flex gap-2">
          <button
            onClick={imprimirDirecto}
            className="btn-secondary flex items-center gap-2"
          >
            <Printer className="w-4 h-4" />
            Imprimir Directo
          </button>
          <button
            onClick={descargarPDF}
            disabled={generandoPDF}
            className="btn-primary flex items-center gap-2"
          >
            {generandoPDF ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                Generando...
              </>
            ) : (
              <>
                <Download className="w-4 h-4" />
                Descargar PDF
              </>
            )}
          </button>
        </div>
      </div>

      {/* Vista previa de la boleta con marca de agua MiAPR */}
      <BoletaPreview boleta={boleta} />
    </div>
  );
}