// tabs/overview.jsx — Sri Sri Plywoods overall performance

function OverviewTab({ ctx }) {
  const { range, granularity, customStart, customEnd } = ctx;
  const { cur, prev, bounds } = SriSriData.realKPIs(range, customStart, customEnd);
  const series = SriSriData.realCombinedSeries(range, granularity, customStart, customEnd);

  const delta = (c, p) => p > 0 ? ((c - p) / p) * 100 : (c > 0 ? 100 : 0);

  // Donut split — Meta vs Google spend
  const donutData = [
    { label: 'Meta', value: Math.round(cur.metaSpend), color: '#5B5BF0' },
    { label: 'Google', value: Math.round(cur.googleSpend), color: '#6FD2C0' },
  ];

  // Conversion split
  const convDonut = [
    { label: 'Meta Leads', value: cur.metaLeads, color: '#5B5BF0' },
    { label: 'Google Conv', value: cur.googleConv, color: '#6FD2C0' },
  ];

  // Top campaigns combined
  const metaCamp = SriSriData.campaignBreakdown('meta', range, customStart, customEnd).slice(0, 5);
  const googleCamp = SriSriData.campaignBreakdown('google', range, customStart, customEnd).slice(0, 5);

  const fmtINR = (v) => '₹' + Math.round(v).toLocaleString('en-IN');
  const fmtNum = (v) => Math.round(v).toLocaleString('en-IN');

  const insight = (() => {
    const totalLeads = cur.metaLeads + cur.googleConv;
    const totalSpend = cur.metaSpend + cur.googleSpend;
    const cpa = totalLeads > 0 ? totalSpend / totalLeads : 0;
    const metaShare = totalSpend > 0 ? (cur.metaSpend / totalSpend) * 100 : 0;
    return `<b>${fmtINR(totalSpend)}</b> spend → <b>${totalLeads}</b> leads/store visits at <b>${fmtINR(cpa)}</b> blended CPA. Split: Meta <b>${metaShare.toFixed(0)}%</b> · Google <b>${(100-metaShare).toFixed(0)}%</b>.`;
  })();

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

      <div className="grid grid-4">
        <KPI label="Total Spend" value={cur.spend} format={fmtINR}
             delta={delta(cur.spend, prev.spend)} prev={fmtINR(prev.spend)}
             color="#5B5BF0" icon="Wallet"
             sparkData={SriSriData.realSparkline('spend', 14)}/>
        <KPI label="Total Conversions" value={cur.conversions} format={fmtNum}
             delta={delta(cur.conversions, prev.conversions)} prev={fmtNum(prev.conversions)}
             color="#FF8FB1" icon="Trophy"
             sparkData={SriSriData.realSparkline('leads', 14)}/>
        <KPI label="Blended CPA" value={cur.cpa} format={fmtINR}
             delta={delta(cur.cpa, prev.cpa)} prev={fmtINR(prev.cpa)}
             color="#FFB876" icon="Tag"
             sparkData={SriSriData.realSparkline('cpa', 14)}/>
        <KPI label="Total Clicks" value={cur.clicks} format={fmtNum}
             delta={delta(cur.clicks, prev.clicks)} prev={fmtNum(prev.clicks)}
             color="#6FD2C0" icon="Click"
             sparkData={SriSriData.realSparkline('clicks', 14)}/>
        <KPI label="Total Impressions" value={cur.impressions} format={fmtNum}
             delta={delta(cur.impressions, prev.impressions)} prev={fmtNum(prev.impressions)}
             color="#87B6FF" icon="Eye"
             sparkData={SriSriData.realSparkline('impressions', 14)}/>
        <KPI label="Blended CTR" value={cur.ctr.toFixed(2)} unit="%"
             delta={delta(cur.ctr, prev.ctr)} prev={prev.ctr.toFixed(2) + '%'}
             color="#C39BF5" icon="Activity"/>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">Spend by channel</div>
            <div className="card-sub">Meta vs Google · {bounds.days === 'all' ? 'all time' : `${bounds.days} days`}</div>
          </div>
        </div>
        <LineChart
          series={[
            { name: 'Meta',   data: series.metaSpend,   color: '#5B5BF0' },
            { name: 'Google', data: series.googleSpend, color: '#6FD2C0' },
          ]}
          labels={series.labels}
          mode="area"
          height={260}
          formatY={fmtINR}
        />
      </div>

      <div className="grid grid-1-1">
        <div className="card">
          <div className="card-head">
            <div className="card-title">Spend split</div>
            <div className="card-sub">Where the budget went</div>
          </div>
          <Donut data={donutData} colors={['#5B5BF0','#6FD2C0']} formatV={fmtINR} label="Total spend"/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-title">Conversion split</div>
            <div className="card-sub">Meta leads vs Google store visits</div>
          </div>
          <Donut data={convDonut} colors={['#5B5BF0','#6FD2C0']} formatV={fmtNum} label="Total"/>
        </div>
      </div>

      <div className="grid grid-1-1">
        <div className="card">
          <div className="card-head">
            <div className="card-title">Top Meta campaigns</div>
            <div className="card-sub">By spend</div>
          </div>
          <table className="metrics">
            <thead><tr><th>Campaign</th><th>Spend</th><th>Leads</th><th>CPL</th></tr></thead>
            <tbody>
              {metaCamp.map(c => (
                <tr key={c.name}>
                  <td className="trunc" title={c.name}>{c.name}</td>
                  <td>{fmtINR(c.agg.spend)}</td>
                  <td>{c.agg.leads}</td>
                  <td>{c.agg.leads > 0 ? fmtINR(c.agg.cpl) : '—'}</td>
                </tr>
              ))}
              {metaCamp.length === 0 && <tr><td colSpan="4" className="muted">No data</td></tr>}
            </tbody>
          </table>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-title">Top Google campaigns</div>
            <div className="card-sub">By spend</div>
          </div>
          <table className="metrics">
            <thead><tr><th>Campaign</th><th>Spend</th><th>Conv</th><th>CPA</th></tr></thead>
            <tbody>
              {googleCamp.map(c => (
                <tr key={c.name}>
                  <td className="trunc" title={c.name}>{c.name}</td>
                  <td>{fmtINR(c.agg.spend)}</td>
                  <td>{c.agg.conversions}</td>
                  <td>{c.agg.conversions > 0 ? fmtINR(c.agg.cost_per_conv) : '—'}</td>
                </tr>
              ))}
              {googleCamp.length === 0 && <tr><td colSpan="4" className="muted">No data</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.OverviewTab = OverviewTab;