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

const NurvSecureDashboard = () => {
  const [dimensionalData, setDimensionalData] = useState([]);
  const [activeThreats, setActiveThreats] = useState([]);
  const [traceResults, setTraceResults] = useState([]);
  const [selectedThreat, setSelectedThreat] = useState(null);

  const COLORS = ['#00f5d4', '#00b4d8', '#7209b7', '#3f37c9', '#4895ef'];

  useEffect(() => {
    // Simulated threat data
    setActiveThreats([
      {
        id: 'T-001',
        type: 'INTRUSION',
        severity: 'HIGH',
        dimension: 4,
        origin: '185.192.69.xx',
        status: 'ACTIVE',
        trace: {
          path: ['SG', 'RU', 'NL', 'US'],
          timestamps: [1612345678, 1612345680, 1612345682, 1612345684],
          nodes: ['Node-A', 'Node-B', 'Node-C', 'Node-D']
        }
      },
      {
        id: 'T-002',
        type: 'DATA_BREACH',
        severity: 'CRITICAL',
        dimension: 3,
        origin: '91.234.56.xx',
        status: 'ACTIVE',
        trace: {
          path: ['CN', 'KR', 'JP', 'US'],
          timestamps: [1612345700, 1612345702, 1612345704, 1612345706],
          nodes: ['Node-X', 'Node-Y', 'Node-Z', 'Node-W']
        }
      }
    ]);
  }, []);

  const handleThreatAction = (threatId, action) => {
    console.log(`Executing ${action} on threat ${threatId}`);
    // Implement threat response actions
  };

  const ThreatTraceView = ({ threat }) => (
    <div className="bg-gray-800/50 backdrop-blur-lg p-6 rounded-lg border border-gray-700 mt-4">
      <h3 className="text-xl font-semibold text-cyan-400 mb-4">Threat Trace: {threat.id}</h3>
      <div className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-gray-400">Origin</p>
            <p className="text-white font-mono">{threat.origin}</p>
          </div>
          <div>
            <p className="text-gray-400">Status</p>
            <p className="text-white font-mono">{threat.status}</p>
          </div>
        </div>
        
        <div className="border-t border-gray-700 pt-4">
          <p className="text-gray-400 mb-2">Trace Path</p>
          <div className="flex items-center space-x-2">
            {threat.trace.path.map((location, index) => (
              <React.Fragment key={index}>
                <span className="bg-gray-700 px-2 py-1 rounded text-white font-mono">
                  {location}
                </span>
                {index < threat.trace.path.length - 1 && (
                  <span className="text-gray-500">→</span>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        <div className="flex space-x-4 mt-4">
          <button
            onClick={() => handleThreatAction(threat.id, 'BLOCK')}
            className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2"
          >
            <ZapOff className="w-4 h-4" />
            <span>Block Attack</span>
          </button>
          <button
            onClick={() => handleThreatAction(threat.id, 'TRACE')}
            className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2"
          >
            <Radar className="w-4 h-4" />
            <span>Deep Trace</span>
          </button>
          <button
            onClick={() => handleThreatAction(threat.id, 'ISOLATE')}
            className="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2"
          >
            <Target className="w-4 h-4" />
            <span>Isolate</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">
          NurvSecure™️ Command Center
        </h1>
        <div className="flex items-center space-x-2 bg-gray-800 p-2 rounded-lg">
          <Shield className="w-6 h-6 text-cyan-400" />
          <span className="text-lg font-semibold text-cyan-400">Threat Detection Active</span>
        </div>
      </div>

      {/* Active Threats Panel */}
      <div className="bg-gray-800/50 backdrop-blur-lg p-6 rounded-lg border border-gray-700">
        <h2 className="text-xl font-semibold text-cyan-400 mb-4">Active Threats</h2>
        <div className="space-y-4">
          {activeThreats.map(threat => (
            <div 
              key={threat.id}
              className="bg-gray-700/50 p-4 rounded-lg cursor-pointer hover:bg-gray-700/70"
              onClick={() => setSelectedThreat(threat)}
            >
              <div className="flex justify-between items-center">
                <div className="flex items-center space-x-4">
                  <AlertTriangle className={`w-5 h-5 ${
                    threat.severity === 'CRITICAL' ? 'text-red-400' : 'text-yellow-400'
                  }`} />
                  <div>
                    <h3 className="font-semibold">{threat.type}</h3>
                    <p className="text-sm text-gray-400">ID: {threat.id} | Dimension: {threat.dimension}</p>
                  </div>
                </div>
                <span className={`px-2 py-1 rounded-full text-sm ${
                  threat.severity === 'CRITICAL' ? 'bg-red-500/20 text-red-400' : 'bg-yellow-500/20 text-yellow-400'
                }`}>
                  {threat.severity}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Selected Threat Trace */}
      {selectedThreat && <ThreatTraceView threat={selectedThreat} />}
    </div>
  );
};

export default NurvSecureDashboard;