import React, { useState, useEffect } from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
import { Shield, AlertTriangle, Activity, Lock, Globe, Terminal } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

const ThreatMonitorDashboard = () => {
  const [highThreatActivities, setHighThreatActivities] = useState([]);
  const [probeAttempts, setProbeAttempts] = useState([]);
  const [securityMetrics, setSecurityMetrics] = useState({});
  const [selectedIncident, setSelectedIncident] = useState(null);

  // Simulated real-time data updates
  useEffect(() => {
    setHighThreatActivities([
      {
        id: "THR001",
        type: "PROBE_ATTEMPT",
        timestamp: Date.now(),
        riskScore: 0.85,
        location: "Multiple",
        patternType: "ERROR_FISHING",
        attempts: 12,
        requestPattern: ["error_detail", "stack_trace", "config_query"],
        status: "ACTIVE"
      },
      {
        id: "THR002",
        type: "SYSTEM_PROBE",
        timestamp: Date.now() - 300000,
        riskScore: 0.92,
        location: "Unknown",
        patternType: "PERMISSION_PROBE",
        attempts: 8,
        requestPattern: ["sudo_attempt", "admin_access", "privilege_escalation"],
        status: "CONTAINED"
      }
    ]);

    setSecurityMetrics({
      probeAttempts: 23,
      highRiskSessions: 3,
      activeBlocks: 7,
      averageRiskScore: 0.76
    });
  }, []);

  const IncidentDetails = ({ incident }) => (
    <div className="bg-gray-800/50 backdrop-blur-lg p-6 rounded-lg border border-gray-700">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-xl font-semibold text-cyan-400">
          Incident {incident.id}
        </h3>
        <span className={`px-3 py-1 rounded-full ${
          incident.status === 'ACTIVE' 
            ? 'bg-red-500/20 text-red-400' 
            : 'bg-green-500/20 text-green-400'
        }`}>
          {incident.status}
        </span>
      </div>

      <div className="grid grid-cols-2 gap-4 mb-4">
        <div>
          <p className="text-gray-400">Risk Score</p>
          <p className="text-2xl font-bold text-white">
            {(incident.riskScore * 100).toFixed(1)}%
          </p>
        </div>
        <div>
          <p className="text-gray-400">Pattern Type</p>
          <p className="text-white font-mono">{incident.patternType}</p>
        </div>
        <div>
          <p className="text-gray-400">Attempts</p>
          <p className="text-white">{incident.attempts}</p>
        </div>
        <div>
          <p className="text-gray-400">Location</p>
          <p className="text-white">{incident.location}</p>
        </div>
      </div>

      <div className="space-y-4">
        <div>
          <p className="text-gray-400 mb-2">Request Pattern</p>
          <div className="bg-gray-900/50 p-4 rounded-lg">
            {incident.requestPattern.map((req, index) => (
              <div key={index} className="flex items-center space-x-2 mb-2">
                <Terminal className="w-4 h-4 text-cyan-400" />
                <code className="text-cyan-400">{req}</code>
              </div>
            ))}
          </div>
        </div>

        <div className="flex space-x-4">
          <button className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2">
            <Lock className="w-4 h-4" />
            <span>Block Access</span>
          </button>
          <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2">
            <Globe className="w-4 h-4" />
            <span>Trace Origin</span>
          </button>
        </div>
      </div>
    </div>
  );

  return (
    <div className="bg-gray-900 text-white w-full max-w-7xl mx-auto p-6 space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center border-b border-cyan-500/30 pb-4">
        <h1 className="text-4xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
          High Threat Monitoring
        </h1>
        <div className="flex items-center space-x-2 bg-gray-800 p-2 rounded-lg">
          <AlertTriangle className="w-6 h-6 text-red-400" />
          <span className="text-lg font-semibold text-red-400">
            {highThreatActivities.filter(t => t.status === 'ACTIVE').length} Active Threats
          </span>
        </div>
      </div>

      {/* Metrics Grid */}
      <div className="grid grid-cols-4 gap-4">
        <div className="bg-gray-800/50 backdrop-blur-lg p-4 rounded-lg border border-gray-700">
          <div className="flex items-center space-x-2">
            <Shield className="w-5 h-5 text-cyan-400" />
            <p className="text-gray-400">Probe Attempts</p>
          </div>
          <p className="text-2xl font-bold mt-2">{securityMetrics.probeAttempts}</p>
        </div>
        <div className="bg-gray-800/50 backdrop-blur-lg p-4 rounded-lg border border-gray-700">
          <div className="flex items-center space-x-2">
            <AlertTriangle className="w-5 h-5 text-yellow-400" />
            <p className="text-gray-400">High Risk Sessions</p>
          </div>
          <p className="text-2xl font-bold mt-2">{securityMetrics.highRiskSessions}</p>
        </div>
        <div className="bg-gray-800/50 backdrop-blur-lg p-4 rounded-lg border border-gray-700">
          <div className="flex items-center space-x-2">
            <Lock className="w-5 h-5 text-red-400" />
            <p className="text-gray-400">Active Blocks</p>
          </div>
          <p className="text-2xl font-bold mt-2">{securityMetrics.activeBlocks}</p>
        </div>
        <div className="bg-gray-800/50 backdrop-blur-lg p-4 rounded-lg border border-gray-700">
          <div className="flex items-center space-x-2">
            <Activity className="w-5 h-5 text-purple-400" />
            <p className="text-gray-400">Avg Risk Score</p>
          </div>
          <p className="text-2xl font-bold mt-2">
            {(securityMetrics.averageRiskScore * 100).toFixed(1)}%
          </p>
        </div>
      </div>

      {/* Threat List and Details */}
      <div className="grid grid-cols-2 gap-6">
        <div className="space-y-4">
          <h2 className="text-xl font-semibold text-cyan-400">Active Threats</h2>
          {highThreatActivities.map(threat => (
            <div
              key={threat.id}
              className={`bg-gray-800/50 backdrop-blur-lg p-4 rounded-lg border cursor-pointer
                ${selectedIncident?.id === threat.id ? 'border-cyan-500' : 'border-gray-700'}
                hover:border-cyan-500/50`}
              onClick={() => setSelectedIncident(threat)}
            >
              <div className="flex justify-between items-center">
                <div className="flex items-center space-x-2">
                  <AlertTriangle className={`w-5 h-5 ${
                    threat.status === 'ACTIVE' ? 'text-red-400' : 'text-yellow-400'
                  }`} />
                  <div>
                    <p className="font-semibold">{threat.type}</p>
                    <p className="text-sm text-gray-400">ID: {threat.id}</p>
                  </div>
                </div>
                <div className="text-right">
                  <p className="text-sm text-gray-400">Risk Score</p>
                  <p className="font-bold text-cyan-400">
                    {(threat.riskScore * 100).toFixed(1)}%
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Selected Incident Details */}
        {selectedIncident && <IncidentDetails incident={selectedIncident} />}
      </div>
    </div>
  );
};

export default ThreatMonitorDashboard;