// MissionChef — Marketing Module · Dashboard + Newsletter (Subscribers, Campaigns, Editor, Automations)

function MarketingScreen({ Topbar }) {
  const store = useStore();
  const [tab, setTab] = React.useState('dashboard');
  const [editingCampaign, setEditingCampaign] = React.useState(null);
  const [editingPost, setEditingPost] = React.useState(null);
  const [openMessage, setOpenMessage] = React.useState(null);

  const tabs = [
    { id: 'dashboard',  label: 'Übersicht' },
    { id: 'newsletter', label: 'Newsletter' },
    { id: 'social',     label: 'Social Media' },
    { id: 'inbox',      label: 'Inbox',      badge: store.inbox.filter(m => m.unread).length },
    { id: 'analytics',  label: 'Analytics' },
  ];

  return (
    <>
      <Topbar
        title="Marketing"
        subtitle="Newsletter · Social Media · Inbox · KI-Vorschläge"
        actions={
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="mc-btn ghost sm" onClick={() => { setTab('newsletter'); setEditingCampaign('new'); }}>
              <McIcon2 name="mail" size={14} />Newsletter
            </button>
            <button className="mc-btn leaf sm" onClick={() => { setTab('social'); setEditingPost('new'); }}>
              <McIcon2 name="plus" size={14} />Neuer Post
            </button>
          </div>
        }
      />

      <div style={{ display: 'flex', gap: 0, padding: '0 28px', borderBottom: '1px solid var(--mc-rule)', background: 'var(--mc-surface)', flexShrink: 0 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding: '14px 20px', background: 'transparent', border: 'none',
            borderBottom: tab === t.id ? '2px solid var(--mc-leaf)' : '2px solid transparent',
            color: tab === t.id ? 'var(--mc-ink)' : 'var(--mc-ink-muted)',
            fontFamily: 'inherit', fontSize: 14, fontWeight: tab === t.id ? 500 : 400,
            cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
            marginBottom: -1,
          }}>
            {t.label}
            {t.badge > 0 && (
              <span style={{ fontSize: 10, padding: '1px 6px', background: 'var(--mc-ember)', color: '#FBF7EE', borderRadius: 999, fontFamily: "'JetBrains Mono',monospace" }}>
                {t.badge}
              </span>
            )}
          </button>
        ))}
      </div>

      <div className="mc-scroll" style={{ flex: 1, overflow: 'auto', background: 'var(--mc-bg)' }}>
        {tab === 'dashboard'  && <MarketingDashboard onTab={setTab} />}
        {tab === 'newsletter' && <NewsletterTab editingCampaign={editingCampaign} setEditingCampaign={setEditingCampaign} />}
        {tab === 'social'     && <SocialTab editingPost={editingPost} setEditingPost={setEditingPost} />}
        {tab === 'inbox'      && <InboxTab openMessage={openMessage} setOpenMessage={setOpenMessage} />}
        {tab === 'analytics'  && <AnalyticsTab />}
      </div>
    </>
  );
}

// ─── DASHBOARD ──────────────────────────────────────────────────────────────
function MarketingDashboard({ onTab }) {
  const store = useStore();
  const [summary, setSummary] = React.useState(null);
  React.useEffect(() => { mcApi.get('/marketing-summary').then(setSummary); }, [store]);

  if (!summary) return <div style={{ padding: 40 }} className="mc-eyebrow">Lädt …</div>;

  const upcomingPosts = store.posts.filter(p => p.status === 'scheduled')
    .sort((a, b) => new Date(a.scheduledAt) - new Date(b.scheduledAt))
    .slice(0, 5);
  const upcomingCampaigns = store.campaigns.filter(c => c.status === 'scheduled' || c.status === 'draft').slice(0, 3);
  const recentInbox = store.inbox.slice(0, 4);

  return (
    <div style={{ padding: 28, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
      {/* KPI cards */}
      <Kpi label="Newsletter Abonnenten" value={fmtINT(summary.subscribersActive)} delta={`+${summary.subscribersNew30d} · 30 Tage`} icon="mail" />
      <Kpi label="Öffnungsrate · Schnitt" value={summary.openRate.toFixed(1) + '%'} delta="Branchenschnitt: 26%" tone={summary.openRate > 30 ? 'good' : 'neutral'} icon="eye" />
      <Kpi label="Follower gesamt" value={fmtINT(summary.followersTotal)} delta={`+${summary.followersGrowth30d} · 30 Tage`} icon="megaphone" />
      <Kpi label="Inbox · ungelesen" value={summary.unreadInbox} delta={`${summary.scheduledPosts} Posts geplant`} tone={summary.unreadInbox > 0 ? 'warn' : 'good'} icon="chat" />

      {/* AI suggestions row */}
      <div className="mc-card" style={{ gridColumn: 'span 4', padding: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <McIcon2 name="sparkle" size={18} color="var(--mc-leaf-700)" />
            <div className="mc-eyebrow">KI-Vorschläge · Themen für diese Woche</div>
          </div>
          <span style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>Basierend auf Saison · Engagement · Reservierungen</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {store.aiSuggestions.map(s => (
            <div key={s.id} className="mc-card-2" style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.01em' }}>{s.topic}</div>
              <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', lineHeight: 1.5, flex: 1 }}>{s.reason}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6, paddingTop: 8, borderTop: '1px solid var(--mc-rule)' }}>
                <span className="mc-mono" style={{ fontSize: 10, color: 'var(--mc-ink-muted)' }}>{s.bestTime}</span>
                <button onClick={() => onTab('social')} style={{ fontSize: 11, background: 'transparent', border: 'none', color: 'var(--mc-leaf-900)', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', gap: 4 }}>
                  Übernehmen <McIcon2 name="arrow" size={12} />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Upcoming posts */}
      <div className="mc-card" style={{ gridColumn: 'span 2', padding: 0 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--mc-rule)', display: 'flex', justifyContent: 'space-between' }}>
          <div className="mc-eyebrow">Anstehende Posts</div>
          <button onClick={() => onTab('social')} className="mc-eyebrow" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--mc-ink-muted)' }}>Kalender →</button>
        </div>
        {upcomingPosts.map(p => {
          const d = new Date(p.scheduledAt);
          return (
            <div key={p.id} className="mc-row" style={{ padding: '12px 20px', borderBottom: '1px solid var(--mc-rule)', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <PostThumb post={p} size={56} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', gap: 6, marginBottom: 4 }}>
                  {p.channels.map(cid => <ChannelBadge key={cid} channelId={cid} />)}
                </div>
                <div style={{ fontSize: 13, lineHeight: 1.4, color: 'var(--mc-ink)', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{p.text}</div>
                <div className="mc-mono" style={{ fontSize: 10, color: 'var(--mc-ink-dim)', marginTop: 4 }}>
                  {d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit' })} · {d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
                </div>
              </div>
            </div>
          );
        })}
        {upcomingPosts.length === 0 && <div style={{ padding: 28, textAlign: 'center', color: 'var(--mc-ink-dim)', fontSize: 13 }}>Keine geplanten Posts.</div>}
      </div>

      {/* Upcoming campaigns + Inbox preview */}
      <div className="mc-card" style={{ gridColumn: 'span 2', padding: 0 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--mc-rule)', display: 'flex', justifyContent: 'space-between' }}>
          <div className="mc-eyebrow">Newsletter · Geplant & Entwürfe</div>
          <button onClick={() => onTab('newsletter')} className="mc-eyebrow" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--mc-ink-muted)' }}>Alle →</button>
        </div>
        {upcomingCampaigns.map(c => (
          <div key={c.id} className="mc-row" style={{ padding: '14px 20px', borderBottom: '1px solid var(--mc-rule)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{c.name}</div>
              <Pill tone={c.status === 'scheduled' ? 'leaf' : 'default'}>
                {c.status === 'scheduled' ? `Geplant · ${new Date(c.scheduled).toLocaleDateString('de-DE',{day:'2-digit',month:'2-digit'})}` : 'Entwurf'}
              </Pill>
            </div>
            <div style={{ fontSize: 12, color: 'var(--mc-ink-muted)', marginTop: 4 }}>{c.subject}</div>
          </div>
        ))}
        {upcomingCampaigns.length === 0 && <div style={{ padding: 28, textAlign: 'center', color: 'var(--mc-ink-dim)', fontSize: 13 }}>Keine geplanten Mailings.</div>}
      </div>

      {/* Recent inbox */}
      <div className="mc-card" style={{ gridColumn: 'span 2', padding: 0 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--mc-rule)', display: 'flex', justifyContent: 'space-between' }}>
          <div className="mc-eyebrow">Inbox · Neueste Nachrichten</div>
          <button onClick={() => onTab('inbox')} className="mc-eyebrow" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--mc-ink-muted)' }}>Alle →</button>
        </div>
        {recentInbox.map(m => (
          <div key={m.id} className="mc-row" style={{ padding: '12px 20px', borderBottom: '1px solid var(--mc-rule)', display: 'flex', gap: 12 }}>
            <div style={{ width: 32, height: 32, background: m.avatar, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600, flexShrink: 0 }}>
              {m.from.slice(0,1).toUpperCase()}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div style={{ fontSize: 13, fontWeight: m.unread ? 600 : 400 }}>{m.from}</div>
                <span className="mc-mono" style={{ fontSize: 10, color: 'var(--mc-ink-dim)' }}>{relTime(m.received)}</span>
              </div>
              <div style={{ fontSize: 12, color: 'var(--mc-ink-muted)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.preview}</div>
            </div>
            {m.unread && <div style={{ width: 7, height: 7, background: 'var(--mc-ember)', borderRadius: '50%', marginTop: 12 }} />}
          </div>
        ))}
      </div>

      {/* Quick performance overview */}
      <div className="mc-card" style={{ gridColumn: 'span 2', padding: 20 }}>
        <div className="mc-eyebrow" style={{ marginBottom: 14 }}>Letzte 30 Tage · Reichweite</div>
        <SparkChart data={store.marketingAnalytics.map(d => d.reach)} height={120} color="var(--mc-leaf-700)" />
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--mc-rule)' }}>
          <Stat small label="Reichweite gesamt" value={fmtINT(store.marketingAnalytics.reduce((a,d) => a+d.reach, 0))} />
          <Stat small label="Engagement" value={fmtINT(store.marketingAnalytics.reduce((a,d) => a+d.engagement, 0))} />
          <Stat small label="Neue Abos" value={fmtINT(store.marketingAnalytics.reduce((a,d) => a+d.newSubs, 0))} />
        </div>
      </div>
    </div>
  );
}

function Kpi({ label, value, delta, tone, icon }) {
  const dColor = tone === 'good' ? 'var(--mc-leaf-900)' : tone === 'warn' ? 'var(--mc-ember-700)' : 'var(--mc-ink-dim)';
  return (
    <div className="mc-card" style={{ padding: 18 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div className="mc-eyebrow">{label}</div>
        {icon && <McIcon2 name={icon} size={16} color="var(--mc-ink-dim)" />}
      </div>
      <div className="mc-num" style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 10 }}>{value}</div>
      <div style={{ fontSize: 11, color: dColor, marginTop: 4 }}>{delta}</div>
    </div>
  );
}

function Stat({ label, value, small }) {
  return (
    <div>
      <div className="mc-eyebrow">{label}</div>
      <div className="mc-num" style={{ fontSize: small ? 18 : 22, fontWeight: 500, marginTop: 4 }}>{value}</div>
    </div>
  );
}

function SparkChart({ data, height = 80, color = 'var(--mc-leaf-700)' }) {
  if (!data || data.length === 0) return null;
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const w = 100;
  const points = data.map((v, i) => `${(i / (data.length - 1)) * w},${100 - ((v - min) / range) * 100}`).join(' ');
  const fillPoints = `0,100 ${points} ${w},100`;
  return (
    <svg width="100%" height={height} viewBox={`0 0 ${w} 100`} preserveAspectRatio="none" style={{ display: 'block' }}>
      <polygon points={fillPoints} fill={color} opacity="0.15" />
      <polyline points={points} stroke={color} strokeWidth="1.5" fill="none" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}

function relTime(iso) {
  const m = (Date.now() - new Date(iso).getTime()) / 60000;
  if (m < 60) return Math.round(m) + ' Min.';
  if (m < 60*24) return Math.round(m/60) + ' Std.';
  return Math.round(m/(60*24)) + ' Tage';
}

function ChannelBadge({ channelId, size = 16 }) {
  const ch = mcStore.channels.find(c => c.id === channelId);
  if (!ch) return null;
  const colors = { instagram: '#E1306C', facebook: '#1877F2', google: '#34A853' };
  return (
    <span style={{ width: size, height: size, background: colors[ch.platform], display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 3, color: '#fff', flexShrink: 0 }}>
      <McIcon2 name={ch.platform} size={size - 4} stroke={2} />
    </span>
  );
}

// ─── NEWSLETTER TAB ─────────────────────────────────────────────────────────
function NewsletterTab({ editingCampaign, setEditingCampaign }) {
  const store = useStore();
  const [sub, setSub] = React.useState('campaigns'); // campaigns | subscribers | automations

  if (editingCampaign) {
    return <CampaignEditor id={editingCampaign} onClose={() => setEditingCampaign(null)} />;
  }

  return (
    <div style={{ padding: 28 }}>
      <div style={{ display: 'flex', gap: 6, marginBottom: 20 }}>
        {[['campaigns','Kampagnen'],['subscribers','Abonnenten · ' + store.subscribers.length],['automations','Automationen']].map(([id,label]) => (
          <button key={id} onClick={() => setSub(id)} className={sub===id?'mc-btn ink sm':'mc-btn ghost sm'} style={{
            background: sub===id ? 'var(--mc-ink)' : 'transparent',
            color: sub===id ? 'var(--mc-bg)' : 'var(--mc-ink-muted)',
            borderColor: sub===id ? 'var(--mc-ink)' : 'var(--mc-rule)',
          }}>{label}</button>
        ))}
      </div>
      {sub === 'campaigns'   && <CampaignsList onEdit={setEditingCampaign} />}
      {sub === 'subscribers' && <SubscribersList />}
      {sub === 'automations' && <AutomationsList />}
    </div>
  );
}

function CampaignsList({ onEdit }) {
  const store = useStore();
  return (
    <div className="mc-card" style={{ padding: 0 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2.5fr 1fr 1fr 1fr 1fr 1fr', padding: '12px 20px', borderBottom: '1px solid var(--mc-rule)', fontSize: 11 }} className="mc-eyebrow">
        <div>Kampagne</div>
        <div>Status</div>
        <div style={{ textAlign: 'right' }}>Empfänger</div>
        <div style={{ textAlign: 'right' }}>Öffnung</div>
        <div style={{ textAlign: 'right' }}>Klick</div>
        <div style={{ textAlign: 'right' }}>Umsatz</div>
      </div>
      {store.campaigns.map(c => {
        const openRate = c.sent ? (c.opened / c.sent) * 100 : 0;
        const clickRate = c.sent ? (c.clicked / c.sent) * 100 : 0;
        const seg = store.segments.find(s => s.id === c.segment);
        return (
          <div key={c.id} className="mc-row" onClick={() => onEdit(c.id)} style={{ display: 'grid', gridTemplateColumns: '2.5fr 1fr 1fr 1fr 1fr 1fr', padding: '14px 20px', borderBottom: '1px solid var(--mc-rule)', cursor: 'pointer', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 3 }}>{c.name}</div>
              <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)' }}>{c.subject} · {seg?.name}</div>
            </div>
            <div>
              <Pill tone={c.status === 'sent' ? 'leaf' : c.status === 'scheduled' ? 'ember' : 'default'}>
                {c.status === 'sent' ? `Versendet ${new Date(c.sentAt).toLocaleDateString('de-DE',{day:'2-digit',month:'2-digit'})}` : c.status === 'scheduled' ? `Geplant ${new Date(c.scheduled).toLocaleDateString('de-DE',{day:'2-digit',month:'2-digit'})}` : 'Entwurf'}
              </Pill>
            </div>
            <div className="mc-num" style={{ textAlign: 'right', fontSize: 14 }}>{c.sent ? fmtINT(c.sent) : '—'}</div>
            <div className="mc-num" style={{ textAlign: 'right', fontSize: 14 }}>{c.sent ? openRate.toFixed(1) + '%' : '—'}</div>
            <div className="mc-num" style={{ textAlign: 'right', fontSize: 14 }}>{c.sent ? clickRate.toFixed(1) + '%' : '—'}</div>
            <div className="mc-num" style={{ textAlign: 'right', fontSize: 14, color: c.revenue ? 'var(--mc-leaf-900)' : 'var(--mc-ink-dim)' }}>{c.revenue ? fmtEUR(c.revenue) : '—'}</div>
          </div>
        );
      })}
    </div>
  );
}

function SubscribersList() {
  const store = useStore();
  const [search, setSearch] = React.useState('');
  const [segFilter, setSegFilter] = React.useState('all');
  const [statusFilter, setStatusFilter] = React.useState('all');

  const filtered = store.subscribers.filter(s => {
    if (search && !s.name.toLowerCase().includes(search.toLowerCase()) && !s.email.toLowerCase().includes(search.toLowerCase())) return false;
    if (segFilter !== 'all' && !s.segments.includes(segFilter)) return false;
    if (statusFilter !== 'all' && s.status !== statusFilter) return false;
    return true;
  }).slice(0, 80); // cap rendered rows for perf

  const allSegs = ['VIP','Regulars','Newsletter only','Family','Birthday club','Lapsed','Wine lovers','Event guests'];

  return (
    <div>
      {/* Segments overview */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 20 }}>
        {store.segments.slice(0, 8).map(s => (
          <div key={s.id} className="mc-card-2" style={{ padding: 12 }}>
            <div className="mc-eyebrow" style={{ fontSize: 9 }}>{s.dynamic ? 'Dynamisch' : 'Statisch'}</div>
            <div style={{ fontSize: 13, fontWeight: 500, marginTop: 4 }}>{s.name}</div>
            <div className="mc-num" style={{ fontSize: 18, fontWeight: 500, marginTop: 4 }}>{fmtINT(s.count)}</div>
          </div>
        ))}
      </div>

      {/* Filters */}
      <div className="mc-card" style={{ padding: '12px 16px', display: 'flex', gap: 12, alignItems: 'center', marginBottom: 0, borderBottom: 'none' }}>
        <input className="mc-input" style={{ flex: 1 }} placeholder="Name oder E-Mail suchen…" value={search} onChange={e => setSearch(e.target.value)} />
        <select className="mc-input" style={{ width: 200 }} value={segFilter} onChange={e => setSegFilter(e.target.value)}>
          <option value="all">Alle Segmente</option>
          {allSegs.map(s => <option key={s} value={s}>{s}</option>)}
        </select>
        <select className="mc-input" style={{ width: 160 }} value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
          <option value="all">Alle Status</option>
          <option value="active">Aktiv</option>
          <option value="pending">Ausstehend</option>
          <option value="unsubscribed">Abgemeldet</option>
        </select>
      </div>

      {/* List */}
      <div className="mc-card" style={{ padding: 0, borderTop: 'none' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 2.5fr 1.5fr 1fr 1fr', padding: '10px 16px', borderBottom: '1px solid var(--mc-rule)' }} className="mc-eyebrow">
          <div>Name</div><div>E-Mail</div><div>Segmente</div><div>Quelle</div><div style={{ textAlign: 'right' }}>Status</div>
        </div>
        {filtered.map(s => (
          <div key={s.id} className="mc-row" style={{ display: 'grid', gridTemplateColumns: '2fr 2.5fr 1.5fr 1fr 1fr', padding: '10px 16px', borderBottom: '1px solid var(--mc-rule)', alignItems: 'center', fontSize: 13 }}>
            <div style={{ fontWeight: 500 }}>{s.name}</div>
            <div className="mc-mono" style={{ fontSize: 11, color: 'var(--mc-ink-muted)' }}>{s.email}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>{s.segments.map(seg => <Pill key={seg}>{seg}</Pill>)}</div>
            <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)' }}>{s.source}</div>
            <div style={{ textAlign: 'right' }}>
              <Pill tone={s.status === 'active' ? 'leaf' : s.status === 'pending' ? 'ember' : 'default'}>
                {s.status === 'active' ? 'Aktiv' : s.status === 'pending' ? 'Ausstehend' : 'Abgemeldet'}
              </Pill>
            </div>
          </div>
        ))}
        {filtered.length === 0 && <div style={{ padding: 40, textAlign: 'center', color: 'var(--mc-ink-dim)' }}>Keine Treffer.</div>}
        {store.subscribers.length > filtered.length && filtered.length === 80 && (
          <div style={{ padding: 14, textAlign: 'center', fontSize: 11, color: 'var(--mc-ink-dim)' }} className="mc-eyebrow">
            80 von {fmtINT(store.subscribers.length)} angezeigt — Filter verfeinern für mehr
          </div>
        )}
      </div>
    </div>
  );
}

function AutomationsList() {
  const store = useStore();
  return (
    <div className="mc-card" style={{ padding: 0 }}>
      {store.automations.map(a => (
        <div key={a.id} className="mc-row" style={{ padding: '18px 20px', borderBottom: '1px solid var(--mc-rule)', display: 'grid', gridTemplateColumns: '40px 2fr 2fr 1fr 1fr 80px', gap: 16, alignItems: 'center' }}>
          <div style={{ width: 36, height: 36, background: a.active ? 'color-mix(in oklab, var(--mc-leaf) 25%, var(--mc-surface))' : 'var(--mc-surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: a.active ? 'var(--mc-leaf-900)' : 'var(--mc-ink-dim)' }}>
            <McIcon2 name="sparkle" size={18} />
          </div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{a.name}</div>
            <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 2 }}>Trigger: {a.trigger}</div>
          </div>
          <div>
            <div className="mc-eyebrow">30 Tage</div>
            <div className="mc-num" style={{ fontSize: 14, marginTop: 2 }}>{a.sent30d} Mails</div>
          </div>
          <div>
            <div className="mc-eyebrow">Öffnungsrate</div>
            <div className="mc-num" style={{ fontSize: 14, marginTop: 2 }}>{a.openRate}%</div>
          </div>
          <div>
            <div className="mc-eyebrow">Letzter Lauf</div>
            <div style={{ fontSize: 12, marginTop: 2 }}>{relTime(a.lastRun)}</div>
          </div>
          <button onClick={() => mcApi.patch(`/automations/${a.id}`, { active: !a.active })} style={{
            background: a.active ? 'var(--mc-leaf)' : 'var(--mc-surface-2)',
            border: '1px solid var(--mc-rule)', padding: '6px 12px', cursor: 'pointer', fontSize: 11,
            color: a.active ? '#1B1B17' : 'var(--mc-ink-muted)', fontFamily: "'JetBrains Mono',monospace", letterSpacing: '.1em', textTransform: 'uppercase',
          }}>
            {a.active ? 'AN' : 'AUS'}
          </button>
        </div>
      ))}
    </div>
  );
}

// ─── CAMPAIGN EDITOR ────────────────────────────────────────────────────────
function CampaignEditor({ id, onClose }) {
  const store = useStore();
  const isNew = id === 'new';
  const camp = isNew ? null : store.campaigns.find(c => c.id === id);

  const [draft, setDraft] = React.useState(() => camp || {
    name: 'Neue Kampagne', subject: '', preview: '', segment: 'sg-all', template: 'newsletter-image', status: 'draft',
  });

  const segment = store.segments.find(s => s.id === draft.segment);
  const update = (k, v) => setDraft(d => ({ ...d, [k]: v }));

  const send = () => {
    if (isNew) {
      mcApi.post('/campaigns', { ...draft, status: 'sent', sentAt: new Date().toISOString(), sent: segment?.count || 0 });
    } else {
      mcApi.patch(`/campaigns/${id}`, { status: 'sent', sentAt: new Date().toISOString(), sent: segment?.count || 0 });
    }
    onClose();
  };

  return (
    <div style={{ display: 'flex', minHeight: '100%' }}>
      {/* LEFT: form */}
      <div style={{ width: 460, padding: 28, borderRight: '1px solid var(--mc-rule)', background: 'var(--mc-surface)', flexShrink: 0 }}>
        <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--mc-ink-muted)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, padding: 0, fontSize: 12, marginBottom: 20 }}>
          <McIcon2 name="back" size={14} />Zurück
        </button>

        <div className="mc-eyebrow">{isNew ? 'Neue Kampagne' : 'Kampagne bearbeiten'}</div>
        <input className="mc-input" style={{ marginTop: 8, fontSize: 22, padding: '6px 0', border: 'none', borderBottom: '1px solid var(--mc-rule)', fontWeight: 500, letterSpacing: '-0.02em' }} value={draft.name} onChange={e => update('name', e.target.value)} placeholder="Kampagnen-Name" />

        <div style={{ marginTop: 24 }}>
          <div className="mc-eyebrow" style={{ marginBottom: 6 }}>Betreff</div>
          <input className="mc-input" value={draft.subject} onChange={e => update('subject', e.target.value)} placeholder="z. B. Frühlingsmenü startet diese Woche" />
        </div>

        <div style={{ marginTop: 16 }}>
          <div className="mc-eyebrow" style={{ marginBottom: 6 }}>Preview-Text</div>
          <input className="mc-input" value={draft.preview} onChange={e => update('preview', e.target.value)} placeholder="Erste Zeile der Mail (im Posteingang sichtbar)" />
        </div>

        <div style={{ marginTop: 16 }}>
          <div className="mc-eyebrow" style={{ marginBottom: 6 }}>Empfänger-Segment</div>
          <select className="mc-input" value={draft.segment} onChange={e => update('segment', e.target.value)}>
            {store.segments.map(s => <option key={s.id} value={s.id}>{s.name} · {fmtINT(s.count)} Empfänger</option>)}
          </select>
        </div>

        <div style={{ marginTop: 16 }}>
          <div className="mc-eyebrow" style={{ marginBottom: 6 }}>Template</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {['newsletter-image','event-invite','newsletter-promo','reactivation','birthday','plain'].map(t => (
              <button key={t} onClick={() => update('template', t)} style={{
                padding: '12px 8px', background: draft.template === t ? 'var(--mc-ink)' : 'var(--mc-surface-2)',
                color: draft.template === t ? 'var(--mc-bg)' : 'var(--mc-ink)',
                border: '1px solid ' + (draft.template === t ? 'var(--mc-ink)' : 'var(--mc-rule)'),
                fontSize: 11, cursor: 'pointer', fontFamily: 'inherit', letterSpacing: '-0.005em',
              }}>{t}</button>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--mc-rule)', display: 'flex', gap: 8 }}>
          <button className="mc-btn ghost sm" style={{ flex: 1 }} onClick={onClose}>Speichern · Entwurf</button>
          <button className="mc-btn leaf sm" style={{ flex: 1 }} onClick={send}>
            <McIcon2 name="send" size={14} />Jetzt senden
          </button>
        </div>
      </div>

      {/* RIGHT: preview */}
      <div style={{ flex: 1, padding: 40, background: 'var(--mc-bg)', display: 'flex', flexDirection: 'column', alignItems: 'center', overflow: 'auto' }}>
        <div className="mc-eyebrow" style={{ marginBottom: 14 }}>Vorschau · {segment?.name}</div>
        <NewsletterPreview draft={draft} biz={store.biz} />
      </div>
    </div>
  );
}

function NewsletterPreview({ draft, biz }) {
  return (
    <div style={{ width: 600, background: '#FFFFFF', boxShadow: '0 20px 60px -30px rgba(0,0,0,.2)', color: '#1B1B17' }}>
      {/* Inbox-style header */}
      <div style={{ padding: 18, borderBottom: '1px solid #E8E2D2', background: '#FAF6EB' }}>
        <div style={{ fontSize: 11, color: '#8A8178', fontFamily: "'JetBrains Mono',monospace", letterSpacing: '.1em', textTransform: 'uppercase' }}>Von · {biz.name} &lt;hallo@osteria-botanica.de&gt;</div>
        <div style={{ fontSize: 18, fontWeight: 500, marginTop: 6 }}>{draft.subject || 'Betreff der Mail'}</div>
        {draft.preview && <div style={{ fontSize: 13, color: '#564F47', marginTop: 4 }}>{draft.preview}</div>}
      </div>

      {/* Hero image placeholder */}
      {draft.template !== 'plain' && (
        <div style={{ height: 240, background: 'linear-gradient(135deg, #AEC854 0%, #6E8A28 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 30% 40%, rgba(255,255,255,.2), transparent 60%)' }} />
          <McLogoTile size={64} />
        </div>
      )}

      {/* Body */}
      <div style={{ padding: '36px 40px' }}>
        <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.15, marginBottom: 16 }}>{draft.subject || 'Ihre Headline hier'}</div>
        <div style={{ fontSize: 14, color: '#564F47', lineHeight: 1.7, marginBottom: 24 }}>
          Liebe Gäste,<br/><br/>
          {draft.preview || 'Hier kommt der Einleitungstext der Mail.'} <br/><br/>
          Wir freuen uns, Ihnen unsere neuen saisonalen Highlights vorzustellen. Frische Zutaten, lokale Produzenten, drei Wochen lang in der Karte.
        </div>
        <a style={{ display: 'inline-block', background: '#1B1B17', color: '#F4EFE2', padding: '14px 28px', textDecoration: 'none', fontSize: 14, fontWeight: 500 }}>Tisch reservieren</a>

        <div style={{ marginTop: 36, paddingTop: 24, borderTop: '1px solid #E8E2D2', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
          {['Antipasti', 'Primi', 'Secondi'].map((c, i) => (
            <div key={c}>
              <div style={{ width: '100%', height: 100, background: ['#F4EFE2','#ECE4D1','#FAF6EB'][i] }} />
              <div style={{ fontSize: 12, fontWeight: 500, marginTop: 8 }}>{c}</div>
              <div style={{ fontSize: 11, color: '#8A8178', marginTop: 2 }}>Frische Saison-Auswahl</div>
            </div>
          ))}
        </div>
      </div>

      {/* Footer */}
      <div style={{ padding: 24, background: '#1B1B17', color: '#8A8178', fontSize: 11, textAlign: 'center' }}>
        <div style={{ color: '#F4EFE2', marginBottom: 8 }}>{biz.name} · {biz.address}, {biz.zip} {biz.city}</div>
        <div>Sie erhalten diese Mail, weil Sie sich angemeldet haben. <span style={{ textDecoration: 'underline' }}>Abmelden</span> · <span style={{ textDecoration: 'underline' }}>Profil verwalten</span></div>
      </div>
    </div>
  );
}

Object.assign(window, { MarketingScreen, MarketingDashboard, ChannelBadge, PostThumb: window.PostThumb || (() => null), relTime, SparkChart, Kpi, Stat });