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

type Prod = { id: string; nombre: string; controla_stock: boolean; stock: number; stock_minimo: number };

export default function Inventario({ restauranteId, marca, txtMarca }: { restauranteId: string; marca: string; txtMarca: string }) {
  const qc = useQueryClient();

  const { data: prods } = useQuery({
    queryKey: ['inventario', restauranteId],
    queryFn: async () => {
      const { data } = await supabase
        .from('productos')
        .select('id,nombre,controla_stock,stock,stock_minimo')
        .eq('restaurante_id', restauranteId)
        .order('nombre');
      return (data ?? []) as unknown as Prod[];
    },
  });

  async function guardar(id: string, campos: Partial<Prod>) {
    await supabase.from('productos').update(campos).eq('id', id);
    qc.invalidateQueries({ queryKey: ['inventario', restauranteId] });
  }

  const lista = prods ?? [];
  const controlados = lista.filter((p) => p.controla_stock);
  const bajos = controlados.filter((p) => p.stock <= p.stock_minimo);

  return (
    <div className="space-y-5">
      <h1 className="text-xl font-extrabold">Inventario</h1>

      <div className="grid grid-cols-3 gap-2 sm:gap-3">
        <ResumenInv label="Productos" valor={lista.length} color="#FFFFFF" />
        <ResumenInv label="Con control" valor={controlados.length} color={marca} />
        <ResumenInv label="Bajo stock" valor={bajos.length} color={bajos.length ? '#EF4444' : '#22C55E'} />
      </div>

      {bajos.length > 0 && (
        <div className="rounded-2xl bg-red-500/10 p-3 text-sm font-semibold text-red-300 ring-1 ring-red-500/30">
          ⚠️ {bajos.length} producto{bajos.length === 1 ? '' : 's'} en o por debajo del mínimo: {bajos.map((b) => b.nombre).join(', ')}.
        </div>
      )}

      <p className="text-sm text-niebla">
        Activa el control por producto. Al vender, el stock baja solo; si un pedido se cancela o se le
        quita un renglón, vuelve solo. Se avisa cuando llega al mínimo.
      </p>

      {lista.length === 0 ? (
        <p className="rounded-2xl border border-dashed border-white/15 bg-superficie p-6 text-center text-sm text-niebla">
          Aún no tienes productos. Créalos en la sección Menú.
        </p>
      ) : (
        <div className="divide-y divide-white/10 overflow-hidden rounded-2xl bg-superficie ring-1 ring-white/10">
          {lista.map((p) => (
            <FilaInventario key={p.id} p={p} onGuardar={guardar} marca={marca} txtMarca={txtMarca} />
          ))}
        </div>
      )}
    </div>
  );
}

function FilaInventario({
  p,
  onGuardar,
  marca,
  txtMarca,
}: {
  p: Prod;
  onGuardar: (id: string, campos: Partial<Prod>) => void;
  marca: string;
  txtMarca: string;
}) {
  const [ctrl, setCtrl] = useState(p.controla_stock);
  const [stock, setStock] = useState(String(p.stock));
  const [min, setMin] = useState(String(p.stock_minimo));
  const bajo = ctrl && Number(stock) <= Number(min);

  function toggle() {
    const v = !ctrl;
    setCtrl(v);
    onGuardar(p.id, { controla_stock: v });
  }

  return (
    <div className="flex flex-wrap items-center gap-3 px-4 py-3">
      <div className="min-w-0 flex-1">
        <p className="truncate font-semibold">{p.nombre}</p>
        {ctrl ? (
          <p className={`text-xs font-semibold ${bajo ? 'text-red-400' : 'text-green-400'}`}>
            {bajo ? `Bajo stock (${stock})` : `En stock: ${stock}`}
          </p>
        ) : (
          <p className="text-xs text-niebla">Sin control de stock</p>
        )}
      </div>

      {ctrl && (
        <div className="flex items-center gap-2">
          <label className="text-xs text-niebla">
            Stock
            <input
              className="ml-1 w-16 rounded-lg border border-white/10 bg-superficie-2 px-2 py-1 text-sm text-white outline-none focus:border-white/25"
              inputMode="numeric"
              value={stock}
              onChange={(e) => setStock(e.target.value.replace(/[^0-9]/g, ''))}
              onBlur={() => onGuardar(p.id, { stock: Number(stock) || 0 })}
            />
          </label>
          <label className="text-xs text-niebla">
            Mín
            <input
              className="ml-1 w-14 rounded-lg border border-white/10 bg-superficie-2 px-2 py-1 text-sm text-white outline-none focus:border-white/25"
              inputMode="numeric"
              value={min}
              onChange={(e) => setMin(e.target.value.replace(/[^0-9]/g, ''))}
              onBlur={() => onGuardar(p.id, { stock_minimo: Number(min) || 0 })}
            />
          </label>
        </div>
      )}

      <button
        onClick={toggle}
        className={`rounded-lg px-3 py-1.5 text-xs font-bold ${ctrl ? '' : 'text-niebla ring-1 ring-white/15'}`}
        style={ctrl ? { background: marca, color: txtMarca } : undefined}
      >
        {ctrl ? 'Controlando' : 'Activar'}
      </button>
    </div>
  );
}

function ResumenInv({ label, valor, color }: { label: string; valor: number; color: string }) {
  return (
    <div className="rounded-2xl bg-superficie p-3 text-center ring-1 ring-white/10 sm:p-4">
      <p className="text-xs font-semibold uppercase tracking-wide text-niebla">{label}</p>
      <p className="mt-1 text-2xl font-black" style={{ color }}>
        {valor}
      </p>
    </div>
  );
}
