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

// ─── Shared shadows ────────────────────────────────────────────────────────────
const cardShadow = Platform.select({
  ios: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.07,
    shadowRadius: 12,
  },
  android: { elevation: 3 },
});

const heavyShadow = Platform.select({
  ios: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -6 },
    shadowOpacity: 0.12,
    shadowRadius: 16,
  },
  android: { elevation: 16 },
});

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

    // ── Section wrapper ─────────────────────────────────────────────────────────
    section: {
      paddingHorizontal: 16,
      marginTop: 22,
    },
    sectionTitle: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      marginBottom: 10,
      letterSpacing: 0.1,
    },

    // ── ETA Banner ──────────────────────────────────────────────────────────────
    etaBanner: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      backgroundColor: colors.primaryMuted ?? '#E8F5EE',
      marginHorizontal: 16,
      marginTop: 14,
      borderRadius: 16,
      paddingVertical: 14,
      paddingHorizontal: 14,
      borderWidth: 1,
      borderColor: colors.primary + '22',
    },
    etaLeft: {
      flexDirection: 'row',
      alignItems: 'center',
      flex: 1,
    },
    etaIconWrap: {
      width: 40,
      height: 40,
      borderRadius: 20,
      backgroundColor: colors.primary + '18',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: 12,
    },
    etaIcon: {
      fontSize: 20,
    },
    etaText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: colors.primary,
    },
    etaSubtext: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      marginTop: 2,
    },
    etaBadge: {
      backgroundColor: colors.primary,
      borderRadius: 8,
      paddingHorizontal: 10,
      paddingVertical: 5,
    },
    etaBadgeText: {
      color: '#FFFFFF',
      fontSize: 10,
      fontWeight: typography.fontWeight.bold,
      letterSpacing: 1,
    },

    // ── Items Card ──────────────────────────────────────────────────────────────
    itemsCard: {
      backgroundColor: colors.cardBg,
      marginHorizontal: 16,
      marginTop: 16,
      borderRadius: 20,
      overflow: 'hidden',
      ...cardShadow,
    },
    itemsCardHeader: {
      paddingHorizontal: 16,
      paddingTop: 14,
      paddingBottom: 6,
      borderBottomWidth: 1,
      borderBottomColor: colors.border,
    },
    itemsCardHeaderText: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.bold,
      color: colors.textSecondary,
      textTransform: 'uppercase',
      letterSpacing: 0.8,
    },
    cartItem: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 14,
      paddingHorizontal: 16,
    },
    cartItemDivider: {
      borderBottomWidth: 1,
      borderBottomColor: colors.border,
    },

    // Veg indicator (left border dot)
    vegIndicator: {
      width: 14,
      height: 14,
      borderRadius: 3,
      borderWidth: 1.5,
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: 10,
      flexShrink: 0,
    },
    vegDot: {
      width: 6,
      height: 6,
      borderRadius: 3,
    },

    itemThumbWrap: {
      marginRight: 12,
    },
    itemThumb: {
      width: 60,
      height: 60,
      borderRadius: 12,
      backgroundColor: colors.inputBg,
    },
    itemInfo: {
      flex: 1,
      marginRight: 8,
    },
    itemTitle: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.semibold,
      color: colors.text,
      marginBottom: 6,
      lineHeight: 20,
    },
    itemPriceRow: {
      flexDirection: 'row',
      alignItems: 'center',
      flexWrap: 'wrap',
      gap: 6,
    },
    itemPrice: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    itemMrp: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      textDecorationLine: 'line-through',
    },
    discountBadge: {
      backgroundColor: colors.primary + '18',
      borderRadius: 4,
      paddingHorizontal: 5,
      paddingVertical: 2,
    },
    discountBadgeText: {
      fontSize: 10,
      fontWeight: typography.fontWeight.bold,
      color: colors.primary,
    },

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

    // ── Savings Pill ───────────────────────────────────────────────────────────
    savingsPill: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: '#FFF3E0',
      marginHorizontal: 16,
      marginTop: 16,
      borderRadius: 12,
      paddingVertical: 10,
      paddingHorizontal: 14,
    },
    savingsPillEmoji: {
      fontSize: 16,
      marginRight: 8,
    },
    savingsPillText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: '#E65100',
    },

    // ── Coupon Card ────────────────────────────────────────────────────────────
    couponCard: {
      backgroundColor: colors.cardBg,
      borderRadius: 16,
      overflow: 'hidden',
      ...cardShadow,
    },
    couponInputRow: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 14,
      paddingVertical: 4,
      borderBottomWidth: 1,
      borderBottomColor: colors.border,
    },
    couponIcon: {
      fontSize: 18,
      marginRight: 8,
    },
    couponInput: {
      flex: 1,
      height: 48,
      fontSize: typography.fontSize.sm,
      color: colors.text,
      fontWeight: typography.fontWeight.medium,
    },
    applyButton: {
      paddingHorizontal: 18,
      paddingVertical: 9,
      borderRadius: 10,
      backgroundColor: colors.primary,
    },
    applyButtonDisabled: {
      opacity: 0.35,
    },
    applyButtonText: {
      color: '#FFFFFF',
      fontWeight: typography.fontWeight.bold,
      fontSize: typography.fontSize.sm,
    },
    viewCouponsRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingVertical: 12,
      paddingHorizontal: 14,
    },
    viewCouponsLeft: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    viewCouponsTag: {
      fontSize: 15,
      marginRight: 8,
    },
    viewCouponsText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.text,
    },
    viewCouponsChevron: {
      fontSize: 20,
      color: colors.textSecondary,
      lineHeight: 22,
    },

    // Applied coupon
    couponAppliedRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingVertical: 14,
      paddingHorizontal: 14,
    },
    couponAppliedLeft: {
      flexDirection: 'row',
      alignItems: 'center',
      flex: 1,
    },
    couponCheckBadge: {
      width: 36,
      height: 36,
      borderRadius: 18,
      backgroundColor: colors.primary + '18',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: 12,
    },
    couponCheckIcon: {
      fontSize: 16,
    },
    couponAppliedCode: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    couponAppliedSub: {
      fontSize: typography.fontSize.xs,
      color: colors.primary,
      marginTop: 2,
      fontWeight: typography.fontWeight.medium,
    },
    couponRemoveBtn: {
      paddingHorizontal: 10,
      paddingVertical: 6,
      borderRadius: 8,
      borderWidth: 1,
      borderColor: '#D32F2F' + '44',
    },
    couponRemoveText: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.bold,
      color: '#D32F2F',
    },

    // ── Instructions Card ──────────────────────────────────────────────────────
    instructionsCard: {
      backgroundColor: colors.cardBg,
      borderRadius: 16,
      overflow: 'hidden',
      ...cardShadow,
    },
    instructionsRow: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 16,
      paddingHorizontal: 14,
    },
    instructionsIcon: {
      fontSize: 18,
      marginRight: 10,
    },
    instructionsPlaceholder: {
      flex: 1,
      fontSize: typography.fontSize.sm,
      color: colors.placeholder,
    },
    instructionsFilledText: {
      flex: 1,
      fontSize: typography.fontSize.sm,
      color: colors.text,
      fontWeight: typography.fontWeight.medium,
    },
    instructionsChevron: {
      fontSize: 22,
      color: colors.textSecondary,
      lineHeight: 24,
    },
    instructionsInput: {
      minHeight: 80,
      padding: 14,
      fontSize: typography.fontSize.sm,
      color: colors.text,
      textAlignVertical: 'top',
      lineHeight: 20,
    },

    // ── Tip Card ───────────────────────────────────────────────────────────────
    tipCard: {
      backgroundColor: colors.cardBg,
      borderRadius: 16,
      padding: 14,
      ...cardShadow,
    },
    tipSubtitle: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      marginBottom: 14,
      lineHeight: 18,
    },
    tipOptionsRow: {
      flexDirection: 'row',
      alignItems: 'center',
      flexWrap: 'wrap',
      gap: 10,
    },
    tipOption: {
      flexDirection: 'row',
      alignItems: 'center',
      borderWidth: 1.5,
      borderColor: colors.border,
      borderRadius: 12,
      paddingVertical: 9,
      paddingHorizontal: 16,
    },
    tipOptionSelected: {
      borderColor: colors.primary,
      backgroundColor: colors.primary + '14',
    },
    tipSelectedCheck: {
      fontSize: 11,
      color: colors.primary,
      fontWeight: typography.fontWeight.bold,
    },
    tipOptionText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.text,
    },
    tipOptionTextSelected: {
      color: colors.primary,
    },
    tipRemove: {
      marginTop: 12,
      alignSelf: 'flex-start',
      paddingVertical: 4,
    },
    tipRemoveText: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.semibold,
      color: '#D32F2F',
    },

    // ── Bill Card ──────────────────────────────────────────────────────────────
    billCard: {
      backgroundColor: colors.cardBg,
      borderRadius: 16,
      padding: 16,
      ...cardShadow,
    },
    feeRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: 12,
    },
    feeLabelRow: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    feeLabel: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
    },
    infoIcon: {
      fontSize: 12,
      color: colors.primary,
      fontWeight: typography.fontWeight.bold,
    },
    feeValue: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.medium,
      color: colors.text,
    },
    discountLabel: {
      color: colors.primary,
      fontWeight: typography.fontWeight.semibold,
    },
    discountValue: {
      color: colors.primary,
      fontWeight: typography.fontWeight.bold,
    },
    gstNote: {
      backgroundColor: colors.inputBg,
      borderRadius: 10,
      padding: 10,
      marginBottom: 12,
      marginTop: -4,
    },
    gstNoteText: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      lineHeight: 17,
    },
    billDivider: {
      height: 1,
      backgroundColor: colors.border,
      marginVertical: 8,
    },
    totalRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginTop: 4,
    },
    totalLabel: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    totalSaved: {
      fontSize: typography.fontSize.xs,
      color: colors.primary,
      marginTop: 2,
      fontWeight: typography.fontWeight.semibold,
    },
    totalValue: {
      fontSize: 20,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },

    // ── Policy Card ────────────────────────────────────────────────────────────
    policyCard: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      marginHorizontal: 16,
      marginTop: 20,
      marginBottom: 8,
      backgroundColor: colors.inputBg,
      borderRadius: 12,
      paddingVertical: 12,
      paddingHorizontal: 14,
    },
    policyIcon: {
      fontSize: 14,
      color: colors.textSecondary,
      marginRight: 10,
      marginTop: 1,
    },
    policyText: {
      flex: 1,
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      lineHeight: 18,
    },

    // ── Bottom Panel ───────────────────────────────────────────────────────────
    bottomPanel: {
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: 16,
      paddingTop: 14,
      paddingBottom: Platform.OS === 'ios' ? 30 : 16,
      backgroundColor: colors.cardBg,
      borderTopLeftRadius: 24,
      borderTopRightRadius: 24,
      ...heavyShadow,
    },
    bottomTotalWrap: {
      flex: 1,
    },
    bottomTotalLabel: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      letterSpacing: 0.3,
      marginBottom: 2,
    },
    bottomTotalRow: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
    },
    bottomTotal: {
      fontSize: typography.fontSize.lg,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    bottomSavedBadge: {
      backgroundColor: colors.primary + '18',
      borderRadius: 6,
      paddingHorizontal: 7,
      paddingVertical: 3,
    },
    bottomSavedText: {
      fontSize: 10,
      fontWeight: typography.fontWeight.bold,
      color: colors.primary,
    },
    checkoutButton: {
      flex: 1,
      marginLeft: 14,
    },

    // ── Empty State ────────────────────────────────────────────────────────────
    emptyWrap: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 36,
    },
    emptyIllustration: {
      width: 110,
      height: 110,
      borderRadius: 55,
      backgroundColor: colors.inputBg,
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: 24,
      ...cardShadow,
    },
    emptyEmoji: {
      fontSize: 52,
    },
    emptyTitle: {
      fontSize: typography.fontSize.xl,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      marginBottom: 10,
    },
    emptySubtitle: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
      textAlign: 'center',
      lineHeight: 22,
      marginBottom: 30,
    },
    emptyButton: {
      backgroundColor: colors.primary,
      paddingHorizontal: 36,
      paddingVertical: 15,
      borderRadius: 14,
      ...cardShadow,
    },
    emptyButtonText: {
      color: '#FFFFFF',
      fontWeight: typography.fontWeight.bold,
      fontSize: typography.fontSize.md,
      letterSpacing: 0.3,
    },

    // ── Skeleton ───────────────────────────────────────────────────────────────
    skeletonCard: {
      backgroundColor: colors.cardBg,
      marginHorizontal: 16,
      marginTop: 14,
      borderRadius: 20,
      padding: 16,
      ...cardShadow,
    },
    skeletonItemRow: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 16,
    },
  });