import { 
  Save, 
  Mail, 
  Smartphone,
  ShieldCheck,
  Terminal,
  Activity
} from 'lucide-react';
import { Card } from '../components/Common';
import { MfaSettings } from '../components/MfaSettings';

export const PlatformConfig: React.FC = () => {
  return (
    <div className="page-container" style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <h2 style={{ fontSize: '2.5rem', fontWeight: 900, background: 'linear-gradient(90deg, #3B82F6, #fff)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
            System Configuration
          </h2>
          <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem', marginTop: '4px' }}>
            Configure global thresholds, gateway integrations, and platform-wide feature flags.
          </p>
        </div>
        
        <button className="glass" style={{ padding: '12px 24px', background: 'var(--accent-cyan)', color: '#000', border: 'none', borderRadius: '10px', fontWeight: 800, display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer', boxShadow: '0 0 20px rgba(0,212,255,0.4)' }}>
           <Save size={18} /> PERSIST ALL CHANGES
        </button>
      </header>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '24px' }}>
         {/* 5.7.1 Global SLA Thresholds */}
         <Card title="Global SLA Thresholds" subtitle="Response target targets by category">
            <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
               {[
                 { category: 'IMMEDIATE (RED)', target: '8 Minutes', threshold: '95%' },
                 { category: 'URGENT (ORANGE)', target: '15 Minutes', threshold: '90%' },
                 { category: 'MINOR (GREEN)', target: '30 Minutes', threshold: '85%' },
                 { category: 'IFT (BLUE)', target: 'Scheduled', threshold: '98%' },
               ].map((sla, i) => (
                 <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                       <div style={{ fontSize: '0.75rem', fontWeight: 800, color: sla.category.includes('RED') ? 'var(--alert-red)' : 'inherit' }}>{sla.category}</div>
                       <div style={{ fontSize: '0.7rem', color: 'var(--text-secondary)' }}>Target: {sla.target}</div>
                    </div>
                    <div className="mono" style={{ fontSize: '1rem', fontWeight: 800, color: 'var(--accent-cyan)' }}>{sla.threshold}</div>
                 </div>
               ))}
            </div>
         </Card>

         {/* 5.7.2 Notification Gateways */}
         <Card title="Messaging Gateways" subtitle="FCM, SMS, and Email service status.">
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
               <div style={{ padding: '16px', background: 'rgba(0,0,0,0.2)', border: '1px solid var(--card-border)', borderRadius: '12px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                        <Smartphone size={18} color="var(--accent-cyan)" />
                        <span style={{ fontWeight: 800, fontSize: '0.85rem' }}>SMS Gateway</span>
                     </div>
                     <span style={{ fontSize: '0.65rem', padding: '2px 8px', background: 'rgba(0,255,136,0.1)', color: 'var(--accent-green)', borderRadius: '40px', fontWeight: 800 }}>PRIMARY</span>
                  </div>
                  <div className="mono" style={{ fontSize: '0.75rem', color: 'var(--text-secondary)' }}>Provider: Twilio (AWS Region)</div>
               </div>

               <div style={{ padding: '16px', background: 'rgba(0,0,0,0.2)', border: '1px solid var(--card-border)', borderRadius: '12px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                        <Mail size={18} color="var(--accent-cyan)" />
                        <span style={{ fontWeight: 800, fontSize: '0.85rem' }}>Email SMTP</span>
                     </div>
                     <span style={{ fontSize: '0.65rem', padding: '2px 8px', background: 'rgba(0,255,136,0.1)', color: 'var(--accent-green)', borderRadius: '40px', fontWeight: 800 }}>HEALTHY</span>
                  </div>
                  <div className="mono" style={{ fontSize: '0.75rem', color: 'var(--text-secondary)' }}>Relay: SendGrid (SES Failover)</div>
               </div>
            </div>
         </Card>

         {/* MFA Settings */}
         <MfaSettings />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '24px' }}>
         <Card title="Feature Flags" subtitle="Enable/Disable modules per operator.">
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
               {[
                 { name: 'Air Ambulance Dispatch', enabled: true },
                 { name: 'IoT Telemetry Feed', enabled: true },
                 { name: 'RTVS Video Link', enabled: true },
                 { name: 'Inter-Facility Transfer', enabled: false },
                 { name: 'Pharmacy Cross-Sell', enabled: false },
                 { name: 'Predictive Load Balancer', enabled: true },
               ].map((flag, i) => (
                 <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0' }}>
                    <span style={{ fontSize: '0.85rem', fontWeight: 600 }}>{flag.name}</span>
                    <div style={{ 
                       width: '40px', height: '22px', background: flag.enabled ? 'var(--accent-green)' : 'rgba(255,255,255,0.05)', 
                       borderRadius: '11px', position: 'relative', cursor: 'pointer', border: flag.enabled ? 'none' : '1px solid var(--card-border)'
                    }}>
                       <div style={{ 
                          width: '18px', height: '18px', background: '#fff', borderRadius: '50%', 
                          position: 'absolute', top: '2px', left: flag.enabled ? '20px' : '2px',
                          transition: 'all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
                       }}></div>
                    </div>
                 </div>
               ))}
            </div>
         </Card>

         <Card title="IoT Device Profiles" subtitle="Firmware versions and pairing pool management.">
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}>
               <thead>
                  <tr style={{ background: 'rgba(255,255,255,0.03)', textAlign: 'left' }}>
                     <th style={{ padding: '16px' }}>Device Model</th>
                     <th style={{ padding: '16px' }}>Firmware Ver</th>
                     <th style={{ padding: '16px' }}>Active Units</th>
                     <th style={{ padding: '16px' }}>Auto-Update</th>
                     <th style={{ padding: '16px', textAlign: 'right' }}>Actions</th>
                  </tr>
               </thead>
               <tbody>
                  {[
                    { model: 'TM-Hub G4 (Gateway)', fw: 'v4.2.1-stable', units: 480, auto: 'ENABLED' },
                    { model: 'TM-Pat-Monitor X1', fw: 'v1.0.8-patch5', units: 120, auto: 'DISABLED' },
                    { model: 'TM-Air-Comm SatLink', fw: 'v2.2.0', units: 15, auto: 'ENABLED' },
                    { model: 'TM-Drug-Dispense-B1', fw: 'v0.9.5-beta', units: 85, auto: 'MANUAL' },
                  ].map((row, i) => (
                    <tr key={i} style={{ borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
                       <td style={{ padding: '16px', fontWeight: 700 }}>{row.model}</td>
                       <td style={{ padding: '16px' }} className="mono">{row.fw}</td>
                       <td style={{ padding: '16px' }}>{row.units}</td>
                       <td style={{ padding: '16px' }}>
                          <span style={{ fontSize: '0.7rem', color: row.auto === 'ENABLED' ? 'var(--accent-green)' : 'var(--text-secondary)' }}>{row.auto}</span>
                       </td>
                       <td style={{ padding: '16px', textAlign: 'right' }}>
                          <button style={{ background: 'transparent', border: '1px solid var(--card-border)', color: 'var(--text-secondary)', padding: '4px 10px', borderRadius: '4px', fontSize: '0.7rem', fontWeight: 600, cursor: 'pointer' }}>PUSH FW</button>
                       </td>
                    </tr>
                  ))}
               </tbody>
            </table>
         </Card>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '24px' }}>
         <Card title="System Audit Stream" subtitle="Live platform event sequence (Read Only)">
            <div style={{ 
               background: 'rgba(0,0,0,0.3)', 
               borderRadius: '8px', 
               padding: '16px', 
               fontFamily: 'monospace',
               fontSize: '0.8rem',
               maxHeight: '200px',
               overflowY: 'auto',
               display: 'flex',
               flexDirection: 'column',
               gap: '8px'
            }} className="no-scrollbar">
               {[
                 { t: '14:22:01', msg: 'SEC: MFA_POL_UPDATED: UserID #admin enforced high-entropy backup codes.', level: 'INFO' },
                 { t: '14:21:45', msg: 'NET: GW_SMS_FAILOVER: Switched priority to AWS SES for Asia-South-1.', level: 'WARN' },
                 { t: '14:20:12', msg: 'SYS: FRM_IOT_G4: Push firmware v4.2.1 deployment initialized for 12 nodes.', level: 'INFO' },
                 { t: '14:18:33', msg: 'AUTH: VAL_LOGIN_FAIL: Excessive attempts from 192.168.1.104. IP throttled.', level: 'ERROR' },
               ].map((log, i) => (
                 <div key={i} style={{ display: 'flex', gap: '12px', borderBottom: '1px solid rgba(255,255,255,0.02)', paddingBottom: '4px' }}>
                    <span style={{ color: 'var(--text-secondary)' }}>[{log.t}]</span>
                    <span style={{ 
                       color: log.level === 'ERROR' ? 'var(--alert-red)' : log.level === 'WARN' ? 'var(--warning-amber)' : 'var(--accent-cyan)',
                       fontWeight: 700
                    }}>{log.level}</span>
                    <span style={{ color: 'var(--text-primary)' }}>{log.msg}</span>
                 </div>
               ))}
            </div>
         </Card>
      </div>
    </div>
  );
};
