import { useState } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import type { Json, OpcionGrupo, Producto } from '@gustito/shared';
import { supabase } from '../lib/supabase';

const GRUPO_NUEVO: OpcionGrupo = {
  nombre: '',
  tipo: 'single',
  obligatorio: false,
  max: null,
  opciones: [{ nombre: '', precio_extra: 0 }],
};

export default function OpcionesProductoModal({
  producto,
  onCerrar,
  onGuardado,
}: {
  producto: Producto;
  onCerrar: () => void;
  onGuardado: () => void;
}) {
  const qc = useQueryClient();
  const [grupos, setGrupos] = useState<OpcionGrupo[]>(
    producto.opciones?.length ? JSON.parse(JSON.stringify(producto.opciones)) : [],
  );
  const [guardando, setGuardando] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  function updGrupo(gi: number, patch: Partial<OpcionGrupo>) {
    setGrupos((prev) => prev.map((g, k) => (k === gi ? { ...g, ...patch } : g)));
  }
  function updOpcion(gi: number, oi: number, patch: Partial<{ nombre: string; precio_extra: number }>) {
    setGrupos((prev) =>
      prev.map((g, k) =>
        k === gi ? { ...g, opciones: g.opciones.map((o, j) => (j === oi ? { ...o, ...patch } : o)) } : g,
      ),
    );
  }

  async function guardar() {
    const limpio: OpcionGrupo[] = grupos
      .map((g) => ({
        nombre: g.nombre.trim(),
        tipo: g.tipo,
        obligatorio: g.obligatorio,
        max: g.tipo === 'multi' ? g.max ?? null : null,
        opciones: g.opciones
          .filter((o) => o.nombre.trim())
          .map((o) => ({ nombre: o.nombre.trim(), precio_extra: Number(o.precio_extra) || 0 })),
      }))
      .filter((g) => g.nombre && g.opciones.length > 0);

    setGuardando(true);
    setErr(null);
    // Regla uniforme: si hay un grupo "Cantidad c/u", cada opcion lleva su precio final,
    // asi que el precio del plato queda en $0 (evita el doble cobro base + opcion).
    const tieneCantidad = limpio.some((g) => g.tipo === 'cantidad');
    const { error } = await supabase
      .from('productos')
      .update({ opciones: limpio as unknown as Json, ...(tieneCantidad ? { precio_usd: 0 } : {}) })
      .eq('id', producto.id);
    setGuardando(false);
    if (error) {
      setErr(error.message);
      return;
    }
    qc.invalidateQueries({ queryKey: ['menu'] });
    onGuardado();
    onCerrar();
  }

  return (
    <div className="fixed inset-0 z-40 flex items-end justify-center bg-black/50 sm:items-center" onClick={onCerrar}>
      <div
        className="max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-2xl bg-superficie sm:rounded-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="sticky top-0 flex items-center justify-between border-b border-white/10 bg-superficie p-4">
          <div className="min-w-0">
            <h2 className="truncate text-lg font-bold text-white">Opciones de {producto.nombre}</h2>
            <p className="text-xs text-niebla">Ej: "Relleno" (elige 1), "Contornos" (varios, con precio extra).</p>
          </div>
          <button onClick={onCerrar} className="shrink-0 text-2xl leading-none text-niebla">
            &times;
          </button>
        </div>

        <div className="space-y-4 p-4">
          {grupos.length === 0 && (
            <p className="rounded-xl bg-white/5 p-3 text-center text-sm text-niebla">
              Este plato no tiene opciones. Agrega un grupo (ej. "Relleno", "Bebida", "Contornos").
            </p>
          )}

          {grupos.map((g, gi) => (
            <div key={gi} className="rounded-xl border border-white/10 bg-white/5 p-3">
              <div className="flex items-center gap-2">
                <input
                  className="input flex-1"
                  placeholder="Nombre del grupo (ej. Relleno)"
                  value={g.nombre}
                  onChange={(e) => updGrupo(gi, { nombre: e.target.value })}
                />
                <button
                  onClick={() => setGrupos((prev) => prev.filter((_, k) => k !== gi))}
                  className="shrink-0 rounded-lg p-2 text-red-400 hover:bg-red-500/10"
                  title="Quitar grupo"
                >
                  ✕
                </button>
              </div>

              <div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
                <div className="flex overflow-hidden rounded-lg border border-white/10">
                  {(['single', 'multi', 'cantidad'] as const).map((t) => (
                    <button
                      key={t}
                      onClick={() => updGrupo(gi, { tipo: t })}
                      className={`px-3 py-1.5 font-bold ${g.tipo === t ? 'bg-dorado text-noche' : 'text-niebla'}`}
                    >
                      {t === 'single' ? 'Elige 1' : t === 'multi' ? 'Varios' : 'Cantidad c/u'}
                    </button>
                  ))}
                </div>
                <label className="flex items-center gap-1.5 text-niebla">
                  <input
                    type="checkbox"
                    checked={g.obligatorio}
                    onChange={(e) => updGrupo(gi, { obligatorio: e.target.checked })}
                    className="accent-dorado"
                  />
                  Obligatorio
                </label>
                {g.tipo === 'multi' && (
                  <label className="flex items-center gap-1.5 text-niebla">
                    Maximo
                    <input
                      type="number"
                      min={1}
                      className="input w-16 py-1"
                      value={g.max ?? ''}
                      placeholder="sin"
                      onChange={(e) => updGrupo(gi, { max: e.target.value ? Number(e.target.value) : null })}
                    />
                  </label>
                )}
              </div>

              {g.tipo === 'cantidad' && (
                <p className="mt-1.5 rounded-lg bg-dorado/10 px-2 py-1 text-[11px] font-semibold text-dorado">
                  Cada opción lleva su precio FINAL (ej. Mediana $4, Grande $8). El precio del plato queda en $0.
                </p>
              )}

              <div className="mt-3 space-y-1.5">
                {g.opciones.map((o, oi) => (
                  <div key={oi} className="flex items-center gap-2">
                    <input
                      className="input flex-1"
                      placeholder="Opcion (ej. Carne Mechada)"
                      value={o.nombre}
                      onChange={(e) => updOpcion(gi, oi, { nombre: e.target.value })}
                    />
                    <div className="flex items-center gap-1">
                      <span className="text-xs text-niebla">{g.tipo === 'cantidad' ? '$' : '+$'}</span>
                      <input
                        className="input w-20 py-1.5"
                        type="number"
                        step="0.5"
                        min={0}
                        value={o.precio_extra}
                        onChange={(e) => updOpcion(gi, oi, { precio_extra: parseFloat(e.target.value) || 0 })}
                      />
                    </div>
                    <button
                      onClick={() =>
                        setGrupos((prev) =>
                          prev.map((gg, k) => (k === gi ? { ...gg, opciones: gg.opciones.filter((_, j) => j !== oi) } : gg)),
                        )
                      }
                      className="shrink-0 rounded-lg p-1.5 text-red-400 hover:bg-red-500/10"
                      title="Quitar opcion"
                    >
                      ✕
                    </button>
                  </div>
                ))}
                <button
                  onClick={() =>
                    setGrupos((prev) =>
                      prev.map((gg, k) => (k === gi ? { ...gg, opciones: [...gg.opciones, { nombre: '', precio_extra: 0 }] } : gg)),
                    )
                  }
                  className="text-xs font-bold text-dorado"
                >
                  + Agregar opcion
                </button>
              </div>
            </div>
          ))}

          <button
            onClick={() => setGrupos((prev) => [...prev, JSON.parse(JSON.stringify(GRUPO_NUEVO))])}
            className="w-full rounded-xl border border-dashed border-white/20 py-2.5 text-sm font-bold text-niebla hover:border-dorado hover:text-dorado"
          >
            + Agregar grupo de opciones
          </button>
        </div>

        <div className="sticky bottom-0 border-t border-white/10 bg-superficie p-4">
          {err && <p className="mb-2 text-sm text-red-400">{err}</p>}
          <button
            onClick={guardar}
            disabled={guardando}
            className="btn w-full bg-dorado text-noche disabled:opacity-60"
          >
            {guardando ? 'Guardando...' : 'Guardar opciones'}
          </button>
        </div>
      </div>
    </div>
  );
}
