import { useState } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { grupoDeCategoria, GRUPOS_CATEGORIAS, type Categoria } from '@gustito/shared';
import { supabase } from '../lib/supabase';

export interface ResultadoIA {
  categorias: string[];
  productos: { nombre: string; descripcion: string | null; precio_usd: number; categoria: string | null }[];
}

interface ItemEditable {
  nombre: string;
  precio_usd: number;
  categoria: string;
  incluir: boolean;
  custom: boolean;
}

export default function ImportarMenuModal({
  restauranteId,
  resultado,
  catsExistentes,
  onCerrar,
  onImportado,
}: {
  restauranteId: string;
  resultado: ResultadoIA;
  catsExistentes: Categoria[];
  onCerrar: () => void;
  onImportado: () => void;
}) {
  const qc = useQueryClient();
  const [items, setItems] = useState<ItemEditable[]>(
    resultado.productos.map((p) => ({
      nombre: p.nombre,
      precio_usd: p.precio_usd,
      categoria: p.categoria ?? '',
      incluir: true,
      custom: false,
    })),
  );
  const [guardando, setGuardando] = useState(false);
  const [error, setError] = useState<string | null>(null);

  function upd(i: number, patch: Partial<ItemEditable>) {
    setItems((prev) => prev.map((it, k) => (k === i ? { ...it, ...patch } : it)));
  }

  async function guardar() {
    const incluidos = items.filter((i) => i.incluir && i.nombre.trim());
    if (incluidos.length === 0) {
      setError('Selecciona al menos un producto.');
      return;
    }
    setGuardando(true);
    setError(null);
    try {
      // Resolver categorias: reusar existentes, crear las nuevas.
      const mapa = new Map<string, string>();
      for (const c of catsExistentes) mapa.set(c.nombre.trim().toLowerCase(), c.id);

      const nuevas = new Set<string>();
      for (const it of incluidos) {
        const cn = it.categoria.trim();
        if (cn && !mapa.has(cn.toLowerCase())) nuevas.add(cn);
      }
      let orden = catsExistentes.length;
      for (const nombre of nuevas) {
        const { data, error } = await supabase
          .from('categorias')
          .insert({ restaurante_id: restauranteId, nombre, orden: ++orden, grupo: grupoDeCategoria(nombre) })
          .select()
          .single();
        if (error) throw error;
        mapa.set(nombre.toLowerCase(), (data as { id: string }).id);
      }

      const filas = incluidos.map((it) => ({
        restaurante_id: restauranteId,
        categoria_id: it.categoria.trim() ? (mapa.get(it.categoria.trim().toLowerCase()) ?? null) : null,
        nombre: it.nombre.trim(),
        precio_usd: Number(it.precio_usd) || 0,
        disponible: true,
      }));
      const { error: eIns } = await supabase.from('productos').insert(filas);
      if (eIns) throw eIns;

      qc.invalidateQueries({ queryKey: ['menu', restauranteId] });
      onImportado();
      onCerrar();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setGuardando(false);
    }
  }

  const cuenta = items.filter((i) => i.incluir).length;
  const opcionesCat = [
    ...new Set(
      [
        ...resultado.categorias,
        ...catsExistentes.map((c) => c.nombre),
        ...GRUPOS_CATEGORIAS.map((g) => g.grupo),
      ]
        .map((s) => s.trim())
        .filter(Boolean),
    ),
  ];

  return (
    <div className="fixed inset-0 bg-black/40 flex items-end sm:items-center justify-center z-30">
      <div className="bg-superficie w-full max-w-lg rounded-t-2xl sm:rounded-2xl max-h-[92vh] overflow-y-auto">
        <div className="p-4 border-b sticky top-0 bg-superficie flex items-center justify-between">
          <div>
            <h2 className="font-bold text-lg">Revisa el menu</h2>
            <p className="text-xs text-niebla">La IA leyo estos productos. Corrige y elige la categoria de cada uno.</p>
          </div>
          <button onClick={onCerrar} className="text-niebla text-2xl leading-none">
            &times;
          </button>
        </div>

        <div className="p-4 space-y-2">
          {items.map((it, i) => (
            <div
              key={i}
              className={`flex items-start gap-2 rounded-lg border p-2 ${it.incluir ? '' : 'opacity-50'}`}
            >
              <input
                type="checkbox"
                className="mt-2.5"
                checked={it.incluir}
                onChange={(e) => upd(i, { incluir: e.target.checked })}
              />
              <div className="min-w-0 flex-1 space-y-1.5">
                <input
                  className="input w-full"
                  value={it.nombre}
                  placeholder="Nombre"
                  onChange={(e) => upd(i, { nombre: e.target.value })}
                />
                <div className="flex gap-1.5">
                  <input
                    className="input w-24 shrink-0"
                    type="number"
                    step="0.5"
                    value={it.precio_usd}
                    placeholder="Precio $"
                    onChange={(e) => upd(i, { precio_usd: parseFloat(e.target.value) })}
                  />
                  {it.custom ? (
                    <div className="flex flex-1 gap-1">
                      <input
                        className="input flex-1"
                        autoFocus
                        value={it.categoria}
                        placeholder="Nueva categoria"
                        onChange={(e) => upd(i, { categoria: e.target.value })}
                      />
                      <button
                        type="button"
                        onClick={() => upd(i, { custom: false, categoria: '' })}
                        className="shrink-0 rounded-lg px-2 text-xs font-semibold text-niebla ring-1 ring-white/10"
                        title="Elegir de la lista"
                      >
                        Lista
                      </button>
                    </div>
                  ) : (
                    <select
                      className="input flex-1"
                      value={it.categoria}
                      onChange={(e) =>
                        e.target.value === '__nueva__'
                          ? upd(i, { custom: true, categoria: '' })
                          : upd(i, { categoria: e.target.value })
                      }
                    >
                      <option value="">Sin categoria</option>
                      {opcionesCat.map((o) => (
                        <option key={o} value={o}>
                          {o}
                        </option>
                      ))}
                      <option value="__nueva__">➕ Otra categoria...</option>
                    </select>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="p-4 border-t sticky bottom-0 bg-superficie">
          {error && <p className="text-sm text-red-600 mb-2">{error}</p>}
          <button
            onClick={guardar}
            disabled={guardando}
            className="btn w-full bg-dorado text-noche disabled:opacity-60"
          >
            {guardando ? 'Guardando...' : `Agregar ${cuenta} producto${cuenta === 1 ? '' : 's'} al menu`}
          </button>
        </div>
      </div>
    </div>
  );
}
