"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"
import {
  Users,
  Settings,
  Search,
  MoreVertical,
  Plus,
  ChevronDown,
  Shield,
  LayoutDashboard,
  FileText,
  Bell,
  LogOut,
} from "lucide-react"

export function AdminPanelExample() {
  const { selectedMaterial, getThemeAwareClass } = useMaterial()
  const materialClass = selectedMaterial ? getThemeAwareClass(selectedMaterial) : ""

  const users = [
    {
      name: "Alex Johnson",
      email: "alex@example.com",
      role: "Admin",
      status: "Active",
      avatar: "/diverse-avatars.png",
    },
    {
      name: "Sarah Williams",
      email: "sarah@example.com",
      role: "Editor",
      status: "Active",
      avatar: "/diverse-person-portrait.png",
    },
    {
      name: "Michael Brown",
      email: "michael@example.com",
      role: "Viewer",
      status: "Inactive",
      avatar: "/diverse-group-conversation.png",
    },
    {
      name: "Emily Davis",
      email: "emily@example.com",
      role: "Editor",
      status: "Active",
      avatar: "/diverse-group-meeting.png",
    },
  ]

  return (
    <div className="w-full h-full bg-background-secondary overflow-auto flex flex-col">
      {/* Header */}
      <div className={cn("flex justify-between items-center p-4 border-b", materialClass)}>
        <div className="flex items-center gap-2">
          <Shield className="h-5 w-5 text-primary" />
          <h1 className="text-lg font-semibold">Admin Dashboard</h1>
        </div>
        <div className="flex items-center gap-3">
          <Button variant="ghost" size="icon">
            <Bell className="h-5 w-5" />
          </Button>
          <Avatar className="h-8 w-8">
            <AvatarImage src="/diverse-avatars.png" />
            <AvatarFallback>AD</AvatarFallback>
          </Avatar>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon">
                <ChevronDown className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>Profile</DropdownMenuItem>
              <DropdownMenuItem>Settings</DropdownMenuItem>
              <DropdownMenuItem>
                <LogOut className="h-4 w-4 mr-2" />
                Logout
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      <div className="flex h-[calc(100%-64px)]">
        {/* Sidebar */}
        <div className={cn("w-16 md:w-56 border-r flex flex-col items-center md:items-start p-4", materialClass)}>
          <div className="space-y-1 w-full">
            <Button variant="ghost" className="w-full justify-start" size="lg">
              <LayoutDashboard className="h-5 w-5 md:mr-2" />
              <span className="hidden md:inline">Dashboard</span>
            </Button>
            <Button variant="ghost" className="w-full justify-start bg-accent" size="lg">
              <Users className="h-5 w-5 md:mr-2" />
              <span className="hidden md:inline">Users</span>
            </Button>
            <Button variant="ghost" className="w-full justify-start" size="lg">
              <FileText className="h-5 w-5 md:mr-2" />
              <span className="hidden md:inline">Reports</span>
            </Button>
            <Button variant="ghost" className="w-full justify-start" size="lg">
              <Settings className="h-5 w-5 md:mr-2" />
              <span className="hidden md:inline">Settings</span>
            </Button>
          </div>
        </div>

        {/* Main Content */}
        <div className="flex-1 p-8 overflow-auto">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-xl font-semibold">User Management</h2>
            <div className="flex items-center gap-3">
              <div className="relative hidden md:flex items-center">
                <Search className="h-4 w-4 absolute left-2.5 text-muted-foreground" />
                <Input placeholder="Search users..." className="pl-8 w-[200px]" />
              </div>
              <Button>
                <Plus className="h-4 w-4 mr-2" />
                Add User
              </Button>
            </div>
          </div>

          <Card className={cn(materialClass)}>
            <CardHeader className="pb-2">
              <CardTitle>All Users</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <table className="w-full">
                  <thead>
                    <tr className="border-b bg-muted/50">
                      <th className="text-left p-3 text-xs font-medium text-muted-foreground">User</th>
                      <th className="text-left p-3 text-xs font-medium text-muted-foreground hidden md:table-cell">
                        Email
                      </th>
                      <th className="text-left p-3 text-xs font-medium text-muted-foreground">Role</th>
                      <th className="text-left p-3 text-xs font-medium text-muted-foreground">Status</th>
                      <th className="text-right p-3 text-xs font-medium text-muted-foreground">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {users.map((user, i) => (
                      <tr key={i} className={i !== users.length - 1 ? "border-b" : ""}>
                        <td className="p-3">
                          <div className="flex items-center gap-3">
                            <Avatar className="h-8 w-8">
                              <AvatarImage src={user.avatar || "/placeholder.svg"} />
                              <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
                            </Avatar>
                            <span className="font-medium">{user.name}</span>
                          </div>
                        </td>
                        <td className="p-3 hidden md:table-cell text-muted-foreground">{user.email}</td>
                        <td className="p-3">
                          <Badge variant={user.role === "Admin" ? "default" : "secondary"}>{user.role}</Badge>
                        </td>
                        <td className="p-3">
                          <div className="flex items-center">
                            <div
                              className={`h-2 w-2 rounded-full mr-2 ${user.status === "Active" ? "bg-green-500" : "bg-gray-300"}`}
                            ></div>
                            <span className={user.status === "Active" ? "text-green-500" : "text-muted-foreground"}>
                              {user.status}
                            </span>
                          </div>
                        </td>
                        <td className="p-3 text-right">
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <MoreVertical className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem>Edit</DropdownMenuItem>
                              <DropdownMenuItem>View Details</DropdownMenuItem>
                              <DropdownMenuItem className="text-red-500">Delete</DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
            <Card className={cn(materialClass)}>
              <CardHeader>
                <CardTitle>Recent Activity</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {[
                    { user: "Alex Johnson", action: "created a new user", time: "2 min ago" },
                    { user: "Sarah Williams", action: "updated report settings", time: "1 hour ago" },
                    { user: "You", action: "logged in", time: "3 hours ago" },
                  ].map((item, i) => (
                    <div key={i} className="flex items-center gap-3">
                      <div className="w-1 h-8 bg-primary rounded-full"></div>
                      <div className="flex-1 space-y-1">
                        <p className="text-sm">
                          <span className="font-medium">{item.user}</span> {item.action}
                        </p>
                        <p className="text-xs text-muted-foreground">{item.time}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card className={cn(materialClass)}>
              <CardHeader>
                <CardTitle>System Status</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm">Server Uptime</span>
                      <span className="text-sm font-medium">99.9%</span>
                    </div>
                    <div className="h-2 bg-muted rounded-full overflow-hidden">
                      <div className="h-full bg-green-500 w-[99.9%]"></div>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm">Database Load</span>
                      <span className="text-sm font-medium">42%</span>
                    </div>
                    <div className="h-2 bg-muted rounded-full overflow-hidden">
                      <div className="h-full bg-primary w-[42%]"></div>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm">Memory Usage</span>
                      <span className="text-sm font-medium">68%</span>
                    </div>
                    <div className="h-2 bg-muted rounded-full overflow-hidden">
                      <div className="h-full bg-yellow-500 w-[68%]"></div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}