apps/matrix-frontend/src/widgets/reactor/ReactorSystemGrid.tsx

import { useReactorData } from './useReactorData';

export const ReactorSystemGrid = () => {
  const { health, loading } = useReactorData();

  // Convert API health object to array for display
  const services = Object.entries(health.services || {}).map(([name, status]) => ({
    name: name.charAt(0).toUpperCase() + name.slice(1),
    function: name === 'neo4j' ? 'CORTEX' : name === 'sqlite' ? 'MEMORY' : 'SYSTEM',
    status: status.healthy ? 'ONLINE' : 'OFFLINE',
    load: status.healthy ? 'NOMINAL' : 'ERR',
    color: status.healthy ? 'text-green-400' : 'text-red-400',
    border: status.healthy ? 'border-green-500' : 'border-red-500'
  }));

  if (loading && services.length === 0) {
    return (
      <div className="scada-panel bg-slate-800/30 border border-slate-700 rounded p-4 h-full flex items-center justify-center">
        <span className="text-slate-500 font-mono animate-pulse">SCANNING SYSTEMS...</span>
      </div>
    );
  }

  return (
    <div className="scada-panel bg-slate-800/30 border border-slate-700 rounded p-4 h-full">
      <h3 className="text-sm font-bold text-white uppercase mb-4 flex items-center gap-2">
        <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span> 
        Active Arrays
      </h3>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {services.map((comp, i) => (
          <div key={i} className={`bg-slate-900/80 border-l-2 ${comp.border.replace('border-', 'border-l-')} p-3 relative overflow-hidden group hover:bg-slate-800 transition-all`}>
            <div className="flex justify-between items-center mb-2">
              <span className="text-[10px] font-mono text-slate-500 uppercase tracking-wider">{comp.function}</span>
              <div className={`w-1.5 h-1.5 rounded-full ${comp.status === 'ONLINE' ? 'bg-green-500 shadow-[0_0_5px_#22c55e]' : 'bg-red-500 shadow-[0_0_5px_#ef4444]'}`}></div>
            </div>
            <h3 className="text-sm font-bold text-slate-200 mb-1 leading-tight truncate">{comp.name}</h3>
            <div className="flex justify-between items-end mt-2">
              <div className="text-[10px] text-slate-600">STATUS</div>
              <div className={`font-mono text-lg ${comp.color}`}>{comp.status}</div>
            </div>
          </div>
        ))}
        
        {/* Dynamic placeholders if few services */}
        {[...Array(Math.max(0, 5 - services.length))].map((_, i) => (
          <div key={`empty-${i}`} className="bg-slate-900/30 border border-slate-800 border-dashed p-3 flex items-center justify-center opacity-50">
              <span className="text-[10px] text-slate-600 font-mono uppercase">Empty Slot</span>
          </div>
        ))}
      </div>
    </div>
  );
};