// tabs/google.jsx — Google Ads (REAL data)
// Sheet has Google daily totals per country (Scaleda account, attributed to UAE).
// Qatar / KSA Google data is zero in source. No campaign-type / keyword breakdown available.

function GoogleTab({ 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;

  const gCur = {
    spend: cur.googleSpend, rev: cur.googleRev, purch: cur.googlePurch,
    clicks: cur.googleClicks, imp: cur.googleImp,
    roas: cur.googleSpend > 0 ? cur.googleRev / cur.googleSpend : 0,
    ctr: cur.googleImp > 0 ? (cur.googleClicks / cur.googleImp) * 100 : 0,
    cpc: cur.googleClicks > 0 ? cur.googleSpend / cur.googleClicks : 0,
    cpm: cur.googleImp > 0 ? (cur.googleSpend / cur.googleImp) * 1000 : 0,
    cac: cur.googlePurch > 0 ? cur.googleSpend / cur.googlePurch : 0,
  };
  const gPrev = {
    spend: prev.googleSpend, rev: prev.googleRev, purch: prev.googlePurch,
    roas: prev.googleSpend > 0 ? prev.googleRev / prev.googleSpend : 0,
    ctr: prev.googleImp > 0 ? (prev.googleClicks / prev.googleImp) * 100 : 0,
    cpc: prev.googleClicks > 0 ? prev.googleSpend / prev.googleClicks : 0,
    cpm: prev.googleImp > 0 ? (prev.googleSpend / prev.googleImp) * 1000 : 0,
    cac: prev.googlePurch > 0 ? prev.googleSpend / prev.googlePurch : 0,
  };

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

  const series = [
    { name: 'Spend',   data: channels.googleSpend, color: '#FF8FB1' },
    { name: 'Revenue', data: channels.google,      color: '#34B27B' },
  ];
  const cmp = compare !== 'none' ? [
    { name: 'Revenue (prev)', data: channelsPrev.google, color: '#34B27B' },
  ] : null;

  const countryRows = split.map(s => ({
    name: s.name,
    spend: s.agg.googleSpend, rev: s.agg.googleRev, purch: s.agg.googlePurch,
    clicks: s.agg.googleClicks, imp: s.agg.googleImp,
    roas: s.agg.googleSpend > 0 ? s.agg.googleRev / s.agg.googleSpend : 0,
    ctr: s.agg.googleImp > 0 ? (s.agg.googleClicks / s.agg.googleImp) * 100 : 0,
    cpc: s.agg.googleClicks > 0 ? s.agg.googleSpend / s.agg.googleClicks : 0,
  }));

  return (
    <div className="content">
      <AIBanner insights={[
        `Google delivered <b>${fmtFull(gCur.rev)}</b> on <b>${fmtFull(gCur.spend)}</b> spend → <b class="${gCur.roas >= 3 ? 'pos' : 'neg'}">${gCur.roas.toFixed(2)}x ROAS</b>. Purchases: <b>${gCur.purch.toLocaleString()}</b>.`,
        `Source: single Scaleda account, attributed to <b>UAE</b>. Qatar / KSA show zero Google spend in the dataset.`,
        `Note: campaign-type / keyword / Quality Score breakdowns are not in the source sheet — connect Google Ads 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={cmp} labels={labels} height={260} formatY={fmtMoney}/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Google revenue by country</div>
              <div className="card-sub">{SilsalData.RANGES[range].label}</div>
            </div>
          </div>
          <Donut
            data={countryRows.filter(r => r.rev > 0).map(r => ({ label: r.name, value: r.rev }))}
            colors={['#5B5BF0','#FF8FB1','#6FD2C0']}
            height={180}
            formatV={fmtMoney}
          />
        </div>
      </div>

      <div className="grid grid-1-1">
        <MetricsTable
          title="Google Ads · headline metrics"
          sub={`${SilsalData.RANGES[range].label} · ${SilsalData.RANGES[range].sub}`}
          rows={[
            { m: 'Spend', cur: gCur.spend, prev: gPrev.spend, fmt: fmtFull, inv: true },
            { m: 'Revenue', cur: gCur.rev, prev: gPrev.rev, fmt: fmtFull },
            { m: 'ROAS', cur: gCur.roas, prev: gPrev.roas, fmt: (v) => `${v.toFixed(2)}x` },
            { m: 'Purchases', cur: gCur.purch, prev: gPrev.purch, fmt: (v) => v.toLocaleString() },
            { m: 'Clicks', cur: cur.googleClicks, prev: prev.googleClicks, fmt: (v) => v.toLocaleString() },
            { m: 'Impressions', cur: cur.googleImp, prev: prev.googleImp, fmt: (v) => v.toLocaleString() },
            { m: 'CTR', cur: gCur.ctr, prev: gPrev.ctr, fmt: (v) => `${v.toFixed(2)}%` },
            { m: 'CPC', cur: gCur.cpc, prev: gPrev.cpc, fmt: (v) => `AED ${v.toFixed(2)}`, inv: true },
            { m: 'CPM', cur: gCur.cpm, prev: gPrev.cpm, fmt: (v) => `AED ${v.toFixed(2)}`, inv: true },
            { m: 'CAC', cur: gCur.cac, prev: gPrev.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 — Google</div>
              <div className="card-sub">Spend · revenue · ROAS 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.GoogleTab = GoogleTab;