// Campaigns v2 — list of bulk WhatsApp campaigns with template preview drawer.
// Layout: 60 (rail) | 240 (sidebar) | 1fr (table) | 360 (preview drawer).

const CAMP_I18N = {
  en: {
    title: 'Campaigns', status: 'Status', labels: 'Labels', newCampaign: 'New campaign',
    searchPh: 'Search campaigns…',
    stAll: 'All', stScheduled: 'Scheduled', stSent: 'Sent', stDraft: 'Draft', stFailed: 'Failed',
    colName: 'Campaign', colTemplate: 'Template', colStatus: 'Status', colRecipients: 'Recipients',
    colDelivered: 'Delivered', colRead: 'Read', colWhen: 'When',
    preview: 'Preview', recipients: 'Recipients', template: 'Template',
    pending: 'Pending', sent: 'Sent', delivered: 'Delivered', read: 'Read', failed: 'Failed',
    sendNow: 'Send now', duplicate: 'Duplicate',
    empty: 'Select a campaign to preview',
    utility: 'Utility', marketing: 'Marketing', authentication: 'Authentication',
    tpl1Body: 'Hi {{1}}, your order #{{2}} has shipped. Track it with the button below.',
    tpl2Body: 'Spring sale is live — up to 40% off. Shop the collection before April 30.',
    tpl3Body: 'Reminder: your appointment with {{1}} is tomorrow at {{2}}. Reply YES to confirm.',
    tpl4Body: 'Your verification code is {{1}}. It expires in 10 minutes.',
    btnTrack: 'Track order', btnShop: 'Shop now', btnConfirm: 'Confirm', btnReschedule: 'Reschedule'
  },
  es: {
    title: 'Campañas', status: 'Estado', labels: 'Etiquetas', newCampaign: 'Nueva campaña',
    searchPh: 'Buscar campañas…',
    stAll: 'Todas', stScheduled: 'Programadas', stSent: 'Enviadas', stDraft: 'Borradores', stFailed: 'Fallidas',
    colName: 'Campaña', colTemplate: 'Plantilla', colStatus: 'Estado', colRecipients: 'Destinatarios',
    colDelivered: 'Entregados', colRead: 'Leídos', colWhen: 'Cuándo',
    preview: 'Vista previa', recipients: 'Destinatarios', template: 'Plantilla',
    pending: 'Pendientes', sent: 'Enviados', delivered: 'Entregados', read: 'Leídos', failed: 'Fallidos',
    sendNow: 'Enviar ahora', duplicate: 'Duplicar',
    empty: 'Selecciona una campaña para previsualizar',
    utility: 'Utilidad', marketing: 'Marketing', authentication: 'Autenticación',
    tpl1Body: 'Hola {{1}}, tu pedido #{{2}} ha sido enviado. Puedes seguirlo con el botón.',
    tpl2Body: 'Rebajas de primavera — hasta 40% de descuento. Compra antes del 30 de abril.',
    tpl3Body: 'Recordatorio: tu cita con {{1}} es mañana a las {{2}}. Responde SÍ para confirmar.',
    tpl4Body: 'Tu código de verificación es {{1}}. Caduca en 10 minutos.',
    btnTrack: 'Seguir pedido', btnShop: 'Comprar ahora', btnConfirm: 'Confirmar', btnReschedule: 'Reprogramar'
  },
  pt: {
    title: 'Campanhas', status: 'Estado', labels: 'Etiquetas', newCampaign: 'Nova campanha',
    searchPh: 'Pesquisar campanhas…',
    stAll: 'Todas', stScheduled: 'Agendadas', stSent: 'Enviadas', stDraft: 'Rascunhos', stFailed: 'Falhadas',
    colName: 'Campanha', colTemplate: 'Modelo', colStatus: 'Estado', colRecipients: 'Destinatários',
    colDelivered: 'Entregues', colRead: 'Lidas', colWhen: 'Quando',
    preview: 'Pré-visualização', recipients: 'Destinatários', template: 'Modelo',
    pending: 'Pendentes', sent: 'Enviadas', delivered: 'Entregues', read: 'Lidas', failed: 'Falhadas',
    sendNow: 'Enviar agora', duplicate: 'Duplicar',
    empty: 'Seleciona uma campanha para pré-visualizar',
    utility: 'Utilidade', marketing: 'Marketing', authentication: 'Autenticação',
    tpl1Body: 'Olá {{1}}, a sua encomenda #{{2}} foi enviada. Acompanhe com o botão abaixo.',
    tpl2Body: 'Saldos da primavera — até 40% de desconto. Compre antes de 30 de abril.',
    tpl3Body: 'Lembrete: a sua marcação com {{1}} é amanhã às {{2}}. Responda SIM para confirmar.',
    tpl4Body: 'O seu código de verificação é {{1}}. Expira em 10 minutos.',
    btnTrack: 'Seguir encomenda', btnShop: 'Comprar agora', btnConfirm: 'Confirmar', btnReschedule: 'Reagendar'
  },
  it: {
    title: 'Campagne', status: 'Stato', labels: 'Etichette', newCampaign: 'Nuova campagna',
    searchPh: 'Cerca campagne…',
    stAll: 'Tutte', stScheduled: 'Programmate', stSent: 'Inviate', stDraft: 'Bozze', stFailed: 'Fallite',
    colName: 'Campagna', colTemplate: 'Modello', colStatus: 'Stato', colRecipients: 'Destinatari',
    colDelivered: 'Consegnate', colRead: 'Lette', colWhen: 'Quando',
    preview: 'Anteprima', recipients: 'Destinatari', template: 'Modello',
    pending: 'In attesa', sent: 'Inviate', delivered: 'Consegnate', read: 'Lette', failed: 'Fallite',
    sendNow: 'Invia ora', duplicate: 'Duplica',
    empty: 'Seleziona una campagna per l\u2019anteprima',
    utility: 'Utilità', marketing: 'Marketing', authentication: 'Autenticazione',
    tpl1Body: 'Ciao {{1}}, il tuo ordine #{{2}} è stato spedito. Tracciaio con il pulsante.',
    tpl2Body: 'Saldi di primavera — fino al 40% di sconto. Acquista entro il 30 aprile.',
    tpl3Body: 'Promemoria: appuntamento con {{1}} domani alle {{2}}. Rispondi SÌ per confermare.',
    tpl4Body: 'Il tuo codice di verifica è {{1}}. Scade tra 10 minuti.',
    btnTrack: 'Traccia ordine', btnShop: 'Acquista ora', btnConfirm: 'Conferma', btnReschedule: 'Riprogramma'
  },
  fr: {
    title: 'Campagnes', status: 'Statut', labels: 'Étiquettes', newCampaign: 'Nouvelle campagne',
    searchPh: 'Rechercher des campagnes…',
    stAll: 'Toutes', stScheduled: 'Programmées', stSent: 'Envoyées', stDraft: 'Brouillons', stFailed: 'Échouées',
    colName: 'Campagne', colTemplate: 'Modèle', colStatus: 'Statut', colRecipients: 'Destinataires',
    colDelivered: 'Livrées', colRead: 'Lues', colWhen: 'Quand',
    preview: 'Aperçu', recipients: 'Destinataires', template: 'Modèle',
    pending: 'En attente', sent: 'Envoyées', delivered: 'Livrées', read: 'Lues', failed: 'Échouées',
    sendNow: 'Envoyer maintenant', duplicate: 'Dupliquer',
    empty: 'Sélectionne une campagne pour l\u2019aperçu',
    utility: 'Utilitaire', marketing: 'Marketing', authentication: 'Authentification',
    tpl1Body: 'Bonjour {{1}}, votre commande #{{2}} est expédiée. Suivez-la avec le bouton.',
    tpl2Body: 'Soldes de printemps — jusqu\u2019à 40% de réduction. Achetez avant le 30 avril.',
    tpl3Body: 'Rappel : rendez-vous avec {{1}} demain à {{2}}. Répondez OUI pour confirmer.',
    tpl4Body: 'Votre code de vérification est {{1}}. Il expire dans 10 minutes.',
    btnTrack: 'Suivre commande', btnShop: 'Acheter', btnConfirm: 'Confirmer', btnReschedule: 'Reprogrammer'
  },
  de: {
    title: 'Kampagnen', status: 'Status', labels: 'Labels', newCampaign: 'Neue Kampagne',
    searchPh: 'Kampagnen suchen…',
    stAll: 'Alle', stScheduled: 'Geplant', stSent: 'Gesendet', stDraft: 'Entwurf', stFailed: 'Fehlgeschlagen',
    colName: 'Kampagne', colTemplate: 'Vorlage', colStatus: 'Status', colRecipients: 'Empfänger',
    colDelivered: 'Zugestellt', colRead: 'Gelesen', colWhen: 'Wann',
    preview: 'Vorschau', recipients: 'Empfänger', template: 'Vorlage',
    pending: 'Ausstehend', sent: 'Gesendet', delivered: 'Zugestellt', read: 'Gelesen', failed: 'Fehlgeschlagen',
    sendNow: 'Jetzt senden', duplicate: 'Duplizieren',
    empty: 'Wähle eine Kampagne für die Vorschau',
    utility: 'Utility', marketing: 'Marketing', authentication: 'Authentifizierung',
    tpl1Body: 'Hallo {{1}}, deine Bestellung #{{2}} wurde versendet. Verfolge sie mit dem Button.',
    tpl2Body: 'Frühlingssale — bis zu 40% Rabatt. Kaufe vor dem 30. April.',
    tpl3Body: 'Erinnerung: Termin mit {{1}} morgen um {{2}}. Antworte JA zur Bestätigung.',
    tpl4Body: 'Dein Bestätigungscode ist {{1}}. Er läuft in 10 Minuten ab.',
    btnTrack: 'Sendung verfolgen', btnShop: 'Jetzt kaufen', btnConfirm: 'Bestätigen', btnReschedule: 'Verschieben'
  }
}

const T = window.WT.makeT(CAMP_I18N)
const { Rail, Sidebar, Section, Item } = window.WT

const STATUS_META = {
  scheduled: { bg: '#fef3c7', fg: '#78350f', dot: '#f59e0b' },
  sent: { bg: '#d1fae5', fg: '#065f46', dot: '#22c55e' },
  draft: { bg: '#e2e8f0', fg: '#475569', dot: '#94a3b8' },
  failed: { bg: '#fee2e2', fg: '#991b1b', dot: '#ef4444' }
}

const LABELS = [
  { id: 'promo', name: 'Promo', rgb: '34,197,94' },
  { id: 'ops', name: 'Ops', rgb: '59,130,246' },
  { id: 'reminder', name: 'Reminder', rgb: '245,158,11' },
  { id: 'winback', name: 'Winback', rgb: '168,85,247' }
]

const CAMPAIGNS = [
  {
    id: 1, name: 'Spring Sale · April',
    tplName: 'spring_sale_2026', tplCategory: 'marketing', tplBodyKey: 'tpl2Body',
    status: 'sent', recipients: 4820, delivered: 4711, read: 3890, failed: 22,
    when: 'Apr 18, 09:00', label: 'promo',
    buttons: [{ type: 'url', labelKey: 'btnShop' }]
  },
  {
    id: 2, name: 'Shipping updates Q2',
    tplName: 'order_shipped_v3', tplCategory: 'utility', tplBodyKey: 'tpl1Body',
    status: 'sent', recipients: 1203, delivered: 1201, read: 1098, failed: 1,
    when: 'Apr 19, 14:22', label: 'ops',
    buttons: [{ type: 'url', labelKey: 'btnTrack' }]
  },
  {
    id: 3, name: 'Appointment reminders · Apr 21',
    tplName: 'appointment_reminder', tplCategory: 'utility', tplBodyKey: 'tpl3Body',
    status: 'scheduled', recipients: 340, delivered: 0, read: 0, failed: 0,
    when: 'Apr 21, 08:00', label: 'reminder',
    buttons: [{ type: 'quick', labelKey: 'btnConfirm' }, { type: 'quick', labelKey: 'btnReschedule' }]
  },
  {
    id: 4, name: 'VIP winback · inactive 90d',
    tplName: 'vip_winback_v1', tplCategory: 'marketing', tplBodyKey: 'tpl2Body',
    status: 'draft', recipients: 512, delivered: 0, read: 0, failed: 0,
    when: '—', label: 'winback',
    buttons: [{ type: 'url', labelKey: 'btnShop' }]
  },
  {
    id: 5, name: '2FA codes · Mar 31 batch',
    tplName: 'otp_code', tplCategory: 'authentication', tplBodyKey: 'tpl4Body',
    status: 'failed', recipients: 187, delivered: 3, read: 0, failed: 184,
    when: 'Mar 31, 22:14', label: 'ops',
    buttons: []
  },
  {
    id: 6, name: 'Easter promo',
    tplName: 'easter_promo_2026', tplCategory: 'marketing', tplBodyKey: 'tpl2Body',
    status: 'sent', recipients: 2140, delivered: 2103, read: 1650, failed: 12,
    when: 'Mar 28, 10:00', label: 'promo',
    buttons: [{ type: 'url', labelKey: 'btnShop' }]
  }
]

function StatusPill ({ s }) {
  const meta = STATUS_META[s] || STATUS_META.draft
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontSize: 11, fontWeight: 500,
      color: meta.fg, background: meta.bg,
      padding: '2px 8px', borderRadius: 999
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: meta.dot }} />
      {T('st' + s.charAt(0).toUpperCase() + s.slice(1))}
    </span>
  )
}

function pct (num, den) {
  if (!den) return '—'
  return Math.round((num / den) * 100) + '%'
}

function num (n) {
  if (n < 1000) return String(n)
  return (n / 1000).toFixed(n < 10000 ? 1 : 0) + 'k'
}

function CampaignsV2 () {
  const [status, setStatus] = React.useState('all')
  const [labelFilter, setLabelFilter] = React.useState(null)
  const [selectedId, setSelectedId] = React.useState(1)

  const statusFiltered = CAMPAIGNS.filter(c => status === 'all' ? true : c.status === status)
  const filtered = labelFilter ? statusFiltered.filter(c => c.label === labelFilter) : statusFiltered
  const selected = CAMPAIGNS.find(c => c.id === selectedId)

  const counts = {
    all: CAMPAIGNS.length,
    scheduled: CAMPAIGNS.filter(c => c.status === 'scheduled').length,
    sent: CAMPAIGNS.filter(c => c.status === 'sent').length,
    draft: CAMPAIGNS.filter(c => c.status === 'draft').length,
    failed: CAMPAIGNS.filter(c => c.status === 'failed').length
  }

  return (
    <div className='v2-shell'>
      <div className='v2-window' style={{ gridTemplateColumns: '60px 240px 1fr 360px' }}>
        <Rail activeNav='campaigns' />

        <Sidebar title={T('title')} action={{ title: T('newCampaign') }}>
          <Section title={T('status')}>
            {[
              { k: 'all', l: T('stAll'), icon: 'fa-bullhorn' },
              { k: 'scheduled', l: T('stScheduled'), icon: 'fa-clock' },
              { k: 'sent', l: T('stSent'), icon: 'fa-check-circle' },
              { k: 'draft', l: T('stDraft'), icon: 'fa-file' },
              { k: 'failed', l: T('stFailed'), icon: 'fa-exclamation-circle' }
            ].map(x => (
              <Item
                key={x.k}
                label={x.l}
                icon={x.icon}
                active={status === x.k}
                badge={counts[x.k]}
                onClick={() => setStatus(x.k)}
              />
            ))}
          </Section>

          <Section title={T('labels')}>
            {LABELS.map(l => (
              <Item
                key={l.id}
                label={l.name}
                dot={`rgb(${l.rgb})`}
                active={labelFilter === l.id}
                onClick={() => setLabelFilter(labelFilter === l.id ? null : l.id)}
              />
            ))}
          </Section>
        </Sidebar>

        <main style={{ background: 'var(--bg)', display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
          <div style={{ padding: '14px 20px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, borderBottom: '1px solid var(--border-subtle)' }}>
            <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--fg)', letterSpacing: '-0.01em' }}>{T('title')}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', border: '1px solid var(--border)', borderRadius: 8, background: 'var(--bg)', fontSize: 12, color: 'var(--fg-muted)', width: 240 }}>
                <i className='fas fa-search' style={{ fontSize: 11, color: 'var(--fg-faint)' }} />
                <input placeholder={T('searchPh')} style={{ flex: 1, border: 0, outline: 0, background: 'transparent', fontSize: 12, color: 'var(--fg)' }} />
              </div>
              <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#22c55e', color: 'white', border: 0, borderRadius: 8, padding: '7px 12px', fontSize: 12, fontWeight: 500, cursor: 'pointer' }}>
                <i className='fas fa-plus' style={{ fontSize: 11 }} />{T('newCampaign')}
              </button>
            </div>
          </div>

          <div style={{ flex: 1, overflow: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <thead>
                <tr style={{ background: 'var(--bg-subtle, #fafbfc)', borderBottom: '1px solid var(--border-subtle)' }}>
                  {[T('colName'), T('colTemplate'), T('colStatus'), T('colRecipients'), T('colDelivered'), T('colRead'), T('colWhen')].map((h, i) => (
                    <th key={i} style={{ textAlign: 'left', padding: '8px 14px', fontSize: 11, fontWeight: 500, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.04em', whiteSpace: 'nowrap' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {filtered.map(c => {
                  const label = LABELS.find(l => l.id === c.label)
                  return (
                    <tr
                      key={c.id}
                      onClick={() => setSelectedId(c.id)}
                      style={{
                        borderBottom: '1px solid var(--border-subtle)',
                        cursor: 'pointer',
                        background: selectedId === c.id ? '#f0fdf4' : 'transparent'
                      }}
                    >
                      <td style={{ padding: '10px 14px' }}>
                        <div style={{ fontWeight: 500, color: 'var(--fg)' }}>{c.name}</div>
                        {label && (
                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, marginTop: 3, fontSize: 10, color: 'var(--fg-muted)', background: 'var(--bg-muted)', padding: '1px 6px', borderRadius: 999 }}>
                            <span style={{ width: 6, height: 6, borderRadius: '50%', background: `rgb(${label.rgb})` }} />{label.name}
                          </span>
                        )}
                      </td>
                      <td style={{ padding: '10px 14px', color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>{c.tplName}</td>
                      <td style={{ padding: '10px 14px' }}><StatusPill s={c.status} /></td>
                      <td style={{ padding: '10px 14px', color: 'var(--fg)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>{num(c.recipients)}</td>
                      <td style={{ padding: '10px 14px', color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
                        {c.delivered > 0 ? `${num(c.delivered)} · ${pct(c.delivered, c.recipients)}` : '—'}
                      </td>
                      <td style={{ padding: '10px 14px', color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
                        {c.read > 0 ? `${num(c.read)} · ${pct(c.read, c.recipients)}` : '—'}
                      </td>
                      <td style={{ padding: '10px 14px', color: 'var(--fg-subtle)', fontSize: 12, whiteSpace: 'nowrap' }}>{c.when}</td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        </main>

        <aside style={{ background: 'var(--bg)', borderLeft: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          {selected ? (
            <React.Fragment>
              <div style={{ padding: '16px 20px 14px', borderBottom: '1px solid var(--border-subtle)' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>{selected.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>{selected.tplName}</div>
                  </div>
                  <StatusPill s={selected.status} />
                </div>
                <div style={{ marginTop: 10, display: 'flex', gap: 6 }}>
                  {selected.status === 'draft' && (
                    <button style={{ flex: 1, background: '#22c55e', color: 'white', border: 0, borderRadius: 7, padding: '6px 10px', fontSize: 12, fontWeight: 500, cursor: 'pointer' }}>
                      <i className='fas fa-paper-plane' style={{ marginRight: 6, fontSize: 10 }} />{T('sendNow')}
                    </button>
                  )}
                  <button style={{ background: 'var(--bg-muted)', color: 'var(--fg)', border: 0, borderRadius: 7, padding: '6px 10px', fontSize: 12, fontWeight: 500, cursor: 'pointer' }}>
                    <i className='fas fa-clone' style={{ marginRight: 6, fontSize: 10 }} />{T('duplicate')}
                  </button>
                </div>
              </div>

              <div style={{ flex: 1, overflow: 'auto' }}>
                {/* Template preview */}
                <div style={{ padding: '16px 20px 0' }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>
                    {T('template')} · {T(selected.tplCategory)}
                  </div>
                </div>
                <div style={{ padding: '0 20px', display: 'flex', justifyContent: 'center' }}>
                  <div style={{ background: '#dcfce7', color: '#052e16', padding: '10px 14px', borderRadius: 12, fontSize: 13, lineHeight: 1.5, maxWidth: '100%', borderBottomRightRadius: 4 }}>
                    <div>{T(selected.tplBodyKey)}</div>
                    {selected.buttons.length > 0 && (
                      <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 4 }}>
                        {selected.buttons.map((b, i) => (
                          <button key={i} style={{ background: 'white', border: '1px solid rgba(15,23,42,0.1)', borderRadius: 8, padding: '6px 10px', fontSize: 12, fontWeight: 500, color: '#1e40af', cursor: 'pointer' }}>
                            {b.type === 'url' && <i className='fas fa-external-link-alt' style={{ fontSize: 9, marginRight: 6 }} />}
                            {T(b.labelKey)}
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                </div>

                {/* Recipients breakdown */}
                <div style={{ padding: '20px 20px 24px' }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>{T('recipients')}</div>
                  {[
                    { k: 'recipients', l: T('stAll'), v: selected.recipients, color: '#0f172a' },
                    { k: 'delivered', l: T('delivered'), v: selected.delivered, color: '#059669' },
                    { k: 'read', l: T('read'), v: selected.read, color: '#2563eb' },
                    { k: 'failed', l: T('failed'), v: selected.failed, color: '#dc2626' }
                  ].map(row => (
                    <div key={row.k} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 0', borderBottom: '1px solid var(--border-subtle)', fontSize: 13 }}>
                      <span style={{ color: 'var(--fg)' }}>{row.l}</span>
                      <span style={{ color: row.color, fontFamily: 'var(--font-mono)', fontWeight: 500 }}>
                        {num(row.v)}{row.k !== 'recipients' && selected.recipients > 0 && <span style={{ color: 'var(--fg-subtle)', marginLeft: 6 }}>· {pct(row.v, selected.recipients)}</span>}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </React.Fragment>
          ) : (
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-muted)', fontSize: 13, padding: 20, textAlign: 'center' }}>
              {T('empty')}
            </div>
          )}
        </aside>
      </div>
    </div>
  )
}

window.CampaignsV2 = CampaignsV2