import { useState, useEffect } from 'react';
import Header from './components/Header';
import ThreatFeed from './components/ThreatFeed';
import NetworkTraffic from './components/NetworkTraffic';
import SystemHealth from './components/SystemHealth';
import MitreHeatmap from './components/MitreHeatmap';
import TopThreats from './components/TopThreats';
import IncidentTracker from './components/IncidentTracker';
import VulnSummary from './components/VulnSummary';
import {
  generateAlertBatch,
  generateAlert,
  generateTrafficData,
  generateSystemHealth,
  generateMitreData,
  generateTopThreats,
  generateIncidents,
  generateVulnSummary,
  getOverallThreatLevel,
} from './data/mockData';

function App() {
  const [alerts, setAlerts] = useState(() => generateAlertBatch(25));
  const [traffic, setTraffic] = useState(() => generateTrafficData(24));
  const [systems, setSystems] = useState(() => generateSystemHealth());
  const [mitre, setMitre] = useState(() => generateMitreData());
  const [threats, setThreats] = useState(() => generateTopThreats(8));
  const [incidents, setIncidents] = useState(() => generateIncidents());
  const [vulns, setVulns] = useState(() => generateVulnSummary());

  const threatLevel = getOverallThreatLevel(alerts);

  // Simulate live alert feed - new alert every 3-6 seconds
  useEffect(() => {
    const id = setInterval(() => {
      setAlerts((prev) => {
        const newAlert = generateAlert();
        const updated = [newAlert, ...prev];
        return updated.slice(0, 50);
      });
    }, 3000 + Math.random() * 3000);
    return () => clearInterval(id);
  }, []);

  // Refresh slower-changing data periodically
  useEffect(() => {
    const id = setInterval(() => {
      setSystems(generateSystemHealth());
      setTraffic(generateTrafficData(24));
    }, 15000);
    return () => clearInterval(id);
  }, []);

  useEffect(() => {
    const id = setInterval(() => {
      setThreats(generateTopThreats(8));
      setVulns(generateVulnSummary());
      setMitre(generateMitreData());
      setIncidents(generateIncidents());
    }, 30000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="flex flex-col h-screen bg-ap-dark">
      <Header threatLevel={threatLevel} />

      <div className="flex-1 grid grid-cols-12 grid-rows-[1fr_1fr_1fr] gap-px bg-white/5 min-h-0 overflow-hidden">
        {/* Row 1: Threat Feed | Network Traffic | System Health */}
        <div className="col-span-3 min-h-0 overflow-hidden">
          <ThreatFeed alerts={alerts} />
        </div>
        <div className="col-span-6 min-h-0 overflow-hidden">
          <NetworkTraffic data={traffic} />
        </div>
        <div className="col-span-3 min-h-0 overflow-hidden">
          <SystemHealth systems={systems} />
        </div>

        {/* Row 2: MITRE ATT&CK Heatmap | Top Threats Table */}
        <div className="col-span-6 min-h-0 overflow-hidden">
          <MitreHeatmap data={mitre} />
        </div>
        <div className="col-span-6 min-h-0 overflow-hidden">
          <TopThreats threats={threats} />
        </div>

        {/* Row 3: Incident Tracker | Vulnerability Summary */}
        <div className="col-span-7 min-h-0 overflow-hidden">
          <IncidentTracker incidents={incidents} />
        </div>
        <div className="col-span-5 min-h-0 overflow-hidden">
          <VulnSummary data={vulns} />
        </div>
      </div>
    </div>
  );
}

export default App;
