// Timeline screen — Gantt with project switcher + Exec/Admin view toggle.
(function () {
  window.SCREENS = window.SCREENS || {};
  const { useState } = React;
  const IC = window.IC, D = window.DATA;
  const detailFor = (p) => D.detail[p.id] || D.genericPhases(p);
  window.detailFor = detailFor;

  window.SCREENS.timeline = function Timeline({ route }) {
    const initial = route.id && D.projects.find((p) => p.id === route.id) ? route.id : (D.projects[0] ? D.projects[0].id : null);
    const [pid, setPid] = useState(initial);
    const [mode, setMode] = useState("admin");
    const proj = D.projects.find((p) => p.id === pid) || D.projects[0];
    const det = detailFor(proj);

    return (
      <div className="page wide">
        <header>
          <div className="eyebrow">Schedule</div>
          <h1 className="page-title">Timeline</h1>
          <p className="page-sub">มุมมอง Gantt แบบ Hybrid Parallel Workflow — งานคู่ขนาน, Dependency แบบ Hard / Soft และเส้นกำหนดวันนี้</p>
        </header>

        <div className="toolbar">
          <div className="seg" role="tablist">
            {D.projects.filter((p) => D.detail[p.id]).map((p) => (
              <button key={p.id} className={pid === p.id ? "on" : ""} onClick={() => setPid(p.id)}>{p.code}</button>
            ))}
          </div>
          <select className="chip" value={pid} onChange={(e) => setPid(e.target.value)} style={{ appearance: "auto", minWidth: 180 }}>
            {D.projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
          <div className="spacer" />
          <div className="seg">
            <button className={mode === "exec" ? "on" : ""} onClick={() => setMode("exec")}>{IC.target} Executive</button>
            <button className={mode === "admin" ? "on" : ""} onClick={() => setMode("admin")}>{IC.layers} Admin</button>
          </div>
        </div>

        <div className="gantt-wrap">
          <div className="gantt-tools">
            <span style={{ fontSize: 13.5, fontWeight: 600 }}>{proj.name}</span>
            <span className="pill neutral" style={{ marginLeft: 4 }}><i />{proj.phaseTh}</span>
            <div className="legend">
              <span className="lg"><span className="barx" style={{ background: "var(--accent)" }} />กำลังทำ</span>
              <span className="lg"><span className="barx" style={{ background: "var(--ok)" }} />เสร็จ</span>
              <span className="lg"><span className="barx" style={{ background: "#B9B0A0" }} />ยังไม่เริ่ม</span>
              <span className="lg"><span className="dia" />เหตุการณ์สำคัญ</span>
              {mode === "admin" && <span className="lg"><span className="ln hard" />Hard dep</span>}
              {mode === "admin" && <span className="lg"><span className="ln soft" />Soft dep</span>}
            </div>
          </div>
          {(() => { const g = window.ganttScale(proj, det); return <window.Gantt phases={g.phases} mode={mode} startISO={g.startISO} todayDay={g.todayDay} totalDays={g.totalDays} />; })()}
        </div>

        <p className="page-sub" style={{ marginTop: 14 }}>
          {mode === "exec"
            ? "มุมมองผู้บริหาร — สรุปแต่ละขั้นตอนและเหตุการณ์สำคัญ เพื่อดูภาพรวมอย่างรวดเร็ว"
            : "มุมมองผู้ดูแล — แสดงรายการทั้งหมด งานที่ทำคู่ขนานจะอยู่คนละแถวในขั้นตอนเดียวกัน"}
        </p>
      </div>
    );
  };
})();