"use client";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  User,
  Mail,
  Calendar,
  Shield,
  MapPin,
  Phone,
  Globe,
  Lock,
  Unlock,
  UserCheck,
  UserX,
  Trash2,
} from "lucide-react";
import {
  useUser,
  useLockUser,
  useUnlockUser,
  useDisableUser,
  useEnableUser,
  useDeleteUser,
} from "@/hooks";
import { RoleEnums } from "@/types/api";
import Image from "next/image";

interface UserDetailsDialogProps {
  userId: string | null;
  isOpen: boolean;
  onClose: () => void;
}

export function UserDetailsDialog({
  userId,
  isOpen,
  onClose,
}: UserDetailsDialogProps) {
  const { data: userData, isLoading, error } = useUser(userId || "");

  // User management mutations
  const lockUserMutation = useLockUser();
  const unlockUserMutation = useUnlockUser();
  const disableUserMutation = useDisableUser();
  const enableUserMutation = useEnableUser();
  const deleteUserMutation = useDeleteUser();

  const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-green-100 text-green-800 capitalize";
      case "locked":
        return "bg-yellow-100 text-yellow-800 capitalize";
      case "disabled":
        return "bg-red-100 text-red-800 capitalize";
      case "suspended":
        return "bg-orange-100 text-orange-800 capitalize";
      default:
        return "bg-gray-100 text-gray-800 capitalize";
    }
  };

  const getRoleColor = (role: string) => {
    switch (role) {
      case RoleEnums.SuperAdmin:
        return "bg-purple-100 text-purple-800 capitalize";
      case RoleEnums.Admin:
        return "bg-blue-100 text-blue-800 capitalize";
      case RoleEnums.Moderator:
        return "bg-green-100 text-green-800 capitalize";
      case RoleEnums.User:
        return "bg-gray-100 text-gray-800 capitalize";
      default:
        return "bg-gray-100 text-gray-800 capitalize";
    }
  };

  // User action handlers
  const handleLockUser = async (userId: string) => {
    try {
      await lockUserMutation.mutateAsync({
        id: userId,
        lockData: { reason: "Account locked by admin" },
      });
    } catch (error) {
      console.error("Failed to lock user:", error);
    }
  };

  const handleUnlockUser = async (userId: string) => {
    try {
      await unlockUserMutation.mutateAsync(userId);
    } catch (error) {
      console.error("Failed to unlock user:", error);
    }
  };

  const handleDisableUser = async (userId: string) => {
    try {
      await disableUserMutation.mutateAsync({
        id: userId,
        disableData: { reason: "Account disabled by admin" },
      });
    } catch (error) {
      console.error("Failed to disable user:", error);
    }
  };

  const handleEnableUser = async (userId: string) => {
    try {
      await enableUserMutation.mutateAsync(userId);
    } catch (error) {
      console.error("Failed to enable user:", error);
    }
  };

  const handleDeleteUser = async (userId: string) => {
    if (
      confirm(
        "Are you sure you want to delete this user? This action cannot be undone."
      )
    ) {
      try {
        await deleteUserMutation.mutateAsync({
          id: userId,
          deleteData: { reason: "User deleted by admin" },
        });
        onClose(); // Close dialog after successful deletion
      } catch (error) {
        console.error("Failed to delete user:", error);
      }
    }
  };

  if (!userId) return null;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto gradient-bg">
        <DialogHeader>
          <DialogTitle className="flex items-center justify-between">
            <span>User Details</span>
          </DialogTitle>
          <DialogDescription>
            View detailed information about this user
          </DialogDescription>
        </DialogHeader>

        {isLoading ? (
          <div className="space-y-4">
            <div className="flex items-center space-x-4">
              <div className="h-16 w-16 bg-gray-200 rounded-full animate-pulse"></div>
              <div className="space-y-2">
                <div className="h-4 bg-gray-200 rounded w-32 animate-pulse"></div>
                <div className="h-3 bg-gray-200 rounded w-24 animate-pulse"></div>
              </div>
            </div>
            <div className="space-y-2">
              {[...Array(6)].map((_, i) => (
                <div
                  key={i}
                  className="h-3 bg-gray-200 rounded animate-pulse"
                ></div>
              ))}
            </div>
          </div>
        ) : error ? (
          <div className="text-center py-8">
            <p className="text-red-500">Failed to load user details</p>
            <Button variant="outline" onClick={onClose} className="mt-4">
              Close
            </Button>
          </div>
        ) : userData?.data?.user ? (
          <div className="space-y-6">
            {/* User Header */}
            <div className="space-y-4">
              {/* Cover Photo */}
              {userData.data.user.profile?.coverPhoto?.url && (
                <div className="relative h-32 w-full rounded-lg overflow-hidden">
                  <Image
                    src={userData.data.user.profile.coverPhoto.url}
                    alt="Cover photo"
                    fill
                    className="object-cover"
                  />
                </div>
              )}

              <div className="flex items-center space-x-4">
                <Avatar className="h-16 w-16">
                  <AvatarImage
                    src={userData.data.user.profile?.profilePicture?.url}
                  />
                  <AvatarFallback className="text-lg">
                    {userData.data.user.fullName.charAt(0).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <h3 className="text-xl font-semibold">
                    {userData.data.user.fullName}
                  </h3>
                  <p className="text-muted-foreground">
                    {userData.data.user.email}
                  </p>
                  <div className="flex items-center space-x-2 mt-2">
                    <Badge className={getRoleColor(userData.data.user.role)}>
                      {userData.data.user.role}
                    </Badge>
                    <Badge
                      className={getStatusColor(
                        userData.data.user.isLocked
                          ? "locked"
                          : userData.data.user.isDisabled
                          ? "disabled"
                          : "active"
                      )}
                    >
                      {userData.data.user.isLocked
                        ? "Locked"
                        : userData.data.user.isDisabled
                        ? "Disabled"
                        : "Active"}
                    </Badge>
                  </div>
                </div>
              </div>
            </div>

            <Separator />

            {/* User Statistics */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center text-lg">
                  <User className="h-5 w-5 mr-2" />
                  User Statistics
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-3 gap-4">
                  <div className="text-center">
                    <p className="text-2xl font-bold text-secondary">
                      {userData.data.totalFollowers || 0}
                    </p>
                    <p className="text-sm text-muted-foreground">Followers</p>
                  </div>
                  <div className="text-center">
                    <p className="text-2xl font-bold text-secondary">
                      {userData.data.following || 0}
                    </p>
                    <p className="text-sm text-muted-foreground">Following</p>
                  </div>
                  <div className="text-center">
                    <p className="text-2xl font-bold text-secondary">
                      {userData.data.totalPosts || 0}
                    </p>
                    <p className="text-sm text-muted-foreground">Posts</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Basic Information */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center text-lg">
                  <User className="h-5 w-5 mr-2" />
                  Basic Information
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex items-center space-x-3">
                    <Mail className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-sm font-medium">Email</p>
                      <p className="text-sm text-muted-foreground">
                        {userData.data.user.email}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <Calendar className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-sm font-medium">Joined</p>
                      <p className="text-sm text-muted-foreground">
                        {new Date(
                          userData.data.user.createdAt
                        ).toLocaleDateString()}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <Shield className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-sm font-medium">Role</p>
                      <p className="text-sm text-muted-foreground">
                        {userData.data.user.role}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <Calendar className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-sm font-medium">Last Updated</p>
                      <p className="text-sm text-muted-foreground">
                        {new Date(
                          userData.data.user.updatedAt
                        ).toLocaleDateString()}
                      </p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Profile Information */}
            {userData.data.user.profile && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center text-lg">
                    <User className="h-5 w-5 mr-2" />
                    Profile Information
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {/* Bio */}
                    {userData.data.user.profile?.bio && (
                      <div className="md:col-span-2">
                        <p className="text-sm font-medium">Bio</p>
                        <p className="text-sm text-muted-foreground">
                          {userData.data.user.profile.bio}
                        </p>
                      </div>
                    )}

                    {/* Voice/Audio Introduction */}
                    {userData.data.user.profile?.voiceIntro?.url && (
                      <div className="md:col-span-2">
                        <p className="text-sm font-medium mb-2">
                          Voice Introduction
                        </p>
                        <audio controls className="w-full max-w-md">
                          <source
                            src={userData.data.user.profile.voiceIntro.url}
                            type="audio/mpeg"
                          />
                          <source
                            src={userData.data.user.profile.voiceIntro.url}
                            type="audio/mp4"
                          />
                          <source
                            src={userData.data.user.profile.voiceIntro.url}
                            type="audio/wav"
                          />
                          <source
                            src={userData.data.user.profile.voiceIntro.url}
                            type="audio/webm"
                          />
                          Your browser does not support the audio element.
                        </audio>
                      </div>
                    )}

                    {/* Location */}
                    {userData.data.user.profile?.location && (
                      <div className="flex items-center space-x-3">
                        <MapPin className="h-4 w-4 text-muted-foreground" />
                        <div>
                          <p className="text-sm font-medium">Location</p>
                          <p className="text-sm text-muted-foreground">
                            {userData.data.user.profile.location}
                          </p>
                        </div>
                      </div>
                    )}

                    {/* Phone Number */}
                    {userData.data.user.profile?.phoneNumber && (
                      <div className="flex items-center space-x-3">
                        <Phone className="h-4 w-4 text-muted-foreground" />
                        <div>
                          <p className="text-sm font-medium">Phone</p>
                          <p className="text-sm text-muted-foreground">
                            {userData.data.user.profile.phoneNumber}
                          </p>
                        </div>
                      </div>
                    )}

                    {/* Website */}
                    {userData.data.user.profile?.website && (
                      <div className="flex items-center space-x-3">
                        <Globe className="h-4 w-4 text-muted-foreground" />
                        <div>
                          <p className="text-sm font-medium">Website</p>
                          <a
                            href={userData.data.user.profile.website}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-sm text-blue-600 hover:underline"
                          >
                            {userData.data.user.profile.website}
                          </a>
                        </div>
                      </div>
                    )}

                    {/* Date of Birth */}
                    {userData.data.user.profile?.dateOfBirth && (
                      <div className="flex items-center space-x-3">
                        <Calendar className="h-4 w-4 text-muted-foreground" />
                        <div>
                          <p className="text-sm font-medium">Date of Birth</p>
                          <p className="text-sm text-muted-foreground">
                            {new Date(
                              userData.data.user.profile.dateOfBirth
                            ).toLocaleDateString()}
                          </p>
                        </div>
                      </div>
                    )}

                    {/* Gender */}
                    {userData.data.user.profile?.gender && (
                      <div className="flex items-center space-x-3">
                        <User className="h-4 w-4 text-muted-foreground" />
                        <div>
                          <p className="text-sm font-medium">Gender</p>
                          <p className="text-sm text-muted-foreground">
                            {userData.data.user.profile.gender}
                          </p>
                        </div>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            )}
            {/* Account Status */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center text-lg">
                  <Shield className="h-5 w-5 mr-2" />
                  Account Status
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium">Account Status</p>
                    <p className="text-sm text-muted-foreground">
                      {userData.data.user.isLocked
                        ? "Locked"
                        : userData.data.user.isDisabled
                        ? "Disabled"
                        : "Active"}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Email Verified</p>
                    <p className="text-sm text-muted-foreground">
                      {userData.data.user.isVerified ? "Yes" : "No"}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Profile Completed</p>
                    <p className="text-sm text-muted-foreground">
                      {userData.data.user.isProfileCompleted ? "Yes" : "No"}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Account Deleted</p>
                    <p className="text-sm text-muted-foreground">
                      {userData.data.user.isDeleted ? "Yes" : "No"}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* User Management Actions */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center text-lg">
                  <Shield className="h-5 w-5 mr-2" />
                  User Management
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                  {/* Lock/Unlock User */}
                  {userData.data.user.isLocked ? (
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleUnlockUser(userData.data.user._id)}
                      disabled={unlockUserMutation.isPending}
                      className="flex items-center space-x-2"
                    >
                      <Unlock className="h-4 w-4" />
                      <span>Unlock</span>
                    </Button>
                  ) : (
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleLockUser(userData.data.user._id)}
                      disabled={lockUserMutation.isPending}
                      className="flex items-center space-x-2"
                    >
                      <Lock className="h-4 w-4" />
                      <span>Lock</span>
                    </Button>
                  )}

                  {/* Enable/Disable User */}
                  {userData.data.user.isDisabled ? (
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleEnableUser(userData.data.user._id)}
                      disabled={enableUserMutation.isPending}
                      className="flex items-center space-x-2"
                    >
                      <UserCheck className="h-4 w-4" />
                      <span>Enable</span>
                    </Button>
                  ) : (
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleDisableUser(userData.data.user._id)}
                      disabled={disableUserMutation.isPending}
                      className="flex items-center space-x-2"
                    >
                      <UserX className="h-4 w-4" />
                      <span>Disable</span>
                    </Button>
                  )}

                  {/* Delete User */}
                  <Button
                    variant="destructive"
                    size="sm"
                    onClick={() => handleDeleteUser(userData.data.user._id)}
                    disabled={deleteUserMutation.isPending}
                    className="flex items-center space-x-2"
                  >
                    <Trash2 className="h-4 w-4" />
                    <span>Delete</span>
                  </Button>

                  {/* Edit User (placeholder for future implementation) */}
                  {/* <Button
                    variant="outline"
                    size="sm"
                    disabled
                    className="flex items-center space-x-2"
                  >
                    <Edit className="h-4 w-4" />
                    <span>Edit</span>
                  </Button> */}
                </div>
              </CardContent>
            </Card>

            {/* Device Information */}
            {userData.data.user.devices &&
              userData.data.user.devices.length > 0 && (
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center text-lg">
                      <Shield className="h-5 w-5 mr-2" />
                      Registered Devices
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {userData.data.user.devices.map(
                        (device, index: number) => (
                          <div
                            key={index}
                            className="flex items-center justify-between p-3 border rounded-lg"
                          >
                            <div className="flex items-center space-x-3">
                              <div className="h-8 w-8 bg-gray-100 rounded-full flex items-center justify-center">
                                <Shield className="h-4 w-4 text-gray-600" />
                              </div>
                              <div>
                                <p className="text-sm font-medium">
                                  {device.deviceName || `Device ${index + 1}`}
                                </p>
                                <p className="text-xs text-muted-foreground">
                                  {device.deviceType || "Unknown Device"}
                                </p>
                              </div>
                            </div>
                            <div className="text-right">
                              <p className="text-xs text-muted-foreground">
                                {device.lastLoginAt
                                  ? new Date(
                                      device.lastLoginAt
                                    ).toLocaleDateString()
                                  : "Never"}
                              </p>
                              <Badge
                                variant={
                                  device.isActive ? "default" : "secondary"
                                }
                                className="text-xs capitalize"
                              >
                                {device.isActive ? "Active" : "Inactive"}
                              </Badge>
                            </div>
                          </div>
                        )
                      )}
                    </div>
                  </CardContent>
                </Card>
              )}

            {/* Actions */}
            <div className="flex justify-end space-x-2">
              <Button onClick={onClose}>Close</Button>
              {/* <Button>
                <Edit className="h-4 w-4 mr-2" />
                Edit User
              </Button> */}
            </div>
          </div>
        ) : (
          <div className="text-center py-8">
            <p className="text-muted-foreground">User not found</p>
            <Button variant="outline" onClick={onClose} className="mt-4">
              Close
            </Button>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}