/* ===========================================================
   Reiktable — Dashboard
   Exposes (window): DashboardView
   =========================================================== */
(function () {
  window.DashboardView = function ({ go }) {
    const [s] = window.useStore();
    const c = s.campaign || {};
    const quests = (s.quests || []).filter(q => q.status === "active");
    const journal = [...(s.journal || [])].sort((a, b) => b.session - a.session).slice(0, 2);
    const rolls = (s.rolls || []).slice(0, 6);
    const timeline = (s.timeline || []).slice(0, 4);

    const actions = [
      { icon: "users", label: "Characters", view: "characters", clr: "var(--acc)" },
      { icon: "dice", label: "Roll Dice", view: "dice", clr: "var(--cyan)" },
      { icon: "search", label: "Search Rules", view: "rules", clr: "var(--amb)" },
      { icon: "swords", label: "Combat", view: "combat", clr: "var(--red)" },
      { icon: "journal", label: "Journal", view: "journal", clr: "var(--grn)" },
      { icon: "sparkles", label: "Loremaster", view: "ai", clr: "var(--viol)" },
    ];

    return (
      <div className="content fade-in">
        {/* hero */}
        <div className="card" style={{ marginBottom: 16, overflow: "hidden", position: "relative" }}>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(600px 200px at 85% -20%, rgba(79,140,255,.16), transparent 70%)" }}></div>
          <div className="card-b" style={{ position: "relative", padding: 22 }}>
            <div className="between" style={{ alignItems: "flex-start" }}>
              <div>
                <div className="eyebrow">{c.system}</div>
                <h1 style={{ fontSize: 30, marginTop: 6 }}>{c.name}</h1>
                <p className="tx2" style={{ maxWidth: 540, marginTop: 6 }}>{c.blurb}</p>
              </div>
              <div className="center g16">
                <div style={{ textAlign: "right" }}><div className="eyebrow">Session</div><div className="mono" style={{ fontSize: 30, color: "var(--amb)" }}>{c.session}</div></div>
                <div style={{ textAlign: "right" }}><div className="eyebrow">Party Purse</div><div className="mono" style={{ fontSize: 18, color: "var(--cyan)", marginTop: 8 }}>{window.coin(c.partyGold)}</div></div>
              </div>
            </div>
            <div className="grid" style={{ gridTemplateColumns: "repeat(6,1fr)", gap: 8, marginTop: 18 }}>
              {actions.map(a => (
                <button key={a.label} className="card hover" style={{ padding: "14px 10px", textAlign: "center", cursor: "pointer", border: "1px solid var(--line)" }} onClick={() => go(a.view)}>
                  <Icon name={a.icon} size={20} style={{ color: a.clr }} />
                  <div style={{ fontSize: 12.5, marginTop: 7, color: "var(--tx-2)" }}>{a.label}</div>
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* party */}
        <div className="between mb10"><h3 style={{ fontSize: 15 }}>The Party</h3><button className="btn ghost sm" onClick={() => go("characters")}>View all <Icon name="chevR" size={13} /></button></div>
        <div className="grid g4" style={{ marginBottom: 18 }}>
          {s.characters.map(ch => {
            const w = ch.wounds || { cur: 0, max: 1 };
            const pct = Math.round((w.cur / Math.max(1, w.max)) * 100);
            return (
              <div key={ch.id} className="card hover" onClick={() => go("characters", ch.id)}>
                <div className="card-b">
                  <div className="center g10">
                    <Avatar name={ch.name} color={ch.color} img={ch.img} size="md" />
                    <div className="grow" style={{ minWidth: 0 }}>
                      <div style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{ch.name}</div>
                      <div className="tx3" style={{ fontSize: 12 }}>{ch.career} · T{ch.careerTier}</div>
                    </div>
                  </div>
                  <div className="between mt10"><span className="eyebrow">Wounds</span><span className="mono" style={{ fontSize: 13, color: pct <= 33 ? "var(--red)" : "var(--tx-2)" }}>{w.cur}/{w.max}</span></div>
                  <div className="bar hp" style={{ marginTop: 5 }}><i style={{ width: pct + "%" }}></i></div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="cols s">
          <div className="col g16">
            <div className="card">
              <div className="card-h"><Icon name="flag" /><h3>Active Quests</h3><div className="sp"></div><button className="btn ghost sm" onClick={() => go("quests")}>All quests</button></div>
              <div className="card-b tight">
                {quests.length === 0 && <div className="tx3" style={{ padding: 12 }}>No active quests.</div>}
                {quests.map(q => (
                  <div key={q.id} className="row b">
                    <Icon name="flag" size={15} style={{ color: q.priority === "high" ? "var(--red)" : "var(--amb)" }} />
                    <div className="grow"><div style={{ fontWeight: 500 }}>{q.title}</div><div className="tx3" style={{ fontSize: 12.5 }}>{q.desc}</div></div>
                    <span className={cls("tag", q.priority === "high" ? "red" : "amb")}>{q.priority}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="card">
              <div className="card-h"><Icon name="journal" /><h3>Latest Chronicle</h3><div className="sp"></div><button className="btn ghost sm" onClick={() => go("journal")}>Journal</button></div>
              <div className="card-b">
                {journal.map(j => (
                  <div key={j.id} style={{ marginBottom: 12 }}>
                    <div className="center g8"><span className="tag acc">S{j.session}</span><b>{j.title}</b></div>
                    <p className="tx2" style={{ fontSize: 13.5, marginTop: 6, lineHeight: 1.6, display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{j.body}</p>
                  </div>
                ))}
                {journal.length === 0 && <div className="tx3">No entries yet.</div>}
              </div>
            </div>
          </div>
          <div className="col g16">
            <div className="card">
              <div className="card-h"><Icon name="dice" /><h3>Recent Rolls</h3><div className="sp"></div><button className="btn ghost sm" onClick={() => go("dice")}>Roll</button></div>
              <div className="card-b tight">
                {rolls.length === 0 && <div className="tx3" style={{ padding: 12 }}>No rolls yet.</div>}
                {rolls.map(r => (
                  <div key={r.id} className="log-row"><span className="dot" style={{ background: r.success ? "var(--grn)" : "var(--red)" }}></span><span className="who">{r.who}</span><span className="tx3" style={{ fontSize: 12 }}>{r.label}</span><span className="res" style={{ color: r.success ? "var(--grn)" : "var(--red)" }}>{r.roll === 100 ? "00" : String(r.roll).padStart(2, "0")}</span></div>
                ))}
              </div>
            </div>
            <div className="card">
              <div className="card-h"><Icon name="map" /><h3>Timeline</h3></div>
              <div className="card-b">
                <div className="tl">
                  {timeline.map(t => (
                    <div key={t.id} className={cls("tl-item", t.done && "done")}>
                      <div className="tl-date">{t.date}</div>
                      <div style={{ fontWeight: 600, marginTop: 1, fontSize: 14 }}>{t.title}</div>
                      {t.note && <div className="tx3" style={{ fontSize: 12.5 }}>{t.note}</div>}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };
})();