/* AAU CRM — Marketing Hub part 3: Channel Detail, Content Calendar,
   Marketing Settings, Attribution models */

// channel field on leads/conversations uses legacy short ids
const LEGACY_CHAN = { facebook: 'fb', instagram: 'instagram', tiktok: 'tiktok', zalo: 'zalo', email: 'email' };

function ChannelDetail({ channelId }) {
  const c = AAU.mktChannelById(channelId);
  const t = useTimeRange('30d');
  if (!c) return <div className="page"><EmptyState title="Không tìm thấy kênh" action={<Button variant="primary" onClick={() => navigate('/marketing/sources')}>Về Source Performance</Button>} /></div>;
  const fs = AAU.mktFacts.filter(f => f.channel === channelId);
  const spend = fs.reduce((s, f) => s + f.spend, 0);
  const org = fs.reduce((s, f) => s + f.leadsOrg, 0);
  const ads = fs.reduce((s, f) => s + f.leadsAds, 0);
  const won = fs.reduce((s, f) => s + f.won, 0);
  const msgs = fs.reduce((s, f) => s + f.messages, 0);
  const leads = org + ads;
  const fn = AAU.channelFunnel.find(x => x.channel === channelId);
  const posts = AAU.contentPostsX.filter(p => p.channel === channelId);
  const cps = AAU.campaigns.filter(cp => cp.platform === channelId);
  const chLeads = AAU.leads.filter(l => l.channel === (LEGACY_CHAN[channelId] || '___'));

  const kpis = [
    { l: 'Σ Lead', v: leads, sub: org + ' organic · ' + ads + ' ads' },
    { l: 'Spend', v: spend ? AAU.fmtVNDm(spend) : '—' },
    { l: 'CPL (ads)', v: ads ? AAU.fmtVND(spend / ads) : '—', crm: true },
    { l: 'Won (CRM)', v: won, crm: true },
    { l: 'CAC', v: won && spend ? AAU.fmtVNDm(spend / won) : '—', crm: true },
    { l: 'Bài đăng', v: posts.length },
  ];
  return (
    <div className="page wide">
      <PageHead breadcrumb={[{ label: 'Marketing' }, { label: 'Source Performance', href: 1, onClick: () => navigate('/marketing/sources') }, { label: c.label }]}
        title={<span className="row aic g10">{c.label}</span>} subtitle={'Chi tiết hiệu quả kênh ' + c.label + ' — organic, ads, nội dung và lead'}
        actions={<><SyncButton label={'Đồng bộ ' + c.label} since="9 phút trước" /><TimeControl t={t} /></>} />
      <div className="row aic g10 mb16"><SourceBadge src={channelId} size={40} /><div><div className="t17 fw7">{c.label}</div><div className="t12 muted">{c.kind === 'social' ? 'Mạng xã hội' : c.kind === 'messaging' ? 'Nhắn tin' : c.kind === 'search' ? 'Tìm kiếm' : c.kind === 'web' ? 'Website' : 'CRM'} · {c.hasAds ? 'Có chạy ads' : 'Chỉ organic'}</div></div></div>

      <div className="grid 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>{k.sub && <div className="ksub">{k.sub}</div>}</div>
      ))}</div>

      <div className="grid mb16" style={{ gridTemplateColumns: fn ? '1fr 1.5fr' : '1fr' }}>
        {fn && <Card title="Phễu chuyển đổi" subtitle="Impression → Won">
          <Funnel steps={[{ l: 'Impressions', v: fn.impressions, color: '#0084ff' }, { l: 'Clicks', v: fn.clicks, color: '#3b82f6' }, { l: 'Messages', v: fn.messages, color: '#8b5cf6' }, { l: 'Lead', v: fn.leads, color: '#f59e0b' }, { l: 'Won', v: fn.won, color: '#10b981' }]} />
        </Card>}
        <Card title="Campaigns trên kênh" subtitle={cps.length ? 'Bấm để mở Optimizer' : 'Kênh này không chạy ads'}>
          {cps.length ? <table className="tbl"><thead><tr><th>Campaign</th><th className="num">Spend</th><th className="num">Msg</th><th className="num">Lead</th><th className="num">CPL</th><th className="num">ROAS</th></tr></thead>
            <tbody>{cps.map(cp => <tr key={cp.id} className="clickable" onClick={() => navigate('/marketing/ads/' + cp.id)}><td className="fw6">{cp.name}</td><td className="num">{AAU.fmtVNDm(cp.spend)}</td><td className="num">{cp.messages}</td><td className="num">{cp.leads}</td><td className="num">{AAU.fmtVND(cp.spend / cp.leads)}</td><td className="num fw6 sla-ok">{(cp.won * 14900000 / cp.spend).toFixed(1)}×</td></tr>)}</tbody></table>
            : <EmptyState icon="megaphone" title="Không có campaign" desc="Kênh organic — kéo lead qua nội dung." />}
        </Card>
      </div>

      <Card title="Nội dung trên kênh" className="mb16" subtitle="Bài đăng và lead kéo về">
        {posts.length ? <table className="tbl"><thead><tr><th>Bài đăng</th><th>Format</th><th>Đăng lúc</th><th className="num">Reach</th><th className="num">Eng%</th><th className="num">Msg</th><th className="num">Lead</th></tr></thead>
          <tbody>{posts.map(p => <tr key={p.id}><td className="fw6">{p.title}</td><td>{p.format}</td><td className="t12 muted">{AAU.fmtDate(p.date)} {p.time}</td><td className="num">{AAU.fmtNum(p.reach)}</td><td className="num">{p.engagement}%</td><td className="num">{p.messages}</td><td className="num fw6">{p.leads}</td></tr>)}</tbody></table>
          : <EmptyState icon="fileText" title="Chưa có bài đăng trong kỳ" />}
      </Card>

      <Card title="Lead gần đây từ kênh" subtitle="Đồng bộ từ pipeline CRM">
        {chLeads.length ? <table className="tbl"><thead><tr><th>Lead</th><th>Công ty</th><th>Giai đoạn</th><th>Phụ trách</th></tr></thead>
          <tbody>{chLeads.map(l => <tr key={l.id} className="clickable" onClick={() => navigate('/leads/' + l.id)}><td className="fw6">{l.name}</td><td className="muted t12">{l.company}</td><td><StageChip stageId={l.stage} /></td><td className="t12">{AAU.users.find(u => u.id === l.assignedTo)?.name || '—'}</td></tr>)}</tbody></table>
          : <EmptyState icon="inbox" title="Không có lead hội thoại gắn kênh này trong mẫu" desc="Lead organic (Website, YouTube…) gắn ở nguồn, xem Source Performance." />}
      </Card>
    </div>
  );
}

function ContentCalendar() {
  const [chan, setChan] = useState('all');
  const [mo, setMo] = useState(0); // months offset from June 2026
  const cur = new Date(2026, 5 + mo, 1);
  const year = cur.getFullYear(), month = cur.getMonth();
  const isThisMonth = mo === 0;
  const entries = isThisMonth ? AAU.contentCalendar.filter(e => chan === 'all' || e.channel === chan) : [];
  const firstDow = (new Date(year, month, 1).getDay() + 6) % 7; // Monday-start
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const monthLabel = 'Tháng ' + (month + 1) + ', ' + year;
  const cells = [];
  for (let i = 0; i < firstDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  const evByDay = {};
  entries.forEach(e => { (evByDay[e.day] = evByDay[e.day] || []).push(e); });
  const counts = { posted: 0, scheduled: 0, draft: 0 };
  AAU.contentCalendar.forEach(e => counts[e.status]++);
  const statusLabel = { posted: 'Đã đăng', scheduled: 'Đã lên lịch', draft: 'Bản nháp' };
  return (
    <div className="page wide">
      <PageHead title="Lịch nội dung" subtitle="Kế hoạch đăng bài đa kênh — đồng bộ realtime với Facebook & các kênh, bổ sung cho heatmap giờ vàng"
        actions={<>
          <SyncButton label="Đồng bộ Facebook" realtime />
          <Select value={chan} onChange={setChan} style={{ width: 150 }} options={[{ value: 'all', label: 'Mọi kênh' }, ...AAU.mktChannels.filter(c => c.id !== 'email').map(c => ({ value: c.id, label: c.label }))]} />
          <Button variant="primary" icon="plus">Lên lịch bài</Button>
        </>} />
      <div className="grid gc4 mb16">
        <KPI label="Tổng bài kế hoạch" value={AAU.contentCalendar.length} icon="calendar" />
        <KPI label="Đã đăng" value={counts.posted} icon="checkCircle" />
        <KPI label="Đã lên lịch" value={counts.scheduled} icon="clock" />
        <KPI label="Bản nháp" value={counts.draft} icon="fileText" />
      </div>
      <Card title={<span className="row aic g6"><IconButton name="chevronLeft" size={16} onClick={() => setMo(m => m - 1)} title="Tháng trước" /><span style={{ minWidth: 130, textAlign: 'center' }}>{monthLabel}</span><IconButton name="chevronRight" size={16} onClick={() => setMo(m => m + 1)} title="Tháng sau" />{!isThisMonth && <Button size="sm" variant="secondary" onClick={() => setMo(0)}>Về tháng này</Button>}</span>} subtitle="Màu viền = pillar nội dung · trạng thái theo nền chip"
        actions={<div className="row aic g12 t12 muted"><span className="row aic g6"><span className="cal-key posted" />Đã đăng</span><span className="row aic g6"><span className="cal-key scheduled" />Lên lịch</span><span className="row aic g6"><span className="cal-key draft" />Nháp</span></div>}>
        <div className="cal-grid cal-head">{['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'].map(d => <div key={d} className="cal-dow">{d}</div>)}</div>
        <div className="cal-grid">{cells.map((d, i) => (
          <div key={i} className={'cal-cell' + (d === 2 && isThisMonth ? ' cal-today' : '') + (d == null ? ' cal-empty' : '')}>
            {d != null && <><div className="cal-day">{d}{d === 2 && isThisMonth && <span className="cal-now">Hôm nay</span>}</div>
              <div className="col g4">{(evByDay[d] || []).map((e, j) => (
                <div key={j} className={'cal-ev ' + e.status} style={{ borderLeftColor: AAU.calPillarColor[e.pillar] }} title={e.title + ' · ' + statusLabel[e.status] + ' · ' + e.time}>
                  <SourceBadge src={e.channel} size={14} /><span className="cal-ev-t">{e.title}</span>
                </div>
              ))}</div></>}
          </div>
        ))}</div>
      </Card>
    </div>
  );
}

function MarketingSettings() {
  const b = AAU.mktBudget;
  const [f, setF] = useState({
    monthlyBudget: b.monthlyBudget / 1e6, cplTarget: b.cplTarget / 1e3, cplAlert: b.cplAlert / 1e3,
    costMsgTarget: b.costMsgTarget / 1e3, costMsgAlert: b.costMsgAlert / 1e3, roasTarget: b.roasTarget,
  });
  const [saved, setSaved] = useState(false);
  const set = (k, v) => { setF(s => ({ ...s, [k]: v })); setSaved(false); };
  const num = (v) => parseFloat(String(v).replace(',', '.')) || 0;
  function save() {
    AAU.saveMktConfig({
      monthlyBudget: num(f.monthlyBudget) * 1e6, cplTarget: num(f.cplTarget) * 1e3, cplAlert: num(f.cplAlert) * 1e3,
      costMsgTarget: num(f.costMsgTarget) * 1e3, costMsgAlert: num(f.costMsgAlert) * 1e3, roasTarget: num(f.roasTarget),
    });
    setSaved(true);
  }
  const numRow = (k, label, unit, hint) => (
    <div className="row aic jcsb cfg-row" key={k}><div><div className="t13 fw6">{label}</div>{hint && <div className="t12 muted">{hint}</div>}</div>
      <div className="row aic g8"><input className="input" type="number" value={f[k]} onChange={e => set(k, e.target.value)} style={{ width: 130, textAlign: 'right' }} /><span className="t12 muted" style={{ width: 48 }}>{unit}</span></div></div>
  );
  const [mAlerts, setMAlerts] = useState([
    { id: 'cpl', name: 'CPL vượt ngưỡng cảnh báo', note: 'Tô đỏ kênh/khóa + đẩy cảnh báo lên Overview', on: true },
    { id: 'pace', name: 'Pacing ngân sách > 100%', note: 'Báo khi chi vượt nhịp ngân sách tháng', on: true },
    { id: 'roas', name: 'ROAS dưới mục tiêu', note: 'Cảnh báo khi hiệu quả tụt dưới ngưỡng', on: true },
    { id: 'fill', name: 'Lớp sắp ế — cần đẩy ads', note: 'Fill thấp gần ngày khai giảng', on: true },
    { id: 'msg', name: 'Cost/Message vượt ngưỡng', note: 'Chi phí mỗi tin nhắn quá cao', on: false },
  ]);
  return (
    <div className="page">
      <PageHead title="Cấu hình Marketing" subtitle="Ngưỡng cảnh báo & mục tiêu — áp dụng cho toàn bộ dashboard Marketing"
        actions={<>{saved && <span className="row aic g6 t12 sla-ok"><Icon name="checkCircle" size={15} />Đã lưu</span>}<Button variant="primary" icon="save" onClick={save}>Lưu cấu hình</Button></>} />
      <div className="grid gc2">
        <div className="col g16">
          <Card title="Ngân sách & mục tiêu">
            {numRow('monthlyBudget', 'Ngân sách quảng cáo / tháng', 'triệu ₫', 'Dùng cho pacing ở Overview')}
            {numRow('roasTarget', 'Mục tiêu ROAS', '×', 'Ngưỡng hiệu quả tối thiểu')}
          </Card>
          <Card title="Ngưỡng Cost-per-Lead">
            {numRow('cplTarget', 'CPL mục tiêu', 'nghìn ₫')}
            {numRow('cplAlert', 'CPL cảnh báo', 'nghìn ₫', 'CPL vượt mức này sẽ tô đỏ + sinh cảnh báo')}
          </Card>
          <Card title="Ngưỡng Cost-per-Message">
            {numRow('costMsgTarget', 'Cost/Msg mục tiêu', 'nghìn ₫')}
            {numRow('costMsgAlert', 'Cost/Msg cảnh báo', 'nghìn ₫')}
          </Card>
        </div>
        <div className="col g16">
          <Card title="Xem trước cảnh báo" subtitle="Cách ngưỡng hiển thị trên dashboard">
            <div className="col g10">
              <div className="row jcsb cfg-prev"><span className="t13">CPL hiện tại (blended)</span><span className="fw6 tnum">{AAU.fmtVND(AAU.mktSummary('channel').total.cplBlended)}</span></div>
              <div className="row jcsb cfg-prev"><span className="t13">Ngưỡng cảnh báo</span><span className="fw6 tnum" style={{ color: '#c4320a' }}>{AAU.fmtVND(num(f.cplAlert) * 1e3)}</span></div>
              <div className="row jcsb cfg-prev"><span className="t13">Pacing ngân sách</span><span className="fw6 tnum">{Math.round(AAU.mktBudget.spentMTD / (num(f.monthlyBudget) * 1e6) * 100)}%</span></div>
            </div>
          </Card>
          <Card title="Cảnh báo Marketing" subtitle="Tự sinh trên dashboard khi vượt ngưỡng cấu hình ở trên">
            <div className="col g10">{mAlerts.map(r => (
              <div key={r.id} className="row aic jcsb cfg-prev"><div><div className="t13 fw6">{r.name}</div><div className="t12 muted">{r.note}</div></div><Switch on={r.on} onChange={v => setMAlerts(a => a.map(x => x.id === r.id ? { ...x, on: v } : x))} /></div>
            ))}</div>
            <div className="callout-soft mt12"><Icon name="bolt" size={14} /><span>Cảnh báo hiển ở Marketing Overview và gửi in-app cho phụ trách khi bật.</span></div>
          </Card>
        </div>
      </div>
    </div>
  );
}

function AttributionModelsBody() {
  const [model, setModel] = useState('linear');
  const rows = AAU.attributionByModel(model);
  const totRev = rows.reduce((s, r) => s + r.revenue, 0);
  const totLeads = rows.reduce((s, r) => s + r.leads, 0);
  const donut = rows.map(r => ({ l: AAU.mktChannelById(r.channel).label, v: Math.round(r.revenue / 1e6), color: AAU.mktChannelById(r.channel).color }));
  const modelDesc = {
    first: 'Lần chạm ĐẦU — toàn bộ công ghi cho kênh khách tiếp xúc đầu tiên (đo kênh khám phá / top-funnel).',
    last: 'Lần chạm CUỐI — toàn bộ công ghi cho kênh ngay trước khi chốt (đo kênh chốt đơn / bottom-funnel).',
    linear: 'Tuyến tính — chia đều công cho mọi điểm chạm trong hành trình (cân bằng cả phễu).',
  };
  return (
    <>
      <div className="row jcsb aic mb12">
        <div className="t13 muted">Mô hình ghi công chuyển đổi</div>
        <Seg value={model} onChange={setModel} options={[{ value: 'first', label: 'Lần chạm đầu' }, { value: 'last', label: 'Lần chạm cuối' }, { value: 'linear', label: 'Tuyến tính' }]} />
      </div>
      <div className="mkt-alert mb16" style={{ background: 'var(--p-info-bg)' }}><Icon name="sparkles" size={17} color="var(--p-info-text)" /><div className="f1 t13"><b>{({ first: 'Lần chạm đầu', last: 'Lần chạm cuối', linear: 'Tuyến tính' })[model]}:</b> {modelDesc[model]}</div></div>
      <div className="grid mb16" style={{ gridTemplateColumns: '1fr 1.5fr' }}>
        <Card title="Công theo doanh thu" subtitle={'Tổng ' + AAU.fmtVNDm(totRev) + ' · ' + totLeads + ' lead'}>
          <div className="center"><Donut data={donut} center={{ v: AAU.fmtVNDm(totRev), l: 'doanh thu' }} /></div>
          <div className="mt12"><Legend items={donut.map(d => ({ l: d.l, color: d.color }))} /></div>
        </Card>
        <Card title="Phân bổ công theo kênh" subtitle="Lead & doanh thu được ghi công theo mô hình đang chọn">
          <table className="tbl"><thead><tr><th>Kênh</th><th className="num">Lead</th><th className="num">Won</th><th className="num">Doanh thu</th><th>% doanh thu</th></tr></thead>
            <tbody>{rows.map(r => (
              <tr key={r.channel} className="clickable" onClick={() => navigate('/marketing/channel/' + r.channel)}>
                <td><SourceBadge src={r.channel} showLabel /></td>
                <td className="num">{r.leads}</td><td className="num">{r.won}</td>
                <td className="num fw6">{AAU.fmtVNDm(r.revenue)}</td>
                <td style={{ width: 200 }}><div className="row aic g8"><div className="prog f1" style={{ height: 8 }}><span style={{ width: r.pct + '%', background: AAU.mktChannelById(r.channel).color }} /></div><span className="t12 tnum" style={{ width: 38 }}>{r.pct.toFixed(0)}%</span></div></td>
              </tr>
            ))}</tbody></table>
        </Card>
      </div>
      <Card title="Hành trình đa điểm chạm (mẫu)" subtitle="Chuỗi kênh khách đi qua trước khi chốt — cơ sở để chia công">
        <div className="col g8">{AAU.touchPaths.map((p, i) => (
          <div key={i} className="row aic jcsb path-row">
            <div className="row aic g6 wrap">{p.path.map((ch, j) => (
              <React.Fragment key={j}>{j > 0 && <Icon name="arrowRight" size={13} color="#9ca3af" />}<SourceBadge src={ch} size={18} showLabel /></React.Fragment>
            ))}</div>
            <div className="row aic g16 t12 muted"><span>{p.leads} lead</span><span className="fw6" style={{ color: '#0e7c4a' }}>{p.won} won</span><span className="tnum">{AAU.fmtVNDm(p.revenue)}</span></div>
          </div>
        ))}</div>
      </Card>
    </>
  );
}

Object.assign(window, { ChannelDetail, ContentCalendar, MarketingSettings, AttributionModelsBody });