import { Icono } from '@gustito/shared/iconos';
import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { precioDual, formatUsd, variablesTema, type MetodosPago } from '@gustito/shared';
import { supabase } from '../lib/supabase';
import { subirComprobante } from '../lib/storage';
import AvisoNoFiscal from '../components/AvisoNoFiscal';
import FacturaFiscal from '../components/FacturaFiscal';

interface ItemC {
  nombre: string;
  cantidad: number;
  precio_usd: number;
  nota?: string | null;
}
interface PedidoC {
  codigo: string;
  estado: string;
  total_usd: number;
  cliente: string | null;
  pagado: boolean;
  para_llevar: boolean;
  items: ItemC[];
}
interface CuentaData {
  id: string;
  mesa: string;
  estado: 'abierta' | 'por_pagar' | 'cerrada';
  mesero_nombre: string | null;
  restaurante_nombre: string;
  restaurante_slug: string;
  restaurante_color: string;
  restaurante_telefono: string | null;
  tasa_bs: number | null;
  total_usd: number;
  metodo_pago: string | null;
  metodos_pago: MetodosPago | null;
  promedio_min: number;
  tiempo_estimado_min: number | null;
  pedidos: PedidoC[];
  llamadas: string[];
  modo_cuenta: string;
  comensales: ComensalC[];
  viene_mesero: string | null;
}

interface ComensalC {
  id: string;
  nombre: string;
  orden: number;
  total_usd: number;
  pagado_usd: number;
  por_revisar_usd: number;
}

const esPagoOnline = (m: string | null) => m === 'pago_movil' || m === 'zelle' || m === 'transferencia';

const METODO_LABEL: Record<string, string> = {
  efectivo: 'Efectivo',
  punto_venta: 'Punto de venta (datafono)',
  pago_movil: 'Pago Movil',
  zelle: 'Zelle',
  transferencia: 'Transferencia',
};

export default function Cuenta() {
  const { id = '' } = useParams();
  const navigate = useNavigate();
  const [pagar, setPagar] = useState(false);
  const [pagarPersona, setPagarPersona] = useState<ComensalC | null>(null);
  const [llamando, setLlamando] = useState(false);
  const [enviandoOrden, setEnviandoOrden] = useState(false);
  const [errOrden, setErrOrden] = useState<string | null>(null);

  const { data, refetch } = useQuery({
    queryKey: ['cuenta', id],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('cuenta_mesa', { p_cuenta_id: id });
      if (error) throw error;
      const fila = (data as unknown as CuentaData[])?.[0];
      if (!fila) throw new Error('No encontramos esta cuenta.');
      return fila;
    },
    refetchInterval: 8000,
  });

  // Mesa que nadie llego a usar y se cerro sola a los 5 minutos: no es una
  // despedida, es que todavia no ha pedido nada. De vuelta al menu, y al pedir
  // se le abre la mesa de nuevo.
  const sinConsumo = (data?.pedidos ?? []).filter((p) => p.estado !== 'cancelado').length === 0;
  const cerradaSinUsar = data?.estado === 'cerrada' && sinConsumo;
  useEffect(() => {
    if (cerradaSinUsar && data) navigate(`/${data.restaurante_slug}?mesa=${data.mesa}`, { replace: true });
  }, [cerradaSinUsar, data, navigate]);

  if (!data) return <Centrado>Cargando tu cuenta...</Centrado>;
  const c = data;
  if (cerradaSinUsar) return <Centrado>Un momento...</Centrado>;

  // Mesa ya cobrada y cerrada: despedida limpia (el cliente ya no está "sentado").
  if (c.estado === 'cerrada') {
    return (
      <div
        className="flex min-h-full items-center justify-center bg-crema p-6"
        style={variablesTema(c.restaurante_color) as React.CSSProperties}
      >
        <div className="w-full max-w-md rounded-3xl bg-white p-8 text-center shadow-tarjeta">
          <div className="mx-auto grid h-16 w-16 place-items-center rounded-full bg-green-100 text-green-700">
            <Icono nombre="check" className="h-8 w-8" grosor={2.2} />
          </div>
          <p className="mt-3 text-xl font-extrabold text-marca-oscuro">
            {esPagoOnline(c.metodo_pago) ? '¡Pago verificado!' : '¡Gracias por tu visita!'}
          </p>
          <p className="mt-1.5 text-sm text-stone-500">
            La cuenta de la Mesa {c.mesa} quedó cerrada. Nos encantó atenderte en {c.restaurante_nombre}. ¡Vuelve
            pronto!
          </p>
        </div>
      </div>
    );
  }

  // Tiempo que le puso el mesero a esta mesa; si nadie le puso, el promedio del local.
  const eta = c.tiempo_estimado_min && c.tiempo_estimado_min > 0 ? c.tiempo_estimado_min : c.promedio_min;
  // ¿Ya está pedido el mesero y no lo ha atendido? (para no llamar dos veces)
  const llamadoMesero = (c.llamadas ?? []).includes('mesero');

  async function llamarMesero() {
    setLlamando(true);
    const { error } = await supabase.rpc('llamar_mesero', { p_cuenta_id: c.id, p_tipo: 'mesero' });
    setLlamando(false);
    if (error) alert(error.message);
    else refetch();
  }
  // Cobros por partes: lo que ya cobro el mesero se descuenta de lo que falta.
  const vivos = c.pedidos.filter((p) => p.estado !== 'cancelado');
  const pagadoUsd = vivos.filter((p) => p.pagado).reduce((s, p) => s + Number(p.total_usd), 0);
  const faltaUsd = Math.max(0, c.total_usd - pagadoUsd);

  // UNA MESA = UNA ORDEN: lo que se pide esperando a los demas queda de borrador
  // hasta que alguien manda la orden completa (UNA sola comanda). Lo manda
  // CUALQUIERA de la mesa: antes solo podia el telefono que la abrio, y si la
  // mesa la abria la mesera desde el panel, el boton no le salia a nadie y la
  // comanda no llegaba nunca a la cocina.
  const borradores = vivos.filter((p) => p.estado === 'recibido');
  const yaEnviados = vivos.length - borradores.length;

  async function enviarOrden() {
    setErrOrden(null);
    setEnviandoOrden(true);
    const { error } = await supabase.rpc('enviar_orden_mesa', { p_cuenta_id: c.id });
    setEnviandoOrden(false);
    if (error) {
      setErrOrden(error.message);
      return;
    }
    refetch();
  }

  return (
    <div className="min-h-full bg-crema pb-24" style={variablesTema(c.restaurante_color) as React.CSSProperties}>
      <header className="bg-marca p-5 text-marca-contraste">
        <p className="text-sm text-white/80">{c.restaurante_nombre}</p>
        <h1 className="text-2xl font-extrabold">Cuenta de la Mesa {c.mesa}</h1>
        {c.mesero_nombre && <p className="mt-1 text-sm font-semibold text-white/90">Te atiende: {c.mesero_nombre}</p>}
      </header>

      <div className="mx-auto max-w-xl p-4">
        {c.estado === 'abierta' && borradores.length > 0 && (
          <div className="mb-3 rounded-2xl bg-white p-4 shadow-tarjeta ring-2 ring-marca">
            <p className="font-extrabold text-marca-oscuro">
              {borradores.length === 1 ? 'Hay 1 pedido' : `Hay ${borradores.length} pedidos`} en la orden de
              la mesa
            </p>
            <p className="mt-1 text-sm text-stone-600">
              Cuando todos hayan pedido, manda la orden completa: a la cocina le llega una sola. Si nadie la manda,
              sale sola en 5 minutos.
            </p>
            <button
              onClick={enviarOrden}
              disabled={enviandoOrden}
              className="mt-3 w-full rounded-2xl bg-marca py-3 font-bold text-marca-contraste disabled:opacity-60"
            >
              {enviandoOrden ? 'Enviando...' : 'Enviar la orden a la cocina'}
            </button>
            {errOrden && <p className="mt-2 text-sm text-red-600">{errOrden}</p>}
          </div>
        )}
        {c.estado === 'abierta' && yaEnviados > 0 && (
          <div className="mb-3 rounded-2xl bg-marca-claro p-4 text-marca-oscuro shadow-tarjeta">
            <p className="flex items-center gap-2 font-extrabold">
              <Icono nombre="check" className="h-5 w-5" />
              ¡Orden en la cocina!
            </p>
            <p className="mt-1 text-sm">
              Tu comida estará lista en aproximadamente <b>{eta} min</b>. ¡Buen provecho y gracias por tu
              visita!
            </p>
          </div>
        )}
        {c.estado === 'por_pagar' &&
          (esPagoOnline(c.metodo_pago) ? (
            <Caja>
              <p className="font-bold text-marca-oscuro">
                ¡Recibimos tu pago! ({METODO_LABEL[c.metodo_pago!] ?? c.metodo_pago})
              </p>
              <p className="mt-1 text-sm text-stone-600">
                Lo estamos verificando y te confirmamos aquí mismo en un momento. No cierres esta pantalla. ¡Gracias
                por tu paciencia!
              </p>
            </Caja>
          ) : (
            <Caja>
              <p className="font-bold text-marca-oscuro">
                Pediste la cuenta{c.metodo_pago ? ` (${METODO_LABEL[c.metodo_pago] ?? c.metodo_pago})` : ''}
              </p>
              <p className="mt-1 text-sm text-stone-600">
                {c.metodo_pago === 'punto_venta'
                  ? 'El mesonero lleva el datáfono a tu mesa para que pagues con tarjeta.'
                  : 'El mesonero va a tu mesa a cobrarte.'}
              </p>
            </Caja>
          ))}

        <div className="mt-3 rounded-2xl bg-white p-4 shadow-tarjeta">
          <div className="flex items-center justify-between">
            <span className="font-bold text-stone-800">Total de la cuenta</span>
            <span className="text-xl font-extrabold text-marca-oscuro">{precioDual(c.total_usd, c.tasa_bs)}</span>
          </div>
          {pagadoUsd > 0 && (
            <p className="mt-1 text-right text-sm font-semibold text-green-700">
              Ya pagado {formatUsd(pagadoUsd)} · Falta {formatUsd(faltaUsd)}
            </p>
          )}
        </div>
        <FacturaFiscal tipo="cuenta" id={c.id} />

        <div className="mt-3 space-y-2">
          {c.pedidos.map((p) => (
            <div key={p.codigo} className="rounded-xl bg-white p-3 shadow-tarjeta">
              <div className="flex justify-between gap-2 text-sm">
                <span className="min-w-0 truncate font-bold text-stone-800">
                  {p.codigo}
                  {p.para_llevar && (
                    <span className="ml-1.5 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-bold text-amber-700">Para llevar</span>
                  )}
                  {p.cliente ? <span className="font-semibold text-stone-500"> · {p.cliente}</span> : null}
                </span>
                <span className="flex shrink-0 items-center gap-1.5 text-stone-500">
                  {p.pagado && (
                    <span className="rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-bold text-green-700">Pagado</span>
                  )}
                  {formatUsd(p.total_usd)}
                </span>
              </div>
              <ul className="mt-1 space-y-0.5 text-sm text-stone-600">
                {p.items.map((it, i) => (
                  <li key={i}>
                    {it.cantidad}× {it.nombre}
                    {it.nota ? <span className="text-amber-700"> · {it.nota}</span> : null}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {c.estado === 'abierta' && c.modo_cuenta === 'separada' && c.comensales.length > 0 && (
          <div className="mt-4 rounded-2xl bg-white p-4 shadow-tarjeta">
            <p className="mb-2 font-bold text-stone-800">Cada quien paga lo suyo</p>
            <div className="space-y-2">
              {c.comensales.map((cm) => {
                const pendiente = Math.max(
                  0,
                  Number(cm.total_usd) - Number(cm.pagado_usd) - Number(cm.por_revisar_usd),
                );
                return (
                  <div
                    key={cm.id}
                    className="flex items-center justify-between gap-2 border-b border-stone-100 pb-2 last:border-0 last:pb-0"
                  >
                    <div className="min-w-0">
                      <p className="truncate font-semibold text-stone-800">{cm.nombre}</p>
                      <p className="text-xs text-stone-500">{precioDual(cm.total_usd, c.tasa_bs)}</p>
                    </div>
                    {Number(cm.por_revisar_usd) > 0 ? (
                      <span className="shrink-0 rounded-full bg-amber-100 px-2.5 py-1 text-xs font-bold text-amber-700">
                        En revisión
                      </span>
                    ) : pendiente > 0 ? (
                      <button
                        onClick={() => setPagarPersona(cm)}
                        className="shrink-0 rounded-xl bg-marca px-3 py-2 text-sm font-bold text-marca-contraste"
                      >
                        Pagar mi parte
                      </button>
                    ) : Number(cm.total_usd) > 0 ? (
                      <span className="shrink-0 rounded-full bg-green-100 px-2.5 py-1 text-xs font-bold text-green-700">
                        Pagado
                      </span>
                    ) : (
                      <span className="shrink-0 text-xs text-stone-400">Sin pedidos</span>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {c.estado === 'abierta' && (
          <div className="mt-4 space-y-2">
            {c.viene_mesero ? (
              <div className="rounded-2xl bg-marca-claro py-3 text-center font-bold text-marca-oscuro">
                Ya viene {c.viene_mesero} a tu mesa
              </div>
            ) : llamadoMesero ? (
              <div className="rounded-2xl bg-marca-claro py-3 text-center font-bold text-marca-oscuro">
                Llamando al mesero, ya te atienden...
              </div>
            ) : (
              <button
                onClick={llamarMesero}
                disabled={llamando}
                className="w-full rounded-2xl bg-marca py-3.5 font-bold text-marca-contraste shadow-flotante disabled:opacity-60"
              >
                {llamando ? 'Llamando...' : 'Llamar al mesero'}
              </button>
            )}
            <div className="grid grid-cols-2 gap-2">
              <button
                onClick={() => navigate(`/${c.restaurante_slug}?mesa=${c.mesa}&agregar=1`)}
                className="rounded-2xl border-2 border-marca py-3 font-bold text-marca-oscuro"
              >
                Agregar mas
              </button>
              <button
                onClick={() => setPagar(true)}
                className="rounded-2xl border-2 border-marca py-3 font-bold text-marca-oscuro"
              >
                Pedir la cuenta
              </button>
            </div>
          </div>
        )}
      </div>

      {pagar && (
        <ModalPagar
          cuenta={c}
          onCerrar={() => setPagar(false)}
          onListo={() => {
            setPagar(false);
            refetch();
          }}
        />
      )}

      {pagarPersona && (
        <ModalPagarPersona
          cuenta={c}
          comensal={pagarPersona}
          onCerrar={() => setPagarPersona(null)}
          onListo={() => {
            setPagarPersona(null);
            refetch();
          }}
        />
      )}
    </div>
  );
}

function ModalPagar({
  cuenta,
  onCerrar,
  onListo,
}: {
  cuenta: CuentaData;
  onCerrar: () => void;
  onListo: () => void;
}) {
  const mp = (cuenta.metodos_pago ?? {}) as MetodosPago;
  // Online: el cliente paga desde aqui (referencia + captura). En persona: llama al mesero.
  const onlineOpts: [string, string][] = [
    ...(mp.pago_movil?.activo ? ([['pago_movil', 'Pago Móvil']] as [string, string][]) : []),
    ...(mp.zelle?.activo ? ([['zelle', 'Zelle']] as [string, string][]) : []),
    ...(mp.transferencia?.activo ? ([['transferencia', 'Transferencia']] as [string, string][]) : []),
  ];
  const personaOpts: [string, string][] = [
    ['efectivo', 'Efectivo'],
    ['punto_venta', 'Punto de venta'],
  ];

  const [metodo, setMetodo] = useState(onlineOpts[0]?.[0] ?? 'efectivo');
  const [referencia, setReferencia] = useState('');
  const [file, setFile] = useState<File | null>(null);
  const [enviando, setEnviando] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  const online = metodo === 'pago_movil' || metodo === 'zelle' || metodo === 'transferencia';
  const datos = (mp as Record<string, { banco?: string; cedula?: string; telefono?: string; correo?: string; titular?: string; cuenta?: string }>)[metodo];

  // Si el mesero ya cobro una parte, aqui se paga solo lo que FALTA.
  const faltaPagar = Math.max(
    0,
    cuenta.pedidos
      .filter((p) => p.estado !== 'cancelado' && !p.pagado)
      .reduce((s, p) => s + Number(p.total_usd), 0),
  );
  const huboParciales = faltaPagar < cuenta.total_usd;

  async function confirmar() {
    setErr(null);
    setEnviando(true);
    try {
      let path = '';
      if (file) {
        // Si la captura no sube (red, tamaño, etc.) NO abortamos el pago:
        // lo registramos igual con la referencia para que el restaurante lo verifique.
        try {
          path = await subirComprobante(file, cuenta.id);
        } catch {
          /* subida fallida: seguimos con la referencia */
        }
      }
      const { error } = await supabase.rpc('pedir_cuenta_mesa', {
        p_cuenta_id: cuenta.id,
        p_metodo: metodo,
        p_referencia: referencia || '',
        p_comprobante_url: path || '',
      });
      if (error) throw error;
      onListo();
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setEnviando(false);
    }
  }

  return (
    <div className="fixed inset-0 z-20 flex items-end justify-center bg-black/40 sm:items-center" onClick={onCerrar}>
      <div
        className="max-h-[92vh] w-full max-w-md overflow-y-auto rounded-t-3xl bg-white p-5 sm:rounded-3xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-extrabold text-stone-800">Pedir la cuenta</h2>
          <button onClick={onCerrar} className="h-8 w-8 text-2xl leading-none text-stone-400">
            &times;
          </button>
        </div>
        <p className="mt-1 text-sm text-stone-500">
          Total a pagar: <b className="text-marca-oscuro">{precioDual(faltaPagar, cuenta.tasa_bs)}</b>
          {huboParciales && <span className="block text-xs text-green-700">Ya se pagó una parte de la cuenta con el mesero.</span>}
        </p>
        <AvisoNoFiscal />

        {onlineOpts.length > 0 && (
          <>
            <p className="mb-1 mt-4 text-xs font-semibold text-stone-600">Paga desde aquí</p>
            <div className="grid grid-cols-2 gap-2">
              {onlineOpts.map(([v, label]) => (
                <BotonMetodo key={v} label={label} activo={metodo === v} onClick={() => setMetodo(v)} />
              ))}
            </div>
          </>
        )}
        <p className="mb-1 mt-4 text-xs font-semibold text-stone-600">
          {onlineOpts.length > 0 ? 'O paga en persona (llamas al mesero)' : 'Cómo vas a pagar?'}
        </p>
        <div className="grid grid-cols-2 gap-2">
          {personaOpts.map(([v, label]) => (
            <BotonMetodo key={v} label={label} activo={metodo === v} onClick={() => setMetodo(v)} />
          ))}
        </div>

        {online ? (
          <div className="mt-4 space-y-3">
            {datos && (
              <div className="rounded-xl bg-stone-50 p-3 text-sm">
                {datos.banco && <Fila k="Banco" v={datos.banco} />}
                {datos.cedula && <Fila k="Cedula/RIF" v={datos.cedula} />}
                {datos.telefono && <Fila k="Telefono" v={datos.telefono} />}
                {datos.correo && <Fila k="Correo" v={datos.correo} />}
                {datos.titular && <Fila k="Titular" v={datos.titular} />}
                {datos.cuenta && <Fila k="Cuenta" v={datos.cuenta} />}
              </div>
            )}
            <p className="text-xs text-stone-500">
              Pon los <b className="text-marca-oscuro">últimos 4 dígitos</b> de la referencia y adjunta la captura.
            </p>
            <input
              className="input"
              placeholder="Últimos 4 dígitos de la referencia"
              inputMode="numeric"
              maxLength={4}
              value={referencia}
              onChange={(e) => setReferencia(e.target.value.replace(/\D/g, '').slice(0, 4))}
            />
            <label className="block text-sm">
              <span className="text-xs font-semibold text-stone-500">Captura del pago</span>
              <input type="file" accept="image/*" className="mt-1 block text-sm" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
            </label>
          </div>
        ) : (
          <p className="mt-4 rounded-xl bg-stone-50 p-3 text-sm text-stone-600">
            {metodo === 'efectivo'
              ? 'Llama al mesero: va a tu mesa a cobrarte el efectivo.'
              : 'Llama al mesero: lleva el datáfono a tu mesa para que pagues con tarjeta.'}
          </p>
        )}

        {err && <p className="mt-3 text-sm text-red-600">{err}</p>}
        {online && !referencia && (
          <p className="mt-3 text-center text-xs text-stone-500">
            Pon los últimos 4 dígitos de la referencia para enviar tu pago.
          </p>
        )}
        <button
          onClick={confirmar}
          disabled={enviando || (online && !referencia)}
          className="mt-2 w-full rounded-2xl bg-marca py-3.5 font-bold text-marca-contraste shadow-flotante disabled:opacity-60"
        >
          {enviando ? 'Enviando...' : online ? 'Ya pagué, enviar para verificar' : 'Llamar al mesero'}
        </button>
      </div>
    </div>
  );
}

// El cliente paga SU parte en linea (cuentas separadas). Queda "por revisar"
// hasta que el mesero la verifica en el panel.
function ModalPagarPersona({
  cuenta,
  comensal,
  onCerrar,
  onListo,
}: {
  cuenta: CuentaData;
  comensal: ComensalC;
  onCerrar: () => void;
  onListo: () => void;
}) {
  const mp = (cuenta.metodos_pago ?? {}) as MetodosPago;
  const onlineOpts: [string, string][] = [
    ...(mp.pago_movil?.activo ? ([['pago_movil', 'Pago Móvil']] as [string, string][]) : []),
    ...(mp.zelle?.activo ? ([['zelle', 'Zelle']] as [string, string][]) : []),
    ...(mp.transferencia?.activo ? ([['transferencia', 'Transferencia']] as [string, string][]) : []),
  ];
  const [metodo, setMetodo] = useState(onlineOpts[0]?.[0] ?? 'pago_movil');
  const [referencia, setReferencia] = useState('');
  const [file, setFile] = useState<File | null>(null);
  const [enviando, setEnviando] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const pendiente = Math.max(0, Number(comensal.total_usd) - Number(comensal.pagado_usd) - Number(comensal.por_revisar_usd));
  const datos = (mp as Record<string, { banco?: string; cedula?: string; telefono?: string; correo?: string; titular?: string; cuenta?: string }>)[metodo];

  async function confirmar() {
    setErr(null);
    setEnviando(true);
    try {
      let path = '';
      if (file) {
        try {
          path = await subirComprobante(file, cuenta.id);
        } catch {
          /* si la captura no sube, seguimos con la referencia */
        }
      }
      const { error } = await supabase.rpc('pagar_parte_cliente', {
        p_cuenta_id: cuenta.id,
        p_comensal_id: comensal.id,
        p_metodo: metodo,
        p_referencia: referencia || '',
        p_comprobante_url: path || '',
      });
      if (error) throw error;
      onListo();
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setEnviando(false);
    }
  }

  return (
    <div className="fixed inset-0 z-20 flex items-end justify-center bg-black/40 sm:items-center" onClick={onCerrar}>
      <div className="max-h-[92vh] w-full max-w-md overflow-y-auto rounded-t-3xl bg-white p-5 sm:rounded-3xl" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-extrabold text-stone-800">Pagar la parte de {comensal.nombre}</h2>
          <button onClick={onCerrar} className="h-8 w-8 text-2xl leading-none text-stone-400">
            &times;
          </button>
        </div>
        <p className="mt-1 text-sm text-stone-500">
          A pagar: <b className="text-marca-oscuro">{precioDual(pendiente, cuenta.tasa_bs)}</b>
        </p>

        {onlineOpts.length === 0 ? (
          <div className="mt-4 rounded-xl bg-stone-50 p-3 text-sm text-stone-600">
            Este negocio no tiene pago en línea activo. Págale directo al mesero.
          </div>
        ) : (
          <>
            <p className="mb-1 mt-4 text-xs font-semibold text-stone-600">¿Con qué vas a pagar?</p>
            <div className="grid grid-cols-2 gap-2">
              {onlineOpts.map(([v, label]) => (
                <BotonMetodo key={v} label={label} activo={metodo === v} onClick={() => setMetodo(v)} />
              ))}
            </div>
            {datos && (
              <div className="mt-3 rounded-xl bg-stone-50 p-3 text-sm">
                {datos.banco && <Fila k="Banco" v={datos.banco} />}
                {datos.cedula && <Fila k="Cedula/RIF" v={datos.cedula} />}
                {datos.telefono && <Fila k="Telefono" v={datos.telefono} />}
                {datos.correo && <Fila k="Correo" v={datos.correo} />}
                {datos.titular && <Fila k="Titular" v={datos.titular} />}
                {datos.cuenta && <Fila k="Cuenta" v={datos.cuenta} />}
              </div>
            )}
            <p className="mt-3 text-xs text-stone-500">
              Pon los <b className="text-marca-oscuro">últimos 4 dígitos</b> de la referencia y adjunta la captura.
            </p>
            <input
              className="input mt-1"
              placeholder="Últimos 4 dígitos de la referencia"
              inputMode="numeric"
              maxLength={4}
              value={referencia}
              onChange={(e) => setReferencia(e.target.value.replace(/\D/g, '').slice(0, 4))}
            />
            <label className="mt-2 block text-sm">
              <span className="text-xs font-semibold text-stone-500">Captura del pago</span>
              <input type="file" accept="image/*" className="mt-1 block text-sm" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
            </label>
            {err && <p className="mt-3 text-sm text-red-600">{err}</p>}
            <button
              onClick={confirmar}
              disabled={enviando || !referencia}
              className="mt-3 w-full rounded-2xl bg-marca py-3.5 font-bold text-marca-contraste shadow-flotante disabled:opacity-60"
            >
              {enviando ? 'Enviando...' : 'Ya pagué, enviar para verificar'}
            </button>
            <p className="mt-2 text-center text-xs text-stone-400">El mesero verifica tu pago y listo.</p>
          </>
        )}
      </div>
    </div>
  );
}

function BotonMetodo({ label, activo, onClick }: { label: string; activo: boolean; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className={`rounded-xl border-2 px-2 py-2.5 text-sm font-bold transition ${
        activo ? 'border-marca bg-marca-claro text-marca-oscuro' : 'border-stone-200 text-stone-500'
      }`}
    >
      {label}
    </button>
  );
}

function Fila({ k, v }: { k: string; v: string }) {
  return (
    <div className="flex justify-between gap-2 py-0.5">
      <span className="text-stone-500">{k}</span>
      <button onClick={() => navigator.clipboard.writeText(v)} className="text-right font-semibold hover:underline" title="Copiar">
        {v}
      </button>
    </div>
  );
}

function Caja({ children }: { children: React.ReactNode }) {
  return <div className="rounded-2xl bg-white p-4 shadow-tarjeta">{children}</div>;
}

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