/* AAU CRM — Marketing Hub part 1: Overview (Command Center) */

function MarketingOverview() {
  const t = useTimeRange('30d');
  const [dim, setDim] = useState('course');
  const [metric, setMetric] = useState('spend');
  const { total } = AAU.mktSummary('channel');
  const b = AAU.mktBudget;
  const revenue = total.won * 14900000;
  const roas = revenue / total.spend;
  const pacePlan = Math.round(b.pacingDay / b.daysInMonth * 100);
  const paceReal = Math.round(b.spentMTD / b.monthlyBudget * 100);

  const kpis = [
    { l: 'Tổng chi (Spend)', v: AAU.fmtVNDm(total.spend), d: 12, dd: 'up' },
    { l: 'Σ Lead (org + ads)', v: total.leads, d: 18, dd: 'up', sub: total.leadsOrg + ' organic · ' + total.leadsAds + ' ads' },
    { l: 'CPL trung bình', v: AAU.fmtVND(total.cplBlended), d: 9, dd: 'down', crm: true },
    { l: 'Cost / Message', v: AAU.fmtVND(total.costMsg), d: 5, dd: 'down' },
    { l: 'Doanh thu attributed', v: AAU.fmtVNDm(revenue), d: 15, dd: 'up', crm: true },
    { l: 'ROAS', v: roas.toFixed(1) + '×', d: 7, dd: 'up', crm: true },
  ];
  const mt = AAU.mktTrend;
  const metricCfg = {
    spend: { data: mt.spend, color: '#0084ff', fmt: v => v.toFixed(1) + 'tr', label: 'Chi tiêu (triệu ₫)' },
    leads: { data: mt.leads, color: '#7c3aed', fmt: v => Math.round(v), label: 'Lead' },
    cpl:   { data: mt.cpl, color: '#0a9e6e', fmt: v => v.toFixed(2) + 'tr', label: 'CPL (triệu ₫)' },
    msgs:  { data: mt.msgs, color: '#d97706', fmt: v => Math.round(v), label: 'Messages' },
  }[metric];

  const split = AAU.channelSplit;
  const donut = split.map(s => ({ l: AAU.mktChannelById(s.channel).label, v: s.leads, color: AAU.mktChannelById(s.channel).color }));

  return (
    <div className="page wide">
      <PageHead title="Marketing Overview" subtitle="Bức tranh tổng đa kênh — CPL, CAC, ROAS lấy số thật từ CRM. Chỉ số 🟢 đến từ pipeline, không phải nền tảng ads."
        actions={<><SyncButton label="Đồng bộ tất cả" since="2 phút trước" realtime /><Button icon="download" onClick={() => window.print()}>Xuất báo cáo</Button><TimeControl t={t} /></>} />
      <AlertBanner alerts={AAU.mktAlerts} />

      <div className="grid gc3 mb16" style={{ gridTemplateColumns: 'repeat(6,1fr)' }}>
        {kpis.map((k, i) => (
          <div key={i} className="kpi">
            <div className="kl">{k.crm && <Icon name="kanban" size={12} color="#008060" />}{k.l}</div>
            <div className="kv tnum" style={{ fontSize: 21 }}>{k.v}</div>
            {t.compare && <div className={'kd ' + k.dd}><Icon name={k.dd === 'down' ? 'arrowDown' : 'arrowUp'} size={12} />{k.d}%</div>}
            {k.sub && <div className="ksub">{k.sub}</div>}
          </div>
        ))}
      </div>

      <div className="grid mb16" style={{ gridTemplateColumns: '1.7fr 1fr' }}>
        <Card title="Xu hướng theo thời gian" subtitle={(t.curLabel || '') + (t.compare ? ' · ' + CMP_LABEL[t.cmpMode] : '')}
          actions={<Seg value={metric} onChange={setMetric} options={[{ value: 'spend', label: 'Chi' }, { value: 'leads', label: 'Lead' }, { value: 'cpl', label: 'CPL' }, { value: 'msgs', label: 'Msg' }]} />}>
          <CompareLineChart data={metricCfg.data} color={metricCfg.color} fmt={metricCfg.fmt} labels={mt.labels} showB={t.compare}
            labelA={PERIOD_LABEL[t.period]} labelB={CMP_LABEL[t.cmpMode]} />
        </Card>
        <Card title="Ngân sách tháng 6" subtitle="Pacing vs kế hoạch">
          <div className="row ais jcsb"><div><div className="t28 fw7 tnum">{AAU.fmtVNDm(b.spentMTD)}</div><div className="t12 muted">/ {AAU.fmtVNDm(b.monthlyBudget)} mục tiêu</div></div>
            <Badge tone={paceReal > pacePlan + 5 ? 'critical' : 'success'}>{paceReal > pacePlan ? 'Vượt pace' : 'Đúng pace'}</Badge></div>
          <div className="mt12"><Progress value={b.spentMTD} max={b.monthlyBudget} color={paceReal > pacePlan + 5 ? '#c4320a' : '#0084ff'} height={10} /></div>
          <div className="row jcsb t12 muted mt6"><span>Đã tiêu {paceReal}%</span><span>Kế hoạch theo ngày {pacePlan}%</span></div>
          <div className="col g10 mt16">
            <div className="row jcsb t13"><span className="muted">Mục tiêu CPL</span><span className="fw6 tnum">{AAU.fmtVND(b.cplTarget)}</span></div>
            <div className="row jcsb t13"><span className="muted">Ngưỡng cảnh báo CPL</span><span className="fw6 tnum" style={{ color: '#c4320a' }}>{AAU.fmtVND(b.cplAlert)}</span></div>
            <div className="row jcsb t13"><span className="muted">Mục tiêu ROAS</span><span className="fw6 tnum">{b.roasTarget.toFixed(1)}×</span></div>
          </div>
        </Card>
      </div>

      <Card title="Mix lead theo kênh" subtitle="Tổng lead organic + ads — phân tích sâu từng kênh (won-rate, CAC, phễu) ở Source Performance" className="mb16"
        actions={<Button size="sm" variant="plain" icon="chevronRight" onClick={() => navigate('/marketing/sources')}>Source Performance</Button>}>
        <div className="row aic g24" style={{ justifyContent: 'center', flexWrap: 'wrap' }}>
          <Donut data={donut} center={{ v: total.leads, l: 'lead' }} />
          <div style={{ minWidth: 220 }}><Legend items={donut.map(d => ({ l: d.l, color: d.color }))} /></div>
        </div>
      </Card>

      <Card title="Bảng tổng hợp" subtitle="Ngân sách · Lead · CPL · Cost/Msg · CAC — xoay theo chiều bất kỳ"
        actions={<Seg value={dim} onChange={setDim} options={[{ value: 'course', label: 'Khóa' }, { value: 'channel', label: 'Kênh' }, { value: 'campaign', label: 'Campaign' }, { value: 'class', label: 'Lớp' }]} />}>
        <SummaryTable dim={dim} />
        <div className="t11 subtle mt10">CPL = Spend ÷ lead-ads · Cost/Msg = Spend ÷ messages · CAC = Spend ÷ Won (số Won lấy từ pipeline CRM). Lead organic không tính vào CPL.</div>
      </Card>
    </div>
  );
}

Object.assign(window, { MarketingOverview });