import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import QRCode from 'qrcode';
import {
  formatUsd,
  formatBs,
  bsDesdeUsd,
  variablesTema,
  ESTADO_META,
  ESTADO_PAGO_META,
  type TicketPedido,
} from '@gustito/shared';
import { supabase } from '../lib/supabase';
import AvisoNoFiscal from '../components/AvisoNoFiscal';

export default function Ticket() {
  const { id = '' } = useParams();
  const [qr, setQr] = useState<string | null>(null);

  useEffect(() => {
    QRCode.toDataURL(id, { width: 220, margin: 1 })
      .then(setQr)
      .catch(() => setQr(null));
  }, [id]);

  const { data, isLoading, error } = useQuery({
    queryKey: ['ticket', id],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('pedido_ticket', { p_pedido_id: id });
      if (error) throw error;
      const t = (data as unknown as TicketPedido[])?.[0];
      if (!t) throw new Error('No encontramos este ticket.');
      return t;
    },
    refetchInterval: 15000,
  });

  if (isLoading) return <Centro>Cargando ticket...</Centro>;
  if (error || !data) return <Centro>{(error as Error)?.message ?? 'Error'}</Centro>;

  const t = data;
  const totalBs = t.tasa_bs ? bsDesdeUsd(t.total_usd, t.tasa_bs) : null;

  return (
    <div
      className="min-h-full bg-stone-100 py-6 px-4"
      style={variablesTema(t.restaurante_color) as React.CSSProperties}
    >
      <div className="max-w-sm mx-auto bg-white rounded-3xl shadow-tarjeta overflow-hidden">
        <div className="bg-marca text-marca-contraste p-4 text-center">
          <p className="text-white/80 text-sm">{t.restaurante_nombre}</p>
          <p className="text-2xl font-extrabold">{t.codigo}</p>
        </div>
        <div className="p-5 space-y-3">
          <div className="flex justify-between text-sm">
            <span className="text-stone-500">Estado</span>
            <span className="font-bold" style={{ color: ESTADO_META[t.estado].color }}>
              {ESTADO_META[t.estado].label}
            </span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-stone-500">Pago</span>
            <span className="font-bold" style={{ color: ESTADO_PAGO_META[t.pago_estado].color }}>
              {ESTADO_PAGO_META[t.pago_estado].label}
            </span>
          </div>
          {t.tipo_entrega === 'mesa' && (
            <div className="flex justify-between text-sm">
              <span className="text-stone-500">Mesa</span>
              <span className="font-bold">{t.mesa}</span>
            </div>
          )}

          <div className="border-t pt-3">
            <p className="font-bold">{t.cliente_nombre}</p>
            <p className="text-sm text-stone-500">
              {t.cliente_telefono}
              {t.cliente_cedula ? ` · ${t.cliente_cedula}` : ''}
            </p>
          </div>

          <ul className="border-t pt-3 text-sm space-y-1.5">
            {t.items.map((it, i) => (
              <li key={i}>
                <div className="flex justify-between">
                  <span>
                    {it.cantidad}× {it.nombre}
                  </span>
                  <span>{formatUsd(it.precio_usd * it.cantidad)}</span>
                </div>
                {it.nota && <p className="text-xs text-stone-500">{it.nota}</p>}
              </li>
            ))}
          </ul>

          {/* Solo el total. NADA de desglose de impuesto ni RIF del negocio: este
              papel no puede parecerse a una factura (Gustito es el puente, quien
              factura es el negocio por su propia via). */}
          <div className="border-t pt-3 flex justify-between font-extrabold">
            <span>Total</span>
            <span>
              {formatUsd(t.total_usd)}
              {totalBs ? ` · ${formatBs(totalBs)}` : ''}
            </span>
          </div>
          <AvisoNoFiscal />

          {qr && (
            <div className="flex flex-col items-center border-t pt-4">
              <p className="text-xs text-stone-500 mb-2">Muestra este QR al retirar</p>
              <img src={qr} alt="QR del pedido" className="w-40 h-40" />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function Centro({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-full flex items-center justify-center p-6 text-center text-stone-500">
      {children}
    </div>
  );
}
