// Executive Home — Sprint C · clear project selector.
// Open the app → see every active project at a glance, pick one to dive in.
//   • Executive Snapshot (4 numbers that need attention now)
//   • Recommended Actions (cross-project "what to do next")
//   • Project Selector — each card: Progress · Latest Update · Next Step ·
//     End Date · Owner. Sorted by end date (closest first); starred pinned.
(function () {
  window.SCREENS = window.SCREENS || {};
  const { useState } = React;
  const IC = window.IC, D = window.DATA;
  const sm = D.statusMeta;

  function todayISO() { return window.todayISO ? window.todayISO() : new Date().toISOString().slice(0,10); }
  function detailFor(p) { return window.detailOf ? window.detailOf(p) : ((D.detail && D.detail[p.id]) || { phases: [], updates: [], nextSteps: [] }); }
  const sortByDateDesc = window.sortByDateDesc || ((a) => a.slice());

  function latestUpdateOf(p) {
    const ups = (D.updates || []).filter((u) => u.projectId === p.id || u.project === p.name);
    return sortByDateDesc(ups)[0] || null;
  }
  function nextStepOf(p) {
    const det = detailFor(p);
    const steps = (det.nextSteps || []).filter((s) => s.status === "pending" || s.status === "in_progress");
    return steps[0] || null;   // already sorted by byNextStep at the data layer
  }
  function dueTone(p) {
    if (!p.end) return "neutral";
    const t = todayISO();
    if (p.end < t) return "danger";
    const days = (new Date(p.end + "T00:00:00") - new Date(t + "T00:00:00")) / 86400000;
    return days <= 14 ? "warn" : "ok";
  }

  // ── Cross-project snapshot (uses canonical projectSignals) ──
  function aggregateAttention() {
    const active = (D.projects || []).filter((p) => p.status !== "completed");
    let overdueProjects = 0, pendingDecisionsTotal = 0, atRiskCount = 0, urgentStepsTotal = 0;
    active.forEach((p) => {
      const sig = window.projectSignals(p, detailFor(p));
      if (sig.overdueProject) overdueProjects++;
      if (sig.atRisk) atRiskCount++;
      pendingDecisionsTotal += sig.pendingDecisions;
      urgentStepsTotal += sig.urgentStepCount;
    });
    return { active, overdueProjects, pendingDecisionsTotal, atRiskCount, urgentStepsTotal };
  }

  // ── Executive Snapshot — 4 numbers to know instantly ──
  function ExecutiveSnapshot({ agg }) {
    const tiles = [
      { value: agg.pendingDecisionsTotal, label: "รอการตัดสินใจ", tone: agg.pendingDecisionsTotal > 0 ? "warn" : "ok" },
      { value: agg.atRiskCount,           label: "โครงการเสี่ยง",  tone: agg.atRiskCount > 0 ? "danger" : "ok" },
      { value: agg.overdueProjects,        label: "เลยกำหนด",      tone: agg.overdueProjects > 0 ? "danger" : "ok" },
      { value: agg.urgentStepsTotal,       label: "งานด่วน",        tone: agg.urgentStepsTotal > 0 ? "warn" : "ok" },
    ];
    return (
      <div className="rail-card" style={{ padding: 20, marginBottom: 16 }}>
        <div className="eyebrow">Executive Snapshot</div>
        <h1 className="page-title" style={{ marginTop: 4 }}>ภาพรวมผู้บริหาร</h1>
        <p className="page-sub" style={{ marginTop: 4 }}>4 ตัวเลขที่ต้องรู้ทันที</p>
        <div className="exec-snapshot" style={{ marginTop: 16 }}>
          {tiles.map((t, i) => (
            <div key={i} className={"exec-stat alert-" + t.tone}>
              <div className="v">{t.value}</div>
              <div className="l">{t.label}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // ── Recommended Actions — cross-project "what to do next" ──
  function RecommendedActions({ projects }) {
    const all = [];
    projects.forEach((p) => {
      const recs = window.recommendActions ? window.recommendActions(p, detailFor(p)) : [];
      recs.forEach((r) => all.push({ ...r, projectName: p.name, projectId: p.id }));
    });
    all.sort((a, b) => (a.severity === "danger" ? -1 : 1) - (b.severity === "danger" ? -1 : 1));
    const top = all.slice(0, 5);
    if (top.length === 0) {
      return (
        <div className="rail-card" style={{ padding: 16, marginBottom: 16 }}>
          <div className="exec-section-head"><span>🎯 สิ่งที่ควรทำต่อไป</span></div>
          <div className="rec-action tone-ok" style={{ background: "var(--exec-ok-tint, var(--raised))", borderLeftColor: "var(--ok)", justifyContent: "center" }}>
            <span className="ic">✓</span>
            <div className="body"><div className="act">ทุกโครงการดำเนินไปตามแผน</div><div className="why">ไม่มีรายการที่ต้องดำเนินการเร่งด่วน</div></div>
          </div>
        </div>
      );
    }
    return (
      <div className="rail-card" style={{ padding: 16, marginBottom: 16 }}>
        <div className="exec-section-head">
          <span>🎯 สิ่งที่ควรทำต่อไป</span>
          {all.length > 0 && <span style={{ fontSize: 12, color: "var(--muted)", textTransform: "none", letterSpacing: 0 }}>{all.length} รายการ</span>}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {top.map((r, i) => (
            <a key={i} href={"#/brief/" + r.projectId} style={{ textDecoration: "none", color: "inherit" }}>
              <div className={"rec-action tone-" + r.severity}>
                <span className="ic">{r.icon}</span>
                <div className="body"><div className="act">{r.action}</div><div className="why">{r.projectName} · {r.reason}</div></div>
              </div>
            </a>
          ))}
          {all.length > top.length && <div style={{ fontSize: 12, color: "var(--muted)", textAlign: "center", marginTop: 4 }}>และอีก {all.length - top.length} รายการ</div>}
        </div>
      </div>
    );
  }

  // ── Star toggle (admin-gated; executive sees ★ when pinned) ──
  function StarButton({ p }) {
    const [busy, setBusy] = useState(false);
    const canEdit = window.can ? window.can("editProject") : false;
    const onClick = async (e) => {
      e.preventDefault(); e.stopPropagation();
      if (busy) return;
      setBusy(true);
      try { await window.DB.toggleProjectStar(p.id); } finally { setBusy(false); }
    };
    // Executive (read-only) can still pin — pinning is a personal view aid, not data edit.
    return (
      <button type="button" className="icon-btn" onClick={onClick} disabled={busy}
        title={p.starred ? "เลิกปักหมุด" : "ปักหมุดขึ้นบนสุด"}
        style={{ width: 40, height: 40, color: p.starred ? "var(--warn)" : "var(--faint)", padding: 0, flex: "none" }}>
        <span style={{ fontSize: 20, lineHeight: 1 }}>{p.starred ? "★" : "☆"}</span>
      </button>
    );
  }

  // ── Project selector card ──
  function ProjectCard({ p }) {
    const upd = latestUpdateOf(p);
    const ns  = nextStepOf(p);
    const dTone = dueTone(p);
    const health = window.computeHealthScore ? window.computeHealthScore(p, detailFor(p)) : null;
    const open = () => window.navigate("brief/" + p.id);
    return (
      <div className="rail-card exec-card-clickable"
        style={{ padding: 16, cursor: "pointer", display: "flex", flexDirection: "column", gap: 12, borderLeft: p.starred ? "4px solid var(--warn)" : "4px solid transparent" }}
        onClick={open} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter") open(); }}>
        {/* head */}
        <div style={{ display: "flex", alignItems: "flex-start", gap: 8, minWidth: 0 }}>
          <div onClick={(e) => e.stopPropagation()}><StarButton p={p} /></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="eyebrow truncate" style={{ marginBottom: 2 }}>{p.code} · {(sm[p.status] || {}).th || p.status}</div>
            <div className="proj-card-title" style={{ fontSize: 16, fontWeight: 600, lineHeight: 1.3 }}>{p.name}</div>
          </div>
          {health && <span className={"health-badge tone-" + health.tone} title="Health Score"><span className="num">{health.score}</span></span>}
        </div>

        {/* progress */}
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--muted)", marginBottom: 4 }}>
            <span>ความคืบหน้า</span><b className="tnum" style={{ color: "var(--ink)" }}>{p.progress || 0}%</b>
          </div>
          <div className="prog-bar"><i style={{ width: (p.progress || 0) + "%" }} /></div>
        </div>

        {/* 5 fields */}
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", columnGap: 10, rowGap: 7, fontSize: 13 }}>
          <span style={{ color: "var(--muted)" }}>{IC.trend} อัปเดต</span>
          <span className="clamp-2" style={{ color: upd ? "var(--ink2)" : "var(--faint)" }}>
            {upd ? (<><b style={{ color: "var(--ink)" }}>{upd.title}</b> <span style={{ fontSize: 11.5, color: "var(--muted)" }}>· {upd.date}</span></>) : "ยังไม่มีอัปเดต"}
          </span>

          <span style={{ color: "var(--muted)" }}>{IC.check} Next</span>
          <span className="clamp-2" style={{ color: ns ? "var(--ink2)" : "var(--faint)" }}>
            {ns ? (<><b style={{ color: "var(--ink)" }}>{ns.title}</b>{ns.dueDate ? <span style={{ fontSize: 11.5, color: "var(--muted)" }}> · {window.isoToBE ? window.isoToBE(ns.dueDate) : ns.dueDate}{ns.dueTime ? " " + ns.dueTime + " น." : ""}</span> : null}</>) : "ยังไม่มี Next Step"}
          </span>

          <span style={{ color: "var(--muted)" }}>{IC.cal} ส่งมอบ</span>
          <span className={"pill " + dTone} style={{ justifySelf: "start", fontSize: 12 }}><i />{p.end ? (window.isoToBE ? window.isoToBE(p.end) : p.end) : "ไม่กำหนด"}</span>

          <span style={{ color: "var(--muted)" }}>{IC.user} เจ้าของ</span>
          <span style={{ display: "flex", alignItems: "center", gap: 7, minWidth: 0 }}>
            {p.owner
              ? <><span className="avatar sm" style={{ background: "var(--raised2)", color: "var(--muted)", flex: "none" }}>{p.ownerInit || (p.owner || "?").slice(0,2)}</span><span style={{ wordBreak: "break-word" }}>{p.owner}</span></>
              : <span style={{ color: "var(--faint)" }}>ไม่ระบุ</span>}
          </span>
        </div>
      </div>
    );
  }

  // ── Project selector — starred pinned, then by end date asc ──
  function ProjectSelector({ projects }) {
    // Sort: starred first, then end date ascending (closest to completion first)
    const sorted = projects.slice().sort((a, b) => {
      const aS = a.starred ? 1 : 0, bS = b.starred ? 1 : 0;
      if (aS !== bS) return bS - aS;
      const aE = a.end || "", bE = b.end || "";
      if (aE && bE && aE !== bE) return aE.localeCompare(bE);
      if (aE && !bE) return -1;
      if (!aE && bE) return 1;
      return (a.progress || 0) - (b.progress || 0);
    });
    return (
      <div className="rail-card" style={{ padding: 16 }}>
        <div className="exec-section-head">
          <span>📂 เลือกโครงการ</span>
          <span style={{ fontSize: 12, color: "var(--muted)", textTransform: "none", letterSpacing: 0 }}>{sorted.length} โครงการ · เรียงตามกำหนดส่ง</span>
        </div>
        {sorted.length === 0 ? (
          <window.EmptyState icon="folder" title="ยังไม่มีโครงการ" sub="เริ่มต้นจากการสร้างโครงการแรกในคอนโซลผู้ดูแล" />
        ) : (
          <div style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 340px), 1fr))" }}>
            {sorted.map((p) => <ProjectCard key={p.id} p={p} />)}
          </div>
        )}
      </div>
    );
  }

  // ── Main screen ──
  window.SCREENS.home = function ExecutiveHome() {
    window.useLiveData();
    const agg = aggregateAttention();
    return (
      <div className="page wide exec-screen" style={{ maxWidth: 1100 }}>
        <ExecutiveSnapshot agg={agg} />
        <RecommendedActions projects={agg.active} />
        <ProjectSelector projects={agg.active} />
      </div>
    );
  };
})();