// [TSM.ID].[11031972] -- All Rights Reserved. Proprietary & Confidential.
import { useCommercial } from '../context/CommercialContext';
import { useI18n } from '../context/I18nContext';

export default function OmniBillingOrchestrator() {
  const { taxRate, setTaxRate, activeGateways, setActiveGateways } = useCommercial();
  const { t } = useI18n();

  const handleTaxChange = (e) => {
    setTaxRate(Number(e.target.value));
  };

  const toggleGateway = (key) => {
    setActiveGateways(prev => ({
      ...prev,
      [key]: !prev[key]
    }));
  };

  const gateways = [
    { key: 'stripe', name: 'Stripe (Global Credit Cards)', color: '#635BFF' },
    { key: 'xendit', name: 'Xendit (SEA Virtual Accounts)', color: '#0055ff' },
    { key: 'crypto', name: 'Crypto (BTC / ETH / USDT)', color: '#f7931a' },
    { key: 'unionpay', name: 'UnionPay (APAC Network)', color: '#D32F2F' },
    { key: 'bank_transfer', name: 'International Bank Transfer', color: '#4CAF50' },
    { key: 'cash_manual', name: 'Manual Cash / Cheque', 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-Billing Orchestrator</h2>
          <p style={{color: 'var(--text-muted)'}}>Kendali mutlak atas gerbang pembayaran universal dan perpajakan dinamis lintas dimensi.</p>
        </div>
        <div style={{padding: '10px 20px', background: 'rgba(0, 255, 136, 0.1)', border: '1px solid var(--accent-green)', borderRadius: '8px', color: 'var(--accent-green)', fontFamily: 'monospace', fontWeight: 'bold'}}>
          QUANTUM SYNC: ACTIVE
        </div>
      </div>

      <div className="grid-cards" style={{display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '30px'}}>
        {/* TAX ORCHESTRATOR */}
        <div className="glass-panel" style={{padding: '30px', display: 'flex', flexDirection: 'column'}}>
          <h3 style={{color: 'var(--accent-purple)', marginBottom: '10px', textTransform: 'uppercase', letterSpacing: '1px'}}>Dynamic Tax Matrix</h3>
          <p style={{color: 'var(--text-muted)', fontSize: '0.9rem', marginBottom: '30px'}}>Atur tarif pajak secara live. Perubahan akan seketika di-broadcast ke seluruh layar Tenant.</p>
          
          <div style={{textAlign: 'center', marginBottom: '20px'}}>
            <span style={{fontSize: '4rem', fontWeight: 'bold', color: 'var(--text-main)', fontFamily: 'monospace', textShadow: '0 0 20px rgba(168, 85, 247, 0.5)'}}>
              {taxRate}%
            </span>
          </div>

          <input 
            type="range" 
            min="0" 
            max="100" 
            value={taxRate} 
            onChange={handleTaxChange}
            style={{
              width: '100%', 
              cursor: 'pointer',
              accentColor: 'var(--accent-purple)',
              marginBottom: '10px'
            }}
          />
          <div style={{display: 'flex', justifyContent: 'space-between', color: 'var(--text-muted)', fontSize: '0.8rem', fontFamily: 'monospace'}}>
            <span>0% (Tax Free)</span>
            <span>100% (Absolute Tax)</span>
          </div>
        </div>

        {/* PAYMENT GATEWAYS */}
        <div className="glass-panel" style={{padding: '30px'}}>
          <h3 style={{color: 'var(--accent-cyan)', marginBottom: '10px', textTransform: 'uppercase', letterSpacing: '1px'}}>Universal Payment Gateways</h3>
          <p style={{color: 'var(--text-muted)', fontSize: '0.9rem', marginBottom: '30px'}}>Aktifkan atau matikan gerbang pembayaran. Tenant tidak akan bisa menggunakan gerbang yang dimatikan.</p>
          
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '15px'}}>
            {gateways.map(gw => {
              const isActive = activeGateways[gw.key];
              return (
                <div 
                  key={gw.key}
                  onClick={() => toggleGateway(gw.key)}
                  style={{
                    padding: '15px',
                    background: isActive ? `${gw.color}15` : 'var(--hover-bg)',
                    border: `1px solid ${isActive ? gw.color : 'var(--table-border)'}`,
                    borderRadius: '8px',
                    cursor: 'pointer',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    transition: 'all 0.2s ease',
                    boxShadow: isActive ? `0 0 15px ${gw.color}30` : 'none'
                  }}
                >
                  <span style={{color: isActive ? 'var(--text-main)' : 'var(--text-muted)', fontWeight: isActive ? 'bold' : 'normal', fontSize: '0.9rem'}}>
                    {gw.name}
                  </span>
                  <div style={{
                    width: '40px', height: '20px', 
                    background: isActive ? gw.color : '#333',
                    borderRadius: '10px',
                    position: 'relative',
                    transition: 'all 0.3s ease'
                  }}>
                    <div style={{
                      width: '16px', height: '16px',
                      background: '#fff',
                      borderRadius: '50%',
                      position: 'absolute',
                      top: '2px',
                      left: isActive ? '22px' : '2px',
                      transition: 'all 0.3s ease'
                    }}></div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      
      {/* GLOBAL REMINDER PROTOCOL */}
      <div className="glass-panel" style={{padding: '30px', marginTop: '30px'}}>
        <h3 style={{color: 'var(--accent-yellow)', marginBottom: '10px', textTransform: 'uppercase', letterSpacing: '1px'}}>Global Omni-Messenger Analytics</h3>
        <p style={{color: 'var(--text-muted)', fontSize: '0.9rem', marginBottom: '20px'}}>Pantauan real-time tingkat keberhasilan notifikasi pengingat ke Tenant.</p>
        
        <div style={{display: 'flex', gap: '20px'}}>
          <div style={{flex: 1, background: 'var(--hover-bg)', border: '1px solid var(--table-border)', padding: '20px', borderRadius: '8px', textAlign: 'center'}}>
            <div style={{color: 'var(--text-muted)', fontSize: '0.8rem', marginBottom: '10px'}}>DELIVERY SUCCESS RATE</div>
            <div style={{fontSize: '2rem', color: 'var(--accent-green)', fontWeight: 'bold', fontFamily: 'monospace'}}>99.99%</div>
          </div>
          <div style={{flex: 1, background: 'var(--hover-bg)', border: '1px solid var(--table-border)', padding: '20px', borderRadius: '8px', textAlign: 'center'}}>
            <div style={{color: 'var(--text-muted)', fontSize: '0.8rem', marginBottom: '10px'}}>ZERO-ESCAPE BYPASS ATTEMPTS</div>
            <div style={{fontSize: '2rem', color: 'var(--accent-red)', fontWeight: 'bold', fontFamily: 'monospace'}}>0</div>
          </div>
          <div style={{flex: 1, background: 'var(--hover-bg)', border: '1px solid var(--table-border)', padding: '20px', borderRadius: '8px', textAlign: 'center'}}>
            <div style={{color: 'var(--text-muted)', fontSize: '0.8rem', marginBottom: '10px'}}>ACTIVE REMINDER CHANNELS</div>
            <div style={{fontSize: '2rem', color: 'var(--accent-cyan)', fontWeight: 'bold', fontFamily: 'monospace'}}>6/6</div>
          </div>
        </div>
      </div>

    </div>
  );
}
