const { useState, useEffect, useCallback, useMemo, useRef } = React;

// Hook para persistir estado en localStorage
function usePersistedState(key, defaultValue) {
  const [state, setState] = useState(() => {
    try {
      const saved = localStorage.getItem(key);
      return saved ? JSON.parse(saved) : defaultValue;
    } catch { return defaultValue; }
  });
  const stateRef = useRef(state);
  stateRef.current = state;
  useEffect(() => {
    try { localStorage.setItem(key, JSON.stringify(stateRef.current)); } catch {}
  }, [key, state]);
  return [state, setState];
}

// ============================================
// Vista de Catalogo de Menu
// Gestiona categorias, productos agrupados,
// modificadores (tamanos) y disponibilidad por plataforma
// ============================================

const MenuCatalogView = ({ user, showToast }) => {
  const [tab, setTab] = useState("catalog");
  const isAdmin = user.role === "admin";

  // Sucursal seleccionada (solo afecta a las pestañas por tienda: Plataformas y 86'd).
  const [stores, setStores] = useState([]);
  const [selectedStore, setSelectedStore] = useState(user.storeId || null);

  useEffect(() => {
    if (!isAdmin) return;
    fetchWithAuth(`${API_BASE}/admin/stores`).then(async (res) => {
      if (res.ok) {
        const d = await res.json();
        setStores(d.stores || []);
        setSelectedStore((cur) => cur || (d.stores && d.stores[0] ? d.stores[0].id : 1));
      }
    }).catch(() => {});
  }, [isAdmin]);

  const storeId = selectedStore || user.storeId || 1;

  const tabs = [
    { id: "catalog",      label: "Catalogo",       icon: "menu" },
    { id: "products",     label: "Productos",      icon: "bag" },
    { id: "modifiers",    label: "Modificadores",  icon: "layers" },
    { id: "availability", label: "Plataformas",    icon: "store" },
    { id: "eightysixed",  label: "86'd",           icon: "ban" },
  ];

  // El selector de sucursal solo aplica a las pestañas por tienda.
  const perStoreTab = tab === "availability" || tab === "eightysixed";

  return (
    <div className="admin-wrap">
      <div className="admin-header">
        <div style={{ display: "flex", alignItems: "center", gap: 12, flex: 1 }}>
          <h1><Icon name="menu" size={22} /> Catalogo de Menu</h1>
          {perStoreTab && isAdmin && stores.length > 0 && (
            <select className="reports-select" value={selectedStore || ""} onChange={(e) => setSelectedStore(Number(e.target.value))}>
              {stores.map((s) => <option key={s.id} value={s.id}>{s.name} ({s.code})</option>)}
            </select>
          )}
          {perStoreTab && !isAdmin && (
            <span className="muted" style={{ fontSize: 13 }}>{user.displayName || "Mi Sucursal"}</span>
          )}
        </div>
      </div>
      <div className="admin-tabs">
        {tabs.map((t) => (
          <button key={t.id} className={`admin-tab ${tab === t.id ? "is-active" : ""}`} onClick={() => setTab(t.id)}>
            <Icon name={t.icon} size={15} /> {t.label}
          </button>
        ))}
      </div>
      <div className="admin-content">
        {tab === "catalog" && <CatalogOverview storeId={storeId} showToast={showToast} />}
        {tab === "products" && <ProductsPanel storeId={storeId} showToast={showToast} />}
        {tab === "modifiers" && <ModifiersPanel storeId={storeId} showToast={showToast} />}
        {tab === "availability" && <AvailabilityPanel storeId={storeId} showToast={showToast} />}
        {tab === "eightysixed" && <EightySixPanel storeId={storeId} showToast={showToast} />}
      </div>
    </div>
  );
};

// ============================================
// Vista general del catalogo (solo lectura)
// ============================================
const CatalogOverview = ({ storeId, showToast }) => {
  const [catalog, setCatalog] = useState([]);
  const [loading, setLoading] = useState(true);
  const [totals, setTotals] = useState({ products: 0, categories: 0 });
  const [search, setSearch] = useState("");

  const load = useCallback(async () => {
    try {
      const res = await fetchWithAuth(`${API_BASE}/catalog/full`);
      if (res.ok) {
        const d = await res.json();
        setCatalog(d.catalog || []);
        setTotals({ products: d.total_products, categories: d.total_categories });
      }
    } catch (e) { console.error(e); }
    setLoading(false);
  }, []);

  useEffect(() => { load(); }, [load]);

  if (loading) {
    return <div className="empty"><div className="empty-icon"><Icon name="refresh" size={26} /></div><div className="empty-text">Cargando catalogo...</div></div>;
  }

  return (
    <div>
      <div className="admin-toolbar">
        <h2>Vista General</h2>
        <SearchBar value={search} onChange={setSearch} placeholder="Buscar producto o categoria..." />
        <div className="catalog-stats">
          <span className="stat-chip"><Icon name="layers" size={13} /> {totals.categories} categorias</span>
          <span className="stat-chip"><Icon name="bag" size={13} /> {totals.products} productos</span>
        </div>
      </div>

      {catalog.length === 0 ? (
        <div className="empty"><div className="empty-text">Sin productos en el catalogo. Agrega categorias y productos desde las pestanas.</div></div>
      ) : (() => {
        const s = search.toLowerCase();
        const filteredCatalog = s ? catalog.map((cat) => {
          const catMatch = cat.name.toLowerCase().includes(s);
          const filteredProducts = cat.products.filter((p) =>
            catMatch || p.name.toLowerCase().includes(s) || (p.pos_code || "").toLowerCase().includes(s)
          );
          if (filteredProducts.length === 0) return null;
          return { ...cat, products: filteredProducts };
        }).filter(Boolean) : catalog;

        return filteredCatalog.length === 0 ? (
          <div className="empty"><div className="empty-text">Sin resultados para "{search}"</div></div>
        ) : (
        <div className="catalog-grid">
          {filteredCatalog.map((cat) => (
            <div key={cat.id || "uncategorized"} className="catalog-category">
              <div className="catalog-cat-header">
                <Icon name="tag" size={14} />
                <span>{cat.name}</span>
                <span className="catalog-cat-count">{cat.products.length}</span>
              </div>
              <div className="catalog-products">
                {cat.products.map((p) => (
                  <div key={p.id} className="catalog-product-card" style={p.is_active === 0 ? { opacity: 0.6, borderColor: "var(--danger)" } : {}}>
                    <div className="cp-top">
                      <span className={`area-chip ${p.area}`}>
                        <Icon name={p.area === "bebidas" ? "coffee" : "chef"} size={10} />
                      </span>
                      <span className="cp-name">{p.name}</span>
                      {p.is_active === 0 && <span className="badge-86">86'd</span>}
                      {p.pos_code && <span className="cp-pos mono">({p.pos_code})</span>}
                      <span className="cp-price">${p.base_price}</span>
                    </div>
                    {p.modifier_groups.length > 0 && (
                      <div className="cp-mods">
                        {p.modifier_groups.map((g) => (
                          <div key={g.id} className="cp-mod-group">
                            <span className="cp-mod-label">{g.name}{g.is_required ? " *" : ""}:</span>
                            <span className="cp-mod-opts">
                              {g.modifiers.map((m) => (
                                <span key={m.id} className="cp-mod-opt">
                                  {m.name} ${m.price}
                                  {m.pos_code && <span className="mono"> ({m.pos_code})</span>}
                                </span>
                              ))}
                            </span>
                          </div>
                        ))}
                      </div>
                    )}
                    {p.platform_availability.length > 0 && (
                      <div className="cp-platforms">
                        {p.platform_availability.map((a) => (
                          <span key={a.platform} className={`cp-plat-dot ${a.is_available ? "active" : "inactive"}`} title={a.platform}>
                            {(PLATFORMS[a.platform]?.short || a.platform).substring(0, 2)}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        );
      })()}
    </div>
  );
};

// ============================================
// Panel de Productos (CRUD) — agrupados por categoria
// ============================================
const ProductsPanel = ({ storeId, showToast }) => {
  const [products, setProducts] = useState([]);
  const [categories, setCategories] = useState([]);
  const [editing, setEditing] = useState(null);
  const [form, setForm] = useState({});
  const [catForm, setCatForm] = useState({ name: "", sort_order: 0 });
  const [showCatModal, setShowCatModal] = useState(false);
  const [editingCat, setEditingCat] = useState(null);
  const [search, setSearch] = useState("");
  const [deleting, setDeleting] = useState(null);
  const [deletingCat, setDeletingCat] = useState(null);
  const [collapsed, setCollapsed] = usePersistedState("mcProdCatCollapsed", {});

  const load = useCallback(async () => {
    const [pRes, cRes] = await Promise.all([
      fetchWithAuth(`${API_BASE}/catalog/products`),
      fetchWithAuth(`${API_BASE}/catalog/categories`),
    ]);
    if (pRes.ok) { const d = await pRes.json(); setProducts(d.products || []); }
    if (cRes.ok) { const d = await cRes.json(); setCategories(d.categories || []); }
  }, []);

  useEffect(() => { load(); }, [load]);

  // -- Producto CRUD --
  const saveProduct = async () => {
    const method = editing === "new" ? "POST" : "PUT";
    const url = editing === "new"
      ? `${API_BASE}/catalog/products`
      : `${API_BASE}/catalog/products/${form.id}`;
    const body = { ...form };
    const res = await fetchWithAuth(url, { method, body: JSON.stringify(body) });
    if (res.ok) { showToast("Producto guardado"); setEditing(null); load(); }
    else { const d = await res.json().catch(() => ({})); showToast(d.message || "Error"); }
  };

  const toggleProduct = async (p) => {
    const newActive = p.is_active ? 0 : 1;
    const res = await fetchWithAuth(`${API_BASE}/catalog/products/${p.id}`, {
      method: "PUT", body: JSON.stringify({ is_active: newActive }),
    });
    if (res.ok) { showToast(newActive ? "Producto activado" : "Producto desactivado"); load(); }
    else { const d = await res.json().catch(() => ({})); showToast(d.message || "Error"); }
  };

  const toggleModifiers = async (p) => {
    const newVal = p.uses_modifiers ? 0 : 1;
    const res = await fetchWithAuth(`${API_BASE}/catalog/products/${p.id}`, {
      method: "PUT", body: JSON.stringify({ uses_modifiers: newVal }),
    });
    if (res.ok) { showToast(newVal ? "Modificadores activados — configuralos en la pestaña Modificadores" : "Modificadores desactivados"); load(); }
    else { const d = await res.json().catch(() => ({})); showToast(d.message || "Error"); }
  };

  const confirmDeleteProduct = async () => {
    if (!deleting) return;
    const res = await fetchWithAuth(`${API_BASE}/catalog/products/${deleting.id}`, { method: "DELETE" });
    if (res.ok) { showToast("Producto eliminado"); setDeleting(null); load(); }
    else { const d = await res.json().catch(() => ({})); showToast(d.message || "Error al eliminar"); setDeleting(null); }
  };

  const startNewInCategory = (catId) => {
    setForm({ name: "", description: "", base_price: 0, pos_code: "", category_id: catId, area: "cocina", sort_order: 0 });
    setEditing("new");
  };

  // -- Categoria CRUD --
  const saveCategory = async () => {
    if (editingCat && editingCat !== "new") {
      const res = await fetchWithAuth(`${API_BASE}/catalog/categories/${editingCat}`, {
        method: "PUT", body: JSON.stringify({ name: catForm.name, sort_order: catForm.sort_order }),
      });
      if (res.ok) { showToast("Categoria actualizada"); setShowCatModal(false); setEditingCat(null); load(); }
      else { const d = await res.json().catch(() => ({})); showToast(d.message || "Error"); }
    } else {
      const res = await fetchWithAuth(`${API_BASE}/catalog/categories`, {
        method: "POST", body: JSON.stringify({ name: catForm.name, sort_order: catForm.sort_order }),
      });
      if (res.ok) { showToast("Categoria creada"); setShowCatModal(false); setEditingCat(null); load(); }
      else { const d = await res.json().catch(() => ({})); showToast(d.message || "Error"); }
    }
  };

  const confirmDeleteCat = async () => {
    if (!deletingCat) return;
    const res = await fetchWithAuth(`${API_BASE}/catalog/categories/${deletingCat.id}`, { method: "DELETE" });
    if (res.ok) { showToast("Categoria eliminada"); setDeletingCat(null); load(); }
    else { const d = await res.json().catch(() => ({})); showToast(d.message || "Error al eliminar"); setDeletingCat(null); }
  };

  const openNewCat = () => {
    setCatForm({ name: "", sort_order: 0 });
    setEditingCat("new");
    setShowCatModal(true);
  };

  const openEditCat = (cat) => {
    setCatForm({ name: cat.name, sort_order: cat.sort_order || 0 });
    setEditingCat(cat.id);
    setShowCatModal(true);
  };

  const toggleCollapse = (catId) => {
    setCollapsed((prev) => ({ ...prev, [catId]: !prev[catId] }));
  };

  // -- Agrupar productos por categoria --
  const grouped = useMemo(() => {
    const s = search.toLowerCase();
    const filterFn = (p) => {
      if (!s) return true;
      return p.name.toLowerCase().includes(s)
        || (p.pos_code || "").toLowerCase().includes(s)
        || (p.area || "").toLowerCase().includes(s);
    };

    const groups = categories.map((cat) => {
      const catProducts = products.filter((p) => p.category_id === cat.id).filter(filterFn);
      return { ...cat, products: catProducts };
    });

    const uncategorized = products.filter((p) => !p.category_id).filter(filterFn);
    if (uncategorized.length > 0) {
      groups.push({ id: null, name: "Sin categoria", products: uncategorized });
    }

    if (s) return groups.filter((g) => g.products.length > 0 || g.name.toLowerCase().includes(s));
    return groups;
  }, [products, categories, search]);

  const totalFiltered = grouped.reduce((sum, g) => sum + g.products.length, 0);

  return (
    <div>
      <div className="admin-toolbar">
        <h2>Productos</h2>
        <SearchBar value={search} onChange={setSearch} placeholder="Buscar por nombre, codigo POS..." />
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn btn-sm" onClick={openNewCat}>
            <Icon name="tag" size={14} /> Nueva Categoria
          </button>
        </div>
      </div>

      {/* Modal: Nueva/Editar Categoria */}
      <AdminModal
        open={showCatModal}
        title={editingCat && editingCat !== "new" ? "Editar Categoria" : "Nueva Categoria"}
        onClose={() => { setShowCatModal(false); setEditingCat(null); }}
        onSave={saveCategory}
        saveLabel={editingCat && editingCat !== "new" ? "Guardar" : "Crear"}
      >
        <div className="admin-form-grid">
          <FormField label="Nombre" value={catForm.name} onChange={(v) => setCatForm({ ...catForm, name: v })} placeholder="Ej: Pizzas" />
          <FormField label="Orden" value={catForm.sort_order} type="number" onChange={(v) => setCatForm({ ...catForm, sort_order: Number(v) })} />
        </div>
      </AdminModal>

      {/* Modal: Confirmar eliminacion de producto */}
      <ConfirmModal
        open={!!deleting}
        title={`Eliminar "${deleting?.name || ""}"`}
        message="Esta accion eliminara permanentemente el producto, incluyendo todos sus modificadores y configuracion de disponibilidad."
        details="Esta accion no se puede deshacer."
        onConfirm={confirmDeleteProduct}
        onCancel={() => setDeleting(null)}
        confirmLabel="Eliminar producto"
      />

      {/* Modal: Confirmar eliminacion de categoria */}
      <ConfirmModal
        open={!!deletingCat}
        title={`Eliminar categoria "${deletingCat?.name || ""}"`}
        message="Se eliminara la categoria. Los productos de esta categoria quedaran sin categoria asignada."
        onConfirm={confirmDeleteCat}
        onCancel={() => setDeletingCat(null)}
        confirmLabel="Eliminar categoria"
      />

      {/* Modal: Nuevo/Editar Producto */}
      <AdminModal
        open={!!editing}
        title={editing === "new" ? "Nuevo Producto" : "Editar Producto"}
        onClose={() => setEditing(null)}
        onSave={saveProduct}
      >
        <div className="admin-form-grid">
          <FormField label="Nombre" value={form.name} onChange={(v) => setForm({ ...form, name: v })} placeholder="Ej: Pizza de Queso" />
          <FormField label="Codigo POS" value={form.pos_code || ""} onChange={(v) => setForm({ ...form, pos_code: v })} placeholder="Vacio si usa modificadores" />
          <FormField label="Descripcion" value={form.description} onChange={(v) => setForm({ ...form, description: v })} />
          <FormField label="Precio base" value={form.base_price} type="number" onChange={(v) => setForm({ ...form, base_price: Number(v) })} />
          <div className="form-field">
            <label>Categoria</label>
            <select value={form.category_id || ""} onChange={(e) => setForm({ ...form, category_id: e.target.value ? Number(e.target.value) : null })}>
              <option value="">Sin categoria</option>
              {categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>
          <div className="form-field">
            <label>Area</label>
            <select value={form.area || "cocina"} onChange={(e) => setForm({ ...form, area: e.target.value })}>
              <option value="cocina">Cocina</option>
              <option value="bebidas">Bebidas</option>
            </select>
          </div>
          <FormField label="Orden" value={form.sort_order} type="number" onChange={(v) => setForm({ ...form, sort_order: Number(v) })} />
        </div>
      </AdminModal>

      {/* Categorias con productos */}
      <div className="products-by-cat">
        {grouped.length === 0 ? (
          <div className="empty"><div className="empty-text">{search ? "Sin resultados para la busqueda" : "Sin categorias ni productos. Crea una categoria para comenzar."}</div></div>
        ) : grouped.map((cat) => (
          <div key={cat.id || "uncat"} className="pcat-section">
            <div className="pcat-header" onClick={() => toggleCollapse(cat.id)}>
              <Icon name={collapsed[cat.id] ? "chevronRight" : "chevronDown"} size={14} className="pcat-chevron" />
              <Icon name="tag" size={14} />
              <span className="pcat-name">{cat.name}</span>
              <span className="pcat-count">{cat.products.length}</span>
              {cat.id && (
                <div className="pcat-actions" onClick={(e) => e.stopPropagation()}>
                  <button className="icon-btn-sm" title="Editar categoria" onClick={() => openEditCat(cat)}><Icon name="edit" size={13} /></button>
                  <button className="icon-btn-sm" title="Eliminar categoria" style={{ color: "#C2474B" }} onClick={() => setDeletingCat(cat)}><Icon name="trash" size={13} /></button>
                </div>
              )}
              <button className="btn btn-action btn-xs" title="Agregar producto a esta categoria" onClick={(e) => { e.stopPropagation(); startNewInCategory(cat.id); }}>
                <Icon name="plus" size={12} /> Producto
              </button>
            </div>
            {!collapsed[cat.id] && (
              cat.products.length === 0 ? (
                <div className="pcat-empty">
                  <span className="muted">Sin productos en esta categoria</span>
                </div>
              ) : (
                <table className="admin-table pcat-table">
                  <thead>
                    <tr><th>Nombre</th><th>POS</th><th>Precio</th><th>Area</th><th style={{ textAlign: "center" }}>Modificadores</th><th>Estado</th><th></th></tr>
                  </thead>
                  <tbody>
                    {cat.products.map((p) => (
                      <tr key={p.id} style={!p.is_active ? { opacity: 0.6 } : {}}>
                        <td><strong>{p.name}</strong>{p.description && <><br/><small className="muted">{p.description}</small></>}</td>
                        <td className="mono">{p.pos_code || <span className="muted">-</span>}</td>
                        <td className="mono">${p.base_price}</td>
                        <td>
                          <span className={`area-chip ${p.area}`}>
                            <Icon name={p.area === "bebidas" ? "coffee" : "chef"} size={11} /> {p.area}
                          </span>
                        </td>
                        <td style={{ textAlign: "center" }}>
                          <button
                            className={`mod-toggle ${p.uses_modifiers ? "mod-toggle-on" : "mod-toggle-off"}`}
                            onClick={() => toggleModifiers(p)}
                            title={p.uses_modifiers ? "Desactivar modificadores" : "Activar modificadores (tamanos, extras, etc.)"}
                          >
                            <Icon name={p.uses_modifiers ? "layers" : "plus"} size={13} />
                            <span>{p.uses_modifiers ? "Activo" : "No"}</span>
                          </button>
                        </td>
                        <td><span className={`status-dot ${p.is_active ? "active" : "inactive"}`} />{p.is_active ? "Activo" : "Inactivo"}</td>
                        <td>
                          <div className="action-btns">
                            <button className="icon-btn-sm" title="Editar" onClick={() => { setForm({ ...p }); setEditing(p.id); }}><Icon name="edit" size={14} /></button>
                            <button className="icon-btn-sm" title={p.is_active ? "Desactivar" : "Activar"} style={{ color: p.is_active ? "#D97706" : "#16a34a" }} onClick={() => toggleProduct(p)}>
                              <Icon name={p.is_active ? "ban" : "check"} size={14} />
                            </button>
                            <button className="icon-btn-sm" title="Eliminar permanentemente" style={{ color: "#C2474B" }} onClick={() => setDeleting(p)}><Icon name="trash" size={14} /></button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

// ============================================
// Panel de Modificadores — vista por categoría/producto
// ============================================
const ModifiersPanel = ({ storeId, showToast }) => {
  const [catalog, setCatalog] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [showAll, setShowAll] = useState(false);
  const [collapsed, setCollapsed] = usePersistedState("mcModCatCollapsed", {});
  const [collapsedProducts, setCollapsedProducts] = usePersistedState("mcModProdCollapsed", {});

  // Producto activo para operaciones
  const [activeProductId, setActiveProductId] = useState(null);

  // Modales
  const [editingGroup, setEditingGroup] = useState(null);
  const [groupForm, setGroupForm] = useState({});
  const [editingMod, setEditingMod] = useState(null);
  const [modForm, setModForm] = useState({});

  const load = useCallback(async () => {
    try {
      const res = await fetchWithAuth(`${API_BASE}/catalog/full`);
      if (res.ok) {
        const d = await res.json();
        setCatalog(d.catalog || []);
      }
    } catch (e) { console.error(e); }
    setLoading(false);
  }, []);

  useEffect(() => { load(); }, [load]);

  // -- Grupo CRUD --
  const saveGroup = async () => {
    const method = editingGroup === "new" ? "POST" : "PUT";
    const url = editingGroup === "new"
      ? `${API_BASE}/catalog/products/${activeProductId}/modifier-groups`
      : `${API_BASE}/catalog/modifier-groups/${groupForm.id}`;
    const res = await fetchWithAuth(url, { method, body: JSON.stringify(groupForm) });
    if (res.ok) { showToast("Grupo guardado"); setEditingGroup(null); load(); }
    else { const d = await res.json().catch(() => ({})); showToast(d.message || "Error"); }
  };

  const deleteGroup = async (groupId) => {
    const res = await fetchWithAuth(`${API_BASE}/catalog/modifier-groups/${groupId}`, { method: "DELETE" });
    if (res.ok) { showToast("Grupo eliminado"); load(); }
  };

  // -- Modificador CRUD --
  const saveMod = async () => {
    const method = editingMod === "new" ? "POST" : "PUT";
    const url = editingMod === "new"
      ? `${API_BASE}/catalog/modifier-groups/${modForm.group_id}/modifiers`
      : `${API_BASE}/catalog/modifiers/${modForm.id}`;
    const res = await fetchWithAuth(url, { method, body: JSON.stringify(modForm) });
    if (res.ok) { showToast("Modificador guardado"); setEditingMod(null); load(); }
    else { const d = await res.json().catch(() => ({})); showToast(d.message || "Error"); }
  };

  const deleteMod = async (modId) => {
    const res = await fetchWithAuth(`${API_BASE}/catalog/modifiers/${modId}`, { method: "DELETE" });
    if (res.ok) { showToast("Modificador eliminado"); load(); }
  };

  const openNewGroup = (productId) => {
    setActiveProductId(productId);
    setGroupForm({ name: "", is_required: 1, min_select: 1, max_select: 1, sort_order: 0 });
    setEditingGroup("new");
  };

  const openNewMod = (groupId) => {
    setModForm({ group_id: groupId, name: "", pos_code: "", price: 0, sort_order: 0 });
    setEditingMod("new");
  };

  const toggleCat = (catId) => setCollapsed((p) => ({ ...p, [catId]: !p[catId] }));
  const toggleProd = (prodId) => setCollapsedProducts((p) => ({ ...p, [prodId]: !p[prodId] }));

  // Filtrar catalogo
  const filtered = useMemo(() => {
    const s = search.toLowerCase();
    return catalog.map((cat) => {
      let prods = cat.products || [];
      // Filtrar solo los que tienen uses_modifiers activado
      if (!showAll) prods = prods.filter((p) => p.uses_modifiers);
      // Filtrar por búsqueda
      if (s) {
        const catMatch = cat.name.toLowerCase().includes(s);
        prods = prods.filter((p) => catMatch || p.name.toLowerCase().includes(s) || (p.pos_code || "").toLowerCase().includes(s));
      }
      if (prods.length === 0) return null;
      return { ...cat, products: prods };
    }).filter(Boolean);
  }, [catalog, search, showAll]);

  // Contar totales
  const totalWithMods = useMemo(() => {
    let count = 0;
    catalog.forEach((cat) => (cat.products || []).forEach((p) => { if (p.uses_modifiers) count++; }));
    return count;
  }, [catalog]);

  const totalProducts = useMemo(() => {
    let count = 0;
    catalog.forEach((cat) => count += (cat.products || []).length);
    return count;
  }, [catalog]);

  if (loading) {
    return <div className="empty"><div className="empty-icon"><Icon name="refresh" size={26} /></div><div className="empty-text">Cargando...</div></div>;
  }

  return (
    <div>
      <div className="admin-toolbar">
        <h2>Modificadores</h2>
        <SearchBar value={search} onChange={setSearch} placeholder="Buscar producto..." />
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <label className="toggle-label">
            <input type="checkbox" checked={showAll} onChange={(e) => setShowAll(e.target.checked)} />
            <span>Mostrar todos</span>
          </label>
          <span className="stat-chip"><Icon name="layers" size={12} /> {totalWithMods} con modificadores</span>
        </div>
      </div>

      {/* Modal: Nuevo/Editar Grupo */}
      <AdminModal
        open={!!editingGroup}
        title={editingGroup === "new" ? "Nuevo Grupo de Modificadores" : "Editar Grupo"}
        onClose={() => setEditingGroup(null)}
        onSave={saveGroup}
      >
        <div className="admin-form-grid">
          <FormField label="Nombre" value={groupForm.name} onChange={(v) => setGroupForm({ ...groupForm, name: v })} placeholder="Ej: Tamano, Extras" />
          <div className="form-field">
            <label>Obligatorio</label>
            <select value={groupForm.is_required} onChange={(e) => setGroupForm({ ...groupForm, is_required: Number(e.target.value) })}>
              <option value={1}>Si</option>
              <option value={0}>No</option>
            </select>
          </div>
          <FormField label="Seleccion minima" value={groupForm.min_select} type="number" onChange={(v) => setGroupForm({ ...groupForm, min_select: Number(v) })} />
          <FormField label="Seleccion maxima" value={groupForm.max_select} type="number" onChange={(v) => setGroupForm({ ...groupForm, max_select: Number(v) })} />
          <FormField label="Orden" value={groupForm.sort_order} type="number" onChange={(v) => setGroupForm({ ...groupForm, sort_order: Number(v) })} />
        </div>
      </AdminModal>

      {/* Modal: Nuevo/Editar Modificador */}
      <AdminModal
        open={!!editingMod}
        title={editingMod === "new" ? "Nuevo Modificador" : "Editar Modificador"}
        onClose={() => setEditingMod(null)}
        onSave={saveMod}
      >
        <div className="admin-form-grid">
          <FormField label="Nombre" value={modForm.name} onChange={(v) => setModForm({ ...modForm, name: v })} placeholder="Ej: Grande, Baby" />
          <FormField label="Codigo POS" value={modForm.pos_code || ""} onChange={(v) => setModForm({ ...modForm, pos_code: v })} placeholder="Ej: P02" />
          <FormField label="Precio" value={modForm.price} type="number" onChange={(v) => setModForm({ ...modForm, price: Number(v) })} />
          <FormField label="Orden" value={modForm.sort_order} type="number" onChange={(v) => setModForm({ ...modForm, sort_order: Number(v) })} />
        </div>
        <div className="mod-price-hint">
          <Icon name="alert" size={12} /> El ajuste para plataformas se calcula automaticamente (precio modificador - precio base del producto).
        </div>
      </AdminModal>

      {/* Vista por categoría */}
      <div className="products-by-cat">
        {filtered.length === 0 ? (
          <div className="empty"><div className="empty-text">
            {search ? "Sin resultados para la busqueda" : (showAll ? "Sin productos en el catalogo." : "Ningun producto tiene modificadores activados. Activalos desde la pestaña Productos o marca \"Mostrar todos\" para verlos aqui.")}
          </div></div>
        ) : filtered.map((cat) => (
          <div key={cat.id || "uncat"} className="pcat-section">
            <div className="pcat-header" onClick={() => toggleCat(cat.id)}>
              <Icon name={collapsed[cat.id] ? "chevronRight" : "chevronDown"} size={14} className="pcat-chevron" />
              <Icon name="tag" size={14} />
              <span className="pcat-name">{cat.name}</span>
              <span className="pcat-count">{cat.products.length}</span>
            </div>
            {!collapsed[cat.id] && cat.products.map((p) => {
              const hasGroups = p.modifier_groups && p.modifier_groups.length > 0;
              const isOpen = !collapsedProducts[p.id];
              return (
                <div key={p.id} className="mods-product-block">
                  <div className="mods-product-head" onClick={() => toggleProd(p.id)}>
                    <Icon name={isOpen ? "chevronDown" : "chevronRight"} size={12} className="pcat-chevron" />
                    <span className={`area-chip ${p.area}`}>
                      <Icon name={p.area === "bebidas" ? "coffee" : "chef"} size={10} />
                    </span>
                    <span className="mods-product-name">{p.name}</span>
                    {p.pos_code && <span className="mono muted" style={{ fontSize: 11 }}>({p.pos_code})</span>}
                    <span className="mono" style={{ fontSize: 12, fontWeight: 600, color: "var(--accent)" }}>${p.base_price}</span>
                    {hasGroups ? (
                      <span className="mods-badge-has">{p.modifier_groups.length} grupo{p.modifier_groups.length > 1 ? "s" : ""}</span>
                    ) : (
                      <span className="mods-badge-none">sin modificadores</span>
                    )}
                    <button className="btn btn-action btn-xs" onClick={(e) => { e.stopPropagation(); openNewGroup(p.id); }} title="Agregar grupo de modificadores">
                      <Icon name="plus" size={11} /> Grupo
                    </button>
                  </div>
                  {isOpen && hasGroups && (
                    <div className="mods-groups-wrap">
                      {p.modifier_groups.map((g) => (
                        <div key={g.id} className="mod-group-card">
                          <div className="mod-group-header">
                            <div className="mod-group-info">
                              <strong>{g.name}</strong>
                              <span className="mod-group-meta">
                                {g.is_required ? "Obligatorio" : "Opcional"} | min: {g.min_select} max: {g.max_select}
                              </span>
                            </div>
                            <div className="mod-group-actions">
                              <button className="icon-btn-sm" title="Agregar modificador" onClick={() => openNewMod(g.id)}><Icon name="plus" size={14} /></button>
                              <button className="icon-btn-sm" title="Editar grupo" onClick={() => { setActiveProductId(p.id); setGroupForm({ ...g }); setEditingGroup(g.id); }}><Icon name="edit" size={14} /></button>
                              <button className="icon-btn-sm" style={{ color: "#C2474B" }} title="Eliminar grupo" onClick={() => deleteGroup(g.id)}><Icon name="trash" size={14} /></button>
                            </div>
                          </div>
                          {g.modifiers && g.modifiers.length > 0 && (
                            <table className="admin-table compact">
                              <thead><tr><th>Opcion</th><th>Codigo POS</th><th>Precio</th><th>Ajuste (auto)</th><th></th></tr></thead>
                              <tbody>
                                {g.modifiers.map((m) => {
                                  const adj = Math.max(0, Number(m.price) - Number(p.base_price));
                                  return (
                                    <tr key={m.id}>
                                      <td><strong>{m.name}</strong></td>
                                      <td className="mono">{m.pos_code || <span className="muted">-</span>}</td>
                                      <td className="mono">${m.price}</td>
                                      <td className="mono" style={{ color: adj > 0 ? "var(--accent)" : "var(--text-3)" }}>{adj > 0 ? `+$${adj}` : "$0"}</td>
                                      <td>
                                        <div className="action-btns">
                                          <button className="icon-btn-sm" onClick={() => { setModForm({ ...m, group_id: g.id }); setEditingMod(m.id); }}><Icon name="edit" size={13} /></button>
                                          <button className="icon-btn-sm" style={{ color: "#C2474B" }} onClick={() => deleteMod(m.id)}><Icon name="trash" size={13} /></button>
                                        </div>
                                      </td>
                                    </tr>
                                  );
                                })}
                              </tbody>
                            </table>
                          )}
                          {(!g.modifiers || g.modifiers.length === 0) && (
                            <div className="pcat-empty" style={{ padding: 12 }}>
                              <span className="muted">Sin opciones. </span>
                              <button className="btn-icon-text" onClick={() => openNewMod(g.id)}><Icon name="plus" size={11} /> Agregar opcion</button>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
};

// ============================================
// Panel de Disponibilidad por Plataforma
// ============================================
const AvailabilityPanel = ({ storeId, showToast }) => {
  const [products, setProducts] = useState([]);
  const [availability, setAvailability] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");

  const load = useCallback(async () => {
    const [pRes, aRes] = await Promise.all([
      fetchWithAuth(`${API_BASE}/catalog/products`),
      fetchWithAuth(`${API_BASE}/catalog/availability?store_id=${storeId}`),
    ]);
    if (pRes.ok) { const d = await pRes.json(); setProducts(d.products || []); }
    if (aRes.ok) { const d = await aRes.json(); setAvailability(d.availability || []); }
    setLoading(false);
  }, [storeId]);

  useEffect(() => { load(); }, [load]);

  const platformList = ["rappi", "uber_eats", "didi_food"];

  const getAvail = (productId, platform) => {
    return availability.find((a) => a.product_id === productId && a.platform === platform);
  };

  const toggleAvailability = async (productId, platform) => {
    const existing = getAvail(productId, platform);
    const newVal = existing ? (existing.is_available ? 0 : 1) : 1;

    const res = await fetchWithAuth(`${API_BASE}/catalog/availability`, {
      method: "POST",
      body: JSON.stringify({
        store_id: storeId,
        product_id: productId,
        platform: platform,
        is_available: newVal,
      }),
    });

    if (res.ok) {
      setAvailability((prev) => {
        const idx = prev.findIndex((a) => a.product_id === productId && a.platform === platform);
        if (idx >= 0) {
          const updated = [...prev];
          updated[idx] = { ...updated[idx], is_available: newVal };
          return updated;
        }
        return [...prev, { product_id: productId, platform, is_available: newVal, store_id: storeId }];
      });
      showToast(`${platform} ${newVal ? "activado" : "desactivado"}`);
    }
  };

  if (loading) {
    return <div className="empty"><div className="empty-icon"><Icon name="refresh" size={26} /></div><div className="empty-text">Cargando...</div></div>;
  }

  return (
    <div>
      <div className="admin-toolbar">
        <h2>Disponibilidad por Plataforma</h2>
        <SearchBar value={search} onChange={setSearch} placeholder="Buscar producto..." />
        <span className="muted">{products.length} productos | Haz clic para activar/desactivar</span>
      </div>

      {(() => {
        const filteredProducts = products.filter((p) => {
          if (!search) return true;
          const s = search.toLowerCase();
          return p.name.toLowerCase().includes(s) || (p.area || "").toLowerCase().includes(s);
        });
        return (
      <table className="admin-table availability-table">
        <thead>
          <tr>
            <th>Producto</th>
            <th>Area</th>
            {platformList.map((pl) => (
              <th key={pl} style={{ textAlign: "center" }}>
                <span className="plat-header" style={{ color: PLATFORMS[pl]?.color }}>
                  {PLATFORMS[pl]?.short || pl}
                </span>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {filteredProducts.map((p) => (
            <tr key={p.id}>
              <td><strong>{p.name}</strong></td>
              <td>
                <span className={`area-chip ${p.area}`}>
                  <Icon name={p.area === "bebidas" ? "coffee" : "chef"} size={11} />
                </span>
              </td>
              {platformList.map((pl) => {
                const avail = getAvail(p.id, pl);
                const isOn = avail?.is_available;
                return (
                  <td key={pl} style={{ textAlign: "center" }}>
                    <button
                      className={`avail-toggle ${isOn ? "avail-on" : "avail-off"}`}
                      onClick={() => toggleAvailability(p.id, pl)}
                      title={isOn ? "Desactivar" : "Activar"}
                    >
                      <Icon name={isOn ? "check" : "x"} size={14} />
                    </button>
                    {isOn && avail?.platform_price && (
                      <div className="avail-price">${avail.platform_price}</div>
                    )}
                  </td>
                );
              })}
            </tr>
          ))}
          {filteredProducts.length === 0 && (
            <tr><td colSpan={2 + platformList.length} className="empty-cell">{search ? "Sin resultados para la busqueda" : "Sin productos. Agrega productos primero."}</td></tr>
          )}
        </tbody>
      </table>
        );
      })()}
    </div>
  );
};

// ============================================
// Panel 86'd — Productos agotados (toggle rapido)
// ============================================
const EightySixPanel = ({ storeId, showToast }) => {
  const [products, setProducts] = useState([]);
  const [eightySixed, setEightySixed] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [logSignal, setLogSignal] = useState(0);

  const load = useCallback(async () => {
    const [pRes, eRes] = await Promise.all([
      fetchWithAuth(`${API_BASE}/catalog/products`),
      fetchWithAuth(`${API_BASE}/catalog/86-list?store_id=${storeId}`),
    ]);
    if (pRes.ok) { const d = await pRes.json(); setProducts(d.products || []); }
    if (eRes.ok) { const d = await eRes.json(); setEightySixed(d.items || []); }
    setLoading(false);
  }, [storeId]);

  useEffect(() => { load(); }, [load]);

  const toggle86 = async (productId, currentlyAvailable) => {
    const res = await fetchWithAuth(`${API_BASE}/catalog/products/${productId}/toggle-86`, {
      method: "POST",
      body: JSON.stringify({ store_id: storeId, is_available: !currentlyAvailable }),
    });
    if (res.ok) {
      const data = await res.json();
      // Reflejar si Uber se actualizó al instante (suspensión de item)
      if (data.uber_sync && data.uber_sync.ok) showToast(`${data.message} · sincronizado con Uber`);
      else if (data.uber_sync) showToast(`${data.message} · ${data.uber_sync.message}`);
      else showToast(data.message);
      setLogSignal((s) => s + 1);
      load();
    } else {
      const err = await res.json().catch(() => ({}));
      showToast(err.error || err.message || "Error al actualizar");
    }
  };

  const eightySixedIds = new Set(eightySixed.map((e) => e.id));

  const filtered = products.filter((p) => {
    if (!search) return true;
    const s = search.toLowerCase();
    return p.name.toLowerCase().includes(s) || (p.pos_code || "").toLowerCase().includes(s);
  });

  if (loading) {
    return <div className="empty"><div className="empty-icon"><Icon name="refresh" size={26} /></div><div className="empty-text">Cargando...</div></div>;
  }

  return (
    <div>
      <div className="admin-toolbar">
        <h2>
          <Icon name="ban" size={18} /> Productos 86'd (Agotados)
        </h2>
        <span className="muted">
          {eightySixed.length} producto{eightySixed.length !== 1 ? "s" : ""} agotado{eightySixed.length !== 1 ? "s" : ""}
        </span>
      </div>

      {eightySixed.length > 0 && (
        <div className="admin-form-card" style={{ marginBottom: 16, background: "color-mix(in oklab, var(--danger) 6%, var(--surface))", borderColor: "color-mix(in oklab, var(--danger) 20%, var(--border))" }}>
          <h3 style={{ color: "var(--danger)", margin: "0 0 10px" }}>
            <Icon name="alert" size={15} /> Actualmente agotados
          </h3>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {eightySixed.map((item) => (
              <button
                key={item.id}
                className="badge-86"
                style={{ cursor: "pointer", padding: "6px 12px", fontSize: 12 }}
                onClick={() => toggle86(item.id, false)}
                title="Clic para marcar como disponible"
              >
                <Icon name="x" size={11} /> {item.name}
                {item.pos_code && <span className="mono" style={{ opacity: 0.7, marginLeft: 4 }}>({item.pos_code})</span>}
              </button>
            ))}
          </div>
          <div className="muted" style={{ marginTop: 8, fontSize: 11 }}>Haz clic en un producto para restaurarlo como disponible</div>
        </div>
      )}

      <div style={{ marginBottom: 12 }}>
        <div className="history-filters" style={{ padding: "8px 12px" }}>
          <div className="filter-group" style={{ minWidth: "auto" }}>
            <Icon name="search" size={14} />
            <input
              type="text"
              placeholder="Buscar producto..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
        </div>
      </div>

      <table className="admin-table">
        <thead>
          <tr>
            <th>Producto</th>
            <th>POS</th>
            <th>Categoria</th>
            <th>Precio</th>
            <th>Area</th>
            <th>Estado</th>
            <th style={{ textAlign: "center" }}>86'd</th>
          </tr>
        </thead>
        <tbody>
          {filtered.map((p) => {
            const is86d = eightySixedIds.has(p.id) || !p.is_active;
            return (
              <tr key={p.id} style={is86d ? { background: "color-mix(in oklab, var(--danger) 5%, transparent)" } : {}}>
                <td>
                  <strong>{p.name}</strong>
                  {is86d && <span className="badge-86" style={{ marginLeft: 8 }}>86'd</span>}
                </td>
                <td className="mono">{p.pos_code || <span className="muted">mod</span>}</td>
                <td>{p.category_name || "-"}</td>
                <td className="mono">${p.base_price}</td>
                <td>
                  <span className={`area-chip ${p.area}`}>
                    <Icon name={p.area === "bebidas" ? "coffee" : "chef"} size={11} /> {p.area}
                  </span>
                </td>
                <td>
                  <span className={`status-dot ${is86d ? "inactive" : "active"}`} />
                  {is86d ? "Agotado" : "Disponible"}
                </td>
                <td style={{ textAlign: "center" }}>
                  <button
                    className={`avail-toggle ${is86d ? "avail-off" : "avail-on"}`}
                    onClick={() => toggle86(p.id, !is86d)}
                    title={is86d ? "Marcar disponible" : "Marcar como 86'd (agotado)"}
                    style={is86d ? { borderColor: "var(--danger)", background: "color-mix(in oklab, var(--danger) 15%, var(--surface))" } : {}}
                  >
                    <Icon name={is86d ? "ban" : "check"} size={14} />
                  </button>
                </td>
              </tr>
            );
          })}
          {filtered.length === 0 && (
            <tr><td colSpan={7} className="empty-cell">
              {search ? "Sin resultados para la busqueda" : "Sin productos en el catalogo"}
            </td></tr>
          )}
        </tbody>
      </table>

      {window.ActivityHistory && <ActivityHistory storeId={storeId} category="stock" refreshSignal={logSignal} />}
    </div>
  );
};

Object.assign(window, { MenuCatalogView });