// Reports & Executive Insights — KPIs, trend chart, budget, delay, vendor perf, templates, export.
(function () {
  window.SCREENS = window.SCREENS || {};
  const { useState, useRef } = React;
  const IC = window.IC, D = window.DATA;
  const toneVar = { ok: "var(--ok)", warn: "var(--warn)", danger: "var(--danger)", info: "var(--info)", neutral: "var(--neutral)", accent: "var(--accent)" };
  const WK = ["W14", "W15", "W16", "W17", "W18", "W19", "W20"];

  // ----- per-project plain-text summary (LINE-ready) -----
  function buildSummary(p) {
    const sm = D.statusMeta, rm = D.riskMeta;
    const det = window.detailFor ? window.detailFor(p) : (D.detail[p.id] || D.genericPhases(p));
    const spentPct = Math.round((p.spent / p.budget) * 100);
    const cur = det.phases.find((ph) => ph.status === "active") || det.phases.find((ph) => ph.status === "todo") || det.phases[det.phases.length - 1];
    let nextMile = null;
    det.phases.forEach((ph) => (ph.tasks || []).forEach((t) => { if (window.isMilestone(t) && t.status !== "done" && !nextMile) nextMile = t; }));
    const dec = (det.decisions || [])[0];
    const mt = (det.meetings || [])[0];
    const vendors = (det.vendors || []);
    const L = [];
    L.push("▮ สรุปโครงการ: " + p.name + " (" + p.code + ")");
    L.push("ณ วันที่ 3 มิ.ย. 2026");
    L.push("————————————");
    L.push("• สถานะ: " + sm[p.status].th + "   • ความเสี่ยง: " + rm[p.risk].th);
    L.push("• ความคืบหน้า: " + p.progress + "%");
    L.push("• เฟสปัจจุบัน: " + (cur ? cur.name : "-"));
    L.push("• ผู้รับผิดชอบ: " + p.owner);
    L.push("• กำหนดส่ง: " + p.due);
    if (nextMile) L.push("• เหตุการณ์ถัดไป: " + nextMile.name);
    L.push("————————————");
    L.push("• งบประมาณ: " + window.fmtBaht(p.spent) + " / " + window.fmtBaht(p.budget) + " (ใช้ไป " + spentPct + "%)");
    L.push("• ประเด็นติดตาม: " + p.riskNote);
    if (dec) L.push("• Decision ล่าสุด (" + dec.date + "): " + dec.change);
    if (mt) L.push("• ประชุมล่าสุด: " + mt.title + " (" + mt.date + ")" + (mt.outcome && mt.outcome !== "—" ? " — " + mt.outcome : ""));
    if (vendors.length) L.push("• Vendor: " + vendors.map((v) => v.name + " (" + v.stage + ")").join(", "));
    L.push("————————————");
    L.push("ส่งจาก BANK PROJECT · Project Intelligence");
    return L.join("\n");
  }

  function ProjectLineSummary() {
    const [pid, setPid] = useState(D.projects[0].id);
    const ref = useRef(null);
    const p = D.projects.find((x) => x.id === pid) || D.projects[0];
    const text = buildSummary(p);
    const copy = () => {
      navigator.clipboard.writeText(text)
        .then(() => window.toast("คัดลอกข้อความแล้ว — วางใน LINE ได้เลย"))
        .catch(() => { if (ref.current) { ref.current.focus(); ref.current.select(); } });
    };
    const sendLine = () => window.open("https://line.me/R/msg/text/?" + encodeURIComponent(text), "_blank", "noopener");
    return (
      <div className="panel linesum" style={{ marginTop: 18 }}>
        <div className="panel-h">
          <h3>สรุปรายโครงการ · ส่งทาง LINE</h3>
          <span className="page-sub" style={{ marginTop: 0 }}>เลือกโครงการ → คัดลอก → วางในแชต</span>
        </div>
        <div className="panel-b">
          <div className="linesum-tools">
            <select className="line-select" value={pid} onChange={(e) => setPid(e.target.value)}>
              {D.projects.map((x) => <option key={x.id} value={x.id}>{x.name}</option>)}
            </select>
            <div className="spacer" />
            <button className="btn sm" onClick={copy}>{IC.copy} คัดลอกข้อความ</button>
            <button className="btn sm pri" onClick={sendLine}>{IC.send} ส่งทาง LINE</button>
          </div>
          <textarea ref={ref} className="linebox" readOnly value={text} onFocus={(e) => e.target.select()} />
          <div className="linesum-foot">{IC.chat}<span>ข้อความล้วนล้วน — คัดลอกแล้ววางในแชต LINE ส่วนตัวของผู้บริหารได้ทันที</span></div>
        </div>
      </div>
    );
  }

  window.SCREENS.reports = function Reports() {
    const k = D.reportKpis;
    const maxBudget = Math.max(...D.budgetByProject.map((b) => b.budget));
    const trendMax = Math.max(...D.progressTrend);

    return (
      <div className="page wide">
        <header style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow">Insights</div>
            <h1 className="page-title">รายงาน</h1>
            <p className="page-sub">รายงานสำหรับผู้บริหาร — ภาพรวมพอร์ตโฟลิโอ งบประมาณ ความล่าช้า และผลงาน Vendor</p>
          </div>
          <div style={{ display: "flex", gap: 9 }}>
            <button className="btn" onClick={() => window.openReport("exec")}>{IC.pdf} PDF</button>
            <button className="btn" onClick={() => window.exportProjectsCSV()}>{IC.download} CSV</button>
            <button className="btn pri" onClick={() => window.openReport("exec")}>{IC.eye} เปิดรายงาน</button>
          </div>
        </header>

        {/* KPI summary — computed from current projects */}
        <div className="rep-kpis" style={{ marginTop: 22 }}>
          <div className="rep-kpi"><div className="rk-l">{IC.check}ตามแผน</div><div className="rk-v tnum" style={{ color: "var(--ok)" }}>{k.onTrack}</div><div className="rk-s">โครงการตามแผน</div></div>
          <div className="rep-kpi"><div className="rk-l">{IC.warn}เสี่ยงล่าช้า</div><div className="rk-v tnum" style={{ color: "var(--warn)" }}>{k.atRisk}</div><div className="rk-s">ต้องติดตาม</div></div>
          <div className="rep-kpi"><div className="rk-l">{IC.clock}ล่าช้าแล้ว</div><div className="rk-v tnum" style={{ color: "var(--danger)" }}>{k.delayed}</div><div className="rk-s">เกินกำหนด</div></div>
          <div className="rep-kpi"><div className="rk-l">{IC.trend}ความคืบหน้าเฉลี่ย</div><div className="rk-v tnum">{k.avgProgress}%</div><div className="rk-s">เฉลี่ยทั้งพอร์ต</div></div>
        </div>

        {/* Per-project LINE summary */}
        <ProjectLineSummary />

        <div className="rep-cards" style={{ marginTop: 18 }}>
          {/* Progress per project (real) */}
          <div className="panel">
            <div className="panel-h"><h3>ความคืบหน้าแต่ละโครงการ</h3><span className="pill ok"><i />เฉลี่ย {k.avgProgress}%</span></div>
            <div className="panel-b">
              {D.progressTrend.length === 0
                ? <div className="empty" style={{ padding: 16, fontSize: 13 }}>ยังไม่มีข้อมูลโครงการ</div>
                : <div className="trend-chart">
                {D.progressTrend.map((v, i) => (
                  <div className="trend-col" key={i}>
                    <span className="trend-v tnum">{v}%</span>
                    <div className="trend-bar" style={{ height: "100%" }}><i style={{ height: (v / Math.max(trendMax, 1) * 100) + "%" }} /></div>
                    <span className="trend-x">{(D.progressLabels || [])[i] || ""}</span>
                  </div>
                ))}
              </div>}
            </div>
          </div>

          {/* Delay analysis */}
          <div className="panel">
            <div className="panel-h"><h3>วิเคราะห์ความล่าช้า</h3><a className="lnk" href="#/projects">ดูโครงการ →</a></div>
            <div className="panel-b">
              {D.delayAnalysis.length === 0 && <div className="empty" style={{ padding: 16, fontSize: 13 }}>ไม่มีโครงการที่ล่าช้าหรือเกินกำหนด</div>}
              {D.delayAnalysis.map((d, i) => (
                <div className="delay-row" key={i}>
                  <div className={"delay-badge " + d.tone}><div><b className="tnum">{d.delay}</b><br /><span>วัน</span></div></div>
                  <div style={{ flex: 1, minWidth: 0 }}><div className="dl-n">{d.project}</div><div className="dl-r">{d.reason}</div></div>
                </div>
              ))}
            </div>
          </div>

          {/* Budget by project */}
          <div className="panel">
            <div className="panel-h"><h3>งบประมาณ vs เบิกจ่าย</h3><span className="page-sub" style={{ marginTop: 0 }}>หน่วย: ล้านบาท</span></div>
            <div className="panel-b">
              {D.budgetByProject.map((b, i) => {
                const pct = Math.round((b.spent / b.budget) * 100);
                return (
                  <div className="budget-row" key={i}>
                    <div className="br-top"><span className="br-n">{b.name}</span><span className="br-v"><b className="tnum">{window.fmtBaht(b.spent)}</b> / {window.fmtBaht(b.budget)} · {pct}%</span></div>
                    <div className="budget-track"><i style={{ width: (b.budget / maxBudget * 100) + "%", background: "var(--raised2)" }} /><i style={{ width: (b.spent / maxBudget * 100) + "%", position: "absolute", top: 0, left: 0, background: pct > 85 ? "var(--danger)" : "var(--accent)" }} /></div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Vendor performance */}
          <div className="panel">
            <div className="panel-h"><h3>ผลงาน Vendor</h3><span className="page-sub" style={{ marginTop: 0 }}>คะแนนเต็ม 100</span></div>
            <div className="panel-b">
              {D.vendorPerf.length === 0 && <div className="empty" style={{ padding: 16, fontSize: 13 }}>ยังไม่มีข้อมูล Vendor ในโครงการ</div>}
              {D.vendorPerf.map((v, i) => (
                <div className="vperf-row" key={i}>
                  <span className="vp-n">{v.name}</span>
                  <div className="vperf-track"><i style={{ width: v.score + "%", background: toneVar[v.tone] }} /></div>
                  <span className="vp-s tnum" style={{ color: toneVar[v.tone] }}>{v.score}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Report templates */}
        <div className="block">
          <div className="sh"><span className="sec-title">สร้างรายงาน</span></div>
          <div className="tmpl-grid">
            {D.reportTemplates.map((t) => (
              <div className="tmpl-card" key={t.id} onClick={() => window.openReport(t.id)} style={{ cursor: "pointer" }}>
                <span className={"tmpl-ic " + t.color}>{IC[t.icon]}</span>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div className="tc-n">{t.name}</div>
                  <div className="tc-d">{t.desc}</div>
                  <div className="tc-s">{IC.calClock}{t.schedule}</div>
                </div>
                <span className="tc-go">{IC.chevR}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Recent reports */}
        <div className="block">
          <div className="sh"><span className="sec-title">รายงานล่าสุด</span></div>
          <div className="rail-card">
            {(!D.recentReports || D.recentReports.length === 0)
              ? <div className="empty" style={{ padding: 16, fontSize: 13 }}>ยังไม่มีรายงานที่บันทึกไว้ — กด “เปิดรายงาน” ด้านบนเพื่อสร้างและบันทึกเป็น PDF</div>
              : D.recentReports.map((r) => (
              <div className="doc-row" key={r.id}>
                <span className="doc-ic proposal">{r.format === "Excel" ? "XLS" : r.format === "Presentation" ? "PPT" : "PDF"}</span>
                <div style={{ flex: 1, minWidth: 0 }}><div className="dn">{r.name}</div><div className="dm">{r.type} · {r.by} · {r.date}</div></div>
                <button className="btn sm" onClick={() => window.openReport("exec")}>{IC.eye} เปิดดู</button>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  };
})();