'use client';

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

async function loadOtForPrint(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;

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

  const catalogRows = await db.catalogos.toArray();
  const cosasTrae = catalogRows.filter((r) => r.tipo === 'cosa_trae');
  const inventario = (ot.cosasTrae || []).map((value: any) => {
    const numericValue = Number(value?.cosaTraeId || value?.id || value);
    const match = cosasTrae.find((r) => Number(r.id) === numericValue);
    return match?.nombre || String(value?.nombre || value || numericValue);
  });

  return { ot, cliente, inventario };
}

export default function ImprimirRecepcionPage() {
  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', 'recepcion', routeId],
    queryFn: () => loadOtForPrint(routeId),
    enabled: !!routeId,
  });

  useEffect(() => {
    if (data?.ot?.numeroOt) {
      document.title = `MBtaller-Recepcion-${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={ClipboardList}
          title="No se encontró la orden de trabajo."
          action={
            <Button onClick={() => router.push(`/dashboard/ots/${routeId}`)}>
              Volver
            </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 recepción'}
        </Button>
      </div>
      <RecepcionPrint
        ot={data.ot}
        cliente={data.cliente}
        inventario={data.inventario || []}
      />
    </div>
  );
}