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

const NurvSecureDashboard = () => {
  const [dimensionalData, setDimensionalData] = useState([]);
  const [activeMarkers, setActiveMarkers] = useState(0);
  const [securityScore, setSecurityScore] = useState(0);
  const [alerts, setAlerts] = useState([]);

  // Cyberpunk-inspired color scheme
  const COLORS = ['#00f5d4', '#00b4d8', '#7209b7', '#3f37c9', '#4895ef'];

  useEffect(() => {
    // Simulated data
    setDimensionalData([
      { name: 'Dimension 5', value: 35, security: 98 },
      { name: 'Dimension 4', value: 30, security: 95 },
      { name: 'Dimension 3', value: 25, security: 92 },
      { name: 'Dimension 2', value: 20, security: 88 },
      { name: 'Dimension 1', value: 15, security: 85 }
    ]);
    setActiveMarkers(156);
    setSecurityScore(98.7);
    setAlerts([
      { id: 1, type: 'warning', message: 'Unusual activity detected in dimension 4' },
      { id: 2, type: 'info', message: 'New marker generated for blockchain #45892' }
    ]);
  }, []);

  const CustomTooltip = ({ active, payload }) => {
    if (active && payload && payload.length) {
      return (
        <div className="bg-gray-900 p-4 rounded-lg border border-gray-700">
          <p className="text-cyan-400">{payload[0].name}</p>
          <p className="text-white">Security Level: {payload[0].payload.security}%</p>
          <p className="text-white">Active Markers: {payload[0].value}</p>
        </div>
      );
    }
    return null;
  };

  return (
    <div className="bg-gray-900 text-white w-full max-w-7xl mx-auto p-6 space-y-6">
      {/* Header with glow effect */}
      <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™️ Dashboard
        </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">System Active</span>
        </div>
      </div>

      {/* Stats Grid with glassmorphism effect */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-gray-800/50 backdrop-blur-lg p-6 rounded-lg border border-gray-700">
          <div className="flex items-center space-x-2">
            <Activity className="w-5 h-5 text-cyan-400" />
            <h2 className="text-lg font-semibold">Active Markers</h2>
          </div>
          <p className="text-3xl font-bold mt-2 text-cyan-400">{activeMarkers}</p>
        </div>

        <div className="bg-gray-800/50 backdrop-blur-lg p-6 rounded-lg border border-gray-700">
          <div className="flex items-center space-x-2">
            <Lock className="w-5 h-5 text-purple-400" />
            <h2 className="text-lg font-semibold">Security Score</h2>
          </div>
          <p className="text-3xl font-bold mt-2 text-purple-400">{securityScore}%</p>
        </div>

        <div className="bg-gray-800/50 backdrop-blur-lg p-6 rounded-lg border border-gray-700">
          <div className="flex items-center space-x-2">
            <AlertTriangle className="w-5 h-5 text-yellow-400" />
            <h2 className="text-lg font-semibold">Active Alerts</h2>
          </div>
          <p className="text-3xl font-bold mt-2 text-yellow-400">{alerts.length}</p>
        </div>
      </div>

      {/* Dimensional Security Donut */}
      <div className="bg-gray-800/50 backdrop-blur-lg p-6 rounded-lg border border-gray-700">
        <h2 className="text-xl font-semibold mb-4">Dimensional Security Layers</h2>
        <div className="h-96">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={dimensionalData}
                innerRadius="60%"
                outerRadius="90%"
                paddingAngle={5}
                dataKey="value"
              >
                {dimensionalData.map((entry, index) => (
                  <Cell 
                    key={`cell-${index}`} 
                    fill={COLORS[index % COLORS.length]}
                    stroke="transparent"
                  />
                ))}
              </Pie>
              <Tooltip content={<CustomTooltip />} />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Alerts Section with neon glow */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold text-cyan-400">System Alerts</h2>
        {alerts.map((alert) => (
          <Alert 
            key={alert.id} 
            variant={alert.type === 'warning' ? 'destructive' : 'default'}
            className="bg-gray-800/50 border-cyan-500/30"
          >
            <AlertTitle className="text-cyan-400">
              {alert.type === 'warning' ? 'Warning' : 'Information'}
            </AlertTitle>
            <AlertDescription className="text-gray-300">{alert.message}</AlertDescription>
          </Alert>
        ))}
      </div>
    </div>
  );
};

export default NurvSecureDashboard;