"use client";

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { PageHeader } from "@/components/shared/page-header";
import { DataTable, Column } from "@/components/shared/data-table";
import { ConfirmDialog } from "@/components/shared/confirm-dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Avatar } from "@/components/ui/avatar";
import { NativeSelect } from "@/components/ui/native-select";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { usersApi, User } from "@/lib/api-client";
import { formatDate } from "@/lib/utils";
import { MoreHorizontal, UserPlus, Filter, Eye, Ban, Trash2 } from "lucide-react";
import Link from "next/link";

const statusColors: Record<string, "default" | "success" | "warning" | "destructive" | "secondary"> = {
  active: "success",
  pending: "warning",
  suspended: "destructive",
  deactivated: "secondary",
};

const roleLabels: Record<string, string> = {
  admin: "Admin",
  manager: "Manager",
  employee: "Employee",
};

export default function UsersPage() {
  const queryClient = useQueryClient();
  const [page, setPage] = useState(1);
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [searchQuery, setSearchQuery] = useState("");
  const [deleteDialog, setDeleteDialog] = useState<{ open: boolean; user: User | null }>({
    open: false,
    user: null,
  });
  const [suspendDialog, setSuspendDialog] = useState<{ open: boolean; user: User | null }>({
    open: false,
    user: null,
  });

  const { data, isLoading, refetch } = useQuery({
    queryKey: ["users", page, statusFilter, searchQuery],
    queryFn: async () => {
      if (searchQuery) {
        const response = await usersApi.search(searchQuery, { page, limit: 10 });
        return response.data;
      }
      const response = await usersApi.getAll({ page, limit: 10 });
      let users = response.data.data;
      if (statusFilter !== "all") {
        users = users.filter((u) => u.status === statusFilter);
      }
      return { ...response.data, data: users };
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (id: string) => usersApi.delete(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["users"] });
      setDeleteDialog({ open: false, user: null });
    },
  });

  const suspendMutation = useMutation({
    mutationFn: (id: string) => usersApi.suspend(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["users"] });
      setSuspendDialog({ open: false, user: null });
    },
  });

  const columns: Column<User>[] = [
    {
      key: "user",
      header: "User",
      cell: (user) => (
        <div className="flex items-center gap-3">
          <Avatar src={user.avatarUrl} fallback={`${user.firstName} ${user.lastName}`} size="sm" />
          <div>
            <p className="font-medium">
              {user.firstName} {user.lastName}
            </p>
            <p className="text-xs text-muted-foreground">{user.email || user.phone}</p>
          </div>
        </div>
      ),
    },
    {
      key: "role",
      header: "Role",
      cell: (user) => (
        <Badge variant="outline">{roleLabels[user.role] || user.role}</Badge>
      ),
    },
    {
      key: "status",
      header: "Status",
      cell: (user) => (
        <Badge variant={statusColors[user.status] || "default"}>
          {user.status.charAt(0).toUpperCase() + user.status.slice(1)}
        </Badge>
      ),
    },
    {
      key: "createdAt",
      header: "Joined",
      cell: (user) => (
        <span className="text-muted-foreground">{formatDate(user.createdAt)}</span>
      ),
    },
    {
      key: "actions",
      header: "",
      className: "w-12",
      cell: (user) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon">
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <Link href={`/users/${user.id}`}>
              <DropdownMenuItem>
                <Eye className="mr-2 h-4 w-4" />
                View Details
              </DropdownMenuItem>
            </Link>
            <DropdownMenuSeparator />
            {user.status !== "suspended" && (
              <DropdownMenuItem onClick={() => setSuspendDialog({ open: true, user })}>
                <Ban className="mr-2 h-4 w-4" />
                Suspend User
              </DropdownMenuItem>
            )}
            <DropdownMenuItem
              destructive
              onClick={() => setDeleteDialog({ open: true, user })}
            >
              <Trash2 className="mr-2 h-4 w-4" />
              Delete User
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  return (
    <div className="space-y-6">
      <PageHeader
        title="Users"
        description="Manage your platform users"
      >
        <Link href="/users/pending">
          <Button>
            <UserPlus className="mr-2 h-4 w-4" />
            Pending Approvals
          </Button>
        </Link>
      </PageHeader>

      {/* Filters */}
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2">
          <Filter className="h-4 w-4 text-muted-foreground" />
          <NativeSelect
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            options={[
              { value: "all", label: "All Status" },
              { value: "active", label: "Active" },
              { value: "pending", label: "Pending" },
              { value: "suspended", label: "Suspended" },
            ]}
            className="w-40"
          />
        </div>
      </div>

      <DataTable
        data={data?.data || []}
        columns={columns}
        isLoading={isLoading}
        searchPlaceholder="Search users..."
        onSearch={setSearchQuery}
        pagination={
          data
            ? {
                page,
                totalPages: data.totalPages,
                onPageChange: setPage,
              }
            : undefined
        }
        emptyMessage="No users found"
      />

      {/* Delete Dialog */}
      <ConfirmDialog
        open={deleteDialog.open}
        onOpenChange={(open) => setDeleteDialog({ open, user: null })}
        title="Delete User"
        description={`Are you sure you want to delete ${deleteDialog.user?.firstName} ${deleteDialog.user?.lastName}? This action cannot be undone.`}
        confirmText="Delete"
        variant="destructive"
        isLoading={deleteMutation.isPending}
        onConfirm={() => deleteDialog.user && deleteMutation.mutate(deleteDialog.user.id)}
      />

      {/* Suspend Dialog */}
      <ConfirmDialog
        open={suspendDialog.open}
        onOpenChange={(open) => setSuspendDialog({ open, user: null })}
        title="Suspend User"
        description={`Are you sure you want to suspend ${suspendDialog.user?.firstName} ${suspendDialog.user?.lastName}? They will no longer be able to access the platform.`}
        confirmText="Suspend"
        variant="destructive"
        isLoading={suspendMutation.isPending}
        onConfirm={() => suspendDialog.user && suspendMutation.mutate(suspendDialog.user.id)}
      />
    </div>
  );
}