/* global React, Icon, TrendChart, MarginLines, CashArea, Gauge, Sparkline, EV, fmtComma */
/* ============================================================================
   T1 Management Dashboard — composition + realistic Thai SME data.
   Demo client: บริษัท รุ่งอรุณเทรดดิ้ง จำกัด (food trading/manufacturing SME).
   Figures are illustrative ("ข้อมูลสมมติ"). Every number IBM Plex Mono tabular.
   ============================================================================ */

const LBL = ["เม.ย.","พ.ค.","มิ.ย.","ก.ค.","ส.ค.","ก.ย.","ต.ค.","พ.ย.","ธ.ค.","ม.ค.","ก.พ.","มี.ค."];
const REV = [3.42,3.18,3.55,3.61,3.40,3.78,3.95,4.02,4.35,3.88,3.72,4.24].map(v => v * 1e6);
const EXP = [2.78,2.62,2.85,2.92,2.75,3.02,3.14,3.20,3.42,3.10,3.05,3.33].map(v => v * 1e6);
const NET = REV.map((r, i) => r - EXP[i]);
const GROSS_M = [34.2,33.6,35.1,34.8,35.5,36.2,36.8,37.0,38.1,37.4,36.9,38.4];
const NET_M = NET.map((v, i) => +(v / REV[i] * 100).toFixed(1));
const CASH = [1.62,1.78,1.95,2.05,2.18,2.42,2.55,2.78,2.95,2.88,3.02,3.18].map(v => v * 1e6);

const KPIS = [
  { ov: "รายได้รวม · 2026-Q1", cur: "฿", val: "11,840,000", delta: "+12.4%", dir: "pos", vs: "เทียบ YoY", spark: REV.slice(6), color: EV.gold },
  { ov: "กำไรสุทธิ · 2026-Q1", cur: "฿", val: "2,360,000", delta: "+18.2%", dir: "pos", vs: "เทียบ YoY", spark: NET.slice(6), color: EV.pos },
  { ov: "อัตรากำไรสุทธิ", val: "19.9", u: "%", delta: "+1.5 ppt", dir: "pos", vs: "เทียบ YoY", spark: NET_M.slice(6), color: EV.pos },
  { ov: "เงินสดคงเหลือ", cur: "฿", val: "3,184,500", delta: "+8.6%", dir: "pos", vs: "เทียบไตรมาสก่อน", spark: CASH.slice(6), color: EV.info },
];

const AGING = [
  { b: "ปัจจุบัน", ar: 1842000, ap: 1205000, k: "" },
  { b: "1–30 วัน", ar: 624000, ap: 486000, k: "" },
  { b: "31–60 วัน", ar: 318000, ap: 214000, k: "" },
  { b: "61–90 วัน", ar: 142000, ap: 62000, k: "warnv" },
  { b: "เกิน 90 วัน", ar: 86000, ap: 0, k: "negv" },
];
const AR_TOTAL = 3012000, AP_TOTAL = 1967000;

const EXPENSES = [
  { l: "ต้นทุนขาย", v: 2612000, pct: "61.6%" },
  { l: "เงินเดือน & สวัสดิการ", v: 384000, pct: "9.1%" },
  { l: "ค่าเช่า & สาธารณูปโภค", v: 142000, pct: "3.4%" },
  { l: "การตลาด & ขนส่ง", v: 96000, pct: "2.3%" },
  { l: "ค่าใช้จ่ายอื่น", v: 96000, pct: "2.3%" },
];

const TAXES = [
  { form: "ภ.พ.30 — ภาษีมูลค่าเพิ่ม", sub: "งวด มี.ค. 2026", amt: "284,500.00", due: "2026-04-15", status: "filed", label: "ยื่นแล้ว" },
  { form: "ภ.ง.ด.1 — หัก ณ ที่จ่าย เงินเดือน", sub: "งวด มี.ค. 2026", amt: "38,200.00", due: "2026-04-07", status: "filed", label: "ยื่นแล้ว" },
  { form: "ประกันสังคม — เงินสมทบ", sub: "งวด เม.ย. 2026", amt: "54,800.00", due: "2026-05-15", status: "due-soon", label: "ครบใน 9 วัน" },
  { form: "ภ.ง.ด.51 — ภาษีนิติบุคคลครึ่งปี", sub: "ประมาณการ · รอบ 2026", amt: "642,000.00", due: "2026-08-31", status: "scheduled", label: "กำหนดถัดไป" },
];

/* ---- Widget atoms ------------------------------------------------------- */
function WHead({ t, ov, right }) {
  return (
    <div className="w-head">
      <div>
        {ov && <div className="ov" style={{ marginBottom: 5 }}>{ov}</div>}
        <div className="t">{t}</div>
      </div>
      {right}
    </div>
  );
}
function Legend({ items }) {
  return (
    <div className="legend">
      {items.map((it, i) => <span key={i}><i style={{ background: it.c }}></i>{it.l}</span>)}
    </div>
  );
}

function KpiCard({ k }) {
  return (
    <div className="w kpi c3">
      <p className="ov">{k.ov}</p>
      <div className="val">
        {k.cur && <span className="cur">{k.cur} </span>}{k.val}{k.u && <span className="u">{k.u}</span>}
      </div>
      <div className="sub">
        <span className={"delta " + k.dir}>{k.dir === "pos" ? "▲" : "▼"} {k.delta}</span>
        <span className="vs">{k.vs}</span>
      </div>
      <div className="spark"><Sparkline data={k.spark} color={k.color} /></div>
    </div>
  );
}

function TaxWidget() {
  return (
    <div className="w c4">
      <WHead ov="ภาษี & นำส่ง" t="กำหนดยื่นถัดไป" right={<Icon name="receipt" size={18} style={{ color: EV.goldDim }} />} />
      <div>
        {TAXES.map((t, i) => (
          <div className="tax-row" key={i}>
            <div className="form">{t.form}<div className="sub">{t.sub}</div></div>
            <div className="amt">{t.amt}<div className="due mono" style={{ color: EV.mute, marginTop: 3 }}>{t.due}</div></div>
            <div><span className={"d-tag " + t.status}><i></i>{t.label}</span></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AgingWidget() {
  return (
    <div className="w c5">
      <WHead ov="ลูกหนี้ / เจ้าหนี้" t="อายุหนี้คงค้าง · มี.ค. 2026" right={<Icon name="flow" size={18} style={{ color: EV.goldDim }} />} />
      <table className="aging">
        <thead><tr><th>ช่วงอายุ</th><th>ลูกหนี้การค้า</th><th>เจ้าหนี้การค้า</th></tr></thead>
        <tbody>
          {AGING.map((r, i) => (
            <tr key={i}>
              <td>{r.b}</td>
              <td className={r.k}>{fmtComma(r.ar)}</td>
              <td>{r.ap ? fmtComma(r.ap) : "—"}</td>
            </tr>
          ))}
        </tbody>
        <tfoot><tr><td>รวม</td><td>{fmtComma(AR_TOTAL)}</td><td>{fmtComma(AP_TOTAL)}</td></tr></tfoot>
      </table>
    </div>
  );
}

function ExpenseWidget() {
  return (
    <div className="w c3">
      <WHead ov="โครงสร้างต้นทุน" t="ค่าใช้จ่ายหลัก" right={<Icon name="pie" size={18} style={{ color: EV.goldDim }} />} />
      <div>
        {EXPENSES.map((e, i) => (
          <div className="minirow" key={i}>
            <span>{e.l}<span style={{ color: EV.mute, marginLeft: 7, fontFamily: "var(--font-mono)" }}>{e.pct}</span></span>
            <span className="v">{fmtComma(e.v)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function BalanceWidget() {
  return (
    <div className="w c4">
      <WHead ov="งบดุล" t="โครงสร้างงบแสดงฐานะการเงิน" right={<Icon name="scale" size={18} style={{ color: EV.goldDim }} />} />
      <div style={{ fontSize: 11, color: EV.mute, marginBottom: 6, display: "flex", justifyContent: "space-between" }}>
        <span>สินทรัพย์รวม</span><span className="mono" style={{ color: EV.hi }}>฿ 14,200,000</span>
      </div>
      <div className="bs-bar">
        <span style={{ width: "60.6%", background: EV.goldDim }}></span>
        <span style={{ width: "39.4%", background: "#5C6E5A" }}></span>
      </div>
      <div className="bs-key">
        <span className="k"><i style={{ background: EV.goldDim }}></i>หมุนเวียน <b>8,600,000</b></span>
        <span className="k"><i style={{ background: "#5C6E5A" }}></i>ไม่หมุนเวียน <b>5,600,000</b></span>
      </div>
      <div style={{ fontSize: 11, color: EV.mute, margin: "18px 0 6px", display: "flex", justifyContent: "space-between" }}>
        <span>หนี้สิน + ส่วนของผู้ถือหุ้น</span><span className="mono" style={{ color: EV.hi }}>฿ 14,200,000</span>
      </div>
      <div className="bs-bar">
        <span style={{ width: "27.5%", background: EV.negDim }}></span>
        <span style={{ width: "14.8%", background: "#7A5A4E" }}></span>
        <span style={{ width: "57.7%", background: "#3E6B3A" }}></span>
      </div>
      <div className="bs-key">
        <span className="k"><i style={{ background: EV.negDim }}></i>หนี้สินหมุนเวียน <b>3,900,000</b></span>
        <span className="k"><i style={{ background: "#7A5A4E" }}></i>หนี้สินไม่หมุนเวียน <b>2,100,000</b></span>
        <span className="k"><i style={{ background: "#3E6B3A" }}></i>ส่วนของผู้ถือหุ้น <b>8,200,000</b></span>
      </div>
    </div>
  );
}

/* ---- Sidebar + topbar --------------------------------------------------- */
const SIDE_NAV = [
  { ico: "grid", l: "ภาพรวม", active: true },
  { ico: "chart", l: "งบกำไรขาดทุน" },
  { ico: "scale", l: "งบดุล" },
  { ico: "coins", l: "กระแสเงินสด" },
  { ico: "flow", l: "ลูกหนี้ / เจ้าหนี้" },
  { ico: "receipt", l: "ภาษี & นำส่ง" },
  { ico: "doc", l: "รายงาน" },
];

function Sidebar() {
  return (
    <aside className="dash-side">
      <div className="side-brand">
        <img src="assets/logo-mark-goldlt.png" alt="T1" />
        <div><div className="nm">T1</div><div className="sb">Dashboard</div></div>
      </div>
      <div className="side-cap">เมนู</div>
      <nav className="dash-nav">
        {SIDE_NAV.map((n, i) => (
          <a key={i} href="#" className={n.active ? "active" : ""} onClick={e => e.preventDefault()}>
            <Icon name={n.ico} size={18} className="gi" />{n.l}
          </a>
        ))}
      </nav>
      <div className="side-foot">
        <div className="who">ดูแลโดย T1 Service</div>
        <div className="role">ผู้จัดการบัญชี · คุณวีรยา</div>
      </div>
    </aside>
  );
}

function TopBar() {
  return (
    <div className="dash-top">
      <div className="co">
        <div>
          <div className="nm">บริษัท รุ่งอรุณเทรดดิ้ง จำกัด</div>
          <div className="tax">เลขผู้เสียภาษี 0 1055 6 01234 5</div>
        </div>
      </div>
      <div className="controls">
        <div className="seg">
          <button>รายเดือน</button>
          <button className="on">ไตรมาส</button>
          <button>รายปี</button>
        </div>
        <span className="pill-period"><span className="g">งวด</span> 2026-Q1</span>
        <button className="dash-ico-btn" aria-label="ส่งออกรายงาน"><Icon name="download" size={17} /></button>
      </div>
    </div>
  );
}

/* ---- Full dashboard ----------------------------------------------------- */
function Dashboard() {
  return (
    <div className="dash">
      <Sidebar />
      <div className="dash-main">
        <TopBar />
        <div className="dash-body">
          {KPIS.map((k, i) => <KpiCard key={i} k={k} />)}

          <div className="w c8">
            <WHead ov="งบกำไรขาดทุน" t="รายได้ · ค่าใช้จ่าย · กำไรสุทธิ — 12 เดือนล่าสุด (ลบ ฿)"
              right={<Legend items={[{ c: EV.goldDim, l: "รายได้" }, { c: EV.negDim, l: "ค่าใช้จ่าย" }, { c: EV.pos, l: "กำไรสุทธิ" }]} />} />
            <TrendChart rev={REV} exp={EXP} net={NET} labels={LBL} />
          </div>
          <TaxWidget />

          <div className="w c4">
            <WHead ov="อัตรากำไร" t="กำไรขั้นต้น & กำไรสุทธิ (%)"
              right={<Legend items={[{ c: EV.gold, l: "ขั้นต้น" }, { c: EV.pos, l: "สุทธิ" }]} />} />
            <MarginLines gross={GROSS_M} net={NET_M} labels={LBL} />
          </div>
          <div className="w c4">
            <WHead ov="สภาพคล่อง" t="เงินสดคงเหลือ — 12 เดือน (ลบ ฿)" right={<Icon name="coins" size={18} style={{ color: EV.goldDim }} />} />
            <CashArea data={CASH} labels={LBL} />
          </div>
          <div className="w c4">
            <WHead ov="อัตราส่วน" t="สภาพคล่อง · Current ratio" right={<Icon name="target" size={18} style={{ color: EV.goldDim }} />} />
            <div className="gauge-wrap">
              <Gauge value={2.21} />
              <div>
                <div className="gauge-num">2.21<span className="x">×</span></div>
                <div className="gauge-note">สินทรัพย์หมุนเวียนครอบคลุมหนี้สินระยะสั้น 2.21 เท่า — อยู่ในเกณฑ์แข็งแรง</div>
              </div>
            </div>
            <div style={{ marginTop: 14 }}>
              <div className="minirow"><span>อัตราส่วนเงินทุนหมุนเร็ว (Quick)</span><span className="v">1.59×</span></div>
              <div className="minirow"><span>ระยะเวลาเก็บหนี้เฉลี่ย</span><span className="v">38 วัน</span></div>
            </div>
          </div>

          <BalanceWidget />
          <AgingWidget />
          <ExpenseWidget />
        </div>
      </div>
    </div>
  );
}

/* ---- Compact preview (Home) -------------------------------------------- */
function DashboardPreview() {
  return (
    <div className="dash" style={{ gridTemplateColumns: "1fr" }}>
      <div className="dash-main">
        <TopBar />
        <div className="dash-body" style={{ paddingBottom: 24 }}>
          {KPIS.map((k, i) => <KpiCard key={i} k={k} />)}
          <div className="w c8">
            <WHead ov="งบกำไรขาดทุน" t="รายได้ · ค่าใช้จ่าย · กำไรสุทธิ — 12 เดือนล่าสุด (ลบ ฿)"
              right={<Legend items={[{ c: EV.goldDim, l: "รายได้" }, { c: EV.negDim, l: "ค่าใช้จ่าย" }, { c: EV.pos, l: "กำไรสุทธิ" }]} />} />
            <TrendChart rev={REV} exp={EXP} net={NET} labels={LBL} />
          </div>
          <TaxWidget />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard, DashboardPreview });