"use client";

import { useMemo, useState } from "react";
import { Loader2, Store, ToggleLeft, ToggleRight, CheckCircle } from "lucide-react";
import {
  mergeMerchGroups,
  serializeMerchGroups,
  type MerchGroupVisibility,
} from "@/lib/merch-config";

type Props = {
  initialEnabled: boolean;
  initialGroups: MerchGroupVisibility;
  categories: string[];
  productCountByCategory: Record<string, number>;
};

export default function AdminMerchSettings({
  initialEnabled,
  initialGroups,
  categories,
  productCountByCategory,
}: Props) {
  const [enabled, setEnabled] = useState(initialEnabled);
  const [groups, setGroups] = useState<MerchGroupVisibility>(() =>
    mergeMerchGroups(categories, initialGroups)
  );
  const [loading, setLoading] = useState(false);
  const [saved, setSaved] = useState(false);

  const visibleGroupCount = useMemo(
    () => Object.values(groups).filter(Boolean).length,
    [groups]
  );

  const save = async () => {
    setLoading(true);
    setSaved(false);
    try {
      const res = await fetch("/api/admin/site-config", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          merch_enabled: enabled ? "true" : "false",
          merch_groups: serializeMerchGroups(groups),
        }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        alert(data.error || "No se pudo guardar la configuración de la tienda");
        return;
      }
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } finally {
      setLoading(false);
    }
  };

  const toggleGroup = (name: string) => {
    setGroups((prev) => ({ ...prev, [name]: !prev[name] }));
  };

  return (
    <div className="glass-panel rounded-2xl p-6 space-y-6 border border-[#0ea5c6]/20">
      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <Store className="w-5 h-5 text-[#0ea5c6]" />
            <h2 className="text-lg font-bold text-white">Tienda en el sitio público</h2>
          </div>
          <p className="text-sm text-gray-400 max-w-xl">
            Enciende o apaga la sección <strong className="text-gray-300">Merchandising & Ropa</strong> en la
            home y el enlace «Tienda» del menú. Los productos siguen gestionándose aquí aunque la tienda esté
            apagada.
          </p>
        </div>
        <button
          type="button"
          onClick={() => setEnabled((v) => !v)}
          disabled={loading}
          className={`flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm transition shrink-0 ${
            enabled
              ? "bg-green-500/20 text-green-400 border border-green-500/40"
              : "bg-red-500/20 text-red-400 border border-red-500/40"
          }`}
        >
          {enabled ? <ToggleRight className="w-5 h-5" /> : <ToggleLeft className="w-5 h-5" />}
          {enabled ? "Tienda ACTIVA" : "Tienda APAGADA"}
        </button>
      </div>

      <div className="border-t border-white/10 pt-6">
        <h3 className="text-sm font-bold text-gray-300 uppercase tracking-wider mb-1">
          Grupos visibles
        </h3>
        <p className="text-xs text-gray-500 mb-4">
          Segmenta qué categorías se muestran en la tienda pública. Solo aparecen productos con stock &gt; 0.
        </p>

        {categories.length === 0 ? (
          <p className="text-sm text-gray-500 italic">
            Crea productos con categoría (Ropa, Merchandising, etc.) para configurar grupos.
          </p>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            {categories.map((cat) => {
              const active = groups[cat] !== false;
              const count = productCountByCategory[cat] ?? 0;
              return (
                <button
                  key={cat}
                  type="button"
                  onClick={() => toggleGroup(cat)}
                  className={`flex items-center justify-between gap-3 px-4 py-3 rounded-xl border text-left transition ${
                    active
                      ? "bg-[#0ea5c6]/10 border-[#0ea5c6]/40 text-white"
                      : "bg-white/5 border-white/10 text-gray-500"
                  }`}
                >
                  <span className="font-semibold text-sm">{cat}</span>
                  <span className="text-xs shrink-0">
                    {active ? "Visible" : "Oculto"} · {count} prod.
                  </span>
                </button>
              );
            })}
          </div>
        )}

        {categories.length > 0 && (
          <p className="text-xs text-gray-500 mt-3">
            {visibleGroupCount} de {categories.length} grupos visibles en el sitio
            {enabled ? "" : " (la tienda está apagada — no se verá nada en la home)"}.
          </p>
        )}
      </div>

      <div className="flex items-center justify-end gap-3 pt-2">
        {saved && (
          <span className="flex items-center gap-1 text-green-400 text-sm">
            <CheckCircle className="w-4 h-4" /> Guardado
          </span>
        )}
        <button
          type="button"
          onClick={save}
          disabled={loading}
          className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-neon-blue to-neon-purple rounded-xl text-white font-semibold hover:opacity-90 disabled:opacity-50"
        >
          {loading && <Loader2 className="w-4 h-4 animate-spin" />}
          Guardar visibilidad
        </button>
      </div>
    </div>
  );
}