// Dashboard screen — answers the 9 executive questions at a glance.
(function () {
  window.SCREENS = window.SCREENS || {};
  const { useState } = React;
  const IC = window.IC,D = window.DATA;
  const sm = D.statusMeta,rm = D.riskMeta;
  const toneVar = { ok: "var(--ok)", warn: "var(--warn)", danger: "var(--danger)", info: "var(--info)", neutral: "var(--neutral)" };

  function ProjectRow({ p }) {
    return (
      <a className="proj-row" href={"#/project/" + p.id}>
        <div className="pr-head">
          <div className="pr-top">
            <div>
              <div className="pr-name">{p.name}</div>
              <div className="pr-code mono">{p.code} · {p.phaseTh}</div>
            </div>
            <span className={"pill " + sm[p.status].tone}><i />{sm[p.status].th}</span>
          </div>
        </div>
        <div className="pr-prog">
          <div className="pt"><span>ความคืบหน้า</span><b className="tnum">{p.progress}%</b></div>
          <div className="prog-bar"><i style={{ width: p.progress + "%" }} /></div>
        </div>
        {/* mobile footer */}
        <div className="pr-foot">
          <div className="it"><span className="avatar sm">{p.ownerInit}</span><span>{p.owner.split(" ")[0]}</span></div>
          <div className="risk"><i style={{ background: toneVar[rm[p.risk].tone] }} /><span>{p.riskNote}</span></div>
          <div className="it"><span className="lb">กำหนด</span><b className="mono">{p.dueShort}</b></div>
        </div>
        {/* desktop cells */}
        <div className="pr-cell-d"><div className="risk"><i style={{ background: toneVar[rm[p.risk].tone] }} /><span className="risk-txt" title={p.riskNote}>{p.riskNote}</span></div></div>
        <div className="pr-cell-d"><span className="avatar sm">{p.ownerInit}</span><span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.owner.split(" ")[0]}</span></div>
        <div className="pr-cell-d due"><b className="mono">{p.dueShort}</b></div>
      </a>);

  }
  window.ProjectRow = ProjectRow;

  function AttnCard({ kind, tone, title, meta, action }) {
    return (
      <div className={"attn-card " + tone}>
        <div className="ac-top"><span className="ac-kind">{kind}</span><span className={"pill " + tone}><i />{tone === "danger" ? "ด่วน" : "ติดตาม"}</span></div>
        <div className="ac-title">{title}</div>
        <div className="ac-meta">{meta}</div>
        <div className="ac-act">{action}</div>
      </div>);

  }

  window.SCREENS.dashboard = function Dashboard({ role }) {
    window.useLiveData();
    role = role || window.__role || "executive";
    const isAdmin = role === "admin";
    D.recompute();

    const atRisk = D.projects.filter((p) => p.status === "at_risk" || p.status === "blocked");
    const today = new Date();
    const fmtToday = today.toLocaleDateString("th-TH", { weekday: "long", day: "numeric", month: "long", year: "numeric" });

    return (
      <div className="page wide">
        <header className="dash-head" style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow">{isAdmin ? "Admin · จัดการได้ทั้งหมด" : "Executive Overview · มุมมองผู้บริหาร"}</div>
            <h1 className="page-title">ภาพรวมโครงการ</h1>
            <p className="page-sub">{fmtToday} · ข้อมูลแบบเรียลไทม์</p>
          </div>
          {isAdmin && <button className="btn pri" onClick={() => window.navigate("projects")}>{IC.plus} เพิ่มโครงการ</button>}
        </header>

        {/* Attention — projects that are blocked or at risk */}
        <section className="block">
          <div className="sh"><span className="sec-title">ต้องให้ความสนใจ</span><span className="page-sub" style={{ marginTop: 0 }}>{atRisk.length} รายการ</span></div>
          <div className="attn-rail">
            {atRisk.map((p) =>
            <AttnCard key={p.id} tone={p.status === "blocked" ? "danger" : "warn"} kind={p.status === "blocked" ? "ติดปัญหา" : "เสี่ยงล่าช้า"}
            title={p.name} meta={<><b>{p.riskNote}</b> · {p.owner.split(" ")[0]}</>}
            action={<a className="btn sm pri" href={"#/project/" + p.id}>เปิดโครงการ</a>} />
            )}
            {atRisk.length === 0 && <div className="empty" style={{ padding: 14, fontSize: 13 }}>ไม่มีโครงการที่ติดปัญหาหรือเสี่ยงล่าช้า</div>}
          </div>
        </section>

        {/* KPIs — all computed dynamically from current project data */}
        <div className="kpi-strip">
          <div className="kpi"><div className="lab"><i style={{ background: "var(--info)" }} />โครงการทั้งหมด</div><div className="val tnum">{D.projects.length}</div><div className="sub">{D.kpis.activeProjects} กำลังดำเนินการ</div></div>
          <div className="kpi"><div className="lab"><i style={{ background: "var(--warn)" }} />อัปเดตล่าสุด</div><div className="val tnum">{(D.updates || []).length}</div><div className="sub">ความเคลื่อนไหวทั้งหมด</div></div>
          <div className="kpi"><div className="lab"><i style={{ background: "var(--danger)" }} />เสี่ยง / ติดปัญหา</div><div className="val tnum">{D.kpis.atRisk}</div><div className="sub">{D.kpis.atRisk > 0 ? "ต้องติดตามด่วน" : "ไม่มีความเสี่ยง"}</div></div>
          <div className="kpi"><div className="lab"><i style={{ background: "var(--ok)" }} />งบประมาณรวม</div><div className="val tnum" style={{ fontSize: 20 }}>{window.fmtBaht(D.kpis.totalBudget)}</div><div className="sub">{D.projects.length} โครงการ</div></div>
        </div>

        <div className="dash-cols">
          <div className="dash-main">
            <div className="sh"><span className="sec-title">โครงการที่กำลังดำเนินการ</span><a className="lnk" href="#/projects">ดูทั้งหมด →</a></div>
            <div className="proj-thead"><span>โครงการ / สถานะ</span><span>ความคืบหน้า</span><span>ความเสี่ยง</span><span>ผู้รับผิดชอบ</span><span>กำหนด</span></div>
            <div className="proj-list">
              {D.projects.map((p) => <ProjectRow key={p.id} p={p} />)}
            </div>
          </div>

          <aside className="dash-rail">
            <div className="rail-card">
              <div className="rc-h"><h3>ความเคลื่อนไหวล่าสุด</h3><a className="lnk" href="#/updates" style={{ fontSize: 12.5 }}>ทั้งหมด</a></div>
              {(D.updates || []).slice(0, 4).map((u) => {
                const m = D.updateTypes[u.type] || D.updateTypes.general;
                return (
                  <div className="dec-item" key={u.id}>
                    <span style={{ width: 9, height: 9, borderRadius: "50%", marginTop: 5, flexShrink: 0, background: "var(--" + m.tone + ")" }} />
                    <div><div className="dc">{u.title}</div><div className="dr">{m.th} · {u.project} · {u.date.replace(" 2026", "")}</div></div>
                  </div>
                );
              })}
              {(!D.updates || D.updates.length === 0) && <div className="empty" style={{ padding: 12, fontSize: 12.5 }}>ยังไม่มีความเคลื่อนไหว</div>}
            </div>

            <div className="rail-card">
              <div className="rc-h"><h3>Decision ล่าสุด</h3><a className="lnk" href="#/decisions" style={{ fontSize: 12.5 }}>ทั้งหมด</a></div>
              {D.decisionLog.slice(0, 3).map((d) =>
              <div className="dec-item" key={d.id}>
                  <div className="dt mono">{d.date.replace(" 2026", "")}</div>
                  <div><div className="dc">{d.change}</div><div className="dr">{d.project} · {d.by}</div></div>
                </div>
              )}
            </div>

            <div className="rail-card">
              <div className="rc-h"><h3>การประชุมที่จะถึง</h3><a className="lnk" href="#/meetings" style={{ fontSize: 12.5 }}>ทั้งหมด</a></div>
              {D.meetings.slice(0, 3).map((m) => {
                const [dd, mo] = m.date.split(" ");
                return (
                  <div className="mt-item" key={m.id}>
                    <div className="cal"><b className="tnum">{dd}</b><span>{mo}</span></div>
                    <div style={{ flex: 1 }}><div className="mn">{m.title}</div><div className="mm">{m.time} · {m.type} · {m.attendees} คน</div></div>
                  </div>);

              })}
            </div>
          </aside>
        </div>
      </div>);

  };
})();