/* ============================================================
   aiquests/aiquests-ui.jsx — виджеты подсистемы «Игровые курсы».
   Exposes: QIcon, AIQLevelDial, AIQXPBar, AIQStamp, AIQTrophy, AIQStreak.
   Зависимости: только React.
   ============================================================ */
const React = window.React;

const AIQ_P = {
  check:  "M4 12l5 5L20 6",
  close:  "M6 6l12 12M18 6L6 18",
  back:   "M19 12H5M11 18l-6-6 6-6",
  arrow:  "M5 12h14M13 6l6 6-6 6",
  chevron:"M6 9l6 6 6-6",
  play:   "M7 4l13 8-13 8z",
  lock:   "M7 11V7a5 5 0 0110 0v4M5 11h14v10H5zM12 15v3",
  flame:  "M12 3c1 4 4 5 4 9a4 4 0 11-8 0c0-2 1-3 2-4 .5 2 2 2 2 3 1-1 0-5 0-8z",
  target: "M12 12m-9 0a9 9 0 1018 0a9 9 0 10-18 0M12 12m-4 0a4 4 0 108 0a4 4 0 10-8 0M12 12h.01",
  crown:  "M3 18h18M3 18l1.2-9 4.3 4 3.5-7 3.5 7 4.3-4L21 18z",
  scroll: "M8 3h11a2 2 0 012 2v2h-4M8 3a3 3 0 00-3 3v13a2 2 0 002 2h11a2 2 0 002-2v-2H8M8 3v14M11 9h6M11 13h4",
  book:   "M5 4h10a2 2 0 012 2v14H7a2 2 0 01-2-2zM17 6v14",
  spark:  "M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z",
  seal:   "M12 2l2.5 2.5L18 3l.5 3.5L22 8l-2.5 2.5L20 14l-3.5.5L15 18l-3-1.5L9 18l-1.5-3.5L4 14l1-3.5L4 8l3.5-1.5L8 3l3.5 1.5z",
  swords: "M4 20l7-7M13 4l7 7-3 3-7-7zM4 20l-1-4 4 1zM17 4l4 1-1 4z",
};
window.QIcon = function QIcon({ name, size = 18, stroke = 2, fill = false, style, color }) {
  const d = AIQ_P[name] || AIQ_P.target;
  return React.createElement("svg", {
    width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": true,
    style: { display: "block", color, ...style },
    fill: fill ? "currentColor" : "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round",
  }, React.createElement("path", { d }));
};

/* ---- шестигранный циферблат уровня (акт как «уровень») ---- */
window.AIQLevelDial = function AIQLevelDial({ level, size = 128 }) {
  const c = size / 2, r = size / 2 - 6;
  const pts = Array.from({ length: 6 }).map((_, i) => {
    const a = (Math.PI / 3) * i - Math.PI / 2;
    return `${c + r * Math.cos(a)},${c + r * Math.sin(a)}`;
  }).join(" ");
  return (
    <div className="aiq-dial" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <polygon points={pts} fill="none" stroke="var(--ink-100)" strokeWidth="2.5" />
        <polygon points={pts} fill="none" stroke="var(--ink-100)" strokeWidth="1" transform={`scale(0.82) translate(${c * 0.22 / 0.82}, ${c * 0.22 / 0.82})`} />
      </svg>
      <div className="aiq-dial__center">
        <div className="aiq-dial__lv e-label">уровень</div>
        <div className="aiq-dial__num">{level}</div>
        <div className="aiq-dial__of e-label">из 20</div>
      </div>
    </div>
  );
};

window.AIQXPBar = function AIQXPBar({ xp }) {
  const { rank, next, into, span } = window.AIQLookup.rankFor(xp);
  const pct = next ? Math.min(100, (into / span) * 100) : 100;
  return (
    <div className="aiq-xp">
      <div className="aiq-xp__head">
        <span className="e-label">{rank.name}</span>
        <span className="aiq-xp__num">{xp.toLocaleString("ru-RU")} XP</span>
        <span className="e-label" style={{ color: "var(--text-faint)" }}>{next ? next.name : "предел званий"}</span>
      </div>
      <div className="aiq-xp__track"><i style={{ width: pct + "%" }} /></div>
      {next && <div className="aiq-xp__foot mono">до звания «{next.name}» — {(next.at - xp).toLocaleString("ru-RU")} XP</div>}
    </div>
  );
};

window.AIQStamp = function AIQStamp({ ok = true, label, size = "md" }) {
  return <span className={"aiq-stamp" + (size === "lg" ? " aiq-stamp--lg" : "")}>{label || (ok ? "Закрыт" : "")}</span>;
};

window.AIQTrophy = function AIQTrophy({ def, earned, date }) {
  const QIcon = window.QIcon;
  return (
    <div className={"aiq-trophy" + (earned ? "" : " aiq-trophy--ghost")}>
      <div className="aiq-trophy__disc"><QIcon name={def.icon} size={20} /></div>
      <div className="aiq-trophy__name">{def.name}</div>
      <div className="aiq-trophy__desc">{def.desc}</div>
      <div className="aiq-trophy__date mono">{earned ? date : "— впереди —"}</div>
    </div>
  );
};

window.AIQStreak = function AIQStreak({ streak, compact }) {
  const QIcon = window.QIcon;
  const active = streak.last === window.AIQLookup.dayKey();
  return (
    <div className={"aiq-streak" + (compact ? " aiq-streak--compact" : "")}>
      <QIcon name="flame" size={compact ? 18 : 26} fill={active} color={active ? "var(--signal)" : "var(--ink-100)"} />
      <span className="aiq-streak__num">{streak.count}</span>
      <span className="e-label" style={{ color: active ? "var(--signal)" : "var(--text-muted)" }}>
        {compact ? "дн." : active ? "дней в походе" : "дней · пора продолжать"}
      </span>
    </div>
  );
};