import React, { useState } from 'react';
import {
  View,
  Text,
  FlatList,
  TextInput,
  TouchableOpacity,
} from 'react-native';
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/cartSlice';

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

  return (
    <View style={styles.container}>
      <Header title="Cart" onBack={() => {}} />
      <FlatList
        data={items}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.cartItem}>
            <View style={styles.itemInfo}>
              <Text style={styles.itemTitle}>{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>
        )}
        ListFooterComponent={
          <View style={styles.footer}>
            <View style={styles.couponRow}>
              <TextInput
                style={styles.couponInput}
                placeholder="Enter coupon code"
                placeholderTextColor={colors.placeholder}
                value={couponInput}
                onChangeText={setCouponInput}
              />
              <TouchableOpacity
                style={styles.applyButton}
                onPress={() => {
                  if (couponCode) {
                    dispatch(removeCoupon());
                    setCouponInput('');
                  } else if (couponInput) {
                    dispatch(applyCoupon(couponInput));
                  }
                }}
                activeOpacity={0.7}
              >
                <Text style={styles.applyButtonText}>
                  {couponCode ? 'Remove' : 'Apply'}
                </Text>
              </TouchableOpacity>
            </View>

            <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>
          </View>
        }
        contentContainerStyle={styles.list}
      />
      <View style={styles.bottomPanel}>
        <Text style={styles.bottomTotal}>Total: ₹{totals.total}</Text>
        <PrimaryButton
          title="View Bill"
          onPress={() => {}}
          style={{ flex: 1, marginLeft: 12 }}
        />
      </View>
    </View>
  );
};