/* ============================================================
   unityquest/unityquest-ui.jsx — виджеты подсистемы «Unity Quest».
   Exposes: UQIcon, UQLevelDial, UQLevelBar, UQStamp, UQTrophy, UQStreak.
   Зависимости: только React.
   ============================================================ */
const React = window.React;

const UQ_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",
  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",
  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",
  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",
  sword:  "M14.5 3.5l6 6-9 9-3-1-1-3zM11.5 12.5L4 20M4 20l-1-4 4 1z",
  dice:   "M4 4h16v16H4zM8 8h.01M16 8h.01M8 16h.01M16 16h.01M12 12h.01",
};
window.UQIcon = function UQIcon({ name, size = 18, stroke = 2, fill = false, style, color }) {
  const d = UQ_P[name] || UQ_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 }));
};

/* ---- круглый циферблат уровня (уровень = floor(xp/1000)+1) ---- */
window.UQLevelDial = function UQLevelDial({ level, into, span, size = 128 }) {
  const c = size / 2, r = size / 2 - 8;
  const circ = 2 * Math.PI * r;
  const frac = Math.max(0, Math.min(into / span, 1));
  return (
    <div className="uq-dial" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <circle cx={c} cy={c} r={r} fill="none" stroke="var(--paper-20)" strokeWidth="6" />
        <circle cx={c} cy={c} r={r} fill="none" stroke="var(--signal)" strokeWidth="6"
          strokeDasharray={`${circ * frac} ${circ}`} transform={`rotate(-90 ${c} ${c})`} strokeLinecap="round" />
      </svg>
      <div className="uq-dial__center">
        <div className="uq-dial__lv e-label">уровень</div>
        <div className="uq-dial__num">{level}</div>
      </div>
    </div>
  );
};

window.UQLevelBar = function UQLevelBar({ xp }) {
  const { level, into, span } = window.UQLookup.levelFor(xp);
  const pct = Math.min(100, (into / span) * 100);
  return (
    <div className="uq-xp">
      <div className="uq-xp__head">
        <span className="e-label">Уровень {level}</span>
        <span className="uq-xp__num">{xp.toLocaleString("ru-RU")} XP</span>
        <span className="e-label" style={{ color: "var(--text-faint)" }}>из {window.UQLookup.totalXp.toLocaleString("ru-RU")}</span>
      </div>
      <div className="uq-xp__track"><i style={{ width: pct + "%" }} /></div>
      <div className="uq-xp__foot mono">до уровня {level + 1} — {(span - into).toLocaleString("ru-RU")} XP</div>
    </div>
  );
};

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

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

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