/* ============================================================
   Lập kế hoạch — bottom-up: mỗi khóa có phễu riêng, tổng cộng dồn.
   Mọi số đều chỉnh được · thêm/bớt khóa & hạng mục · lưu theo tháng.
   ============================================================ */

const PLAN_DRAFT_KEY = 'aau.draft.v2';
const uid = (p) => p + Math.random().toString(36).slice(2, 8);
function loadDrafts() { try { return JSON.parse(localStorage.getItem(PLAN_DRAFT_KEY)) || {}; } catch (e) { return {}; } }

// stepper nhỏ +/- cho số có biên
function PlanStepper({ value, onChange, step = 1, min = 0, max = Infinity, fmt = (v) => v, w = 56 }) {
  const set = (v) => onChange(Math.max(min, Math.min(max, Math.round(v * 1000) / 1000)));
  return (
    <div className="row aic g4">
      <button className="plan-step" onClick={() => set(value - step)}><Icon name="minus" size={12} /></button>
      <span className="t13 fw7 tnum center" style={{ minWidth: w }}>{fmt(value)}</span>
      <button className="plan-step" onClick={() => set(value + step)}><Icon name="plus" size={12} /></button>
    </div>
  );
}

// ô nhập số tự do
function NumInput({ value, onChange, w = 78 }) {
  return <input className="num-input tnum" type="number" value={value}
    onChange={e => onChange(e.target.value === '' ? 0 : Number(e.target.value))} style={{ width: w }} />;
}

// danh sách hạng mục edit được (label + value) + thêm/xóa
function EditableList({ items, onChange, accent }) {
  const upd = (id, patch) => onChange(items.map(x => x.id === id ? { ...x, ...patch } : x));
  const add = () => onChange([...items, { id: uid('it'), label: 'Hạng mục mới', value: 0 }]);
  const del = (id) => onChange(items.filter(x => x.id !== id));
  return (
    <div className="col g8">
      {items.map(x => (
        <div key={x.id} className="row aic g8" style={{ padding: '7px 10px', borderRadius: 10, border: '1px solid var(--p-border)' }}>
          <input className="txt-input f1" value={x.label} onChange={e => upd(x.id, { label: e.target.value })} />
          <NumInput value={x.value} onChange={v => upd(x.id, { value: v })} w={64} />
          <button className="plan-step" onClick={() => del(x.id)} title="Xóa"><Icon name="x" size={12} /></button>
        </div>
      ))}
      <button className="add-row" onClick={add}><Icon name="plus" size={13} />Thêm hạng mục</button>
    </div>
  );
}

function PlanScreen() {
  const P = AAU.planning;
  const months = P.planMonths;
  const [month, setMonth] = useState('m6-2026');
  const [archive, setArchive] = useState(() => P.loadArchive());
  const [expanded, setExpanded] = useState({});
  const [savedFlash, setSavedFlash] = useState(false);

  // Bù field thiếu cho kế hoạch cũ (schema trước đợt chuẩn hóa) để không vỡ render.
  function normalizePlan(raw, mk) {
    const base = P.blankPlan(mk);
    if (!raw || typeof raw !== 'object') return base;
    return {
      ...base, ...raw,
      month: raw.month || mk,
      defaults: { ...base.defaults, ...(raw.defaults || {}) },
      cohorts: Array.isArray(raw.cohorts) ? raw.cohorts : base.cohorts,
      mkt: Array.isArray(raw.mkt) ? raw.mkt : base.mkt,
      sales: Array.isArray(raw.sales) ? raw.sales : base.sales,
      ld: Array.isArray(raw.ld) ? raw.ld : base.ld,
    };
  }
  function loadPlanFor(mk) {
    const drafts = loadDrafts();
    if (drafts[mk]) return normalizePlan(drafts[mk], mk);
    const arch = P.loadArchive();
    if (arch[mk]) return normalizePlan({ ...JSON.parse(JSON.stringify(arch[mk])), savedAt: null }, mk);
    return P.blankPlan(mk);
  }
  const [plan, setPlan] = useState(() => loadPlanFor('m6-2026'));

  // đổi tháng -> nạp kế hoạch tương ứng
  const switchMonth = (mk) => { setMonth(mk); setPlan(loadPlanFor(mk)); };

  // tự lưu nháp khi chỉnh
  useEffect(() => {
    const drafts = loadDrafts(); drafts[plan.month] = plan;
    try { localStorage.setItem(PLAN_DRAFT_KEY, JSON.stringify(drafts)); } catch (e) {}
  }, [plan]);

  // ----- mutators -----
  const patchPlan = (patch) => setPlan(p => ({ ...p, ...patch }));
  const patchCohort = (id, patch) => setPlan(p => ({ ...p, cohorts: p.cohorts.map(c => c.id === id ? { ...c, ...patch } : c) }));
  const patchOver = (id, k, v) => setPlan(p => ({ ...p, cohorts: p.cohorts.map(c => c.id === id ? { ...c, over: { ...c.over, [k]: v } } : c) }));
  const resetOver = (id, k) => setPlan(p => ({ ...p, cohorts: p.cohorts.map(c => { if (c.id !== id) return c; const o = { ...c.over }; delete o[k]; return { ...c, over: o }; }) }));
  const removeCohort = (id) => setPlan(p => ({ ...p, cohorts: p.cohorts.filter(c => c.id !== id) }));
  const addCohort = (courseId) => setPlan(p => ({ ...p, cohorts: [...p.cohorts, { id: uid('co'), course: courseId, students: 14, on: true, over: {} }] }));
  const patchDefault = (k, v) => setPlan(p => ({ ...p, defaults: { ...p.defaults, [k]: v } }));

  const t = P.rollup(plan);
  const d = plan.defaults;
  const gap = t.revenue - plan.target;
  const growth = (plan.target - P.lastMonth) / P.lastMonth * 100;
  // tỉ lệ hiệu dụng (weighted) suy từ tổng — dùng cho công thức trực quan
  const pctOf = (n, d) => (d ? Math.round(n / d * 100) : 0) + '%';
  const effCpl = t.paidLeads ? t.budget / t.paidLeads : 0;

  // các khóa chưa được thêm
  const usedCourses = new Set(plan.cohorts.map(c => c.course));
  const addable = AAU.courses.filter(c => c.status === 'active' && c.price && !usedCourses.has(c.id));
  const [addSel, setAddSel] = useState('');

  // per-course funnel
  const rowFunnel = (c) => {
    // Kế hoạch đã lưu (localStorage/backend) có thể trỏ tới khóa đã bị xóa/đổi id
    // sau đợt chuẩn hóa dữ liệu (CLAUDE.md §5). Dùng placeholder để hàng vẫn render
    // được — người dùng thấy & bấm xóa, thay vì cả màn trắng.
    const course = AAU.courseById(c.course) || { id: c.course, name: '(khóa không còn tồn tại)', code: c.course || '—', price: 0, group: 'ops' };
    const r = { ...d, ...(c.over || {}) };
    return { course, r, ...P.cohortFunnel(c.students, r, course.price || 0) };
  };

  const saveMonth = () => { const arch = P.savePlanToMonth(plan); setArchive(arch); setSavedFlash(true); setTimeout(() => setSavedFlash(false), 2200); };
  const recalcTeams = () => setPlan(p => { const np = JSON.parse(JSON.stringify(p)); P.seedTeams(np); return np; });

  const monthLabel = (months.find(m => m.key === month) || {}).label || month;
  const savedMonths = Object.values(archive).sort((a, b) => a.month.localeCompare(b.month));

  return (
    <div className="page wide">
      <PageHead title="Lập kế hoạch" subtitle="Lập phễu cho từng khóa — tổng cộng dồn lên thành KPI tháng. Mọi số đều chỉnh được."
        actions={<>
          <Select value={month} onChange={switchMonth} options={months.map(m => ({ value: m.key, label: m.label }))} style={{ width: 150 }} />
          <Button variant="primary" icon={savedFlash ? 'check' : 'save'} onClick={saveMonth}>{savedFlash ? 'Đã lưu ' + monthLabel : 'Lưu kế hoạch tháng'}</Button>
        </>} />

      {/* ---------- Target hero ---------- */}
      <Card className="mb16" style={{ background: 'linear-gradient(120deg,#0a7d4f 0%,#0e6b8a 100%)', border: 'none', color: '#fff' }}>
        <div className="row jcsb aic wrap" style={{ gap: 20 }}>
          <div>
            <div className="t12 fw6" style={{ opacity: .85, letterSpacing: '.04em', textTransform: 'uppercase' }}>Mục tiêu doanh thu · {monthLabel}</div>
            <div className="row aic g10 mt4">
              <span className="fw7 tnum" style={{ fontSize: 48, lineHeight: 1 }}>{AAU.fmtVNDm(plan.target)}</span>
              <span className="badge" style={{ background: 'rgba(255,255,255,.18)', color: '#fff' }}><Icon name={growth >= 0 ? 'arrowUp' : 'arrowDown'} size={12} />{Math.abs(growth).toFixed(0)}% vs tháng trước</span>
            </div>
            <div className="t12 mt8" style={{ opacity: .82 }}>Kế hoạch hiện cộng được <b>{AAU.fmtVNDm(t.revenue)}</b> từ {t.cohorts} khóa · {gap >= 0 ? 'vượt' : 'còn thiếu'} {AAU.fmtVNDm(Math.abs(gap))}.</div>
          </div>
          <div className="col g10" style={{ minWidth: 300 }}>
            <input type="range" min={200000000} max={1200000000} step={20000000} value={plan.target} onChange={e => patchPlan({ target: Number(e.target.value) })} className="plan-range" />
            <div className="row g6">
              {P.presets.map(v => (
                <button key={v} onClick={() => patchPlan({ target: v })} className="t12 fw6" style={{ flex: 1, padding: '7px 0', borderRadius: 9, cursor: 'pointer', border: '1px solid rgba(255,255,255,.35)', background: plan.target === v ? '#fff' : 'transparent', color: plan.target === v ? '#0a7d4f' : '#fff' }}>{v / 1e6}tr</button>
              ))}
            </div>
          </div>
        </div>
      </Card>

      {/* ---------- Per-course editable plan table ---------- */}
      <Card className="mb16" title="Kế hoạch khai giảng theo khóa" subtitle="Mỗi khóa có phễu riêng (tỉ lệ chốt, CPL…) — chỉnh số, mở ▸ để sửa sâu, thêm/bớt khóa"
        actions={<span className={'badge ' + (gap >= 0 ? 'success' : 'critical')}><span className="dot" />{gap >= 0 ? 'Vượt' : 'Thiếu'} {AAU.fmtVNDm(Math.abs(gap))}</span>}>
        <div style={{ overflowX: 'auto' }}>
          <table className="tbl plan-tbl">
            <thead><tr>
              <th style={{ width: 30 }}></th><th>Khóa</th><th className="num">Học phí</th><th className="num">HV / Won</th>
              <th className="num">Tỉ lệ chốt</th><th className="num">CPL</th><th className="num">Raw lead</th>
              <th className="num">Ngân sách</th><th className="num">Doanh thu</th><th style={{ width: 60 }}></th>
            </tr></thead>
            <tbody>
              {plan.cohorts.map(c => {
                const f = rowFunnel(c);
                const ex = expanded[c.id];
                const ovr = (k) => c.over && c.over[k] != null;
                return (
                  <React.Fragment key={c.id}>
                    <tr style={{ opacity: c.on ? 1 : .45 }}>
                      <td><div style={{ display: 'inline-flex' }}><Checkbox on={c.on} onChange={() => patchCohort(c.id, { on: !c.on })} /></div></td>
                      <td><div className="t13 fw6">{f.course.name}</div><div className="t11 subtle">{f.course.code} · {AAU.courseGroupLabels[f.course.group]}</div></td>
                      <td className="num tnum">{AAU.fmtVNDm(f.course.price)}</td>
                      <td className="num"><div style={{ display: 'inline-flex' }}><PlanStepper value={c.students} onChange={v => patchCohort(c.id, { students: v })} min={0} max={80} w={28} /></div></td>
                      <td className="num"><div style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><PlanStepper value={Math.round(f.r.dealWonRate * 100)} onChange={v => patchOver(c.id, 'dealWonRate', v / 100)} min={0} max={99} w={30} fmt={v => v + '%'} />{ovr('dealWonRate') && <span className="dot-ovr" title="đã chỉnh riêng" />}</div></td>
                      <td className="num"><div style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><NumInput value={f.r.cpl} onChange={v => patchOver(c.id, 'cpl', v)} w={84} />{ovr('cpl') && <span className="dot-ovr" title="đã chỉnh riêng" />}</div></td>
                      <td className="num tnum">{Math.round(f.leads)}</td>
                      <td className="num tnum">{AAU.fmtVNDm(f.budget)}</td>
                      <td className="num tnum fw7">{AAU.fmtVNDm(f.revenue)}</td>
                      <td className="num"><div className="row aic g4 jce">
                        <button className="plan-step" onClick={() => setExpanded(e => ({ ...e, [c.id]: !e[c.id] }))} title="Sửa sâu"><Icon name={ex ? 'chevronDown' : 'chevronRight'} size={13} /></button>
                        <button className="plan-step" onClick={() => removeCohort(c.id)} title="Xóa khóa"><Icon name="x" size={12} /></button>
                      </div></td>
                    </tr>
                    {ex && (
                      <tr className="plan-detail"><td></td><td colSpan={9}>
                        <div className="row aic wrap g20" style={{ padding: '10px 2px 4px' }}>
                          <span className="t11 subtle fw7" style={{ textTransform: 'uppercase', letterSpacing: '.04em' }}>Phễu riêng khóa này</span>
                          {[
                            { k: 'qualDealRate', label: 'Qualified → Deal' },
                            { k: 'leadQualRate', label: 'Raw → Qualified' },
                            { k: 'paidShare', label: '% lead trả phí' },
                          ].map(fld => (
                            <div key={fld.k} className="row aic g8">
                              <span className="t12 muted">{fld.label}</span>
                              <PlanStepper value={Math.round(f.r[fld.k] * 100)} onChange={v => patchOver(c.id, fld.k, v / 100)} min={0} max={99} w={36} fmt={v => v + '%'} />
                              {ovr(fld.k) && <button className="t11 link-btn" onClick={() => resetOver(c.id, fld.k)}>↺ mặc định</button>}
                            </div>
                          ))}
                          <span className="t12 muted">Deal <b className="tnum">{Math.round(f.deals)}</b> · Qualified <b className="tnum">{Math.round(f.qualified)}</b> · Trả phí <b className="tnum">{Math.round(f.paidLeads)}</b> lead</span>
                        </div>
                      </td></tr>
                    )}
                  </React.Fragment>
                );
              })}
            </tbody>
            <tfoot><tr style={{ fontWeight: 700, borderTop: '2px solid var(--p-border)' }}>
              <td></td><td>Tổng {t.cohorts} khóa</td><td></td><td className="num tnum">{Math.round(t.won)} HV</td><td></td><td></td>
              <td className="num tnum">{Math.round(t.leads)}</td><td className="num tnum">{AAU.fmtVNDm(t.budget)}</td>
              <td className="num tnum" style={{ color: gap >= 0 ? '#0a7d4f' : '#c4320a' }}>{AAU.fmtVNDm(t.revenue)}</td><td></td>
            </tr></tfoot>
          </table>
        </div>
        <div className="row aic g8 mt12">
          <Select value={addSel} onChange={setAddSel} options={[{ value: '', label: '+ Chọn khóa để thêm…' }, ...addable.map(c => ({ value: c.id, label: c.code + ' · ' + c.name + ' (' + AAU.fmtVNDm(c.price) + ')' }))]} style={{ minWidth: 320 }} />
          <Button icon="plus" disabled={!addSel} onClick={() => { if (addSel) { addCohort(addSel); setAddSel(''); } }}>Thêm khóa</Button>
        </div>
      </Card>

      {/* ---------- Rollup cascade + defaults ---------- */}
      <div className="grid mb16" style={{ gridTemplateColumns: '1fr 1fr', alignItems: 'start', gap: 16 }}>
        <Card title="Tháp phân rã (tổng hợp)" subtitle={'Cộng dồn từ ' + t.cohorts + ' khóa đang bật'}>
          <div className="col g2">
            {[
              { ic: 'dollar', color: '#0a7d4f', label: 'Doanh thu', v: AAU.fmtVNDm(t.revenue), op: '= Σ (học phí × HV) mỗi khóa' },
              { ic: 'graduation', color: '#1f5199', label: 'Khóa khai giảng', v: t.cohorts, op: '= số khóa đang bật' },
              { ic: 'checkCircle', color: '#0a7d4f', label: 'Học viên / Won', v: Math.round(t.won), op: '= Σ học viên mỗi khóa' },
              { ic: 'layers', color: '#b45309', label: 'Deal cần có', v: Math.round(t.deals), op: '↑ ÷ tỉ lệ chốt ' + pctOf(t.won, t.deals) + ' (Deal → Won)' },
              { ic: 'check', color: '#0e6b8a', label: 'Lead qualified', v: Math.round(t.qualified), op: '↑ ÷ ' + pctOf(t.deals, t.qualified) + ' (Qualified → Deal)' },
              { ic: 'inbox', color: '#6366f1', label: 'Raw lead', v: Math.round(t.leads), op: '↑ ÷ ' + pctOf(t.qualified, t.leads) + ' (Raw → Qualified)' },
              { ic: 'dollar', color: '#c4320a', label: 'Ngân sách Ads', v: AAU.fmtVNDm(t.budget), op: '↑ × ' + pctOf(t.paidLeads, t.leads) + ' trả phí × CPL ' + AAU.fmtVND(effCpl) },
            ].map((s, i) => (
              <React.Fragment key={i}>
                {s.op && (
                  <div className="row aic g6" style={{ padding: '2px 0 2px 18px', color: 'var(--p-text-subdued)' }}>
                    {i > 0 && <Icon name="arrowDown" size={13} />}
                    <span className="t11" style={{ fontStyle: 'italic' }}>{s.op}</span>
                  </div>
                )}
                <div className="row aic g12" style={{ padding: '10px 12px', borderRadius: 11, background: 'var(--p-bg-surface)', border: '1px solid var(--p-border)' }}>
                  <span className="center" style={{ width: 34, height: 34, borderRadius: 9, background: s.color + '18', color: s.color, flexShrink: 0 }}><Icon name={s.ic} size={16} /></span>
                  <span className="t13 fw6 f1">{s.label}</span>
                  <span className="fw7 tnum" style={{ fontSize: 20, color: i === 6 ? '#c4320a' : 'inherit' }}>{s.v}</span>
                </div>
              </React.Fragment>
            ))}
          </div>
          <div className="row g10 mt12">
            <div className="f1 center col g2" style={{ padding: 10, borderRadius: 10, background: 'var(--p-bg-surface-tertiary)' }}><span className="t11 subtle fw6">CAC / HV</span><span className="fw7 tnum" style={{ fontSize: 17 }}>{AAU.fmtVNDm(t.cac)}</span></div>
            <div className="f1 center col g2" style={{ padding: 10, borderRadius: 10, background: 'var(--p-bg-surface-tertiary)' }}><span className="t11 subtle fw6">ROAS</span><span className="fw7 tnum" style={{ fontSize: 17 }}>{t.roas.toFixed(1)}×</span></div>
            <div className="f1 center col g2" style={{ padding: 10, borderRadius: 10, background: 'var(--p-bg-surface-tertiary)' }}><span className="t11 subtle fw6">Bài content</span><span className="fw7 tnum" style={{ fontSize: 17 }}>{Math.round(t.posts)}</span></div>
          </div>
        </Card>

        <Card title="Giả định mặc định" subtitle="Áp cho khóa chưa chỉnh riêng — chỉnh ở đây đổi toàn cục"
          actions={<Button size="sm" icon="refresh" onClick={() => patchPlan({ defaults: { ...AAU.planning.defaults } })}>Reset</Button>}>
          <div className="col g12">
            <div className="row jcsb aic"><span className="t13">CPL kênh trả phí</span><PlanStepper value={d.cpl} onChange={v => patchDefault('cpl', v)} step={25000} min={0} max={1500000} fmt={AAU.fmtVND} w={78} /></div>
            <div style={{ height: 1, background: 'var(--p-border-secondary)' }} />
            <div className="t11 subtle fw7" style={{ textTransform: 'uppercase', letterSpacing: '.04em' }}>Tỉ lệ chuyển đổi phễu</div>
            {[
              { k: 'leadQualRate', label: 'Raw lead → Qualified' },
              { k: 'qualDealRate', label: 'Qualified → Deal' },
              { k: 'dealWonRate', label: 'Deal → Won' },
              { k: 'paidShare', label: 'Tỉ lệ lead trả phí' },
            ].map(f => (
              <div key={f.k} className="row jcsb aic"><span className="t13">{f.label}</span><PlanStepper value={Math.round(d[f.k] * 100)} onChange={v => patchDefault(f.k, v / 100)} step={1} min={0} max={99} fmt={v => v + '%'} w={44} /></div>
            ))}
            <div className="t12 muted" style={{ lineHeight: 1.5 }}>Lead → Won tổng: <b>{(d.leadQualRate * d.qualDealRate * d.dealWonRate * 100).toFixed(1)}%</b> (khóa có chỉnh riêng sẽ khác).</div>
          </div>
        </Card>
      </div>

      {/* ---------- Editable team plans ---------- */}
      <div className="row jcsb aic mb12">
        <span className="t11 subtle fw7" style={{ textTransform: 'uppercase', letterSpacing: '.05em' }}>Kế hoạch hoạt động — chỉnh số & thêm/bớt hạng mục</span>
        <Button size="sm" icon="refresh" onClick={recalcTeams}>Tính lại từ kế hoạch</Button>
      </div>
      <div className="grid gc3" style={{ alignItems: 'start' }}>
        <Card title={<span className="row aic g8"><Icon name="megaphone" size={17} color="#1877f2" />Marketing</span>} subtitle={'Ngân sách ' + AAU.fmtVNDm(t.budget)}>
          <div className="col g8">
            {plan.mkt.map(ch => {
              const budget = Math.round(t.budget * ch.share);
              const leads = ch.cpl ? Math.round(budget / ch.cpl) : 0;
              return (
                <div key={ch.id} className="col g6" style={{ padding: '8px 10px', borderRadius: 10, border: '1px solid var(--p-border)' }}>
                  <div className="row aic g8">
                    <span style={{ width: 9, height: 9, borderRadius: '50%', background: ch.color || '#888', flexShrink: 0 }} />
                    <input className="txt-input f1" value={ch.label} onChange={e => patchPlan({ mkt: plan.mkt.map(x => x.id === ch.id ? { ...x, label: e.target.value } : x) })} />
                    <span className="t13 fw7 tnum">{AAU.fmtVNDm(budget)}</span>
                    <button className="plan-step" onClick={() => patchPlan({ mkt: plan.mkt.filter(x => x.id !== ch.id) })}><Icon name="x" size={12} /></button>
                  </div>
                  <div className="row aic g10 t11 subtle" style={{ paddingLeft: 17 }}>
                    <span className="row aic g4">% NS <PlanStepper value={Math.round(ch.share * 100)} onChange={v => patchPlan({ mkt: plan.mkt.map(x => x.id === ch.id ? { ...x, share: v / 100 } : x) })} min={0} max={100} w={30} fmt={v => v + '%'} /></span>
                    <span className="row aic g4">CPL <NumInput value={ch.cpl} onChange={v => patchPlan({ mkt: plan.mkt.map(x => x.id === ch.id ? { ...x, cpl: v } : x) })} w={74} /></span>
                    <span>→ {leads} lead</span>
                  </div>
                </div>
              );
            })}
            <button className="add-row" onClick={() => patchPlan({ mkt: [...plan.mkt, { id: uid('mk'), label: 'Kênh mới', color: '#888', share: 0.1, cpl: 400000 }] })}><Icon name="plus" size={13} />Thêm kênh</button>
            <div className="t11 subtle">Tổng phân bổ: {Math.round(plan.mkt.reduce((s, x) => s + x.share, 0) * 100)}% {Math.round(plan.mkt.reduce((s, x) => s + x.share, 0) * 100) !== 100 && '⚠ nên = 100%'}</div>
          </div>
        </Card>

        <Card title={<span className="row aic g8"><Icon name="bolt" size={17} color="#b45309" />Sales</span>} subtitle="Hoạt động cần làm">
          <EditableList items={plan.sales} onChange={v => patchPlan({ sales: v })} />
        </Card>

        <Card title={<span className="row aic g8"><Icon name="book" size={17} color="#7c3aed" />L&D / Enablement</span>} subtitle="Deliverable cần chuẩn bị">
          <EditableList items={plan.ld} onChange={v => patchPlan({ ld: v })} />
        </Card>
      </div>

      {/* ---------- Saved archive ---------- */}
      <Card className="mt16" title="Kế hoạch đã lưu" subtitle="Mỗi tháng lưu lại thành 1 bản KPI — Theo dõi KPI sẽ đối chiếu với bản đã lưu">
        {savedMonths.length === 0 ? (
          <div className="t13 muted" style={{ padding: '6px 2px' }}>Chưa có tháng nào được lưu. Bấm <b>Lưu kế hoạch tháng</b> ở trên để chốt bản KPI tháng {monthLabel}.</div>
        ) : (
          <table className="tbl">
            <thead><tr><th>Tháng</th><th className="num">Mục tiêu</th><th className="num">Kế hoạch</th><th className="num">Số khóa</th><th>Lưu lúc</th><th></th></tr></thead>
            <tbody>{savedMonths.map(pl => {
              const tr = P.rollup(pl); const ml = (months.find(m => m.key === pl.month) || {}).label || pl.month;
              return (
                <tr key={pl.month}>
                  <td className="fw6">{ml}{pl.month === month && <span className="badge info" style={{ marginLeft: 8 }}>đang mở</span>}</td>
                  <td className="num tnum">{AAU.fmtVNDm(pl.target)}</td>
                  <td className="num tnum fw6">{AAU.fmtVNDm(tr.revenue)}</td>
                  <td className="num tnum">{tr.cohorts}</td>
                  <td className="t12 muted">{pl.savedAt ? AAU.fmtDate(pl.savedAt) : '—'}</td>
                  <td className="num"><Button size="sm" onClick={() => switchMonth(pl.month)}>Mở</Button></td>
                </tr>
              );
            })}</tbody>
          </table>
        )}
      </Card>
    </div>
  );
}

Object.assign(window, { PlanScreen });