import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useAuthStore } from '@/store/auth'
import { iamApi, type User, type UpdateUserRequest } from '@/api/iam'
import { Button } from '@/components/ui/button'
import { ArrowLeft, Save, Mail, User as UserIcon, Shield, Calendar, Clock, Edit2, X } from 'lucide-react'

export default function Profile() {
  const { id } = useParams<{ id?: string }>()
  const navigate = useNavigate()
  const { user: currentUser } = useAuthStore()
  const queryClient = useQueryClient()
  const [isEditing, setIsEditing] = useState(false)
  const [editForm, setEditForm] = useState({
    email: '',
    full_name: '',
  })

  // Determine which user to show
  const targetUserId = id || currentUser?.id

  // Check permission: only allow if viewing own profile or user is admin
  const canView = !!currentUser && !!targetUserId && (
    targetUserId === currentUser.id || 
    currentUser.roles.includes('admin')
  )

  const { data: profileUser, isLoading } = useQuery<User>({
    queryKey: ['iam-user', targetUserId],
    queryFn: () => iamApi.getUser(targetUserId!),
    enabled: canView,
  })

  const updateMutation = useMutation({
    mutationFn: (data: UpdateUserRequest) => iamApi.updateUser(targetUserId!, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['iam-user', targetUserId] })
      queryClient.invalidateQueries({ queryKey: ['iam-users'] })
      setIsEditing(false)
      // If updating own profile, refresh auth store
      if (targetUserId === currentUser?.id) {
        queryClient.invalidateQueries({ queryKey: ['auth-me'] })
      }
    },
  })

  useEffect(() => {
    if (profileUser) {
      setEditForm({
        email: profileUser.email || '',
        full_name: profileUser.full_name || '',
      })
    }
  }, [profileUser])

  if (!canView) {
    return (
      <div className="flex-1 overflow-y-auto p-8">
        <div className="max-w-[1200px] mx-auto">
          <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-6 text-center">
            <p className="text-red-400 font-semibold">Access Denied</p>
            <p className="text-text-secondary text-sm mt-2">
              You don't have permission to view this profile.
            </p>
            <Button
              variant="outline"
              onClick={() => navigate(-1)}
              className="mt-4"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Go Back
            </Button>
          </div>
        </div>
      </div>
    )
  }

  if (isLoading) {
    return (
      <div className="flex-1 overflow-y-auto p-8">
        <div className="max-w-[1200px] mx-auto">
          <p className="text-text-secondary">Loading profile...</p>
        </div>
      </div>
    )
  }

  if (!profileUser) {
    return (
      <div className="flex-1 overflow-y-auto p-8">
        <div className="max-w-[1200px] mx-auto">
          <div className="bg-card-dark border border-border-dark rounded-lg p-6 text-center">
            <p className="text-text-secondary">User not found</p>
            <Button
              variant="outline"
              onClick={() => navigate(-1)}
              className="mt-4"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Go Back
            </Button>
          </div>
        </div>
      </div>
    )
  }

  const isOwnProfile = targetUserId === currentUser?.id
  const canEdit = isOwnProfile || currentUser?.roles.includes('admin')

  const handleSave = () => {
    updateMutation.mutate({
      email: editForm.email,
      full_name: editForm.full_name,
    })
  }

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleString()
  }

  const formatLastLogin = (lastLoginAt: string | null) => {
    if (!lastLoginAt) return 'Never'
    return formatDate(lastLoginAt)
  }

  const getAvatarInitials = () => {
    if (profileUser?.full_name) {
      return profileUser.full_name
        .split(' ')
        .map((n: string) => n[0])
        .join('')
        .substring(0, 2)
        .toUpperCase()
    }
    return profileUser?.username?.substring(0, 2).toUpperCase() || 'U'
  }

  return (
    <div className="flex-1 overflow-y-auto p-8">
      <div className="max-w-[1200px] mx-auto flex flex-col gap-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => navigate(-1)}
              className="text-text-secondary hover:text-white"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back
            </Button>
            <div>
              <h1 className="text-3xl font-black text-white leading-tight">User Profile</h1>
              <p className="text-text-secondary text-sm mt-1">
                {isOwnProfile ? 'Your profile information' : `Viewing profile for ${profileUser.username}`}
              </p>
            </div>
          </div>
          {canEdit && (
            <div className="flex gap-2">
              {isEditing ? (
                <>
                  <Button
                    variant="outline"
                    onClick={() => {
                      setIsEditing(false)
                      setEditForm({
                        email: profileUser.email || '',
                        full_name: profileUser.full_name || '',
                      })
                    }}
                  >
                    <X className="h-4 w-4 mr-2" />
                    Cancel
                  </Button>
                  <Button
                    onClick={handleSave}
                    disabled={updateMutation.isPending}
                  >
                    <Save className="h-4 w-4 mr-2" />
                    {updateMutation.isPending ? 'Saving...' : 'Save Changes'}
                  </Button>
                </>
              ) : (
                <Button onClick={() => setIsEditing(true)}>
                  <Edit2 className="h-4 w-4 mr-2" />
                  Edit Profile
                </Button>
              )}
            </div>
          )}
        </div>

        {/* Profile Card */}
        <div className="bg-card-dark border border-border-dark rounded-xl overflow-hidden">
          {/* Profile Header */}
          <div className="bg-gradient-to-r from-primary/20 to-blue-600/20 p-8 border-b border-border-dark">
            <div className="flex items-center gap-6">
              <div className="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-3xl font-bold">
                {getAvatarInitials()}
              </div>
              <div className="flex-1">
                <h2 className="text-2xl font-bold text-white">
                  {profileUser.full_name || profileUser.username}
                </h2>
                <p className="text-text-secondary mt-1">@{profileUser.username}</p>
                <div className="flex items-center gap-4 mt-3">
                  <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold ${
                    profileUser.is_active
                      ? 'bg-green-500/10 text-green-400 border border-green-500/20'
                      : 'bg-red-500/10 text-red-400 border border-red-500/20'
                  }`}>
                    <span className={`w-2 h-2 rounded-full ${profileUser.is_active ? 'bg-green-400' : 'bg-red-400'}`}></span>
                    {profileUser.is_active ? 'Active' : 'Inactive'}
                  </div>
                  {profileUser.is_system && (
                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold bg-purple-500/10 text-purple-400 border border-purple-500/20">
                      <Shield size={12} />
                      System User
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

          {/* Profile Content */}
          <div className="p-8">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Basic Information */}
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
                    <UserIcon className="h-5 w-5 text-primary" />
                    Basic Information
                  </h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
                        Username
                      </label>
                      <div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white font-mono">
                        {profileUser.username}
                      </div>
                      <p className="text-xs text-text-secondary mt-1">Username cannot be changed</p>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
                        Email Address
                      </label>
                      {isEditing ? (
                        <input
                          type="email"
                          value={editForm.email}
                          onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                          className="w-full bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                          placeholder="email@example.com"
                        />
                      ) : (
                        <div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white flex items-center gap-2">
                          <Mail className="h-4 w-4 text-text-secondary" />
                          {profileUser.email || '-'}
                        </div>
                      )}
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
                        Full Name
                      </label>
                      {isEditing ? (
                        <input
                          type="text"
                          value={editForm.full_name}
                          onChange={(e) => setEditForm({ ...editForm, full_name: e.target.value })}
                          className="w-full bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                          placeholder="Full Name"
                        />
                      ) : (
                        <div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white">
                          {profileUser.full_name || '-'}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>

              {/* Account Details */}
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
                    <Shield className="h-5 w-5 text-primary" />
                    Account Details
                  </h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
                        Roles
                      </label>
                      <div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3">
                        {profileUser.roles && profileUser.roles.length > 0 ? (
                          <div className="flex flex-wrap gap-2">
                            {profileUser.roles.map((role) => (
                              <span
                                key={role}
                                className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-primary/10 text-primary text-xs font-medium border border-primary/20"
                              >
                                <Shield size={12} />
                                {role}
                              </span>
                            ))}
                          </div>
                        ) : (
                          <span className="text-text-secondary text-sm">No roles assigned</span>
                        )}
                      </div>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
                        Permissions
                      </label>
                      <div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3">
                        {profileUser.permissions && profileUser.permissions.length > 0 ? (
                          <div className="flex flex-wrap gap-2">
                            {profileUser.permissions.map((perm) => (
                              <span
                                key={perm}
                                className="inline-flex items-center px-2 py-1 rounded-md bg-slate-700 text-slate-300 text-xs font-medium"
                              >
                                {perm}
                              </span>
                            ))}
                          </div>
                        ) : (
                          <span className="text-text-secondary text-sm">No permissions assigned</span>
                        )}
                      </div>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
                        Last Login
                      </label>
                      <div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white flex items-center gap-2">
                        <Clock className="h-4 w-4 text-text-secondary" />
                        {formatLastLogin(profileUser.last_login_at)}
                      </div>
                    </div>

                    <div>
                      <label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
                        Account Created
                      </label>
                      <div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white flex items-center gap-2">
                        <Calendar className="h-4 w-4 text-text-secondary" />
                        {formatDate(profileUser.created_at)}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}