import React from 'react';
import { Zap, Server, Terminal } from 'lucide-react';
import { Card } from '../components/Common';
import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer, Tooltip } from 'recharts';

const cpuData = [
  { time: '09:00', usage: 32 },
  { time: '09:05', usage: 45 },
  { time: '09:10', usage: 42 },
  { time: '09:15', usage: 55 },
  { time: '09:20', usage: 48 },
  { time: '09:25', usage: 60 },
];

export const SystemHealth: React.FC = () => {
  return (
    <div className="page-container" style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
      <h2 style={{ fontSize: '1.5rem', fontWeight: 700 }}>Service Infrastructure & Health Monitor</h2>

      {/* Connectivity Mesh Visualization */}
      <Card style={{ padding: '0', height: '300px', overflow: 'hidden', position: 'relative' }}>
        <div style={{ position: 'absolute', top: '15px', left: '20px', fontSize: '0.75rem', fontWeight: 700, color: 'var(--accent-cyan)' }}>MESH STATUS: OPTIMAL (RTT &lt; 2ms)</div>
        <div style={{ width: '100%', height: '100%', background: 'radial-gradient(circle at center, rgba(59, 130, 246, 0.05) 0%, transparent 70%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ position: 'relative', width: '600px', height: '200px' }}>
             {/* Central Node */}
             <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '60px', height: '60px', borderRadius: '50%', border: '2px solid var(--accent-cyan)', background: 'rgba(59, 130, 246, 0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 15px rgba(59, 130, 246, 0.2)' }}>
                <Zap size={24} color="var(--accent-cyan)" />
             </div>
             
             {/* Orbital Nodes */}
             {[
               { angle: 0, label: 'AUTH' },
               { angle: 60, label: 'DISPATCH' },
               { angle: 120, label: 'RTVS' },
               { angle: 180, label: 'EPCR' },
               { angle: 240, label: 'NOTIFY' },
               { angle: 300, label: 'GATEWAY' },
             ].map((node, i) => {
               const rad = (node.angle * Math.PI) / 180;
               const x = 50 + 40 * Math.cos(rad);
               const y = 50 + 40 * Math.sin(rad);
               return (
                 <React.Fragment key={i}>
                    <div style={{ position: 'absolute', top: `${y}%`, left: `${x}%`, width: '10px', height: '10px', background: 'var(--accent-green)', borderRadius: '50%', boxShadow: '0 0 10px var(--accent-green)' }}></div>
                    <div style={{ position: 'absolute', top: `${y + 4}%`, left: `${x}%`, fontSize: '0.6rem', color: 'var(--text-secondary)', transform: 'translateX(-50%)' }}>{node.label}</div>
                    {/* SVG Line to center */}
                    <svg style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: -1 }}>
                       <line x1="50%" y1="50%" x2={`${x}%`} y2={`${y}%`} stroke="rgba(59, 130, 246, 0.1)" strokeWidth="1" strokeDasharray="4 2" />
                    </svg>
                 </React.Fragment>
               )
             })}
          </div>
        </div>
      </Card>

      {/* Services Grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '16px' }}>
        {[
          'Auth', 'Dispatch', 'RTVS', 'TeleLink', 'ePCR', 
          'Notify', 'Fleet', 'Hospital', 'Analytics', 'Admin'
        ].map((service) => (
          <Card key={service} style={{ padding: '16px' }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
                <div style={{ padding: '6px', background: 'rgba(0,0,0,0.03)', borderRadius: '4px' }}>
                   <Server size={14} color="var(--accent-cyan)" />
                </div>
                <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: 'var(--accent-green)', boxShadow: '0 0 10px var(--accent-green)' }}></div>
             </div>
             <div style={{ fontSize: '0.85rem', fontWeight: 700 }}>{service} Service</div>
             <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '12px', fontSize: '0.65rem', color: 'var(--text-secondary)' }}>
                <span>Pods: 3/3</span>
                <span>v1.2.4</span>
             </div>
          </Card>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: '24px' }}>
         {/* Infrastructure Metrics */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
            <Card title="Global CPU Utilization (%)" subtitle="Aggregated Kubernetes Cluster Performance">
               <div style={{ height: '300px', marginTop: '12px', minWidth: 0 }}>
                  <ResponsiveContainer width="100%" height={300}>
                    <AreaChart data={cpuData}>
                      <defs>
                        <linearGradient id="colorCpu" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="5%" stopColor="var(--accent-green)" stopOpacity={0.3}/>
                          <stop offset="95%" stopColor="var(--accent-green)" stopOpacity={0}/>
                        </linearGradient>
                      </defs>
                      <XAxis dataKey="time" stroke="var(--text-secondary)" fontSize={12} />
                      <YAxis stroke="var(--text-secondary)" fontSize={12} />
                      <Tooltip contentStyle={{ background: 'var(--base-bg)', border: '1px solid var(--card-border)' }} />
                      <Area type="monotone" dataKey="usage" stroke="var(--accent-green)" strokeWidth={3} fillOpacity={1} fill="url(#colorCpu)" />
                    </AreaChart>
                  </ResponsiveContainer>
               </div>
            </Card>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px' }}>
               <Card title="Active DB Connections">
                  <div style={{ textAlign: 'center', padding: '10px 0' }}>
                     <div className="mono" style={{ fontSize: '2.5rem', fontWeight: 700, color: 'var(--accent-cyan)' }}>142</div>
                     <div style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>AURORA GLOBAL (PRIMARY)</div>
                  </div>
               </Card>
               <Card title="Redis Hit Rate">
                  <div style={{ textAlign: 'center', padding: '10px 0' }}>
                     <div className="mono" style={{ fontSize: '2.5rem', fontWeight: 700, color: 'var(--accent-green)' }}>99.2%</div>
                     <div style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>ELASTICACHE CLUSTER</div>
                  </div>
               </Card>
            </div>
         </div>

         {/* CI/CD & Deployments */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
            <Card title="CI/CD Pipeline Status" subtitle="Recent Production Deploys">
               <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                  {[
                    { svc: 'Dispatch-Service', ver: 'v2.1.0', status: 'SUCCESS', time: '2h ago' },
                    { svc: 'Auth-Service', ver: 'v1.4.2', status: 'SUCCESS', time: '5h ago' },
                    { svc: 'RTVS-Service', ver: 'v3.0.1', status: 'FAILED', time: '8h ago' },
                    { svc: 'Notify-Gateway', ver: 'v0.9.9', status: 'SUCCESS', time: '1d ago' },
                  ].map((dep, i) => (
                    <div key={i} style={{ padding: '12px', background: 'rgba(0,0,0,0.02)', borderRadius: '6px', borderLeft: `3px solid ${dep.status === 'SUCCESS' ? 'var(--accent-green)' : 'var(--alert-red)'}` }}>
                       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                          <span style={{ fontSize: '0.85rem', fontWeight: 700 }}>{dep.svc}</span>
                          <span style={{ fontSize: '0.65rem', fontWeight: 700, color: dep.status === 'SUCCESS' ? 'var(--accent-green)' : 'var(--alert-red)' }}>{dep.status}</span>
                       </div>
                       <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '6px', fontSize: '0.75rem', color: 'var(--text-secondary)' }}>
                          <span className="mono">{dep.ver}</span>
                          <span>{dep.time}</span>
                       </div>
                    </div>
                  ))}
               </div>
               <button style={{ width: '100%', padding: '12px', background: 'transparent', border: '1px solid var(--card-border)', color: 'var(--text-secondary)', borderRadius: '6px', marginTop: '20px', fontSize: '0.8rem', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}>
                  <Terminal size={14} /> VIEW RUNNER LOGS
               </button>
            </Card>

            <Card title="SSL/TLS Expiry Monitor">
               <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                  {[
                    { domain: 'api.teleems.in', days: 24, status: 'amber' },
                    { domain: 'rtvs.teleems.in', days: 120, status: 'green' },
                    { domain: 'telelink.in', days: 5, status: 'red' },
                  ].map((cert, i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                       <span style={{ fontSize: '0.8rem' }}>{cert.domain}</span>
                       <span style={{ 
                         fontSize: '0.75rem', 
                         fontWeight: 700, 
                         color: cert.status === 'red' ? 'var(--alert-red)' : cert.status === 'amber' ? 'var(--warning-amber)' : 'var(--accent-green)' 
                       }}>{cert.days} Days</span>
                    </div>
                  ))}
               </div>
            </Card>
         </div>
      </div>

      <div style={{ marginTop: '32px' }}>
         <Card title="System-Wide Maintenance & Emergency Control" subtitle="Override global service state (Requires L3 Clearance)">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '24px', padding: '12px 0' }}>
               <div style={{ padding: '20px', background: 'rgba(239, 68, 68, 0.05)', border: '1px solid rgba(239, 68, 68, 0.2)', borderRadius: '12px' }}>
                  <div style={{ fontSize: '0.9rem', fontWeight: 800, color: 'var(--alert-red)', marginBottom: '8px' }}>Global Maintenance Mode</div>
                  <p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginBottom: '16px' }}>Suspend all non-emergency routing and show maintenance landing page.</p>
                  <button style={{ padding: '10px 16px', background: 'var(--alert-red)', color: '#fff', border: 'none', borderRadius: '6px', fontWeight: 700, cursor: 'pointer', width: '100%' }}>ACTIVATE LOCKDOWN</button>
               </div>
               
               <div style={{ padding: '20px', background: 'rgba(59, 130, 246, 0.05)', border: '1px solid var(--card-border)', borderRadius: '12px' }}>
                  <div style={{ fontSize: '0.9rem', fontWeight: 800, color: 'var(--accent-cyan)', marginBottom: '8px' }}>Cache Invalidation (Global)</div>
                  <p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginBottom: '16px' }}>Flush all Redis clusters and rewarm critical platform metadata.</p>
                  <button style={{ padding: '10px 16px', background: 'transparent', border: '1px solid var(--accent-cyan)', color: 'var(--accent-cyan)', borderRadius: '6px', fontWeight: 700, cursor: 'pointer', width: '100%' }}>FLUSH MEMORY</button>
               </div>

               <div style={{ padding: '20px', background: 'rgba(245, 158, 11, 0.05)', border: '1px solid rgba(245, 158, 11, 0.2)', borderRadius: '12px' }}>
                  <div style={{ fontSize: '0.9rem', fontWeight: 800, color: 'var(--warning-amber)', marginBottom: '8px' }}>Traffic Throttling</div>
                  <p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginBottom: '16px' }}>Enable rate-limiting for non-emergency API endpoints (e.g., Analytics).</p>
                  <button style={{ padding: '10px 16px', background: 'transparent', border: '1px solid var(--warning-amber)', color: 'var(--warning-amber)', borderRadius: '6px', fontWeight: 700, cursor: 'pointer', width: '100%' }}>ENGAGE THROTTLE</button>
               </div>
            </div>
         </Card>
      </div>
    </div>
  );
};
