// Compare Campaigns — side-by-side diff for 2-3 campaigns
const CompareCampaigns = () => {
  const t = useT();
  const isMobile = useIsMobile();
  const allCampaigns = window.PulseStore ? window.PulseStore.getCampaigns() : PULSE.campaigns;
  const ids = (window.getQueryParam ? window.getQueryParam('ids', '') : '').split(',').filter(Boolean);
  const selected = ids.length ? ids.map(id => allCampaigns.find(c => c.id === id)).filter(Boolean) : allCampaigns.slice(0, 3);
  const campaigns = selected.length >= 2 ? selected.slice(0, 3) : allCampaigns.slice(0, 3);

  const rows = [
    { key: 'status', label: 'Status', render: c => <StatusChip status={c.status} daysLeft={c.daysLeft}/> },
    { key: 'period', label: 'Period', render: c => <span style={{ fontSize: 13 }}>{c.startDate} → {c.endDate}</span> },
    { key: 'budget', label: 'Budget', render: c => <span className="num">${c.budget.toLocaleString()}</span> },
    { key: 'inf', label: 'Influencers', render: c => c.influencerCount, compare: 'max' },
    { key: 'posts', label: 'Posts', render: c => c.posts, compare: 'max' },
  ];

  const metrics = [
    { key: 'actualViews', label: 'Views', unit: 'fmt', commit: 'committedViews' },
    { key: 'actualEngagement', label: 'Engagement', unit: 'fmt', commit: 'committedEngagement' },
    { key: 'reach', label: 'Reach', unit: 'fmt' },
    { key: 'kpiPct', label: 'KPI %', unit: 'pct' },
  ];

  const cpm = c => c.actualViews ? ((c.budget / c.actualViews) * 1000).toFixed(2) : '—';
  const cpe = c => c.actualEngagement ? (c.budget / c.actualEngagement).toFixed(2) : '—';
  const displayCampaignName = (c = {}) => {
    const brand = String(c.brand || '').trim();
    const raw = String(c.name || '').trim();
    if (!raw) return 'Untitled campaign';
    for (const sep of [' — ', ' – ', ' - ']) {
      if (!raw.includes(sep)) continue;
      const parts = raw.split(sep).map(s => s.trim()).filter(Boolean);
      const first = parts[0] || '';
      if (parts.length > 1 && (!brand || first.toLowerCase() === brand.toLowerCase() || brand.toLowerCase().includes(first.toLowerCase()) || first.toLowerCase().includes(brand.toLowerCase()))) {
        return parts.slice(1).join(sep);
      }
    }
    return raw;
  };

  const best = (arr, k) => Math.max(...arr.map(c => +(c[k] || 0)));

  const palette = ['#EC2024', '#111111', '#6E6E6E'];
  const series = campaigns.map((c, i) => {
    const daily = window.PulseStore ? window.PulseStore.getDaily(c.id) : [];
    const defaultSeries = [{ label: 'Start', v: 0 }, { label: 'Now', v: c.actualViews || 0 }];
    return { ...c, series: (daily.length ? daily.map(d => ({ label: d.label, v: d.views })) : defaultSeries), color: palette[i % palette.length] };
  });

  return (
    <div style={{ padding: isMobile ? '16px 16px 84px' : '24px 32px 64px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ marginBottom: 28, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div style={{ fontSize: 12, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 4 }}>{t('cmp.title')}</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(30px, 5vw, 44px)', fontWeight: 400, margin: 0, letterSpacing: 0 }}>{t('cmp.n_side', { n: campaigns.length })}</h1>
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <a className="btn" href={window.withQuery ? window.withQuery('Campaign List.html') : 'Campaign List.html'}><Icon name="plus" size={13}/> {t('cmp.add')}</a>
          <button className="btn" onClick={() => window.print()}><Icon name="download" size={13}/> {t('cmp.export')}</button>
        </div>
      </div>

      {/* Campaign headers */}
      <div style={{ overflowX: 'auto', marginBottom: 20 }}>
        <div style={{ display: 'grid', gridTemplateColumns: `180px repeat(${campaigns.length}, minmax(220px, 1fr))`, gap: 0, background: 'var(--bg-panel)', border: '1px solid var(--border)', borderRadius: 12, overflow: 'hidden', minWidth: 180 + campaigns.length * 220 }}>
          <div/>
          {campaigns.map((c, i) => (
            <div key={c.id} style={{ padding: 20, borderLeft: '1px solid var(--border)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: c.brandColor, color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 13 }}>
                {c.brand.charAt(0)}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>{c.brand}</div>
                <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: 0, lineHeight: 1.2 }}>{displayCampaignName(c)}</div>
              </div>
              <a className="btn ghost" href={window.withQuery ? window.withQuery('Campaign Detail.html', { id: c.id }) : `Campaign Detail.html?id=${encodeURIComponent(c.id)}`} style={{ padding: 4, color: 'var(--ink-400)' }}><Icon name="external" size={12}/></a>
            </div>
            </div>
          ))}

          {/* Meta rows */}
          {rows.map(r => (
            <React.Fragment key={r.key}>
              <div style={cmpStyles.rowLabel}>{r.label}</div>
              {campaigns.map(c => (
                <div key={c.id} style={cmpStyles.cell}>{r.render(c)}</div>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* Metrics */}
      <div className="panel" style={{ padding: 0, marginBottom: 20 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{t('cmp.performance')}</div>
          <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 2 }}>{t('cmp.winner')} per row highlighted</div>
        </div>
        <div style={{ overflowX: 'auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: `180px repeat(${campaigns.length}, minmax(220px, 1fr))`, minWidth: 180 + campaigns.length * 220 }}>
          {metrics.map(m => {
            const bestVal = best(campaigns, m.key);
            return (
              <React.Fragment key={m.key}>
                <div style={{ ...cmpStyles.rowLabel, borderTop: '1px solid var(--border)' }}>{m.label}</div>
                {campaigns.map(c => {
                  const v = c[m.key];
                  const commit = m.commit ? c[m.commit] : null;
                  const isWinner = v === bestVal && v > 0;
                  return (
                    <div key={c.id} style={{ ...cmpStyles.cell, borderTop: '1px solid var(--border)', background: isWinner ? 'var(--mint-100)' : 'transparent' }}>
                      <div className="num" style={{ fontSize: 22, fontWeight: 600, letterSpacing: 0 }}>
                        {m.unit === 'fmt' ? PULSE.fmt(v || 0) : m.unit === 'pct' ? `${v || 0}%` : (v || 0).toLocaleString()}
                      </div>
                      {commit && (
                        <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 2 }}>
                          of {PULSE.fmt(commit)} ({PULSE.pct(v, commit)}%)
                        </div>
                      )}
                      {isWinner && <div style={{ fontSize: 10, color: 'var(--mint-500)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 4 }}>{t('cmp.winner')}</div>}
                    </div>
                  );
                })}
              </React.Fragment>
            );
          })}
        </div>
        </div>
      </div>

      {/* Efficiency metrics */}
      <div className="panel" style={{ padding: 0, marginBottom: 20 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{t('cmp.cost_eff')}</div>
          <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 2 }}>{t('cmp.cost_eff_sub')}</div>
        </div>
        <div style={{ overflowX: 'auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: `180px repeat(${campaigns.length}, minmax(220px, 1fr))`, minWidth: 180 + campaigns.length * 220 }}>
          {[
            { label: 'CPM (cost / 1K views)', fn: cpm, prefix: '$' },
            { label: 'Cost / engagement', fn: cpe, prefix: '$' },
          ].map((r, rI) => {
            const values = campaigns.map(c => parseFloat(r.fn(c)));
            const min = Math.min(...values.filter(v => !isNaN(v)));
            return (
              <React.Fragment key={rI}>
                <div style={{ ...cmpStyles.rowLabel, borderTop: '1px solid var(--border)' }}>{r.label}</div>
                {campaigns.map((c, i) => {
                  const v = r.fn(c);
                  const isBest = parseFloat(v) === min;
                  return (
                    <div key={c.id} style={{ ...cmpStyles.cell, borderTop: '1px solid var(--border)', background: isBest ? 'var(--mint-100)' : 'transparent' }}>
                      <div className="num" style={{ fontSize: 20, fontWeight: 600, letterSpacing: 0 }}>
                        {v === '—' ? '—' : `${r.prefix}${v}`}
                      </div>
                      {isBest && v !== '—' && <div style={{ fontSize: 10, color: 'var(--mint-500)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 4 }}>{t('cmp.best')}</div>}
                    </div>
                  );
                })}
              </React.Fragment>
            );
          })}
        </div>
        </div>
      </div>

      {/* Overlay growth chart */}
      <div className="panel" style={{ padding: 20 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14, gap: 12, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>{t('cmp.daily_overlay')}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 2 }}>Normalized over campaign duration</div>
          </div>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            {series.map(s => (
              <span key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
                <span style={{ width: 10, height: 10, borderRadius: 3, background: s.color }}/>
                <span>{s.brand}</span>
              </span>
            ))}
          </div>
        </div>
        <MultiLineChart series={series}/>
      </div>
    </div>
  );
};

const MultiLineChart = ({ series }) => {
  const w = 900, h = 260, padL = 50, padR = 20, padT = 20, padB = 30;
  const all = series.flatMap(s => s.series.map(d => d.v));
  const max = Math.max(...all) || 1;
  const n = series[0].series.length;
  const x = i => padL + (i / (n - 1 || 1)) * (w - padL - padR);
  const y = v => padT + (1 - v / max) * (h - padT - padB);

  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
      {[0, 0.25, 0.5, 0.75, 1].map((t, i) => {
        const gy = padT + t * (h - padT - padB);
        return <g key={i}>
          <line x1={padL} y1={gy} x2={w - padR} y2={gy} stroke="var(--border)" strokeDasharray={i === 4 ? '0' : '2 4'}/>
          <text x={padL - 8} y={gy + 4} textAnchor="end" fontSize="10" fill="var(--text-muted)">{PULSE.fmt(Math.round(max * (1 - t)))}</text>
        </g>;
      })}
      {series[0].series.map((d, i) => {
        if (i % 4 !== 0 && i !== n - 1) return null;
        return <text key={i} x={x(i)} y={h - 10} textAnchor="middle" fontSize="10" fill="var(--text-muted)">{d.label}</text>;
      })}
      {series.map(s => {
        const path = s.series.map((d, i) => `${i === 0 ? 'M' : 'L'} ${x(i)} ${y(d.v)}`).join(' ');
        return <path key={s.id} d={path} fill="none" stroke={s.color} strokeWidth="2.5" strokeLinejoin="round"/>;
      })}
    </svg>
  );
};

const cmpStyles = {
  rowLabel: { padding: '16px 20px', fontSize: 12, color: 'var(--ink-500)', fontWeight: 500, background: 'var(--ink-50)', display: 'flex', alignItems: 'center' },
  cell: { padding: '16px 20px', borderLeft: '1px solid var(--border)' },
};

Object.assign(window, { CompareCampaigns });