// Campaign List — live data from PulseStore, fully interactive (filter, sort, create, compare).
const { useState: useStateCL, useEffect: useEffectCL, useMemo: useMemoCL } = React;

const CampaignList = () => {
  const t = useT();
  const isMobile = useIsMobile();
  const [view, setView] = useStateCL(isMobile ? 'grid' : 'grid'); // grid or table
  const [status, setStatus] = useStateCL('all');
  const [selected, setSelected] = useStateCL(new Set());
  const [showCreate, setShowCreate] = useStateCL(false);
  const [, force] = React.useReducer(x => x + 1, 0);
  useEffectCL(() => {
    const h = () => force();
    window.addEventListener('pulse-data-change', h);
    window.addEventListener('pulse-lang-change', h);
    return () => { window.removeEventListener('pulse-data-change', h); window.removeEventListener('pulse-lang-change', h); };
  }, []);

  const campaigns = window.PulseStore ? window.PulseStore.getCampaigns() : [];

  const toggle = id => {
    const s = new Set(selected);
    s.has(id) ? s.delete(id) : s.add(id);
    setSelected(s);
  };

  const filtered = campaigns.filter(c => status === 'all' || c.status === status);
  const totalSpend = campaigns.reduce((s, c) => s + (c.budget || 0), 0);
  const totalViews = campaigns.reduce((s, c) => s + (c.actualViews || 0), 0);
  const liveCount = campaigns.filter(c => c.status === 'live').length;
  const activeCampaigns = campaigns.filter(c => c.status !== 'draft');
  const avgKpi = activeCampaigns.length
    ? Math.round(activeCampaigns.reduce((s, c) => s + (c.kpiPct || 0), 0) / activeCampaigns.length)
    : 0;

  return (
    <div style={{ padding: isMobile ? '16px' : '24px 32px 64px', maxWidth: 1400, margin: '0 auto' }}>
      {/* Page header */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <h1 style={clStyles.title}>{t('camp.title')}</h1>
          <div style={{ fontSize: 14, color: 'var(--ink-500)', marginTop: 6, maxWidth: 520 }}>{t('camp.subtitle')}</div>
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {selected.size >= 2 && (
            <a className="btn" href={`Compare.html?ids=${encodeURIComponent(Array.from(selected).join(','))}`} style={{ background: 'var(--brand-500)', color: '#FFFFFF', borderColor: 'var(--brand-500)' }}>
              <Icon name="users-group" size={14}/> {t('camp.compare_n', { n: selected.size })}
            </a>
          )}
          <button className="btn"><Icon name="download" size={14}/> {t('action.export')}</button>
          <button className="btn brand" onClick={() => setShowCreate(true)}>
            <Icon name="plus" size={14}/> {t('nav.new_campaign')}
          </button>
        </div>
      </div>

      {/* Summary strip — horizontal scroll on mobile */}
      <div style={{ ...clStyles.summaryStrip, overflowX: 'auto' }}>
        <SummaryTile label={t('camp.total')} value={campaigns.length} icon="megaphone"/>
        <div style={clStyles.divider}/>
        <SummaryTile label={t('camp.live')} value={liveCount} icon="zap" accent="live"/>
        <div style={clStyles.divider}/>
        <SummaryTile label={t('camp.total_views')} value={window.PulseStore.fmt(totalViews)} icon="eye"/>
        <div style={clStyles.divider}/>
        <SummaryTile label={t('camp.total_spend')} value={`$${(totalSpend/1000).toFixed(0)}K`} icon="trending-up"/>
        <div style={clStyles.divider}/>
        <SummaryTile label={t('camp.avg_kpi')} value={`${avgKpi}%`} icon="target"/>
      </div>

      {/* Toolbar */}
      <div style={clStyles.toolbar}>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', flexWrap: 'nowrap' }}>
          {['all','live','ended','draft'].map(s => (
            <button key={s} onClick={() => setStatus(s)} style={{
              ...clStyles.statusPill,
              ...(status === s ? clStyles.statusPillActive : {}),
              whiteSpace: 'nowrap',
            }}>
              {s === 'all' ? t('camp.all') : s === 'live' ? t('camp.live') : s === 'ended' ? t('camp.ended') : t('camp.draft')}
              <span style={{ fontSize: 10, opacity: 0.6, marginLeft: 4 }}>
                {s === 'all' ? campaigns.length : campaigns.filter(c => c.status === s).length}
              </span>
            </button>
          ))}
        </div>
        <div style={{ flex: 1 }}/>
        {!isMobile && (
          <>
            <button className="btn"><Icon name="filter" size={13}/> {t('action.filter')}</button>
            <div style={clStyles.viewToggle}>
              <button onClick={() => setView('grid')} style={{ ...clStyles.viewBtn, ...(view === 'grid' ? clStyles.viewBtnActive : {}) }}>
                <Icon name="grid" size={13}/>
              </button>
              <button onClick={() => setView('table')} style={{ ...clStyles.viewBtn, ...(view === 'table' ? clStyles.viewBtnActive : {}) }}>
                <Icon name="file-text" size={13}/>
              </button>
            </div>
          </>
        )}
      </div>

      {view === 'grid' || isMobile ? (
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(320px, 1fr))', gap: 14 }}>
          {filtered.map(c => (
            <CampaignCard key={c.id} c={c} checked={selected.has(c.id)} onToggle={() => toggle(c.id)}/>
          ))}
          {filtered.length === 0 && (
            <div className="panel" style={{ padding: 40, textAlign: 'center', color: 'var(--ink-500)', gridColumn: '1 / -1' }}>
              <Icon name="megaphone" size={28} style={{ color: 'var(--ink-400)', display: 'block', margin: '0 auto 12px' }}/>
              <div style={{ fontSize: 14, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{t('misc.empty')}</div>
            </div>
          )}
        </div>
      ) : (
        <div className="panel" style={{ padding: 0, overflow: 'auto' }}>
          <CampaignTable campaigns={filtered} selected={selected} onToggle={toggle}/>
        </div>
      )}

      {showCreate && <CreateCampaignModal onClose={() => setShowCreate(false)}/>}
    </div>
  );
};

const SummaryTile = ({ label, value, icon, accent }) => (
  <div style={{ flex: '1 0 170px', display: 'flex', alignItems: 'center', gap: 12, minWidth: 170 }}>
    <div style={{
      width: 36, height: 36, borderRadius: 6,
      background: accent === 'live' ? 'var(--brand-100)' : 'var(--ink-100)',
      color: accent === 'live' ? 'var(--brand-600)' : 'var(--ink-700)',
      display: 'grid', placeItems: 'center', flexShrink: 0,
    }}>
      <Icon name={icon} size={16}/>
    </div>
    <div>
      <div className="num" style={{ fontSize: 22, fontWeight: 600, letterSpacing: 0, lineHeight: 1 }}>{value}</div>
      <div style={{ fontSize: 10, color: 'var(--ink-500)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700 }}>{label}</div>
    </div>
  </div>
);

const campaignDisplayName = (campaign = {}) => {
  const brand = String(campaign.brand || '').trim();
  const raw = String(campaign.name || '').trim();
  if (!raw) return 'Untitled campaign';
  const separators = [' — ', ' – ', ' - '];
  for (const sep of separators) {
    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 CampaignCard = ({ c, checked, onToggle }) => {
  const t = useT();
  const daily = window.PulseStore.getDaily(c.id);
  const viewsPct = window.PulseStore.pct(c.actualViews, c.committedViews);
  const spark = (daily.length ? daily : [{ views: 0 }, { views: c.actualViews || 0 }]).slice(-14).map(d => d.views);
  const href = window.withQuery
    ? window.withQuery('Campaign Detail.html', { id: c.id })
    : `Campaign Detail.html?id=${encodeURIComponent(c.id)}`;

  return (
    <a href={href} style={{ textDecoration: 'none', display: 'block' }}>
      <div className="panel" style={{ ...clStyles.campCard, borderColor: checked ? c.brandColor : undefined }}>
        <div style={{ display: 'grid', gridTemplateColumns: '36px minmax(0, 1fr) 24px', alignItems: 'start', gap: 10, marginBottom: 4 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 6,
            background: c.brandColor,
            display: 'grid', placeItems: 'center',
            color: 'white', fontFamily: 'var(--font-display)', fontSize: 14,
            letterSpacing: 0,
          }}>
            {(c.brand || '').charAt(0)}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 10, color: 'var(--ink-500)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.brand || '1990 Agency'}</div>
            <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: 0, lineHeight: 1.15, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', wordBreak: 'break-word' }}>{campaignDisplayName(c)}</div>
            <div style={{ marginTop: 8, maxWidth: '100%' }}>
              <StatusChip status={c.status} daysLeft={c.daysLeft}/>
            </div>
          </div>
          <button onClick={(e) => { e.preventDefault(); e.stopPropagation(); onToggle(); }} style={{
            ...clStyles.checkbox,
            marginTop: 0,
            background: checked ? c.brandColor : 'transparent',
            borderColor: checked ? c.brandColor : 'var(--border-strong)',
            color: checked ? 'white' : 'transparent',
          }} aria-label="Select campaign">
            <Icon name="check" size={10} stroke={3}/>
          </button>
        </div>

        {c.status !== 'draft' ? (
          <>
            <div style={clStyles.mainStat}>
              <div>
                <div style={{ fontSize: 10, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 }}>{t('camp.views')}</div>
                <div className="num" style={{ fontSize: 26, fontWeight: 600, letterSpacing: 0 }}>{window.PulseStore.fmt(c.actualViews)}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>{t('camp.of_target', { n: window.PulseStore.fmt(c.committedViews) })}</div>
              </div>
              <div style={{ flex: 1 }}/>
              <Sparkline data={spark} color={c.brandColor} width={140} height={40}/>
            </div>

            <div style={{ marginTop: 16 }}>
              <ProgressBar pct={viewsPct} color={c.brandColor} label={t('camp.kpi_completion')} height={6}/>
            </div>

            <div style={clStyles.footRow}>
              <FootStat label={t('camp.engagement')} value={window.PulseStore.fmt(c.actualEngagement)}/>
              <FootStat label={t('camp.reach')} value={window.PulseStore.fmt(c.reach)}/>
              <FootStat label={t('camp.posts')} value={c.posts}/>
              <FootStat label={t('camp.kols')} value={c.influencerCount}/>
            </div>
          </>
        ) : (
          <div style={{ padding: '24px 0', textAlign: 'center', color: 'var(--ink-500)' }}>
            <div style={{ fontSize: 13, color: 'var(--ink-700)', fontWeight: 600, marginBottom: 4 }}>{t('camp.launches')} {c.startDate}</div>
            <div style={{ fontSize: 12 }}>{t('camp.influencers_n', { n: c.influencerCount })} · ${c.budget.toLocaleString()} {t('camp.budget')}</div>
          </div>
        )}
      </div>
    </a>
  );
};

const FootStat = ({ label, value, muted }) => (
  <div style={{ opacity: muted ? 0.5 : 1 }}>
    <div style={{ fontSize: 10, color: 'var(--ink-400)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 }}>{label}</div>
    <div className="num" style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>{value}</div>
  </div>
);

const StatusChip = ({ status, daysLeft }) => {
  const t = useT();
  if (status === 'live') return (
    <span className="chip" style={{ background: 'var(--bg-inverse)', color: 'var(--text-inverse)', borderColor: 'var(--bg-inverse)', fontSize: 10 }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--brand-500)', animation: 'pulse 2s infinite' }}/>
      {t('camp.live')} · {t('camp.days_left', { n: daysLeft })}
    </span>
  );
  if (status === 'ended') return <span className="chip" style={{ fontSize: 10 }}>{t('camp.ended')}</span>;
  if (status === 'draft') return <span className="chip brand" style={{ fontSize: 10 }}>{t('camp.draft')}</span>;
  return null;
};

const CampaignTable = ({ campaigns, selected, onToggle }) => {
  const t = useT();
  return (
    <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 720 }}>
      <thead>
        <tr style={{ background: 'var(--ink-50)', borderBottomWidth: 1, borderBottomStyle: 'solid', borderBottomColor: 'var(--border)' }}>
          <th style={clStyles.th}></th>
          <th style={clStyles.th}>{t('camp.title')}</th>
          <th style={clStyles.th}>{t('camp.status')}</th>
          <th style={{ ...clStyles.th, textAlign: 'right' }}>{t('camp.views')}</th>
          <th style={{ ...clStyles.th, textAlign: 'right' }}>{t('camp.engagement')}</th>
          <th style={{ ...clStyles.th, width: 180 }}>{t('camp.kpi_completion')}</th>
          <th style={clStyles.th}></th>
        </tr>
      </thead>
      <tbody>
        {campaigns.map(c => (
          <tr key={c.id} style={{ borderBottomWidth: 1, borderBottomStyle: 'solid', borderBottomColor: 'var(--border)' }}>
            <td style={clStyles.td}>
              <button onClick={() => onToggle(c.id)} style={{
                ...clStyles.checkbox,
                background: selected.has(c.id) ? c.brandColor : 'transparent',
                borderColor: selected.has(c.id) ? c.brandColor : 'var(--border-strong)',
                color: selected.has(c.id) ? 'white' : 'transparent',
              }}>
                <Icon name="check" size={10} stroke={3}/>
              </button>
            </td>
            <td style={clStyles.td}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 28, height: 28, borderRadius: 4, background: c.brandColor, color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontSize: 12 }}>
                  {(c.brand || '').charAt(0)}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{c.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>{c.influencerCount} KOLs · {c.startDate}</div>
                </div>
              </div>
            </td>
            <td style={clStyles.td}><StatusChip status={c.status} daysLeft={c.daysLeft}/></td>
            <td style={{ ...clStyles.td, textAlign: 'right' }}>
              <div className="num" style={{ fontWeight: 600 }}>{window.PulseStore.fmt(c.actualViews)}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-500)' }}>/ {window.PulseStore.fmt(c.committedViews)}</div>
            </td>
            <td style={{ ...clStyles.td, textAlign: 'right' }}>
              <div className="num" style={{ fontWeight: 600 }}>{window.PulseStore.fmt(c.actualEngagement)}</div>
            </td>
            <td style={clStyles.td}>
              <ProgressBar pct={c.kpiPct} color={c.brandColor} height={5}/>
            </td>
            <td style={clStyles.td}>
              <a href={window.withQuery ? window.withQuery('Campaign Detail.html', { id: c.id }) : `Campaign Detail.html?id=${encodeURIComponent(c.id)}`} className="btn ghost" style={{ padding: 6 }}><Icon name="chevron-right" size={14}/></a>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

// ===== Create Campaign modal — simple form wired to store.createCampaign =====
const CreateCampaignModal = ({ onClose }) => {
  const t = useT();
  const clients = window.PulseStore ? window.PulseStore.getClients() : [];
  const [form, setForm] = useStateCL({
    name: '',
    clientId: clients[0]?.id || '',
    startDate: new Date().toISOString().slice(0,10),
    endDate:   new Date(Date.now()+30*864e5).toISOString().slice(0,10),
    budget: 25000,
    committedViews: 5000000,
    committedEngagement: 200000,
    conversionsEnabled: false,
    status: 'draft',
  });

  const submit = () => {
    if (!form.name) return;
    window.PulseStore.createCampaign(form);
    onClose();
  };

  return (
    <div style={modalStyles.backdrop} onClick={onClose}>
      <div style={modalStyles.panel} onClick={e => e.stopPropagation()}>
        <div style={modalStyles.header}>
          <div>
            <div style={modalStyles.title}>{t('nav.new_campaign')}</div>
          </div>
          <button className="btn ghost" onClick={onClose}><Icon name="x" size={16}/></button>
        </div>
        <div style={modalStyles.body}>
          <Field label="Name">
            <input style={modalStyles.input} value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Client — Campaign name"/>
          </Field>
          <Field label="Client">
            <select style={modalStyles.input} value={form.clientId} onChange={e => setForm({ ...form, clientId: e.target.value })}>
              {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </Field>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Field label="Start">
              <input type="date" style={modalStyles.input} value={form.startDate} onChange={e => setForm({ ...form, startDate: e.target.value })}/>
            </Field>
            <Field label="End">
              <input type="date" style={modalStyles.input} value={form.endDate} onChange={e => setForm({ ...form, endDate: e.target.value })}/>
            </Field>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            <Field label="Budget (USD)">
              <input type="number" style={modalStyles.input} value={form.budget} onChange={e => setForm({ ...form, budget: +e.target.value })}/>
            </Field>
            <Field label="Committed views">
              <input type="number" style={modalStyles.input} value={form.committedViews} onChange={e => setForm({ ...form, committedViews: +e.target.value })}/>
            </Field>
            <Field label="Engagement KPI">
              <input type="number" style={modalStyles.input} value={form.committedEngagement} onChange={e => setForm({ ...form, committedEngagement: +e.target.value })}/>
            </Field>
          </div>
        </div>
        <div style={modalStyles.footer}>
          <button className="btn" onClick={onClose}>{t('action.cancel')}</button>
          <button className="btn brand" onClick={submit}>{t('action.save')}</button>
        </div>
      </div>
    </div>
  );
};

const Field = ({ label, children }) => (
  <label style={{ display: 'block', marginBottom: 12 }}>
    <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--text-muted)', marginBottom: 6 }}>{label}</div>
    {children}
  </label>
);

const modalStyles = {
  backdrop: { position: 'fixed', inset: 0, zIndex: 50, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 },
  panel: { width: '100%', maxWidth: 560, maxHeight: '90vh', overflowY: 'auto', background: 'var(--bg-panel)', borderTop: '4px solid var(--brand-500)', boxShadow: 'var(--sh-lg)' },
  header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px', borderBottom: '1px solid var(--border)' },
  title: { fontFamily: 'var(--font-display)', fontSize: 18, textTransform: 'uppercase', letterSpacing: '0.02em' },
  body: { padding: 20 },
  footer: { padding: 16, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'flex-end', gap: 8 },
  input: { width: '100%', padding: '9px 12px', fontSize: 13, border: '1px solid var(--border-strong)', background: 'var(--bg)', color: 'var(--text-primary)', fontFamily: 'inherit', borderRadius: 4 },
};

const clStyles = {
  title: { fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 5vw, 44px)', fontWeight: 400, margin: 0, letterSpacing: 0, textTransform: 'uppercase' },
  summaryStrip: { display: 'flex', alignItems: 'center', background: 'var(--bg-panel)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 20px', marginBottom: 20, boxShadow: 'var(--sh-xs)', gap: 12 },
  divider: { width: 1, minWidth: 1, height: 32, background: 'var(--border)', margin: '0 12px', flexShrink: 0 },
  toolbar: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, flexWrap: 'wrap' },
  statusPill: { padding: '6px 12px', fontSize: 12, borderRadius: 4, background: 'var(--bg-panel)', border: '1px solid var(--border)', color: 'var(--ink-600)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', fontFamily: 'inherit' },
  statusPillActive: { background: 'var(--bg-inverse)', color: 'var(--text-inverse)', borderColor: 'var(--bg-inverse)' },
  viewToggle: { display: 'flex', background: 'var(--ink-100)', padding: 2, borderRadius: 4 },
  viewBtn: { padding: 6, borderRadius: 3, color: 'var(--ink-500)' },
  viewBtnActive: { background: 'var(--bg-panel)', color: 'var(--ink-900)', boxShadow: 'var(--sh-xs)' },
  campCard: { padding: 20, position: 'relative', display: 'block', borderWidth: 1.5, transition: 'all 0.15s ease' },
  checkbox: { width: 20, height: 20, borderRadius: 4, border: '1.5px solid', display: 'grid', placeItems: 'center', cursor: 'pointer', transition: 'all 0.15s' },
  mainStat: { display: 'flex', alignItems: 'flex-end', gap: 16, marginTop: 20 },
  footRow: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, paddingTop: 16, marginTop: 16, borderTop: '1px solid var(--border)' },
  th: { textAlign: 'left', padding: '12px 16px', fontSize: 11, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 },
  td: { padding: '14px 16px', fontSize: 13, verticalAlign: 'middle' },
};

Object.assign(window, { CampaignList, StatusChip, CampaignCard, CampaignTable, CreateCampaignModal, SummaryTile, FootStat });