import { StyleSheet, Platform } from 'react-native';
import { typography } from '@theme';

export const getStyles = (colors: any) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background,
    },
    list: {
      paddingBottom: 140,
    },

    // ---------- ETA banner ----------
    etaBanner: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
      marginHorizontal: 16,
      marginTop: 12,
      marginBottom: 4,
      borderRadius: 12,
      paddingVertical: 10,
      paddingHorizontal: 14,
    },
    etaIcon: {
      fontSize: 16,
      marginRight: 8,
    },
    etaText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.primary,
    },

    // ---------- Item cards ----------
    itemsCard: {
      backgroundColor: colors.cardBg,
      marginHorizontal: 16,
      marginTop: 14,
      borderRadius: 16,
      overflow: 'hidden',
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.05,
          shadowRadius: 8,
        },
        android: { elevation: 1 },
      }),
    },
    cartItem: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 14,
      paddingHorizontal: 14,
    },
    cartItemDivider: {
      borderBottomWidth: 1,
      borderBottomColor: colors.border,
    },
    itemThumb: {
      width: 52,
      height: 52,
      borderRadius: 10,
      backgroundColor: colors.inputBg,
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: 12,
    },
    itemThumbEmoji: {
      fontSize: 22,
    },
    itemInfo: {
      flex: 1,
      marginRight: 10,
    },
    itemTitle: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.semibold,
      color: colors.text,
      marginBottom: 4,
    },
    itemPrice: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: colors.textSecondary,
    },

    // ---------- Add more items ----------
    addMoreRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingVertical: 12,
      marginHorizontal: 16,
      marginTop: 4,
      borderWidth: 1.5,
      borderStyle: 'dashed',
      borderColor: colors.border,
      borderRadius: 12,
    },
    addMoreIcon: {
      fontSize: 14,
      marginRight: 6,
      color: colors.primary,
    },
    addMoreText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.primary,
    },

    // ---------- Footer ----------
    footer: {
      paddingHorizontal: 16,
      paddingTop: 20,
    },

    // Coupon
    sectionTitle: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      marginBottom: 10,
    },
    couponCard: {
      backgroundColor: colors.cardBg,
      borderRadius: 14,
      padding: 6,
      marginBottom: 20,
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.05,
          shadowRadius: 8,
        },
        android: { elevation: 1 },
      }),
    },
    couponRow: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    couponIcon: {
      fontSize: 18,
      marginLeft: 10,
      marginRight: 4,
    },
    couponInput: {
      flex: 1,
      height: 44,
      paddingHorizontal: 8,
      fontSize: typography.fontSize.md,
      color: colors.text,
    },
    applyButton: {
      paddingHorizontal: 18,
      paddingVertical: 11,
      borderRadius: 10,
      backgroundColor: colors.primary,
      marginRight: 4,
    },
    applyButtonText: {
      color: '#FFFFFF',
      fontWeight: typography.fontWeight.semibold,
      fontSize: typography.fontSize.sm,
    },
    couponAppliedRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingVertical: 10,
      paddingHorizontal: 12,
    },
    couponAppliedLeft: {
      flexDirection: 'row',
      alignItems: 'center',
      flex: 1,
    },
    couponCheckBadge: {
      width: 28,
      height: 28,
      borderRadius: 14,
      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: 10,
    },
    couponCheckIcon: {
      fontSize: 13,
    },
    couponAppliedCode: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    couponAppliedSub: {
      fontSize: typography.fontSize.xs,
      color: colors.primary,
      marginTop: 1,
    },
    couponRemoveText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: '#D32F2F',
    },

    // Bill details
    billCard: {
      backgroundColor: colors.cardBg,
      borderRadius: 14,
      padding: 16,
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.05,
          shadowRadius: 8,
        },
        android: { elevation: 1 },
      }),
    },
    feeRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: 10,
    },
    feeLabel: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
    },
    feeValue: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.medium,
      color: colors.text,
    },
    totalRow: {
      borderTopWidth: 1,
      borderTopColor: colors.border,
      paddingTop: 12,
      marginTop: 4,
      marginBottom: 0,
    },
    totalLabel: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    totalValue: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    savingsBanner: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
      borderRadius: 10,
      paddingVertical: 8,
      paddingHorizontal: 12,
      marginTop: 14,
    },
    savingsIcon: {
      fontSize: 14,
      marginRight: 6,
    },
    savingsText: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.semibold,
      color: colors.primary,
    },

    // ---------- Bottom panel ----------
    bottomPanel: {
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: 16,
      paddingTop: 12,
      paddingBottom: Platform.OS === 'ios' ? 28 : 16,
      backgroundColor: colors.cardBg,
      borderTopLeftRadius: 20,
      borderTopRightRadius: 20,
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: -4 },
          shadowOpacity: 0.08,
          shadowRadius: 12,
        },
        android: { elevation: 10 },
      }),
    },
    bottomTotalWrap: {},
    bottomTotalLabel: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
    },
    bottomTotal: {
      fontSize: typography.fontSize.lg,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    checkoutButton: {
      flex: 1,
      marginLeft: 16,
    },

    // ---------- Empty state ----------
    emptyWrap: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 32,
    },
    emptyEmoji: {
      fontSize: 56,
      marginBottom: 16,
    },
    emptyTitle: {
      fontSize: typography.fontSize.lg,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      marginBottom: 6,
    },
    emptySubtitle: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
      textAlign: 'center',
      marginBottom: 24,
    },
    emptyButton: {
      backgroundColor: colors.primary,
      paddingHorizontal: 28,
      paddingVertical: 14,
      borderRadius: 12,
    },
    emptyButtonText: {
      color: '#FFFFFF',
      fontWeight: typography.fontWeight.bold,
      fontSize: typography.fontSize.md,
    },
  });