// Report export — printable executive report overlay. Save as PDF via browser print.
// window.openReport(templateId) opens it; <ReportModal/> rendered in shell.
(function () {
  const { useState, useEffect } = React;
  const IC = window.IC, D = window.DATA;
  const TODAY = "3 มิถุนายน 2026";

  const META = {
    exec:   { name: "Executive Summary", sub: "สรุปภาพรวมองค์กรสำหรับคณะกรรมการ", period: "ประจำเดือนพฤษภาคม 2026" },
    weekly: { name: "Weekly Project Report", sub: "รายงานความคืบหน้ารายสัปดาห์", period: "สัปดาห์ที่ 20 / 2026" },
    budget: { name: "Budget Report", sub: "งบประมาณและการเบิกจ่าย", period: "ไตรมาส 2 / 2026" },
    delay:  { name: "Delay Analysis", sub: "การวิเคราะห์ความล่าช้า", period: "ณ 3 มิ.ย. 2026" },
    risk:   { name: "Risk Report", sub: "รายงานความเสี่ยง", period: "ณ 3 มิ.ย. 2026" },
    vendor: { name: "Vendor Performance", sub: "ผลการดำเนินงานของ Vendor", period: "ไตรมาส 2 / 2026" },
  };

  function ReportDoc({ tid }) {
    const m = META[tid] || META.exec;
    const k = D.reportKpis, sm = D.statusMeta, rm = D.riskMeta;
    const maxB = Math.max(...D.budgetByProject.map((b) => b.budget));
    return (
      <div className="rdoc">
        <div className="rdoc-cover">
          <div className="rdoc-brand"><span className="rdoc-mark">BT</span><div><b>BANK PROJECT</b><span>Project Intelligence Platform</span></div></div>
          <div className="rdoc-kind">{m.name}</div>
          <h1>{m.sub}</h1>
          <div className="rdoc-period">{m.period}</div>
          <div className="rdoc-meta"><span>จัดทำ {TODAY}</span><span>โดย สมชาย เจริญ · ผู้บริหาร</span><span>ความลับ — ภายในองค์กร</span></div>
        </div>

        <section className="rdoc-sec">
          <h2>1. ภาพรวมพอร์ตโฟลิโอ</h2>
          <div className="rdoc-kpis">
            <div className="rk"><b>{k.onTrack}</b><span>ตามแผน</span></div>
            <div className="rk"><b style={{ color: "var(--warn)" }}>{k.atRisk}</b><span>เสี่ยงล่าช้า</span></div>
            <div className="rk"><b style={{ color: "var(--danger)" }}>{k.delayed}</b><span>ล่าช้าแล้ว</span></div>
            <div className="rk"><b>{k.avgProgress}%</b><span>ความคืบหน้าเฉลี่ย</span></div>
            <div className="rk"><b>{k.budgetUtil}%</b><span>เบิกจ่ายงบ</span></div>
          </div>
          <p className="rdoc-note">พอร์ตโฟลิโอประกอบด้วย {D.projects.length} โครงการ งบประมาณรวม {window.fmtBaht(D.kpis.totalBudget)} เบิกจ่ายแล้ว {window.fmtBaht(D.kpis.spent)} ({D.kpis.spentPct}%)</p>
        </section>

        <section className="rdoc-sec">
          <h2>2. สถานะโครงการ</h2>
          <table className="rdoc-table">
            <thead><tr><th>โครงการ</th><th>สถานะ</th><th>คืบหน้า</th><th>ผู้รับผิดชอบ</th><th>ความเสี่ยง</th><th>กำหนด</th></tr></thead>
            <tbody>
              {D.projects.map((p) => (
                <tr key={p.id}>
                  <td><b>{p.name}</b><br /><span className="rmono">{p.code}</span></td>
                  <td>{sm[p.status].th}</td>
                  <td>{p.progress}%</td>
                  <td>{p.owner}</td>
                  <td><span className={"rdot " + rm[p.risk].tone} />{p.riskNote}</td>
                  <td className="rmono">{p.dueShort}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        <section className="rdoc-sec">
          <h2>3. งบประมาณ vs เบิกจ่าย</h2>
          {D.budgetByProject.map((b, i) => {
            const pct = Math.round((b.spent / b.budget) * 100);
            return (
              <div className="rdoc-bud" key={i}>
                <div className="rb-top"><span>{b.name}</span><span className="rmono">{window.fmtBaht(b.spent)} / {window.fmtBaht(b.budget)} · {pct}%</span></div>
                <div className="rb-track"><i style={{ width: (b.budget / maxB * 100) + "%", background: "#E3DCCD" }} /><i style={{ width: (b.spent / maxB * 100) + "%", position: "absolute", left: 0, top: 0, background: pct > 85 ? "var(--danger)" : "var(--accent)" }} /></div>
              </div>
            );
          })}
        </section>

        <section className="rdoc-sec">
          <h2>4. ความล่าช้า & ความเสี่ยง</h2>
          <table className="rdoc-table">
            <thead><tr><th>โครงการ</th><th>ล่าช้า</th><th>สาเหตุ</th></tr></thead>
            <tbody>
              {D.delayAnalysis.map((d, i) => (
                <tr key={i}><td><b>{d.project}</b></td><td><b style={{ color: d.tone === "danger" ? "var(--danger)" : "var(--warn)" }}>{d.delay} วัน</b></td><td>{d.reason}</td></tr>
              ))}
            </tbody>
          </table>
        </section>

        <section className="rdoc-sec">
          <h2>5. การตัดสินใจล่าสุด</h2>
          {D.decisionLog.slice(0, 4).map((d) => (
            <div className="rdoc-dec" key={d.id}>
              <div className="rd-h"><b>{d.change}</b><span className="rmono">{d.date}</span></div>
              <div className="rd-m">{d.from} → {d.to} · {d.reason} — {d.by} ({d.role})</div>
            </div>
          ))}
        </section>

        <div className="rdoc-foot">BANK PROJECT — Project Intelligence Platform · {m.name} · {m.period} · หน้าเอกสารนี้สร้างอัตโนมัติจากข้อมูลล่าสุด</div>
      </div>
    );
  }
  window.ReportDoc = ReportDoc;

  window.openReport = function (tid) { window.dispatchEvent(new CustomEvent("open-report", { detail: tid || "exec" })); };

  window.ReportModal = function ReportModal() {
    const [tid, setTid] = useState(null);
    useEffect(() => {
      const fn = (e) => setTid(e.detail);
      window.addEventListener("open-report", fn);
      return () => window.removeEventListener("open-report", fn);
    }, []);
    if (!tid) return null;
    const m = META[tid] || META.exec;
    return (
      <div className="report-overlay">
        <div className="report-bar no-print">
          <button className="btn" onClick={() => setTid(null)}>{IC.chevL} ปิด</button>
          <div className="rb-title">{m.name} · <span style={{ color: "var(--muted)", fontWeight: 500 }}>{m.period}</span></div>
          <div style={{ display: "flex", gap: 9 }}>
            <button className="btn" onClick={() => window.exportProjectsCSV()}>{IC.download} CSV</button>
            <button className="btn pri" onClick={() => window.print()}>{IC.pdf} พิมพ์ / บันทึก PDF</button>
          </div>
        </div>
        <div className="report-scroll">
          <div className="report-page"><ReportDoc tid={tid} /></div>
        </div>
      </div>
    );
  };
})();