import React, { useState, useRef } from 'react';

import {

  View,

  Image,

  TouchableOpacity,

  Text,

  Alert,

  ActivityIndicator,

  Animated,

  StyleSheet,

} from 'react-native';

import * as ImagePicker from 'expo-image-picker';

import { Ionicons } from '@expo/vector-icons';

import { apiClient } from '@/lib/api';

import { Colors } from '@/constants/theme';

interface AvatarUploadProps {

  currentAvatar?: string | null;

  onUploadSuccess?: () => void;

  onRemoveSuccess?: () => void;

}

const AvatarUpload: React.FC<AvatarUploadProps> = ({

  currentAvatar = null,

  onUploadSuccess,

  onRemoveSuccess,

}) => {

  const [preview, setPreview] = useState<string | null>(currentAvatar);

  const [isLoading, setIsLoading] = useState<boolean>(false);

  const scaleAnim = useRef(new Animated.Value(1)).current;

  const handleImagePick = async (useCamera: boolean = false): Promise<void> => {

    try {

      const result = useCamera

        ? await ImagePicker.launchCameraAsync({

            allowsEditing: true,

            aspect: [1, 1],

            quality: 0.8,

          })

        : await ImagePicker.launchImageLibraryAsync({

            allowsEditing: true,

            aspect: [1, 1],

            quality: 0.8,

          });

      if (!result.canceled && result.assets && result.assets.length > 0) {

        const asset = result.assets[0];

        setPreview(asset.uri);

        await uploadAvatar(asset.fileName, asset.uri, asset.mimeType);

      }

    } catch (error) {

      console.error('Image picker error:', error);

      Alert.alert('Error', 'Failed to select image');

    }

  };

  const uploadAvatar = async (fileName: string, imageUri: string, mimeType: string): Promise<void> => {

    setIsLoading(true);

    try {

      const formData = new FormData();

      formData.append('avatar', {

        uri: imageUri,

        type: mimeType,

        name: fileName,

      } as any);

      const response = await apiClient.avatar(formData);

      onUploadSuccess?.(response.user);

    } catch (error) {

      console.error('Upload error:', error);

      Alert.alert('Error', error instanceof Error ? error.message : 'Upload failed');

      setPreview(currentAvatar);

    } finally {

      setIsLoading(false);

    }

  };

  const handleRemove = (): void => {

    Alert.alert('Remover sua foto', 'Tem certeza que quer remover sua foto de perfil?', [

      {

        text: 'Cancelar',

        onPress: () => {},

        style: 'cancel',

      },

      {

        text: 'Remover',

        onPress: async () => {

          setIsLoading(true);

          try {

            const response = await apiClient.removeAvatar();

            setPreview(null);

            onRemoveSuccess?.(response.user);

          } catch (error) {

            console.error('Remove error:', error);

            Alert.alert('Error', error instanceof Error ? error.message : 'Failed to remove avatar');

          } finally {

            setIsLoading(false);

          }

        },

        style: 'destructive',

      },

    ]);

  };

  const handlePressIn = (): void => {

    Animated.spring(scaleAnim, {

      toValue: 0.95,

      useNativeDriver: true,

    }).start();

  };

  const handlePressOut = (): void => {

    Animated.spring(scaleAnim, {

      toValue: 1,

      useNativeDriver: true,

    }).start();

  };

  const showImageOptions = (): void => {

    Alert.alert('Selecionar uma foto de perfil', 'Escolha de onde você quer:', [

      {

        text: 'Câmera',

        onPress: () => handleImagePick(true),

      },

      {

        text: 'Galeria',

        onPress: () => handleImagePick(false),

      },

      {

        text: 'Cancelar',

        style: 'cancel',

      },

    ]);

  };

  return (

    <View style={styles.container}>

      <View style={styles.avatarSection}>

        {preview ? (

          <View style={styles.avatarWrapper}>

            <Image source={{ uri: preview }} style={styles.avatarImage} />

            {isLoading && (

              <View style={styles.loadingOverlay}>

                <ActivityIndicator color="#fff" size="large" />

              </View>

            )}

          </View>

        ) : (

          <TouchableOpacity

            style={styles.avatarPlaceholder}

            onPress={showImageOptions}

            activeOpacity={0.7}

            disabled={isLoading}

          >

            <Ionicons name="cloud-upload-outline" size={32} color="#666" />

            <Text style={styles.placeholderText}>Adicione uma foto</Text>

          </TouchableOpacity>

        )}

      </View>

      <View style={styles.avatarActions}>

        <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>

          <TouchableOpacity

            style={[styles.actionBtn, styles.editBtn]}

            onPress={showImageOptions}

            onPressIn={handlePressIn}

            onPressOut={handlePressOut}

            disabled={isLoading}

            activeOpacity={0.8}

          >

            {isLoading ? (

              <ActivityIndicator color="#fff" size="small" />

            ) : (

              <Text style={styles.editBtnText}>ALTERAR FOTO</Text>

            )}

          </TouchableOpacity>

        </Animated.View>

        {preview && (

          <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>

            <TouchableOpacity

              style={[styles.actionBtn, styles.removeBtn]}

              onPress={handleRemove}

              onPressIn={handlePressIn}

              onPressOut={handlePressOut}

              disabled={isLoading}

              activeOpacity={0.8}

            >

              <Text style={styles.removeBtnText}>REMOVER FOTO</Text>

            </TouchableOpacity>

          </Animated.View>

        )}

      </View>

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    alignItems: 'center',

    gap: 32,

    paddingVertical: 32,

  },

  avatarSection: {

    position: 'relative',

    width: 160,

    height: 160,

  },

  avatarWrapper: {

    width: '100%',

    height: '100%',

    borderRadius: 80,

    overflow: 'hidden',

    backgroundColor: '#f0f0f0',

    shadowColor: '#000',

    shadowOffset: { width: 0, height: 8 },

    shadowOpacity: 0.15,

    shadowRadius: 12,

    elevation: 8,

  },

  avatarImage: {

    width: '100%',

    height: '100%',

    resizeMode: 'cover',

  },

  loadingOverlay: {

    position: 'absolute',

    top: 0,

    left: 0,

    right: 0,

    bottom: 0,

    backgroundColor: 'rgba(0, 0, 0, 0.4)',

    alignItems: 'center',

    justifyContent: 'center',

  },

  avatarPlaceholder: {

    width: '100%',

    height: '100%',

    borderRadius: 80,

    borderWidth: 2,

    borderStyle: 'dashed',

    borderColor: '#d0d0d0',

    display: 'flex',

    alignItems: 'center',

    justifyContent: 'center',

    backgroundColor: '#fafafa',

  },

  placeholderText: {

    marginTop: 8,

    fontSize: 12,

    fontWeight: '500',

    color: '#666',

    textAlign: 'center',

  },

  avatarActions: {

    display: 'flex',

    flexDirection: 'row',

    gap: 16,

    width: '100%',

    maxWidth: 320,

    justifyContent: 'center',

    flexWrap: 'wrap',

  },

  actionBtn: {

    paddingVertical: 12,

    paddingHorizontal: 24,

    borderRadius: 6,

    justifyContent: 'center',

    alignItems: 'center',

    minWidth: 140,

  },

  editBtn: {

  },

  editBtnText: {

    fontSize: 12,

    fontWeight: '600',

    color: Colors.light.textSecondary,

    letterSpacing: 0.5,

    textTransform: 'uppercase',

  },

  removeBtn: {

  },

  removeBtnText: {

    fontSize: 12,

    fontWeight: '600',

    color: Colors.light.danger,

    letterSpacing: 0.5,

    textTransform: 'uppercase',

  },

});

export default AvatarUpload;