"use client";

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useRouter, useParams } from "next/navigation";
import { PageHeader } from "@/components/shared/page-header";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
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 { LoadingPage } from "@/components/ui/loading";
import { ConfirmDialog } from "@/components/shared/confirm-dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  usersApi,
  gamificationApi,
  User,
  Badge as BadgeType,
  UserBadge,
  UserPoints,
  PointType,
  RoleDefinition,
  UserRole,
} from "@/lib/api-client";
import { formatDate } from "@/lib/utils";
import { useState } from "react";
import {
  ArrowLeft,
  Mail,
  Phone,
  Calendar,
  MapPin,
  Shield,
  Ban,
  Trash2,
  Check,
  X,
  Star,
  Award,
  Trophy,
  Plus,
  Minus,
} from "lucide-react";
import Link from "next/link";

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

export default function UserDetailPage() {
  const params = useParams();
  const id = params.id as string;
  const router = useRouter();
  const queryClient = useQueryClient();
  const [deleteDialog, setDeleteDialog] = useState(false);
  const [suspendDialog, setSuspendDialog] = useState(false);

  // Gamification dialogs
  const [awardPointsDialog, setAwardPointsDialog] = useState(false);
  const [deductPointsDialog, setDeductPointsDialog] = useState(false);
  const [awardBadgeDialog, setAwardBadgeDialog] = useState(false);
  const [revokeBadgeDialog, setRevokeBadgeDialog] = useState<string | null>(null);
  const [assignRoleDialog, setAssignRoleDialog] = useState(false);
  const [removeRoleDialog, setRemoveRoleDialog] = useState<string | null>(null);

  // Form state for points
  const [pointsAmount, setPointsAmount] = useState("");
  const [pointsTypeId, setPointsTypeId] = useState("");
  const [pointsReason, setPointsReason] = useState("");
  const [pointsNotes, setPointsNotes] = useState("");

  // Form state for badges/roles
  const [selectedBadgeId, setSelectedBadgeId] = useState("");
  const [selectedRoleId, setSelectedRoleId] = useState("");

  const { data: user, isLoading } = useQuery({
    queryKey: ["user", id],
    queryFn: async () => {
      const response = await usersApi.getOne(id);
      return response.data;
    },
  });

  // Gamification queries
  const { data: userPoints } = useQuery({
    queryKey: ["user-points", id],
    queryFn: async () => {
      const response = await gamificationApi.getUserPoints(id);
      return response.data;
    },
    enabled: !!id,
  });

  const { data: userBadges } = useQuery({
    queryKey: ["user-badges", id],
    queryFn: async () => {
      const response = await gamificationApi.getUserBadges(id);
      return response.data;
    },
    enabled: !!id,
  });

  const { data: userRoles } = useQuery({
    queryKey: ["user-roles", id],
    queryFn: async () => {
      const response = await gamificationApi.getUserRoles(id);
      return response.data;
    },
    enabled: !!id,
  });

  const { data: allBadges } = useQuery({
    queryKey: ["badges"],
    queryFn: async () => {
      const response = await gamificationApi.getBadges();
      return response.data;
    },
  });

  const { data: pointTypes } = useQuery({
    queryKey: ["point-types"],
    queryFn: async () => {
      const response = await gamificationApi.getPointTypes();
      return response.data;
    },
  });

  const { data: allRoles } = useQuery({
    queryKey: ["roles"],
    queryFn: async () => {
      const response = await gamificationApi.getRoles();
      return response.data;
    },
  });

  const updateMutation = useMutation({
    mutationFn: (data: Partial<User>) => usersApi.update(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user", id] });
    },
  });

  const approveMutation = useMutation({
    mutationFn: () => usersApi.approve(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user", id] });
      queryClient.invalidateQueries({ queryKey: ["users-pending"] });
    },
  });

  const denyMutation = useMutation({
    mutationFn: () => usersApi.deny(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user", id] });
      router.push("/users");
    },
  });

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

  const deleteMutation = useMutation({
    mutationFn: () => usersApi.delete(id),
    onSuccess: () => {
      router.push("/users");
    },
  });

  // Gamification mutations
  const awardPointsMutation = useMutation({
    mutationFn: () =>
      gamificationApi.awardPoints(id, {
        amount: parseInt(pointsAmount),
        pointTypeId: pointsTypeId || undefined,
        reason: pointsReason || undefined,
        notes: pointsNotes || undefined,
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user-points", id] });
      setAwardPointsDialog(false);
      resetPointsForm();
    },
  });

  const deductPointsMutation = useMutation({
    mutationFn: () =>
      gamificationApi.deductPoints(id, {
        amount: parseInt(pointsAmount),
        pointTypeId: pointsTypeId || undefined,
        reason: pointsReason || undefined,
        notes: pointsNotes || undefined,
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user-points", id] });
      setDeductPointsDialog(false);
      resetPointsForm();
    },
  });

  const awardBadgeMutation = useMutation({
    mutationFn: () => gamificationApi.awardBadge(selectedBadgeId, id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user-badges", id] });
      queryClient.invalidateQueries({ queryKey: ["user-points", id] });
      setAwardBadgeDialog(false);
      setSelectedBadgeId("");
    },
  });

  const revokeBadgeMutation = useMutation({
    mutationFn: (badgeId: string) => gamificationApi.revokeBadge(badgeId, id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user-badges", id] });
      setRevokeBadgeDialog(null);
    },
  });

  const assignRoleMutation = useMutation({
    mutationFn: () => gamificationApi.assignRoleToUser(id, selectedRoleId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user-roles", id] });
      setAssignRoleDialog(false);
      setSelectedRoleId("");
    },
  });

  const removeRoleMutation = useMutation({
    mutationFn: (roleId: string) => gamificationApi.removeRoleFromUser(id, roleId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user-roles", id] });
      setRemoveRoleDialog(null);
    },
  });

  const setCurrentRoleMutation = useMutation({
    mutationFn: (roleId: string) => gamificationApi.setCurrentRole(id, roleId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user-roles", id] });
    },
  });

  const resetPointsForm = () => {
    setPointsAmount("");
    setPointsTypeId("");
    setPointsReason("");
    setPointsNotes("");
  };

  // Filter badges user doesn't have yet
  const availableBadges = allBadges?.filter(
    (badge) => !userBadges?.some((ub) => ub.badgeId === badge.id)
  );

  // Filter roles user doesn't have yet
  const availableRoles = allRoles?.filter(
    (role) => !userRoles?.some((ur) => ur.roleId === role.id)
  );

  if (isLoading) {
    return <LoadingPage />;
  }

  if (!user) {
    return (
      <div className="flex flex-col items-center justify-center py-12">
        <h2 className="text-xl font-semibold">User not found</h2>
        <Link href="/users">
          <Button variant="outline" className="mt-4">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Users
          </Button>
        </Link>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeader title="User Details">
        <Link href="/users">
          <Button variant="outline">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Users
          </Button>
        </Link>
      </PageHeader>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Profile Card */}
        <Card className="lg:col-span-1">
          <CardContent className="pt-6">
            <div className="flex flex-col items-center text-center">
              <Avatar
                src={user.avatarUrl}
                fallback={`${user.firstName} ${user.lastName}`}
                size="lg"
                className="h-24 w-24 text-2xl"
              />
              <h2 className="mt-4 text-xl font-semibold">
                {user.firstName} {user.lastName}
              </h2>
              <Badge variant={statusColors[user.status]} className="mt-2">
                {user.status.charAt(0).toUpperCase() + user.status.slice(1)}
              </Badge>

              {user.status === "pending" && (
                <div className="flex gap-2 mt-6 w-full">
                  <Button
                    variant="outline"
                    className="flex-1"
                    onClick={() => denyMutation.mutate()}
                    disabled={denyMutation.isPending}
                  >
                    <X className="mr-2 h-4 w-4" />
                    Deny
                  </Button>
                  <Button
                    variant="success"
                    className="flex-1"
                    onClick={() => approveMutation.mutate()}
                    disabled={approveMutation.isPending}
                  >
                    <Check className="mr-2 h-4 w-4" />
                    Approve
                  </Button>
                </div>
              )}

              {user.status === "active" && (
                <Button
                  variant="outline"
                  className="mt-6 w-full"
                  onClick={() => setSuspendDialog(true)}
                >
                  <Ban className="mr-2 h-4 w-4" />
                  Suspend User
                </Button>
              )}

              <Button
                variant="destructive"
                className="mt-2 w-full"
                onClick={() => setDeleteDialog(true)}
              >
                <Trash2 className="mr-2 h-4 w-4" />
                Delete User
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Info Cards */}
        <div className="lg:col-span-2 space-y-6">
          {/* Contact Info */}
          <Card>
            <CardHeader>
              <CardTitle>Contact Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="flex items-center gap-3">
                  <div className="rounded-full bg-primary/10 p-2">
                    <Phone className="h-4 w-4 text-primary" />
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Phone</p>
                    <p className="font-medium">{user.phone}</p>
                  </div>
                </div>
                {user.email && (
                  <div className="flex items-center gap-3">
                    <div className="rounded-full bg-primary/10 p-2">
                      <Mail className="h-4 w-4 text-primary" />
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Email</p>
                      <p className="font-medium">{user.email}</p>
                    </div>
                  </div>
                )}
                <div className="flex items-center gap-3">
                  <div className="rounded-full bg-primary/10 p-2">
                    <Calendar className="h-4 w-4 text-primary" />
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Joined</p>
                    <p className="font-medium">{formatDate(user.createdAt)}</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Role & Permissions */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Shield className="h-5 w-5" />
                Role & Permissions
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <label className="text-sm font-medium">Role</label>
                  <NativeSelect
                    value={user.role}
                    onChange={(e) => updateMutation.mutate({ role: e.target.value as User["role"] })}
                    options={[
                      { value: "employee", label: "Employee" },
                      { value: "manager", label: "Manager" },
                      { value: "admin", label: "Admin" },
                    ]}
                    className="mt-1"
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Locations */}
          {user.locations && user.locations.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <MapPin className="h-5 w-5" />
                  Locations
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {user.locations.map((location) => (
                    <Badge key={location.id} variant="outline">
                      {location.name}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

          {/* Points */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Star className="h-5 w-5 text-yellow-500" />
                  Points
                </div>
                <div className="flex gap-2">
                  <Button size="sm" variant="outline" onClick={() => setAwardPointsDialog(true)}>
                    <Plus className="mr-1 h-4 w-4" />
                    Award
                  </Button>
                  <Button size="sm" variant="outline" onClick={() => setDeductPointsDialog(true)}>
                    <Minus className="mr-1 h-4 w-4" />
                    Deduct
                  </Button>
                </div>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div className="rounded-lg bg-muted p-4 text-center">
                  <p className="text-2xl font-bold">{userPoints?.total || 0}</p>
                  <p className="text-sm text-muted-foreground">Total Points</p>
                </div>
                {userPoints?.pointTypes?.map((pt) => (
                  <div key={pt.id} className="rounded-lg bg-muted p-4 text-center">
                    <p className="text-2xl font-bold">{pt.total}</p>
                    <p className="text-sm text-muted-foreground flex items-center justify-center gap-1">
                      {pt.iconType === "emoji" && pt.iconValue && <span>{pt.iconValue}</span>}
                      {pt.name}
                    </p>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Badges */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Award className="h-5 w-5 text-purple-500" />
                  Badges ({userBadges?.length || 0})
                </div>
                <Button size="sm" onClick={() => setAwardBadgeDialog(true)} disabled={!availableBadges?.length}>
                  <Plus className="mr-1 h-4 w-4" />
                  Award Badge
                </Button>
              </CardTitle>
            </CardHeader>
            <CardContent>
              {userBadges && userBadges.length > 0 ? (
                <div className="flex flex-wrap gap-3">
                  {userBadges.map((ub) => (
                    <div
                      key={ub.id}
                      className="flex items-center gap-2 rounded-lg border p-2 pr-3"
                    >
                      <span className="text-2xl">
                        {ub.badge.iconType === "emoji" ? ub.badge.iconValue : "🏆"}
                      </span>
                      <div className="flex flex-col">
                        <span className="text-sm font-medium">{ub.badge.name}</span>
                        <span className="text-xs text-muted-foreground">
                          {formatDate(ub.earnedAt)}
                        </span>
                      </div>
                      <Button
                        size="sm"
                        variant="ghost"
                        className="ml-2 h-6 w-6 p-0 text-destructive hover:text-destructive"
                        onClick={() => setRevokeBadgeDialog(ub.badgeId)}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-muted-foreground">No badges earned yet</p>
              )}
            </CardContent>
          </Card>

          {/* Gamification Roles */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Trophy className="h-5 w-5 text-amber-500" />
                  Gamification Roles ({userRoles?.length || 0})
                </div>
                <Button size="sm" onClick={() => setAssignRoleDialog(true)} disabled={!availableRoles?.length}>
                  <Plus className="mr-1 h-4 w-4" />
                  Assign Role
                </Button>
              </CardTitle>
            </CardHeader>
            <CardContent>
              {userRoles && userRoles.length > 0 ? (
                <div className="space-y-3">
                  {userRoles.map((ur) => (
                    <div
                      key={ur.id}
                      className="flex items-center justify-between rounded-lg border p-3"
                    >
                      <div className="flex items-center gap-3">
                        <span className="text-2xl">
                          {ur.role.iconType === "emoji" ? ur.role.iconValue : "👤"}
                        </span>
                        <div>
                          <div className="flex items-center gap-2">
                            <span className="font-medium">{ur.role.name}</span>
                            {ur.isCurrent && (
                              <Badge variant="success" className="text-xs">Current</Badge>
                            )}
                          </div>
                          <span className="text-xs text-muted-foreground">
                            Level {ur.role.level} • Achieved {formatDate(ur.achievedAt)}
                          </span>
                        </div>
                      </div>
                      <div className="flex gap-2">
                        {!ur.isCurrent && (
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => setCurrentRoleMutation.mutate(ur.roleId)}
                            disabled={setCurrentRoleMutation.isPending}
                          >
                            Set Current
                          </Button>
                        )}
                        <Button
                          size="sm"
                          variant="ghost"
                          className="text-destructive hover:text-destructive"
                          onClick={() => setRemoveRoleDialog(ur.roleId)}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-muted-foreground">No gamification roles assigned</p>
              )}
            </CardContent>
          </Card>
        </div>
      </div>

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

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

      {/* Award Points Dialog */}
      <Dialog open={awardPointsDialog} onOpenChange={setAwardPointsDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Award Points</DialogTitle>
            <DialogDescription>
              Award points to {user.firstName} {user.lastName}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="amount">Amount</Label>
              <Input
                id="amount"
                type="number"
                min="1"
                value={pointsAmount}
                onChange={(e) => setPointsAmount(e.target.value)}
                placeholder="Enter points amount"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="pointType">Point Type</Label>
              <NativeSelect
                value={pointsTypeId}
                onChange={(e) => setPointsTypeId(e.target.value)}
                options={[
                  { value: "", label: "Select point type (default)" },
                  ...(pointTypes?.map((pt) => ({ value: pt.id, label: pt.name })) || []),
                ]}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="reason">Reason</Label>
              <Input
                id="reason"
                value={pointsReason}
                onChange={(e) => setPointsReason(e.target.value)}
                placeholder="e.g., bonus_award, achievement"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="notes">Notes (optional)</Label>
              <Textarea
                id="notes"
                value={pointsNotes}
                onChange={(e) => setPointsNotes(e.target.value)}
                placeholder="Additional notes..."
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setAwardPointsDialog(false)}>
              Cancel
            </Button>
            <Button
              onClick={() => awardPointsMutation.mutate()}
              disabled={!pointsAmount || parseInt(pointsAmount) <= 0 || awardPointsMutation.isPending}
            >
              {awardPointsMutation.isPending ? "Awarding..." : "Award Points"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Deduct Points Dialog */}
      <Dialog open={deductPointsDialog} onOpenChange={setDeductPointsDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Deduct Points</DialogTitle>
            <DialogDescription>
              Deduct points from {user.firstName} {user.lastName}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="deductAmount">Amount</Label>
              <Input
                id="deductAmount"
                type="number"
                min="1"
                value={pointsAmount}
                onChange={(e) => setPointsAmount(e.target.value)}
                placeholder="Enter points amount"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="deductPointType">Point Type</Label>
              <NativeSelect
                value={pointsTypeId}
                onChange={(e) => setPointsTypeId(e.target.value)}
                options={[
                  { value: "", label: "Select point type (default)" },
                  ...(pointTypes?.map((pt) => ({ value: pt.id, label: pt.name })) || []),
                ]}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="deductReason">Reason</Label>
              <Input
                id="deductReason"
                value={pointsReason}
                onChange={(e) => setPointsReason(e.target.value)}
                placeholder="e.g., policy_violation, correction"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="deductNotes">Notes (optional)</Label>
              <Textarea
                id="deductNotes"
                value={pointsNotes}
                onChange={(e) => setPointsNotes(e.target.value)}
                placeholder="Additional notes..."
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeductPointsDialog(false)}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={() => deductPointsMutation.mutate()}
              disabled={!pointsAmount || parseInt(pointsAmount) <= 0 || deductPointsMutation.isPending}
            >
              {deductPointsMutation.isPending ? "Deducting..." : "Deduct Points"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Award Badge Dialog */}
      <Dialog open={awardBadgeDialog} onOpenChange={setAwardBadgeDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Award Badge</DialogTitle>
            <DialogDescription>
              Award a badge to {user.firstName} {user.lastName}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Select Badge</Label>
              <div className="grid gap-2 max-h-60 overflow-y-auto">
                {availableBadges?.map((badge) => (
                  <div
                    key={badge.id}
                    className={`flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
                      selectedBadgeId === badge.id ? "border-primary bg-primary/5" : "hover:bg-muted"
                    }`}
                    onClick={() => setSelectedBadgeId(badge.id)}
                  >
                    <span className="text-2xl">
                      {badge.iconType === "emoji" ? badge.iconValue : "🏆"}
                    </span>
                    <div>
                      <p className="font-medium">{badge.name}</p>
                      <p className="text-xs text-muted-foreground">{badge.description}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setAwardBadgeDialog(false)}>
              Cancel
            </Button>
            <Button
              onClick={() => awardBadgeMutation.mutate()}
              disabled={!selectedBadgeId || awardBadgeMutation.isPending}
            >
              {awardBadgeMutation.isPending ? "Awarding..." : "Award Badge"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Revoke Badge Confirm */}
      <ConfirmDialog
        open={!!revokeBadgeDialog}
        onOpenChange={() => setRevokeBadgeDialog(null)}
        title="Revoke Badge"
        description="Are you sure you want to revoke this badge? This action cannot be undone."
        confirmText="Revoke"
        variant="destructive"
        isLoading={revokeBadgeMutation.isPending}
        onConfirm={() => revokeBadgeDialog && revokeBadgeMutation.mutate(revokeBadgeDialog)}
      />

      {/* Assign Role Dialog */}
      <Dialog open={assignRoleDialog} onOpenChange={setAssignRoleDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Assign Role</DialogTitle>
            <DialogDescription>
              Assign a gamification role to {user.firstName} {user.lastName}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Select Role</Label>
              <div className="grid gap-2 max-h-60 overflow-y-auto">
                {availableRoles?.map((role) => (
                  <div
                    key={role.id}
                    className={`flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
                      selectedRoleId === role.id ? "border-primary bg-primary/5" : "hover:bg-muted"
                    }`}
                    onClick={() => setSelectedRoleId(role.id)}
                  >
                    <span className="text-2xl">
                      {role.iconType === "emoji" ? role.iconValue : "👤"}
                    </span>
                    <div>
                      <p className="font-medium">{role.name}</p>
                      <p className="text-xs text-muted-foreground">Level {role.level}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setAssignRoleDialog(false)}>
              Cancel
            </Button>
            <Button
              onClick={() => assignRoleMutation.mutate()}
              disabled={!selectedRoleId || assignRoleMutation.isPending}
            >
              {assignRoleMutation.isPending ? "Assigning..." : "Assign Role"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Remove Role Confirm */}
      <ConfirmDialog
        open={!!removeRoleDialog}
        onOpenChange={() => setRemoveRoleDialog(null)}
        title="Remove Role"
        description="Are you sure you want to remove this role from the user?"
        confirmText="Remove"
        variant="destructive"
        isLoading={removeRoleMutation.isPending}
        onConfirm={() => removeRoleDialog && removeRoleMutation.mutate(removeRoleDialog)}
      />
    </div>
  );
}