/* AAU CRM — Tài chính / P&L (module đầy đủ)
   Tabs: Hợp nhất · P&L theo khóa · Doanh thu · So sánh · Nguồn dữ liệu
   Mọi số liệu lấy từ AAU.finance (xem finance_data.js) → truy vết được nguồn. */

const FIN_GROUP_COLOR = { brand: '#7c3aed', ops: '#0a9e6e', office: '#d97706', expand: '#0084ff' };
const fM = (n) => AAU.fmtVNDm(n);
const fV = (n) => AAU.fmtVND(n);
const fPct = (n, d = 1) => (n * 100).toFixed(d) + '%';

/* ---- 1 dòng trong báo cáo P&L ---- */
function FinLine({ label, amount, base, bold, indent, tone, sub, accent, lock }) {
  return (
    <div className="row jcsb aic" style={{ padding: bold ? '10px 0' : '5px 0', paddingLeft: indent ? 22 : 0, fontWeight: bold ? 700 : 500, borderTop: bold ? '1px solid var(--p-border)' : 'none' }}>
      <span className={indent ? 'muted t13' : 't13'} style={accent ? { color: accent } : null}>{label}{lock && <span title={lock} className="subtle" style={{ marginLeft: 6, cursor: 'help', display: 'inline-flex', verticalAlign: 'middle' }}><Icon name="lock" size={10.5} /></span>}{sub && <span className="t11 subtle" style={{ marginLeft: 6 }}>{sub}</span>}</span>
      <div className="row g16 aic">
        <span className="tnum" style={{ color: tone, minWidth: 116, textAlign: 'right' }}>{fV(amount)}</span>
        <span className="t11 subtle tnum" style={{ minWidth: 48, textAlign: 'right' }}>{base ? fPct(amount / base) : ''}</span>
      </div>
    </div>
  );
}

/* ---- thanh hòa vốn (break-even thermometer) ---- */
function FinBepBar({ current, bep, target, max, fmt }) {
  const cap = max || Math.max(current, bep, target || 0) * 1.1;
  const p = (v) => Math.min(100, (v / cap) * 100);
  const reached = current >= bep;
  return (
    <div>
      <div style={{ position: 'relative', height: 30, borderRadius: 8, background: 'var(--p-bg-surface-tertiary)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, width: p(current) + '%', background: reached ? 'linear-gradient(90deg,#0a9e6e,#0e7c4a)' : 'linear-gradient(90deg,#e0a52e,#c4320a)', borderRadius: 8, transition: 'width .4s' }} />
        {bep != null && bep !== Infinity && (
          <div style={{ position: 'absolute', top: -2, bottom: -2, left: p(bep) + '%', width: 2, background: '#1a1a1a' }}>
            <span style={{ position: 'absolute', top: -16, left: '50%', transform: 'translateX(-50%)', fontSize: 9.5, fontWeight: 700, whiteSpace: 'nowrap', color: '#1a1a1a' }}>BEP</span>
          </div>
        )}
        {target != null && target !== current && (
          <div style={{ position: 'absolute', top: 0, bottom: 0, left: p(target) + '%', width: 2, background: 'rgba(0,0,0,0.28)', borderLeft: '2px dashed rgba(0,0,0,0.4)' }} />
        )}
      </div>
      {fmt && <div className="row jcsb t11 subtle mt4"><span>0</span><span className="tnum">{fmt(cap)}</span></div>}
    </div>
  );
}

/* ---- mini bar (so sánh doanh thu vs chi phí theo kỳ) ---- */
function FinGroupedBars({ data, height = 230 }) {
  const w = 660, pad = { l: 46, r: 12, t: 14, b: 30 };
  const max = Math.max(...data.map(d => Math.max(d.revenue, d.cost))) * 1.15 || 1;
  const iw = w - pad.l - pad.r, ih = height - pad.t - pad.b;
  const slot = iw / data.length, bw = Math.min(26, slot * 0.32);
  const y = v => pad.t + ih - (v / max) * ih;
  return (
    <svg viewBox={`0 0 ${w} ${height}`} style={{ width: '100%', height }}>
      {[0, 0.25, 0.5, 0.75, 1].map((t, i) => { const yy = pad.t + ih - t * ih; return <g key={i}><line x1={pad.l} y1={yy} x2={w - pad.r} y2={yy} stroke="#ebebeb" /><text x={pad.l - 8} y={yy + 3} textAnchor="end" fontSize="10" fill="#8a8a8a">{fM(max * t)}</text></g>; })}
      {data.map((d, i) => {
        const cx = pad.l + slot * (i + 0.5);
        return (
          <g key={i}>
            <rect x={cx - bw - 2} y={y(d.revenue)} width={bw} height={pad.t + ih - y(d.revenue)} rx="3" fill="#1f5eff"><title>Doanh thu {fM(d.revenue)}</title></rect>
            <rect x={cx + 2} y={y(d.cost)} width={bw} height={pad.t + ih - y(d.cost)} rx="3" fill="#cdd3dc"><title>Chi phí {fM(d.cost)}</title></rect>
            <text x={cx} y={height - 9} textAnchor="middle" fontSize="10.5" fill="#6b6b6b">{d.l}</text>
            <text x={cx} y={y(Math.max(d.revenue, d.cost)) - 5} textAnchor="middle" fontSize="9.5" fontWeight="700" fill={d.profit >= 0 ? '#0e7c4a' : '#c4320a'}>{(d.profit >= 0 ? '+' : '') + fM(d.profit)}</text>
          </g>
        );
      })}
    </svg>
  );
}

/* ====================== TAB: HỢP NHẤT ====================== */
function FinConsolidated({ onOpenCohort }) {
  const C = AAU.finance.consolidated;
  const cr = C.costRollup;
  const below = AAU.finance.cohorts.filter(c => c.belowBep);
  const costDonut = [
    { l: 'Giảng viên', v: cr.instructor, color: '#7c3aed' },
    { l: 'Quảng cáo', v: cr.ads, color: '#0084ff' },
    { l: 'Mặt bằng lớp', v: cr.venue, color: '#0a9e6e' },
    { l: 'In ấn + ăn uống', v: cr.materials + cr.catering, color: '#d97706' },
    { l: 'Chi phí chung', v: C.overheadTotal, color: '#64748b' },
  ];
  return (
    <div className="col g16">
      <div className="grid gc4">
        <KPI label="Doanh thu kỳ" value={fM(C.revenue)} delta={16} icon="dollar" sub={C.studentCount + ' học viên'} />
        <KPI label="Lãi gộp (sau CP trực tiếp)" value={fM(C.contribution)} sub={'Biên ' + fPct(C.contributionRatio)} icon="chart" />
        <KPI label="Lãi ròng" value={fM(C.net)} delta={11} sub={'Biên ròng ' + fPct(C.netMargin)} icon="checkCircle" />
        <KPI label="Điểm hòa vốn (DT)" value={fM(C.bepRevenue)} sub={'Đã đạt ' + fPct(C.bepProgress, 0) + ' BEP'} icon="target" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.35fr 1fr' }}>
        <Card title="Báo cáo P&L hợp nhất" subtitle={C.term + ' · ' + C.termRange + ' · ' + C.cohortCount + ' khóa'}
          actions={<Button size="sm" icon="download">Xuất Excel</Button>}>
          <FinLine label="DOANH THU" amount={C.revenue} base={C.revenue} bold tone="#0e7c4a" lock="Tự động từ module Ghi danh (số HV × học phí)" />
          <div className="t12 fw7 subtle mt8" style={{ padding: '4px 0', letterSpacing: '.03em' }}>− CHI PHÍ TRỰC TIẾP THEO KHÓA (COGS)</div>
          <FinLine label="Chi phí giảng viên" amount={cr.instructor} base={C.revenue} indent lock="Tự động từ Lớp × phí/buổi (sửa ở Giảng viên)" />
          <FinLine label="Mặt bằng lớp học (1tr/buổi)" amount={cr.venue} base={C.revenue} indent lock="Định mức 1tr × số buổi (sửa ở Định mức)" />
          <FinLine label="Quảng cáo (phân bổ theo khóa)" amount={cr.ads} base={C.revenue} indent lock="Tự động phân bổ từ Marketing Ads" />
          <FinLine label="In ấn tài liệu" amount={cr.materials} base={C.revenue} indent lock="Định mức 180k/HV (sửa ở Định mức)" />
          <FinLine label="Ăn uống, logistics" amount={cr.catering} base={C.revenue} indent lock="Định mức 250k/buổi (sửa ở Định mức)" />
          <FinLine label="= LÃI GỘP" amount={C.contribution} base={C.revenue} bold sub={'biên ' + fPct(C.contributionRatio)} />
          <div className="t12 fw7 subtle mt8" style={{ padding: '4px 0', letterSpacing: '.03em' }}>− CHI PHÍ CHUNG (OPEX · không gắn khóa)</div>
          {C.overhead.map((o, i) => <FinLine key={i} label={o.name} amount={o.amount} base={C.revenue} indent />)}
          <FinLine label="= LỢI NHUẬN TRƯỚC THUẾ (EBIT)" amount={C.ebit} base={C.revenue} bold />
          <FinLine label={'− Thuế TNDN (' + C.taxRate * 100 + '%)'} amount={C.tax} base={C.revenue} indent />
          <FinLine label="= LÃI RÒNG" amount={C.net} base={C.revenue} bold tone="#0e7c4a" accent="#0e7c4a" />
          <div className="row aic g6 t11 subtle mt12" style={{ borderTop: '1px dashed var(--p-border)', paddingTop: 10 }}><Icon name="lock" size={11} /><span>Dòng có khóa = tự động / định mức, sửa ở module nguồn. Chi phí chung nhập tay ở tab <span className="linkish" onClick={() => navigate('/finance/sources')}>Nguồn &amp; Nhập liệu</span>.</span></div>
        </Card>

        <div className="col g16">
          <Card title="Điểm hòa vốn — toàn academy">
            <div className="row jcsb aic mb4">
              <span className="t12 muted">Doanh thu thực tế</span>
              <span className="t15 fw7 tnum sla-ok">{fM(C.revenue)}</span>
            </div>
            <div className="row jcsb aic mb12">
              <span className="t12 muted">Doanh thu hòa vốn</span>
              <span className="t13 fw6 tnum">{fM(C.bepRevenue)}</span>
            </div>
            <FinBepBar current={C.revenue} bep={C.bepRevenue} max={C.revenue * 1.15} fmt={fM} />
            <div className="callout-soft mt16">
              <Icon name="target" size={15} />
              <span>Vượt hòa vốn <b className="sla-ok">{fM(C.revenue - C.bepRevenue)}</b> · cứ thêm 100tr doanh thu → +{fPct(C.contributionRatio, 0)} chảy về lãi.</span>
            </div>
          </Card>

          <Card title="Dự báo cuối kỳ" subtitle="Nếu các lớp đang tuyển lấp đầy chỉ tiêu">
            <div className="row jcsb aic">
              <div><div className="t11 subtle">Doanh thu dự báo</div><div className="t20 fw7 tnum">{fM(C.forecastRevenue)}</div></div>
              <Badge tone="success"><Icon name="arrowUp" size={12} />+{fM(C.forecastRevenue - C.revenue)}</Badge>
            </div>
            <Progress value={C.revenue} max={C.forecastRevenue} color="#0a9e6e" height={8} />
            <div className="t11 subtle mt8">Đã ghi nhận {fPct(C.revenue / C.forecastRevenue, 0)} · phần còn lại phụ thuộc lấp đầy 3 lớp đang tuyển.</div>
          </Card>

          <Card title="Cơ cấu chi phí">
            <div className="row aic g16">
              <Donut data={costDonut} size={150} thickness={26} center={{ v: fM(C.directTotal + C.overheadTotal), l: 'Tổng CP' }} />
              <div className="col g6 f1">
                {costDonut.map((d, i) => (
                  <div key={i} className="row aic jcsb t12">
                    <span className="row aic g6"><span style={{ width: 9, height: 9, borderRadius: 2, background: d.color }} />{d.l}</span>
                    <span className="tnum fw6">{fM(d.v)}</span>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </div>
      </div>

      {below.length > 0 && (
        <div className="mkt-alert" style={{ background: 'var(--p-critical-bg)', color: 'var(--p-critical-text)' }}>
          <Icon name="alert" size={18} />
          <span className="t13"><b>{below.length} lớp dưới điểm hòa vốn.</b> {below.map(c => c.courseCode + ' ' + c.batch).join(', ')} — chưa đủ học viên để bù định phí. Cần đẩy tuyển sinh hoặc gộp lớp.</span>
          <Button size="sm" className="mla" onClick={() => onOpenCohort(below[0])}>Xem lớp</Button>
        </div>
      )}
    </div>
  );
}

/* ====================== TAB: P&L THEO KHÓA ====================== */
function FinCohorts({ onOpenCohort }) {
  const [grp, setGrp] = useState('all');
  const [status, setStatus] = useState('all');
  const [alloc, setAlloc] = useState(false);
  const sm = AAU.finance.statusMeta;
  const con = AAU.finance.consolidated;
  // phân bổ chi phí chung xuống khóa theo % doanh thu
  const allocOf = (c) => Math.round(con.overheadTotal * (c.revenue / con.revenue));
  const netOf = (c) => c.profit - allocOf(c);
  let rows = AAU.finance.cohorts;
  if (grp !== 'all') rows = rows.filter(c => c.group === grp);
  if (status !== 'all') rows = rows.filter(c => c.status === status);

  const tot = {
    revenue: rows.reduce((s, c) => s + c.revenue, 0),
    direct: rows.reduce((s, c) => s + c.direct, 0),
    profit: rows.reduce((s, c) => s + c.profit, 0),
    alloc: rows.reduce((s, c) => s + allocOf(c), 0),
    net: rows.reduce((s, c) => s + netOf(c), 0),
    students: rows.reduce((s, c) => s + c.enrolled, 0),
  };
  const cols = [
    { key: 'courseName', label: 'Khóa', render: c => (
      <div className="row aic g10">
        <span style={{ width: 4, height: 30, borderRadius: 3, background: FIN_GROUP_COLOR[c.group], flexShrink: 0 }} />
        <div><div className="fw6 t13">{c.courseName}</div><div className="t11 subtle">{c.courseCode} · {c.batch} · {c.region} · {c.sessions} buổi</div></div>
      </div>), csv: c => c.courseName + ' ' + c.batch },
    { key: 'status', label: 'Trạng thái', render: c => <Badge tone={sm[c.status].tone}>{sm[c.status].label}</Badge> },
    { key: 'enrolled', label: 'Học viên', num: true, render: c => <div><div className="fw6 tnum">{c.enrolled}<span className="subtle">/{c.target}</span></div><div style={{ width: 64, marginLeft: 'auto', marginTop: 3 }}><Progress value={c.enrolled} max={c.target} height={4} color={c.fill >= 0.8 ? '#0a9e6e' : c.fill < 0.5 ? '#c4320a' : '#d97706'} /></div></div> },
    { key: 'revenue', label: 'Doanh thu', num: true, render: c => <span className="tnum fw6">{fM(c.revenue)}</span> },
    { key: 'direct', label: 'CP trực tiếp', num: true, render: c => <span className="tnum muted">{fM(c.direct)}</span> },
    { key: 'profit', label: 'Lãi gộp', num: true, render: c => <span className={'tnum fw7 ' + (c.profit >= 0 ? 'sla-ok' : 'sla-bad')}>{(c.profit >= 0 ? '+' : '') + fM(c.profit)}<div className="t11 subtle" style={{ fontWeight: 500 }}>{fPct(c.margin, 0)}</div></span> },
    ...(alloc ? [
      { key: 'alloc', label: 'CP chung PB', num: true, render: c => <span className="tnum muted">−{fM(allocOf(c))}</span> },
      { key: 'net', label: 'Lãi ròng khóa', num: true, render: c => { const n = netOf(c); return <span className={'tnum fw7 ' + (n >= 0 ? 'sla-ok' : 'sla-bad')}>{(n >= 0 ? '+' : '') + fM(n)}<div className="t11 subtle" style={{ fontWeight: 500 }}>{fPct(c.revenue ? n / c.revenue : 0, 0)}</div></span>; } },
    ] : [
      { key: 'bepStudents', label: 'Hòa vốn', num: true, render: c => <span className={c.belowBep ? 'sla-bad fw6' : 'muted'}>{c.bepStudents} HV{c.belowBep && <div className="t11">thiếu {c.bepStudents - c.enrolled}</div>}</span> },
      { key: 'roas', label: 'ROAS', num: true, render: c => <span className="tnum">{c.roas.toFixed(1)}×</span> },
    ]),
  ];
  return (
    <div className="col g16">
      <div className="grid gc4">
        <KPI label="Tổng doanh thu" value={fM(tot.revenue)} icon="dollar" sub={rows.length + ' khóa'} />
        <KPI label="Tổng CP trực tiếp" value={fM(tot.direct)} icon="layers" />
        <KPI label="Tổng lãi gộp" value={fM(tot.profit)} icon="chart" sub={'biên ' + fPct(tot.revenue ? tot.profit / tot.revenue : 0)} />
        {alloc
          ? <KPI label="Lãi ròng (sau phân bổ)" value={fM(tot.net)} icon="checkCircle" sub={'biên ' + fPct(tot.revenue ? tot.net / tot.revenue : 0)} />
          : <KPI label="Doanh thu / học viên" value={fM(tot.students ? tot.revenue / tot.students : 0)} icon="users" sub={tot.students + ' HV'} />}
      </div>
      <div className="row aic g12 wrap">
        <PillTabs value={grp} onChange={setGrp} options={[{ value: 'all', label: 'Tất cả nhóm' }, ...AAU.courseGroups.map(g => ({ value: g.id, label: g.label }))]} />
        <div className="row aic g8" style={{ padding: '4px 10px', border: '1px solid var(--p-border)', borderRadius: 999 }}><Switch on={alloc} onChange={setAlloc} /><span className="t12 fw5">Phân bổ chi phí chung</span></div>
        <div className="mla"><Seg value={status} onChange={setStatus} options={[{ value: 'all', label: 'Tất cả' }, { value: 'running', label: 'Đang học' }, { value: 'enrolling', label: 'Đang tuyển' }, { value: 'done', label: 'Đã xong' }]} /></div>
      </div>
      <DataTable key={alloc ? 'alloc' : 'base'} columns={cols} rows={rows} getId={c => c.id} searchKeys={['courseName', 'courseCode', 'batch']}
        onRowClick={c => onOpenCohort(c)} exportName="pnl-theo-khoa" pageSize={10} />
      <div className="callout-soft">
        <Icon name={alloc ? 'layers' : 'bolt'} size={15} />
        <span>{alloc
          ? <>Đang phân bổ chi phí chung ({fM(con.overheadTotal)}/kỳ) xuống từng khóa theo % doanh thu → ra <b>lãi ròng thực</b> của mỗi khóa.</>
          : <>Bấm vào 1 khóa để xem P&L chi tiết + hòa vốn. Bật "Phân bổ chi phí chung" để thấy lãi ròng thực của từng khóa.</>}</span>
      </div>
    </div>
  );
}

/* ====================== TAB: DOANH THU ====================== */
function FinRevenue() {
  const cohorts = [...AAU.finance.cohorts].sort((a, b) => b.revenue - a.revenue);
  const C = AAU.finance.consolidated;
  const byGroup = AAU.finance.byGroup;
  const bySrc = AAU.finance.bySource;
  const maxSrc = Math.max(...bySrc.map(s => s.revenue));
  const barData = cohorts.map(c => ({ l: c.courseCode, v: c.revenue, color: FIN_GROUP_COLOR[c.group] }));
  const avgFill = cohorts.reduce((s, c) => s + c.fill, 0) / cohorts.length;
  return (
    <div className="col g16">
      <div className="grid gc4">
        <KPI label="Doanh thu kỳ" value={fM(C.revenue)} icon="dollar" delta={16} />
        <KPI label="Số học viên" value={C.studentCount} icon="users" />
        <KPI label="Doanh thu / HV" value={fM(C.revenue / C.studentCount)} icon="graduation" />
        <KPI label="Lấp đầy bình quân" value={fPct(avgFill, 0)} icon="target" />
      </div>
      <Card title="Doanh thu theo khóa" subtitle="Mỗi cột = 1 lớp khai giảng (xếp giảm dần)">
        <BarChart data={barData} height={250} fmt={fM} />
        <Legend items={AAU.courseGroups.map(g => ({ l: g.label, color: FIN_GROUP_COLOR[g.id] }))} />
      </Card>
      <div className="grid gc2">
        <Card title="Theo nhóm khóa">
          <div className="row aic g16">
            <Donut data={byGroup.map(g => ({ l: g.label, v: g.revenue, color: FIN_GROUP_COLOR[g.id] }))} size={156} thickness={28} center={{ v: byGroup.length, l: 'nhóm' }} />
            <div className="col g10 f1">
              {byGroup.map(g => (
                <div key={g.id}>
                  <div className="row jcsb t12 mb4"><span className="row aic g6"><span style={{ width: 9, height: 9, borderRadius: 2, background: FIN_GROUP_COLOR[g.id] }} />{g.label}</span><span className="tnum fw6">{fM(g.revenue)}</span></div>
                  <div className="row jcsb t11 subtle"><span>{g.count} khóa · biên {fPct(g.margin, 0)}</span><span className="tnum">{fPct(g.revenue / C.revenue, 0)}</span></div>
                </div>
              ))}
            </div>
          </div>
        </Card>
        <Card title="Theo nguồn acquisition" subtitle="Doanh thu quy về kênh mang lại lead">
          <div className="col g14">
            {bySrc.map(s => (
              <div key={s.id}>
                <div className="row jcsb t12 mb4"><span className="fw5">{s.label}</span><span className="tnum fw6">{fM(s.revenue)} · {fPct(s.revenue / C.revenue, 0)}</span></div>
                <div style={{ height: 12, borderRadius: 6, background: 'var(--p-bg-surface-tertiary)', overflow: 'hidden' }}><div style={{ width: (s.revenue / maxSrc * 100) + '%', height: '100%', background: s.color, borderRadius: 6 }} /></div>
              </div>
            ))}
          </div>
          <div className="callout-soft mt16"><Icon name="megaphone" size={15} /><span>Hơn nửa doanh thu đến từ quảng cáo trả phí → theo dõi CAC/ROAS ở tab "P&L theo khóa".</span></div>
        </Card>
      </div>
      <Card title="Chi tiết doanh thu theo khóa" pad={false}>
        <div className="tbl-wrap"><table className="tbl sum-tbl">
          <thead><tr><th>Khóa</th><th className="num">Học viên</th><th className="num">Học phí/HV</th><th className="num">Doanh thu gộp</th><th className="num">Thực thu</th><th className="num">% tổng</th></tr></thead>
          <tbody>
            {cohorts.map(c => (
              <tr key={c.id}>
                <td><div className="fw6 t13">{c.courseName}</div><div className="t11 subtle">{c.courseCode} · {c.batch}</div></td>
                <td className="num tnum">{c.enrolled}</td>
                <td className="num tnum">{fM(c.price)}</td>
                <td className="num tnum">{fM(c.price * c.enrolled)}</td>
                <td className="num tnum fw6">{fM(c.revenue)}</td>
                <td className="num tnum subtle">{fPct(c.revenue / C.revenue, 0)}</td>
              </tr>
            ))}
            <tr className="sum-total"><td>Tổng cộng</td><td className="num tnum">{C.studentCount}</td><td className="num">—</td><td className="num">—</td><td className="num tnum">{fM(C.revenue)}</td><td className="num tnum">100%</td></tr>
          </tbody>
        </table></div>
      </Card>
    </div>
  );
}

/* ====================== TAB: SO SÁNH ====================== */
function FinCompare() {
  const [dim, setDimRaw] = useState('months');
  const [endOff, setEndOff] = useState(0); // 0 = latest period; negative = look back
  const [open, setOpen] = useState(false);
  const popRef = useRef(null);
  useEffect(() => {
    if (!open) return;
    const h = e => { if (popRef.current && !popRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, [open]);
  const setDim = d => { setDimRaw(d); setEndOff(0); };
  const F = AAU.finance;
  const full = dim === 'weeks' ? F.weeks : dim === 'terms' ? F.terms : F.months;
  const endIdx = Math.min(full.length - 1, Math.max(1, full.length - 1 + endOff));
  const series = full.slice(0, endIdx + 1); // data as of the selected period
  const last = series[series.length - 1], prev = series[series.length - 2];
  const dRev = (last.revenue - prev.revenue) / prev.revenue;
  const dProf = (last.profit - prev.profit) / prev.profit;
  const dimLabel = { weeks: 'tuần', months: 'tháng', terms: 'kỳ' }[dim];
  const cohortsRank = [...F.cohorts].sort((a, b) => b.profit - a.profit);
  const maxAbs = Math.max(...cohortsRank.map(c => Math.abs(c.profit)));
  const atNow = endIdx === full.length - 1;
  return (
    <div className="col g16">
      <div className="row aic g12">
        <Seg value={dim} onChange={setDim} options={[{ value: 'weeks', label: 'Theo tuần' }, { value: 'months', label: 'Theo tháng' }, { value: 'terms', label: 'Theo kỳ' }]} />
        <div className="pnav-step" ref={popRef}>
          <button className="pnav-arrow" title={dimLabel + ' trước'} disabled={endIdx <= 1} onClick={() => setEndOff(o => o - 1)}><Icon name="chevronLeft" size={15} /></button>
          <button className="pnav-cur" onClick={() => setOpen(o => !o)} title="Chọn mốc">
            <Icon name="calendar" size={13} /><span className="pnav-lbl">{last.l}</span><Icon name="chevronDown" size={13} />
          </button>
          <button className="pnav-arrow" title={dimLabel + ' sau'} disabled={atNow} onClick={() => setEndOff(o => Math.min(0, o + 1))}><Icon name="chevronRight" size={15} /></button>
          {open && (
            <div className="pnav-pop">
              <div className="pnav-pop-h">Tra cứu lịch sử · {dimLabel}</div>
              {full.slice(1).reverse().map((s, ri) => { const idx = full.length - 1 - ri; return (
                <button key={s.l} className={'pnav-pop-i' + (idx === endIdx ? ' on' : '')} onClick={() => { setEndOff(idx - (full.length - 1)); setOpen(false); }}>
                  <span>{s.l}</span>
                  {idx === full.length - 1 && <span className="pnav-tag">mới nhất</span>}
                  {idx === endIdx && idx !== full.length - 1 && <Icon name="check" size={13} />}
                </button>
              ); })}
            </div>
          )}
        </div>
        {!atNow && <button className="pnav-reset" onClick={() => setEndOff(0)}><Icon name="refresh" size={12} />Mới nhất</button>}
        <span className="t12 subtle mla">So với {dimLabel} liền trước</span>
      </div>
      <div className="grid gc3">
        <KPI label={'Doanh thu ' + dimLabel + ' này'} value={fM(last.revenue)} delta={Math.round(dRev * 100)} icon="dollar" />
        <KPI label="Lợi nhuận" value={fM(last.profit)} delta={Math.round(dProf * 100)} icon="chart" />
        <KPI label="Biên lợi nhuận" value={fPct(last.profit / last.revenue, 0)} icon="target" sub={'kỳ trước ' + fPct(prev.profit / prev.revenue, 0)} />
      </div>
      <Card title={'Doanh thu vs Chi phí theo ' + dimLabel} subtitle="Cột xanh = doanh thu · xám = chi phí · nhãn = lợi nhuận">
        <FinGroupedBars data={series} />
        <Legend items={[{ l: 'Doanh thu', color: '#1f5eff' }, { l: 'Chi phí', color: '#cdd3dc' }]} />
      </Card>
      <div className="grid gc2">
        <Card title={'Bảng P&L theo ' + dimLabel} pad={false}>
          <div className="tbl-wrap"><table className="tbl">
            <thead><tr><th>{dimLabel === 'tuần' ? 'Tuần' : dimLabel === 'kỳ' ? 'Kỳ' : 'Tháng'}</th><th className="num">Doanh thu</th><th className="num">Chi phí</th><th className="num">Lợi nhuận</th><th className="num">Biên</th></tr></thead>
            <tbody>
              {series.map((s, i) => {
                const d = i > 0 ? (s.profit - series[i - 1].profit) / Math.abs(series[i - 1].profit || 1) : 0;
                return (
                  <tr key={i}>
                    <td className="fw6">{s.l}</td>
                    <td className="num tnum">{fM(s.revenue)}</td>
                    <td className="num tnum muted">{fM(s.cost)}</td>
                    <td className={'num tnum fw6 ' + (s.profit >= 0 ? 'sla-ok' : 'sla-bad')}>{fM(s.profit)} {i > 0 && <span className="t11" style={{ fontWeight: 500 }}>({d >= 0 ? '+' : ''}{Math.round(d * 100)}%)</span>}</td>
                    <td className="num tnum subtle">{fPct(s.profit / s.revenue, 0)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table></div>
        </Card>
        <Card title="Xếp hạng lãi/lỗ theo khóa" subtitle="So sánh hiệu quả từng lớp trong kỳ">
          <div className="col g10">
            {cohortsRank.map(c => (
              <div key={c.id} className="row aic g10">
                <span className="t12 fw5" style={{ width: 130, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.courseCode} {c.batch}</span>
                <div className="f1" style={{ position: 'relative', height: 18, background: 'var(--p-bg-surface-tertiary)', borderRadius: 5 }}>
                  <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: '#b9b9b9' }} />
                  <div style={{ position: 'absolute', top: 2, bottom: 2, borderRadius: 4, background: c.profit >= 0 ? '#0a9e6e' : '#c4320a', left: c.profit >= 0 ? '50%' : (50 - Math.abs(c.profit) / maxAbs * 50) + '%', width: (Math.abs(c.profit) / maxAbs * 50) + '%' }} />
                </div>
                <span className={'t12 tnum fw6 ' + (c.profit >= 0 ? 'sla-ok' : 'sla-bad')} style={{ width: 64, textAlign: 'right' }}>{(c.profit >= 0 ? '+' : '') + fM(c.profit)}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ====================== TAB: NGUỒN DỮ LIỆU ====================== */
const FIN_SOURCES = [
  { line: 'Doanh thu', from: 'Module Ghi danh', detail: 'Số HV × học phí thực thu (sau ưu đãi)', mode: 'auto', icon: 'graduation' },
  { line: 'CP Giảng viên', from: 'Module Giảng viên + Lớp', detail: 'Phí/buổi của GV × số buổi lớp', mode: 'auto', icon: 'user' },
  { line: 'CP Mặt bằng lớp', from: 'Cấu hình định mức', detail: '1.000.000₫ × số buổi (tính trực tiếp vào khóa)', mode: 'config', icon: 'building' },
  { line: 'CP Quảng cáo', from: 'Module Marketing Ads', detail: 'Chi tiêu campaign phân bổ theo khóa', mode: 'auto', icon: 'megaphone' },
  { line: 'CP In ấn / Ăn uống', from: 'Cấu hình định mức', detail: '180k/HV + 250k/buổi', mode: 'config', icon: 'layers' },
  { line: 'Chi phí chung', from: 'Nhập tay (kế toán)', detail: 'Mặt bằng VP, lương, điện nước, AI… — chỉ ở hợp nhất', mode: 'manual', icon: 'building' },
];
const FIN_MODE_META = { auto: { label: 'Tự động', tone: 'success' }, config: { label: 'Định mức', tone: 'info' }, manual: { label: 'Nhập tay', tone: 'warning' } };

function FinSources({ ledger, rates, onAddEntry, onEditEntry, onDeleteEntry, onEditRates }) {
  const R = rates || AAU.finance.RATES;
  return (
    <div className="col g16">
      <Card title="Luồng dữ liệu vào P&L" subtitle="Mỗi dòng trong báo cáo đến từ đâu, cập nhật thế nào">
        <div className="col g8">
          {FIN_SOURCES.map((s, i) => {
            const m = FIN_MODE_META[s.mode];
            return (
              <div key={i} className="row aic g12" style={{ padding: '11px 13px', border: '1px solid var(--p-border)', borderRadius: 10 }}>
                <span className="center" style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--p-bg-surface-secondary)', flexShrink: 0 }}><Icon name={s.icon} size={17} /></span>
                <div style={{ width: 150, flexShrink: 0 }}><div className="t13 fw7">{s.line}</div></div>
                <Icon name="arrowRight" size={15} color="#b9b9b9" />
                <div className="f1"><div className="t13 fw6">{s.from}</div><div className="t11 subtle">{s.detail}</div></div>
                <Badge tone={m.tone}>{m.label}</Badge>
              </div>
            );
          })}
        </div>
        <div className="callout-soft mt12">
          <Icon name="bolt" size={15} />
          <span><b>Tự động</b> = hệ thống tự tổng hợp từ module khác. <b>Định mức</b> = công thức cấu hình sẵn. <b>Nhập tay</b> = kế toán nhập định kỳ.</span>
        </div>
      </Card>

      <div className="grid" style={{ gridTemplateColumns: '1fr 1.7fr' }}>
        <Card title="Định mức cấu hình">
          <div className="col g0">
            <div className="row jcsb aic" style={{ padding: '9px 0', borderBottom: '1px solid var(--p-border-secondary)' }}><span className="t13 muted">Mặt bằng / buổi</span><span className="t13 fw6 tnum">{fV(R.venuePerSession)}</span></div>
            <div className="row jcsb aic" style={{ padding: '9px 0', borderBottom: '1px solid var(--p-border-secondary)' }}><span className="t13 muted">In ấn / học viên</span><span className="t13 fw6 tnum">{fV(R.materialPerStudent)}</span></div>
            <div className="row jcsb aic" style={{ padding: '9px 0', borderBottom: '1px solid var(--p-border-secondary)' }}><span className="t13 muted">Ăn uống / buổi</span><span className="t13 fw6 tnum">{fV(R.cateringPerSession)}</span></div>
            <div className="row jcsb aic" style={{ padding: '9px 0' }}><span className="t13 muted">Thuế TNDN</span><span className="t13 fw6 tnum">{R.taxRate * 100}%</span></div>
          </div>
          <Button size="sm" icon="edit" style={{ marginTop: 14 }} onClick={onEditRates}>Sửa định mức</Button>
        </Card>

        <Card title="Sổ giao dịch" subtitle={ledger.length + ' giao dịch trong kỳ'}
          actions={<Button size="sm" variant="primary" icon="plus" onClick={onAddEntry}>Nhập giao dịch</Button>} pad={false}>
          <div className="tbl-wrap"><table className="tbl">
            <thead><tr><th>Ngày</th><th>Hạng mục</th><th>Khóa</th><th className="num">Số tiền</th><th>Nguồn</th><th style={{ width: 76 }}></th></tr></thead>
            <tbody>
              {ledger.map(t => {
                const co = t.cohort ? AAU.finance.cohortById(t.cohort) : null;
                return (
                  <tr key={t.id}>
                    <td className="tnum t12">{AAU.fmtDate(t.date)}</td>
                    <td><span className="row aic g8"><span className="center" style={{ width: 24, height: 24, borderRadius: 6, background: t.type === 'in' ? 'var(--p-success-bg)' : 'var(--p-critical-bg)', color: t.type === 'in' ? '#0e7c4a' : '#c4320a' }}><Icon name={t.type === 'in' ? 'arrowDown' : 'arrowUp'} size={12} /></span><span><div className="t13 fw5">{t.category}</div><div className="t11 subtle">{t.ref} · {t.method}</div></span></span></td>
                    <td className="t12 muted">{co ? co.courseCode + ' ' + co.batch : '—'}</td>
                    <td className={'num tnum fw6 ' + (t.type === 'in' ? 'sla-ok' : '')}>{(t.type === 'in' ? '+' : '−') + fM(t.amount)}</td>
                    <td><Badge tone={t.src === 'auto' ? 'success' : 'warning'}>{t.src === 'auto' ? 'Tự động' : 'Nhập tay'}</Badge></td>
                    <td>{t.src === 'manual'
                      ? <span className="row aic g4"><IconButton name="edit" size={15} onClick={() => onEditEntry(t)} title="Sửa" /><IconButton name="trash" size={15} onClick={() => onDeleteEntry(t.id)} title="Xóa" /></span>
                      : <span title="Tự động — sửa ở module nguồn" className="subtle" style={{ display: 'inline-flex' }}><Icon name="lock" size={13} /></span>}</td>
                  </tr>
                );
              })}
            </tbody>
          </table></div>
        </Card>
      </div>

      <Card title="Công nợ phải thu" subtitle={'Học phí trả góp chưa thu · tổng ' + fV(AAU.finance.receivableTotal)} pad={false}>
        <div className="tbl-wrap"><table className="tbl">
          <thead><tr><th>Học viên</th><th>Khóa</th><th>Đợt</th><th className="num">Số tiền</th><th>Hạn</th><th>Trạng thái</th></tr></thead>
          <tbody>
            {AAU.finance.receivables.map((r, i) => (
              <tr key={i} className={r.status === 'overdue' ? 'row-warn' : ''}>
                <td className="fw6 t13">{r.who}</td>
                <td className="t12 muted">{r.course}</td>
                <td className="t12">{r.name}</td>
                <td className="num tnum fw6">{fV(r.amount)}</td>
                <td className="tnum t12">{AAU.fmtDate(r.due)}</td>
                <td><Badge tone={r.status === 'overdue' ? 'critical' : 'warning'}>{r.status === 'overdue' ? 'Quá hạn' : 'Đến hạn'}</Badge></td>
              </tr>
            ))}
          </tbody>
        </table></div>
      </Card>
    </div>
  );
}

/* ====================== DRAWER: P&L 1 KHÓA ====================== */
function FinCohortDrawer({ c, onClose }) {
  const sm = AAU.finance.statusMeta[c.status];
  const ins = AAU.instructors.find(i => i.id === c.instr);
  const rows = [
    { l: 'Chi phí giảng viên', v: c.costs.instructor, note: (ins ? ins.name : '') + ' · ' + fV(ins ? ins.feePerSession : 0) + '×' + c.sessions },
    { l: 'Mặt bằng lớp', v: c.costs.venue, note: '1tr × ' + c.sessions + ' buổi' },
    { l: 'Quảng cáo', v: c.costs.ads, note: 'phân bổ từ campaign' },
    { l: 'In ấn tài liệu', v: c.costs.materials, note: '180k × ' + c.enrolled + ' HV' },
    { l: 'Ăn uống, logistics', v: c.costs.catering, note: '250k × ' + c.sessions + ' buổi' },
  ];
  return (
    <Drawer width={520} title={c.courseName + ' · ' + c.batch} onClose={onClose}
      footer={<><Button icon="download">Xuất P&L khóa</Button><Button variant="primary" icon="externalLink" onClick={() => { onClose(); navigate('/classes'); }}>Mở lớp học</Button></>}>
      <div className="row aic g10 mb16">
        <span style={{ width: 5, height: 38, borderRadius: 3, background: FIN_GROUP_COLOR[c.group] }} />
        <div className="f1"><div className="t15 fw7">{c.courseCode} · {c.region}</div><div className="t12 muted">{c.sessions} buổi · học phí {fM(c.price)} · GV {ins ? ins.name : '—'}</div></div>
        <Badge tone={sm.tone}>{sm.label}</Badge>
      </div>

      <div className="grid gc3 mb16">
        <div className="kpi" style={{ padding: '12px 14px' }}><div className="kl">Doanh thu</div><div className="kv tnum" style={{ fontSize: 20 }}>{fM(c.revenue)}</div></div>
        <div className="kpi" style={{ padding: '12px 14px' }}><div className="kl">Lãi gộp</div><div className="kv tnum" style={{ fontSize: 20, color: c.profit >= 0 ? '#0e7c4a' : '#c4320a' }}>{(c.profit >= 0 ? '+' : '') + fM(c.profit)}</div><div className="ksub">biên {fPct(c.margin)}</div></div>
        <div className="kpi" style={{ padding: '12px 14px' }}><div className="kl">ROAS</div><div className="kv tnum" style={{ fontSize: 20 }}>{c.roas.toFixed(1)}×</div><div className="ksub">CAC {fM(c.cacPerStudent)}/HV</div></div>
      </div>

      <Card title="P&L của khóa">
        <FinLine label="Doanh thu" amount={c.revenue} base={c.revenue} bold tone="#0e7c4a" sub={c.enrolled + ' HV × ' + fM(c.unit)} />
        <div className="t12 fw7 subtle mt8" style={{ padding: '4px 0' }}>− CHI PHÍ TRỰC TIẾP</div>
        {rows.map((r, i) => <FinLine key={i} label={r.l} amount={r.v} base={c.revenue} indent sub={r.note} />)}
        <FinLine label="= Lãi gộp khóa" amount={c.profit} base={c.revenue} bold tone={c.profit >= 0 ? '#0e7c4a' : '#c4320a'} />
      </Card>

      <Card title="Điểm hòa vốn" className="mt16">
        <div className="row jcsb t12 mb4"><span className="muted">Đã tuyển</span><span className="fw7 tnum">{c.enrolled} HV</span></div>
        <div className="row jcsb t12 mb12"><span className="muted">Cần để hòa vốn</span><span className="fw6 tnum">{c.bepStudents} HV</span></div>
        <FinBepBar current={c.enrolled} bep={c.bepStudents} target={c.target} max={Math.max(c.target, c.bepStudents, c.enrolled) * 1.1} />
        <div className="row jcsb t11 subtle mt8"><span>0 HV</span><span>chỉ tiêu {c.target} HV</span></div>
        {c.belowBep
          ? <div className="mkt-alert mt12" style={{ background: 'var(--p-critical-bg)', color: 'var(--p-critical-text)' }}><Icon name="alert" size={16} /><span className="t12">Còn thiếu <b>{c.bepStudents - c.enrolled} HV</b> mới hòa vốn. Định phí {fM(c.directFixed)} chưa được bù.</span></div>
          : <div className="mkt-alert mt12" style={{ background: 'var(--p-success-bg)', color: 'var(--p-success-text)' }}><Icon name="checkCircle" size={16} /><span className="t12">Đã vượt hòa vốn <b>{c.enrolled - c.bepStudents} HV</b> · biên an toàn {fPct(c.marginOfSafety, 0)}.</span></div>}
        <div className="callout-soft mt12"><Icon name="target" size={14} /><span className="t12">Công thức: định phí khóa ({fM(c.directFixed)}) ÷ lãi gộp mỗi HV ({fM(c.cmPerStudent)}) = <b>{c.bepStudents} HV</b>.</span></div>
      </Card>
    </Drawer>
  );
}

/* ====================== MODAL: NHẬP GIAO DỊCH ====================== */
function FinEntryModal({ onClose, onSave, initial }) {
  const [type, setType] = useState(initial ? initial.type : 'out');
  const [category, setCategory] = useState(initial ? initial.category : 'Chi phí chung');
  const [cohort, setCohort] = useState(initial ? (initial.cohort || '') : '');
  const [amount, setAmount] = useState(initial ? String(initial.amount) : '');
  const [date, setDate] = useState(initial ? initial.date : '2026-05-20');
  const [method, setMethod] = useState(initial ? initial.method : 'CK');
  const [ref, setRef] = useState(initial ? (initial.ref || '') : '');
  const cats = type === 'in' ? ['Học phí', 'Thu khác'] : ['Giảng viên', 'Mặt bằng', 'Quảng cáo', 'In ấn', 'Điện nước', 'Hệ thống & AI', 'Lương', 'Chi phí chung'];
  return (
    <Modal title={initial ? 'Sửa giao dịch' : 'Nhập giao dịch'} onClose={onClose}
      footer={<><Button onClick={onClose}>Hủy</Button><Button variant="primary" icon="save" disabled={!amount} onClick={() => { onSave({ id: initial ? initial.id : undefined, type, category, cohort, amount: Number(String(amount).replace(/\D/g, '')) || 0, date, method, ref }); onClose(); }}>{initial ? 'Lưu thay đổi' : 'Ghi nhận'}</Button></>}>
      <div className="col g14">
        <Field label="Loại giao dịch"><Seg value={type} onChange={v => { setType(v); setCategory(v === 'in' ? 'Học phí' : 'Chi phí chung'); }} options={[{ value: 'out', label: 'Chi' }, { value: 'in', label: 'Thu' }]} /></Field>
        <div className="grid gc2 g12">
          <Field label="Hạng mục"><Select value={category} onChange={setCategory} options={cats} /></Field>
          <Field label="Gắn khóa (tùy chọn)"><Select value={cohort} onChange={setCohort} options={[{ value: '', label: '— Không gắn khóa —' }, ...AAU.finance.cohorts.map(c => ({ value: c.id, label: c.courseCode + ' ' + c.batch }))]} /></Field>
        </div>
        <Field label="Số tiền (₫)"><Input value={amount} onChange={setAmount} placeholder="vd 12000000" /></Field>
        <div className="grid gc2 g12">
          <Field label="Ngày"><Input value={date} onChange={setDate} type="date" /></Field>
          <Field label="Phương thức"><Select value={method} onChange={setMethod} options={['CK', 'Tiền mặt', 'Momo', 'Thẻ']} /></Field>
        </div>
        <Field label="Ghi chú / chứng từ"><Input value={ref} onChange={setRef} placeholder="vd HĐ #A-1052" /></Field>
        <div className="callout-soft"><Icon name="bolt" size={14} /><span className="t12">Giao dịch nhập tay được đánh dấu <b>Nhập tay</b> và cộng vào P&L hợp nhất theo hạng mục.</span></div>
      </div>
    </Modal>
  );
}

/* ====================== MÀN HÌNH CHÍNH ====================== */
const FIN_TAB_PATH = { consolidated: '/finance', cohorts: '/finance/cohorts', revenue: '/finance/revenue', compare: '/finance/compare', sources: '/finance/sources' };
const FIN_PATH_TAB = { '/finance': 'consolidated', '/finance/cohorts': 'cohorts', '/finance/revenue': 'revenue', '/finance/compare': 'compare', '/finance/sources': 'sources' };

function FinRatesModal({ rates, onClose, onSave }) {
  const [r, setR] = useState({ ...rates });
  const set = (k, v) => setR(p => ({ ...p, [k]: Number(String(v).replace(/[^\d.]/g, '')) || 0 }));
  return (
    <Modal title="Sửa định mức chi phí" onClose={onClose}
      footer={<><Button onClick={onClose}>Hủy</Button><Button variant="primary" icon="save" onClick={() => onSave(r)}>Lưu định mức</Button></>}>
      <div className="col g14">
        <Field label="Mặt bằng / buổi (₫)"><Input value={r.venuePerSession} onChange={v => set('venuePerSession', v)} /></Field>
        <Field label="In ấn / học viên (₫)"><Input value={r.materialPerStudent} onChange={v => set('materialPerStudent', v)} /></Field>
        <Field label="Ăn uống / buổi (₫)"><Input value={r.cateringPerSession} onChange={v => set('cateringPerSession', v)} /></Field>
        <Field label="Thuế TNDN (%)"><Input value={r.taxRate * 100} onChange={v => set('taxRate', (Number(String(v).replace(/[^\d.]/g, '')) || 0) / 100)} /></Field>
        <div className="callout-soft"><Icon name="alert" size={14} /><span className="t12">Định mức là công thức chung cho mọi khóa. Đổi xong, P&L sẽ tính lại ở lần đồng bộ kế tiếp.</span></div>
      </div>
    </Modal>
  );
}

function FinancePnL() {
  const path = (location.hash || '#/finance').slice(1);
  const tab = FIN_PATH_TAB[path] || 'consolidated';
  const [cohort, setCohort] = useState(null);
  const [entry, setEntry] = useState(null);
  const [ratesOpen, setRatesOpen] = useState(false);
  const [rates, setRates] = useState(AAU.finance.RATES);
  const [ledger, setLedger] = useState(AAU.finance.ledger);
  const C = AAU.finance.consolidated;

  function saveEntry(e) {
    setLedger(l => e.id ? l.map(x => x.id === e.id ? { ...x, ...e } : x) : [{ id: 'fm' + Date.now(), ...e, src: 'manual' }, ...l]);
  }
  function deleteEntry(id) { setLedger(l => l.filter(x => x.id !== id)); }

  const tabs = [
    { value: 'consolidated', label: 'Hợp nhất' },
    { value: 'cohorts', label: 'P&L theo khóa' },
    { value: 'revenue', label: 'Doanh thu' },
    { value: 'compare', label: 'So sánh' },
    { value: 'sources', label: 'Nguồn dữ liệu' },
  ];
  const subtitle = {
    consolidated: C.term + ' (' + C.termRange + ') · hợp nhất từ Ghi danh + Lớp + Marketing · ' + C.cohortCount + ' khóa',
    cohorts: 'P&L từng lớp khai giảng · doanh thu − chi phí trực tiếp − (tùy chọn) chi phí chung phân bổ',
    revenue: 'Doanh thu theo khóa, nhóm khóa và nguồn acquisition · ' + C.term,
    compare: 'So sánh doanh thu / chi phí / lợi nhuận theo tuần · tháng · kỳ',
    sources: 'Mỗi dòng P&L lấy từ đâu · sổ giao dịch · công nợ phải thu · định mức',
  }[tab];
  return (
    <div className="page wide">
      <PageHead title="Tài chính — P&L" subtitle={subtitle}
        actions={<>
          <Select value="q2-2026" onChange={() => {}} options={[{ value: 'q2-2026', label: 'Kỳ 2 · 2026' }, { value: 'q1-2026', label: 'Kỳ 1 · 2026' }]} style={{ width: 140 }} />
          <Button icon="plus" onClick={() => setEntry('new')}>Nhập giao dịch</Button>
          <Button variant="primary" icon="download">Xuất Excel</Button>
        </>} />
      <div className="mb16"><Tabs tabs={tabs} value={tab} onChange={v => navigate(FIN_TAB_PATH[v])} /></div>

      {tab === 'consolidated' && <FinConsolidated onOpenCohort={c => setCohort(c)} />}
      {tab === 'cohorts' && <FinCohorts onOpenCohort={c => setCohort(c)} />}
      {tab === 'revenue' && <FinRevenue />}
      {tab === 'compare' && <FinCompare />}
      {tab === 'sources' && <FinSources ledger={ledger} rates={rates} onAddEntry={() => setEntry('new')} onEditEntry={e => setEntry(e)} onDeleteEntry={deleteEntry} onEditRates={() => setRatesOpen(true)} />}

      {cohort && <FinCohortDrawer c={cohort} onClose={() => setCohort(null)} />}
      {entry !== null && <FinEntryModal initial={typeof entry === 'object' ? entry : null} onClose={() => setEntry(null)} onSave={saveEntry} />}
      {ratesOpen && <FinRatesModal rates={rates} onClose={() => setRatesOpen(false)} onSave={r => { setRates(r); setRatesOpen(false); if (window.API && window.API.enabled) window.API.put('/finance/cost-rates', r).catch(() => {}); }} />}
    </div>
  );
}

window.FinancePnL = FinancePnL;