import React, { useEffect, useState } from 'react';
import { View, Text, ScrollView, Alert } from 'react-native';
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { getStyles } from './checkoutPaymentScreen.styles';
import {
  Header,
  StepProgress,
  PaymentOption,
  PrimaryButton,
} from '@components';
import { useAppTheme } from '@theme';
import { AppStackParamList } from '../../../navigation/appStack';
import { RootState, useAppDispatch, useAppSelector } from '@store';
import { getAllPaymentMethodsThunk, placeOrderThunk } from './thunk';
import { useSelector } from 'react-redux';
import uuid from 'react-native-uuid';
import { v4 } from 'react-native-uuid/dist/v4';

type CheckoutPaymentNavProp = StackNavigationProp<
  AppStackParamList,
  'CheckoutPaymentScreen'
>;
type CheckoutPaymentRouteProp = RouteProp<
  AppStackParamList,
  'CheckoutPaymentScreen'
>;

const CHECKOUT_STEPS = [
  { key: 'address', label: 'Address' },
  { key: 'payment', label: 'Payment' },
  { key: 'confirm', label: 'Confirm' },
];

const PAYMENT_METHODS = [
  { id: 'upi', type: 'UPI' as const, label: 'UPI (Google Pay, PhonePe)' },
  { id: 'card', type: 'Card' as const, label: 'Credit / Debit Card' },
  { id: 'wallet', type: 'Wallet' as const, label: 'Wallet' },
  { id: 'cod', type: 'COD' as const, label: 'Cash on Delivery' },
];

export const CheckoutPaymentScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const route = useRoute<CheckoutPaymentRouteProp>();
  const navigation = useNavigation<CheckoutPaymentNavProp>();
  const dispatch = useAppDispatch();
  const [selectedMethod, setSelectedMethod] = useState('upi');
  const selectedAddressId = route.params?.selectedAddressId;
  // console.log(selectedAddressId);
  const uuid = v4();
  // console.log(uuid);
  const {
    paymentMethods,
    placeOrderSuccess,
    placeOrderLoading,
    placeOrderError,
  } = useAppSelector((state: RootState) => state.paymentMethods);

  useEffect(() => {
    dispatch(getAllPaymentMethodsThunk());
  }, [dispatch]);

  useEffect(() => {
    if (placeOrderSuccess) {
      navigation.navigate('OrderConfirmedScreen', {
        orderId: 'ORD-' + Math.floor(Math.random() * 900000 + 100000),
      });
    } else if (placeOrderError) {
      Alert.alert('Error', placeOrderError);
    }
  }, [placeOrderSuccess, placeOrderError]);

  // console.log('paymentMethods', paymentMethods);

  const selectedPaymentMethod = paymentMethods.find(
    item => item.id === selectedMethod,
  );

  const methodName = selectedPaymentMethod?.code;
  // console.log('methodName', methodName);

  // useEffect(() => {

  // },);

  const handlePlaceOrder = () => {
    dispatch(
      placeOrderThunk({
        addressId: selectedAddressId || '',
        paymentMethodId: selectedMethod,
        paymentMethod: methodName || '',
        orderType: 'DELIVERY',
        idempotencyKey: `idemp-key-${uuid}`,
      }),
    );
  };

  return (
    <View style={styles.container}>
      <Header title="Checkout" onBack={() => navigation.goBack()} />
      <StepProgress steps={CHECKOUT_STEPS} activeStep={1} />
      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.sectionTitle}>Select Payment Method</Text>
        {paymentMethods?.map(method => (
          <PaymentOption
            key={method.id}
            label={method.code}
            icon={method.iconUrl}
            isSelected={selectedMethod === method.id}
            onSelect={() => setSelectedMethod(method.id)}
          />
        ))}
      </ScrollView>
      <View style={styles.footer}>
        <PrimaryButton
          title={placeOrderLoading ? 'Placing...' : 'Place Order'}
          onPress={handlePlaceOrder}
          disabled={placeOrderLoading}
        />
      </View>
    </View>
  );
};