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

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>
  );
}

function DataSources() {
  const t = useTimeRange('30d');
  const cons = AAU.connections;
  const connected = cons.filter(c => c.status === 'connected').length;
  const totLeads = cons.reduce((s, c) => s + c.leads, 0);
  const totPosts = cons.reduce((s, c) => s + c.posts, 0);
  const totSpend = cons.reduce((s, c) => s + c.spend, 0);
  const statusMap = { connected: { tone: 'success', label: 'Đã kết nối' }, warning: { tone: 'warning', label: 'Cần chú ý' }, not_connected: { tone: 'neutral', label: 'Chưa kết nối' } };

  return (
    <div className="page wide">
      <PageHead title="Nguồn dữ liệu & Kết nối" subtitle="Data đang về từ bao nhiêu nguồn — trạng thái đồng bộ, loại dữ liệu, lead & bài đăng 30 ngày"
        actions={<><SyncButton label="Đồng bộ tất cả nguồn" since="2 phút trước" /><TimeControl t={t} /><Button variant="primary" icon="plus">Thêm nguồn</Button></>} />
      <div className="grid gc4 mb16">
        <KPI label="Nguồn đang kết nối" value={connected + ' / ' + cons.length} icon="flow" sub="1 cảnh báo · 1 chưa nối" />
        <KPI label="Σ Lead về (30N)" value={AAU.fmtNum(totLeads)} delta={16} icon="inbox" />
        <KPI label="Σ Bài đăng (30N)" value={AAU.fmtNum(totPosts)} delta={8} icon="fileText" />
        <KPI label="Chi qua nền tảng" value={AAU.fmtVNDm(totSpend)} delta={12} deltaDir="up" icon="dollar" />
      </div>

      <Card title="Tất cả nguồn dữ liệu" subtitle="Mỗi nguồn = 1 kết nối API. Bấm Đồng bộ để kéo dữ liệu mới nhất." className="mb16">
        <table className="tbl"><thead><tr>
          <th>Nguồn</th><th>Tài khoản</th><th>Trạng thái</th><th>Loại dữ liệu</th><th>Sync gần nhất</th>
          <th className="num">Bài</th><th className="num">Lead</th><th className="num">Chi 30N</th><th></th>
        </tr></thead>
        <tbody>{cons.map(c => { const sm = statusMap[c.status]; return (
          <tr key={c.src} className={c.status === 'warning' ? 'row-warn' : c.status === 'not_connected' ? 'row-dim' : ''}>
            <td><SourceBadge src={c.src} showLabel /></td>
            <td className="t12 muted">{c.account}{c.note && <div className="t11" style={{ color: c.status === 'warning' ? '#b06f00' : 'var(--p-text-subdued)' }}>{c.note}</div>}</td>
            <td><Badge tone={sm.tone} dot>{sm.label}</Badge></td>
            <td><div className="row wrap g6">{c.kinds.map(k => <span key={k} className="tag">{k}</span>)}</div></td>
            <td className="t12 muted">{c.lastSync}</td>
            <td className="num">{c.posts || '—'}</td>
            <td className="num fw6">{c.leads || '—'}</td>
            <td className="num">{c.spend ? AAU.fmtVNDm(c.spend) : '—'}</td>
            <td className="num">{c.status === 'not_connected' ? <Button size="sm" variant="primary">Kết nối</Button> : <IconButton name="refresh" title="Đồng bộ ngay" size={15} />}</td>
          </tr>
        ); })}</tbody></table>
      </Card>

      <Card title="Tích hợp công cụ" subtitle="Nền tảng API cấp dữ liệu cho hệ thống">
        <div className="grid gc4">{AAU.integrations.map((it, i) => (
          <div key={i} className="integ-card">
            <div className="row aic jcsb"><span className="center integ-ic"><Icon name={it.icon} size={18} /></span>
              <Badge tone={it.status === 'connected' ? 'success' : 'neutral'} dot>{it.status === 'connected' ? 'Đã nối' : 'Chưa nối'}</Badge></div>
            <div className="t13 fw6 mt10">{it.name}</div>
            <div className="t12 muted">{it.desc}</div>
            {it.status !== 'connected' && <Button size="sm" variant="secondary" style={{ marginTop: 10 }}>Kết nối</Button>}
          </div>
        ))}</div>
      </Card>
    </div>
  );
}

Object.assign(window, { MarketingOverview, DataSources });