/* Spec card overlay + feature badges + demo product admin */

function BadgeIcon({ id, size = 34 }) {
  const b = window.BADGES.find(x => x.id === id);
  if (!b) return null;
  const glyph = b.glyph === "frost"
    ? <svg width={size * 0.5} height={size * 0.5} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7"/></svg>
    : <span style={{ fontSize: b.glyph.length > 2 ? size * 0.3 : size * 0.4 }}>{b.glyph}</span>;
  return <span className="bdg-ico" style={{ width: size, height: size }} aria-hidden="true">{glyph}</span>;
}

/* Badges. mode "label": icon + visible text (spec list).
   mode "tip": icon box + small info dot; name appears as tooltip on hover / focus / tap. */
function Badges({ ids, size = 34, labels = true, mode, inLink }) {
  const { t } = useApp();
  const [open, setOpen] = useState(null);
  const ref = useRef(null);
  const m = mode || (labels ? "label" : "tip");
  useEffect(() => {
    if (open == null) return;
    const h = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(null); };
    const k = e => e.key === "Escape" && setOpen(null);
    document.addEventListener("pointerdown", h); document.addEventListener("keydown", k);
    return () => { document.removeEventListener("pointerdown", h); document.removeEventListener("keydown", k); };
  }, [open]);
  if (!ids || !ids.length) return null;
  if (m === "label") return (
    <ul className="bdgs" aria-label={t("pc.badges")}>
      {ids.map(id => <li key={id}><BadgeIcon id={id} size={size} /><span className="bdg-lbl">{t("b." + id)}</span></li>)}
    </ul>
  );
  return (
    <ul className="bdgs bdgs-tip" aria-label={t("pc.badges")} ref={ref}>
      {ids.map(id => {
        const label = t("b." + id);
        const tipId = "tip-" + id + "-" + Math.random().toString(36).slice(2, 7);
        const inner = <>
          <BadgeIcon id={id} size={size} />
          <span className="bdg-i" aria-hidden="true">i</span>
          <span className="bdg-tip" role="tooltip" id={tipId}>{label}</span>
        </>;
        return (
          <li key={id} className={open === id ? "open" : ""}>
            {inLink
              ? <span className="bdg-btn" aria-label={label}>{inner}</span>
              : <button type="button" className="bdg-btn" aria-label={label} aria-describedby={tipId} aria-expanded={open === id}
                  onClick={() => setOpen(o => (o === id ? null : id))}>{inner}</button>}
          </li>
        );
      })}
    </ul>
  );
}

/* The overlay itself. variant: "panel" (floating frosted panel) | "strip" (bottom band). size: "sm" | "lg" */
function SpecCard({ p, variant = "panel", size = "sm", fields, inLink }) {
  const { t } = useApp();
  const F = fields || { model: true, size: true, type: true, look: true, badges: true };
  const rows = [
    F.model && ["pc.model", p.name, "name"],
    F.size && ["pc.size", p.size + " cm", "size"],
    F.type && p.type && ["pc.type", t("pt." + p.type), "type"],
    F.look && ["pc.look", t("v." + p.look), "look"]
  ].filter(Boolean);
  return (
    <div className={`spec spec-${variant} spec-${size}`}>
      <dl>
        {rows.map(([k, v, cls]) => (
          <div key={k} className={cls || ""}><dt>{t(k)}</dt><dd>{v}</dd></div>
        ))}
      </dl>
      {F.badges && p.badges && p.badges.length > 0 && <Badges ids={p.badges} size={size === "lg" ? 38 : 26} mode="tip" inLink={inLink} />}
    </div>
  );
}

/* ---------------- Demo admin: add product ---------------- */
const SIZES = ["10×10", "7,5×30", "15×90", "20×120", "30×60", "60×60", "60×120", "80×80", "120×120"];
const LOOKS = ["marble", "stone", "woodlook", "concrete", "glazed"];
const SURFACES = ["matte", "glossy", "structured"];
const COLORS = ["white", "beige", "grey", "anthracite", "wood", "green"];
const USAGES = ["bath", "kitchen", "living", "outdoor"];
const CATS = ["floor", "wall", "outdoor"];

const slugify = s => s.toLowerCase()
  .replace(/ı/g, "i").replace(/ğ/g, "g").replace(/ü/g, "u").replace(/ş/g, "s").replace(/ö/g, "o").replace(/ç/g, "c")
  .normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "urun";

function shrink(file) {
  return new Promise((res, rej) => {
    const img = new Image();
    img.onload = () => {
      const s = Math.min(1, 1100 / Math.max(img.width, img.height));
      const c = document.createElement("canvas");
      c.width = Math.round(img.width * s); c.height = Math.round(img.height * s);
      c.getContext("2d").drawImage(img, 0, 0, c.width, c.height);
      res(c.toDataURL("image/jpeg", 0.8));
    };
    img.onerror = rej;
    img.src = URL.createObjectURL(file);
  });
}

function AdminPage() {
  const { t, route, specVariant } = useApp();
  const blank = { name: "", code: "", cat: "floor", type: "porcelain", size: "60×120", surface: "glossy", look: "marble", color: "white", usage: ["living"], badges: ["rectified"], img: [] };
  const [p, setP] = useState(blank);
  const [err, setErr] = useState({});
  const [saved, setSaved] = useState(null);
  const [custom, setCustom] = useState(() => JSON.parse(localStorage.getItem("ms_products_custom") || "[]"));
  const set = (k, v) => { setP(s => ({ ...s, [k]: v })); setErr(e => ({ ...e, [k]: null })); setSaved(null); };
  const toggleArr = (k, v) => set(k, p[k].includes(v) ? p[k].filter(x => x !== v) : [...p[k], v]);

  const onFiles = async e => {
    const fs = Array.from(e.target.files).slice(0, 4);
    const urls = [];
    for (const f of fs) { try { urls.push(await shrink(f)); } catch (x) {} }
    set("img", [...p.img, ...urls].slice(0, 4));
  };

  const save = e => {
    e.preventDefault();
    const er = {};
    if (!p.name.trim()) er.name = "Model adı zorunludur.";
    if (!p.img.length) er.img = "En az bir görsel ekleyin.";
    if (!p.usage.length) er.usage = "En az bir kullanım alanı seçin.";
    setErr(er);
    if (Object.keys(er).length) return;
    const id = slugify(p.name);
    const prod = { ...p, id, code: p.code.trim() || "—", custom: true };
    const next = [prod, ...custom.filter(x => x.id !== id)];
    try {
      localStorage.setItem("ms_products_custom", JSON.stringify(next));
    } catch (x) { setErr({ img: "Tarayıcı depolama alanı doldu — daha küçük görsel deneyin." }); return; }
    const i = window.PRODUCTS.findIndex(x => x.id === id);
    if (i > -1) window.PRODUCTS[i] = prod; else window.PRODUCTS.unshift(prod);
    setCustom(next); setSaved(id); setP(blank);
  };
  const del = id => {
    const next = custom.filter(x => x.id !== id);
    localStorage.setItem("ms_products_custom", JSON.stringify(next));
    const i = window.PRODUCTS.findIndex(x => x.id === id);
    if (i > -1) window.PRODUCTS.splice(i, 1);
    setCustom(next);
  };

  const preview = { ...p, name: p.name || "Model adı", img: p.img.length ? p.img : ["img/p-calacatta.jpg"] };

  const Chips = ({ k, opts, label, multi, lab }) => (
    <fieldset className="field full">
      <legend className="lbl" style={{ marginBottom: 8 }}>{label}</legend>
      <div className="f-opts">
        {opts.map(v => {
          const on = multi ? p[k].includes(v) : p[k] === v;
          return (
            <label key={v} className={"chip" + (on ? " on" : "")}>
              <input type={multi ? "checkbox" : "radio"} name={"adm-" + k} checked={on} onChange={() => multi ? toggleArr(k, v) : set(k, v)} />
              {lab(v)}
            </label>
          );
        })}
      </div>
      {err[k] && <span className="ferr" role="alert">{Ico.info(16)} {err[k]}</span>}
    </fieldset>
  );

  return (
    <div lang="tr">
      <header className="page-head adm-head">
        <div className="wrap">
          <p className="eyebrow">Yönetim paneli · demo</p>
          <h1 className="h-1" style={{ marginTop: 14 }}>Ürün ekle</h1>
          <p className="lead" style={{ marginTop: 14 }}>Seçtiğiniz özellikler ürün görselinin üzerindeki detay kartına, ürün detay sayfasına ve katalog filtrelerine otomatik yansır. Metinler dört dilde otomatik çevrilir; yalnızca model adı ve kodu girilir.</p>
          <div className="alert alert-demo" style={{ marginTop: 20, maxWidth: 760 }}>{Ico.info()}<span>Demo: Kayıtlar yalnızca bu tarayıcıda saklanır. Canlı sitede bu ekran bir içerik yönetim sistemine (CMS) bağlanmalı ve giriş korumalı olmalıdır.</span></div>
        </div>
      </header>
      <div className="wrap adm">
        <form className="form-card" onSubmit={save} noValidate>
          <div className="form-grid">
            <Field id="adm-name" label="Model adı" error={err.name}>
              <input id="adm-name" className="input" value={p.name} onChange={e => set("name", e.target.value)} placeholder="örn. Swan" />
            </Field>
            <Field id="adm-code" label="Ürün kodu" optional>
              <input id="adm-code" className="input" value={p.code} onChange={e => set("code", e.target.value)} placeholder="örn. SW-60120" />
            </Field>

            <div className="field full">
              <span className="lbl">Görseller <span className="opt">(ilk görsel kapak olur · en fazla 4)</span></span>
              <div className="adm-imgs">
                {p.img.map((src, i) => (
                  <div key={i} className="adm-img">
                    <img src={src} alt="" />
                    {i === 0 && <span className="tag-demo" style={{ position: "absolute", left: 6, top: 6 }}>Kapak</span>}
                    <button type="button" className="adm-x" aria-label="Görseli kaldır" onClick={() => set("img", p.img.filter((_, j) => j !== i))}>{Ico.close(14)}</button>
                  </div>
                ))}
                {p.img.length < 4 && (
                  <label className="adm-add">
                    {Ico.plus(18)}<span>Görsel ekle</span>
                    <input type="file" accept="image/*" multiple className="sr-only" onChange={onFiles} />
                  </label>
                )}
              </div>
              {err.img && <span className="ferr" role="alert">{Ico.info(16)} {err.img}</span>}
            </div>

            <Chips k="cat" label="Kategori" opts={CATS} lab={v => translate("tr", "cat." + v)} />
            <Chips k="type" label="Ürün tipi" opts={window.PRODUCT_TYPES} lab={v => translate("tr", "pt." + v)} />
            <Chips k="size" label="Ürün ebatı (cm)" opts={SIZES} lab={v => v} />
            <Chips k="look" label="Doku / görünüm" opts={LOOKS} lab={v => translate("tr", "v." + v)} />
            <Chips k="surface" label="Yüzey" opts={SURFACES} lab={v => translate("tr", "v." + v)} />
            <Chips k="color" label="Renk" opts={COLORS} lab={v => <><span className="sw" style={{ background: SWATCH[v] }} />{translate("tr", "v." + v)}</>} />
            <Chips k="usage" label="Kullanım alanı" multi opts={USAGES} lab={v => translate("tr", "v." + v)} />

            <fieldset className="field full">
              <legend className="lbl" style={{ marginBottom: 8 }}>Özellik rozetleri <span className="opt">(yalnızca doğrulanmış özellikleri seçin)</span></legend>
              <div className="adm-badges">
                {window.BADGES.map(b => {
                  const on = p.badges.includes(b.id);
                  return (
                    <label key={b.id} className={"adm-badge" + (on ? " on" : "")}>
                      <input type="checkbox" className="sr-only" checked={on} onChange={() => toggleArr("badges", b.id)} />
                      <BadgeIcon id={b.id} size={34} />
                      <span>{translate("tr", "b." + b.id)}</span>
                    </label>
                  );
                })}
              </div>
            </fieldset>

            <div className="full" style={{ display: "grid", gap: 12 }}>
              {saved && (
                <div className="alert alert-ok" role="status">{Ico.check()}<span>Ürün kaydedildi (bu tarayıcıda). <a href={hrefFor(route.lang, "product", saved)}>Ürün sayfasını gör</a> · <a href={hrefFor(route.lang, "products")}>Katalogda gör</a></span></div>
              )}
              <button className="btn btn-primary btn-block">Ürünü kaydet</button>
            </div>
          </div>
        </form>

        <aside className="adm-side">
          <p className="eyebrow" style={{ marginBottom: 14 }}>Canlı önizleme</p>
          <div className="adm-prev">
            <div className="card-img spec-host" style={{ aspectRatio: "1/1" }}>
              <img src={preview.img[0]} alt="" />
              <SpecCard p={preview} variant={specVariant === "off" ? "panel" : specVariant} size="lg" />
            </div>
            <p className="hint" style={{ marginTop: 10 }}>Ürün detay sayfasındaki büyük görsel</p>
          </div>
          <div style={{ maxWidth: 300, marginTop: 28 }}>
            <ProductCard p={{ ...preview, id: "__preview" }} forceSpec />
            <p className="hint" style={{ marginTop: 10 }}>Katalogdaki ürün kartı</p>
          </div>

          {custom.length > 0 && (
            <div style={{ marginTop: 40 }}>
              <h2 className="h-3" style={{ marginBottom: 12 }}>Eklenen ürünler ({custom.length})</h2>
              <div className="q-items">
                {custom.map(c => (
                  <div key={c.id} className="adm-row">
                    <img src={c.img[0]} alt="" />
                    <div><b>{c.name}</b><br /><span className="small muted">{c.size} cm · {translate("tr", "pt." + c.type)}</span></div>
                    <a className="btn btn-line btn-sm" href={hrefFor(route.lang, "product", c.id)}>Gör</a>
                    <button className="q-rm" onClick={() => del(c.id)}>Sil</button>
                  </div>
                ))}
              </div>
            </div>
          )}
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { SpecCard, Badges, BadgeIcon, AdminPage });