// Maison Dahab — pages: Home, Listing (Collection), Product detail
const { useState: usePState, useEffect: usePEffect, useMemo: usePMemo, useRef: usePRef } = React;

// ================= HOME =================
const HERO_SLIDES = [
  { id: "hero-1", eyebrow: "Nouvelle collection", title: <React.Fragment>L'or, façonné <em>à la main</em></React.Fragment>, sub: "Pièces en or 18 et 21 carats, dessinées et frappées dans notre atelier de Casablanca.", ph: "photo héro 1 — pièce sur velours sombre" },
  { id: "hero-2", eyebrow: "Joncs & bracelets", title: <React.Fragment>La lumière au <em>poignet</em></React.Fragment>, sub: "Joncs martelés, gourmettes et mailles royales — la matière avant tout.", ph: "photo héro 2 — jonc martelé porté" },
  { id: "hero-3", eyebrow: "Pièces de transmission", title: <React.Fragment>Ce qui se <em>transmet</em></React.Fragment>, sub: "Chevalières gravées, parures d'héritage. L'or qui traverse les générations.", ph: "photo héro 3 — détail gravure" },
];

function Hero({ nav }) {
  const [idx, setIdx] = usePState(0);
  const timer = usePRef(null);
  usePEffect(() => {
    timer.current = setInterval(() => setIdx((i) => (i + 1) % HERO_SLIDES.length), 7000);
    return () => clearInterval(timer.current);
  }, []);
  const go = (i) => { clearInterval(timer.current); setIdx(i); };
  const s = HERO_SLIDES[idx];
  return (
    <section className="hero" aria-label="À la une">
      {HERO_SLIDES.map((sl, i) => (
        <div key={sl.id} className={`hero__slide ${i === idx ? "is-active" : ""}`}>
          <div className="ken">
            <Slot slotId={sl.id} placeholder={sl.ph} style={{ width: "100%", height: "100%" }} />
          </div>
        </div>
      ))}
      <div className="hero__veil"></div>
      <div className="hero__content">
        <span className="eyebrow">{s.eyebrow}</span>
        <h1 className="hero__title sweep">{s.title}</h1>
        <p className="hero__sub">{s.sub}</p>
        <button className="btn btn--solid" onClick={() => nav("#/collection")}>Découvrir les pièces</button>
        <div className="hero__dots" role="tablist" aria-label="Diapositives">
          {HERO_SLIDES.map((sl, i) => (
            <button key={sl.id} className={`hero__dot ${i === idx ? "is-active" : ""}`} aria-label={`Diapositive ${i + 1}`} onClick={() => go(i)}></button>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePage({ nav, onOpenProduct, onAdd }) {
  const featured = ["p-206", "p-301", "p-102", "p-306"].map((id) => DB.product(id)).filter(Boolean);
  return (
    <React.Fragment>
      <Hero nav={nav} />

      {/* collections */}
      <section className="section wrap">
        <div className="section__head">
          <div>
            <span className="eyebrow">Les collections</span>
            <h2>Trois façons de porter l'or</h2>
          </div>
          <button className="linklite only-desktop" onClick={() => nav("#/collection")}>Tout voir</button>
        </div>
        <hr className="hairline hairline--glint" style={{ marginBottom: "36px" }} />
        <div className="collections">
          {DB.topCategories().map((cat, i) => (
            <Rise key={cat.id} delay={i * 0.12}>
              <article className="colcard" onClick={() => nav(`#/collection/${cat.id}`)} style={{ height: "100%" }}>
                <div className="colcard__img">
                  <Slot slotId={cat.image} placeholder={`photo collection — ${cat.name.toLowerCase()}`} />
                </div>
                <div className="colcard__meta">
                  <h3>{cat.name}</h3>
                  <span className="count">{DB.inCategory(cat.id).length} pièces</span>
                </div>
              </article>
            </Rise>
          ))}
        </div>
      </section>

      {/* featured */}
      <section className="section wrap">
        <div className="section__head">
          <div>
            <span className="eyebrow">Sélection de la maison</span>
            <h2>Pièces signature</h2>
          </div>
          <button className="linklite only-desktop" onClick={() => nav("#/collection")}>Toute la collection</button>
        </div>
        <div className="pgrid">
          {featured.map((p, i) => (
            <ProductCard key={p.id} product={p} onOpen={onOpenProduct} onAdd={onAdd} delay={i * 0.1} />
          ))}
        </div>
      </section>

      {/* atelier strip */}
      <section className="atelier">
        <div className="wrap atelier__in">
          <div className="atelier__num serif">39<span style={{ fontSize: "0.4em" }} > ans</span></div>
          <div className="atelier__txt">
            <h3>Un atelier, une main, une signature</h3>
            <p>Chaque pièce est fondue, frappée et polie dans notre atelier des Habous. Poinçon d'État, certificat de poids, gravure offerte — et la garantie d'un or qui se reprend à vie.</p>
          </div>
          <button className="btn btn--ghost" onClick={() => nav("#/collection")}>Voir le travail</button>
        </div>
      </section>
    </React.Fragment>
  );
}

// ================= LISTING =================
function ListingPage({ catId, nav, onOpenProduct, onAdd }) {
  const [query, setQuery] = usePState("");
  const [sort, setSort] = usePState("featured");
  const cat = catId ? DB.category(catId) : null;
  const parent = cat && cat.parent ? DB.category(cat.parent) : null;
  const topId = parent ? parent.id : cat ? cat.id : null;

  const items = usePMemo(() => {
    let list = catId ? DB.inCategory(catId) : DB.products();
    if (query.trim()) {
      const q = query.trim().toLowerCase();
      list = list.filter((p) => (p.name + " " + p.description).toLowerCase().includes(q));
    }
    if (sort === "price-asc") list = [...list].sort((a, b) => a.price - b.price);
    if (sort === "price-desc") list = [...list].sort((a, b) => b.price - a.price);
    return list;
  }, [catId, query, sort]);

  return (
    <div className="page wrap">
      <div className="crumbs">
        <button onClick={() => nav("#/")}>Accueil</button>
        <span className="sep">/</span>
        {parent && (
          <React.Fragment>
            <button onClick={() => nav(`#/collection/${parent.id}`)}>{parent.name}</button>
            <span className="sep">/</span>
          </React.Fragment>
        )}
        <span style={{ color: "var(--gold-2)" }}>{cat ? cat.name : "Toutes les pièces"}</span>
      </div>
      <div className="page__head">
        <span className="eyebrow">Collection</span>
        <h1>{cat ? cat.name : "Toutes les pièces"}</h1>
      </div>

      {/* mobile chips */}
      <div className="chips only-mobile" style={{ marginBottom: "18px" }}>
        <button className={`chip ${!catId ? "is-active" : ""}`} onClick={() => nav("#/collection")}>Tout</button>
        {DB.topCategories().map((c) => (
          <button key={c.id} className={`chip ${topId === c.id ? "is-active" : ""}`} onClick={() => nav(`#/collection/${c.id}`)}>{c.name}</button>
        ))}
        {topId && DB.childrenOf(topId).map((c) => (
          <button key={c.id} className={`chip ${catId === c.id ? "is-active" : ""}`} onClick={() => nav(`#/collection/${c.id}`)}>{c.name}</button>
        ))}
      </div>

      <div className="shop__layout">
        <aside className="shop__filters only-desktop" aria-label="Filtres">
          <div className="fgroup">
            <div className="fgroup__title">Catégories</div>
            <button className={`flink ${!catId ? "is-active" : ""}`} onClick={() => nav("#/collection")}>
              Toutes les pièces <span className="n">{DB.products().length}</span>
            </button>
            {DB.topCategories().map((c) => (
              <React.Fragment key={c.id}>
                <button className={`flink ${catId === c.id ? "is-active" : ""}`} onClick={() => nav(`#/collection/${c.id}`)}>
                  {c.name} <span className="n">{DB.inCategory(c.id).length}</span>
                </button>
                {DB.childrenOf(c.id).map((sub) => (
                  <button key={sub.id} className={`flink flink--sub ${catId === sub.id ? "is-active" : ""}`} onClick={() => nav(`#/collection/${sub.id}`)}>
                    {sub.name} <span className="n">{DB.inCategory(sub.id).length}</span>
                  </button>
                ))}
              </React.Fragment>
            ))}
          </div>
        </aside>

        <div>
          <div className="shop__bar">
            <span className="shop__count">{items.length} pièce{items.length > 1 ? "s" : ""}</span>
            <div className="shop__tools">
              <input
                className="input"
                type="search"
                placeholder="Rechercher une pièce…"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                style={{ width: "min(240px, 60vw)" }}
              />
              <select className="select" value={sort} onChange={(e) => setSort(e.target.value)} aria-label="Trier">
                <option value="featured">Sélection</option>
                <option value="price-asc">Prix croissant</option>
                <option value="price-desc">Prix décroissant</option>
              </select>
            </div>
          </div>

          {items.length === 0 ? (
            <div className="cart__empty">
              <span className="serif">Aucune pièce ne correspond</span>
              Essayez un autre mot, ou parcourez les collections.
            </div>
          ) : (
            <div className="pgrid">
              {items.map((p, i) => (
                <ProductCard key={p.id} product={p} onOpen={onOpenProduct} onAdd={onAdd} delay={(i % 4) * 0.08} />
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ================= PRODUCT DETAIL =================
const ATTR_LABELS = {
  material: "Matière", weight: "Poids", carat: "Titre", size: "Taille",
  pierre: "Pierre", largeur: "Largeur", maille: "Maille", plateau: "Plateau",
  gravure: "Gravure", personnalisation: "Personnalisation",
};

function ProductPage({ productId, nav, onAdd }) {
  const p = DB.product(productId);
  const [qty, setQty] = usePState(1);
  const [img, setImg] = usePState(0);
  usePEffect(() => { setQty(1); setImg(0); window.scrollTo(0, 0); }, [productId]);

  if (!p) {
    return (
      <div className="page wrap">
        <div className="cart__empty">
          <span className="serif">Pièce introuvable</span>
          Elle n'est peut-être plus disponible.
          <div style={{ marginTop: "20px" }}>
            <button className="btn" onClick={() => nav("#/collection")}>Voir la collection</button>
          </div>
        </div>
      </div>
    );
  }

  const cat = DB.category(p.category);
  const parent = cat && cat.parent ? DB.category(cat.parent) : null;
  const related = DB.inCategory(parent ? parent.id : p.category).filter((x) => x.id !== p.id).slice(0, 4);

  return (
    <div className="page wrap">
      <div className="crumbs">
        <button onClick={() => nav("#/")}>Accueil</button>
        <span className="sep">/</span>
        {parent && (
          <React.Fragment>
            <button onClick={() => nav(`#/collection/${parent.id}`)}>{parent.name}</button>
            <span className="sep">/</span>
          </React.Fragment>
        )}
        {cat && (
          <React.Fragment>
            <button onClick={() => nav(`#/collection/${cat.id}`)}>{cat.name}</button>
            <span className="sep">/</span>
          </React.Fragment>
        )}
        <span style={{ color: "var(--gold-2)" }}>{p.name}</span>
      </div>

      <div className="pdp" style={{ marginTop: "28px" }}>
        <div className="pdp__gallery">
          <div className="pdp__main">
            <Slot slotId={p.images[img] || p.images[0]} placeholder={`photo — ${p.name.toLowerCase()}`} />
          </div>
          {p.images.length > 1 && (
            <div className="pdp__thumbs">
              {p.images.map((key, i) => (
                <button key={key} className={`pdp__thumb ${i === img ? "is-active" : ""}`} onClick={() => setImg(i)} aria-label={`Vue ${i + 1}`}>
                  <Slot slotId={key} placeholder={`vue ${i + 1}`} />
                </button>
              ))}
            </div>
          )}
        </div>

        <div className="pdp__info">
          <span className="eyebrow">{cat ? cat.name : ""} — {p.attributes.carat}</span>
          <h1 className="pdp__name">{p.name}</h1>
          <div className="pdp__pricewrap">
            <span className="price pdp__price">{FMT_MAD(p.price)}</span>
            <span className="note">selon le cours du jour</span>
          </div>
          <p className="pdp__desc">{p.description}</p>

          <table className="attrs">
            <tbody>
              {Object.entries(p.attributes).map(([k, v]) => (
                <tr key={k}>
                  <th>{ATTR_LABELS[k] || k}</th>
                  <td>{v}</td>
                </tr>
              ))}
            </tbody>
          </table>

          <div className="pdp__cta">
            <div className="qty" aria-label="Quantité">
              <button onClick={() => setQty(Math.max(1, qty - 1))} aria-label="Moins">−</button>
              <span>{qty}</span>
              <button onClick={() => setQty(Math.min(9, qty + 1))} aria-label="Plus">+</button>
            </div>
            <button className="btn btn--solid" onClick={() => onAdd(p.id, qty)}>Ajouter au panier — {FMT_MAD(p.price * qty)}</button>
          </div>

          <div className="pdp__assurance">
            <div><span className="tick">—</span> Poinçon d'État & certificat de poids</div>
            <div><span className="tick">—</span> Nous vous appelons pour confirmer chaque commande</div>
            <div><span className="tick">—</span> Mise à taille et gravure offertes à l'atelier</div>
          </div>
        </div>
      </div>

      {related.length > 0 && (
        <section className="section">
          <div className="section__head">
            <div>
              <span className="eyebrow">À découvrir aussi</span>
              <h2>Dans la même collection</h2>
            </div>
          </div>
          <div className="pgrid">
            {related.map((rp, i) => (
              <ProductCard key={rp.id} product={rp} onOpen={(id) => nav(`#/produit/${id}`)} onAdd={onAdd} delay={i * 0.08} />
            ))}
          </div>
        </section>
      )}
    </div>
  );
}

Object.assign(window, { HomePage, ListingPage, ProductPage, HERO_SLIDES });