// View: Progress — constellation map + lifetime stats + timeline.
function ViewProgress() {
  const { lang } = window.useApp();
  const t = window.I18N[lang];
  const DATA = window.DATA;
  const Icon = window.Icon;

  const m = DATA.metrics;
  const unlocked = DATA.achievements.filter(a => a.unlocked);
  const locked = DATA.achievements.filter(a => !a.unlocked);

  return (
    <div className="content">
      {/* Constellation */}
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ padding: "22px 22px 0" }}>
          <div className="kicker">{t.achievements}</div>
          <h2 className="card-h" style={{ marginTop: 4 }}>
            {lang === "es" ? "Tu constelación" : "Your constellation"}
          </h2>
          <div className="meta italic" style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "var(--ink-3)" }}>
            {lang === "es" ? `${unlocked.length} estrellas iluminadas · ${locked.length} esperando` : `${unlocked.length} stars lit · ${locked.length} waiting`}
          </div>
        </div>
        <div className="constellation">
          <svg width="100%" height="100%" viewBox="0 0 100 56" preserveAspectRatio="none" style={{ position: "absolute", inset: 0 }}>
            {/* connecting lines (only between unlocked, in sequence) */}
            {DATA.stars.map((s, i) => {
              if (i === 0) return null;
              const prev = DATA.stars[i - 1];
              const ach = DATA.achievements.find(a => a.id === s.ach);
              const prevAch = DATA.achievements.find(a => a.id === prev.ach);
              if (!ach.unlocked || !prevAch.unlocked) return null;
              return (
                <line key={i} x1={prev.x} y1={prev.y * 0.56} x2={s.x} y2={s.y * 0.56}
                  stroke="oklch(58% 0.05 80 / 0.5)" strokeWidth="0.15"/>
              );
            })}
            {/* scattered tiny background stars */}
            {Array.from({ length: 60 }).map((_, i) => {
              const x = (i * 79) % 100;
              const y = (i * 43) % 56;
              const r = ((i * 17) % 10) / 30 + 0.05;
              return <circle key={"bg"+i} cx={x} cy={y} r={r} fill="oklch(70% 0.02 60 / 0.4)"/>;
            })}
          </svg>
          {DATA.stars.map((s, i) => {
            const ach = DATA.achievements.find(a => a.id === s.ach);
            const unlocked = ach.unlocked;
            return (
              <div key={i} className={"star-node " + (unlocked ? "" : "locked")} style={{ left: `${s.x}%`, top: `${s.y}%` }}>
                <div className="badge md">
                  <img src={`assets/badges/${ach.id}.png`} alt={lang === "es" ? ach.title_es : ach.title_en}/>
                </div>
                <div className="label">{lang === "es" ? ach.title_es : ach.title_en}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Lifetime stats */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <div className="kpi">
          <div className="label">{t.days_using}</div>
          <div className="value">{m.daysUsing}</div>
          <div className="meta">{lang === "es" ? "desde sep 2024" : "since Sep 2024"}</div>
        </div>
        <div className="kpi">
          <div className="label">{t.habits_done}</div>
          <div className="value">{m.habitsDone.toLocaleString()}</div>
          <div className="meta">~6.9 / {lang === "es" ? "día" : "day"}</div>
        </div>
        <div className="kpi">
          <div className="label">{t.saved}</div>
          <div className="value">{window.fmtMoney(m.saved).replace(".00","")}</div>
          <div className="meta">+{window.fmtMoney(m.saved/12).replace(".00","")} / mo avg</div>
        </div>
        <div className="kpi">
          <div className="label">{t.volume_lifted}</div>
          <div className="value">{(m.volumeLifted/1000).toFixed(0)}<small> t</small></div>
          <div className="meta">{lang === "es" ? "toneladas movidas" : "tonnes moved"}</div>
        </div>
      </div>

      {/* Timeline */}
      <div className="card">
        <h2 className="card-h" style={{ marginBottom: 2 }}>{t.timeline}</h2>
        <div className="meta italic" style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "var(--ink-3)", marginBottom: 22 }}>
          {lang === "es" ? "hitos que dejaste atrás" : "milestones you've left behind"}
        </div>
        <div style={{ position: "relative", paddingLeft: 22 }}>
          {/* vertical line */}
          <div style={{ position: "absolute", left: 6, top: 6, bottom: 6, width: 1, background: "repeating-linear-gradient(to bottom, var(--line) 0 3px, transparent 3px 7px)" }}/>
          {DATA.timeline.map((m, i) => (
            <div key={i} style={{ position: "relative", padding: "10px 0", display: "grid", gridTemplateColumns: "100px 1fr", gap: 18 }}>
              <div style={{ position: "absolute", left: -22 + 6, top: 16, width: 11, height: 11, borderRadius: "50%", background: i === DATA.timeline.length - 1 ? "var(--terracotta)" : "var(--paper-2)", border: `2px solid ${i === DATA.timeline.length - 1 ? "var(--terracotta)" : "var(--ink-3)"}`, transform: "translateX(-50%)" }}/>
              <div className="meta">{window.fmtDateShort(m.date, lang).toUpperCase()} {new Date(m.date).getFullYear()}</div>
              <div className="serif" style={{ fontSize: 19, lineHeight: 1.2 }}>{lang === "es" ? m.t_es : m.t_en}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Earned badges — 96px grid */}
      <div className="card-flat">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
          <div>
            <h2 className="card-h" style={{ marginBottom: 2 }}>{lang === "es" ? "Desbloqueados" : "Earned"}</h2>
            <div className="meta italic" style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--ink-3)" }}>
              {unlocked.length} {lang === "es" ? "medallas en tu colección" : "medallions in your collection"}
            </div>
          </div>
          <button className="btn" onClick={() => window.celebrate && window.celebrate()}>
            <Icon name="star" size={14}/> {lang === "es" ? "Celebrar" : "Replay celebration"}
          </button>
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))" }}>
          {unlocked.map(a => (
            <div key={a.id} className="badge-card">
              <div className="badge lg">
                <img src={`assets/badges/${a.id}.png`} alt={lang === "es" ? a.title_es : a.title_en}/>
              </div>
              <div className="title">{lang === "es" ? a.title_es : a.title_en}</div>
              <div className="date">
                {window.fmtDateShort("2025-08-09", lang).toUpperCase()} · 2025
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Locked achievements list */}
      {locked.length > 0 && (
        <div className="card-flat">
          <h2 className="card-h" style={{ marginBottom: 4 }}>{t.locked}</h2>
          <div className="meta italic" style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--ink-3)", marginBottom: 18 }}>
            {lang === "es" ? "estrellas que aún no se encienden" : "stars not yet lit"}
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }}>
            {locked.map(a => (
              <div key={a.id} className="badge-card locked">
                <div className="badge lg locked">
                  <img src={`assets/badges/${a.id}.png`} alt={lang === "es" ? a.title_es : a.title_en}/>
                </div>
                <div className="title">{lang === "es" ? a.title_es : a.title_en}</div>
                <div className="caption" style={{ maxWidth: 200 }}>{lang === "es" ? a.desc_es : a.desc_en}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
window.ViewProgress = ViewProgress;