"use client"

import { useState, useCallback } from "react"
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  Table,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell,
} from "@/components/ui/table"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip"
import { Progress } from "@/components/ui/progress"
import {
  KeyRound,
  Users,
  Search,
  ChevronLeft,
  ChevronRight,
} from "lucide-react"
import { Input } from "@/components/ui/input"

interface UserRow {
  id: string
  email: string
  status: "active" | "suspended" | "pending"
  tier: "free" | "pro"
  usage: number
  maxUsage: number
  apiKeys: number
  lastActive: string
}

const initialUsers: UserRow[] = [
  {
    id: "1",
    email: "sarah.chen@acme.com",
    status: "active",
    tier: "pro",
    usage: 423,
    maxUsage: 500,
    apiKeys: 3,
    lastActive: "2 min ago",
  },
  {
    id: "2",
    email: "m.rodriguez@startup.io",
    status: "active",
    tier: "pro",
    usage: 189,
    maxUsage: 500,
    apiKeys: 1,
    lastActive: "1 hour ago",
  },
  {
    id: "3",
    email: "j.mueller@berlin-corp.de",
    status: "active",
    tier: "free",
    usage: 18,
    maxUsage: 50,
    apiKeys: 1,
    lastActive: "3 hours ago",
  },
  {
    id: "4",
    email: "alex.kim@design.co",
    status: "pending",
    tier: "free",
    usage: 0,
    maxUsage: 50,
    apiKeys: 0,
    lastActive: "Never",
  },
  {
    id: "5",
    email: "nina.patel@healthco.org",
    status: "active",
    tier: "pro",
    usage: 501,
    maxUsage: 500,
    apiKeys: 2,
    lastActive: "18 min ago",
  },
  {
    id: "6",
    email: "tom.wright@legal.uk",
    status: "suspended",
    tier: "free",
    usage: 47,
    maxUsage: 50,
    apiKeys: 0,
    lastActive: "14 days ago",
  },
  {
    id: "7",
    email: "l.tanaka@jp-trade.co.jp",
    status: "active",
    tier: "pro",
    usage: 312,
    maxUsage: 500,
    apiKeys: 2,
    lastActive: "45 min ago",
  },
  {
    id: "8",
    email: "c.dubois@paris-finance.fr",
    status: "active",
    tier: "free",
    usage: 34,
    maxUsage: 50,
    apiKeys: 1,
    lastActive: "6 hours ago",
  },
]

const statusConfig = {
  active: {
    label: "Active",
    dotClass: "bg-[oklch(0.59_0.16_145)]",
    textClass: "text-[oklch(0.45_0.12_145)]",
  },
  suspended: {
    label: "Suspended",
    dotClass: "bg-destructive",
    textClass: "text-destructive",
  },
  pending: {
    label: "Pending",
    dotClass: "bg-[oklch(0.75_0.18_55)]",
    textClass: "text-[oklch(0.55_0.16_55)]",
  },
}

export function UserManagementTable() {
  const [users, setUsers] = useState<UserRow[]>(initialUsers)
  const [searchQuery, setSearchQuery] = useState("")
  const [revokedUsers, setRevokedUsers] = useState<Set<string>>(new Set())

  const updateTier = useCallback((userId: string, newTier: "free" | "pro") => {
    setUsers((prev) =>
      prev.map((u) =>
        u.id === userId
          ? {
              ...u,
              tier: newTier,
              maxUsage: newTier === "pro" ? 500 : 50,
            }
          : u
      )
    )
  }, [])

  const revokeKeys = useCallback((userId: string) => {
    setUsers((prev) =>
      prev.map((u) => (u.id === userId ? { ...u, apiKeys: 0 } : u))
    )
    setRevokedUsers((prev) => {
      const next = new Set(prev)
      next.add(userId)
      return next
    })
    setTimeout(() => {
      setRevokedUsers((prev) => {
        const next = new Set(prev)
        next.delete(userId)
        return next
      })
    }, 2000)
  }, [])

  const filtered = users.filter((u) =>
    u.email.toLowerCase().includes(searchQuery.toLowerCase())
  )

  const proCount = users.filter((u) => u.tier === "pro").length
  const activeCount = users.filter((u) => u.status === "active").length

  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-4">
          <div className="flex items-center gap-2">
            <div className="flex size-8 items-center justify-center rounded-lg bg-secondary">
              <Users className="size-4 text-foreground" />
            </div>
            <div>
              <CardTitle className="text-sm">User Management</CardTitle>
              <CardDescription className="text-xs">
                {users.length} total users
                <span className="mx-1.5 text-border">|</span>
                {activeCount} active
                <span className="mx-1.5 text-border">|</span>
                {proCount} pro
              </CardDescription>
            </div>
          </div>
          <div className="relative w-56">
            <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="Filter by email..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="h-8 pl-8 text-xs"
            />
          </div>
        </div>
      </CardHeader>

      <CardContent className="px-0 pb-0">
        <div className="border-t border-border">
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead className="h-8 pl-6 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                  User Email
                </TableHead>
                <TableHead className="h-8 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                  Status
                </TableHead>
                <TableHead className="h-8 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                  Tier
                </TableHead>
                <TableHead className="h-8 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                  Usage
                </TableHead>
                <TableHead className="h-8 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                  Keys
                </TableHead>
                <TableHead className="h-8 pr-6 text-right text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                  Actions
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filtered.map((user) => {
                const sConfig = statusConfig[user.status]
                const usagePercent = Math.min(
                  (user.usage / user.maxUsage) * 100,
                  100
                )
                const isOverQuota = user.usage > user.maxUsage
                const justRevoked = revokedUsers.has(user.id)

                return (
                  <TableRow key={user.id} className="group">
                    <TableCell className="pl-6 py-2">
                      <div className="flex flex-col">
                        <span className="text-xs font-medium text-foreground">
                          {user.email}
                        </span>
                        <span className="text-[10px] text-muted-foreground">
                          Last active: {user.lastActive}
                        </span>
                      </div>
                    </TableCell>

                    <TableCell className="py-2">
                      <div className="flex items-center gap-1.5">
                        <span
                          className={`size-1.5 rounded-full ${sConfig.dotClass}`}
                        />
                        <span className={`text-xs font-medium ${sConfig.textClass}`}>
                          {sConfig.label}
                        </span>
                      </div>
                    </TableCell>

                    <TableCell className="py-2">
                      <Select
                        value={user.tier}
                        onValueChange={(val: "free" | "pro") =>
                          updateTier(user.id, val)
                        }
                      >
                        <SelectTrigger
                          size="sm"
                          className={`h-6 w-[72px] text-[10px] font-semibold uppercase tracking-wider ${
                            user.tier === "pro"
                              ? "border-accent/30 bg-accent/10 text-accent"
                              : "border-border text-muted-foreground"
                          }`}
                        >
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="free" className="text-xs">
                            Free
                          </SelectItem>
                          <SelectItem value="pro" className="text-xs">
                            Pro
                          </SelectItem>
                        </SelectContent>
                      </Select>
                    </TableCell>

                    <TableCell className="py-2">
                      <div className="flex w-32 flex-col gap-1">
                        <div className="flex items-center justify-between">
                          <span
                            className={`text-[10px] font-medium tabular-nums ${
                              isOverQuota
                                ? "text-destructive"
                                : "text-muted-foreground"
                            }`}
                          >
                            {user.usage} / {user.maxUsage}
                          </span>
                          {isOverQuota && (
                            <Badge
                              variant="outline"
                              className="h-4 border-destructive/30 bg-destructive/5 px-1 text-[9px] text-destructive"
                            >
                              Over
                            </Badge>
                          )}
                        </div>
                        <Progress
                          value={usagePercent}
                          className={`h-1 bg-muted ${
                            isOverQuota
                              ? "[&>[data-slot=progress-indicator]]:bg-destructive"
                              : usagePercent > 80
                                ? "[&>[data-slot=progress-indicator]]:bg-[oklch(0.75_0.18_55)]"
                                : "[&>[data-slot=progress-indicator]]:bg-accent"
                          }`}
                        />
                      </div>
                    </TableCell>

                    <TableCell className="py-2">
                      <span className="text-xs tabular-nums text-muted-foreground">
                        {user.apiKeys}
                      </span>
                    </TableCell>

                    <TableCell className="pr-6 py-2 text-right">
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Button
                            variant="outline"
                            size="sm"
                            className={`h-6 gap-1 px-2 text-[10px] ${
                              justRevoked
                                ? "border-[oklch(0.59_0.16_145/0.3)] text-[oklch(0.45_0.12_145)]"
                                : "border-destructive/30 text-destructive hover:bg-destructive/10 hover:text-destructive"
                            }`}
                            onClick={() => revokeKeys(user.id)}
                            disabled={user.apiKeys === 0 || justRevoked}
                          >
                            <KeyRound className="size-2.5" />
                            {justRevoked ? "Revoked" : "Revoke Keys"}
                          </Button>
                        </TooltipTrigger>
                        <TooltipContent className="text-xs">
                          {user.apiKeys === 0
                            ? "No active keys"
                            : `Revoke ${user.apiKeys} active key${user.apiKeys > 1 ? "s" : ""}`}
                        </TooltipContent>
                      </Tooltip>
                    </TableCell>
                  </TableRow>
                )
              })}

              {filtered.length === 0 && (
                <TableRow>
                  <TableCell
                    colSpan={6}
                    className="py-8 text-center text-xs text-muted-foreground"
                  >
                    No users match your filter.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>

        {/* Pagination footer */}
        <div className="flex items-center justify-between border-t border-border px-6 py-2">
          <span className="text-[10px] text-muted-foreground">
            Showing {filtered.length} of {users.length} users
          </span>
          <div className="flex items-center gap-1">
            <Button
              variant="ghost"
              size="icon-sm"
              className="size-6"
              disabled
              aria-label="Previous page"
            >
              <ChevronLeft className="size-3" />
            </Button>
            <span className="px-2 text-[10px] font-medium text-foreground">1 / 1</span>
            <Button
              variant="ghost"
              size="icon-sm"
              className="size-6"
              disabled
              aria-label="Next page"
            >
              <ChevronRight className="size-3" />
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}