/* Product listing + product detail */

const FILTER_KEYS = ["category", "type", "usage", "color", "size", "surface", "look"];
const SWATCH = { white: "#F4F2EE", beige: "#D9C9AE", grey: "#A7A49E", anthracite: "#47464A", wood: "#B58A5E", green: "#3E7A55" };

function productValues(p, key) {
  switch (key) {
    case "category": return [p.cat];
    case "usage": return p.usage;
    default: return [p[key]];
  }
}
function optionLabel(t, key, v) {
  if (key === "category") return t("cat." + v);
  if (key === "size") return v;
  if (key === "type") return t("pt." + v);
  return t("v." + v);
}
function allOptions(key) {
  const set = [];
  window.PRODUCTS.forEach(p => productValues(p, key).forEach(v => { if (!set.includes(v)) set.push(v); }));
  if (key === "size") set.sort((a, b) => parseFloat(a) - parseFloat(b) || a.localeCompare(b));
  return set;
}
function applyFilters(sel, exceptKey) {
  return window.PRODUCTS.filter(p => FILTER_KEYS.every(k => {
    if (k === exceptKey || !sel[k] || !sel[k].length) return true;
    return productValues(p, k).some(v => sel[k].includes(v));
  }));
}

function FilterPanel({ sel, toggle, idPrefix }) {
  const { t } = useApp();
  return (
    <div>
      {FILTER_KEYS.map(key => {
        const opts = allOptions(key);
        if (!opts.length) return null; // only show filters that have sample data
        const base = applyFilters(sel, key);
        return (
          <fieldset key={key} className="f-group">
            <legend>{t("f." + key)}</legend>
            <div className="f-opts">
              {opts.map(v => {
                const on = (sel[key] || []).includes(v);
                const n = base.filter(p => productValues(p, key).includes(v)).length;
                return (
                  <label key={v} className={"chip" + (on ? " on" : "") + (!n && !on ? " dis" : "")}>
                    <input type="checkbox" checked={on} onChange={() => toggle(key, v)} id={`${idPrefix}-${key}-${v}`} />
                    {key === "color" && <span className="sw" style={{ background: SWATCH[v] }} />}
                    {optionLabel(t, key, v)} <span className="n">{n}</span>
                  </label>
                );
              })}
            </div>
          </fieldset>
        );
      })}
    </div>
  );
}

function CatalogPage() {
  const { t, route } = useApp();
  const init = () => {
    const s = {};
    FILTER_KEYS.forEach(k => { if (route.q[k]) s[k] = route.q[k].split(","); });
    return s;
  };
  const [sel, setSel] = useState(init);
  const [drawer, setDrawer] = useState(false);
  useEffect(() => { setSel(init()); }, [route.q.category, route.q.usage, route.q.look]);

  // keep URL in sync without triggering navigation
  useEffect(() => {
    const qs = FILTER_KEYS.filter(k => sel[k] && sel[k].length).map(k => k + "=" + sel[k].join(",")).join("&");
    const h = hrefFor(route.lang, "products", null, qs || null);
    if (location.hash !== h) history.replaceState(null, "", h);
  }, [sel]);

  useEffect(() => {
    if (!drawer) return;
    document.body.style.overflow = "hidden";
    const k = e => e.key === "Escape" && setDrawer(false);
    document.addEventListener("keydown", k);
    return () => { document.body.style.overflow = ""; document.removeEventListener("keydown", k); };
  }, [drawer]);

  const toggle = (key, v) => setSel(s => {
    const cur = s[key] || [];
    return { ...s, [key]: cur.includes(v) ? cur.filter(x => x !== v) : [...cur, v] };
  });
  const clear = () => setSel({});
  const results = applyFilters(sel);
  const active = FILTER_KEYS.flatMap(k => (sel[k] || []).map(v => ({ k, v })));

  return (
    <>
      <PageHead title={t("cat.title")} lead={t("cat.intro")}>
        <p className="demo-bar"><span className="tag-demo">{t("demo.badge")}</span>{t("cat.demo")}</p>
      </PageHead>
      <div className="wrap catalog">
        <aside className="filters" aria-label={t("f.title")}>
          <FilterPanel sel={sel} toggle={toggle} idPrefix="d" />
          {active.length > 0 && <button className="link" onClick={clear} style={{ marginTop: 8 }}>{t("f.clear")}</button>}
        </aside>
        <section aria-label={t("cat.title")}>
          <CategoryTabs current={null} />
          <div className="cat-top" style={{ marginTop: 20 }}>
            <p aria-live="polite"><b>{t("f.results", { n: results.length })}</b></p>
            <button className="btn btn-line btn-sm filter-open" onClick={() => setDrawer(true)} aria-expanded={drawer}>
              {Ico.filter()} {t("f.open")}{active.length ? ` (${active.length})` : ""}
            </button>
          </div>
          {active.length > 0 && (
            <div className="active-tags" aria-label={t("f.active")}>
              {active.map(({ k, v }) => (
                <button key={k + v} className="atag" onClick={() => toggle(k, v)} aria-label={t("f.remove", { x: optionLabel(t, k, v) })}>
                  {optionLabel(t, k, v)} <span className="x">{Ico.close(14)}</span>
                </button>
              ))}
              <button className="link" onClick={clear} style={{ marginLeft: 8, fontSize: 14 }}>{t("f.clear")}</button>
            </div>
          )}
          {results.length ? (
            <div className="grid cols-3">{results.map(p => <ProductCard key={p.id} p={p} />)}</div>
          ) : (
            <div className="empty" role="status">
              <div className="ico" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
              <h2 className="h-3">{t("empty.title")}</h2>
              <p>{t("empty.text")}</p>
              <div className="btn-row" style={{ justifyContent: "center" }}>
                <button className="btn btn-dark" onClick={clear}>{t("empty.clear")}</button>
                <a className="btn btn-line" href={hrefFor(route.lang, "quote")}>{t("empty.ask")}</a>
              </div>
            </div>
          )}
        </section>
      </div>

      {drawer && (
        <>
          <div className="drawer-bg" onClick={() => setDrawer(false)} />
          <div className="drawer" role="dialog" aria-modal="true" aria-labelledby="drawer-h">
            <div className="drawer-head">
              <h2 id="drawer-h" className="h-3">{t("f.title")}</h2>
              <button className="icon-btn" onClick={() => setDrawer(false)} aria-label={t("nav.close")} autoFocus>{Ico.close()}</button>
            </div>
            <div className="drawer-body"><FilterPanel sel={sel} toggle={toggle} idPrefix="m" /></div>
            <div className="drawer-foot">
              <button className="btn btn-line" onClick={clear}>{t("f.clear")}</button>
              <button className="btn btn-primary" onClick={() => setDrawer(false)}>{t("f.show", { n: results.length })}</button>
            </div>
          </div>
        </>
      )}
    </>
  );
}

/* ---------------- detail ---------------- */
function Lightbox({ imgs, idx, setIdx, onClose, name }) {
  const { t } = useApp();
  useEffect(() => {
    const k = e => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setIdx(i => (i + 1) % imgs.length);
      if (e.key === "ArrowLeft") setIdx(i => (i - 1 + imgs.length) % imgs.length);
    };
    document.addEventListener("keydown", k);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", k); document.body.style.overflow = ""; };
  }, []);
  return (
    <div className="lightbox" role="dialog" aria-modal="true" aria-label={name}>
      <img src={imgs[idx]} alt={`${name} — ${idx + 1}`} />
      <button className="lb-btn lb-close" onClick={onClose} aria-label={t("g.close")} autoFocus>{Ico.close()}</button>
      {imgs.length > 1 && <>
        <button className="lb-btn lb-prev" onClick={() => setIdx(i => (i - 1 + imgs.length) % imgs.length)} aria-label={t("g.prev")}>{Ico.left()}</button>
        <button className="lb-btn lb-next" onClick={() => setIdx(i => (i + 1) % imgs.length)} aria-label={t("g.next")}>{Ico.right()}</button>
      </>}
      <span className="lb-count">{t("g.of", { i: idx + 1, n: imgs.length })}</span>
    </div>
  );
}

function ProductPage() {
  const { t, route, specVariant } = useApp();
  const p = window.PRODUCTS.find(x => x.id === route.slug);
  const [idx, setIdx] = useState(0);
  const [lb, setLb] = useState(false);
  const touch = useRef(null);
  useEffect(() => { setIdx(0); }, [route.slug]);
  useEffect(() => {
    document.documentElement.style.setProperty("--bottom-offset", window.innerWidth <= 1020 ? "73px" : "0px");
    const r = () => document.documentElement.style.setProperty("--bottom-offset", window.innerWidth <= 1020 ? "73px" : "0px");
    window.addEventListener("resize", r);
    return () => { window.removeEventListener("resize", r); document.documentElement.style.setProperty("--bottom-offset", "0px"); };
  }, []);
  if (!p) return <NotFound />;
  const imgs = p.img;
  const url = window.SITE.baseUrl + pathFor(route.lang, "product", p.id);
  const waMsg = t("d.wa.msg", { name: p.name, code: p.code, url });
  const similar = window.PRODUCTS.filter(x => x.id !== p.id)
    .map(x => ({ x, s: (x.look === p.look ? 2 : 0) + (x.cat === p.cat ? 1 : 0) + (x.color === p.color ? 1 : 0) }))
    .sort((a, b) => b.s - a.s).slice(0, 4).map(o => o.x);
  const next = () => setIdx(i => (i + 1) % imgs.length);
  const prev = () => setIdx(i => (i - 1 + imgs.length) % imgs.length);

  return (
    <>
      <div className="wrap" style={{ paddingTop: 28 }}><Crumbs /></div>
      <div className="wrap pd">
        <div>
          <div className="gal-main"
            onTouchStart={e => (touch.current = e.touches[0].clientX)}
            onTouchEnd={e => { if (touch.current == null) return; const dx = e.changedTouches[0].clientX - touch.current; if (Math.abs(dx) > 40) (dx < 0 ? next : prev)(); touch.current = null; }}>
            <img src={imgs[idx]} alt={`${p.name} — ${t("d.look").toLowerCase()}: ${t("v." + p.look)} (${idx + 1}/${imgs.length})`} />
            <button className="zoom" onClick={() => setLb(true)} aria-label={t("g.open")}></button>
            {idx === 0 && specVariant !== "off" && <SpecCard p={p} variant={specVariant} size="lg" />}
            {!p.custom && <span className="tag-demo" style={{ position: "absolute", right: 16, top: 16 }}>{t("demo.badge")}</span>}
            {imgs.length > 1 && <span className="gal-count">{t("g.of", { i: idx + 1, n: imgs.length })}</span>}
            <div className="gal-nav">
              {imgs.length > 1 && <>
                <button onClick={prev} aria-label={t("g.prev")}>{Ico.left()}</button>
                <button onClick={next} aria-label={t("g.next")}>{Ico.right()}</button>
              </>}
              <button onClick={() => setLb(true)} aria-label={t("g.open")}>{Ico.zoom()}</button>
            </div>
          </div>
          {imgs.length > 1 && (
            <div className="thumbs" role="group" aria-label="Galeri">
              {imgs.map((src, i) => (
                <button key={src} onClick={() => setIdx(i)} aria-current={i === idx ? "true" : undefined} aria-label={`${i + 1}`}>
                  <img src={src} alt="" />
                </button>
              ))}
            </div>
          )}
        </div>

        <div className="pd-info">
          <p className="pd-code">{t("d.code")}: {p.code}</p>
          <h1 className="h-1">{p.name}</h1>
          <p className="muted">{t("d.desc", productDescVars(route.lang, p))}</p>
          <dl className="specs">
            <div><dt>{t("d.category")}</dt><dd><a href={hrefFor(route.lang, "category", p.cat)}>{window.SEO_CONTENT[route.lang].cats[p.cat].h1}</a></dd></div>
            {p.type && <div><dt>{t("d.type")}</dt><dd>{t("pt." + p.type)}</dd></div>}
            <div><dt>{t("d.size")}</dt><dd>{p.size} cm</dd></div>
            <div><dt>{t("d.surface")}</dt><dd>{t("v." + p.surface)}</dd></div>
            <div><dt>{t("d.color")}</dt><dd style={{ display: "flex", alignItems: "center", gap: 8 }}><span className="sw" style={{ background: SWATCH[p.color] }} />{t("v." + p.color)}</dd></div>
            <div><dt>{t("d.look")}</dt><dd>{t("v." + p.look)}</dd></div>
            <div><dt>{t("d.usage")}</dt><dd>{p.usage.map(u => t("v." + u)).join(", ")}</dd></div>
            {p.badges && p.badges.length > 0 && <div><dt>{t("d.badges")}</dt><dd><Badges ids={p.badges} size={30} /></dd></div>}
          </dl>
          <p className="pd-price">{t("price.note")}</p>
          <div className="pd-actions">
            <AddButton product={p} full />
            <WaButton className="btn btn-line btn-block" msg={waMsg} label={t("d.wa")} />
          </div>
          <div className="pd-doc"><span className="ico" aria-hidden="true"></span><div><b style={{ color: "var(--ink)", fontWeight: 500 }}>{t("d.doc")}</b><br />{t("d.doc.none")}</div></div>
          <p className="pd-unverified">{t("d.unverified")}</p>
        </div>
      </div>

      <ProductCompare p={p} similar={similar} />
      <ProductFaq p={p} />

      <section className="sec-tight sec-stone" aria-labelledby="sim-h">
        <div className="wrap">
          <div className="sec-head"><h2 id="sim-h" className="h-2">{t("d.similar")}</h2>
            <a className="link" href={hrefFor(route.lang, "products")}>{t("feat.all")} {Ico.arrow()}</a></div>
          <div className="grid">{similar.map(x => <ProductCard key={x.id} p={x} />)}</div>
        </div>
      </section>

      <div className="sticky-bar">
        <WaButton className="icon-btn" msg={waMsg}><span className="sr-only">{t("d.wa")}</span>{Ico.chat(18)}</WaButton>
        <AddButton product={p} />
      </div>

      {lb && <Lightbox imgs={imgs} idx={idx} setIdx={setIdx} onClose={() => setLb(false)} name={p.name} />}
    </>
  );
}

function NotFound() {
  const { t, route } = useApp();
  return (
    <div className="wrap" style={{ padding: "96px var(--gut)", minHeight: "50vh" }}>
      <h1 className="h-1">{t("nf.title")}</h1>
      <p className="lead" style={{ margin: "16px 0 28px" }}>{t("nf.text")}</p>
      <div className="btn-row">
        <a className="btn btn-dark" href={hrefFor(route.lang, "home")}>{t("nav.home")}</a>
        <a className="btn btn-line" href={hrefFor(route.lang, "products")}>{t("nav.products")}</a>
      </div>
    </div>
  );
}

Object.assign(window, { CatalogPage, ProductPage, NotFound, SWATCH });