import React, { useState, useEffect } from 'react';
import { 
  View, 
  Text, 
  StyleSheet, 
  ScrollView, 
  TouchableOpacity, 
  ActivityIndicator, 
  Alert, 
  Platform,
  Dimensions,
  Image
} from 'react-native';
import { useLocalSearchParams, useRouter, Stack } from 'expo-router';
import { Colors } from '@/constants/theme';
import api from '@/services/api';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import * as ImagePicker from 'expo-image-picker';
import Animated, { FadeInDown, FadeInUp } from 'react-native-reanimated';
import GlassCard from '@/components/common/GlassCard';

const { width } = Dimensions.get('window');

export default function PaymentScreen() {
  const { id, amount } = useLocalSearchParams();
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [paymentInfo, setPaymentInfo] = useState<any>(null);
  const [selectedMethod, setSelectedMethod] = useState<'bank_transfer' | 'cash' | 'wallet' | null>(null);
  const [receipt, setReceipt] = useState<any>(null);

  useEffect(() => {
    const fetchPaymentDetails = async () => {
      try {
        const response = await api.post(`/user/show-payment/${id}`);
        setPaymentInfo(response.data);
      } catch (error) {
        console.error('Error fetching payment details:', error);
      }
    };
    if (id) fetchPaymentDetails();
  }, [id]);

  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 0.7,
    });

    if (!result.canceled) {
      setReceipt(result.assets[0]);
    }
  };

  const handleProcessPayment = async () => {
    if (!selectedMethod) return;

    setLoading(true);
    try {
      const formData = new FormData();
      formData.append('booking_id', id as string);
      formData.append('payment_method', selectedMethod);

      if (selectedMethod === 'bank_transfer' && receipt) {
        const uri = receipt.uri;
        const filename = uri.split('/').pop();
        const match = /\.(\w+)$/.exec(filename || '');
        const type = match ? `image/${match[1]}` : `image`;
        
        formData.append('payment_proof', {
          uri: Platform.OS === 'ios' ? uri.replace('file://', '') : uri,
          name: filename || 'receipt.jpg',
          type,
        } as any);
      }

      const response = await api.post('/user/process-payment', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      if (response.data) {
        Alert.alert('Sucesso', 'Informações de pagamento enviadas. Aguarde a confirmação do gestor.');
        router.replace('/(drawer)/(tabs)/bookings');
      }
    } catch (error: any) {
      console.error('Payment Process Error:', error.response?.data || error.message);
      Alert.alert('Erro', 'Falha ao processar o pagamento.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      <Stack.Screen options={{ title: 'Efectuar Pagamento' }} />
      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
        
        <Animated.View entering={FadeInDown.duration(400)} style={styles.summaryCard}>
          <Text style={styles.summaryLabel}>Total a Pagar</Text>
          <Text style={styles.summaryValue}>{amount}</Text>
        </Animated.View>

        <Text style={styles.sectionTitle}>Escolha o Método</Text>

        <View style={styles.methodsGrid}>
          {[
            { id: 'bank_transfer', label: 'Transferência', icon: 'business-outline' },
            { id: 'cash', label: 'Numerário', icon: 'cash-outline' },
            { id: 'wallet', label: 'Carteira', icon: 'wallet-outline' },
          ].map((method: any) => (
            <TouchableOpacity 
              key={method.id}
              style={[styles.methodCard, selectedMethod === method.id && styles.activeMethodCard]}
              onPress={() => setSelectedMethod(method.id)}
            >
              <View style={[styles.iconBox, selectedMethod === method.id && styles.activeIconBox]}>
                <Ionicons name={method.icon} size={24} color={selectedMethod === method.id ? '#FFF' : Colors.light.primary} />
              </View>
              <Text style={[styles.methodLabel, selectedMethod === method.id && styles.activeMethodLabel]}>
                {method.label}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

        {selectedMethod === 'bank_transfer' && (
          <Animated.View entering={FadeInUp} style={styles.detailsContainer}>
            <GlassCard style={styles.bankCard}>
              <Text style={styles.bankTitle}>Dados para Transferência</Text>
              <View style={styles.bankDetailRow}>
                <Text style={styles.bankLabel}>Banco:</Text>
                <Text style={styles.bankValue}>{paymentInfo?.bank_name || 'BAI'}</Text>
              </View>
              <View style={styles.bankDetailRow}>
                <Text style={styles.bankLabel}>IBAN:</Text>
                <Text style={styles.bankValue}>{paymentInfo?.iban || 'AO06 0040 0000 1234 5678 1234 5'}</Text>
              </View>
              <View style={styles.bankDetailRow}>
                <Text style={styles.bankLabel}>Beneficiário:</Text>
                <Text style={styles.bankValue}>E-Concerto Lda</Text>
              </View>
            </GlassCard>

            <TouchableOpacity style={styles.uploadBox} onPress={pickImage}>
              {receipt ? (
                <View style={styles.previewContainer}>
                  <Image source={{ uri: receipt.uri }} style={styles.previewImage} />
                  <View style={styles.overlay}>
                    <Ionicons name="camera" size={30} color="#FFF" />
                    <Text style={styles.overlayText}>Trocar Comprovativo</Text>
                  </View>
                </View>
              ) : (
                <>
                  <Ionicons name="cloud-upload-outline" size={40} color={Colors.light.primary} />
                  <Text style={styles.uploadText}>Enviar Comprovativo</Text>
                  <Text style={styles.uploadSub}>Toque para selecionar da galeria</Text>
                </>
              )}
            </TouchableOpacity>
          </Animated.View>
        )}

        {selectedMethod === 'cash' && (
          <Animated.View entering={FadeInUp} style={styles.detailsContainer}>
            <GlassCard style={styles.infoCard}>
              <Ionicons name="information-circle-outline" size={24} color={Colors.light.primary} />
              <Text style={styles.infoText}>
                Ao selecionar Numerário, deverá entregar o valor directamente ao técnico no momento do serviço. 
                Clique abaixo para confirmar esta intenção.
              </Text>
            </GlassCard>
          </Animated.View>
        )}

        {selectedMethod === 'wallet' && (
          <Animated.View entering={FadeInUp} style={styles.detailsContainer}>
            <GlassCard style={styles.infoCard}>
              <Ionicons name="wallet-outline" size={24} color={Colors.light.primary} />
              <Text style={styles.infoText}>
                O valor será deduzido do seu saldo actual. Certifique-se que tem saldo suficiente.
              </Text>
            </GlassCard>
          </Animated.View>
        )}
      </ScrollView>

      <View style={styles.footer}>
        <TouchableOpacity 
          style={[styles.payButton, !selectedMethod && { opacity: 0.5 }]} 
          onPress={handleProcessPayment}
          disabled={loading || !selectedMethod}
        >
          <LinearGradient
            colors={Colors.light.gradients.primary as [string, string]}
            style={styles.gradientButton}
          >
            {loading ? <ActivityIndicator color="#FFF" /> : (
              <>
                <Text style={styles.payButtonText}>Confirmar Pagamento</Text>
                <Ionicons name="checkmark-circle-outline" size={20} color="#FFF" />
              </>
            )}
          </LinearGradient>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#F8F9FA' },
  scrollContent: { padding: 20, paddingBottom: 120 },
  summaryCard: { 
    height: 120, 
    borderRadius: 24, 
    backgroundColor: Colors.light.primary, 
    justifyContent: 'center', 
    alignItems: 'center',
    marginBottom: 30,
    elevation: 8,
    shadowColor: Colors.light.primary,
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 10,
  },
  summaryLabel: { color: 'rgba(255,255,255,0.8)', fontSize: 14, fontWeight: '600', marginBottom: 4 },
  summaryValue: { color: '#FFF', fontSize: 36, fontWeight: '900' },
  sectionTitle: { fontSize: 18, fontWeight: '800', color: '#333', marginBottom: 16 },
  methodsGrid: { flexDirection: 'row', gap: 12, marginBottom: 24 },
  methodCard: { 
    flex: 1, 
    height: 100, 
    backgroundColor: '#FFF', 
    borderRadius: 20, 
    justifyContent: 'center', 
    alignItems: 'center',
    borderWidth: 1.5,
    borderColor: '#EEE',
  },
  activeMethodCard: { borderColor: Colors.light.primary, backgroundColor: Colors.light.primary + '05' },
  iconBox: { width: 44, height: 44, borderRadius: 14, backgroundColor: '#F0F7FF', justifyContent: 'center', alignItems: 'center', marginBottom: 8 },
  activeIconBox: { backgroundColor: Colors.light.primary },
  methodLabel: { fontSize: 12, fontWeight: '700', color: '#666' },
  activeMethodLabel: { color: Colors.light.primary },
  detailsContainer: { marginTop: 10 },
  bankCard: { padding: 20, borderRadius: 20, marginBottom: 20, backgroundColor: '#FFF' },
  bankTitle: { fontSize: 16, fontWeight: '800', color: '#333', marginBottom: 16 },
  bankDetailRow: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10 },
  bankLabel: { fontSize: 13, color: '#888', fontWeight: '500' },
  bankValue: { fontSize: 13, color: '#333', fontWeight: '700' },
  uploadBox: { 
    height: 200, 
    borderRadius: 20, 
    borderWidth: 2, 
    borderStyle: 'dashed', 
    borderColor: Colors.light.primary + '40', 
    backgroundColor: '#FFF',
    justifyContent: 'center', 
    alignItems: 'center',
    overflow: 'hidden'
  },
  uploadText: { fontSize: 16, fontWeight: '800', color: Colors.light.primary, marginTop: 12 },
  uploadSub: { fontSize: 12, color: '#888', marginTop: 4 },
  previewContainer: { width: '100%', height: '100%' },
  previewImage: { width: '100%', height: '100%' },
  overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.3)', justifyContent: 'center', alignItems: 'center' },
  overlayText: { color: '#FFF', fontSize: 14, fontWeight: '700', marginTop: 8 },
  infoCard: { padding: 20, borderRadius: 20, flexDirection: 'row', gap: 15, alignItems: 'center', backgroundColor: '#FFF' },
  infoText: { flex: 1, fontSize: 14, color: '#555', lineHeight: 20 },
  footer: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 20, paddingBottom: Platform.OS === 'ios' ? 40 : 20, backgroundColor: '#FFF', borderTopWidth: 1, borderTopColor: '#EEE' },
  payButton: { height: 56, borderRadius: 18, overflow: 'hidden' },
  gradientButton: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 10 },
  payButtonText: { color: '#FFF', fontSize: 16, fontWeight: '800' }
});