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

// Configuracion de los puestos de impresion (arepera, parrilla, barra): el
// dueño crea sus puestos y dice que categoria se cocina en cada uno. El
// cerebrito parte cada pedido por puesto y le imprime a cada cocina lo suyo.

interface Puesto {
  id: string;
  nombre: string;
  orden: number;
  es_defecto: boolean;
  activo: boolean;
}

interface CategoriaFila {
  id: string;
  nombre: string;
  puesto_id: string | null;
  a_cocina: boolean | null;
}

export default function PuestosImpresion({ restauranteId }: { restauranteId: string }) {
  const qc = useQueryClient();
  const [nuevo, setNuevo] = useState('');
  const [proc, setProc] = useState<string | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [aEliminar, setAEliminar] = useState<Puesto | null>(null);

  const puestosQ = useQuery({
    queryKey: ['puestos-impresion', restauranteId],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('puestos_impresion')
        .select('id,nombre,orden,es_defecto,activo')
        .eq('restaurante_id', restauranteId)
        .order('orden');
      if (error) throw error;
      return (data ?? []) as Puesto[];
    },
  });

  const catsQ = useQuery({
    queryKey: ['categorias-puesto', restauranteId],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('categorias')
        .select('id,nombre,puesto_id,a_cocina')
        .eq('restaurante_id', restauranteId)
        .order('orden');
      if (error) throw error;
      return (data ?? []) as CategoriaFila[];
    },
  });

  const puestos = puestosQ.data ?? [];
  const cats = catsQ.data ?? [];
  const defecto = puestos.find((p) => p.es_defecto) ?? puestos[0] ?? null;

  function refrescar() {
    qc.invalidateQueries({ queryKey: ['puestos-impresion', restauranteId] });
    qc.invalidateQueries({ queryKey: ['categorias-puesto', restauranteId] });
  }

  async function crear() {
    const nombre = nuevo.trim();
    if (!nombre || proc) return;
    setErr(null);
    setProc('crear');
    const { error } = await supabase.from('puestos_impresion').insert({
      restaurante_id: restauranteId,
      nombre,
      orden: (puestos[puestos.length - 1]?.orden ?? 0) + 1,
      // El primer puesto queda como el "por defecto" (recibe lo no asignado).
      es_defecto: puestos.length === 0,
    });
    setProc(null);
    if (error) {
      setErr(/duplicate|unique/i.test(error.message) ? 'Ya tienes un puesto con ese nombre.' : error.message);
      return;
    }
    setNuevo('');
    refrescar();
  }

  async function hacerDefecto(p: Puesto) {
    if (p.es_defecto || proc) return;
    setErr(null);
    setProc(p.id);
    // Primero se suelta el defecto actual (solo puede haber uno por negocio).
    const paso1 = await supabase
      .from('puestos_impresion')
      .update({ es_defecto: false })
      .eq('restaurante_id', restauranteId)
      .eq('es_defecto', true);
    const paso2 = paso1.error
      ? paso1
      : await supabase.from('puestos_impresion').update({ es_defecto: true }).eq('id', p.id);
    setProc(null);
    if (paso2.error) {
      setErr(paso2.error.message);
      return;
    }
    refrescar();
  }

  async function eliminar(p: Puesto) {
    setErr(null);
    setProc(p.id);
    const { error } = await supabase.from('puestos_impresion').delete().eq('id', p.id);
    if (!error && p.es_defecto) {
      // Si se fue el defecto y quedan otros, el primero toma la posta.
      const resto = puestos.filter((x) => x.id !== p.id);
      if (resto.length > 0) {
        await supabase.from('puestos_impresion').update({ es_defecto: true }).eq('id', resto[0].id);
      }
    }
    setProc(null);
    setAEliminar(null);
    if (error) {
      setErr(error.message);
      return;
    }
    refrescar();
  }

  async function asignar(catId: string, valor: string) {
    setErr(null);
    setProc(catId);
    // 'no' = la categoria no se imprime (bebidas y similares: el pedido igual
    // se ve completo en el panel). a_cocina tambien gobierna la pantalla de
    // Cocina y se estampa en cada renglon nuevo (trigger tg_pedido_item_a_cocina).
    const cambio =
      valor === 'no'
        ? { puesto_id: null, a_cocina: false }
        : { puesto_id: valor || null, a_cocina: true };
    const { error } = await supabase.from('categorias').update(cambio).eq('id', catId);
    setProc(null);
    if (error) {
      setErr(error.message);
      return;
    }
    refrescar();
  }

  return (
    <div className="space-y-4">
      <p className="text-sm text-niebla">
        Si tu negocio prepara en varios puestos (cocina, arepera, barra), créalos aquí y di qué categoría
        se cocina en cada uno. Cuando conectes las impresoras, cada puesto imprime solo lo suyo. Si solo
        tienes una impresora, con un solo puesto basta. Las bebidas y lo que no se cocina puedes ponerlo
        en "No se imprime": el pedido igual se ve completo en el panel.
      </p>

      {err && <p className="rounded-lg bg-red-500/10 px-3 py-2 text-sm font-semibold text-red-400">{err}</p>}
      {(puestosQ.isLoading || catsQ.isLoading) && <p className="text-sm text-niebla">Cargando...</p>}

      {puestos.length > 0 && (
        <ul className="space-y-2">
          {puestos.map((p) => (
            <li
              key={p.id}
              className="flex flex-wrap items-center justify-between gap-2 rounded-xl bg-superficie p-3 ring-1 ring-white/10"
            >
              <div className="flex min-w-0 items-center gap-2">
                <p className="truncate text-sm font-bold text-white">{p.nombre}</p>
                {p.es_defecto && (
                  <span className="shrink-0 rounded-full bg-dorado/15 px-2 py-0.5 text-xs font-bold text-dorado">
                    Por defecto
                  </span>
                )}
              </div>
              <div className="flex shrink-0 items-center gap-2">
                {!p.es_defecto && (
                  <button
                    onClick={() => hacerDefecto(p)}
                    disabled={proc === p.id}
                    className="rounded-lg px-2.5 py-1.5 text-xs font-semibold text-niebla hover:bg-white/5 disabled:opacity-60"
                  >
                    Hacer por defecto
                  </button>
                )}
                <button
                  onClick={() => setAEliminar(p)}
                  disabled={proc === p.id}
                  className="rounded-lg p-2 text-red-400 hover:bg-red-500/10 disabled:opacity-60"
                  title={`Eliminar el puesto ${p.nombre}`}
                >
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="h-4 w-4">
                    <path d="M18 6L6 18M6 6l12 12" />
                  </svg>
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}

      <form
        onSubmit={(e) => {
          e.preventDefault();
          void crear();
        }}
        className="flex gap-2"
      >
        <input
          value={nuevo}
          onChange={(e) => setNuevo(e.target.value)}
          placeholder={puestos.length === 0 ? 'Nombre del puesto (ej: Cocina)' : 'Otro puesto (ej: Arepera)'}
          className="min-w-0 flex-1 rounded-xl border border-white/15 bg-noche px-3 py-2.5 text-sm text-white outline-none placeholder:text-white/35 focus:border-dorado"
        />
        <button
          type="submit"
          disabled={!nuevo.trim() || proc === 'crear'}
          className="shrink-0 rounded-xl bg-dorado px-4 py-2.5 text-sm font-bold text-noche disabled:opacity-60"
        >
          {proc === 'crear' ? '...' : 'Agregar'}
        </button>
      </form>

      {puestos.length > 0 && cats.length > 0 && (
        <div>
          <p className="mb-2 text-sm font-bold text-white">¿Qué se cocina en cada puesto?</p>
          <ul className="space-y-2">
            {cats.map((c) => (
              <li
                key={c.id}
                className="flex items-center justify-between gap-3 rounded-xl bg-superficie p-3 ring-1 ring-white/10"
              >
                <p className="min-w-0 truncate text-sm font-semibold text-white">{c.nombre}</p>
                <select
                  value={c.a_cocina === false ? 'no' : (c.puesto_id ?? '')}
                  onChange={(e) => void asignar(c.id, e.target.value)}
                  disabled={proc === c.id}
                  className="shrink-0 rounded-lg border border-white/15 bg-noche px-2.5 py-2 text-sm font-semibold text-white outline-none focus:border-dorado disabled:opacity-60"
                >
                  <option value="">{defecto ? `Por defecto (${defecto.nombre})` : 'Por defecto'}</option>
                  {puestos.map((p) => (
                    <option key={p.id} value={p.id}>
                      {p.nombre}
                    </option>
                  ))}
                  <option value="no">No se imprime</option>
                </select>
              </li>
            ))}
          </ul>
        </div>
      )}

      {aEliminar && (
        <div
          className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-4"
          onClick={() => setAEliminar(null)}
        >
          <div
            className="w-full max-w-sm rounded-2xl bg-superficie p-5 ring-1 ring-white/10"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-bold text-white">Eliminar el puesto {aEliminar.nombre}</h3>
            <p className="mt-2 text-sm text-niebla">
              Las categorías que lo usaban pasarán al puesto por defecto. No se borra ningún plato ni
              categoría, solo el puesto.
            </p>
            <div className="mt-4 flex gap-2">
              <button
                onClick={() => setAEliminar(null)}
                className="flex-1 rounded-lg border border-white/10 py-2.5 text-sm font-semibold text-niebla"
              >
                Cancelar
              </button>
              <button
                onClick={() => void eliminar(aEliminar)}
                disabled={proc === aEliminar.id}
                className="flex-1 rounded-lg bg-red-600 py-2.5 text-sm font-semibold text-white disabled:opacity-60"
              >
                {proc === aEliminar.id ? 'Eliminando...' : 'Eliminar'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
