// tabs/overview.jsx — Thrsty Overview (Meta Ads, all-campaign rollup)

function OverviewTab({ ctx }) {
  const { range, granularity, campaign, compare, customStart, customEnd } = ctx;
  const series      = ThrstyData.realSeries(campaign, range, granularity, customStart, customEnd);
  const seriesPrev  = ThrstyData.realSeriesPrev(campaign, range, granularity, customStart, customEnd);
  const labels      = series.labels;
  const { cur, prev } = ThrstyData.realKPIs(campaign, range, customStart, customEnd);
  const split       = ThrstyData.realCampaignSplit(range, customStart, customEnd);

  const ccy  = ThrstyData.RAW_META()?.currencySymbol || '₹';
  const fmtMoney = (v) => v >= 1000 ? `${ccy}${(v/1000).toFixed(v >= 10000 ? 0 : 1)}k` : `${ccy}${v.toFixed(0)}`;
  const fmtFull  = (v) => `${ccy}${Math.round(v).toLocaleString('en-IN')}`;
  const pct = (c, p) => p > 0 ? ((c - p) / p) * 100 : 0;

  const kpis = [
    { label: 'Spend',            value: cur.spend,       prev: prev.spend,       delta: pct(cur.spend, prev.spend),
      icon: 'Dollar', color: '#5B5BF0', format: fmtFull,
      sparkData: ThrstyData.realSparkline(campaign, 'spend', 14) },
    { label: 'Impressions',      value: cur.impressions, prev: prev.impressions, delta: pct(cur.impressions, prev.impressions),
      icon: 'Eye',    color: '#6FD2C0', format: (v) => v.toLocaleString('en-IN'),
      sparkData: ThrstyData.realSparkline(campaign, 'impressions', 14) },
    { label: 'Reach',            value: cur.reach,       prev: prev.reach,       delta: pct(cur.reach, prev.reach),
      icon: 'Users',  color: '#9B7CFF', format: (v) => v.toLocaleString('en-IN'),
      sparkData: ThrstyData.realSparkline(campaign, 'reach', 14) },
    { label: 'Link Clicks',      value: cur.linkClicks,  prev: prev.linkClicks,  delta: pct(cur.linkClicks, prev.linkClicks),
      icon: 'Click',  color: '#87B6FF', format: (v) => v.toLocaleString('en-IN'),
      sparkData: ThrstyData.realSparkline(campaign, 'linkClicks', 14) },
    { label: 'Landing Page Views', value: cur.lpvs,      prev: prev.lpvs,        delta: pct(cur.lpvs, prev.lpvs),
      icon: 'ArrowUpRight', color: '#34B27B', format: (v) => v.toLocaleString('en-IN'),
      sparkData: ThrstyData.realSparkline(campaign, 'lpvs', 14) },
    { label: 'CPC',              value: cur.cpc,         prev: prev.cpc,         delta: pct(cur.cpc, prev.cpc),
      icon: 'Dollar', color: '#FFB876', format: (v) => `${ccy}${v.toFixed(2)}`,
      sparkData: ThrstyData.realSparkline(campaign, 'cpc', 14) },
    { label: 'CTR',              value: cur.ctr,         prev: prev.ctr,         delta: pct(cur.ctr, prev.ctr),
      unit: '%', icon: 'Click', color: '#C39BF5', format: (v) => v.toFixed(2),
      sparkData: ThrstyData.realSparkline(campaign, 'ctr', 14) },
    { label: 'Video Views',      value: cur.videoViews,  prev: prev.videoViews,  delta: pct(cur.videoViews, prev.videoViews),
      icon: 'Pulse',  color: '#FF8FB1', format: (v) => v.toLocaleString('en-IN'),
      sparkData: ThrstyData.realSparkline(campaign, 'videoViews', 14) },
  ];

  const lineSeries = [
    { name: 'Spend',       data: series.spend,      color: '#5B5BF0' },
    { name: 'Link Clicks', data: series.linkClicks, color: '#FF8FB1' },
  ];
  const cmpSeries = compare !== 'none' ? [
    { name: 'Spend (prev)',       data: seriesPrev.spend,      color: '#5B5BF0' },
    { name: 'Link Clicks (prev)', data: seriesPrev.linkClicks, color: '#FF8FB1' },
  ] : null;

  // Donut by spend share per campaign
  const donutColors = ['#5B5BF0','#FF8FB1','#6FD2C0','#FFB876','#9B7CFF','#34B27B'];
  const donutData = split.map(s => ({ label: s.name.replace(/^LBLU_/,''), value: Math.round(s.agg.spend) })).filter(d => d.value > 0);

  const totalSpend = split.reduce((a, s) => a + s.agg.spend, 0) || 1;

  return (
    <div className="content">
      <AIBanner insights={[
        `Spent <b>${fmtFull(cur.spend)}</b> across <b>${split.length}</b> campaigns. Generated <b>${cur.impressions.toLocaleString('en-IN')}</b> impressions, <b>${cur.linkClicks.toLocaleString('en-IN')}</b> link clicks (CPC <b>${ccy}${cur.cpc.toFixed(2)}</b>), and <b>${cur.lpvs.toLocaleString('en-IN')}</b> landing page views (Cost/LPV <b>${ccy}${cur.costPerLpv.toFixed(2)}</b>).`,
        `Top campaign by spend: <b>${(split[0]?.name||'—').replace(/^LBLU_/,'')}</b> at <b>${fmtFull(split[0]?.agg.spend||0)}</b> (${(((split[0]?.agg.spend||0)/totalSpend)*100).toFixed(0)}% of total). Engagement: <b>${cur.postEng.toLocaleString('en-IN')}</b> post engagements, <b>${cur.videoViews.toLocaleString('en-IN')}</b> video views.`,
        `Reach <b>${cur.reach.toLocaleString('en-IN')}</b> at frequency <b>${cur.frequency.toFixed(2)}x</b>. ${cur.frequency > 2 ? 'Frequency is high — refresh creative.' : 'Frequency healthy.'}`,
      ]}/>

      <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 class="card-head-info">
              <div className="card-title">Spend & Link Clicks</div>
              <div className="card-sub">{ThrstyData.RANGES[range].label} · {granularity}</div>
            </div>
          </div>
          <LineChart series={lineSeries} compare={cmpSeries} labels={labels} height={260} formatY={fmtMoney}/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Spend by campaign</div>
              <div className="card-sub">Share of total ad spend</div>
            </div>
          </div>
          <Donut data={donutData} colors={donutColors} height={180} formatV={fmtMoney}/>
        </div>
      </div>

      <div className="grid grid-1-1">
        <MetricsTable
          title="Headline metrics"
          sub={`${ThrstyData.RANGES[range].label} · ${ThrstyData.RANGES[range].sub}`}
          rows={[
            { m: 'Spend',              cur: cur.spend,       prev: prev.spend,       fmt: fmtFull, inv: true },
            { m: 'Impressions',        cur: cur.impressions, prev: prev.impressions, fmt: (v) => v.toLocaleString('en-IN') },
            { m: 'Reach',              cur: cur.reach,       prev: prev.reach,       fmt: (v) => v.toLocaleString('en-IN') },
            { m: 'Frequency',          cur: cur.frequency,   prev: prev.frequency,   fmt: (v) => `${v.toFixed(2)}x`, inv: true },
            { m: 'Link Clicks',        cur: cur.linkClicks,  prev: prev.linkClicks,  fmt: (v) => v.toLocaleString('en-IN') },
            { m: 'Landing Page Views', cur: cur.lpvs,        prev: prev.lpvs,        fmt: (v) => v.toLocaleString('en-IN') },
            { m: 'Cost / LPV',         cur: cur.costPerLpv,  prev: prev.costPerLpv,  fmt: (v) => `${ccy}${v.toFixed(2)}`, inv: true },
            { m: 'CPC (link)',         cur: cur.cpc,         prev: prev.cpc,         fmt: (v) => `${ccy}${v.toFixed(2)}`, inv: true },
            { m: 'CTR',                cur: cur.ctr,         prev: prev.ctr,         fmt: (v) => `${v.toFixed(2)}%` },
            { m: 'CPM',                cur: cur.cpm,         prev: prev.cpm,         fmt: (v) => `${ccy}${v.toFixed(2)}`, inv: true },
            { m: 'Video Views',        cur: cur.videoViews,  prev: prev.videoViews,  fmt: (v) => v.toLocaleString('en-IN') },
            { m: 'Post Engagement',    cur: cur.postEng,     prev: prev.postEng,     fmt: (v) => v.toLocaleString('en-IN') },
          ]}
        />
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Campaign rollup</div>
              <div className="card-sub">Spend · clicks · LPVs · CPC by campaign</div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Campaign</th>
                <th className="num">Spend</th>
                <th className="num">Imp.</th>
                <th className="num">Link Clicks</th>
                <th className="num">LPVs</th>
                <th className="num">CPC</th>
                <th className="num">CTR</th>
              </tr>
            </thead>
            <tbody>
              {split.map((s, i) => (
                <tr key={i}>
                  <td className="strong">{s.name.replace(/^LBLU_/,'')}</td>
                  <td className="num">{fmtFull(s.agg.spend)}</td>
                  <td className="num">{s.agg.impressions.toLocaleString('en-IN')}</td>
                  <td className="num">{s.agg.linkClicks.toLocaleString('en-IN')}</td>
                  <td className="num">{s.agg.lpvs.toLocaleString('en-IN')}</td>
                  <td className="num">{ccy}{s.agg.cpc.toFixed(2)}</td>
                  <td className="num">{s.agg.ctr.toFixed(2)}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.OverviewTab = OverviewTab;