// tabs/meta.jsx — Meta Ads (REAL data)
// Sheet has Meta daily totals per country (spend, purch, rev, clicks, imp, CPM, CPC, CTR).
// No placement / creative / audience-level data — those blocks were removed.

function MetaTab({ ctx }) {
  const { range, granularity, country, compare } = ctx;
  const channels = SilsalData.realChannelSeries(country, range, granularity);
  const channelsPrev = SilsalData.realChannelSeriesPrev(country, range, granularity);
  const labels = channels.labels;
  const { cur, prev } = SilsalData.realKPIs(country, range);
  const split = SilsalData.realCountrySplit(range);

  const fmtMoney = (v) => v >= 1000 ? `AED ${(v/1000).toFixed(1)}k` : `AED ${v.toFixed(0)}`;
  const fmtFull = (v) => `AED ${Math.round(v).toLocaleString()}`;
  const pct = (c, p) => p > 0 ? ((c - p) / p) * 100 : 0;

  // Meta-only metrics
  const metaCur = {
    spend: cur.metaSpend, rev: cur.metaRev, purch: cur.metaPurch,
    clicks: cur.metaClicks, imp: cur.metaImp,
    roas: cur.metaSpend > 0 ? cur.metaRev / cur.metaSpend : 0,
    ctr: cur.metaImp > 0 ? (cur.metaClicks / cur.metaImp) * 100 : 0,
    cpc: cur.metaClicks > 0 ? cur.metaSpend / cur.metaClicks : 0,
    cpm: cur.metaImp > 0 ? (cur.metaSpend / cur.metaImp) * 1000 : 0,
    cac: cur.metaPurch > 0 ? cur.metaSpend / cur.metaPurch : 0,
  };
  const metaPrev = {
    spend: prev.metaSpend, rev: prev.metaRev, purch: prev.metaPurch,
    roas: prev.metaSpend > 0 ? prev.metaRev / prev.metaSpend : 0,
    ctr: prev.metaImp > 0 ? (prev.metaClicks / prev.metaImp) * 100 : 0,
    cpc: prev.metaClicks > 0 ? prev.metaSpend / prev.metaClicks : 0,
    cpm: prev.metaImp > 0 ? (prev.metaSpend / prev.metaImp) * 1000 : 0,
    cac: prev.metaPurch > 0 ? prev.metaSpend / prev.metaPurch : 0,
  };

  const kpis = [
    { label: 'Spend',     value: metaCur.spend, prev: metaPrev.spend, delta: pct(metaCur.spend, metaPrev.spend),
      icon: 'Dollar', color: '#5B5BF0', format: (v) => fmtFull(v) },
    { label: 'Revenue',   value: metaCur.rev, prev: metaPrev.rev, delta: pct(metaCur.rev, metaPrev.rev),
      icon: 'Trend', color: '#34B27B', format: (v) => fmtFull(v) },
    { label: 'ROAS',      value: metaCur.roas, prev: metaPrev.roas, delta: pct(metaCur.roas, metaPrev.roas),
      unit: 'x', icon: 'Bolt', color: '#FFB876', format: (v) => v.toFixed(2) },
    { label: 'Purchases', value: metaCur.purch, prev: metaPrev.purch, delta: pct(metaCur.purch, metaPrev.purch),
      icon: 'Cart', color: '#FF8FB1' },
    { label: 'CTR',       value: metaCur.ctr, prev: metaPrev.ctr, delta: pct(metaCur.ctr, metaPrev.ctr),
      unit: '%', icon: 'Click', color: '#87B6FF', format: (v) => v.toFixed(2) },
    { label: 'CPC',       value: metaCur.cpc, prev: metaPrev.cpc, delta: pct(metaCur.cpc, metaPrev.cpc),
      unit: 'AED', icon: 'Dollar', color: '#C39BF5', format: (v) => v.toFixed(2) },
    { label: 'CPM',       value: metaCur.cpm, prev: metaPrev.cpm, delta: pct(metaCur.cpm, metaPrev.cpm),
      unit: 'AED', icon: 'Eye', color: '#6FD2C0', format: (v) => v.toFixed(2) },
    { label: 'CAC',       value: metaCur.cac, prev: metaPrev.cac, delta: pct(metaCur.cac, metaPrev.cac),
      unit: 'AED', icon: 'Users', color: '#F4D35E', format: (v) => v.toFixed(1) },
  ];

  // Build pure Meta series (spend + revenue) by re-using channels output but only meta fields
  const series = [
    { name: 'Spend',   data: channels.metaSpend, color: '#5B5BF0' },
    { name: 'Revenue', data: channels.meta,      color: '#FF8FB1' },
  ];
  const cmp = compare !== 'none' ? [
    { name: 'Spend (prev)',   data: channelsPrev.spend.map((_, i) => channelsPrev.spend[i] - (channelsPrev.spend[i] || 0)).length ? null : null, color: '#5B5BF0' }, // not directly available
  ] : null;
  // Simplify: just show prev meta revenue for compare overlay
  const cmpReal = compare !== 'none' ? [
    { name: 'Revenue (prev)', data: channelsPrev.meta, color: '#FF8FB1' },
  ] : null;

  // Country breakdown (Meta only)
  const countryRows = split.map(s => ({
    name: s.name,
    spend: s.agg.metaSpend, rev: s.agg.metaRev,
    purch: s.agg.metaPurch, clicks: s.agg.metaClicks, imp: s.agg.metaImp,
    roas: s.agg.metaSpend > 0 ? s.agg.metaRev / s.agg.metaSpend : 0,
    ctr: s.agg.metaImp > 0 ? (s.agg.metaClicks / s.agg.metaImp) * 100 : 0,
    cpc: s.agg.metaClicks > 0 ? s.agg.metaSpend / s.agg.metaClicks : 0,
  }));

  return (
    <div className="content">
      <AIBanner insights={[
        `Meta delivered <b>${fmtFull(metaCur.rev)}</b> on <b>${fmtFull(metaCur.spend)}</b> spend → <b class="${metaCur.roas >= 3 ? 'pos' : 'neg'}">${metaCur.roas.toFixed(2)}x ROAS</b>. Purchases: <b>${metaCur.purch.toLocaleString()}</b>. CTR <b>${metaCur.ctr.toFixed(2)}%</b>, CPC <b>AED ${metaCur.cpc.toFixed(2)}</b>.`,
        `Country split: ${countryRows.filter(r => r.spend > 0).map(r => `${r.name} <b>${fmtFull(r.spend)}</b> spend → <b>${r.roas.toFixed(2)}x</b>`).join(' · ')}.`,
        `Note: KSA has zero Meta spend in the dataset. Placement / creative / audience breakdowns are not in the source sheet — connect Meta MCP for that depth.`,
      ]}/>

      <div className="grid grid-4">
        {kpis.slice(0, 4).map((k, i) => <KPI key={i} {...k}/>)}
      </div>
      <div className="grid grid-4">
        {kpis.slice(4).map((k, i) => <KPI key={i} {...k}/>)}
      </div>

      <div className="grid grid-2-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Spend vs Revenue</div>
              <div className="card-sub">{SilsalData.RANGES[range].label} · {granularity}</div>
            </div>
          </div>
          <LineChart series={series} compare={cmpReal} labels={labels} height={260} formatY={fmtMoney}/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Meta spend by country</div>
              <div className="card-sub">{SilsalData.RANGES[range].label}</div>
            </div>
          </div>
          <Donut
            data={countryRows.filter(r => r.spend > 0).map(r => ({ label: r.name, value: r.spend }))}
            colors={['#5B5BF0','#FF8FB1','#6FD2C0']}
            height={180}
            formatV={fmtMoney}
          />
        </div>
      </div>

      <div className="grid grid-1-1">
        <MetricsTable
          title="Meta Ads · headline metrics"
          sub={`${SilsalData.RANGES[range].label} · ${SilsalData.RANGES[range].sub}`}
          rows={[
            { m: 'Spend', cur: metaCur.spend, prev: metaPrev.spend, fmt: fmtFull, inv: true },
            { m: 'Revenue', cur: metaCur.rev, prev: metaPrev.rev, fmt: fmtFull },
            { m: 'ROAS', cur: metaCur.roas, prev: metaPrev.roas, fmt: (v) => `${v.toFixed(2)}x` },
            { m: 'Purchases', cur: metaCur.purch, prev: metaPrev.purch, fmt: (v) => v.toLocaleString() },
            { m: 'Clicks', cur: cur.metaClicks, prev: prev.metaClicks, fmt: (v) => v.toLocaleString() },
            { m: 'Impressions', cur: cur.metaImp, prev: prev.metaImp, fmt: (v) => v.toLocaleString() },
            { m: 'CTR', cur: metaCur.ctr, prev: metaPrev.ctr, fmt: (v) => `${v.toFixed(2)}%` },
            { m: 'CPC', cur: metaCur.cpc, prev: metaPrev.cpc, fmt: (v) => `AED ${v.toFixed(2)}`, inv: true },
            { m: 'CPM', cur: metaCur.cpm, prev: metaPrev.cpm, fmt: (v) => `AED ${v.toFixed(2)}`, inv: true },
            { m: 'CAC', cur: metaCur.cac, prev: metaPrev.cac, fmt: (v) => `AED ${v.toFixed(1)}`, inv: true },
          ]}
        />
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Country breakdown — Meta</div>
              <div className="card-sub">Spend · revenue · ROAS · CTR by country</div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Country</th>
                <th className="num">Spend</th>
                <th className="num">Revenue</th>
                <th className="num">Purch.</th>
                <th className="num">ROAS</th>
                <th className="num">CTR</th>
                <th className="num">CPC</th>
              </tr>
            </thead>
            <tbody>
              {countryRows.map((r, i) => (
                <tr key={i}>
                  <td className="strong">{r.name}</td>
                  <td className="num">{fmtFull(r.spend)}</td>
                  <td className="num">{fmtFull(r.rev)}</td>
                  <td className="num">{r.purch.toLocaleString()}</td>
                  <td className="num strong">{r.roas.toFixed(2)}x</td>
                  <td className="num">{r.ctr.toFixed(2)}%</td>
                  <td className="num">AED {r.cpc.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.MetaTab = MetaTab;