/* menu.jsx — Carta / Menu page */

// ── Product card (variants: editorial vs grid) ────────────────────
const ProductCard = ({ product, layout = 'editorial', onAdd, onDetail }) => {
  const sello = product.sellos[0];
  const selloFr = sello ? SELLOS[sello]?.fr : null;
  // Si hay sabores/variantes o modificadores → "Añadir" abre el detalle
  // para escoger (no añade a ciegas). Pedido del negocio.
  const needsChoice = (product.variants && product.variants.length > 0) || product.hasMods;
  const onAddClick = (e) => {
    e.stopPropagation();
    if (needsChoice) onDetail(product); else onAdd(product);
  };
  return (
    <article
      className={`product-card${layout === 'grid' ? ' product-card--grid' : ''}`}
      onClick={() => onDetail(product)}
    >
      <div className="product-card__media">
        <ImgSlot tone={product.img} label={product.name} sub="Foto del producto" icon={false} />
      </div>
      <div className="product-card__body">
        {sello && <span className="product-card__sello">— {selloFr || SELLOS[sello].label} —</span>}
        <h3 className="product-card__title">{product.name}</h3>
        <p className="product-card__desc">{product.desc}</p>
        <ProductTags tags={product.tags} />
      </div>
      {layout === 'grid' ? (
        <div className="product-card__body">
          <div className="product-card__price-row">
            <span className="product-card__price">{cop(product.price)}</span>
            <span className="rule--vert" />
            <button className="btn-add" onClick={onAddClick}>{needsChoice ? 'Elegir' : 'Añadir'}</button>
          </div>
        </div>
      ) : (
        <div className="product-card__price-wrap">
          <div className="product-card__price">
            {cop(product.price)}
            {product.variants.length > 0 && <small>desde</small>}
          </div>
          <button className="btn-add" onClick={onAddClick}>{needsChoice ? 'Elegir' : 'Añadir'}</button>
        </div>
      )}
    </article>
  );
};

// ── Featured strip (smart sections at top) ────────────────────────
const FeaturedStrip = ({ onDetail }) => {
  const sections = [
    { id: 'best-sellers', label: 'Más vendidos', fr: 'Les favoris', sello: 'bestseller' },
    { id: 'recommended',  label: 'Recomendado',   fr: 'Recommandé par la maison', sello: 'recommended' },
    { id: 'healthy',      label: 'Saludable',     fr: 'Léger & sain', sello: 'healthy' },
    { id: 'shareable',    label: 'Para compartir', fr: 'À partager', sello: 'shareable' },
  ];
  // Resolver destacados; si NINGÚN producto tiene sello → no renderizar nada
  // (evita el contenedor vacío con borde que se veía "roto").
  const picks = sections
    .map((s) => ({ s, pick: PRODUCTS.find((p) => p.sellos.includes(s.sello)) }))
    .filter((x) => x.pick);

  if (picks.length === 0) return null;

  return (
    <div className="featured-strip">
      {picks.map(({ s, pick }) => (
        <article key={s.id} id={s.id} className="featured-card smart-section" onClick={() => onDetail(pick)}>
          <div className="featured-card__media">
            <ImgSlot tone={pick.img} label="" icon={false} />
          </div>
          <div>
            <div className="featured-card__sello">— {s.fr} —</div>
            <h4 className="featured-card__title">{pick.name}</h4>
            <div className="featured-card__price">{cop(pick.price)}</div>
          </div>
        </article>
      ))}
    </div>
  );
};

// ── Filter sidebar ────────────────────────────────────────────────
const FilterSidebar = ({ activeCat, setActiveCat, activeFilters, toggleFilter, categoryCounts, open, onPick }) => {
  const pickCat = (id) => { setActiveCat(id); onPick && onPick(); };
  return (
  <aside className={`filter-sidebar filter-sidebar--collapsible ${open ? 'is-open' : ''}`}>
    <h3>La carta</h3>
    <ul>
      <li
        className={activeCat === 'all' ? 'is-active' : ''}
        onClick={() => pickCat('all')}
      >
        <span>Todo</span>
        <span className="filter-sidebar li__count">{PRODUCTS.length}</span>
      </li>
      {CATEGORIES.map((c) => (
        <li
          key={c.id}
          className={'nav-item' + (activeCat === c.id ? ' is-active' : '')}
          onClick={() => pickCat(c.id)}
        >
          <span>{c.label}</span>
          <span className="filter-sidebar li__count">{categoryCounts[c.id] || 0}</span>
        </li>
      ))}
    </ul>
    <h3>Selección de la casa</h3>
    <div className="filter-sidebar__chips">
      <button
        className={`filter-chip ${activeFilters.includes('bestseller') ? 'is-on' : ''}`}
        onClick={() => { toggleFilter('bestseller'); onPick && onPick(); }}
      >Más vendido</button>
      <button
        className={`filter-chip ${activeFilters.includes('recommended') ? 'is-on' : ''}`}
        onClick={() => { toggleFilter('recommended'); onPick && onPick(); }}
      >Recomendado</button>
      <button
        className={`filter-chip ${activeFilters.includes('healthy') ? 'is-on' : ''}`}
        onClick={() => { toggleFilter('healthy'); onPick && onPick(); }}
      >Saludable</button>
      <button
        className={`filter-chip ${activeFilters.includes('shareable') ? 'is-on' : ''}`}
        onClick={() => { toggleFilter('shareable'); onPick && onPick(); }}
      >Para compartir</button>
    </div>
    <h3>Restricciones</h3>
    <div className="filter-sidebar__chips">
      <button
        className={`filter-chip ${activeFilters.includes('veg') ? 'is-on' : ''}`}
        onClick={() => { toggleFilter('veg'); onPick && onPick(); }}
      >Vegetariano</button>
      <button
        className={`filter-chip ${activeFilters.includes('gf') ? 'is-on' : ''}`}
        onClick={() => { toggleFilter('gf'); onPick && onPick(); }}
      >Sin gluten</button>
    </div>
  </aside>
  );
};

// ── Menu section ──────────────────────────────────────────────────
const MenuSection = ({ category, products, layout, onAdd, onDetail, num }) => {
  if (!products.length) return null;
  const dark = category.id === 'cocktails';
  return (
    <section
      id={category.id}
      className={`menu-section ${dark ? 'menu-section--dark' : ''}`}
    >
      <div className="menu-section__head">
        <h2 className="menu-section__title">{category.label}</h2>
        <span className="menu-section__num">N.º {String(num).padStart(2, '0')} · {products.length} {products.length === 1 ? 'pieza' : 'piezas'}</span>
      </div>
      {category.sub && <p className="menu-section__lede">{category.sub}</p>}
      <div className={layout === 'grid' ? 'product-grid' : 'product-list'}>
        {products.map((p) => (
          <ProductCard
            key={p.id}
            product={p}
            layout={layout}
            onAdd={onAdd}
            onDetail={onDetail}
          />
        ))}
      </div>
    </section>
  );
};

// ── Repeat order banner ──────────────────────────────────────────
const RepeatOrder = ({ onRepeat, show }) => {
  if (!show) return null;
  return (
    <div id="repeat-order-container">
      <div>
        <div className="display">Tu último pedido</div>
        <p className="lede">Croissant aux amandes · Cappuccino · Macaron de violeta — del 12 de mayo</p>
      </div>
      <button className="btn btn--outline btn--sm" onClick={onRepeat}>Repetir pedido</button>
    </div>
  );
};

// ── Menu page ────────────────────────────────────────────────────
const MenuPage = ({ layout, onAdd, onDetail, onRepeat, hasLastOrder }) => {
  const [activeCat, setActiveCat] = React.useState('all');
  const [activeFilters, setActiveFilters] = React.useState([]);
  const [filtersOpen, setFiltersOpen] = React.useState(false);
  const closeFilters = () => setFiltersOpen(false);

  const toggleFilter = (f) => {
    setActiveFilters((prev) => prev.includes(f) ? prev.filter((x) => x !== f) : [...prev, f]);
  };

  const filtered = PRODUCTS.filter((p) => {
    if (activeFilters.length === 0) return true;
    return activeFilters.every((f) => {
      if (f === 'veg' || f === 'gf') return p.tags.includes(f);
      return p.sellos.includes(f);
    });
  });

  const categoryCounts = {};
  PRODUCTS.forEach((p) => { categoryCounts[p.cat] = (categoryCounts[p.cat] || 0) + 1; });

  const visibleCategories = activeCat === 'all'
    ? CATEGORIES
    : CATEGORIES.filter((c) => c.id === activeCat);

  return (
    <div className="container">
      <div className="menu-layout">
        <button
          type="button"
          className={`menu-filter-toggle ${filtersOpen ? 'is-open' : ''}`}
          onClick={() => setFiltersOpen((o) => !o)}
          aria-expanded={filtersOpen}
        >
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true">
            <path d="M2 4 H14 M4 8 H12 M6 12 H10" strokeLinecap="round" />
          </svg>
          <span>
            {filtersOpen ? 'Ocultar filtros' : 'Filtrar la carta'}
            {' · '}
            {activeCat === 'all'
              ? 'Todo'
              : (CATEGORIES.find((c) => c.id === activeCat) || {}).label || 'Todo'}
            {activeFilters.length > 0 ? ` (+${activeFilters.length})` : ''}
          </span>
          <span className="menu-filter-toggle__chev">{filtersOpen ? '×' : '▾'}</span>
        </button>
        <FilterSidebar
          activeCat={activeCat}
          setActiveCat={setActiveCat}
          activeFilters={activeFilters}
          toggleFilter={toggleFilter}
          categoryCounts={categoryCounts}
          open={filtersOpen}
          onPick={closeFilters}
        />
        <div className="menu-main">
          <header style={{ marginBottom: 36 }}>
            <span className="eyebrow" style={{ display: 'block', marginBottom: 14 }}>Nuestra carta · Pastelería Alexandra Castro</span>
            <h1 className="display display-2" style={{ margin: '0 0 18px' }}>Nuestra carta</h1>
            <p className="serif-body" style={{ fontSize: 'var(--t-md)', maxWidth: 560, margin: 0 }}>
              Recetas hechas cada mañana. Lo que no encuentres hoy, vuelve mañana — siempre hay algo nuevo en la vitrina.
            </p>
          </header>

          <RepeatOrder show={hasLastOrder} onRepeat={onRepeat} />

          <FeaturedStrip onDetail={onDetail} />

          {visibleCategories.map((c, i) => (
            <MenuSection
              key={c.id}
              category={c}
              products={filtered.filter((p) => p.cat === c.id)}
              layout={layout}
              onAdd={onAdd}
              onDetail={onDetail}
              num={CATEGORIES.findIndex((x) => x.id === c.id) + 1}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

window.MenuPage = MenuPage;
window.ProductCard = ProductCard;