// tabs/funnel.jsx — Website Funnel (REAL GA4 data)

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

  const kpis = [
    { label: 'Sessions',     value: cur.sessions, prev: prev.sessions, delta: pct(cur.sessions, prev.sessions),
      icon: 'Users', color: '#5B5BF0', sparkData: SilsalData.realSparkline(country, 'sessions', 14) },
    { label: 'Add to carts', value: cur.atc, prev: prev.atc, delta: pct(cur.atc, prev.atc),
      icon: 'Cart', color: '#FF8FB1', sparkData: SilsalData.realSparkline(country, 'atc', 14) },
    { label: 'Checkouts',    value: cur.checkouts, prev: prev.checkouts, delta: pct(cur.checkouts, prev.checkouts),
      icon: 'Bolt', color: '#C39BF5', sparkData: SilsalData.realSparkline(country, 'checkouts', 14) },
    { label: 'Purchases',    value: cur.purchases, prev: prev.purchases, delta: pct(cur.purchases, prev.purchases),
      icon: 'Bolt', color: '#34B27B', sparkData: SilsalData.realSparkline(country, 'purchases', 14) },
    { label: 'Conv. rate',   value: cur.convRate, prev: prev.convRate, delta: pct(cur.convRate, prev.convRate),
      unit: '%', icon: 'Trend', color: '#FFB876', format: (v) => v.toFixed(2) },
    { label: 'AOV',          value: cur.aov, prev: prev.aov, delta: pct(cur.aov, prev.aov),
      unit: 'AED', icon: 'Dollar', color: '#87B6FF', format: (v) => v.toFixed(0) },
    { label: 'GA4 Revenue',  value: cur.ga4Rev, prev: prev.ga4Rev, delta: pct(cur.ga4Rev, prev.ga4Rev),
      icon: 'Trend', color: '#34B27B', format: (v) => `AED ${Math.round(v).toLocaleString()}` },
    { label: 'Magento Orders', value: cur.magentoOrd, prev: prev.magentoOrd, delta: pct(cur.magentoOrd, prev.magentoOrd),
      icon: 'Cart', color: '#6FD2C0' },
  ];

  // Real GA4 funnel: Sessions → ATC → Checkout → Purchase
  const funnel = [
    { label: 'Sessions',         value: cur.sessions,  color: '#5B5BF0' },
    { label: 'Add to cart',      value: cur.atc,       color: '#A0A0FA' },
    { label: 'Checkout started', value: cur.checkouts, color: '#FF8FB1' },
    { label: 'Purchase',         value: cur.purchases, color: '#34B27B' },
  ];
  const maxF = funnel[0].value || 1;

  const series = [
    { name: 'Sessions',    data: channels.sessions,  color: '#5B5BF0' },
    { name: 'Add to cart', data: channels.atc,       color: '#FF8FB1' },
    { name: 'Purchases',   data: channels.purchases, color: '#34B27B' },
  ];
  const cmp = compare !== 'none' ? [
    { name: 'Sessions (prev)',   data: channelsPrev.sessions,  color: '#5B5BF0' },
    { name: 'Purchases (prev)',  data: channelsPrev.purchases, color: '#34B27B' },
  ] : null;

  return (
    <div className="content">
      <AIBanner insights={[
        `Sessions <b>${cur.sessions.toLocaleString()}</b> → purchases <b>${cur.purchases.toLocaleString()}</b> = <b class="${cur.convRate >= 1.5 ? 'pos' : 'neg'}">${cur.convRate.toFixed(2)}% CR</b>. ATC→Purchase rate: <b>${cur.atc > 0 ? ((cur.purchases / cur.atc) * 100).toFixed(1) : 0}%</b>.`,
        `Largest funnel drop: <b>${largestDrop(funnel)}</b>. Investigate friction at this step (page speed, payment options, form errors).`,
        `Country sessions split: UAE <b>${split[0].agg.sessions.toLocaleString()}</b> · Qatar <b>${split[1].agg.sessions.toLocaleString()}</b> · KSA <b>${split[2].agg.sessions.toLocaleString()}</b>. KSA has zero ad spend in this period — all sessions are organic / direct.`,
      ]}/>

      <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">Conversion funnel</div>
              <div className="card-sub">{SilsalData.RANGES[range].label} · {country === 'all' ? 'All countries' : (SilsalData.COUNTRY_KEY[country] || country)}</div>
            </div>
            <div className="row">
              <span className={`badge ${cur.convRate >= 1.5 ? 'pos' : 'neg'}`}>CR: {cur.convRate.toFixed(2)}%</span>
            </div>
          </div>
          <div>
            {funnel.map((f, i) => {
              const w = (f.value / maxF) * 100;
              const conv = i === 0 ? 100 : (f.value / Math.max(1, funnel[i - 1].value)) * 100;
              const drop = i === 0 ? 0 : funnel[i - 1].value - f.value;
              const dropPct = i === 0 ? 0 : ((funnel[i-1].value - f.value) / Math.max(1, funnel[i-1].value)) * 100;
              return (
                <div key={i} className="funnel-row">
                  <div className="funnel-row-label">{f.label}</div>
                  <div className="funnel-row-track">
                    <div className="funnel-step" style={{
                      width: `${Math.max(14, w)}%`,
                      background: `linear-gradient(95deg, ${f.color} 0%, ${f.color}dd 100%)`,
                      boxShadow: `0 4px 14px ${f.color}33`,
                    }}>
                      <span className="fs-val">{fmtNum(f.value)}</span>
                      {i > 0 && <span className="funnel-conv">{conv.toFixed(1)}%</span>}
                    </div>
                  </div>
                  <div className="funnel-row-meta">
                    {i === 0 ? <span style={{ color: 'var(--ink-4)' }}>entry</span> :
                      <><span className="neg">−{fmtNum(drop)}</span> ({dropPct.toFixed(1)}%)</>}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Sessions by country</div>
              <div className="card-sub">{SilsalData.RANGES[range].label}</div>
            </div>
          </div>
          <Donut
            data={split.map(s => ({ label: s.name, value: s.agg.sessions }))}
            colors={['#5B5BF0','#FF8FB1','#6FD2C0']}
            height={180}
            formatV={fmtNum}
          />
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border)' }}>
            {split.map((s, i) => (
              <div key={i} className="row between" style={{ padding: '6px 0', fontSize: 12 }}>
                <span style={{ color: 'var(--ink-3)' }}>{s.name} CR</span>
                <span><span className="strong" style={{ color: 'var(--ink)' }}>{(s.agg.convRate || 0).toFixed(2)}%</span> · AOV {fmtMoney(s.agg.aov || 0)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid grid-2-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Sessions · Cart · Purchase trend</div>
              <div className="card-sub">{SilsalData.RANGES[range].label} · {granularity}</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">Sessions volume — country × period</div>
              <div className="card-sub">3D isometric · sessions</div>
            </div>
          </div>
          <IsometricBars
            rows={split.map(s => s.name)}
            cols={['Current', 'Previous']}
            data={split.map(s => [Math.round(s.agg.sessions / 1000), Math.round((s.aggPrev.sessions || 0) / 1000)])}
            colors={['#5B5BF0','#6FD2C0','#FF8FB1']}
            height={300}
            formatV={(v) => `${v}k`}
          />
        </div>
      </div>

      <div className="grid grid-1-1">
        <MetricsTable
          title="Funnel · headline metrics"
          sub={`${SilsalData.RANGES[range].label} · ${SilsalData.RANGES[range].sub}`}
          rows={[
            { m: 'Sessions', cur: cur.sessions, prev: prev.sessions, fmt: (v) => v.toLocaleString() },
            { m: 'Add to carts', cur: cur.atc, prev: prev.atc, fmt: (v) => v.toLocaleString() },
            { m: 'Checkouts', cur: cur.checkouts, prev: prev.checkouts, fmt: (v) => v.toLocaleString() },
            { m: 'Purchases', cur: cur.purchases, prev: prev.purchases, fmt: (v) => v.toLocaleString() },
            { m: 'Conv. rate', cur: cur.convRate, prev: prev.convRate, fmt: (v) => `${v.toFixed(2)}%` },
            { m: 'GA4 Revenue', cur: cur.ga4Rev, prev: prev.ga4Rev, fmt: (v) => `AED ${Math.round(v).toLocaleString()}` },
            { m: 'AOV', cur: cur.aov, prev: prev.aov, fmt: (v) => `AED ${v.toFixed(2)}` },
            { m: 'Magento Orders', cur: cur.magentoOrd, prev: prev.magentoOrd, fmt: (v) => v.toLocaleString() },
            { m: 'Magento Revenue', cur: cur.magentoRev, prev: prev.magentoRev, fmt: (v) => `AED ${Math.round(v).toLocaleString()}` },
          ]}
        />
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Funnel step conversion</div>
              <div className="card-sub">Step-to-step rate · drop-off · cumulative</div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Step</th>
                <th className="num">Users</th>
                <th className="num">Step CR</th>
                <th className="num">Drop</th>
                <th className="num">Cumulative</th>
              </tr>
            </thead>
            <tbody>
              {funnel.map((f, i) => {
                const stepCR = i === 0 ? 100 : (f.value / Math.max(1, funnel[i-1].value)) * 100;
                const cum = (f.value / Math.max(1, funnel[0].value)) * 100;
                const drop = i === 0 ? 0 : funnel[i-1].value - f.value;
                return (
                  <tr key={i}>
                    <td className="strong">{f.label}</td>
                    <td className="num">{f.value.toLocaleString()}</td>
                    <td className="num">{i === 0 ? '—' : <span className={`badge ${stepCR > 50 ? 'pos' : stepCR > 25 ? 'neutral' : 'neg'}`}>{stepCR.toFixed(1)}%</span>}</td>
                    <td className="num" style={{ color: drop ? 'var(--neg)' : 'var(--ink-3)' }}>{i === 0 ? '—' : `−${fmtNum(drop)}`}</td>
                    <td className="num strong">{cum.toFixed(2)}%</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function largestDrop(funnel) {
  let worst = { from: '', to: '', pct: 0 };
  for (let i = 1; i < funnel.length; i++) {
    const prev = funnel[i - 1].value || 1;
    const dropPct = ((prev - funnel[i].value) / prev) * 100;
    if (dropPct > worst.pct) worst = { from: funnel[i-1].label, to: funnel[i].label, pct: dropPct };
  }
  return `${worst.from} → ${worst.to} (-${worst.pct.toFixed(1)}%)`;
}

window.FunnelTab = FunnelTab;