"use client";

import { useState } from "react";
import { useAdminUsers, useUpdateUserStatus } from "../hooks/adminUsers.hooks";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Users, Search, Shield, CheckCircle2, ShieldAlert, Loader2, Mail } from "lucide-react";

export function AdminUserList() {
  const [search, setSearch] = useState("");
  const { data, isLoading } = useAdminUsers({ search });
  const { mutate: updateStatus } = useUpdateUserStatus();

  const users = data?.users || [];

  return (
    <div className="p-6 space-y-6 max-w-7xl mx-auto">
      <div>
        <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center gap-3">
          <Users className="h-8 w-8 text-primary" />
          System Users Management
        </h1>
        <p className="text-muted-foreground mt-1">
          Super Admin view of all platform user accounts, roles, and status.
        </p>
      </div>

      <div className="flex items-center gap-3">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search users by email or role..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="pl-9 bg-background border-input"
          />
        </div>
      </div>

      {isLoading ? (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </div>
      ) : users.length === 0 ? (
        <Card className="border-border bg-card text-center py-12 shadow-sm">
          <CardContent className="space-y-3">
            <Users className="h-12 w-12 text-muted-foreground mx-auto" />
            <h3 className="text-lg font-medium text-foreground">No platform users found</h3>
            <p className="text-muted-foreground text-sm">
              Registered users will be listed here.
            </p>
          </CardContent>
        </Card>
      ) : (
        <Card className="border-border bg-card shadow-sm">
          <CardHeader className="border-b border-border">
            <CardTitle className="text-card-foreground text-base font-bold">User Accounts ({users.length})</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="overflow-x-auto rounded-lg border border-border">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-muted border-b border-border text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
                    <th className="py-2.5 px-4">User Email</th>
                    <th className="py-2.5 px-4">Role</th>
                    <th className="py-2.5 px-4">Status</th>
                    <th className="py-2.5 px-4">Registered Date</th>
                    <th className="py-2.5 px-4 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border text-xs text-foreground">
                  {users.map((user) => (
                    <tr key={user.id} className="hover:bg-secondary/20 transition-all duration-200">
                      <td className="py-3 px-4 font-semibold text-foreground flex items-center gap-2">
                        <Mail className="h-3.5 w-3.5 text-primary" /> {user.email}
                      </td>
                      <td className="py-3 px-4">
                        <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-primary/10 text-primary border border-primary/20 flex items-center gap-1 w-max">
                          <Shield className="h-3 w-3" /> {user.role}
                        </span>
                      </td>
                      <td className="py-3 px-4">
                        <span
                          className={`px-2 py-0.5 rounded-full text-[10px] font-semibold ${
                            user.status === "ACTIVE"
                              ? "bg-emerald-500/10 text-emerald-700 border border-emerald-500/30"
                              : "bg-muted text-muted-foreground border border-border"
                          }`}
                        >
                          {user.status}
                        </span>
                      </td>
                      <td className="py-3 px-4 text-muted-foreground">
                        {new Date(user.createdAt).toLocaleDateString()}
                      </td>
                      <td className="py-3 px-4 text-right">
                        {user.status === "ACTIVE" ? (
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => updateStatus({ id: user.id, status: "SUSPENDED" })}
                            className="text-xs gap-1.5 text-amber-700 hover:bg-amber-500/10"
                          >
                            <ShieldAlert className="h-3.5 w-3.5" /> Suspend
                          </Button>
                        ) : (
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => updateStatus({ id: user.id, status: "ACTIVE" })}
                            className="text-xs gap-1.5 text-emerald-700 hover:bg-emerald-500/10"
                          >
                            <CheckCircle2 className="h-3.5 w-3.5" /> Activate
                          </Button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}