import { useState, type ReactNode } from 'react';
import { precioDual } from '@gustito/shared';
import { supabase } from '../lib/supabase';

const METODO: Record<string, string> = {
  pago_movil: 'Pago Móvil',
  efectivo: 'Efectivo',
  transferencia: 'Transferencia',
  zelle: 'Zelle',
  punto_venta: 'Punto de venta',
};

// Modal con el detalle completo de un pago de mesa: método, referencia en
// grande, monto y captura. Se abre desde las notificaciones de pago del panel
// para poder verificar el pago móvil contra el banco sin ir a otra pantalla.
export default function DetallePagoMesa({
  titulo,
  metodo,
  referencia,
  comprobante_url,
  monto_usd,
  tasa_bs,
  filas = [],
  acento,
  onCerrar,
  children,
}: {
  titulo: string;
  metodo: string | null;
  referencia: string | null;
  comprobante_url: string | null;
  monto_usd: number;
  tasa_bs: number | null;
  filas?: [string, string][];
  acento: string;
  onCerrar: () => void;
  children: ReactNode;
}) {
  const [copiado, setCopiado] = useState(false);
  const [errCapt, setErrCapt] = useState<string | null>(null);
  const online = metodo === 'pago_movil' || metodo === 'zelle' || metodo === 'transferencia';

  async function verComprobante() {
    setErrCapt(null);
    const { data, error } = await supabase.storage.from('comprobantes').createSignedUrl(comprobante_url!, 120);
    if (error) setErrCapt(error.message);
    else window.open(data.signedUrl, '_blank');
  }

  async function copiarRef() {
    try {
      await navigator.clipboard.writeText(referencia!);
      setCopiado(true);
      setTimeout(() => setCopiado(false), 1500);
    } catch {
      /* sin clipboard */
    }
  }

  return (
    <div className="fixed inset-0 z-[80] flex items-end justify-center bg-black/70 sm:items-center" onClick={onCerrar}>
      <div
        className="w-full max-w-sm rounded-t-2xl bg-superficie p-5 text-white ring-1 ring-white/15 sm:rounded-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-extrabold">{titulo}</h3>
          <button
            onClick={onCerrar}
            className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-white/10 text-xl leading-none text-white/80 hover:text-white"
          >
            &times;
          </button>
        </div>

        <p className="mt-2 text-2xl font-black tabular-nums" style={{ color: acento }}>
          {precioDual(monto_usd, tasa_bs)}
        </p>

        <div className="mt-3 space-y-1.5 rounded-xl bg-superficie-2 p-3 text-sm ring-1 ring-white/10">
          <div className="flex justify-between gap-3">
            <span className="text-white/60">Medio de pago</span>
            <span className="font-bold">{metodo ? METODO[metodo] ?? metodo : 'No indicó'}</span>
          </div>
          {filas.map(([k, v]) => (
            <div key={k} className="flex justify-between gap-3">
              <span className="text-white/60">{k}</span>
              <span className="min-w-0 truncate text-right font-bold">{v}</span>
            </div>
          ))}
        </div>

        {online && (
          <div className="mt-3 rounded-xl p-3 ring-1" style={{ background: acento + '14', ['--tw-ring-color' as string]: acento + '66' }}>
            <p className="text-xs font-bold text-white/60">Referencia</p>
            {referencia ? (
              <div className="mt-0.5 flex items-center justify-between gap-2">
                <p className="text-3xl font-black tracking-widest tabular-nums" style={{ color: acento }}>
                  {referencia}
                </p>
                <button onClick={copiarRef} className="shrink-0 rounded-lg bg-white/10 px-3 py-1.5 text-xs font-bold text-white/85 ring-1 ring-white/15">
                  {copiado ? 'Copiada' : 'Copiar'}
                </button>
              </div>
            ) : (
              <p className="mt-0.5 text-sm font-bold text-white/85">Sin referencia anotada</p>
            )}
          </div>
        )}

        {comprobante_url ? (
          <button
            onClick={verComprobante}
            className="mt-3 w-full rounded-xl bg-white/10 py-2.5 text-sm font-bold text-white ring-1 ring-white/15"
          >
            Ver la captura del pago
          </button>
        ) : online ? (
          <p className="mt-3 text-center text-xs text-niebla">Sin captura, verifica por la referencia</p>
        ) : null}
        {errCapt && <p className="mt-2 rounded-lg bg-red-500/15 px-3 py-2 text-[13px] font-bold text-red-200 ring-1 ring-red-500/40">{errCapt}</p>}

        <div className="mt-4 space-y-2">{children}</div>
      </div>
    </div>
  );
}
