import { useState, useEffect, useRef } from 'react';
import { Layout } from '../components/Layout';
import { useAuth } from '../hooks/useAuth';
import { ApiTokensTab } from '../components/ApiTokensTab';
import api from '../lib/api';
import { Upload, X } from 'lucide-react';

const avatarOptions = [
  'account-avatar-profile-user-svgrepo-com.svg',
  'account-avatar-profile-user-2-svgrepo-com.svg',
  'account-avatar-profile-user-3-svgrepo-com.svg',
  'account-avatar-profile-user-4-svgrepo-com.svg',
  'account-avatar-profile-user-5-svgrepo-com.svg',
  'account-avatar-profile-user-6-svgrepo-com.svg',
  'account-avatar-profile-user-7-svgrepo-com.svg',
  'account-avatar-profile-user-8-svgrepo-com.svg',
  'account-avatar-profile-user-9-svgrepo-com.svg',
  'account-avatar-profile-user-10-svgrepo-com.svg',
  'account-avatar-profile-user-11-svgrepo-com.svg',
  'account-avatar-profile-user-12-svgrepo-com.svg',
  'account-avatar-profile-user-13-svgrepo-com.svg',
  'account-avatar-profile-user-14-svgrepo-com.svg',
  'account-avatar-profile-user-15-svgrepo-com.svg',
  'account-avatar-profile-user-16-svgrepo-com.svg',
];

export function ProfilePage() {
  const { user, refreshUser } = useAuth();
  const [name, setName] = useState(user?.name || '');
  const [email, setEmail] = useState(user?.email || '');
  const [newPassword, setNewPassword] = useState('');
  const [newPasswordConfirmation, setNewPasswordConfirmation] = useState('');
  const [selectedAvatar, setSelectedAvatar] = useState(user?.avatar || '');
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [uploading, setUploading] = useState(false);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState({ type: '', text: '' });
  const [activeTab, setActiveTab] = useState<'info' | 'security' | 'avatar' | 'api-tokens'>('info');
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (user) {
      setName(user.name);
      setEmail(user.email);
      setSelectedAvatar(user.avatar || '');
      if (user.avatar && !user.avatar.startsWith('/Icones/')) {
        // Se for imagem customizada, construir URL completa
        const avatarUrl = user.avatar.startsWith('storage/') 
          ? `/${user.avatar}` 
          : user.avatar.startsWith('http') 
          ? user.avatar 
          : `/${user.avatar}`;
        setPreviewImage(avatarUrl);
      } else {
        // Se for avatar pré-definido, limpar preview
        setPreviewImage(null);
      }
    }
  }, [user]);

  const handleUpdateProfile = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setMessage({ type: '', text: '' });

    try {
      await api.put('/auth/me', { name, email });
      await refreshUser();
      setMessage({ type: 'success', text: 'Perfil atualizado com sucesso!' });
    } catch (error: any) {
      setMessage({
        type: 'error',
        text: error.response?.data?.message || 'Erro ao atualizar perfil'
      });
    } finally {
      setLoading(false);
    }
  };

  const handleUpdatePassword = async (e: React.FormEvent) => {
    e.preventDefault();

    if (newPassword !== newPasswordConfirmation) {
      setMessage({ type: 'error', text: 'As senhas não coincidem' });
      return;
    }

    if (newPassword.length < 8) {
      setMessage({ type: 'error', text: 'A senha deve ter no mínimo 8 caracteres' });
      return;
    }

    setLoading(true);
    setMessage({ type: '', text: '' });

    try {
      await api.put('/auth/me', {
        password: newPassword,
        password_confirmation: newPasswordConfirmation
      });
      setNewPassword('');
      setNewPasswordConfirmation('');
      setMessage({ type: 'success', text: 'Senha atualizada com sucesso!' });
    } catch (error: any) {
      setMessage({
        type: 'error',
        text: error.response?.data?.message || 'Erro ao atualizar senha'
      });
    } finally {
      setLoading(false);
    }
  };

  const handleUpdateAvatar = async (avatar: string) => {
    setLoading(true);
    setMessage({ type: '', text: '' });

    try {
      await api.put('/auth/me', { avatar });
      setSelectedAvatar(avatar);
      setPreviewImage(null);
      await refreshUser();
      setMessage({ type: 'success', text: 'Avatar atualizado com sucesso!' });
    } catch (error: any) {
      setMessage({
        type: 'error',
        text: error.response?.data?.message || 'Erro ao atualizar avatar'
      });
    } finally {
      setLoading(false);
    }
  };

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    // Validate file type
    if (!file.type.startsWith('image/')) {
      setMessage({ type: 'error', text: 'Por favor, selecione uma imagem válida' });
      return;
    }

    // Validate file size (2MB)
    if (file.size > 2 * 1024 * 1024) {
      setMessage({ type: 'error', text: 'A imagem deve ter no máximo 2MB' });
      return;
    }

    // Create preview
    const reader = new FileReader();
    reader.onloadend = () => {
      setPreviewImage(reader.result as string);
    };
    reader.readAsDataURL(file);
  };

  const handleUploadAvatar = async () => {
    if (!fileInputRef.current?.files?.[0]) return;

    const file = fileInputRef.current.files[0];
    setUploading(true);
    setMessage({ type: '', text: '' });

    try {
      const formData = new FormData();
      formData.append('avatar_file', file);

      const response = await api.put('/auth/me', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      // Atualizar preview com o avatar retornado pelo backend
      if (response.data?.user?.avatar) {
        const newAvatar = response.data.user.avatar;
        setSelectedAvatar(newAvatar);
        // Se for uma imagem customizada (não começa com /Icones/), usar como preview
        if (!newAvatar.startsWith('/Icones/')) {
          // O backend já retorna URL completa, usar diretamente
          setPreviewImage(newAvatar);
        } else {
          // Se for avatar pré-definido, limpar preview
          setPreviewImage(null);
        }
      }
      
      // Limpar input de arquivo após upload bem-sucedido
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }

      // Atualizar usuário para sincronizar estado
      await refreshUser();
      
      // Garantir que o preview está atualizado após refresh
      if (response.data?.user?.avatar && !response.data.user.avatar.startsWith('/Icones/')) {
        const avatarUrl = response.data.user.avatar.startsWith('http') 
          ? response.data.user.avatar 
          : response.data.user.avatar.startsWith('/')
          ? response.data.user.avatar
          : `/${response.data.user.avatar}`;
        setPreviewImage(avatarUrl);
      }
      setMessage({ type: 'success', text: 'Avatar enviado com sucesso!' });
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    } catch (error: any) {
      setMessage({
        type: 'error',
        text: error.response?.data?.message || 'Erro ao enviar avatar'
      });
    } finally {
      setUploading(false);
    }
  };

  const getAvatarUrl = (avatar: string) => {
    if (avatar.startsWith('storage/') || avatar.startsWith('http')) {
      return avatar.startsWith('http') ? avatar : `/${avatar}`;
    }
    return `/Icones/${avatar}`;
  };

  return (
    <Layout title="Meu Perfil">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
        {/* Message Alert */}
        {message.text && (
          <div className={`mb-4 sm:mb-6 p-3 sm:p-4 rounded-lg ${message.type === 'success'
            ? 'bg-green-50 text-green-800 border border-green-200'
            : 'bg-red-50 text-red-800 border border-red-200'
            }`}>
            <p className="flex items-center text-sm sm:text-base">
              {message.type === 'success' ? (
                <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
              ) : (
                <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                </svg>
              )}
              {message.text}
            </p>
          </div>
        )}

        {/* Tabs */}
        <div className="bg-white rounded-lg shadow-sm mb-6 overflow-hidden">
          <div className="border-b border-gray-200 overflow-x-auto">
            <nav className="flex -mb-px min-w-max sm:min-w-0">
              <button
                onClick={() => setActiveTab('info')}
                className={`px-3 sm:px-6 py-3 sm:py-4 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${activeTab === 'info'
                  ? 'border-purple-600 text-purple-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  }`}
              >
                Informações
              </button>
              <button
                onClick={() => setActiveTab('avatar')}
                className={`px-3 sm:px-6 py-3 sm:py-4 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${activeTab === 'avatar'
                  ? 'border-purple-600 text-purple-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  }`}
              >
                Avatar
              </button>
              <button
                onClick={() => setActiveTab('security')}
                className={`px-3 sm:px-6 py-3 sm:py-4 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${activeTab === 'security'
                  ? 'border-purple-600 text-purple-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  }`}
              >
                Segurança
              </button>
              <button
                onClick={() => setActiveTab('api-tokens')}
                className={`px-3 sm:px-6 py-3 sm:py-4 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${activeTab === 'api-tokens'
                  ? 'border-purple-600 text-purple-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                  }`}
              >
                Tokens API
              </button>
            </nav>
          </div>

          <div className="p-4 sm:p-6">
            {/* Informações Pessoais */}
            {activeTab === 'info' && (
              <form onSubmit={handleUpdateProfile} className="space-y-4 sm:space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Nome Completo
                  </label>
                  <input
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm sm:text-base"
                    required
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    E-mail
                  </label>
                  <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm sm:text-base"
                    required
                  />
                </div>

                <div className="flex justify-end">
                  <button
                    type="submit"
                    disabled={loading}
                    className="w-full sm:w-auto px-4 sm:px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:ring-4 focus:ring-purple-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm sm:text-base"
                  >
                    {loading ? 'Salvando...' : 'Salvar Alterações'}
                  </button>
                </div>
              </form>
            )}

            {/* Avatar Selection */}
            {activeTab === 'avatar' && (
              <div className="space-y-6">
                {/* Upload de Imagem */}
                <div>
                  <h3 className="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">
                    Enviar Imagem do Dispositivo
                  </h3>
                  <div className="space-y-3 sm:space-y-4">
                    <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
                      <input
                        ref={fileInputRef}
                        type="file"
                        accept="image/*"
                        onChange={handleFileSelect}
                        className="hidden"
                        id="avatar-upload"
                      />
                      <label
                        htmlFor="avatar-upload"
                        className="flex-1 flex items-center justify-center px-4 py-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-purple-400 transition-colors"
                      >
                        <div className="text-center">
                          <Upload className="w-6 h-6 mx-auto mb-2 text-gray-400" />
                          <span className="text-sm text-gray-600">Clique para selecionar uma imagem</span>
                          <p className="text-xs text-gray-500 mt-1">PNG, JPG, GIF ou WEBP (máx. 2MB)</p>
                        </div>
                      </label>
                    </div>

                    {previewImage && (
                      <div className="relative inline-block">
                        <div className="w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden border-4 border-purple-600 ring-4 ring-purple-200">
                          <img
                            src={previewImage}
                            alt="Preview"
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <button
                          onClick={() => {
                            setPreviewImage(null);
                            if (fileInputRef.current) {
                              fileInputRef.current.value = '';
                            }
                          }}
                          className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 transition-colors"
                        >
                          <X className="w-4 h-4" />
                        </button>
                      </div>
                    )}

                    {(previewImage || fileInputRef.current?.files?.[0]) && (
                      <button
                        onClick={handleUploadAvatar}
                        disabled={uploading}
                        className="w-full sm:w-auto px-4 sm:px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:ring-4 focus:ring-purple-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm sm:text-base"
                      >
                        {uploading ? 'Enviando...' : 'Salvar Imagem'}
                      </button>
                    )}
                  </div>
                </div>

                {/* Avatares Pré-definidos */}
                <div>
                  <h3 className="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">
                    Ou escolha um avatar pré-definido
                  </h3>
                  <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-3 sm:gap-4">
                    {avatarOptions.map((avatar) => {
                      const isSelected = selectedAvatar === avatar && !previewImage;
                      return (
                        <button
                          key={avatar}
                          onClick={() => handleUpdateAvatar(avatar)}
                          disabled={loading}
                          className={`relative w-16 h-16 sm:w-20 sm:h-20 rounded-full overflow-hidden border-4 transition-all hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-300 ${isSelected
                            ? 'border-purple-600 ring-4 ring-purple-200'
                            : 'border-gray-200 hover:border-purple-400'
                            }`}
                        >
                          <img
                            src={`/Icones/${avatar}`}
                            alt={`Avatar ${avatar}`}
                            className="w-full h-full object-cover bg-gray-100"
                          />
                          {isSelected && (
                            <div className="absolute inset-0 bg-purple-600 bg-opacity-20 flex items-center justify-center">
                              <svg className="w-6 h-6 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                              </svg>
                            </div>
                          )}
                        </button>
                      );
                    })}
                  </div>
                </div>

                {/* Avatar Atual */}
                {(selectedAvatar || previewImage) && (
                  <div>
                    <h3 className="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">
                      Avatar Atual
                    </h3>
                    <div className="w-24 h-24 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-purple-600 ring-4 ring-purple-200">
                      <img
                        src={previewImage || getAvatarUrl(selectedAvatar)}
                        alt="Avatar atual"
                        className="w-full h-full object-cover"
                        onError={(e) => {
                          const target = e.target as HTMLImageElement;
                          target.src = '/Icones/account-avatar-profile-user-svgrepo-com.svg';
                        }}
                      />
                    </div>
                  </div>
                )}
              </div>
            )}

            {/* Segurança */}
            {activeTab === 'security' && (
              <form onSubmit={handleUpdatePassword} className="space-y-4 sm:space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Nova Senha
                  </label>
                  <input
                    type="password"
                    value={newPassword}
                    onChange={(e) => setNewPassword(e.target.value)}
                    className="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm sm:text-base"
                    required
                    minLength={8}
                    placeholder="Mínimo 8 caracteres"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Confirmar Nova Senha
                  </label>
                  <input
                    type="password"
                    value={newPasswordConfirmation}
                    onChange={(e) => setNewPasswordConfirmation(e.target.value)}
                    className="w-full px-3 sm:px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm sm:text-base"
                    required
                    minLength={8}
                    placeholder="Digite a senha novamente"
                  />
                </div>

                <div className="flex justify-end">
                  <button
                    type="submit"
                    disabled={loading}
                    className="w-full sm:w-auto px-4 sm:px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:ring-4 focus:ring-purple-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm sm:text-base"
                  >
                    {loading ? 'Atualizando...' : 'Atualizar Senha'}
                  </button>
                </div>
              </form>
            )}

            {/* Tokens de API */}
            {activeTab === 'api-tokens' && <ApiTokensTab />}
          </div>
        </div>
      </div>
    </Layout>
  );
}