// tabs/audience.jsx — Event Plus Location + Demographics on one tab
// All-time snapshot (does not respect the active range — Meta breakdowns are
// returned as period totals, not daily slices).

function AudienceTab({ ctx }) {
  const a = EPData.realAudience();
  const sym = '₹';
  const fmtFull  = (v) => `${sym}${Math.round(v).toLocaleString('en-IN')}`;
  const pct = (v, total) => total > 0 ? (v / total * 100) : 0;
  const total = (rows) => rows.reduce((s, r) => s + r.spend, 0);
  const totalLeads = (rows) => rows.reduce((s, r) => s + (r.leads || 0), 0);

  // ---- Demographics ----
  const ageTotal = total(a.age);
  const genderTotal = total(a.gender);
  const ageLeads = totalLeads(a.age);
  const genderLeads = totalLeads(a.gender);

  // Best age + gender by CPL
  const bestAge = a.age.filter(r => r.leads > 0)
    .sort((x, y) => x.cpl - y.cpl)[0];
  const bestGender = a.gender.filter(r => r.leads > 0)
    .sort((x, y) => x.cpl - y.cpl)[0];

  // ---- Location ----
  const region = a.region.filter(r => r.spend > 1);

  // ---- Device ----
  const dev = a.device.filter(r => r.spend > 1);
  const devTotal = total(dev);

  // ---- Placement ----
  const placeAll = (a.placement || []).filter(r => r.spend > 1);
  const placeByPlatform = {};
  placeAll.forEach(p => {
    const k = p.platform;
    if (!placeByPlatform[k]) placeByPlatform[k] = { spend: 0, leads: 0, impressions: 0 };
    placeByPlatform[k].spend += p.spend;
    placeByPlatform[k].leads += p.leads;
    placeByPlatform[k].impressions += p.impressions;
  });
  const platformDonut = Object.entries(placeByPlatform).map(([k,v]) => ({ label: k.charAt(0).toUpperCase() + k.slice(1), value: Math.round(v.spend) }));
  const bestPlace = placeAll.filter(p => p.leads > 0).sort((x,y) => x.spend/x.leads - y.spend/y.leads)[0];

  return (
    <div className="content">
      <AIBanner insights={[
        `<b>Age sweet spot:</b> 25-34 drives <b>${a.age.find(r => r.label === '25-34')?.leads || 0}</b> leads on ${fmtFull(a.age.find(r => r.label === '25-34')?.spend || 0)} (${(pct(a.age.find(r => r.label === '25-34')?.leads || 0, ageLeads)).toFixed(0)}% of leads). 45-54 second-best at <b>${fmtFull((a.age.find(r => r.label === '45-54')?.cpl || 0))} CPL</b>.`,
        `<b>Gender:</b> Male ${fmtFull(a.gender.find(r => r.label === 'male')?.spend || 0)} → <b>${a.gender.find(r => r.label === 'male')?.leads || 0} leads</b> at ${fmtFull(a.gender.find(r => r.label === 'male')?.cpl || 0)} CPL. Female ${fmtFull(a.gender.find(r => r.label === 'female')?.spend || 0)} → <b>${a.gender.find(r => r.label === 'female')?.leads || 0} leads</b> at <b class="pos">${fmtFull(a.gender.find(r => r.label === 'female')?.cpl || 0)} CPL</b> (cheaper).`,
        `<b>Device:</b> Android smartphone carries <b>${pct(a.device.find(r => r.label === 'android_smartphone')?.spend || 0, devTotal).toFixed(0)}%</b> of spend → <b>${a.device.find(r => r.label === 'android_smartphone')?.leads || 0} leads</b>. iPhone CPL is ${(a.device.find(r => r.label === 'iphone')?.cpl || 0) > (a.device.find(r => r.label === 'android_smartphone')?.cpl || 0) ? 'higher' : 'lower'} at ${fmtFull(a.device.find(r => r.label === 'iphone')?.cpl || 0)}.`,
        `<b>Placement:</b> ${bestPlace ? `${bestPlace.platform}/${bestPlace.position} delivers leads at <b>${fmtFull(bestPlace.cpl)} CPL</b>` : 'no clear winner'}. Reels (FB+IG combined) carry the bulk of impressions.`,
      ]}/>

      {/* ===== Demographics ===== */}
      <div className="section-head" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0 4px' }}>
        <Icons.Users size={14}/>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Demographics</h3>
        <span style={{ fontSize: 11, color: 'var(--ink-4)' }}>· age + gender · all-time snapshot</span>
      </div>

      <div className="grid grid-1-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Age band performance</div>
              <div className="card-sub">Spend share, lead delivery, and CPL by age</div>
            </div>
          </div>
          <BarChart
            data={a.age.filter(r => r.label !== 'Unknown').map(r => Math.round(r.spend))}
            labels={a.age.filter(r => r.label !== 'Unknown').map(r => r.label)}
            height={180}
            color="#5B5BF0"
            formatY={(v) => fmtFull(v)}
          />
          <table className="tbl" style={{ marginTop: 12 }}>
            <thead>
              <tr>
                <th>Age</th>
                <th className="num">Spend</th>
                <th className="num">% Spend</th>
                <th className="num">Impressions</th>
                <th className="num">CTR</th>
                <th className="num">Leads</th>
                <th className="num">CPL</th>
              </tr>
            </thead>
            <tbody>
              {a.age.map((r, i) => (
                <tr key={i}>
                  <td className="strong">{r.label}</td>
                  <td className="num">{fmtFull(r.spend)}</td>
                  <td className="num">{pct(r.spend, ageTotal).toFixed(1)}%</td>
                  <td className="num">{r.impressions.toLocaleString('en-IN')}</td>
                  <td className="num">{r.ctr.toFixed(2)}%</td>
                  <td className="num strong">{r.leads}</td>
                  <td className="num">
                    {r.leads > 0
                      ? <span className={`badge ${r.cpl < 600 ? 'pos' : r.cpl > 1000 ? 'neg' : ''}`}>{fmtFull(r.cpl)}</span>
                      : <span style={{ color: 'var(--ink-4)' }}>—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Gender performance</div>
              <div className="card-sub">Spend mix · lead delivery · CPL gap</div>
            </div>
          </div>
          <Donut
            data={a.gender.filter(r => r.label !== 'unknown').map(r => ({ label: r.label.charAt(0).toUpperCase() + r.label.slice(1), value: Math.round(r.spend) }))}
            colors={['#FF8FB1', '#5B5BF0']}
            height={170}
            formatV={(v) => fmtFull(v)}
          />
          <table className="tbl" style={{ marginTop: 12 }}>
            <thead>
              <tr>
                <th>Gender</th>
                <th className="num">Spend</th>
                <th className="num">% Spend</th>
                <th className="num">Leads</th>
                <th className="num">% Leads</th>
                <th className="num">CPL</th>
              </tr>
            </thead>
            <tbody>
              {a.gender.map((r, i) => (
                <tr key={i}>
                  <td className="strong">{r.label.charAt(0).toUpperCase() + r.label.slice(1)}</td>
                  <td className="num">{fmtFull(r.spend)}</td>
                  <td className="num">{pct(r.spend, genderTotal).toFixed(1)}%</td>
                  <td className="num strong">{r.leads}</td>
                  <td className="num">{pct(r.leads, genderLeads).toFixed(1)}%</td>
                  <td className="num">
                    {r.leads > 0
                      ? <span className={`badge ${r.cpl < 600 ? 'pos' : r.cpl > 1000 ? 'neg' : ''}`}>{fmtFull(r.cpl)}</span>
                      : <span style={{ color: 'var(--ink-4)' }}>—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* ===== Location ===== */}
      <div className="section-head" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 0 4px' }}>
        <Icons.Globe size={14}/>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Location</h3>
        <span style={{ fontSize: 11, color: 'var(--ink-4)' }}>· state-level + country</span>
      </div>

      <div className="grid grid-1-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Region (state)</div>
              <div className="card-sub">Targeting concentrated in Maharashtra — single-state campaign</div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Region</th>
                <th className="num">Spend</th>
                <th className="num">Impressions</th>
                <th className="num">Reach (est.)</th>
                <th className="num">CTR</th>
                <th className="num">CPC</th>
                <th className="num">Leads</th>
                <th className="num">CPL</th>
              </tr>
            </thead>
            <tbody>
              {region.map((r, i) => (
                <tr key={i}>
                  <td className="strong">{r.label}</td>
                  <td className="num">{fmtFull(r.spend)}</td>
                  <td className="num">{r.impressions.toLocaleString('en-IN')}</td>
                  <td className="num">—</td>
                  <td className="num">{r.ctr.toFixed(2)}%</td>
                  <td className="num">{fmtFull(r.cpc)}</td>
                  <td className="num strong">{r.leads}</td>
                  <td className="num">
                    {r.leads > 0
                      ? <span className="badge">{fmtFull(r.cpl)}</span>
                      : <span style={{ color: 'var(--ink-4)' }}>—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Country</div>
              <div className="card-sub">Single-country campaign — India only</div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Country</th>
                <th className="num">Spend</th>
                <th className="num">Impressions</th>
                <th className="num">Leads</th>
                <th className="num">CPL</th>
              </tr>
            </thead>
            <tbody>
              {a.country.map((r, i) => (
                <tr key={i}>
                  <td className="strong">{r.label === 'IN' ? '🇮🇳 India' : r.label}</td>
                  <td className="num">{fmtFull(r.spend)}</td>
                  <td className="num">{r.impressions.toLocaleString('en-IN')}</td>
                  <td className="num strong">{r.leads}</td>
                  <td className="num">{r.leads > 0 ? <span className="badge">{fmtFull(r.cpl)}</span> : '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ marginTop: 12, padding: 12, background: 'var(--surface-2)', borderRadius: 8, fontSize: 12, color: 'var(--ink-3)' }}>
            <b>Note:</b> Geo-targeting is single-state (Maharashtra) by ad-set design. To get city-level granularity (Mumbai vs Pune vs Nagpur), the campaign would need to be split by city audience or use the Meta `dma`/`region` × city breakdown call separately.
          </div>
        </div>
      </div>

      {/* ===== Device ===== */}
      <div className="section-head" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 0 4px' }}>
        <Icons.Eye size={14}/>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Device</h3>
        <span style={{ fontSize: 11, color: 'var(--ink-4)' }}>· impression device split</span>
      </div>

      <div className="grid grid-1-2">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Spend by device</div>
              <div className="card-sub">{Math.round(pct(a.device.find(r => r.label === 'android_smartphone')?.spend || 0, devTotal))}% Android · {Math.round(pct(a.device.find(r => r.label === 'iphone')?.spend || 0, devTotal))}% iPhone</div>
            </div>
          </div>
          <Donut
            data={dev.map(r => ({ label: ({android_smartphone:'Android phone', iphone:'iPhone', android_tablet:'Android tablet', ipad:'iPad', desktop:'Desktop', other:'Other'})[r.label] || r.label, value: Math.round(r.spend) }))}
            colors={['#34B27B','#5B5BF0','#FFB876','#FF8FB1','#9B7CFF','#6FD2C0']}
            height={180}
            formatV={(v) => fmtFull(v)}
          />
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Device breakdown</div>
              <div className="card-sub">Spend · CTR · CPL by impression device</div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Device</th>
                <th className="num">Spend</th>
                <th className="num">% Spend</th>
                <th className="num">Impressions</th>
                <th className="num">CTR</th>
                <th className="num">CPC</th>
                <th className="num">Leads</th>
                <th className="num">CPL</th>
              </tr>
            </thead>
            <tbody>
              {a.device.map((r, i) => (
                <tr key={i}>
                  <td className="strong">{({android_smartphone:'Android phone', iphone:'iPhone', android_tablet:'Android tablet', ipad:'iPad', desktop:'Desktop', other:'Other'})[r.label] || r.label}</td>
                  <td className="num">{fmtFull(r.spend)}</td>
                  <td className="num">{pct(r.spend, devTotal).toFixed(1)}%</td>
                  <td className="num">{r.impressions.toLocaleString('en-IN')}</td>
                  <td className="num">{r.ctr.toFixed(2)}%</td>
                  <td className="num">{r.cpc > 0 ? fmtFull(r.cpc) : '—'}</td>
                  <td className="num strong">{r.leads}</td>
                  <td className="num">
                    {r.leads > 0
                      ? <span className={`badge ${r.cpl < 600 ? 'pos' : r.cpl > 1000 ? 'neg' : ''}`}>{fmtFull(r.cpl)}</span>
                      : <span style={{ color: 'var(--ink-4)' }}>—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* ===== Placement ===== */}
      <div className="section-head" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 0 4px' }}>
        <Icons.Layers size={14}/>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Placement</h3>
        <span style={{ fontSize: 11, color: 'var(--ink-4)' }}>· publisher × position</span>
      </div>

      <div className="grid grid-2-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Placement performance</div>
              <div className="card-sub">Sorted by spend · CPL where leads delivered</div>
            </div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Platform</th>
                <th>Position</th>
                <th className="num">Spend</th>
                <th className="num">Impressions</th>
                <th className="num">CTR</th>
                <th className="num">CPC</th>
                <th className="num">Leads</th>
                <th className="num">CPL</th>
              </tr>
            </thead>
            <tbody>
              {[...placeAll].sort((x,y) => y.spend - x.spend).map((p, i) => (
                <tr key={i}>
                  <td><span className="badge" style={{ background: p.platform === 'instagram' ? '#FF8FB122' : '#5B5BF022', color: p.platform === 'instagram' ? '#FF8FB1' : '#5B5BF0' }}>{p.platform}</span></td>
                  <td className="strong">{p.position.replace(/_/g, ' ').replace(/^facebook |^instagram /,'')}</td>
                  <td className="num">{fmtFull(p.spend)}</td>
                  <td className="num">{p.impressions.toLocaleString('en-IN')}</td>
                  <td className="num">{p.ctr.toFixed(2)}%</td>
                  <td className="num">{p.cpc > 0 ? fmtFull(p.cpc) : '—'}</td>
                  <td className="num strong">{p.leads}</td>
                  <td className="num">
                    {p.leads > 0
                      ? <span className={`badge ${p.cpl < 600 ? 'pos' : p.cpl > 1000 ? 'neg' : ''}`}>{fmtFull(p.cpl)}</span>
                      : <span style={{ color: 'var(--ink-4)' }}>—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Spend by platform</div>
              <div className="card-sub">FB vs IG share</div>
            </div>
          </div>
          <Donut
            data={platformDonut}
            colors={['#5B5BF0','#FF8FB1']}
            height={180}
            formatV={(v) => fmtFull(v)}
          />
        </div>
      </div>
    </div>
  );
}

window.AudienceTab = AudienceTab;