/* global React */
const Channels = () => {
  const wa = [
    { from: 'ai', t: "Günaydın Kaan Bey. Günlük operasyon brifingi · 07 Nis 2026:\n• Gerçekleşen FY26: €144,6M (+%12,4 YoY)\n• 7 aktif uyarı (1 yüksek)\n• Belek 5★ Temmuz: %91 satıldı\n• Rusya AYT uçuşları %96 LF" },
    { from: 'ai', t: "YÜKSEK: İstanbul marjı %18,2 (hedef %22). En iyi 6 otel için yeniden müzakere listesi hazırlamamı ister misin?" },
    { from: 'me', t: "Evet, hazırla" },
    { from: 'ai', t: "Çalışıyorum. Alış tarafı kıyaslamalarını çekiyorum. Yaklaşık 4 dakika içinde WhatsApp + e-posta ile sözleşme ekibine gelecek." },
  ];
  const tg = [
    { from: 'ai', t: "Günlük Fiyatlama Nabzı · 07 Nis 2026" },
    { from: 'ai', t: "Belek 5★ Tem · canlı +%8 (onay bekliyor). Beklenen etki: +€2,1M" },
    { from: 'ai', t: "Bodrum EB · uzatma hazırlandı. /onayla veya /düzenle yanıtı ver" },
    { from: 'me', t: "/onayla" },
    { from: 'ai', t: "EB uzatması tüm DE kanallarına gönderildi. Tempo etkisini ~24 saatte izle." },
  ];

  const Bubble = ({ from, t }) => {
    const me = from === 'me';
    const styles = {
      maxWidth: '78%',
      padding: '7px 10px',
      borderRadius: 8,
      fontSize: 11.5,
      lineHeight: 1.5,
      whiteSpace: 'pre-wrap',
      ...(me ? { background: 'var(--brand)', color: 'var(--paper)', alignSelf: 'flex-end' } :
              { background: 'var(--bg-2)', color: 'var(--text)', border: '1px solid var(--line)', alignSelf: 'flex-start' })
    };
    return React.createElement('div', { style: styles }, t);
  };

  return React.createElement('div', { style: { padding: 16, display: 'flex', flexDirection: 'column', gap: 12 } },
    React.createElement('div', { className: 'panel', style: { padding: 14 } },
      React.createElement('div', { className: 'panel-head-title' }, 'Konuşma Kanalları'),
      React.createElement('div', { className: 'panel-head-sub' },
        'Aynı RM ajanı brifingler, onaylar ve hareket halinde Q&A için WhatsApp ve Telegram\'da size ulaşır.')
    ),
    React.createElement('div', { className: 'grid grid-2 gap-3' },
      React.createElement(Panel, {
        title: 'WhatsApp Business',
        sub: '+90 530 ··· · Fun & Sun RM Ajanı · çevrimiçi'
      },
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6, padding: 8,
          background: 'var(--bg-1)', borderRadius: 4, minHeight: 360 } },
          wa.map((m, i) => React.createElement(Bubble, { key: i, ...m }))
        )
      ),
      React.createElement(Panel, {
        title: 'Telegram',
        sub: '@FunSunRMBot · 12 komut · webhook sağlıklı'
      },
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6, padding: 8,
          background: 'var(--bg-1)', borderRadius: 4, minHeight: 360 } },
          tg.map((m, i) => React.createElement(Bubble, { key: i, ...m }))
        )
      )
    ),
    React.createElement(Panel, { title: 'Kanal Ayarları', sub: 'Abonelikler ve sessiz saatler' },
      React.createElement('table', { className: 'tbl' },
        React.createElement('thead', null,
          React.createElement('tr', null,
            React.createElement('th', null, 'Konu'),
            React.createElement('th', null, 'E-posta'),
            React.createElement('th', null, 'WhatsApp'),
            React.createElement('th', null, 'Telegram'),
            React.createElement('th', null, 'Sessiz Saatler'),
            React.createElement('th', null, '')
          )),
        React.createElement('tbody', null,
          [
            { t: 'Günlük operasyon brifingi', e: true, w: true, tg: true, q: '22:00–07:00 TRT' },
            { t: 'Yüksek-öncelik uyarılar', e: true, w: true, tg: false, q: 'Sürekli açık' },
            { t: 'Fiyatlama onayları', e: false, w: true, tg: true, q: '08:00–20:00 TRT' },
            { t: 'Haftalık tahmin', e: true, w: false, tg: false, q: 'Pazartesi 09:00' },
            { t: 'Rakip hareketleri', e: true, w: false, tg: true, q: '22:00–07:00 TRT' },
          ].map((r, i) => React.createElement('tr', { key: i },
            React.createElement('td', { style: { fontWeight: 500 } }, r.t),
            React.createElement('td', null, React.createElement('span', { className: 'pill ' + (r.e?'pill-pos':'pill-outline') }, r.e?'Açık':'Kapalı')),
            React.createElement('td', null, React.createElement('span', { className: 'pill ' + (r.w?'pill-pos':'pill-outline') }, r.w?'Açık':'Kapalı')),
            React.createElement('td', null, React.createElement('span', { className: 'pill ' + (r.tg?'pill-pos':'pill-outline') }, r.tg?'Açık':'Kapalı')),
            React.createElement('td', { className: 'mono text-muted', style: { fontSize: 10.5 } }, r.q),
            React.createElement('td', null, React.createElement('button', { className: 'btn btn-sm' }, 'Düzenle'))
          ))
        )
      )
    )
  );
};
window.Channels = Channels;