/* ============================================================
   wordsquest/wordsquest-ui.jsx — виджеты подсистемы «Английские слова».
   Exposes: WQBar, WQStreakBadge, WQCategoryCard, WQFlashcard, WQSpeak.
   Зависит только от React и window.Icon (общий набор иконок планера).
   ============================================================ */
const React = window.React;
const { useState } = React;
const Icon = window.Icon;

/* ---- произношение через встроенный Web Speech API ---------------------- */
function wqSpeak(text) {
  try {
    if (!window.speechSynthesis) return;
    const u = new SpeechSynthesisUtterance(text);
    u.lang = "en-US";
    u.rate = 0.92;
    window.speechSynthesis.cancel();
    window.speechSynthesis.speak(u);
  } catch (e) {}
}
window.WQSpeak = wqSpeak;

window.WQSpeakBtn = function WQSpeakBtn({ text, size = 16 }) {
  return (
    <button type="button" className="wq-speak" title="Прослушать произношение" onClick={(e) => { e.stopPropagation(); wqSpeak(text); }}>
      🔊
    </button>
  );
};

window.WQBar = function WQBar({ value, total, tone }) {
  const pct = total > 0 ? Math.min(100, (value / total) * 100) : 0;
  return <div className={"wq-bar" + (tone ? " wq-bar--" + tone : "")}><i style={{ width: pct + "%" }} /></div>;
};

window.WQStreakBadge = function WQStreakBadge({ streak, compact }) {
  const active = streak.last === window.WQLookup.dayKey();
  return (
    <div className={"wq-streak" + (compact ? " wq-streak--compact" : "")}>
      <Icon name="flame" size={compact ? 16 : 22} fill={active} style={{ color: active ? "var(--signal)" : "var(--ink-100)" }} />
      <span className="wq-streak__num">{streak.count}</span>
      {!compact && <span className="e-label" style={{ color: active ? "var(--signal)" : "var(--text-muted)" }}>{active ? "дней подряд" : "дней · пора продолжать"}</span>}
    </div>
  );
};

window.WQCategoryCard = function WQCategoryCard({ cat, stats, onClick, onOpenList }) {
  return (
    <div className="wq-cat" role="button" tabIndex={0} onClick={onClick}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } }}>
      <div className="wq-cat__top">
        <Icon name={cat.icon} size={20} />
        <span className="wq-cat__title">{cat.title}</span>
      </div>
      <window.WQBar value={stats.learned} total={stats.total} />
      <div className="wq-cat__meta">
        <span className="mono">{stats.learned}/{stats.total} выучено</span>
        {stats.due > 0 && <span className="wq-cat__due">{stats.due} к повторению</span>}
        {stats.fresh > 0 && <span className="wq-cat__fresh">{stats.fresh} новых</span>}
      </div>
      <div className="wq-cat__foot">
        {/* именно кнопка, а не подпись: мелкая ссылка тут читалась как пояснение
            и вход в словарь просто не находили */}
        <span className="wq-btn wq-btn--sm wq-cat__browse" role="button"
          onClick={(e) => { e.stopPropagation(); onOpenList(); }}>Смотреть карточки</span>
        <span className="e-label" style={{ color: "var(--text-faint)" }}>нажмите на карточку, чтобы заниматься</span>
      </div>
    </div>
  );
};

/* ---- файл → уменьшенный dataURL --------------------------------------
   Картинки лежат в localStorage вместе с прогрессом, поэтому жмём сильно:
   360px по длинной стороне и JPEG 0.72 дают ~10–20 КБ на слово. */
window.WQFileToDataURL = function (file, max = 360) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onload = () => {
      const img = new Image();
      img.onerror = reject;
      img.onload = () => {
        let { width, height } = img;
        const scale = Math.min(1, max / Math.max(width, height));
        width = Math.round(width * scale); height = Math.round(height * scale);
        const canvas = document.createElement("canvas");
        canvas.width = width; canvas.height = height;
        canvas.getContext("2d").drawImage(img, 0, 0, width, height);
        try { resolve(canvas.toDataURL("image/jpeg", 0.72)); }
        catch (e) { resolve(reader.result); }
      };
      img.src = reader.result;
    };
    reader.readAsDataURL(file);
  });
};

/* картинка-ассоциация слова (показывается только на стороне ответа —
   на стороне вопроса она подсказывала бы значение) */
window.WQWordImage = function WQWordImage({ wordId, size = "md" }) {
  const s = window.useWQ();
  const src = (s.images || {})[wordId];
  if (!src) return null;
  return <img className={"wq-wordimg" + (size === "sm" ? " wq-wordimg--sm" : "")} src={src} alt="" />;
};

/* ---- карточка-флешкарта: всегда задание — сначала вопрос, потом
   переворот и самооценка. Ответ заранее не показывается никогда. --- */
window.WQFlashcard = function WQFlashcard({ word, dir, onRate }) {
  const [flipped, setFlipped] = useState(false);
  const front = dir === "ru" ? word.ru : word.en;
  const back = dir === "ru" ? word.en : word.ru;

  return (
    <div className={"wq-card" + (flipped ? " wq-card--flipped" : "")} onClick={() => !flipped && setFlipped(true)}>
      <div className="wq-card__kicker">{dir === "ru" ? "Переведи на английский" : "Переведи на русский"}</div>
      <div className="wq-card__front">
        {front}
        {dir !== "ru" && <window.WQSpeakBtn text={word.en} />}
      </div>
      {!flipped ? (
        <div className="wq-card__hint e-label">нажмите, чтобы увидеть перевод</div>
      ) : (
        <React.Fragment>
          <div className="wq-card__back">
            {back}
            {dir === "ru" && <window.WQSpeakBtn text={word.en} />}
          </div>
          {word.ts && <div className="wq-card__ts mono">/{word.ts}/</div>}
          <window.WQWordImage wordId={word.id} />
          {word.ex && <div className="wq-card__ex">«{word.ex}»</div>}
          <div className="wq-card__rate">
            <span className="e-label wq-card__rate-label">Как вспомнилось?</span>
            <div className="wq-card__rate-row">
              <button className="wq-rate wq-rate--0" onClick={(e) => { e.stopPropagation(); onRate(0); }}>Забыл</button>
              <button className="wq-rate wq-rate--3" onClick={(e) => { e.stopPropagation(); onRate(3); }}>Трудно</button>
              <button className="wq-rate wq-rate--4" onClick={(e) => { e.stopPropagation(); onRate(4); }}>Хорошо</button>
              <button className="wq-rate wq-rate--5" onClick={(e) => { e.stopPropagation(); onRate(5); }}>Легко</button>
            </div>
          </div>
        </React.Fragment>
      )}
    </div>
  );
};