// Reusable presentational bits for the e-shop kit:
// VNTasteProfile (light↔dark + mild↔strong scales), VNBatchSeal (provenance stamp),
// VNStock (honest availability badge). All placeholder-friendly.
(function () {
  if (typeof React === "undefined") return;
  const Icon = window.VNIcon;

  // ---- Taste profile: two 5-step scales (med) or sweetness (medovina) ----
  // Scale defined at module scope so it keeps a stable component identity —
  // otherwise it remounts on every parent re-render (e.g. switching product
  // photos) and the fill animation replays. One mount → animate once → static.
  function Scale({ label, lo, hi, value }) {
    return (
      <div className="vn-taste__row">
        <span className="vn-taste__lo">{lo}</span>
        <span className="vn-taste__track" aria-label={`${label}: ${value} z 5`}>
          {[1,2,3,4,5].map((n) => (
            <span key={n} className="vn-taste__pip" data-on={n <= value} />
          ))}
        </span>
        <span className="vn-taste__hi">{hi}</span>
      </div>
    );
  }

  function TasteProfile({ profile, compact }) {
    if (!profile || (!profile.color && !profile.sweet && !(profile.traits && profile.traits.length))) return null;
    return (
      <div className={"vn-taste" + (compact ? " vn-taste--compact" : "")}>
        {profile.traits && profile.traits.length ? (
          profile.traits.map((t, i) => (
            <Scale key={i} label={t.label} lo={t.lo} hi={t.hi} value={t.value} />
          ))
        ) : profile.sweet ? (
          <Scale label="Sladkost" lo="polosuchá" hi="sladká" value={profile.sweet} />
        ) : (
          <>
            <Scale label="Barva" lo="světlý" hi="tmavý" value={profile.color} />
            <Scale label="Intenzita" lo="jemný" hi="výrazný" value={profile.intensity} />
          </>
        )}
        {!compact && profile.notes && profile.notes.length > 0 && (
          <div className="vn-taste__notes">
            {profile.notes.map((n, i) => <span key={i} className="vn-taste__note">{n}</span>)}
          </div>
        )}
      </div>
    );
  }

  // ---- Batch seal: circular provenance stamp ----
  function BatchSeal({ prov, weight }) {
    if (!prov) return null;
    return (
      <div className="vn-seal" role="img" aria-label={"Stočeno " + prov.bottled + ", šarže " + prov.lot}>
        <svg className="vn-seal__ring" viewBox="0 0 120 120" aria-hidden="true">
          <defs>
            <path id="vn-seal-top" d="M 60 60 m -42 0 a 42 42 0 1 1 84 0" />
            <path id="vn-seal-bot" d="M 18 60 a 42 42 0 0 0 84 0" />
          </defs>
          <circle cx="60" cy="60" r="56" fill="none" stroke="currentColor" strokeWidth="1.5" strokeOpacity=".5" />
          <circle cx="60" cy="60" r="49" fill="none" stroke="currentColor" strokeWidth="1" strokeOpacity=".35" />
          <text className="vn-seal__arc"><textPath href="#vn-seal-top" startOffset="50%" textAnchor="middle">RODINNÉ VČELAŘSTVÍ NAJMAN</textPath></text>
          <text className="vn-seal__arc"><textPath href="#vn-seal-bot" startOffset="50%" textAnchor="middle">HOSTIVICE · ČESKO</textPath></text>
        </svg>
        <span className="vn-seal__center">
          <span className="vn-seal__label">stočeno</span>
          <b className="vn-seal__date">{prov.bottled}</b>
          {weight && <span className="vn-seal__wt">{weight}</span>}
        </span>
      </div>
    );
  }

  // ---- Honest stock badge ----
  const STOCK = {
    in:  { label: "Skladem", cls: "in", icon: "check" },
    low: { label: "Poslední kusy", cls: "low", icon: "spark" },
    out: { label: "Vyprodáno", cls: "out", icon: "close" },
  };
  function Stock({ status }) {
    const s = STOCK[status] || STOCK.in;
    return (
      <span className={"vn-stock vn-stock--" + s.cls}>
        <span className="vn-stock__dot" />
        {s.label}
      </span>
    );
  }

  Object.assign(window, { VNTasteProfile: TasteProfile, VNBatchSeal: BatchSeal, VNStock: Stock });
})();