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([]);
  const [sluffMetrics, setSluffMetrics] = useState({
    flowRate: 0,
    bridgeStability: 0,
    decoherenceLevel: 0,
    loadBalance: 0,
    quantumStates: [],
    dimensionalPressure: []
  });

  // 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);
    // Simulate sluff metrics
    setSluffMetrics({
      flowRate: 87,
      bridgeStability: 94,
      decoherenceLevel: 0.03,
      loadBalance: 91,
      quantumStates: Array(8).fill(0).map(() => Math.random()),
      dimensionalPressure: Array(24).fill(0).map(() => Math.random() * 100)
    });

    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>

      {/* Sluff Monitoring Panel */}
      <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 text-cyan-400">Quantum Sluff Monitor</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Flow Metrics */}
          <div className="space-y-4">
            <div className="relative pt-1">
              <div className="flex items-center justify-between">
                <div>
                  <span className="text-xs font-semibold inline-block text-cyan-400">
                    Data Flow Rate
                  </span>
                </div>
                <div>
                  <span className="text-xs font-semibold inline-block text-cyan-400">
                    {sluffMetrics.flowRate}%
                  </span>
                </div>
              </div>
              <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-700">
                <div 
                  style={{ width: `${sluffMetrics.flowRate}%` }}
                  className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gradient-to-r from-cyan-400 to-blue-500"
                ></div>
              </div>
            </div>

            <div className="relative pt-1">
              <div className="flex items-center justify-between">
                <div>
                  <span className="text-xs font-semibold inline-block text-purple-400">
                    Bridge Stability
                  </span>
                </div>
                <div>
                  <span className="text-xs font-semibold inline-block text-purple-400">
                    {sluffMetrics.bridgeStability}%
                  </span>
                </div>
              </div>
              <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-700">
                <div 
                  style={{ width: `${sluffMetrics.bridgeStability}%` }}
                  className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gradient-to-r from-purple-400 to-purple-600"
                ></div>
              </div>
            </div>

            <div className="relative pt-1">
              <div className="flex items-center justify-between">
                <div>
                  <span className="text-xs font-semibold inline-block text-green-400">
                    Load Balance
                  </span>
                </div>
                <div>
                  <span className="text-xs font-semibold inline-block text-green-400">
                    {sluffMetrics.loadBalance}%
                  </span>
                </div>
              </div>
              <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-700">
                <div 
                  style={{ width: `${sluffMetrics.loadBalance}%` }}
                  className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gradient-to-r from-green-400 to-green-600"
                ></div>
              </div>
            </div>
          </div>

          {/* Decoherence Monitor */}
          <div className="bg-gray-900/50 p-4 rounded-lg border border-gray-700">
            <h3 className="text-sm font-semibold mb-3 text-cyan-400">Decoherence Patterns</h3>
            <div className="grid grid-cols-5 gap-2 mb-4">
              {[...Array(10)].map((_, i) => (
                <div 
                  key={i}
                  className={`h-8 rounded ${
                    Math.random() > 0.5 
                      ? 'bg-gradient-to-r from-purple-500 to-cyan-500' 
                      : 'bg-gray-700'
                  }`}
                ></div>
              ))}
            </div>
            <div className="text-xs text-gray-400">
              Active Quantum States: {sluffMetrics.quantumStates.length}
            </div>
          </div>
        </div>

        {/* Dimensional Pressure Gauge */}
        <div className="mt-6 p-4 bg-gray-900/50 rounded-lg border border-gray-700">
          <h3 className="text-sm font-semibold mb-3 text-cyan-400">Dimensional Pressure Map</h3>
          <div className="grid grid-cols-8 gap-1">
            {[...Array(24)].map((_, i) => (
              <div 
                key={i}
                className={`h-3 rounded ${
                  `bg-gradient-to-r from-${
                    ['cyan', 'purple', 'blue'][i % 3]
                  }-400 to-${
                    ['cyan', 'purple', 'blue'][(i + 1) % 3]
                  }-600 opacity-${Math.floor(Math.random() * 5) * 20 + 20}`
                }`}
              ></div>
            ))}
          </div>
        </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;