import { useState, useEffect } from 'react';
import { useI18n } from '../context/I18nContext';

export default function NotificationMatrix() {
  const { t } = useI18n();

  const [channels, setChannels] = useState({
    whatsapp: true,
    telegram: true,
    signal: true,
    sms: true,
    email: true,
    postal: true
  });

  const [warningMessage, setWarningMessage] = useState(null);

  const toggleChannel = (key) => {
    setChannels(prev => {
      const newState = { ...prev, [key]: !prev[key] };
      
      // Zero-Escape Protocol Validation
      const activeOnlineChannels = ['whatsapp', 'telegram', 'signal', 'sms', 'email'].filter(c => newState[c]);
      
      if (activeOnlineChannels.length === 0) {
        // Blokir mutasi jika semua channel online dimatikan
        setWarningMessage('PROTOCOL ZERO-ESCAPE TERPICU: Anda wajib mengaktifkan minimal satu jalur notifikasi elektronik/online untuk memastikan penerimaan tagihan.');
        return prev;
      }

      setWarningMessage(null);
      return newState;
    });
  };

  const channelInfo = [
    { key: 'whatsapp', name: 'WhatsApp Business', desc: 'Notifikasi instan dengan verifikasi end-to-end terenkripsi.', icon: '💬', color: '#25D366' },
    { key: 'telegram', name: 'Telegram Bot', desc: 'Integrasi notifikasi super-cepat ke perangkat seluler dan desktop.', icon: '✈️', color: '#0088cc' },
    { key: 'signal', name: 'Signal Secure Messenger', desc: 'Protokol pengingat ultra-privasi tinggi.', icon: '🔒', color: '#3A76F0' },
    { key: 'sms', name: 'SMS Gateway', desc: 'Pengingat fallback langsung ke nomor telepon seluler.', icon: '📱', color: '#ff9900' },
    { key: 'email', name: 'E-Mail', desc: 'Pengiriman Invoice lengkap berformat PDF.', icon: '📧', color: '#ea4335' },
    { key: 'postal', name: 'Surat Pos Fisik', desc: 'Pengiriman Invoice fisik tercetak ke alamat kantor terdaftar.', icon: '📮', color: '#888' },
  ];

  return (
    <div style={{animation: 'fadeIn 0.5s ease-out'}}>
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '30px'}}>
        <div>
          <h2 style={{color: 'var(--text-main)', fontSize: '1.8rem', letterSpacing: '1px', textTransform: 'uppercase'}}>Omni-Messenger Preferences</h2>
          <p style={{color: 'var(--text-muted)'}}>Sesuaikan jalur komunikasi tagihan sesuai tingkat kenyamanan operasional Anda.</p>
        </div>
      </div>

      {warningMessage && (
        <div style={{
          padding: '15px 20px', background: 'rgba(255, 0, 60, 0.1)', border: '1px solid var(--accent-red)',
          borderRadius: '8px', color: 'var(--accent-red)', marginBottom: '30px', animation: 'shake 0.4s',
          fontFamily: 'monospace', fontSize: '0.9rem'
        }}>
          ⚠️ {warningMessage}
        </div>
      )}

      <div className="grid-cards" style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '20px'}}>
        {channelInfo.map(ch => {
          const isActive = channels[ch.key];
          return (
            <div key={ch.key} className="glass-panel" style={{
              padding: '25px', display: 'flex', flexDirection: 'column',
              border: `1px solid ${isActive ? ch.color : 'var(--table-border)'}`,
              background: isActive ? `${ch.color}0A` : 'var(--panel-bg)',
              transition: 'all 0.3s ease',
              boxShadow: isActive ? `0 0 15px ${ch.color}20` : 'none'
            }}>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px'}}>
                <div style={{display: 'flex', alignItems: 'center', gap: '10px'}}>
                  <span style={{fontSize: '1.5rem'}}>{ch.icon}</span>
                  <h3 style={{color: isActive ? 'var(--text-main)' : 'var(--text-muted)', fontSize: '1.1rem'}}>{ch.name}</h3>
                </div>
                
                {/* KINETIC TOGGLE SWITCH */}
                <div 
                  onClick={() => toggleChannel(ch.key)}
                  style={{
                    width: '50px', height: '26px', 
                    background: isActive ? ch.color : '#333',
                    borderRadius: '13px',
                    position: 'relative',
                    cursor: 'pointer',
                    transition: 'all 0.3s ease'
                  }}>
                  <div style={{
                    width: '20px', height: '20px',
                    background: '#fff',
                    borderRadius: '50%',
                    position: 'absolute',
                    top: '3px',
                    left: isActive ? '27px' : '3px',
                    transition: 'all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
                    boxShadow: '0 2px 5px rgba(0,0,0,0.2)'
                  }}></div>
                </div>
              </div>
              <p style={{color: 'var(--text-muted)', fontSize: '0.85rem', lineHeight: '1.5', flex: 1}}>
                {ch.desc}
              </p>
              
              <div style={{marginTop: '20px', fontSize: '0.7rem', color: isActive ? ch.color : 'var(--text-muted)', fontFamily: 'monospace', fontWeight: 'bold'}}>
                STATUS: {isActive ? 'ACTIVE & ROUTED' : 'DEACTIVATED'}
              </div>
            </div>
          );
        })}
      </div>
      
      <div className="glass-panel" style={{padding: '20px', marginTop: '30px', borderLeft: '4px solid var(--accent-cyan)'}}>
        <h4 style={{color: 'var(--accent-cyan)', marginBottom: '5px'}}>The Omni-Messenger Guarantee</h4>
        <p style={{color: 'var(--text-muted)', fontSize: '0.85rem', lineHeight: '1.6'}}>
          Sistem notifikasi Omni-Messenger memiliki protokol eskalasi otomatis. Jika pengiriman melalui metode utama (misal: Telegram) gagal diverifikasi (tidak ada *delivery receipt*), sistem akan secara otomatis melimpahkan pesan ke rute komunikasi *fallback* aktif Anda berikutnya untuk menjamin informasi tagihan Anda tidak terlewatkan.
        </p>
      </div>

    </div>
  );
}