// tabs/overview.jsx — Overview (REAL data)

function OverviewTab({ 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 fmtMoney = (v) => `AED ${v >= 1000 ? (v/1000).toFixed(v >= 10000 ? 0 : 1) + 'k' : v.toFixed(0)}`;
  const fmtMoneyFull = (v) => `AED ${Math.round(v).toLocaleString()}`;
  const pct = (c, p) => p > 0 ? ((c - p) / p) * 100 : 0;

  // Hero KPIs (from real aggregates)
  const kpis = [
    { label: 'Ad Spend', value: cur.spend, prev: prev.spend, delta: pct(cur.spend, prev.spend),
      icon: 'Dollar', color: '#5B5BF0', format: (v) => `AED ${Math.round(v).toLocaleString()}`,
      sparkData: SilsalData.realSparkline(country, 'spend', 14) },
    { label: 'Ad Revenue', value: cur.revenueAds, prev: prev.revenueAds, delta: pct(cur.revenueAds, prev.revenueAds),
      icon: 'Trend', color: '#34B27B', format: (v) => `AED ${Math.round(v).toLocaleString()}`,
      sparkData: SilsalData.realSparkline(country, 'revenue', 14) },
    { label: 'GA4 Purchases', value: cur.purchases, prev: prev.purchases, delta: pct(cur.purchases, prev.purchases),
      icon: 'Cart', color: '#FF8FB1', format: (v) => v.toLocaleString(),
      sparkData: SilsalData.realSparkline(country, 'purchases', 14) },
    { label: 'Blended ROAS', value: cur.roas, prev: prev.roas, delta: pct(cur.roas, prev.roas),
      unit: 'x', icon: 'Bolt', color: '#FFB876', format: (v) => v.toFixed(2),
      sparkData: SilsalData.realSparkline(country, 'roas', 14) },
  ];

  // Revenue by channel — real Meta vs Google series
  const series = [
    { name: 'Meta Ads',   data: channels.meta,   color: '#5B5BF0' },
    { name: 'Google Ads', data: channels.google, color: '#FF8FB1' },
  ];
  const compareSeries = compare !== 'none' ? [
    { name: 'Meta (prev)',   data: channelsPrev.meta,   color: '#5B5BF0' },
    { name: 'Google (prev)', data: channelsPrev.google, color: '#FF8FB1' },
  ] : null;

  // Country split (real, current period)
  const split = SilsalData.realCountrySplit(range);
  const countryColors = { UAE: '#5B5BF0', KSA: '#6FD2C0', Qatar: '#FF8FB1' };
  const totalRev = split.reduce((a, c) => a + c.agg.ga4Rev, 0) || 1;

  // Donut: revenue mix Meta vs Google vs Direct (Magento − GA4 ad revenue)
  const directRev = Math.max(0, cur.magentoRev - cur.revenueAds);
  const donutData = [
    { label: 'Google Ads', value: Math.round(cur.googleRev) },
    { label: 'Meta Ads',   value: Math.round(cur.metaRev) },
    { label: 'Direct / Other', value: Math.round(directRev) },
  ].filter(d => d.value > 0);

  // Country × channel grouped bars (Meta vs Google revenue per country)
  const grpData = split.map(s => [Math.round(s.agg.metaRev/1000), Math.round(s.agg.googleRev/1000)]);

  // Top products — from real GA4 product report
  const topProducts = SilsalData.realProducts(8);

  return (
    <div className="content">
      <AIBanner insights={[
        `Headline revenue ${fmtMoneyFull(cur.magentoRev || cur.ga4Rev)} on ${fmtMoneyFull(cur.spend)} ad spend → blended ROAS <b class="${cur.roas >= 3 ? 'pos' : 'neg'}">${cur.roas.toFixed(2)}x</b>. Meta Ads share of paid revenue: <b>${cur.revenueAds > 0 ? ((cur.metaRev/cur.revenueAds)*100).toFixed(0) : 0}%</b>.`,
        `Country split (paid revenue): UAE <b>${fmtMoneyFull(split[0].agg.revenueAds)}</b>, Qatar <b>${fmtMoneyFull(split[1].agg.revenueAds)}</b>, KSA <b>${fmtMoneyFull(split[2].agg.revenueAds)}</b>. KSA has no Meta/Google spend in this period — sessions are purely organic.`,
        `GA4 conversion rate: <b>${cur.convRate.toFixed(2)}%</b> (sessions ${cur.sessions.toLocaleString()} → purchases ${cur.purchases.toLocaleString()}). AOV ≈ <b>${fmtMoneyFull(cur.aov || 0)}</b>.`,
      ]}/>

      <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">Ad revenue by channel</div>
              <div className="card-sub">{SilsalData.RANGES[range].label} · {granularity}</div>
            </div>
          </div>
          <LineChart series={series} compare={compareSeries} labels={labels} height={260} formatY={fmtMoney}/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Revenue mix</div>
              <div className="card-sub">Paid vs direct</div>
            </div>
          </div>
          <Donut
            data={donutData}
            colors={['#FF8FB1', '#5B5BF0', '#6FD2C0']}
            height={180}
            formatV={fmtMoney}
          />
        </div>
      </div>

      <div className="grid grid-1-2">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Country performance</div>
              <div className="card-sub">GA4 revenue · purchases · sessions</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {split.map((r, i) => {
              const flag = r.name === 'UAE' ? '🇦🇪' : r.name === 'KSA' ? '🇸🇦' : '🇶🇦';
              const color = countryColors[r.name];
              const share = r.agg.ga4Rev / totalRev;
              const delta = pct(r.agg.ga4Rev, r.aggPrev.ga4Rev);
              return (
                <div key={i} style={{ padding: '12px 0', borderBottom: i < 2 ? '1px solid var(--border)' : 'none' }}>
                  <div className="row between" style={{ marginBottom: 6 }}>
                    <div className="row">
                      <span style={{ fontSize: 18 }}>{flag}</span>
                      <span style={{ fontWeight: 600 }}>{r.name}</span>
                    </div>
                    <span className={`badge ${delta >= 0 ? 'pos' : 'neg'}`}>{delta >= 0 ? '+' : ''}{delta.toFixed(1)}%</span>
                  </div>
                  <div className="minibar" style={{ marginBottom: 8 }}><span style={{ width: `${share * 100}%`, background: color }}/></div>
                  <div className="row" style={{ gap: 18, fontSize: 11.5, color: 'var(--ink-3)' }}>
                    <span><b className="strong" style={{ color: 'var(--ink)' }}>{fmtMoneyFull(r.agg.ga4Rev)}</b> rev</span>
                    <span><b className="strong" style={{ color: 'var(--ink)' }}>{r.agg.purchases.toLocaleString()}</b> purch</span>
                    <span><b className="strong" style={{ color: 'var(--ink)' }}>{r.agg.sessions.toLocaleString()}</b> sess</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Ad revenue by country & channel</div>
              <div className="card-sub">{SilsalData.RANGES[range].label} · AED thousands</div>
            </div>
          </div>
          <GroupedBars
            rows={split.map(s => s.name)}
            cols={['Meta', 'Google']}
            data={grpData}
            colors={['#5B5BF0', '#6FD2C0', '#FF8FB1']}
            height={320}
            label="Ad Revenue"
            formatV={(v) => `AED ${v}k`}
          />
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-head-info">
            <div className="card-title">Top products by GA4 revenue</div>
            <div className="card-sub">Lifetime in dataset (Apr 2025 → Apr 2026)</div>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>#</th>
              <th>Product</th>
              <th className="num">Units sold</th>
              <th className="num">Revenue (AED)</th>
              <th className="num">AOV</th>
            </tr>
          </thead>
          <tbody>
            {topProducts.map((p) => (
              <tr key={p.rank}>
                <td>{p.rank}</td>
                <td className="strong">{p.name}</td>
                <td className="num">{p.totalQty.toLocaleString()}</td>
                <td className="num strong">{fmtMoneyFull(p.totalRev)}</td>
                <td className="num">{p.totalQty > 0 ? fmtMoneyFull(p.totalRev / p.totalQty) : '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="grid grid-1-1">
        <MetricsTable
          title="Headline metrics"
          sub={`${SilsalData.RANGES[range].label} · ${SilsalData.RANGES[range].sub}`}
          rows={[
            { m: 'Ad Spend', cur: cur.spend, prev: prev.spend, fmt: fmtMoneyFull, inv: true },
            { m: 'Ad Revenue', cur: cur.revenueAds, prev: prev.revenueAds, fmt: fmtMoneyFull },
            { m: 'GA4 Revenue', cur: cur.ga4Rev, prev: prev.ga4Rev, fmt: fmtMoneyFull },
            { m: 'Magento Revenue', cur: cur.magentoRev, prev: prev.magentoRev, fmt: fmtMoneyFull },
            { m: 'GA4 Purchases', cur: cur.purchases, prev: prev.purchases, fmt: (v) => v.toLocaleString() },
            { m: 'Blended ROAS', cur: cur.roas, prev: prev.roas, fmt: (v) => `${v.toFixed(2)}x` },
            { m: 'CAC (paid)', cur: cur.cac, prev: prev.cac, fmt: (v) => `AED ${v.toFixed(2)}`, inv: true },
            { m: 'AOV', cur: cur.aov, prev: prev.aov, fmt: (v) => `AED ${v.toFixed(2)}` },
            { m: 'CTR', cur: cur.ctr, prev: prev.ctr, fmt: (v) => `${v.toFixed(2)}%` },
            { m: 'CPC', cur: cur.cpc, prev: prev.cpc, fmt: (v) => `AED ${v.toFixed(2)}`, inv: true },
            { m: 'Conv. rate', cur: cur.convRate, prev: prev.convRate, fmt: (v) => `${v.toFixed(2)}%` },
            { m: 'Sessions', cur: cur.sessions, prev: prev.sessions, fmt: (v) => v.toLocaleString() },
          ]}
        />
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Country × channel breakdown</div>
              <div className="card-sub">Ad revenue (AED) · share % of paid total</div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Country</th>
                <th className="num">Meta</th>
                <th className="num">Google</th>
                <th className="num">Magento</th>
                <th className="num">Total ad rev</th>
                <th className="num">Share</th>
              </tr>
            </thead>
            <tbody>
              {(() => {
                const grand = split.reduce((a, s) => a + s.agg.revenueAds, 0) || 1;
                return split.map((s, i) => (
                  <tr key={i}>
                    <td className="strong">{s.name}</td>
                    <td className="num">{fmtMoneyFull(s.agg.metaRev)}</td>
                    <td className="num">{fmtMoneyFull(s.agg.googleRev)}</td>
                    <td className="num">{fmtMoneyFull(s.agg.magentoRev)}</td>
                    <td className="num strong">{fmtMoneyFull(s.agg.revenueAds)}</td>
                    <td className="num"><span className="badge">{((s.agg.revenueAds/grand)*100).toFixed(1)}%</span></td>
                  </tr>
                ));
              })()}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.OverviewTab = OverviewTab;