import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { Shield, Activity, Box, AlertTriangle } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

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

  useEffect(() => {
    // Simulated data - in production this would connect to our NurvSecure backend
    setActiveMarkers(156);
    setSecurityScore(98.7);
    setDimensionalActivity([
      { time: '00:00', dim1: 65, dim2: 78, dim3: 82, dim4: 91, dim5: 95 },
      { time: '04:00', dim1: 68, dim2: 82, dim3: 85, dim4: 88, dim5: 92 },
      { time: '08:00', dim1: 72, dim2: 85, dim3: 88, dim4: 92, dim5: 96 },
      { time: '12:00', dim1: 75, dim2: 88, dim3: 92, dim4: 95, dim5: 98 },
      { time: '16:00', dim1: 70, dim2: 83, dim3: 87, dim4: 90, dim5: 94 },
      { time: '20:00', dim1: 67, dim2: 80, dim3: 84, dim4: 89, dim5: 93 }
    ]);
    setAlerts([
      { id: 1, type: 'warning', message: 'Unusual activity detected in dimension 4' },
      { id: 2, type: 'info', message: 'New marker generated for blockchain #45892' }
    ]);
  }, []);

  return (
    <div className="w-full max-w-7xl mx-auto p-6 space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">NurvSecure™️ Dashboard</h1>
        <div className="flex items-center space-x-2">
          <Shield className="w-6 h-6 text-green-500" />
          <span className="text-lg font-semibold">System Active</span>
        </div>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white p-6 rounded-lg shadow-sm">
          <div className="flex items-center space-x-2">
            <Activity className="w-5 h-5 text-blue-500" />
            <h2 className="text-lg font-semibold">Active Markers</h2>
          </div>
          <p className="text-3xl font-bold mt-2">{activeMarkers}</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-sm">
          <div className="flex items-center space-x-2">
            <Box className="w-5 h-5 text-purple-500" />
            <h2 className="text-lg font-semibold">Security Score</h2>
          </div>
          <p className="text-3xl font-bold mt-2">{securityScore}%</p>
        </div>

        <div className="bg-white p-6 rounded-lg shadow-sm">
          <div className="flex items-center space-x-2">
            <AlertTriangle className="w-5 h-5 text-yellow-500" />
            <h2 className="text-lg font-semibold">Active Alerts</h2>
          </div>
          <p className="text-3xl font-bold mt-2">{alerts.length}</p>
        </div>
      </div>

      {/* Dimensional Activity Chart */}
      <div className="bg-white p-6 rounded-lg shadow-sm">
        <h2 className="text-xl font-semibold mb-4">Dimensional Activity</h2>
        <div className="h-64">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={dimensionalActivity}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="time" />
              <YAxis />
              <Tooltip />
              <Line type="monotone" dataKey="dim1" stroke="#8884d8" name="Dimension 1" />
              <Line type="monotone" dataKey="dim2" stroke="#82ca9d" name="Dimension 2" />
              <Line type="monotone" dataKey="dim3" stroke="#ffc658" name="Dimension 3" />
              <Line type="monotone" dataKey="dim4" stroke="#ff7300" name="Dimension 4" />
              <Line type="monotone" dataKey="dim5" stroke="#0088fe" name="Dimension 5" />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Alerts Section */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold">System Alerts</h2>
        {alerts.map((alert) => (
          <Alert key={alert.id} variant={alert.type === 'warning' ? 'destructive' : 'default'}>
            <AlertTitle>
              {alert.type === 'warning' ? 'Warning' : 'Information'}
            </AlertTitle>
            <AlertDescription>{alert.message}</AlertDescription>
          </Alert>
        ))}
      </div>
    </div>
  );
};

export default NurvSecureDashboard;