/* ============================================================
   achievements.jsx — Достижения: repeatable goals with completions
   Exposes window.Screens.achievements
   ============================================================ */
const React = window.React;
const { useState, useRef } = React;
const Icon = window.Icon;
const A = window.PlannerActions;

/* read a File -> downscaled JPEG dataURL (keeps localStorage small) */
function fileToDataURL(file, max = 900) {
  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.82)); }
        catch (e) { resolve(reader.result); }
      };
      img.src = reader.result;
    };
    reader.readAsDataURL(file);
  });
}

/* ---- Add / edit form ----------------------------------------- */
function AchievementForm({ onClose }) {
  const Cmp = window;
  const [name, setName] = useState("");
  const [pts, setPts] = useState(50);
  const [img, setImg] = useState(null);
  const [busy, setBusy] = useState(false);
  const fileRef = useRef(null);

  const pick = async (file) => {
    if (!file) return;
    setBusy(true);
    try { setImg(await fileToDataURL(file)); }
    finally { setBusy(false); }
  };

  const submit = () => {
    if (!name.trim()) return;
    A.addAchievement({ name: name.trim(), pts: Number(pts) || 0, img });
    onClose();
  };

  return (
    <div className="task ach-form" style={{ display: "block", padding: "var(--s-5)" }}>
      <Cmp.SectionRule kicker="Новое">Добавить достижение</Cmp.SectionRule>
      <div className="ach-form__grid">
        {/* upload zone */}
        <div className="ach-drop"
          onClick={() => fileRef.current && fileRef.current.click()}
          onDragOver={(e) => { e.preventDefault(); e.currentTarget.classList.add("ach-drop--over"); }}
          onDragLeave={(e) => e.currentTarget.classList.remove("ach-drop--over")}
          onDrop={(e) => { e.preventDefault(); e.currentTarget.classList.remove("ach-drop--over"); pick(e.dataTransfer.files[0]); }}>
          {img ? (
            <img src={img} alt="" className="ach-drop__img" />
          ) : (
            <div className="ach-drop__empty">
              <Icon name="plus" size={26} />
              <span className="e-label">{busy ? "Загрузка…" : "Загрузить картинку"}</span>
              <span className="ach-drop__hint">перетащите файл или нажмите</span>
            </div>
          )}
          {img && <span className="ach-drop__change">Заменить</span>}
          <input ref={fileRef} type="file" accept="image/*" hidden
            onChange={(e) => pick(e.target.files[0])} />
        </div>

        {/* fields */}
        <div className="ach-form__fields">
          <label className="ach-field">
            <span className="e-label">Название</span>
            <input autoFocus value={name} onChange={(e) => setName(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && submit()}
              placeholder="Например: прочитать 1000 страниц"
              className="ach-input" />
          </label>
          <label className="ach-field">
            <span className="e-label">Сколько баллов за выполнение</span>
            <Cmp.Stepper value={Number(pts) || 0} step={5} min={0} suffix="PTS" onChange={(v) => setPts(v)} />
          </label>
          <div className="row-3" style={{ gap: "var(--s-3)", marginTop: "auto" }}>
            <Cmp.GButton variant="signal" icon="check" onClick={submit}>Сохранить</Cmp.GButton>
            <Cmp.GButton variant="ghost" onClick={onClose}>Отмена</Cmp.GButton>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Card ---------------------------------------------------- */
function AchievementCard({ a }) {
  const Cmp = window;
  const c = a.cover || window.CV.ink;
  const completions = a.completions || [];
  const count = completions.length;
  const last = count > 0 ? completions[completions.length - 1] : null;
  const lastDate = last ? (typeof last === "string" ? last : last.date) : null;

  return (
    <div className={"ach-card" + (count > 0 ? "" : " ach-card--pending")}>
      <div className="ach-card__media">
        {a.img ? (
          <img src={a.img} alt="" className="ach-card__img" />
        ) : (
          <div className="ach-card__placeholder" style={{ background: `linear-gradient(150deg, ${c.from}, ${c.to})`, color: c.fg }}>
            <Icon name="star" size={40} fill />
          </div>
        )}
        <button className="ach-card__remove" title="Удалить" onClick={() => A.removeAchievement(a.id)}>
          <Icon name="close" size={14} />
        </button>
        <span className="ach-card__pts">+{a.pts} PTS</span>
      </div>
      <div className="ach-card__body">
        <div className="ach-card__name">{a.name}</div>
        {count > 0 ? (
          <div className="ach-card__date mono">
            выполнено {count > 1 ? count + "× · " : ""}последнее {lastDate}
          </div>
        ) : (
          <div className="ach-card__date mono" style={{ color: "var(--text-faint)" }}>ещё не выполнено</div>
        )}
        <button
          className="ach-card__complete"
          onClick={() => A.completeAchievement(a.id)}
          title="Отметить выполнение">
          <Icon name="check" size={14} />
          <span>{count > 0 ? "Ещё раз" : "Выполнить"}</span>
        </button>
      </div>
    </div>
  );
}

/* ================= ACHIEVEMENTS ================= */
function AchievementsScreen({ state }) {
  const Cmp = window;
  const [adding, setAdding] = useState(false);
  const list = state.achievements || [];
  const totalCompletions = list.reduce((s, a) => s + (a.completions || []).length, 0);
  const totalPts = list.reduce((s, a) => s + (a.pts || 0) * (a.completions || []).length, 0);
  const todayPts = list.reduce((s, a) => s + (a.pts || 0) * (a.completions || []).filter((c) => c.d === state.todayIdx).length, 0);

  return (
    <div className="page page--wide screen-enter">
      <div className="page-head">
        <div className="page-head__titles">
          <div className="kicker-row"><span className="eyebrow-mono">Обзор</span><span className="date-stamp">{list.length} {plural(list.length)}</span></div>
          <h1 className="page-title">Достижения</h1>
        </div>
        <div className="page-actions">
          <Cmp.GButton icon="plus" variant="ink" onClick={() => setAdding((v) => !v)}>Добавить</Cmp.GButton>
        </div>
      </div>

      {/* summary strip */}
      <div className="task" style={{ display: "flex", alignItems: "center", gap: "var(--s-6)", padding: "var(--s-5)", marginBottom: "var(--s-6)", flexWrap: "wrap" }}>
        <span className="ach-trophy"><Icon name="star" size={26} fill /></span>
        <div><div className="e-label">Создано достижений</div>
          <div className="ring-total" style={{ fontSize: 36 }}>{list.length}</div></div>
        <div className="section-rule__line" />
        <div><div className="e-label">Выполнений</div>
          <div className="ring-total" style={{ fontSize: 36 }}>{totalCompletions}</div></div>
        <div className="section-rule__line" />
        <div><div className="e-label">Сумма баллов</div>
          <div className="ring-total" style={{ fontSize: 36 }}>{totalPts}<span style={{ fontSize: "0.5em", color: "var(--text-muted)", fontWeight: 400 }}> PTS</span></div></div>
        {todayPts > 0 && <>
          <div className="section-rule__line" />
          <div><div className="e-label">Сегодня</div>
            <div className="ring-total pts-pos" style={{ fontSize: 36 }}>+{todayPts}<span style={{ fontSize: "0.5em", fontWeight: 400 }}> PTS</span></div></div>
        </>}
      </div>

      {adding && <div style={{ marginBottom: "var(--s-6)" }}><AchievementForm onClose={() => setAdding(false)} /></div>}

      {list.length > 0 ? (
        <div className="ach-grid">
          {list.map((a) => <AchievementCard key={a.id} a={a} />)}
        </div>
      ) : (
        <div className="ach-blank">
          <Icon name="star" size={34} />
          <div className="ach-blank__title">Пока нет достижений</div>
          <div className="muted" style={{ fontSize: "var(--t-small)" }}>Создайте достижение и отмечайте выполнения по мере продвижения.</div>
          <Cmp.GButton icon="plus" variant="ink" onClick={() => setAdding(true)} style={{ marginTop: "var(--s-4)" }}>Добавить первое</Cmp.GButton>
        </div>
      )}
    </div>
  );
}

function plural(n) {
  const m10 = n % 10, m100 = n % 100;
  if (m10 === 1 && m100 !== 11) return "достижение";
  if (m10 >= 2 && m10 <= 4 && (m100 < 10 || m100 >= 20)) return "достижения";
  return "достижений";
}

window.Screens = Object.assign(window.Screens || {}, { achievements: AchievementsScreen });