// tabs/audience.jsx — Demographic + location breakdowns (snapshot, full reporting period)

function AudienceTab({ ctx }) {
  const { range, customStart, customEnd } = ctx;
  const region = ThrstyData.realRegion(range, customStart, customEnd);
  const age    = ThrstyData.realAge(range, customStart, customEnd);
  const gender = ThrstyData.realGender(range, customStart, customEnd);

  const ccy = ThrstyData.RAW_META()?.currencySymbol || '₹';
  const period = ThrstyData.RANGES[range]?.label || 'Custom';
  const fmtFull  = (v) => `${ccy}${Math.round(v).toLocaleString('en-IN')}`;
  const fmtMoney = (v) => v >= 1000 ? `${ccy}${(v/1000).toFixed(v >= 10000 ? 0 : 1)}k` : `${ccy}${v.toFixed(0)}`;

  const totalSpend  = region.reduce((a,r) => a + r.spend, 0);
  const totalImps   = region.reduce((a,r) => a + r.impressions, 0);
  const totalClicks = region.reduce((a,r) => a + r.clicks, 0);

  const topRegion = region.slice().sort((a,b) => b.spend - a.spend)[0];
  const topAge    = age.slice().sort((a,b) => b.spend - a.spend)[0];
  const topGender = gender.slice().sort((a,b) => b.spend - a.spend)[0];

  // Bar list helper
  const BarList = ({ rows, keyName, accent, totalKey = 'spend' }) => {
    const max = Math.max(...rows.map(r => r[totalKey])) || 1;
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {rows.map((r, i) => {
          const share = r[totalKey] / max;
          return (
            <div key={i}>
              <div className="row between" style={{ marginBottom: 4 }}>
                <span style={{ fontSize: 12.5, fontWeight: 500, textTransform: 'capitalize' }}>{r[keyName]}</span>
                <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>
                  <b className="strong" style={{ color: 'var(--ink)' }}>{fmtFull(r.spend)}</b>
                  &nbsp;·&nbsp;{r.impressions.toLocaleString('en-IN')} imp&nbsp;·&nbsp;{r.linkClicks.toLocaleString('en-IN')} clicks
                </span>
              </div>
              <div className="minibar"><span style={{ width: `${share * 100}%`, background: accent }}/></div>
            </div>
          );
        })}
      </div>
    );
  };

  const Table = ({ rows, keyName, label }) => {
    const tot = rows.reduce((a,r) => a + r.spend, 0) || 1;
    return (
      <table className="tbl">
        <thead>
          <tr>
            <th>{label}</th>
            <th className="num">Spend</th>
            <th className="num">Share</th>
            <th className="num">Imp.</th>
            <th className="num">Link Clicks</th>
            <th className="num">CTR</th>
            <th className="num">CPC</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>
              <td className="strong" style={{ textTransform: 'capitalize' }}>{r[keyName]}</td>
              <td className="num">{fmtFull(r.spend)}</td>
              <td className="num"><span className="badge">{((r.spend/tot)*100).toFixed(1)}%</span></td>
              <td className="num">{r.impressions.toLocaleString('en-IN')}</td>
              <td className="num">{r.linkClicks.toLocaleString('en-IN')}</td>
              <td className="num">{r.ctr.toFixed(2)}%</td>
              <td className="num">{ccy}{r.cpc.toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  };

  return (
    <div className="content">
      <AIBanner insights={[
        `<b>${region.length}</b> regions reached, top: <b>${topRegion?.region || '—'}</b> at <b>${fmtFull(topRegion?.spend||0)}</b> (${(((topRegion?.spend||0)/totalSpend)*100).toFixed(0)}% of spend).`,
        `Top age bucket: <b>${topAge?.age || '—'}</b> with <b>${fmtFull(topAge?.spend||0)}</b> spent. Top gender: <b style="text-transform:capitalize">${topGender?.gender || '—'}</b> (${(((topGender?.spend||0)/totalSpend)*100).toFixed(0)}% share).`,
        `Range: <b>${period}</b> — breakdowns aggregate weekly rows that fall within the selected window.`,
      ]}/>

      <div className="grid grid-2-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Spend by region</div>
              <div className="card-sub">Top {region.length} regions · {period}</div>
            </div>
          </div>
          <BarList rows={region.slice().sort((a,b) => b.spend - a.spend)} keyName="region" accent="#5B5BF0"/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Gender split</div>
              <div className="card-sub">Spend share</div>
            </div>
          </div>
          <Donut
            data={gender.filter(g => g.spend > 0).map(g => ({ label: g.gender, value: Math.round(g.spend) }))}
            colors={['#5B5BF0','#FF8FB1','#9B7CFF']}
            height={180}
            formatV={fmtMoney}
          />
        </div>
      </div>

      <div className="grid grid-2-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Spend by age</div>
              <div className="card-sub">7 age buckets</div>
            </div>
          </div>
          <BarList rows={age.slice().sort((a,b) => b.spend - a.spend)} keyName="age" accent="#FF8FB1"/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Age × CTR</div>
              <div className="card-sub">CTR climbs in older brackets</div>
            </div>
          </div>
          <table className="tbl">
            <thead><tr><th>Age</th><th className="num">Imp.</th><th className="num">CTR</th><th className="num">CPC</th></tr></thead>
            <tbody>
              {age.slice().sort((a,b) => b.spend - a.spend).map((r, i) => (
                <tr key={i}>
                  <td className="strong">{r.age}</td>
                  <td className="num">{r.impressions.toLocaleString('en-IN')}</td>
                  <td className="num">{r.ctr.toFixed(2)}%</td>
                  <td className="num">{ccy}{r.cpc.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-head-info">
            <div className="card-title">Region — full breakdown</div>
            <div className="card-sub">Spend · clicks · impressions · CTR · CPC</div>
          </div>
        </div>
        <Table rows={region.slice().sort((a,b) => b.spend - a.spend)} keyName="region" label="Region"/>
      </div>

      <div className="grid grid-1-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Age — full breakdown</div>
              <div className="card-sub">Spend · clicks · impressions · CTR · CPC</div>
            </div>
          </div>
          <Table rows={age.slice().sort((a,b) => b.spend - a.spend)} keyName="age" label="Age"/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Gender — full breakdown</div>
              <div className="card-sub">Spend · clicks · impressions · CTR · CPC</div>
            </div>
          </div>
          <Table rows={gender.slice().sort((a,b) => b.spend - a.spend)} keyName="gender" label="Gender"/>
        </div>
      </div>
    </div>
  );
}

window.AudienceTab = AudienceTab;