import { useState } from "react";
import { BarChart, Activity, Users, DollarSign, Package, Bell, Menu, Search, Settings } from "lucide-react";

export default function Dashboard() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-purple-800 to-purple-950 text-white">
      {/* Sidebar */}
      <div className={`fixed top-0 left-0 h-full bg-purple-950/50 backdrop-blur-lg border-r border-purple-800/30 transition-all duration-300 ${isSidebarOpen ? 'w-64' : 'w-20'}`}>
        <div className="p-4">
          <div className="flex items-center justify-between">
            {isSidebarOpen && <h1 className="text-xl font-bold bg-gradient-to-r from-purple-400 to-purple-200 bg-clip-text text-transparent">Dashboard</h1>}
            <button onClick={() => setIsSidebarOpen(!isSidebarOpen)} className="p-2 hover:bg-purple-800/50 rounded-lg">
              <Menu size={20} />
            </button>
          </div>
        </div>
        <nav className="mt-8 px-2">
          {['Analytics', 'Users', 'Products', 'Finance'].map((item, index) => (
            <button key={item} className="w-full flex items-center gap-3 p-3 hover:bg-purple-800/50 rounded-lg mb-2">
              {[BarChart, Users, Package, DollarSign][index]} 
              {isSidebarOpen && <span>{item}</span>}
            </button>
          ))}
        </nav>
      </div>

      {/* Main Content */}
      <div className={`transition-all duration-300 ${isSidebarOpen ? 'ml-64' : 'ml-20'}`}>
        {/* Header */}
        <header className="p-4 border-b border-purple-800/30 backdrop-blur-lg bg-purple-950/30">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4 flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-400" size={20} />
                <input 
                  type="text" 
                  placeholder="Search..." 
                  className="pl-10 pr-4 py-2 bg-purple-900/50 border border-purple-700/50 rounded-lg focus:outline-none focus:border-purple-500 w-64"
                />
              </div>
            </div>
            <div className="flex items-center gap-4">
              <button className="p-2 hover:bg-purple-800/50 rounded-lg relative">
                <Bell size={20} />
                <span className="absolute top-1 right-1 w-2 h-2 bg-purple-400 rounded-full"></span>
              </button>
              <button className="p-2 hover:bg-purple-800/50 rounded-lg">
                <Settings size={20} />
              </button>
              <div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-400 to-purple-600"></div>
            </div>
          </div>
        </header>

        {/* Dashboard Content */}
        <main className="p-6">
          {/* Stats Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            {[
              { title: "Total Users", value: "2,543", icon: Users, change: "+12.5%" },
              { title: "Revenue", value: "$15,243", icon: DollarSign, change: "+8.2%" },
              { title: "Products", value: "1,243", icon: Package, change: "+3.1%" },
              { title: "Activity", value: "432", icon: Activity, change: "+5.4%" }
            ].map((stat) => (
              <div key={stat.title} className="p-6 rounded-xl bg-purple-900/30 border border-purple-700/30 backdrop-blur-sm">
                <div className="flex items-center justify-between mb-4">
                  <div className="p-2 bg-purple-800/50 rounded-lg">
                    <stat.icon size={24} />
                  </div>
                  <span className="text-green-400">{stat.change}</span>
                </div>
                <h3 className="text-purple-200 mb-1">{stat.title}</h3>
                <p className="text-2xl font-semibold">{stat.value}</p>
              </div>
            ))}
          </div>

          {/* Main Card */}
          <div className="rounded-xl bg-purple-900/30 border border-purple-700/30 backdrop-blur-sm p-6">
            <h2 className="text-xl font-semibold mb-6">Recent Activity</h2>
            <div className="space-y-4">
              {[1, 2, 3, 4].map((item) => (
                <div key={item} className="flex items-center gap-4 p-4 rounded-lg hover:bg-purple-800/20">
                  <div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-400 to-purple-600"></div>
                  <div>
                    <h4 className="font-medium">User Activity {item}</h4>
                    <p className="text-sm text-purple-300">Latest action performed by user</p>
                  </div>
                  <span className="ml-auto text-sm text-purple-400">2h ago</span>
                </div>
              ))}
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}