// tabs/google.jsx — Google Ads tab

function GoogleTab({ ctx }) {
  const { range, granularity, customStart, customEnd } = ctx;
  const { cur, prev } = SriSriData.realKPIs(range, customStart, customEnd);
  const series = SriSriData.realGoogleSeries(range, granularity, customStart, customEnd);
  const campaigns = SriSriData.campaignBreakdown('google', range, customStart, customEnd);

  const g = cur.google, gp = prev.google;
  const delta = (c, p) => p > 0 ? ((c - p) / p) * 100 : (c > 0 ? 100 : 0);
  const fmtINR = (v) => '₹' + Math.round(v).toLocaleString('en-IN');
  const fmtNum = (v) => Math.round(v).toLocaleString('en-IN');

  const insight = (() => {
    const cpa = g.conversions > 0 ? g.spend/g.conversions : 0;
    const channelBreak = campaigns.reduce((acc, c) => {
      const t = c.agg.spend > 0 ? c.name.toLowerCase().includes('search') ? 'Search' : 'PMax' : 'Other';
      acc[t] = (acc[t]||0) + c.agg.conversions;
      return acc;
    }, {});
    const leader = Object.entries(channelBreak).sort((a,b) => b[1]-a[1])[0];
    return `Google delivered <b>${g.conversions}</b> store visits at <b>${fmtINR(cpa)}</b> CPA on <b>${fmtINR(g.spend)}</b> spend.${leader?` Top channel: <b>${leader[0]}</b> (${leader[1]} conv).`:''}`;
  })();

  return (
    <div className="content">
      <AIBanner insights={[insight]}/>

      <div className="grid grid-4">
        <KPI label="Spend" value={g.spend} format={fmtINR}
             delta={delta(g.spend, gp.spend)} prev={fmtINR(gp.spend)}
             color="#6FD2C0" icon="Wallet"/>
        <KPI label="Conversions" value={g.conversions} format={fmtNum}
             delta={delta(g.conversions, gp.conversions)} prev={fmtNum(gp.conversions)}
             color="#FF8FB1" icon="Trophy"/>
        <KPI label="Cost / Conv" value={g.cost_per_conv} format={fmtINR}
             delta={delta(g.cost_per_conv, gp.cost_per_conv)} prev={fmtINR(gp.cost_per_conv)}
             color="#FFB876" icon="Tag"/>
        <KPI label="Clicks" value={g.clicks} format={fmtNum}
             delta={delta(g.clicks, gp.clicks)} prev={fmtNum(gp.clicks)}
             color="#5B5BF0" icon="Click"/>
        <KPI label="Impressions" value={g.impressions} format={fmtNum}
             delta={delta(g.impressions, gp.impressions)} prev={fmtNum(gp.impressions)}
             color="#87B6FF" icon="Eye"/>
        <KPI label="CTR" value={g.ctr.toFixed(2)} unit="%"
             delta={delta(g.ctr, gp.ctr)} prev={gp.ctr.toFixed(2)+'%'}
             color="#C39BF5" icon="Activity"/>
        <KPI label="CPC" value={g.cpc} format={fmtINR}
             delta={delta(g.cpc, gp.cpc)} prev={fmtINR(gp.cpc)}
             color="#F4D35E" icon="Tag"/>
        <KPI label="CPM" value={g.cpm} format={fmtINR}
             delta={delta(g.cpm, gp.cpm)} prev={fmtINR(gp.cpm)}
             color="#93E0A4" icon="Eye"/>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">Spend & Conversions over time</div>
            <div className="card-sub">Local store visits trend</div>
          </div>
        </div>
        <LineChart
          series={[{ name: 'Spend', data: series.spend, color: '#6FD2C0' }]}
          labels={series.labels}
          mode="area" height={220}
          formatY={fmtINR}
        />
        <div style={{ height: 16 }}/>
        <LineChart
          series={[{ name: 'Conversions', data: series.conversions, color: '#FF8FB1' }]}
          labels={series.labels}
          mode="line" height={180}
          formatY={fmtNum}
        />
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">Campaign performance</div>
            <div className="card-sub">{campaigns.length} campaigns active in range</div>
          </div>
        </div>
        <table className="metrics">
          <thead>
            <tr>
              <th>Campaign</th><th>Type</th><th>Spend</th><th>Impressions</th>
              <th>Clicks</th><th>CTR</th><th>Conversions</th><th>Cost/Conv</th>
            </tr>
          </thead>
          <tbody>
            {campaigns.map(c => {
              const name = c.name;
              const type = name.toLowerCase().includes('search') ? 'Search' :
                           name.toLowerCase().includes('pmax') || name.toLowerCase().includes('local') ? 'PMax' : '—';
              return (
                <tr key={name}>
                  <td className="trunc" title={name}>{name}</td>
                  <td><span className="pill">{type}</span></td>
                  <td>{fmtINR(c.agg.spend)}</td>
                  <td>{fmtNum(c.agg.impressions)}</td>
                  <td>{fmtNum(c.agg.clicks)}</td>
                  <td>{c.agg.ctr.toFixed(2)}%</td>
                  <td>{c.agg.conversions}</td>
                  <td>{c.agg.conversions > 0 ? fmtINR(c.agg.cost_per_conv) : '—'}</td>
                </tr>
              );
            })}
            {campaigns.length === 0 && <tr><td colSpan="8" className="muted">No campaigns ran in this range</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.GoogleTab = GoogleTab;