import { useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { formatUsd, type Restaurante } from '@gustito/shared';
import { Icono } from '@gustito/shared/iconos';
import { supabase } from '../lib/supabase';
import { useAuth } from '../lib/auth';
import { useCambiosRestaurante } from '../lib/tiemporeal';
import DetallePagoMesa from './DetallePagoMesa';

interface PagoRevisar {
  pago_id: string;
  cuenta_id: string;
  mesa: string;
  comensal_nombre: string | null;
  monto_usd: number;
  metodo: string;
  referencia: string | null;
  comprobante_url: string | null;
  creado_en: string;
}

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

function timbre() {
  try {
    const ctx = new AudioContext();
    const o = ctx.createOscillator();
    o.frequency.value = 760;
    o.connect(ctx.destination);
    o.start();
    setTimeout(() => {
      o.stop();
      ctx.close();
    }, 220);
  } catch {
    /* sin audio */
  }
}

// Aviso al PANEL (solo dueño/admin): pagos en linea que el mesero registro y
// estan POR REVISAR. El dueño verifica (Confirmar/Rechazar) y libera la mesa.
export default function AlertaPagosPorRevisar({
  restaurante,
  acento,
}: {
  restaurante: Restaurante;
  acento: string;
}) {
  const qc = useQueryClient();
  const { perfil } = useAuth();
  const esDueno = perfil?.rol === 'dueno' || perfil?.rol === 'admin';
  // Pago abierto en el modal de detalle (referencia en grande + captura).
  const [detalle, setDetalle] = useState<PagoRevisar | null>(null);
  const [rechazando, setRechazando] = useState(false);

  const { data } = useQuery({
    queryKey: ['pagos-por-revisar', restaurante.id],
    enabled: esDueno,
    queryFn: async () => {
      const { data, error } = await supabase.rpc('pagos_por_revisar', { p_restaurante_id: restaurante.id });
      if (error) throw error;
      return (data as unknown as PagoRevisar[]) ?? [];
    },
    refetchInterval: esDueno ? 6000 : false,
  });

  useCambiosRestaurante(esDueno ? restaurante.id : null, {
    onCambio: (c) => {
      if (c.tabla !== 'pagos_mesa' || c.accion !== 'INSERT') return;
      if (c.nuevo?.verificado === false) {
        qc.invalidateQueries({ queryKey: ['pagos-por-revisar', restaurante.id] });
        timbre();
      }
    },
    onResync: () => qc.invalidateQueries({ queryKey: ['pagos-por-revisar', restaurante.id] }),
  });

  if (!esDueno) return null;
  const pagos = data ?? [];
  if (pagos.length === 0) return null;

  async function verificar(p: PagoRevisar, ok: boolean) {
    const { error } = await supabase.rpc('verificar_pago_cliente', { p_pago_id: p.pago_id, p_ok: ok });
    if (error) alert(error.message);
    else {
      qc.invalidateQueries({ queryKey: ['pagos-por-revisar', restaurante.id] });
      qc.invalidateQueries({ queryKey: ['cuentas-mesa', restaurante.id] });
    }
  }

  function abrirDetalle(p: PagoRevisar) {
    setRechazando(false);
    setDetalle(p);
  }

  function hora(iso: string): string {
    return new Date(iso).toLocaleTimeString('es-VE', { hour: '2-digit', minute: '2-digit', hour12: true });
  }

  return (
    <div className="mx-auto mt-4 max-w-3xl space-y-2 px-4">
      {pagos.map((p) => (
        <div
          key={p.pago_id}
          onClick={() => abrirDetalle(p)}
          className="cursor-pointer rounded-2xl border p-3"
          style={{ borderColor: acento, background: acento + '14', boxShadow: `0 0 0 1px ${acento}66` }}
        >
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
            <Icono nombre="tarjeta" className="h-5 w-5 shrink-0 text-white" />
            <span className="font-extrabold text-white">Pago por revisar · Mesa {p.mesa}</span>
            <span className="text-sm font-bold" style={{ color: acento }}>
              {METODO[p.metodo] ?? p.metodo}
              {p.comensal_nombre ? ` · ${p.comensal_nombre}` : ''}
              {p.referencia ? ` · Ref ${p.referencia}` : ''}
            </span>
            <span className="ml-auto font-extrabold" style={{ color: acento }}>{formatUsd(Number(p.monto_usd))}</span>
          </div>
          <div className="mt-2 flex flex-wrap items-center gap-2">
            <button
              onClick={(e) => {
                e.stopPropagation();
                abrirDetalle(p);
              }}
              className="rounded-lg px-3 py-1.5 text-xs font-extrabold ring-1"
              style={{ color: acento, ['--tw-ring-color' as string]: acento + '99' }}
            >
              Ver el pago
            </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                verificar(p, true);
              }}
              className="ml-auto rounded-lg bg-green-600 px-4 py-1.5 text-xs font-bold text-white"
            >
              Confirmar y liberar
            </button>
          </div>
        </div>
      ))}

      {detalle && (
        <DetallePagoMesa
          titulo={`Pago de la Mesa ${detalle.mesa}`}
          metodo={detalle.metodo}
          referencia={detalle.referencia}
          comprobante_url={detalle.comprobante_url}
          monto_usd={Number(detalle.monto_usd)}
          tasa_bs={restaurante.tasa_bs}
          filas={[
            ...(detalle.comensal_nombre ? ([['Pagó', detalle.comensal_nombre]] as [string, string][]) : []),
            ['Hora', hora(detalle.creado_en)],
          ]}
          acento={acento}
          onCerrar={() => setDetalle(null)}
        >
          {rechazando ? (
            <>
              <p className="rounded-lg bg-red-500/15 px-3 py-2 text-[13px] font-bold text-red-200 ring-1 ring-red-500/40">
                ¿Rechazar este pago? Los pedidos vuelven a quedar por cobrar.
              </p>
              <div className="flex gap-2">
                <button
                  onClick={() => setRechazando(false)}
                  className="flex-1 rounded-xl border border-white/15 py-2.5 text-sm font-bold text-white/80"
                >
                  Volver
                </button>
                <button
                  onClick={async () => {
                    await verificar(detalle, false);
                    setDetalle(null);
                  }}
                  className="flex-1 rounded-xl bg-red-500 py-2.5 text-sm font-bold text-white"
                >
                  Sí, rechazar
                </button>
              </div>
            </>
          ) : (
            <>
              <button
                onClick={async () => {
                  await verificar(detalle, true);
                  setDetalle(null);
                }}
                className="w-full rounded-xl bg-green-600 py-3 text-base font-extrabold text-white shadow-lg"
              >
                Confirmar y liberar
              </button>
              <button
                onClick={() => setRechazando(true)}
                className="w-full rounded-xl border border-white/20 py-2.5 text-sm font-bold text-white/85"
              >
                Rechazar
              </button>
            </>
          )}
        </DetallePagoMesa>
      )}
    </div>
  );
}
