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

interface CuentaFila {
  id: string;
  mesa: string;
  estado: string;
  total_usd: number;
  metodo_pago: string | null;
  referencia: string | null;
  comprobante_url: string | null;
}

const METODO: Record<string, string> = {
  pago_movil: 'Pago Movil',
  efectivo: 'Efectivo',
  transferencia: 'Transferencia',
  zelle: 'Zelle',
  punto_venta: 'Punto de venta',
};
const esPagoOnline = (m: string | null) => m === 'pago_movil' || m === 'zelle' || m === 'transferencia';

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

// Aviso global de pagos de mesa pendientes: aparece en cualquier pestaña para que
// el encargado verifique y libere sin ir a la vista de Mesas.
export default function AlertaPagosMesa({
  restaurante,
  marca,
  txtMarca,
  acento,
}: {
  restaurante: Restaurante;
  marca: string;
  txtMarca: string;
  acento: string;
}) {
  const qc = useQueryClient();
  // Cuenta abierta en el modal de detalle (referencia en grande + captura).
  const [detalle, setDetalle] = useState<CuentaFila | null>(null);
  const { data } = useQuery({
    queryKey: ['cuentas-mesa', restaurante.id],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('mis_cuentas_mesa', { p_restaurante_id: restaurante.id });
      if (error) throw error;
      return (data as unknown as CuentaFila[]) ?? [];
    },
    refetchInterval: 6000,
  });

  useCambiosRestaurante(restaurante.id, {
    onCambio: (c) => {
      if (c.tabla !== 'cuentas_mesa') return;
      qc.invalidateQueries({ queryKey: ['cuentas-mesa', restaurante.id] });
      if (c.nuevo?.estado === 'por_pagar' && c.viejo?.estado !== 'por_pagar') beep();
    },
    onResync: () => qc.invalidateQueries({ queryKey: ['cuentas-mesa', restaurante.id] }),
  });

  const pendientes = (data ?? []).filter((c) => c.estado === 'por_pagar');
  if (pendientes.length === 0) return null;

  async function verificar(c: CuentaFila) {
    // Registra el pago con el metodo que pidio el cliente y cierra si queda verificado.
    const { error } = await supabase.rpc('cobrar_y_cerrar_mesa', { p_cuenta_id: c.id, p_metodo: c.metodo_pago ?? 'efectivo' });
    if (error) alert(error.message);
    else {
      qc.invalidateQueries({ queryKey: ['cuentas-mesa', restaurante.id] });
      setDetalle(null);
    }
  }

  return (
    <div className="mx-auto mt-4 max-w-3xl space-y-2 px-4">
      {pendientes.map((c) => (
        <div
          key={c.id}
          onClick={() => setDetalle(c)}
          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="campana" className="h-5 w-5 shrink-0 text-white" />
            <span className="font-extrabold text-white">Mesa {c.mesa}</span>
            <span className="text-sm font-bold" style={{ color: acento }}>
              {esPagoOnline(c.metodo_pago) ? 'Pago por revisar' : 'Pidió la cuenta'}
              {c.metodo_pago ? ` · ${METODO[c.metodo_pago] ?? c.metodo_pago}` : ''}
            </span>
            <span className="ml-auto font-extrabold" style={{ color: acento }}>
              {precioDual(c.total_usd, restaurante.tasa_bs)}
            </span>
          </div>
          {c.referencia && <p className="mt-1 text-sm font-extrabold text-white">Ref: {c.referencia}</p>}
          <div className="mt-2 flex flex-wrap items-center gap-2">
            <button
              onClick={(e) => {
                e.stopPropagation();
                setDetalle(c);
              }}
              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();
                setDetalle(c);
              }}
              className="btn text-xs ml-auto"
              style={{ background: marca, color: txtMarca }}
            >
              {esPagoOnline(c.metodo_pago) ? 'Verificar pago y liberar' : 'Cobrar y liberar'}
            </button>
          </div>
        </div>
      ))}

      {detalle && (
        <DetallePagoMesa
          titulo={`${esPagoOnline(detalle.metodo_pago) ? 'Pago por revisar' : 'Pidió la cuenta'} · Mesa ${detalle.mesa}`}
          metodo={detalle.metodo_pago}
          referencia={detalle.referencia}
          comprobante_url={detalle.comprobante_url}
          monto_usd={detalle.total_usd}
          tasa_bs={restaurante.tasa_bs}
          acento={acento}
          onCerrar={() => setDetalle(null)}
        >
          <button
            onClick={() => verificar(detalle)}
            className="w-full rounded-xl py-3 text-base font-extrabold shadow-lg"
            style={{ background: marca, color: txtMarca }}
          >
            {esPagoOnline(detalle.metodo_pago) ? 'Verificar pago y liberar' : 'Cobrar y liberar la mesa'}
          </button>
        </DetallePagoMesa>
      )}
    </div>
  );
}
