'use client';

import CotizacionPrint from '@/components/print/CotizacionPrint';
import { Button } from '@/components/ui/button';
import { EmptyState } from '@/components/ui/empty-state';
import { db } from '@/lib/db';
import { getLocalOtByRouteId, putRemoteOtIfNewer, setLocalOtCotizacion } from '@/lib/offline-ots';
import { cotizacionesApi, otsApi } from '@/lib/api';
import { printWhenReady } from '@/lib/print';
import '@/app/print-styles.css';
import { useQuery } from '@tanstack/react-query';
import { ArrowLeft, Loader2, Printer, Receipt } from 'lucide-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

async function loadCotizacionForPrint(routeId: string) {
  const numericId = Number(routeId);

  if (Number.isFinite(numericId) && numericId > 0 && navigator.onLine) {
    try {
      const remoteOt = await otsApi.get(numericId);
      await putRemoteOtIfNewer(remoteOt);
    } catch (e) {
      console.warn('Using local cache for print', e);
    }
  }

  const ot = await getLocalOtByRouteId(routeId);
  if (!ot) return null;

  // Refresh cotizacion
  if (ot.serverId && navigator.onLine) {
    try {
      const remoteCot = await cotizacionesApi.getByOt(Number(ot.serverId));
      if (remoteCot) {
        await setLocalOtCotizacion(Number(ot.serverId), remoteCot);
      }
    } catch (e) {
      console.warn('Using local cotizacion cache for print', e);
    }
  }

  const freshOt = await getLocalOtByRouteId(routeId);
  const cotizacion = freshOt?.cotizaciones?.[0] || null;

  const cliente = freshOt?.clienteTarjeta
    ? await db.clientes.where('tarjeta').equals(freshOt.clienteTarjeta).first()
    : null;

  return { ot: freshOt, cliente, cotizacion };
}

export default function ImprimirCotizacionPage() {
  const params = useParams();
  const router = useRouter();
  const routeId = String(params.id);
  const [printing, setPrinting] = useState(false);

  const handlePrint = async () => {
    if (printing) return;
    setPrinting(true);
    try {
      await printWhenReady();
    } finally {
      setPrinting(false);
    }
  };

  const { data, isLoading } = useQuery({
    queryKey: ['print', 'cotizacion', routeId],
    queryFn: () => loadCotizacionForPrint(routeId),
    enabled: !!routeId,
  });

  // El titulo de la pestaña es lo que Chrome/Edge sugieren como nombre de
  // archivo al "Guardar como PDF" -- sin esto, siempre salia el generico
  // "MBtaller" (el <title> global de layout.tsx) y habia que renombrar el
  // archivo a mano cada vez.
  useEffect(() => {
    if (data?.ot?.numeroOt) {
      document.title = `MBtaller-Cotizacion-${data.ot.numeroOt}`;
    }
  }, [data?.ot?.numeroOt]);

  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-surface">
        <Loader2 className="h-8 w-8 animate-spin text-subtle-foreground" />
      </div>
    );
  }

  if (!data?.ot) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-surface">
        <EmptyState
          icon={Receipt}
          title="No se encontró la orden de trabajo."
          action={
            <Button onClick={() => router.push(`/dashboard/ots/${routeId}`)}>
              Volver
            </Button>
          }
        />
      </div>
    );
  }

  if (!data.cotizacion) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-surface">
        <EmptyState
          icon={Receipt}
          title="No hay cotización creada para esta orden."
          description="Crea una cotización primero y agrega productos o servicios."
          action={
            <Button onClick={() => router.push(`/dashboard/ots/${routeId}/cotizacion`)}>
              Ir a cotización
            </Button>
          }
        />
      </div>
    );
  }

  return (
    <div className="print-page-wrapper">
      <div className="print-page-toolbar no-print">
        <Button variant="outline" className="border-border" onClick={() => router.push(`/dashboard/ots/${routeId}`)}>
          <ArrowLeft className="mr-2 h-4 w-4" />Volver al detalle
        </Button>
        <Button disabled={printing} onClick={handlePrint}>
          {printing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Printer className="mr-2 h-4 w-4" />}
          {printing ? 'Preparando...' : 'Imprimir cotización'}
        </Button>
      </div>
      <CotizacionPrint
        ot={data.ot}
        cliente={data.cliente}
        cotizacion={data.cotizacion}
      />
    </div>
  );
}