// tabs/seo.jsx — SEO (limited real data)
// Sheet has no GSC / rankings / backlinks. We use GA4 sessions − paid clicks as an
// "organic + direct" proxy, and call out which fields need a GSC/Ahrefs connection.

function SeoTab({ 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 fmtNum = (v) => v >= 1000 ? `${(v/1000).toFixed(1)}k` : Math.round(v).toString();
  const pct = (c, p) => p > 0 ? ((c - p) / p) * 100 : 0;

  // Proxy: organic+direct sessions ≈ total sessions − paid clicks.
  // Paid clicks = metaClicks + googleClicks (rough; ignores cross-device & view-through).
  const paidClicksCur  = cur.metaClicks + cur.googleClicks;
  const paidClicksPrev = prev.metaClicks + prev.googleClicks;
  const orgSessionsCur  = Math.max(0, cur.sessions  - paidClicksCur);
  const orgSessionsPrev = Math.max(0, prev.sessions - paidClicksPrev);

  // Organic revenue proxy = ga4Rev − ad-attributed rev
  const orgRevCur  = Math.max(0, cur.ga4Rev  - cur.revenueAds);
  const orgRevPrev = Math.max(0, prev.ga4Rev - prev.revenueAds);

  const kpis = [
    { label: 'Organic+Direct sessions', value: orgSessionsCur, prev: orgSessionsPrev, delta: pct(orgSessionsCur, orgSessionsPrev),
      icon: 'Users', color: '#6FD2C0' },
    { label: 'Organic revenue (proxy)', value: orgRevCur, prev: orgRevPrev, delta: pct(orgRevCur, orgRevPrev),
      icon: 'Trend', color: '#34B27B', format: (v) => `AED ${Math.round(v).toLocaleString()}` },
    { label: 'Total GA4 sessions', value: cur.sessions, prev: prev.sessions, delta: pct(cur.sessions, prev.sessions),
      icon: 'Search', color: '#5B5BF0' },
    { label: 'Conv. rate (overall)', value: cur.convRate, prev: prev.convRate, delta: pct(cur.convRate, prev.convRate),
      unit: '%', icon: 'Bolt', color: '#FFB876', format: (v) => v.toFixed(2) },
  ];

  // Build organic-sessions series (sessions − paid clicks, per bucket)
  const orgSeries = channels.sessions.map((s, i) => Math.max(0, s - ((channels.metaSpend[i] && channels.cpc[i]) ? Math.round(channels.metaSpend[i] / Math.max(0.01, channels.cpc[i])) : 0)));
  const series = [
    { name: 'GA4 sessions',      data: channels.sessions,   color: '#6FD2C0' },
    { name: 'Organic+Direct',    data: orgSeries,           color: '#34B27B' },
  ];
  const cmp = compare !== 'none' ? [
    { name: 'GA4 sessions (prev)', data: channelsPrev.sessions, color: '#6FD2C0' },
  ] : null;

  // Country sessions split (real)
  const countryRows = split.map(s => {
    const paid = s.agg.metaClicks + s.agg.googleClicks;
    const org = Math.max(0, s.agg.sessions - paid);
    return {
      name: s.name, sessions: s.agg.sessions, paid,
      organic: org,
      organicShare: s.agg.sessions > 0 ? (org / s.agg.sessions) * 100 : 0,
      ga4Rev: s.agg.ga4Rev,
    };
  });

  return (
    <div className="content">
      <AIBanner insights={[
        `<b>Organic + direct sessions: ${orgSessionsCur.toLocaleString()}</b> (${cur.sessions > 0 ? ((orgSessionsCur/cur.sessions)*100).toFixed(0) : 0}% of total). Estimated organic revenue: <b>AED ${Math.round(orgRevCur).toLocaleString()}</b>.`,
        `<b>KSA</b> has zero paid spend in this period — its <b>${split[2].agg.sessions.toLocaleString()} sessions</b> are entirely organic + direct + email. Strong baseline to grow into paid.`,
        `Note: ranking, backlink, GSC keyword, and indexed-page metrics are <b>not in the source sheet</b>. Connect Google Search Console + Ahrefs to populate this tab fully.`,
      ]}/>

      <div className="grid grid-4">
        {kpis.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">Sessions trend</div>
              <div className="card-sub">{SilsalData.RANGES[range].label} · {granularity} · GA4</div>
            </div>
          </div>
          <LineChart series={series} compare={cmp} labels={labels} height={260} formatY={fmtNum}/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Organic share by country</div>
              <div className="card-sub">Sessions not from paid clicks</div>
            </div>
          </div>
          <Donut
            data={countryRows.map(r => ({ label: r.name, value: r.organic }))}
            colors={['#6FD2C0','#5B5BF0','#FF8FB1']}
            height={180}
            formatV={fmtNum}
          />
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border)' }}>
            {countryRows.map((r, i) => (
              <div key={i} className="row between" style={{ padding: '6px 0', fontSize: 12 }}>
                <span style={{ color: 'var(--ink-3)' }}>{r.name}</span>
                <span><span className="strong" style={{ color: 'var(--ink)' }}>{r.organicShare.toFixed(0)}%</span> organic</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid grid-1-1">
        <MetricsTable
          title="SEO · headline metrics (proxies)"
          sub={`${SilsalData.RANGES[range].label} · ${SilsalData.RANGES[range].sub}`}
          rows={[
            { m: 'GA4 sessions',           cur: cur.sessions,    prev: prev.sessions,    fmt: (v) => v.toLocaleString() },
            { m: 'Paid clicks',            cur: paidClicksCur,   prev: paidClicksPrev,   fmt: (v) => v.toLocaleString() },
            { m: 'Organic+Direct (est.)', cur: orgSessionsCur,  prev: orgSessionsPrev,  fmt: (v) => v.toLocaleString() },
            { m: 'GA4 revenue',            cur: cur.ga4Rev,      prev: prev.ga4Rev,      fmt: (v) => `AED ${Math.round(v).toLocaleString()}` },
            { m: 'Ad revenue',             cur: cur.revenueAds,  prev: prev.revenueAds,  fmt: (v) => `AED ${Math.round(v).toLocaleString()}` },
            { m: 'Organic revenue (est.)', cur: orgRevCur,       prev: orgRevPrev,       fmt: (v) => `AED ${Math.round(v).toLocaleString()}` },
            { m: 'Conv. rate',             cur: cur.convRate,    prev: prev.convRate,    fmt: (v) => `${v.toFixed(2)}%` },
            { m: 'AOV',                    cur: cur.aov,         prev: prev.aov,         fmt: (v) => `AED ${v.toFixed(2)}` },
          ]}
        />
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Country breakdown</div>
              <div className="card-sub">Organic+Direct vs paid sessions</div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Country</th>
                <th className="num">Total sess.</th>
                <th className="num">Paid clicks</th>
                <th className="num">Organic+Direct</th>
                <th className="num">Organic share</th>
                <th className="num">GA4 rev</th>
              </tr>
            </thead>
            <tbody>
              {countryRows.map((r, i) => (
                <tr key={i}>
                  <td className="strong">{r.name}</td>
                  <td className="num">{r.sessions.toLocaleString()}</td>
                  <td className="num">{r.paid.toLocaleString()}</td>
                  <td className="num strong">{r.organic.toLocaleString()}</td>
                  <td className="num"><span className="badge">{r.organicShare.toFixed(1)}%</span></td>
                  <td className="num">AED {Math.round(r.ga4Rev).toLocaleString()}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 12, padding: '10px 0', borderTop: '1px solid var(--border)' }}>
            "Organic+Direct" = GA4 sessions − paid ad clicks. True organic-only requires GSC traffic-source split. Rankings, backlinks, indexed pages need GSC + Ahrefs connection.
          </div>
        </div>
      </div>
    </div>
  );
}

window.SeoTab = SeoTab;