// tabs/campaigns.jsx — Event Plus Campaign Performance

function CampaignsTab({ ctx }) {
  const { range, granularity, customStart, customEnd } = ctx;
  const camps = EPData.realCampaigns(range, customStart, customEnd);
  const sym = '₹';
  const fmtFull = (v) => `${sym}${Math.round(v).toLocaleString('en-IN')}`;
  const fmtMoney = (v) => `${sym}${v >= 1000 ? (v/1000).toFixed(1) + 'k' : v.toFixed(0)}`;

  // Per-campaign daily spend / leads series for charts
  const seriesByCampaign = camps.map(c => {
    const labels = (c.dailyInRange || []).map(r => {
      const [y,m,d] = r.d.split('-');
      return `${parseInt(d,10)}/${parseInt(m,10)}`;
    });
    return {
      name: c.name,
      labels,
      spend: (c.dailyInRange || []).map(r => Math.round(r.spend)),
      leads: (c.dailyInRange || []).map(r => r.leads),
    };
  });

  // Aggregate totals across all campaigns for share calc
  const totalSpend = camps.reduce((a, c) => a + c.totals.spend, 0) || 1;
  const totalLeads = camps.reduce((a, c) => a + c.totals.leads, 0);

  const campaignColors = { 'YRD_Lead_Instant_form_Mar26': '#5B5BF0', 'YRD_Profile_Visit': '#34B27B' };

  return (
    <div className="content">
      <AIBanner insights={[
        `<b>${camps.length} campaigns</b> active in this period. Combined spend <b>${fmtFull(totalSpend)}</b> drove <b>${totalLeads}</b> leads. Lead campaign carries the conversion engine; Profile Visit drives top-of-funnel reach.`,
      ]}/>

      <div className="grid grid-3">
        {camps.map((c, i) => {
          const t = c.totals;
          const color = campaignColors[c.name] || '#9B7CFF';
          const objective = c.name.toLowerCase().includes('lead') ? 'Leads' :
                            c.name.toLowerCase().includes('profile') || c.name.toLowerCase().includes('visit') ? 'Traffic' : 'Other';
          return (
            <div key={i} className="card" style={{ borderTop: `3px solid ${color}` }}>
              <div className="card-head">
                <div className="card-head-info">
                  <div className="card-title" title={c.name} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</div>
                  <div className="card-sub">{objective} · {(t.spend / totalSpend * 100).toFixed(1)}% of spend</div>
                </div>
              </div>
              <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 8, padding: '4px 0 8px' }}>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Spend</div>
                  <div style={{ fontSize: 16, fontWeight: 700 }}>{fmtFull(t.spend)}</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Leads</div>
                  <div style={{ fontSize: 16, fontWeight: 700 }}>{t.leads.toLocaleString('en-IN')}</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>CPL</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{t.cpl > 0 ? fmtFull(t.cpl) : '—'}</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>CTR</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{t.ctr.toFixed(2)}%</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>CPC</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{fmtFull(t.cpc)}</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Reach</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{t.reach.toLocaleString('en-IN')}</div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {seriesByCampaign.map((s, i) => (
        <div key={i} className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">{s.name} — daily trend</div>
              <div className="card-sub">{EPData.RANGES[range].label}</div>
            </div>
          </div>
          <LineChart
            series={[
              { name: 'Spend', data: s.spend, color: campaignColors[s.name] || '#9B7CFF' },
              { name: 'Leads', data: s.leads, color: '#FF8FB1', axis: 'right' },
            ]}
            labels={s.labels}
            height={220}
            formatY={fmtMoney}
          />
        </div>
      ))}

      <div className="card">
        <div className="card-head">
          <div className="card-head-info">
            <div className="card-title">Campaign performance summary</div>
            <div className="card-sub">Sortable by spend · all metrics for the selected range</div>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>Campaign</th>
              <th className="num">Spend</th>
              <th className="num">Impressions</th>
              <th className="num">Reach</th>
              <th className="num">Clicks</th>
              <th className="num">Link Clicks</th>
              <th className="num">CTR</th>
              <th className="num">CPC</th>
              <th className="num">CPM</th>
              <th className="num">Leads</th>
              <th className="num">CPL</th>
            </tr>
          </thead>
          <tbody>
            {camps.sort((a,b) => b.totals.spend - a.totals.spend).map((c, i) => {
              const t = c.totals;
              return (
                <tr key={i}>
                  <td className="strong">{c.name}</td>
                  <td className="num">{fmtFull(t.spend)}</td>
                  <td className="num">{t.impressions.toLocaleString('en-IN')}</td>
                  <td className="num">{t.reach.toLocaleString('en-IN')}</td>
                  <td className="num">{t.clicks.toLocaleString('en-IN')}</td>
                  <td className="num">{t.linkClicks.toLocaleString('en-IN')}</td>
                  <td className="num">{t.ctr.toFixed(2)}%</td>
                  <td className="num">{fmtFull(t.cpc)}</td>
                  <td className="num">{fmtFull(t.cpm)}</td>
                  <td className="num strong">{t.leads.toLocaleString('en-IN')}</td>
                  <td className="num strong">{t.cpl > 0 ? fmtFull(t.cpl) : '—'}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.CampaignsTab = CampaignsTab;