import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Search, Eye, ChevronLeft, ChevronRight, Filter } from "lucide-react";
import { userService } from "@/services";
import { format } from "date-fns";
import { cn } from "@/lib/utils";

export default function UsersPage() {
  const navigate = useNavigate();
  const [page, setPage] = useState(1);
  const [limit] = useState(15);
  const [search, setSearch] = useState("");
  const [roleFilter, setRoleFilter] = useState<string>("all");

  const { data: usersData, isLoading } = useQuery({
    queryKey: ["admin", "users", page, limit, search, roleFilter],
    queryFn: async () => {
      const params: Record<string, string | number | boolean> = { page, limit };
      if (search) params.search = search;
      if (roleFilter !== "all") params.role = roleFilter;
      return await userService.getUsers(params);
    },
  });

  const getRoleBadgeColor = (role: string) => {
    switch (role) {
      case "ADMIN":
        return "text-rose-600 bg-rose-50 border-rose-100";
      case "USER":
        return "text-blue-600 bg-blue-50 border-blue-100";
      case "VIEWER":
        return "text-emerald-600 bg-emerald-50 border-emerald-100";
      default:
        return "text-gray-600 bg-gray-50 border-gray-100";
    }
  };

  return (
    <div className="space-y-8 max-w-7xl mx-auto bg-white p-4 min-h-screen">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 tracking-tight">
            Users
          </h1>
          <p className="text-gray-500 mt-1">
            Manage system access and permissions.
          </p>
        </div>
        <div className="flex items-center gap-2">
          {/* View only access: Add User and Import buttons removed */}
        </div>
      </div>

      <Card className="border shadow-none rounded-none">
        <CardHeader className="border-b pb-4 flex flex-row items-center justify-between space-y-0">
          <CardTitle className="text-xs font-bold uppercase tracking-widest text-gray-400">
            User Directory
          </CardTitle>
          <div className="flex items-center gap-2">
            <div className="relative w-64">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <Input
                className="pl-10 h-9 rounded-none border-gray-200 text-xs"
                placeholder="Search email or name..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
            <Button
              variant="outline"
              size="sm"
              className="h-9 rounded-none border-gray-200"
            >
              <Filter className="w-4 h-4 mr-2" /> Filter
            </Button>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-left">
              <thead className="bg-gray-50 border-b">
                <tr>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                    User
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                    Role
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                    Status
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                    Created
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest text-right">
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {isLoading ? (
                  <tr>
                    <td
                      colSpan={5}
                      className="px-6 py-20 text-center text-gray-400 animate-pulse font-medium uppercase tracking-widest text-[10px]"
                    >
                      Retrieving user data...
                    </td>
                  </tr>
                ) : usersData?.data && usersData.data.length > 0 ? (
                  usersData.data.map((user: any) => (
                    <tr
                      key={user.id}
                      className="hover:bg-gray-50 transition-colors group"
                    >
                      <td className="px-6 py-4">
                        <div className="flex flex-col">
                          <span className="text-sm font-bold text-gray-900">
                            {user.firstName} {user.lastName}
                          </span>
                          <span className="text-[10px] text-gray-400">
                            {user.email}
                          </span>
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <span
                          className={cn(
                            "px-2 py-0.5 text-[9px] font-bold uppercase tracking-widest rounded-none border",
                            getRoleBadgeColor(user.role),
                          )}
                        >
                          {user.role}
                        </span>
                      </td>
                      <td className="px-6 py-4">
                        <span
                          className={cn(
                            "px-2 py-0.5 text-[9px] font-bold uppercase tracking-widest rounded-none border",
                            user.isActive
                              ? "text-emerald-600 bg-emerald-50 border-emerald-100"
                              : "text-slate-600 bg-slate-50 border-slate-100",
                          )}
                        >
                          {user.isActive ? "Active" : "Inactive"}
                        </span>
                      </td>
                      <td className="px-6 py-4 text-sm text-gray-500">
                        {format(new Date(user.createdAt), "MMM dd, yyyy")}
                      </td>
                      <td className="px-6 py-4 text-right">
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 rounded-none"
                          onClick={() => navigate(`/admin/users/${user.id}`)}
                        >
                          <Eye className="w-4 h-4 text-gray-400" />
                        </Button>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td
                      colSpan={5}
                      className="px-6 py-20 text-center text-gray-400 italic"
                    >
                      No users found.
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </CardContent>
        {usersData && (
          <div className="p-4 border-t flex items-center justify-between bg-gray-50/30">
            <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
              Showing {(page - 1) * limit + 1} to{" "}
              {Math.min(page * limit, usersData.total)} of {usersData.total}
            </p>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="icon"
                className="h-8 w-8 rounded-none"
                onClick={() => setPage((p) => Math.max(1, p - 1))}
                disabled={page === 1}
              >
                <ChevronLeft className="w-4 h-4" />
              </Button>
              <Button
                variant="outline"
                size="icon"
                className="h-8 w-8 rounded-none"
                onClick={() => setPage((p) => p + 1)}
                disabled={page * limit >= usersData.total}
              >
                <ChevronRight className="w-4 h-4" />
              </Button>
            </div>
          </div>
        )}
      </Card>
    </div>
  );
}