import { useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { supabase } from '../lib/supabase';

type Prod = { id: string; nombre: string; disponible: boolean };

// Panel rápido para marcar productos agotados en plena venta, sin ir al Menú.
// Se abre desde Pedidos y Cocina.
export default function DisponibilidadRapida({
  restauranteId,
  onCerrar,
}: {
  restauranteId: string;
  onCerrar: () => void;
}) {
  const qc = useQueryClient();
  const [q, setQ] = useState('');

  const { data: prods } = useQuery({
    queryKey: ['disponibilidad', restauranteId],
    queryFn: async () => {
      const { data } = await supabase
        .from('productos')
        .select('id,nombre,disponible')
        .eq('restaurante_id', restauranteId)
        // Lo que ya no esta en la carta no se marca agotado: no se vende.
        .eq('archivado', false)
        .order('disponible', { ascending: true })
        .order('nombre');
      return (data ?? []) as unknown as Prod[];
    },
  });

  async function toggle(p: Prod) {
    const { error } = await supabase.from('productos').update({ disponible: !p.disponible }).eq('id', p.id);
    if (error) {
      alert(error.message);
      return;
    }
    // Refresca esta vista y las demás que muestran el menú/stock.
    for (const k of ['disponibilidad', 'menu', 'pos-menu', 'inventario']) {
      qc.invalidateQueries({ queryKey: [k, restauranteId] });
    }
  }

  const todos = prods ?? [];
  const lista = todos.filter((p) => !q.trim() || p.nombre.toLowerCase().includes(q.trim().toLowerCase()));
  const agotados = todos.filter((p) => !p.disponible).length;

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 sm:items-center" onClick={onCerrar}>
      <div
        className="flex max-h-[85vh] w-full max-w-md flex-col rounded-t-3xl bg-superficie ring-1 ring-white/10 sm:rounded-3xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-start justify-between gap-3 border-b border-white/10 p-4">
          <div>
            <h2 className="text-lg font-extrabold text-white">Disponibilidad</h2>
            <p className="text-xs text-niebla">Marca lo que se agotó para que no entren más pedidos.</p>
          </div>
          <button onClick={onCerrar} className="shrink-0 text-2xl leading-none text-niebla" aria-label="Cerrar">
            ×
          </button>
        </div>

        <div className="px-4 pb-2 pt-4">
          <input
            className="w-full rounded-xl border border-white/10 bg-superficie-2 px-3.5 py-2.5 text-sm text-white placeholder:text-white/40 outline-none focus:border-white/25"
            placeholder="Buscar producto"
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
          {agotados > 0 && (
            <p className="mt-2 text-xs font-semibold text-red-300">
              {agotados} producto{agotados === 1 ? '' : 's'} agotado{agotados === 1 ? '' : 's'}
            </p>
          )}
        </div>

        <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-5">
          {todos.length === 0 ? (
            <p className="py-8 text-center text-sm text-niebla">Aún no tienes productos. Créalos en Menú.</p>
          ) : lista.length === 0 ? (
            <p className="py-8 text-center text-sm text-niebla">Sin resultados para "{q}".</p>
          ) : (
            <div className="divide-y divide-white/10">
              {lista.map((p) => (
                <div key={p.id} className="flex items-center justify-between gap-3 py-2.5">
                  <span className={`min-w-0 truncate text-sm font-semibold ${p.disponible ? 'text-white' : 'text-niebla line-through'}`}>
                    {p.nombre}
                  </span>
                  <button
                    onClick={() => toggle(p)}
                    className={`shrink-0 rounded-lg px-3 py-1.5 text-xs font-bold ${
                      p.disponible ? 'bg-green-500/15 text-green-300' : 'bg-red-500/20 text-red-300'
                    }`}
                  >
                    {p.disponible ? 'Disponible' : 'Agotado'}
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
