Admin Panel

"use client"

import { useState } from "react"
import { Label } from "@/components/ui/label"
import {
  Users,
  DollarSign,
  TrendingUp,
  Activity,
  Plus,
  Search,
  MoreHorizontal,
  ArrowUpRight,
  ArrowDownRight,
  Settings,
  Bell,
  Shield,
  Database,
  Folder,
} from "lucide-react"
import { GlassTabs, GlassTabsContent, GlassTabsList, GlassTabsTrigger } from "@/registry/liquid-glass/glass-tabs"
import { GlassCard, GlassCardContent, GlassCardDescription, GlassCardHeader, GlassCardTitle } from "@/registry/liquid-glass/glass-card"
import { GlassInput } from "@/registry/liquid-glass/glass-input"
import { GlassButton } from "@/registry/liquid-glass/glass-button"
import { GlassAvatar, GlassAvatarFallback } from "@/registry/liquid-glass/glass-avatar"
import { GlassBadge } from "@/registry/liquid-glass/glass-badge"
import { GlassDialog, GlassDialogContent, GlassDialogDescription, GlassDialogFooter, GlassDialogHeader, GlassDialogTitle, GlassDialogTrigger } from "@/registry/liquid-glass/glass-dialog"
import { GlassProgress } from "@/registry/liquid-glass/glass-progress"


const stats = [
  { title: "Total Users", value: "12,456", change: "+12.5%", trend: "up", icon: Users },
  { title: "Revenue", value: "$54,321", change: "+8.2%", trend: "up", icon: DollarSign },
  { title: "Growth", value: "23.1%", change: "+4.3%", trend: "up", icon: TrendingUp },
  { title: "Active Now", value: "573", change: "-2.1%", trend: "down", icon: Activity },
]

const users = [
  { name: "Alice Johnson", email: "alice@example.com", role: "Admin", status: "active" },
  { name: "Bob Smith", email: "bob@example.com", role: "User", status: "active" },
  { name: "Carol Williams", email: "carol@example.com", role: "User", status: "pending" },
  { name: "David Brown", email: "david@example.com", role: "Moderator", status: "active" },
]

export default function AdminBlockPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [notifications, setNotifications] = useState({ email: true, push: false, weekly: true })
  const filteredUsers = users.filter((user) =>
    `${user.name} ${user.email} ${user.role}`.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  return (
    <div className="w-full space-y-6">
      {/* Stats Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {stats.map((stat) => (
          <GlassCard key={stat.title}>
            <GlassCardContent className="pt-6">
              <div className="flex items-start justify-between">
                <div>
                  <p className="text-sm text-white/60 mb-1">{stat.title}</p>
                  <p className="text-2xl font-bold text-white">{stat.value}</p>
                  <div className="flex items-center gap-1 mt-1">
                    {stat.trend === "up" ? (
                      <ArrowUpRight className="h-3 w-3 text-green-400" />
                    ) : (
                      <ArrowDownRight className="h-3 w-3 text-red-400" />
                    )}
                    <span className={`text-xs ${stat.trend === "up" ? "text-green-400" : "text-red-400"}`}>
                      {stat.change}
                    </span>
                  </div>
                </div>
                <div className="p-2 rounded-xl bg-white/10">
                  <stat.icon className="h-5 w-5 text-white/60" />
                </div>
              </div>
            </GlassCardContent>
          </GlassCard>
        ))}
      </div>

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Users Table */}
        <div className="lg:col-span-2">
          <GlassCard>
            <GlassCardHeader>
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                  <GlassCardTitle>Users</GlassCardTitle>
                  <GlassCardDescription>Manage your team members</GlassCardDescription>
                </div>
                <div className="flex items-center gap-2">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-white/40" />
                    <GlassInput
                      className="pl-9 w-full sm:w-48"
                      placeholder="Search..."
                      aria-label="Search users"
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                    />
                  </div>
                  <GlassDialog>
                    <GlassDialogTrigger asChild>
                      <GlassButton variant="primary" size="sm">
                        <Plus className="h-4 w-4 mr-1" /> Add
                      </GlassButton>
                    </GlassDialogTrigger>
                    <GlassDialogContent>
                      <GlassDialogHeader>
                        <GlassDialogTitle>Add New User</GlassDialogTitle>
                        <GlassDialogDescription>Create a new user account.</GlassDialogDescription>
                      </GlassDialogHeader>
                      <div className="space-y-4 py-4">
                        <div className="flex flex-col gap-2">
                          <Label className="text-white/80">Name</Label>
                          <GlassInput placeholder="Full name" />
                        </div>
                        <div className="flex flex-col gap-2">
                          <Label className="text-white/80">Email</Label>
                          <GlassInput placeholder="email@example.com" />
                        </div>
                      </div>
                      <GlassDialogFooter>
                        <GlassButton variant="outline">Cancel</GlassButton>
                        <GlassButton variant="primary">Create User</GlassButton>
                      </GlassDialogFooter>
                    </GlassDialogContent>
                  </GlassDialog>
                </div>
              </div>
            </GlassCardHeader>
            <GlassCardContent>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-white/10">
                      <th className="text-left py-3 px-2 text-xs font-medium text-white/40 uppercase">User</th>
                      <th className="text-left py-3 px-2 text-xs font-medium text-white/40 uppercase hidden sm:table-cell">
                        Role
                      </th>
                      <th className="text-left py-3 px-2 text-xs font-medium text-white/40 uppercase">Status</th>
                      <th className="py-3 px-2"></th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredUsers.map((user) => (
                      <tr key={user.email} className="border-b border-white/5 hover:bg-white/5 transition-colors">
                        <td className="py-3 px-2">
                          <div className="flex items-center gap-3">
                            <GlassAvatar className="h-8 w-8">
                              <GlassAvatarFallback className="text-xs">
                                {user.name
                                  .split(" ")
                                  .map((n) => n[0])
                                  .join("")}
                              </GlassAvatarFallback>
                            </GlassAvatar>
                            <div className="min-w-0">
                              <p className="text-sm font-medium text-white truncate">{user.name}</p>
                              <p className="text-xs text-white/50 truncate">{user.email}</p>
                            </div>
                          </div>
                        </td>
                        <td className="py-3 px-2 hidden sm:table-cell">
                          <span className="text-sm text-white/70">{user.role}</span>
                        </td>
                        <td className="py-3 px-2">
                          <GlassBadge variant={user.status === "active" ? "success" : "warning"}>
                            {user.status}
                          </GlassBadge>
                        </td>
                        <td className="py-3 px-2">
                          <GlassButton variant="ghost" size="icon" className="h-8 w-8">
                            <MoreHorizontal className="h-4 w-4" aria-hidden="true" />
                            <span className="sr-only">Actions for {user.name}</span>
                          </GlassButton>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </GlassCardContent>
          </GlassCard>
        </div>

        {/* Sidebar Widgets */}
        <div className="space-y-6">
          {/* Storage */}
          <GlassCard>
            <GlassCardHeader>
              <GlassCardTitle className="flex items-center gap-2">
                <Database className="h-4 w-4" /> Storage
              </GlassCardTitle>
            </GlassCardHeader>
            <GlassCardContent>
              <GlassProgress value={68} className="mb-3" />
              <div className="flex justify-between text-sm">
                <span className="text-white/60">68.5 GB used</span>
                <span className="text-white/40">100 GB</span>
              </div>
              <div className="mt-4 space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <div className="flex items-center gap-2">
                    <Folder className="h-4 w-4 text-cyan-400" />
                    <span className="text-white/70">Documents</span>
                  </div>
                  <span className="text-white/50">24.5 GB</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <div className="flex items-center gap-2">
                    <Folder className="h-4 w-4 text-purple-400" />
                    <span className="text-white/70">Media</span>
                  </div>
                  <span className="text-white/50">32.1 GB</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <div className="flex items-center gap-2">
                    <Folder className="h-4 w-4 text-blue-400" />
                    <span className="text-white/70">Backups</span>
                  </div>
                  <span className="text-white/50">11.9 GB</span>
                </div>
              </div>
            </GlassCardContent>
          </GlassCard>

          {/* Activity */}
          <GlassCard>
            <GlassCardHeader>
              <GlassCardTitle>Recent Activity</GlassCardTitle>
            </GlassCardHeader>
            <GlassCardContent>
              <div className="space-y-4">
                {[
                  { action: "User signed up", time: "2 min ago" },
                  { action: "New order #1234", time: "15 min ago" },
                  { action: "Payment received", time: "1 hour ago" },
                  { action: "Server backup completed", time: "3 hours ago" },
                ].map((item, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <div className="h-2 w-2 rounded-full bg-cyan-400" />
                    <div className="flex-1 min-w-0">
                      <p className="text-sm text-white/80 truncate">{item.action}</p>
                      <p className="text-xs text-white/40">{item.time}</p>
                    </div>
                  </div>
                ))}
              </div>
            </GlassCardContent>
          </GlassCard>
        </div>
      </div>

      {/* Settings Tabs */}
      <GlassCard>
        <GlassCardHeader>
          <GlassCardTitle>Settings</GlassCardTitle>
          <GlassCardDescription>Manage your application preferences</GlassCardDescription>
        </GlassCardHeader>
        <GlassCardContent>
          <GlassTabs defaultValue="general">
            <GlassTabsList className="w-full flex-wrap">
              <GlassTabsTrigger value="general" className="flex-1">
                <Settings className="h-4 w-4 mr-2" /> General
              </GlassTabsTrigger>
              <GlassTabsTrigger value="notifications" className="flex-1">
                <Bell className="h-4 w-4 mr-2" /> Notifications
              </GlassTabsTrigger>
              <GlassTabsTrigger value="security" className="flex-1">
                <Shield className="h-4 w-4 mr-2" /> Security
              </GlassTabsTrigger>
            </GlassTabsList>
            <GlassTabsContent value="general">
              <div className="space-y-4">
                <div className="flex flex-col gap-2">
                  <Label className="text-white/80">Site Name</Label>
                  <GlassInput defaultValue="Ein Dashboard" />
                </div>
                <div className="flex flex-col gap-2">
                  <Label className="text-white/80">Support Email</Label>
                  <GlassInput defaultValue="support@ein.dev" />
                </div>
                <GlassButton variant="primary">Save Changes</GlassButton>
              </div>
            </GlassTabsContent>
            <GlassTabsContent value="notifications">
              <div className="space-y-3">
                  <button type="button" aria-pressed={notifications.email} onClick={() => setNotifications((current) => ({ ...current, email: !current.email }))} className="flex w-full items-center justify-between p-3 rounded-lg bg-white/5 text-left">
                  <span className="text-white/80 text-sm">Email notifications</span>
                    <div className={`w-10 h-6 rounded-full relative ${notifications.email ? "bg-cyan-500/50" : "bg-white/20"}`}>
                      <div className={`absolute top-0.5 w-5 h-5 rounded-full ${notifications.email ? "right-0.5 bg-white" : "left-0.5 bg-white/60"}`} />
                  </div>
                  </button>
                  <button type="button" aria-pressed={notifications.push} onClick={() => setNotifications((current) => ({ ...current, push: !current.push }))} className="flex w-full items-center justify-between p-3 rounded-lg bg-white/5 text-left">
                  <span className="text-white/80 text-sm">Push notifications</span>
                    <div className={`w-10 h-6 rounded-full relative ${notifications.push ? "bg-cyan-500/50" : "bg-white/20"}`}>
                      <div className={`absolute top-0.5 w-5 h-5 rounded-full ${notifications.push ? "right-0.5 bg-white" : "left-0.5 bg-white/60"}`} />
                  </div>
                  </button>
                  <button type="button" aria-pressed={notifications.weekly} onClick={() => setNotifications((current) => ({ ...current, weekly: !current.weekly }))} className="flex w-full items-center justify-between p-3 rounded-lg bg-white/5 text-left">
                  <span className="text-white/80 text-sm">Weekly digest</span>
                    <div className={`w-10 h-6 rounded-full relative ${notifications.weekly ? "bg-cyan-500/50" : "bg-white/20"}`}>
                      <div className={`absolute top-0.5 w-5 h-5 rounded-full ${notifications.weekly ? "right-0.5 bg-white" : "left-0.5 bg-white/60"}`} />
                    </div>
                  </button>
                </div>
            </GlassTabsContent>
            <GlassTabsContent value="security">
              <div className="space-y-4">
                <div className="flex flex-col gap-2">
                  <Label className="text-white/80">Current Password</Label>
                  <GlassInput type="password" placeholder="••••••••" />
                </div>
                <div className="flex flex-col gap-2">
                  <Label className="text-white/80">New Password</Label>
                  <GlassInput type="password" placeholder="••••••••" />
                </div>
                <GlassButton variant="primary">Update Password</GlassButton>
              </div>
            </GlassTabsContent>
          </GlassTabs>
        </GlassCardContent>
      </GlassCard>
    </div>
  )
}