import React, { useState, useEffect } from 'react';

import { Settings, Home, Users, Server, Box, Bug, Sun, Moon } from 'lucide-react';

const Dashboard = () => {

const [activeTab, setActiveTab] = useState('dashboard');
const [isDark, setIsDark] = useState(true);
const [isHovered, setIsHovered] = useState('');
const [systemStats, setSystemStats] = useState({
clients: 3,
servers: 2,
usage: 1.2
});

useEffect(() => {
const interval = setInterval(() => {
setSystemStats(prev => ({
clients: prev.clients + (Math.random() > 0.7 ? 1 : 0),
servers: prev.servers + (Math.random() > 0.9 ? 1 : 0),
usage: Math.min(100, +(prev.usage + Math.random() * 0.1).toFixed(1))
}));
}, 3000);
return () => clearInterval(interval);
}, []);

const baseTheme = isDark ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-

900';
const sidebarTheme = isDark ? 'bg-slate-800/50' : 'bg-white/50';
const cardTheme = isDark ? 'bg-slate-800/30' : 'bg-white/30';

const handleCardClick = (section) => {

setActiveTab(section);
// Ajout d'un effet de flash lors du clic
const mainContent = document.querySelector('.main-content');
mainContent.classList.add('flash-transition');
setTimeout(() => mainContent.classList.remove('flash-transition'), 500);
};

const renderContent = () => {

switch(activeTab) {
case 'clients':
return (
<div className="space-y-4">
<h2 className="text-2xl font-semibold mb-6">Clients</h2>
<div className="grid grid-cols-2 gap-4">
{[...Array(systemStats.clients)].map((_, i) => (
<div key={i} className={`${cardTheme} p-4 rounded-lg backdrop-blur-
xl
border border-white/10 hover:scale-105 transition-all duration-
300`}>
<div className="flex items-center space-x-3">
<Users className="text-blue-400" />
<span>Client {i + 1}</span>
</div>
<div className="mt-2 text-sm opacity-70">Status: Active</div>
</div>
))}
</div>
</div>
);
 case 'server':
return (
<div className="space-y-4">
<h2 className="text-2xl font-semibold mb-6">Servers</h2>
<div className="grid grid-cols-2 gap-4">
{[...Array(systemStats.servers)].map((_, i) => (
<div key={i} className={`${cardTheme} p-4 rounded-lg backdrop-blur-
xl
border border-white/10 hover:scale-105 transition-all duration-
300`}>
<div className="flex items-center space-x-3">
<Server className="text-orange-400" />
<span>Server {i + 1}</span>
</div>
<div className="mt-2 text-sm opacity-70">Load: {(Math.random() *
100).toFixed(1)}%</div>
</div>
))}
</div>
</div>
);
default:
return (
<>
<div className="grid grid-cols-3 gap-6 mb-8">
{[
{ title: 'Clients', value: systemStats.clients, icon: Users,
gradient: 'from-blue-500 to-cyan-400', section: 'clients' },
{ title: 'Servers', value: systemStats.servers, icon: Server,
gradient: 'from-orange-500 to-red-400', section: 'server' },
{ title: 'Usage', value: `${systemStats.usage}%`, icon: Box,
gradient: 'from-purple-500 to-pink-400', section: 'usage' }
].map(({ title, value, icon: Icon, gradient, section }) => (
<div
key={title}
onClick={() => section && handleCardClick(section)}
className={`p-6 rounded-xl backdrop-blur-xl border
border-white/10
hover:scale-105 transition-all duration-300 cursor-pointer
${cardTheme} hover:shadow-xl hover:shadow-purple-500/20
active:scale-95 group`}
style={{
background: `linear-gradient(rgba(255,255,255,0.1),
rgba(255,255,255,0.05))`
}}
>
<div className="flex items-center justify-between">
<h3 className="text-lg group-hover:text-blue-400 transition-
colors">{title}</h3>
<Icon size={24} className="animate-float group-hover:text-blue-
400 transition-colors" />
</div>
<p className="text-3xl font-bold mt-2">{value}</p>
<div className={`h-1 w-full mt-4 rounded-full bg-gradient-to-r $
{gradient}
relative overflow-hidden group-hover:animate-pulse`}>
<div className="absolute inset-0 bg-white/30" />
</div>
</div>
 ))}
</div>

<div className={`${cardTheme} rounded-xl p-4 backdrop-blur-xl

border border-white/10 transition-all duration-300`}>
<div className="space-y-1 text-sm font-mono">
{[
{ type: 'SUCCESS', msg: 'System initialized', color: 'text-green-
400' },
{ type: 'INFO', msg: 'Version 2.0', color: 'text-blue-400' },
{ type: 'INFO', msg: 'Ready for connections', color: 'text-blue-
400' }
].map((log, i) => (
<p key={i} className={`${log.color} animate-slideIn`}
style={{animationDelay: `${i * 100}ms`}}>
{`[${new Date().toLocaleTimeString()}] ${log.type}: $
{log.msg}`}
</p>
))}
</div>
</div>
</>
);
}
};

return (
<div className={`flex h-screen ${baseTheme} transition-colors duration-500`}>
<div className="fixed inset-0 overflow-hidden pointer-events-none">
<div className={`absolute top-0 left-0 w-[500px] h-[500px] rounded-full
${isDark ? 'bg-purple-500' : 'bg-blue-500'} opacity-10 blur-[100px]
animate-[move_15s_infinite]`} />
<div className={`absolute bottom-0 right-0 w-[500px] h-[500px] rounded-full
${isDark ? 'bg-blue-500' : 'bg-purple-500'} opacity-10 blur-[100px]
animate-[move_20s_infinite]`} />
</div>

<div className={`w-64 ${sidebarTheme} p-4 flex flex-col backdrop-blur-xl

border-r border-white/10 z-10 transition-all duration-500`}>
<div className="mb-8">
<button
onClick={() => setIsDark(!isDark)}
className="group h-12 w-12 rounded-lg flex items-center justify-center
bg-gradient-to-r from-purple-500 to-blue-500 hover:scale-110
transition-all duration-300 cursor-pointer"
>
{isDark ?
<Sun className="h-6 w-6 text-white group-hover:rotate-180 transition-
transform duration-500" /> :
<Moon className="h-6 w-6 text-white group-hover:rotate-180
transition-transform duration-500" />
}
</button>
</div>

<nav className="flex-1 space-y-2">

{[
{ icon: Home, label: 'Dashboard', id: 'dashboard' },
{ icon: Users, label: 'Clients', id: 'clients' },
 { icon: Server, label: 'Server', id: 'server' },
{ icon: Box, label: 'Modules', id: 'modules' },
{ icon: Settings, label: 'Settings', id: 'settings' }
].map(({ icon: Icon, label, id }) => (
<button
key={id}
onClick={() => setActiveTab(id)}
onMouseEnter={() => setIsHovered(id)}
onMouseLeave={() => setIsHovered('')}
className={`flex items-center space-x-3 w-full p-3 rounded-lg
transition-all duration-300 relative overflow-hidden group
${activeTab === id ?
'bg-gradient-to-r from-blue-500 to-purple-500 shadow-lg shadow-
blue-500/20' :
'hover:bg-white/10'}`}
>
<Icon size={20} className={`transition-transform duration-300
${isHovered === id ? 'scale-110 rotate-12' : ''}`} />
<span className="relative z-10">{label}</span>
{isHovered === id && !activeTab === id && (
<div className="absolute inset-0 bg-white/10 animate-pulse" />
)}
</button>
))}
</nav>

<button className="flex items-center space-x-3 p-3 text-slate-400

hover:text-white transition-colors duration-300 group">
<Bug size={20} className="group-hover:rotate-12 transition-transform
duration-300" />
<span>Report Bug</span>
</button>
</div>

<div className="flex-1 p-6 z-10 main-content transition-opacity duration-

300">
{renderContent()}
</div>

<style jsx global>{`

@keyframes move {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(100px, 100px) rotate(90deg); }
50% { transform: translate(0, 200px) rotate(180deg); }
75% { transform: translate(-100px, 100px) rotate(270deg); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes slideIn {
from { transform: translateX(-10px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-slideIn {
animation: slideIn 0.5s ease-out forwards;
 }
.flash-transition {
animation: flash 0.5s ease-out;
}
@keyframes flash {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
`}</style>
</div>
);
};

export default Dashboard;