"use client"

import { useState } from "react"
import { ChevronDown, ChevronUp, MoreHorizontal, ArrowUpDown, Search, Download, Trash2, Edit, Eye } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

interface User {
  id: string
  name: string
  email: string
  status: "active" | "inactive" | "pending"
  role: string
  lastActive: string
}

const users: User[] = [
  {
    id: "1",
    name: "Alex Johnson",
    email: "alex@example.com",
    status: "active",
    role: "Admin",
    lastActive: "Just now",
  },
  {
    id: "2",
    name: "Sarah Williams",
    email: "sarah@example.com",
    status: "active",
    role: "Editor",
    lastActive: "2 hours ago",
  },
  {
    id: "3",
    name: "Michael Brown",
    email: "michael@example.com",
    status: "inactive",
    role: "Viewer",
    lastActive: "3 days ago",
  },
  {
    id: "4",
    name: "Emily Davis",
    email: "emily@example.com",
    status: "pending",
    role: "Editor",
    lastActive: "5 mins ago",
  },
  {
    id: "5",
    name: "David Wilson",
    email: "david@example.com",
    status: "active",
    role: "Admin",
    lastActive: "1 hour ago",
  },
]

export function DataTableBlock() {
  const [sortField, setSortField] = useState<keyof User | null>(null)
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc")
  const [searchTerm, setSearchTerm] = useState("")

  const handleSort = (field: keyof User) => {
    if (sortField === field) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc")
    } else {
      setSortField(field)
      setSortDirection("asc")
    }
  }

  const filteredUsers = users.filter(
    (user) =>
      user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.role.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  const sortedUsers = [...filteredUsers].sort((a, b) => {
    if (!sortField) return 0

    const aValue = a[sortField]
    const bValue = b[sortField]

    if (aValue < bValue) return sortDirection === "asc" ? -1 : 1
    if (aValue > bValue) return sortDirection === "asc" ? 1 : -1
    return 0
  })

  return (
    <Card className="shadow-sm">
      <CardHeader className="p-6">
        <div className="flex flex-col space-y-1.5 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
          <div>
            <CardTitle>Users</CardTitle>
            <CardDescription>Manage your team members and their access.</CardDescription>
          </div>
          <Button size="sm" className="mt-4 sm:mt-0">
            Add User
          </Button>
        </div>
      </CardHeader>
      <CardContent className="p-6 pt-0">
        <div className="mb-6 flex flex-col sm:flex-row items-start sm:items-center gap-4">
          <div className="relative flex-1 w-full">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              type="search"
              placeholder="Search users..."
              className="pl-9 w-full"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <Button variant="outline" size="icon" className="flex-shrink-0">
            <Download className="h-4 w-4" />
          </Button>
        </div>
        <div className="rounded-md border">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b bg-muted/50">
                  <th className="px-4 py-3.5 text-left text-sm font-medium text-muted-foreground">
                    <div className="flex cursor-pointer items-center gap-1" onClick={() => handleSort("name")}>
                      Name
                      {sortField === "name" ? (
                        sortDirection === "asc" ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )
                      ) : (
                        <ArrowUpDown className="h-4 w-4" />
                      )}
                    </div>
                  </th>
                  <th className="px-4 py-3.5 text-left text-sm font-medium text-muted-foreground">
                    <div className="flex cursor-pointer items-center gap-1" onClick={() => handleSort("email")}>
                      Email
                      {sortField === "email" ? (
                        sortDirection === "asc" ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )
                      ) : (
                        <ArrowUpDown className="h-4 w-4" />
                      )}
                    </div>
                  </th>
                  <th className="px-4 py-3.5 text-left text-sm font-medium text-muted-foreground">
                    <div className="flex cursor-pointer items-center gap-1" onClick={() => handleSort("status")}>
                      Status
                      {sortField === "status" ? (
                        sortDirection === "asc" ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )
                      ) : (
                        <ArrowUpDown className="h-4 w-4" />
                      )}
                    </div>
                  </th>
                  <th className="px-4 py-3.5 text-left text-sm font-medium text-muted-foreground">
                    <div className="flex cursor-pointer items-center gap-1" onClick={() => handleSort("role")}>
                      Role
                      {sortField === "role" ? (
                        sortDirection === "asc" ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )
                      ) : (
                        <ArrowUpDown className="h-4 w-4" />
                      )}
                    </div>
                  </th>
                  <th className="px-4 py-3.5 text-left text-sm font-medium text-muted-foreground">
                    <div className="flex cursor-pointer items-center gap-1" onClick={() => handleSort("lastActive")}>
                      Last Active
                      {sortField === "lastActive" ? (
                        sortDirection === "asc" ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )
                      ) : (
                        <ArrowUpDown className="h-4 w-4" />
                      )}
                    </div>
                  </th>
                  <th className="px-4 py-3.5 text-right text-sm font-medium text-muted-foreground">Actions</th>
                </tr>
              </thead>
              <tbody>
                {sortedUsers.map((user) => (
                  <tr key={user.id} className="border-b">
                    <td className="px-4 py-4 text-sm font-medium">{user.name}</td>
                    <td className="px-4 py-4 text-sm text-muted-foreground">{user.email}</td>
                    <td className="px-4 py-4 text-sm">
                      <Badge
                        variant={
                          user.status === "active" ? "default" : user.status === "pending" ? "secondary" : "outline"
                        }
                      >
                        {user.status.charAt(0).toUpperCase() + user.status.slice(1)}
                      </Badge>
                    </td>
                    <td className="px-4 py-4 text-sm">{user.role}</td>
                    <td className="px-4 py-4 text-sm text-muted-foreground">{user.lastActive}</td>
                    <td className="px-4 py-4 text-right">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon">
                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem>
                            <Eye className="mr-2 h-4 w-4" />
                            View
                          </DropdownMenuItem>
                          <DropdownMenuItem>
                            <Edit className="mr-2 h-4 w-4" />
                            Edit
                          </DropdownMenuItem>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem className="text-destructive">
                            <Trash2 className="mr-2 h-4 w-4" />
                            Delete
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t p-6">
        <div className="text-sm text-muted-foreground">Showing 5 of 100 users</div>
        <div className="flex items-center space-x-2">
          <Button variant="outline" size="sm" disabled>
            Previous
          </Button>
          <Button variant="outline" size="sm">
            Next
          </Button>
        </div>
      </CardFooter>
    </Card>
  )
}