// tabs/campaigns.jsx — Thrsty Campaign Performance

function CampaignsTab({ ctx }) {
  const { range, granularity, campaign, compare, customStart, customEnd } = ctx;
  const split = ThrstyData.realCampaignSplit(range, customStart, customEnd);
  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 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 totalSpend = split.reduce((a,s) => a + s.agg.spend, 0) || 1;

  // 3-bar chart per campaign: Spend / Link Clicks / LPVs
  const grpData = split.map(s => [
    Math.round(s.agg.spend),
    s.agg.linkClicks,
    s.agg.lpvs,
  ]);

  // CPC trend per campaign (top 3)
  const top3 = split.slice(0, 3);
  const cpcSeries = top3.map((s, i) => {
    // Get series for this specific campaign
    const ss = ThrstyData.realSeries(s.name, range, granularity, customStart, customEnd);
    return { name: s.name.replace(/^LBLU_/,''), data: ss.cpc, color: ['#5B5BF0','#FF8FB1','#6FD2C0'][i] };
  });

  return (
    <div className="content">
      <AIBanner insights={[
        `<b>${split.length}</b> campaigns active in this range, total spend <b>${fmtFull(totalSpend)}</b>. Top: <b>${(split[0]?.name||'').replace(/^LBLU_/,'')}</b> at <b>${(((split[0]?.agg.spend||0)/totalSpend)*100).toFixed(0)}%</b> share.`,
        `Best CPC: <b>${(split.slice().sort((a,b) => a.agg.cpc - b.agg.cpc)[0]?.name||'').replace(/^LBLU_/,'')}</b> at <b>${ccy}${(split.slice().sort((a,b) => a.agg.cpc - b.agg.cpc)[0]?.agg.cpc||0).toFixed(2)}</b>. Best Cost/LPV: <b>${(split.filter(s => s.agg.lpvs > 0).sort((a,b) => a.agg.costPerLpv - b.agg.costPerLpv)[0]?.name||'—').replace(/^LBLU_/,'')}</b>.`,
      ]}/>

      <div className="grid grid-2-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">CPC trend by campaign</div>
              <div className="card-sub">{ThrstyData.RANGES[range].label} · {granularity} · top 3 by spend</div>
            </div>
          </div>
          <LineChart series={cpcSeries} labels={labels} height={260} formatY={(v) => `${ccy}${v.toFixed(2)}`}/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Spend share</div>
              <div className="card-sub">Share of total ad spend</div>
            </div>
          </div>
          <Donut
            data={split.map(s => ({ label: s.name.replace(/^LBLU_/,''), value: Math.round(s.agg.spend) })).filter(d => d.value > 0)}
            colors={['#5B5BF0','#FF8FB1','#6FD2C0','#FFB876','#9B7CFF','#34B27B']}
            height={180}
            formatV={fmtMoney}
          />
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-head-info">
            <div className="card-title">All campaigns — full breakdown</div>
            <div className="card-sub">Sorted by spend descending</div>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>Campaign</th>
              <th className="num">Spend</th>
              <th className="num">Share</th>
              <th className="num">Imp.</th>
              <th className="num">Reach</th>
              <th className="num">Freq.</th>
              <th className="num">Link Clicks</th>
              <th className="num">LPVs</th>
              <th className="num">CPC</th>
              <th className="num">CTR</th>
              <th className="num">Cost/LPV</th>
              <th className="num">Spend Δ</th>
            </tr>
          </thead>
          <tbody>
            {split.map((s, i) => {
              const d = pct(s.agg.spend, s.aggPrev.spend);
              return (
                <tr key={i}>
                  <td className="strong">{s.name.replace(/^LBLU_/,'')}</td>
                  <td className="num">{fmtFull(s.agg.spend)}</td>
                  <td className="num"><span className="badge">{((s.agg.spend/totalSpend)*100).toFixed(1)}%</span></td>
                  <td className="num">{s.agg.impressions.toLocaleString('en-IN')}</td>
                  <td className="num">{s.agg.reach.toLocaleString('en-IN')}</td>
                  <td className="num">{s.agg.frequency.toFixed(2)}x</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>
                  <td className="num">{s.agg.lpvs > 0 ? `${ccy}${s.agg.costPerLpv.toFixed(2)}` : '—'}</td>
                  <td className="num"><span className={`badge ${d >= 0 ? 'pos' : 'neg'}`}>{d >= 0 ? '+' : ''}{d.toFixed(1)}%</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.CampaignsTab = CampaignsTab;