import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { getStyles } from './checkoutAddressScreen.styles';
import { Header, StepProgress, PrimaryButton } from '@components';
import { useAppTheme } from '@theme';
import { AppStackParamList } from '../../../navigation/appStack';

type CheckoutAddressNavProp = StackNavigationProp<AppStackParamList, 'CheckoutAddressScreen'>;

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

export const CheckoutAddressScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const navigation = useNavigation<CheckoutAddressNavProp>();
  const [deliveryOption, setDeliveryOption] = useState<'standard' | 'express'>('standard');

  return (
    <View style={styles.container}>
      <Header title="Checkout" onBack={() => navigation.goBack()} />
      <StepProgress steps={CHECKOUT_STEPS} activeStep={0} />
      <ScrollView contentContainerStyle={styles.content}>
        <View style={styles.addressCard}>
          <Text style={styles.addressLabel}>Deliver to</Text>
          <Text style={styles.addressText}>
            Koramangala 4th Block, Bengaluru, 560034
          </Text>
          <Text style={styles.addressSubtext}>Home</Text>
        </View>

        <Text style={styles.sectionTitle}>Delivery Option</Text>
        <TouchableOpacity
          style={[
            styles.optionCard,
            deliveryOption === 'standard' && styles.optionCardSelected,
          ]}
          onPress={() => setDeliveryOption('standard')}
          activeOpacity={0.7}
        >
          <View style={styles.optionInfo}>
            <Text style={styles.optionTitle}>Standard Delivery</Text>
            <Text style={styles.optionSubtext}>Free • 25-30 min</Text>
          </View>
          <View style={[styles.radio, deliveryOption === 'standard' && styles.radioSelected]}>
            {deliveryOption === 'standard' && <View style={styles.radioInner} />}
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.optionCard,
            deliveryOption === 'express' && styles.optionCardSelected,
          ]}
          onPress={() => setDeliveryOption('express')}
          activeOpacity={0.7}
        >
          <View style={styles.optionInfo}>
            <Text style={styles.optionTitle}>Express Delivery</Text>
            <Text style={styles.optionSubtext}>₹40 • 10-15 min</Text>
          </View>
          <View style={[styles.radio, deliveryOption === 'express' && styles.radioSelected]}>
            {deliveryOption === 'express' && <View style={styles.radioInner} />}
          </View>
        </TouchableOpacity>
      </ScrollView>
      <View style={styles.footer}>
        <PrimaryButton title="Continue to Payment" onPress={() => navigation.navigate('CheckoutPaymentScreen')} />
      </View>
    </View>
  );
};