import React from 'react';
import { ReactorStatCards } from './reactor/ReactorStatCards';
import { ReactorLogList } from './reactor/ReactorLogList';
import { ReactorSystemGrid } from './reactor/ReactorSystemGrid';
import { ReactorTelemetryCharts } from './reactor/ReactorTelemetryCharts';

const ReactorCoreStatusWidget = () => {
  return (
    <div className="min-h-screen bg-[#0f172a] p-4 md:p-6 overflow-y-auto font-display selection:bg-green-500/30 selection:text-green-200">
      {/* SCADA CSS Injection for this page only */}
      <style>{`
        .scada-panel {
            backdrop-filter: blur(5px);
            position: relative;
        }
        .scada-panel::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(34,197,94,0.5), transparent);
            opacity: 0.5;
        }
        /* Scanline effect */
        .scanlines {
            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
            background-size: 100% 4px;
            position: fixed;
            pointer-events: none;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 50;
            opacity: 0.15;
        }
      `}</style>

      <div className="scanlines"></div>

      <div className="max-w-7xl mx-auto space-y-6 relative z-10">
        
        {/* 1. Top Status Widgets */}
        <section>
          <ReactorStatCards />
        </section>

        {/* 2. Briefing Panel */}
        <section className="scada-panel rounded p-4 bg-slate-800/40 border border-slate-700/50">
            <h2 className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-2 border-l-2 border-blue-500 pl-3">
              System Broadcast
            </h2>
            <p className="text-slate-400 leading-relaxed font-mono text-xs md:text-sm">
                :: CHANNEL SECURE :: <br />
                Reaktor-loggen bekræfter succesfuld berigning af isotop <code className="text-green-400">GraphIngestor</code>. 
                Sikkerhedsprotokol <code className="text-green-400">SelfHealingAdapter</code> er online.
                Alle systemer kører i Hybrid Mode (Neo4j AuraDB + Local Node).
                :: END OF LINE ::
            </p>
        </section>

        {/* 3. Main Dashboard Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[calc(100vh-300px)] min-h-[600px]">

            {/* LEFT: Log (1/3 width) */}
            <div className="lg:col-span-1 h-full min-h-[400px]">
                <ReactorLogList />
            </div>

            {/* RIGHT: System & Charts (2/3 width) */}
            <div className="lg:col-span-2 flex flex-col gap-6 h-full">
                
                {/* Top Right: System Grid */}
                <div className="flex-1 min-h-[200px]">
                    <ReactorSystemGrid />
                </div>

                {/* Bottom Right: Charts */}
                <div className="flex-1 min-h-[250px]">
                    <ReactorTelemetryCharts />
                </div>

            </div>
        </div>
      </div>
    </div>
  );
};

export default ReactorCoreStatusWidget;