import React, { useState, useEffect } from 'react';
import { View, StyleSheet, ScrollView, Alert, KeyboardAvoidingView, Platform } from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RouteProp } from '@react-navigation/native';
import { RootStackParamList } from '../navigation/AppNavigator';
import { Header } from '../components/ui/Header';
import { Input } from '../components/ui/Input';
import { Button } from '../components/ui/Button';
import { Typography } from '../components/ui/Typography';
import { profileService, PaymentProfile } from '../services/profileService';
import { THEME } from '../constants/theme';
import { CreditCard } from 'lucide-react-native';
import { useSnackbar } from '../context/SnackbarContext';

interface AddEditPaymentProfileScreenProps {
  navigation: NativeStackNavigationProp<RootStackParamList, 'AddEditPaymentProfile'>;
  route: RouteProp<RootStackParamList, 'AddEditPaymentProfile'>;
}

export const AddEditPaymentProfileScreen: React.FC<AddEditPaymentProfileScreenProps> = ({ navigation, route }) => {
  const { profile } = route.params || {};
  const isEditing = !!profile;
  const [isSaving, setIsSaving] = useState(false);
  const insets = useSafeAreaInsets();
  const { showSnackbar } = useSnackbar();

  const [form, setForm] = useState<Partial<PaymentProfile>>({
    payment_method: profile?.payment_method || 'bank',
    account_holder_name: profile?.account_holder_name || '',
    account_number: profile?.account_number || '',
    ifsc_code: profile?.ifsc_code || '',
    bank_name: profile?.bank_name || '',
    branch_name: profile?.branch_name || '',
    account_type: profile?.account_type || 'savings',
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

  const handleChange = (field: keyof PaymentProfile, value: string) => {
    setForm(prev => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const validate = () => {
    const newErrors: Record<string, string> = {};
    if (!form.account_holder_name) newErrors.account_holder_name = 'Account holder name is required';
    if (!form.account_number) newErrors.account_number = 'Account number is required';
    if (!form.ifsc_code) newErrors.ifsc_code = 'IFSC code is required';
    if (!form.bank_name) newErrors.bank_name = 'Bank name is required';
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSave = async () => {
    if (!validate()) {
      Alert.alert('Validation Error', 'Please fill in all required fields.');
      return;
    }

    try {
      setIsSaving(true);
      const payload = form as PaymentProfile;
      
      if (isEditing && profile?.id) {
        payload.id = profile.id;
        await profileService.updatePaymentProfile(payload);
        showSnackbar('Payment profile updated successfully.');
      } else {
        await profileService.addPaymentProfile(payload);
        showSnackbar('Payment profile added successfully.');
      }
      navigation.goBack();
    } catch (error: any) {
      console.error('Error saving payment profile:', error);
      Alert.alert('Error', error?.response?.data?.message || 'Failed to save payment profile. Please try again.');
    } finally {
      setIsSaving(false);
    }
  };

  return (
    // @ts-ignore - TS types for SafeAreaView in this version incorrectly omit the style prop
    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
      <Header title={isEditing ? "Edit Bank Account" : "Add Bank Account"} showBack onBack={() => navigation.goBack()} />
      
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      >
        <ScrollView style={styles.content} contentContainerStyle={[styles.scrollContent, { paddingBottom: Math.max(insets.bottom + 40, 40) }]}>
          <View style={styles.iconContainer}>
            <View style={styles.iconWrapper}>
              <CreditCard color={THEME.colors.primary} size={32} />
            </View>
            <Typography variant="body" style={styles.headerSubtitle}>
              Add your bank details to receive payments.
            </Typography>
          </View>

              <View style={styles.formContainer}>
                <Input
                  label="Account Holder Name *"
                  placeholder="e.g. John Doe"
                  value={form.account_holder_name}
                  onChangeText={(val) => handleChange('account_holder_name', val)}
                  error={errors.account_holder_name}
                />
                <Input
                  label="Account Number *"
                  placeholder="e.g. 9876543210"
                  keyboardType="numeric"
                  value={form.account_number}
                  onChangeText={(val) => handleChange('account_number', val)}
                  error={errors.account_number}
                />
                <Input
                  label="IFSC Code *"
                  placeholder="e.g. SBIN0001234"
                  autoCapitalize="characters"
                  value={form.ifsc_code}
                  onChangeText={(val) => handleChange('ifsc_code', val)}
                  error={errors.ifsc_code}
                />
                <Input
                  label="Bank Name *"
                  placeholder="e.g. State Bank of India"
                  value={form.bank_name}
                  onChangeText={(val) => handleChange('bank_name', val)}
                  error={errors.bank_name}
                />
                <Input
                  label="Branch Name"
                  placeholder="e.g. Koramangala"
                  value={form.branch_name}
                  onChangeText={(val) => handleChange('branch_name', val)}
                />
                <Input
                  label="Account Type"
                  placeholder="e.g. savings or current"
                  value={form.account_type}
                  onChangeText={(val) => handleChange('account_type', val)}
                />
              </View>

              <Button
                title={isEditing ? "Update Profile" : "Save Profile"}
                onPress={handleSave}
                loading={isSaving}
                style={styles.saveButton}
              />
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: THEME.colors.background,
  },
  content: {
    flex: 1,
  },
  scrollContent: {
    padding: 24,
  },
  centerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 100,
  },
  iconContainer: {
    alignItems: 'center',
    marginBottom: 32,
  },
  iconWrapper: {
    width: 64,
    height: 64,
    borderRadius: 32,
    backgroundColor: THEME.colors.primaryLighter,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 16,
  },
  headerSubtitle: {
    color: THEME.colors.text.secondary,
    textAlign: 'center',
  },
  formContainer: {
    marginBottom: 32,
  },
  saveButton: {
    backgroundColor: THEME.colors.primary,
  },
});