/* ============================================================
   Theo dõi KPI — Plan vs Actual (đối chiếu từng mục của tháp phân rã)
   Đọc kế hoạch đã lưu (localStorage) + snapshot thực tế month-to-date.
   ============================================================ */

// thanh tiến độ: fill = thực tế / kế hoạch cả tháng; vạch = % thời gian đã trôi
function PaceBar({ pct, pace, tone }) {
  const color = tone === 'success' ? '#0a7d4f' : tone === 'warning' ? '#b06f00' : tone === 'critical' ? '#c4320a' : '#0e6b8a';
  return (
    <div style={{ position: 'relative', height: 8, borderRadius: 99, background: 'var(--p-bg-surface-tertiary)', overflow: 'visible' }}>
      <div style={{ position: 'absolute', inset: 0, width: Math.min(100, pct) + '%', borderRadius: 99, background: color }} />
      <div title="Nhịp cần đạt" style={{ position: 'absolute', top: -3, bottom: -3, left: Math.min(100, pace) + '%', width: 2, background: 'var(--p-text)', opacity: .55 }} />
    </div>
  );
}

function TrackRow({ ic, color, label, planFull, paceTarget, actual, fmt, inverse }) {
  const f = fmt || (v => AAU.fmtNum(Math.round(v)));
  const r = paceTarget ? actual / paceTarget : 1;
  let tone;
  if (inverse) tone = r <= 1.05 ? 'success' : r <= 1.2 ? 'warning' : 'critical';
  else tone = r >= 0.98 ? 'success' : r >= 0.88 ? 'warning' : 'critical';
  const deltaPct = paceTarget ? Math.round((r - 1) * 100) : 0;
  const pct = planFull ? actual / planFull * 100 : 0;
  const pace = planFull ? paceTarget / planFull * 100 : 0;
  const good = tone === 'success';
  return (
    <tr>
      <td>
        <div className="row aic g10">
          <span className="center" style={{ width: 34, height: 34, borderRadius: 9, background: color + '18', color, flexShrink: 0 }}><Icon name={ic} size={16} /></span>
          <span className="t13 fw6">{label}</span>
        </div>
      </td>
      <td className="num tnum t13 muted">{f(paceTarget)}</td>
      <td className="num tnum t14 fw7">{f(actual)}</td>
      <td style={{ width: 160 }}><PaceBar pct={pct} pace={pace} tone={tone} /></td>
      <td className="num">
        <span className={'badge ' + tone}>
          <Icon name={inverse ? (good ? 'check' : 'arrowUp') : (deltaPct >= 0 ? 'arrowUp' : 'arrowDown')} size={11} />
          {deltaPct >= 0 ? '+' : ''}{deltaPct}%
        </span>
      </td>
    </tr>
  );
}

function PlanTrackScreen() {
  const P = AAU.planning;
  const act = P.periodActual;
  const months = P.planMonths;
  const archive = P.loadArchive();
  const monthOpts = (() => {
    const keys = new Set([act.month, ...Object.keys(archive)]);
    return [...keys].sort().map(k => ({ value: k, label: (months.find(m => m.key === k) || {}).label || k }));
  })();
  const [month, setMonth] = useState(act.month);
  const savedPlan = archive[month];
  // Bù field thiếu cho kế hoạch cũ (thiếu defaults/cohorts) để rollup + render không vỡ.
  const base = P.blankPlan(month);
  const plan = savedPlan
    ? { ...base, ...savedPlan, defaults: { ...base.defaults, ...(savedPlan.defaults || {}) }, cohorts: Array.isArray(savedPlan.cohorts) ? savedPlan.cohorts : base.cohorts }
    : base;
  const t = P.rollup(plan);
  const a = plan.defaults;
  const monthLabel = (months.find(m => m.key === month) || {}).label || month;

  const paceFrac = act.daysElapsed / act.daysTotal;
  const pace = (v) => v * paceFrac;

  // revenue pacing + dự phóng cuối tháng theo run-rate
  const revPct = t.revenue ? act.revenue / t.revenue * 100 : 0;
  const projected = paceFrac ? act.revenue / paceFrac : 0;
  const projPct = t.revenue ? projected / t.revenue * 100 : 0;
  const onTrack = act.revenue >= pace(t.revenue) * 0.98;
  const paceGapPct = Math.round((act.revenue / (pace(t.revenue) || 1) - 1) * 100);

  // actual CPL vs plan
  const actCpl = act.leads ? act.adSpend / act.leads : 0;

  const rungs = [
    { ic: 'dollar', color: '#0a7d4f', label: 'Doanh thu', planFull: t.revenue, actual: act.revenue, fmt: AAU.fmtVNDm },
    { ic: 'graduation', color: '#1f5199', label: 'Khóa khai giảng', planFull: t.cohorts, actual: act.cohorts, fmt: v => Math.round(v) + ' khóa' },
    { ic: 'checkCircle', color: '#0a7d4f', label: 'Học viên ghi danh (Won)', planFull: t.won, actual: act.won, fmt: v => Math.round(v) + ' HV' },
    { ic: 'layers', color: '#b45309', label: 'Deal đang chạy', planFull: t.deals, actual: act.deals },
    { ic: 'check', color: '#0e6b8a', label: 'Lead qualified', planFull: t.qualified, actual: act.qualified },
    { ic: 'inbox', color: '#6366f1', label: 'Raw lead thu về', planFull: t.leads, actual: act.leads },
    { ic: 'dollar', color: '#c4320a', label: 'Ngân sách Ads đã chi', planFull: t.budget, actual: act.adSpend, fmt: AAU.fmtVNDm, inverse: true },
  ];

  // ----- per-cohort actual -----
  // Kế hoạch đã lưu có thể trỏ tới khóa đã bị xóa/đổi id (CLAUDE.md §5) → courseById
  // trả undefined. Dùng placeholder để màn vẫn render thay vì trắng.
  const cohortRows = (plan.cohorts || []).filter(x => x.on).map(row => {
    const c = AAU.courseById(row.course) || { id: row.course, name: '(khóa không còn tồn tại)', code: row.course || '—', price: 0 };
    const enrolled = (act.cohortActual && act.cohortActual[row.course]) || 0;
    const planRev = (c.price || 0) * row.students;
    const actRev = (c.price || 0) * enrolled;
    return { c, target: row.students, enrolled, planRev, actRev };
  });

  // ----- team actuals -----
  const teamMkt = [
    { t: 'Lead thu về', plan: t.leads, actual: act.leads, fmt: v => AAU.fmtNum(Math.round(v)) },
    { t: 'Ngân sách chi', plan: t.budget, actual: act.adSpend, fmt: AAU.fmtVNDm, inverse: true },
    { t: 'CPL thực tế', plan: a.cpl, actual: actCpl, fmt: AAU.fmtVND, inverse: true },
    { t: 'Bài content', plan: t.posts, actual: act.posts, fmt: v => AAU.fmtNum(Math.round(v)) },
  ];
  const teamSales = [
    { t: 'Won chốt', plan: t.won, actual: act.won, fmt: v => Math.round(v) },
    { t: 'Deal xử lý', plan: t.deals, actual: act.deals, fmt: v => Math.round(v) },
    { t: 'Cuộc gọi / liên hệ', plan: t.calls, actual: act.calls, fmt: v => AAU.fmtNum(Math.round(v)) },
  ];

  const statusOf = (actual, planFull, inverse) => {
    const r = pace(planFull) ? actual / pace(planFull) : 1;
    if (inverse) return r <= 1.05 ? 'success' : r <= 1.2 ? 'warning' : 'critical';
    return r >= 0.98 ? 'success' : r >= 0.88 ? 'warning' : 'critical';
  };

  return (
    <div className="page wide">
      <PageHead title="Theo dõi KPI" subtitle="Đối chiếu thực tế với kế hoạch tháng đã lưu — vạch dọc trên thanh là nhịp cần đạt đến hôm nay."
        actions={<><Select value={month} onChange={setMonth} options={monthOpts} style={{ width: 160 }} /><Button icon="refresh">Đồng bộ</Button></>} />

      {/* ---------- Nguồn dữ liệu (read-model) ---------- */}
      <div className="row aic g10 mb16 wrap" style={{ padding: '10px 14px', borderRadius: 11, border: '1px solid var(--p-border)', background: 'var(--p-bg-surface-secondary)' }}>
        <Icon name="barChart" size={16} color={act._source ? '#0a7d4f' : '#8a6d00'} />
        {act._source ? (
          <>
            <span className="badge success"><span className="dot" />Số liệu thực tế · đọc trực tiếp từ backend</span>
            <span className="t12 muted" style={{ lineHeight: 1.5 }}>
              <b>Đo thật</b> từ <code>mktFacts</code> (doanh thu · won · lead · ads · theo kênh) + ghi danh theo khóa.
              {act._modeled && act._modeled.length ? <> <b>Ước lượng</b> từ hệ số phễu: {act._modeled.join(', ')} (chưa có bảng fact riêng).</> : null}
            </span>
          </>
        ) : (
          <>
            <span className="badge warning"><span className="dot" />Dữ liệu mẫu (MOCK)</span>
            <span className="t12 muted">Chưa kết nối backend — mở với <code>?api=http://localhost:8080</code> để đọc số thực tế.</span>
          </>
        )}
      </div>

      {!savedPlan && (
        <div className="row aic g8 mb16" style={{ padding: '11px 14px', borderRadius: 11, background: 'var(--p-warning-bg)' }}>
          <Icon name="alert" size={16} color="#8a6d00" />
          <span className="t12" style={{ color: '#5e4200' }}>Chưa có kế hoạch đã lưu cho {monthLabel} — đang đối chiếu với <b>kế hoạch mặc định</b>. Sang <b>Lập kế hoạch</b> để chốt &amp; lưu bản KPI tháng này.</span>
        </div>
      )}

      {/* ---------- Pacing hero ---------- */}
      <Card className="mb16">
        <div className="row jcsb aic wrap" style={{ gap: 24 }}>
          <div style={{ minWidth: 260 }}>
            <div className="t12 subtle fw6" style={{ textTransform: 'uppercase', letterSpacing: '.04em' }}>Doanh thu thực tế · {act.monthLabel}</div>
            <div className="row aic g10 mt4">
              <span className="fw7 tnum" style={{ fontSize: 40, lineHeight: 1, color: '#0a7d4f' }}>{AAU.fmtVNDm(act.revenue)}</span>
              <span className="t15 muted fw6">/ {AAU.fmtVNDm(t.revenue)}</span>
            </div>
            <div className="row aic g8 mt8">
              <span className={'badge ' + (onTrack ? 'success' : 'critical')}><span className="dot" />{onTrack ? 'Đúng nhịp' : 'Chậm nhịp ' + Math.abs(paceGapPct) + '%'}</span>
              <span className="t12 muted">Ngày {act.daysElapsed}/{act.daysTotal} · đã trôi {Math.round(paceFrac * 100)}% thời gian</span>
            </div>
          </div>
          <div className="f1" style={{ minWidth: 280 }}>
            <div className="row jcsb t12 muted mb6"><span>Tiến độ đạt mục tiêu</span><span className="fw7" style={{ color: '#0a7d4f' }}>{Math.round(revPct)}%</span></div>
            <PaceBar pct={revPct} pace={paceFrac * 100} tone={onTrack ? 'success' : 'critical'} />
            <div className="row jcsb t11 subtle mt6"><span>Vạch dọc = nhịp cần đạt hôm nay ({Math.round(paceFrac * 100)}%)</span></div>
          </div>
          <div className="center col g2" style={{ minWidth: 150, padding: '4px 16px', borderLeft: '1px solid var(--p-border-secondary)' }}>
            <span className="t11 subtle fw6">Dự phóng cuối tháng</span>
            <span className="fw7 tnum" style={{ fontSize: 26, color: projPct >= 100 ? '#0a7d4f' : '#c4320a' }}>{AAU.fmtVNDm(projected)}</span>
            <span className={'badge ' + (projPct >= 100 ? 'success' : 'warning')}>{Math.round(projPct)}% mục tiêu</span>
          </div>
        </div>
      </Card>

      {/* ---------- Cascade comparison ---------- */}
      <Card className="mb16" title="Đối chiếu phễu: Kế hoạch vs Thực tế" subtitle="Mỗi mục so với nhịp cần đạt đến hôm nay">
        <table className="tbl">
          <thead><tr><th>Chỉ số</th><th className="num">Cần đến nay</th><th className="num">Thực tế</th><th>Tiến độ tháng</th><th className="num">Δ vs nhịp</th></tr></thead>
          <tbody>
            {rungs.map((r, i) => <TrackRow key={i} {...r} paceTarget={pace(r.planFull)} />)}
          </tbody>
        </table>
        <div className="row aic g8 mt12" style={{ padding: '10px 12px', borderRadius: 10, background: 'var(--p-warning-bg)' }}>
          <Icon name="alert" size={16} color="#8a6d00" />
          <span className="t12" style={{ color: '#5e4200' }}><b>Cảnh báo:</b> chi ads đã vượt nhịp ({Math.round(act.adSpend / (pace(t.budget) || 1) * 100)}%) nhưng lead lại hụt → CPL thực {AAU.fmtVND(actCpl)} cao hơn kế hoạch {AAU.fmtVND(a.cpl)}. Cần tối ưu campaign hoặc dồn ngân sách sang kênh rẻ hơn.</span>
        </div>
      </Card>

      {/* ---------- Per-cohort actual ---------- */}
      <Card className="mb16" title="Đối chiếu theo khóa" subtitle="Ghi danh thực tế vs target từng khóa khai giảng">
        <table className="tbl">
          <thead><tr><th>Khóa</th><th className="num">Target HV</th><th className="num">Đã ghi danh</th><th>Fill</th><th className="num">DT kế hoạch</th><th className="num">DT thực tế</th></tr></thead>
          <tbody>
            {cohortRows.map((r, i) => {
              const fill = r.target ? r.enrolled / r.target * 100 : 0;
              const tone = fill >= 80 ? 'success' : fill >= 55 ? 'warning' : 'critical';
              return (
                <tr key={i}>
                  <td><div className="t13 fw6">{r.c.name}</div><div className="t11 subtle">{r.c.code}</div></td>
                  <td className="num tnum">{r.target}</td>
                  <td className="num tnum fw7">{r.enrolled}</td>
                  <td style={{ width: 150 }}><div className="row aic g8"><div className="f1"><PaceBar pct={fill} pace={paceFrac * 100} tone={tone} /></div><span className="t12 fw6 tnum" style={{ minWidth: 34 }}>{Math.round(fill)}%</span></div></td>
                  <td className="num tnum muted">{AAU.fmtVNDm(r.planRev)}</td>
                  <td className="num tnum fw6">{AAU.fmtVNDm(r.actRev)}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>

      {/* ---------- Team comparison ---------- */}
      <div className="grid gc3" style={{ alignItems: 'start' }}>
        {[
          { title: 'Marketing', ic: 'megaphone', color: '#1877f2', rows: teamMkt },
          { title: 'Sales', ic: 'bolt', color: '#b45309', rows: teamSales },
          { title: 'L&D / Enablement', ic: 'book', color: '#7c3aed', rows: [
            { t: 'Deliverable hoàn thành', plan: cohortRows.length * 2 + 2, actual: act.ldDone, fmt: v => Math.round(v) },
          ] },
        ].map((team, ti) => (
          <Card key={ti} title={<span className="row aic g8"><Icon name={team.ic} size={17} color={team.color} />{team.title}</span>}>
            <div className="col g8">
              {team.rows.map((x, i) => {
                const tone = statusOf(x.actual, x.plan, x.inverse);
                const f = x.fmt || (v => AAU.fmtNum(Math.round(v)));
                const pctv = x.plan ? Math.min(100, x.actual / x.plan * 100) : 0;
                return (
                  <div key={i} style={{ padding: '9px 11px', borderRadius: 10, border: '1px solid var(--p-border)' }}>
                    <div className="row jcsb aic mb6">
                      <span className="t13 fw6">{x.t}</span>
                      <span className="t13 tnum"><span className="fw7">{f(x.actual)}</span> <span className="muted t12">/ {f(x.plan)}</span></span>
                    </div>
                    <PaceBar pct={pctv} pace={paceFrac * 100} tone={tone} />
                  </div>
                );
              })}
              {team.title === 'L&D / Enablement' && <div className="t12 muted" style={{ lineHeight: 1.5 }}>Còn {Math.max(0, (cohortRows.length * 2 + 2) - act.ldDone)} tài liệu/script chưa hoàn tất cho các khóa sắp khai giảng.</div>}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { PlanTrackScreen });