import { useQuery, useQueryClient } from '@tanstack/react-query';
import { 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';

interface Llamada {
  id: string;
  cuenta_id: string;
  mesa: string;
  tipo: string;
  nota: string | null;
  creada_en: string;
  mesero_id: string | null;
  mesero_nombre: string | null;
}

// Doble campanazo, para distinguirlo del pedido nuevo.
function timbre() {
  try {
    const ctx = new AudioContext();
    const toca = (t: number) => {
      const o = ctx.createOscillator();
      o.frequency.value = 988;
      o.connect(ctx.destination);
      o.start(ctx.currentTime + t);
      o.stop(ctx.currentTime + t + 0.15);
    };
    toca(0);
    toca(0.25);
    setTimeout(() => ctx.close(), 700);
  } catch {
    /* sin audio */
  }
}

// Aviso global: el cliente llamó al mesero o pidió la cuenta. Aparece en
// cualquier pestaña. El mesero solo ve las llamadas de SUS mesas; el dueño ve todas.
export default function AlertaLlamadas({
  restaurante,
  marca,
  txtMarca,
  acento,
}: {
  restaurante: Restaurante;
  marca: string;
  txtMarca: string;
  acento: string;
}) {
  const qc = useQueryClient();
  const { perfil } = useAuth();
  const esStaff = perfil?.rol === 'staff';

  const { data } = useQuery({
    queryKey: ['llamadas-activas', restaurante.id],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('llamadas_activas', { p_restaurante_id: restaurante.id });
      if (error) throw error;
      return (data as unknown as Llamada[]) ?? [];
    },
    refetchInterval: 5000,
  });

  useCambiosRestaurante(restaurante.id, {
    onCambio: (c) => {
      if (c.tabla !== 'llamadas_mesa' || c.accion !== 'INSERT') return;
      qc.invalidateQueries({ queryKey: ['llamadas-activas', restaurante.id] });
      timbre();
    },
    onResync: () => qc.invalidateQueries({ queryKey: ['llamadas-activas', restaurante.id] }),
  });

  const todas = data ?? [];
  // El mesero ve sus mesas + las mesas SIN mesero asignado (para tomarlas);
  // el dueño/admin ve todas.
  const llamadas = esStaff ? todas.filter((l) => l.mesero_id === perfil?.id || l.mesero_id === null) : todas;
  if (llamadas.length === 0) return null;

  async function voy(l: Llamada) {
    const { error } = await supabase.rpc('atender_llamada', { p_llamada_id: l.id });
    if (error) alert(error.message);
    else qc.invalidateQueries({ queryKey: ['llamadas-activas', restaurante.id] });
  }

  return (
    <div className="mx-auto mt-4 max-w-3xl space-y-2 px-4">
      {llamadas.map((l) => (
        <div
          key={l.id}
          className="flex flex-wrap items-center gap-x-2 gap-y-1 rounded-2xl border p-3"
          style={{ borderColor: marca, background: marca + '1f', boxShadow: `0 0 0 1px ${marca}66` }}
        >
          <Icono nombre="campana" className="h-5 w-5 shrink-0 text-white" />
          <span className="font-extrabold text-white">Mesa {l.mesa}</span>
          <span className="text-sm font-bold" style={{ color: acento }}>
            {l.tipo === 'cuenta'
              ? 'pide la cuenta'
              : l.tipo === 'ocupada'
                ? // Un cliente escaneó el QR y se encontró la cuenta de otra gente:
                  // o la mesa quedó sin cobrar, o hay que sentarlo en otra.
                  'llegó y la mesa tiene una cuenta abierta de antes'
                : 'te está llamando'}
          </span>
          {l.mesero_nombre && !esStaff && (
            <span className="text-xs font-semibold text-white/55">Atiende {l.mesero_nombre}</span>
          )}
          <button
            onClick={() => voy(l)}
            className="ml-auto rounded-lg px-4 py-1.5 text-sm font-extrabold"
            style={{ background: marca, color: txtMarca }}
          >
            Voy
          </button>
        </div>
      ))}
    </div>
  );
}
