/* ============ Dashboard ============ */
function Dashboard({ entity, onNav, pLong, period }) {
  const docs = D.docs.filter((d) => d.status !== 'deleted' && inPeriod(d.docDateISO, period));
  const income = D.income.filter((d) => inPeriod(d.dateISO, period));
  const hasData = docs.length > 0 || income.length > 0;
  const expTotal = docs.reduce((a, d) => a + d.total, 0);
  const expPre = docs.reduce((a, d) => a + d.pre, 0);
  const vatPurchase = docs.filter((d) => d.creditable).reduce((a, d) => a + d.vat, 0);
  const revPre = income.reduce((a, d) => a + d.pre, 0);
  const vatSales = income.reduce((a, d) => a + d.vat, 0);
  const profit = revPre - expPre;
  const vatDue = vatSales - vatPurchase;
  const pending = docs.filter((d) => d.status === 'pending').length;
  const issues = docs.filter((d) => d.status === 'issue').length;
  const creditableDocs = docs.filter((d) => d.creditable).length;

  // category breakdown
  const byCat = {};
  docs.forEach((d) => { byCat[d.cat] = (byCat[d.cat] || 0) + d.total; });
  const segs = Object.entries(byCat).map(([id, value]) => ({ id, value, color: D.catColor(id), label: D.catLabel(id) }))
    .sort((a, b) => b.value - a.value);

  if (entity === 'personal') return <PersonalDashboard />;

  if (!hasData) return (
    <>
      <div className="page-head">
        <div><div className="pt">ภาพรวมกิจการ</div><div className="ps">{D.company.name} · รอบภาษี {pLong}</div></div>
      </div>
      <Empty icon="calendar" title={'ยังไม่มีข้อมูลสำหรับ ' + pLong} sub="เลือกเดือนอื่น หรือเริ่มบันทึกเอกสารของรอบนี้" action={<button className="btn btn-primary" onClick={() => onNav('scan')}><Icon name="scan" className="ic" />สแกนใบเสร็จรอบนี้</button>} />
    </>
  );

  return (
    <>
      <div className="page-head">
        <div>
          <div className="pt">ภาพรวมกิจการ</div>
          <div className="ps">{D.company.name} · รอบภาษี {pLong}</div>
        </div>
        <div className="spacer"></div>
        <button className="btn btn-ghost" onClick={() => onNav('export')}><Icon name="package" className="ic" />แพ็กส่งบัญชี</button>
        <button className="btn btn-primary" onClick={() => onNav('scan')}><Icon name="scan" className="ic" />สแกนใบเสร็จ</button>
      </div>

      {/* primary stats */}
      <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(212px, 1fr))', marginBottom: 16 }}>
        <Stat label="รายรับเดือนนี้" icon="income" value={D.baht(revPre, 0)} delta="+18%" deltaDir="up" sub="vs เดือนก่อน" />
        <Stat label="รายจ่ายเดือนนี้" icon="expense" iconBg="var(--info-bg)" iconColor="var(--info)" value={D.baht(expPre, 0)} delta="-12%" deltaDir="down" sub="vs เดือนก่อน" />
        <Stat label="กำไรเบื้องต้น" icon="pie" iconBg="var(--ok-bg)" iconColor="var(--ok)" value={D.baht(profit, 0)} sub={'อัตรากำไร ' + (revPre > 0 ? Math.round(profit / revPre * 100) : 0) + '%'} />
        <Stat label={vatDue >= 0 ? 'VAT ต้องชำระ' : 'เครดิต VAT ยกไป'} icon="vat" iconBg={vatDue >= 0 ? 'var(--warn-bg)' : 'var(--ok-bg)'} iconColor={vatDue >= 0 ? 'var(--warn)' : 'var(--ok)'} value={D.baht(Math.abs(vatDue), 0)} sub="หลังหักเครดิตยกมา" />
      </div>

      {/* secondary stats */}
      <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', marginBottom: 16 }}>
        {[
          ['ใบเสร็จทั้งหมด', docs.length, 'receipt', 'docs'],
          ['ใช้เครดิต VAT ได้', creditableDocs, 'checkCircle', 'expense'],
          ['รอตรวจสอบ', pending, 'alert', 'docs', pending > 0 ? 'warn' : ''],
          ['เอกสารมีปัญหา', issues, 'alert', 'docs', issues > 0 ? 'danger' : ''],
        ].map(([lbl, val, ic, nav, tone]) => (
          <button key={lbl} className="card" style={{ padding: '14px 16px', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 12 }} onClick={() => onNav(nav)}>
            <div className="stat-ic" style={{ background: tone === 'warn' ? 'var(--warn-bg)' : tone === 'danger' ? 'var(--danger-bg)' : 'var(--surface-2)', color: tone === 'warn' ? 'var(--warn)' : tone === 'danger' ? 'var(--danger)' : 'var(--ink-2)' }}><Icon name={ic} size={17} /></div>
            <div>
              <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{val}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 3 }}>{lbl}</div>
            </div>
          </button>
        ))}
      </div>

      {/* charts row */}
      <div className="grid" style={{ gridTemplateColumns: 'minmax(0, 1.6fr) minmax(0, 1fr)', marginBottom: 16 }}>
        <div className="card">
          <div className="card-head"><div><h3>รายรับ vs รายจ่าย</h3><div className="sub">6 เดือนล่าสุด</div></div>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 14 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap' }}><span style={{ width: 11, height: 11, borderRadius: 3, background: 'var(--primary)' }}></span>รายรับ</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap' }}><span style={{ width: 11, height: 11, borderRadius: 3, background: 'var(--primary-tint2)' }}></span>รายจ่าย</span>
            </div>
          </div>
          <div className="card-pad"><TrendChart data={D.trend} /></div>
        </div>

        <div className="card">
          <div className="card-head"><h3>รายจ่ายตามหมวด</h3><button className="btn btn-sm btn-soft" style={{ marginLeft: 'auto' }} onClick={() => onNav('expense')}>ดูทั้งหมด</button></div>
          <div className="card-pad" style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
            <Donut segments={segs} centerLabel={D.baht(expTotal, 0)} centerSub="รวมรายจ่าย" />
            <div style={{ flex: 1, minWidth: 150, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {segs.slice(0, 6).map((s) => (
                <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5 }}>
                  <span style={{ width: 9, height: 9, borderRadius: 3, background: s.color, flexShrink: 0 }}></span>
                  <span style={{ flex: 1, color: 'var(--ink-2)' }}>{s.label}</span>
                  <span className="num" style={{ fontWeight: 600 }}>{D.fmt0(s.value)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* recent docs + vat summary */}
      <div className="grid" style={{ gridTemplateColumns: 'minmax(0, 1.6fr) minmax(0, 1fr)' }}>
        <div className="card">
          <div className="card-head"><h3>เอกสารล่าสุด</h3><button className="btn btn-sm btn-soft" style={{ marginLeft: 'auto' }} onClick={() => onNav('docs')}>ทะเบียนเอกสาร</button></div>
          <div className="tbl-wrap">
            <table className="tbl">
              <thead><tr><th>วันที่</th><th>ร้านค้า</th><th>หมวด</th><th className="r">ยอดรวม</th><th>สถานะ</th></tr></thead>
              <tbody>
                {docs.slice(0, 6).map((d) => (
                  <tr key={d.id} className="row-link" onClick={() => onNav('docs')}>
                    <td className="num" style={{ color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>{d.docDate}</td>
                    <td style={{ fontWeight: 500 }}>{d.vendor}</td>
                    <td><span className="chip" style={{ borderColor: 'transparent', background: 'var(--surface-2)' }}><span style={{ width: 7, height: 7, borderRadius: 2, background: D.catColor(d.cat) }}></span>{D.catLabel(d.cat)}</span></td>
                    <td className="r num" style={{ fontWeight: 600 }}>{D.fmt(d.total)}</td>
                    <td><Status status={d.status} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card">
            <div className="card-head"><h3>สรุป ภ.พ.30</h3><span className="badge muted" style={{ marginLeft: 'auto' }}>{periodShort(period)}</span></div>
            <div className="card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13.5 }}>
              {[['ภาษีขาย', vatSales, false], ['ภาษีซื้อ (เครดิตได้)', vatPurchase, false]].map(([l, v]) => (
                <div key={l} style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: 'var(--ink-2)' }}>{l}</span><span className="num" style={{ fontWeight: 600 }}>{D.baht(v)}</span></div>
              ))}
              <div className="divider" style={{ margin: '4px 0' }}></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontWeight: 700 }}>{vatDue >= 0 ? 'ต้องชำระสุทธิ' : 'เครดิตยกไป'}</span>
                <span className="num" style={{ fontWeight: 700, fontSize: 18, color: vatDue >= 0 ? 'var(--warn)' : 'var(--ok)' }}>{D.baht(Math.abs(vatDue))}</span>
              </div>
              <button className="btn btn-soft btn-block" style={{ marginTop: 6 }} onClick={() => onNav('vat')}><Icon name="vat" className="ic" />ดูรายงาน ภ.พ.30</button>
            </div>
          </div>

          <div className="callout warn">
            <Icon name="info" className="ic" />
            <div>ระบบนี้เป็นเครื่องมือ<b>ช่วยจัดเตรียมข้อมูลภาษี</b> ไม่ใช่คำปรึกษาภาษีแทนผู้สอบบัญชี/สำนักงานบัญชี โปรดตรวจสอบกับผู้เชี่ยวชาญก่อนยื่นจริง</div>
          </div>
        </div>
      </div>
    </>
  );
}

/* ---- Personal dashboard ---- */
function PersonalDashboard() {
  const inc = D.personalIncome.reduce((a, d) => a + d.amount, 0);
  const ded = D.personalExp.reduce((a, d) => a + d.amount, 0);
  const net = inc - ded;
  return (
    <>
      <div className="page-head">
        <div><div className="pt">ภาพรวมบุคคลธรรมดา</div><div className="ps">{D.personal.name} · ปีภาษี 2568</div></div>
      </div>
      <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(212px, 1fr))', marginBottom: 16 }}>
        <Stat label="รายได้รวมทั้งปี" icon="income" value={D.baht(inc, 0)} sub="ทุกประเภทเงินได้" />
        <Stat label="ค่าใช้จ่าย + ลดหย่อน" icon="expense" iconBg="var(--info-bg)" iconColor="var(--info)" value={D.baht(ded, 0)} />
        <Stat label="เงินได้สุทธิ" icon="pie" iconBg="var(--ok-bg)" iconColor="var(--ok)" value={D.baht(net, 0)} sub="ฐานคำนวณภาษี" />
        <Stat label="ภาษีโดยประมาณ" icon="vat" iconBg="var(--warn-bg)" iconColor="var(--warn)" value={D.baht(estTax(net), 0)} sub="อัตราก้าวหน้า" />
      </div>
      <div className="callout warn"><Icon name="info" className="ic" /><div>ตัวเลขภาษีเป็นการประมาณการเบื้องต้นเท่านั้น โปรดตรวจสอบกับสำนักงานบัญชีก่อนยื่นแบบ ภ.ง.ด.90/91</div></div>
    </>
  );
}

function estTax(net) {
  const b = [[150000, 0], [150000, .05], [200000, .1], [250000, .15], [250000, .2], [1000000, .25], [3000000, .3], [Infinity, .35]];
  let rem = net, tax = 0;
  for (const [size, rate] of b) { if (rem <= 0) break; const t = Math.min(rem, size); tax += t * rate; rem -= t; }
  return tax;
}
window.estTax = estTax;
window.Dashboard = Dashboard;