sg-delivery-customer/app/features/screens/cartScreen/cartScreen.tsx

import React, { useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { getStyles } from './cartScreen.styles';
import { Header, QuantitySelector, PrimaryButton } from '@components';
import { useAppTheme } from '@theme';
import { useAppDispatch, useAppSelector } from '../../../hooks/useAppDispatch';
import {
  removeItem,
  applyCoupon,
  removeCoupon,
  selectCartTotal,
} from '../../../store/commonreducers/cart';
import { AppStackParamList } from '../../../navigation/appStack';

type CartScreenNavProp = StackNavigationProp<AppStackParamList, 'CartScreen'>;

export const CartScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const dispatch = useAppDispatch();
  const navigation = useNavigation<CartScreenNavProp>();
  const { items, couponCode } = useAppSelector(state => state.cart);
  const totals = useAppSelector(selectCartTotal);
  const [couponInput, setCouponInput] = useState('');

  const handleCouponPress = () => {
    if (couponCode) {
      dispatch(removeCoupon());
      setCouponInput('');
    } else if (couponInput) {
      dispatch(applyCoupon(couponInput));
    }
  };

  if (items.length === 0) {
    return (
      <View style={styles.container}>
        <Header title="Cart" onBack={() => navigation.goBack()} />
        <View style={styles.emptyWrap}>
          <Text style={styles.emptyEmoji}>🛒</Text>
          <Text style={styles.emptyTitle}>Your cart is empty</Text>
          <Text style={styles.emptySubtitle}>
            Looks like you haven't added anything yet. Browse providers and find
            something you'll love.
          </Text>
          <TouchableOpacity
            style={styles.emptyButton}
            activeOpacity={0.85}
            onPress={() => navigation.goBack()}
          >
            <Text style={styles.emptyButtonText}>Start Ordering</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Header title="Cart" onBack={() => navigation.goBack()} />

      <ScrollView
        contentContainerStyle={styles.list}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.etaBanner}>
          <Text style={styles.etaIcon}>🛵</Text>
          <Text style={styles.etaText}>Delivery in 20–25 mins</Text>
        </View>

        <View style={styles.itemsCard}>
          {items.map((item, index) => (
            <View
              key={item.id}
              style={[
                styles.cartItem,
                index < items.length - 1 && styles.cartItemDivider,
              ]}
            >
              <View style={styles.itemThumb}>
                <Text style={styles.itemThumbEmoji}>🍕</Text>
              </View>
              <View style={styles.itemInfo}>
                <Text style={styles.itemTitle} numberOfLines={2}>
                  {item.item.title}
                </Text>
                <Text style={styles.itemPrice}>₹{item.item.price}</Text>
              </View>
              <QuantitySelector
                value={item.quantity}
                onIncrement={() => {}}
                onDecrement={() => dispatch(removeItem(item.item.id))}
              />
            </View>
          ))}
        </View>

        <TouchableOpacity
          style={styles.addMoreRow}
          activeOpacity={0.7}
          onPress={() => navigation.goBack()}
        >
          <Text style={styles.addMoreIcon}>+</Text>
          <Text style={styles.addMoreText}>Add more items</Text>
        </TouchableOpacity>

        <View style={styles.footer}>
          <Text style={styles.sectionTitle}>Apply Coupon</Text>
          <View style={styles.couponCard}>
            {couponCode ? (
              <View style={styles.couponAppliedRow}>
                <View style={styles.couponAppliedLeft}>
                  <View style={styles.couponCheckBadge}>
                    <Text style={styles.couponCheckIcon}>✓</Text>
                  </View>
                  <View>
                    <Text style={styles.couponAppliedCode}>{couponCode}</Text>
                    <Text style={styles.couponAppliedSub}>Coupon applied</Text>
                  </View>
                </View>
                <TouchableOpacity
                  onPress={handleCouponPress}
                  activeOpacity={0.7}
                >
                  <Text style={styles.couponRemoveText}>Remove</Text>
                </TouchableOpacity>
              </View>
            ) : (
              <View style={styles.couponRow}>
                <Text style={styles.couponIcon}>🏷️</Text>
                <TextInput
                  style={styles.couponInput}
                  placeholder="Enter coupon code"
                  placeholderTextColor={colors.placeholder}
                  value={couponInput}
                  onChangeText={setCouponInput}
                  autoCapitalize="characters"
                />
                <TouchableOpacity
                  style={styles.applyButton}
                  onPress={handleCouponPress}
                  activeOpacity={0.7}
                  disabled={!couponInput}
                >
                  <Text style={styles.applyButtonText}>Apply</Text>
                </TouchableOpacity>
              </View>
            )}
          </View>

          <Text style={styles.sectionTitle}>Bill Details</Text>
          <View style={styles.billCard}>
            <View style={styles.feeRow}>
              <Text style={styles.feeLabel}>Subtotal</Text>
              <Text style={styles.feeValue}>₹{totals.subtotal}</Text>
            </View>
            <View style={styles.feeRow}>
              <Text style={styles.feeLabel}>Delivery Fee</Text>
              <Text style={styles.feeValue}>₹{totals.deliveryFee}</Text>
            </View>
            <View style={styles.feeRow}>
              <Text style={styles.feeLabel}>Platform Fee</Text>
              <Text style={styles.feeValue}>₹{totals.platformFee}</Text>
            </View>
            {totals.discount > 0 && (
              <View style={styles.feeRow}>
                <Text style={[styles.feeLabel, { color: colors.primary }]}>
                  Discount
                </Text>
                <Text style={[styles.feeValue, { color: colors.primary }]}>
                  -₹{totals.discount}
                </Text>
              </View>
            )}
            <View style={[styles.feeRow, styles.totalRow]}>
              <Text style={styles.totalLabel}>Total</Text>
              <Text style={styles.totalValue}>₹{totals.total}</Text>
            </View>

            {totals.discount > 0 && (
              <View style={styles.savingsBanner}>
                <Text style={styles.savingsIcon}>🎉</Text>
                <Text style={styles.savingsText}>
                  You're saving ₹{totals.discount} on this order
                </Text>
              </View>
            )}
          </View>
        </View>
      </ScrollView>

      <View style={styles.bottomPanel}>
        <View style={styles.bottomTotalWrap}>
          <Text style={styles.bottomTotalLabel}>Total</Text>
          <Text style={styles.bottomTotal}>₹{totals.total}</Text>
        </View>
        <PrimaryButton
          title="Proceed to Checkout"
          onPress={() => navigation.navigate('CheckoutAddressScreen')}
          style={styles.checkoutButton}
        />
      </View>
    </View>
  );
};