import React from 'react';
import { SystemStatus } from '../types';

interface StatusItemProps {
  label: string;
  status: string;
  color: string;
}

const StatusItem: React.FC<StatusItemProps> = ({ label, status, color }) => (
  <div className="flex justify-between items-center">
    <span>{label}</span>
    <span className={`font-bold ${color}`}>{status}</span>
  </div>
);


interface SystemMonitorProps {
    codexStatus: SystemStatus;
}

const SystemMonitor: React.FC<SystemMonitorProps> = ({ codexStatus }) => {
    const getCodexStatusColor = () => {
        switch (codexStatus) {
            case 'SYNCED': return 'text-cyan-400';
            case 'RECOVERING': return 'text-yellow-400 animate-pulse';
            case 'ERROR': return 'text-red-500 animate-pulse';
            default: return 'text-gray-500';
        }
    }

  return (
    <div className="w-full h-full bg-black/30 p-4 border border-emerald-900 rounded-lg flex flex-col space-y-3 text-sm backdrop-blur-sm">
      <h2 className="text-lg font-bold border-b border-emerald-800 pb-2 text-glow">SYSTEM MONITOR</h2>
      <StatusItem label="PQC SIDECAR" status="ONLINE" color="text-green-400" />
      <StatusItem label="TETRAMORPHIC CORE" status="STABLE" color="text-green-400" />
      <StatusItem label="FORMAL VERIFICATION" status="ACTIVE" color="text-green-400" />
      <StatusItem label="HARMONIC BALANCER" status="ONLINE" color="text-green-400" />
      <StatusItem label="CODEX CORE" status={codexStatus} color={getCodexStatusColor()} />
      <StatusItem label="UE5.7 VISUALIZER" status="OFFLINE" color="text-gray-500" />
      <StatusItem label="CREWAI ORCHESTRATOR" status="ACTIVE" color="text-green-400" />
      <StatusItem label="GOVERNANCE SEAL" status="ACTIVE" color="text-green-400" />

      <div className="flex-grow"></div>
      <div className="border-t border-emerald-800 pt-2 text-emerald-700">
        <p>&gt; Peace Through Formal Strength</p>
        <p>&gt; All systems nominal.</p>
      </div>
    </div>
  );
};

export default SystemMonitor;