import React, { useState } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { useNavigation } 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';

type CheckoutPaymentNavProp = StackNavigationProp<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 navigation = useNavigation<CheckoutPaymentNavProp>();
  const [selectedMethod, setSelectedMethod] = useState('upi');

  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>
        {PAYMENT_METHODS.map((method) => (
          <PaymentOption
            key={method.id}
            type={method.type}
            label={method.label}
            isSelected={selectedMethod === method.id}
            onSelect={() => setSelectedMethod(method.id)}
          />
        ))}
      </ScrollView>
      <View style={styles.footer}>
        <PrimaryButton title="Place Order" onPress={() => navigation.navigate('OrderConfirmedScreen', { orderId: 'ORD-' + Math.floor(Math.random() * 900000 + 100000) })} />
      </View>
    </View>
  );
};