// La factura fiscal del cliente, en su telefono. Si la Estacion Fiscal del
// negocio ya sello esta venta, aqui aparece el documento con su numero y el
// enlace de comprobacion (el mismo QR del papel). Mientras no exista (o el
// negocio no facture por este circuito), muestra el aviso de siempre: "esto no
// es factura" -- nunca las dos cosas a la vez, que se contradicen.
import { useQuery } from '@tanstack/react-query';
import { supabase } from '../lib/supabase';
import AvisoNoFiscal from './AvisoNoFiscal';

// El sello vive detras del enrutador (un QR/enlace impreso no se cambia nunca).
const SELLO_BASE = 'https://sello.gustitoxpress.app';

interface Factura {
  numero_documento: number | null;
  numero_control: number | null;
  token: string | null;
  sellado_en: string | null;
  rif: string | null;
  razon_social: string | null;
}

export default function FacturaFiscal({ tipo, id }: { tipo: 'pedido' | 'cuenta'; id: string }) {
  const { data } = useQuery({
    queryKey: ['factura', tipo, id],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('factura_de_venta', {
        p_tipo: tipo,
        p_origen_id: id,
      });
      if (error) throw error;
      return (data ?? null) as Factura | null;
    },
    // La venta se sella minutos despues de cerrarse: se sigue preguntando
    // suave hasta que aparezca, y ahi se deja quieto.
    refetchInterval: (q) => (q.state.data ? false : 30000),
  });

  if (!data?.token) return <AvisoNoFiscal />;

  const fecha = data.sellado_en
    ? new Date(data.sellado_en).toLocaleDateString('es-VE', { day: '2-digit', month: '2-digit', year: 'numeric' })
    : null;

  return (
    <div className="mt-3 rounded-2xl border-2 border-marca bg-white p-4 shadow-tarjeta">
      <p className="font-bold text-stone-800">Tu factura fiscal</p>
      <p className="mt-1 text-sm text-stone-600">
        {data.razon_social} · {data.rif}
      </p>
      <p className="text-sm text-stone-600">
        Documento Nº <b className="text-stone-800">{data.numero_documento}</b>
        {data.numero_control != null && (
          <>
            {' '}· Control <b className="text-stone-800">{data.numero_control}</b>
          </>
        )}
        {fecha && <> · {fecha}</>}
      </p>
      <a
        href={`${SELLO_BASE}/v/${data.token}`}
        target="_blank"
        rel="noreferrer"
        className="mt-3 block rounded-xl bg-marca py-2.5 text-center text-sm font-bold text-marca-contraste"
      >
        Ver y comprobar el documento
      </a>
    </div>
  );
}
