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

const { width } = Dimensions.get('window');
const BANNER_WIDTH = width - 32;

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

    // ---------- Top bar ----------
    topBar: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: 16,
      paddingTop: 14,
      paddingBottom: 10,
    },
    addressBar: {
      flexDirection: 'row',
      alignItems: 'center',
      flex: 1,
    },
    pinBadge: {
      width: 34,
      height: 34,
      borderRadius: 17,
      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: 10,
    },
    pinEmoji: {
      fontSize: 16,
    },
    addressTextWrap: {
      flex: 1,
    },
    addressLabel: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      marginBottom: 1,
      letterSpacing: 0.2,
    },
    addressRow: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    addressText: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      maxWidth: width * 0.55,
    },
    dropdownArrow: {
      fontSize: 11,
      color: colors.textSecondary,
      marginLeft: 6,
    },
    avatarButton: {
      width: 40,
      height: 40,
      borderRadius: 20,
      backgroundColor: colors.surface ?? '#F2F2F2',
      alignItems: 'center',
      justifyContent: 'center',
      borderWidth: 1,
      borderColor: colors.border ?? '#ECECEC',
    },
    avatarEmoji: {
      fontSize: 18,
    },
    notifDot: {
      position: 'absolute',
      top: 6,
      right: 7,
      width: 8,
      height: 8,
      borderRadius: 4,
      backgroundColor: '#FF4D4F',
      borderWidth: 1.5,
      borderColor: colors.background,
    },

    // ---------- Search ----------
    searchWrap: {
      paddingHorizontal: 16,
      marginTop: 4,
      marginBottom: 18,
    },

    // ---------- Promo carousel ----------
    bannerListContent: {
      paddingLeft: 16,
      paddingRight: 4,
    },
    bannerCard: {
      width: BANNER_WIDTH,
      height: 140,
      borderRadius: 20,
      marginRight: 12,
      padding: 20,
      overflow: 'hidden',
      justifyContent: 'space-between',
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 6 },
          shadowOpacity: 0.15,
          shadowRadius: 12,
        },
        android: { elevation: 5 },
      }),
    },
    bannerDecoCircleLg: {
      position: 'absolute',
      width: 140,
      height: 140,
      borderRadius: 70,
      backgroundColor: 'rgba(255,255,255,0.10)',
      top: -50,
      right: -30,
    },
    bannerDecoCircleSm: {
      position: 'absolute',
      width: 80,
      height: 80,
      borderRadius: 40,
      backgroundColor: 'rgba(255,255,255,0.08)',
      bottom: -30,
      right: 40,
    },
    bannerEyebrow: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.semibold,
      color: 'rgba(255,255,255,0.85)',
      letterSpacing: 0.6,
      textTransform: 'uppercase',
    },
    bannerText: {
      fontSize: 26,
      fontWeight: typography.fontWeight.bold,
      color: '#FFFFFF',
      marginTop: 2,
    },
    bannerSubtext: {
      fontSize: typography.fontSize.sm,
      color: 'rgba(255,255,255,0.9)',
      marginTop: 2,
    },
    bannerCta: {
      alignSelf: 'flex-start',
      backgroundColor: 'rgba(255,255,255,0.95)',
      paddingHorizontal: 14,
      paddingVertical: 7,
      borderRadius: 20,
      marginTop: 4,
    },
    bannerCtaText: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.bold,
      color: '#111111',
    },
    dotsRow: {
      flexDirection: 'row',
      alignSelf: 'center',
      marginTop: 10,
      marginBottom: 4,
    },
    dot: {
      width: 6,
      height: 6,
      borderRadius: 3,
      backgroundColor: colors.border ?? '#E0E0E0',
      marginHorizontal: 3,
    },
    dotActive: {
      width: 16,
      backgroundColor: colors.primary ?? '#05824C',
    },

    // ---------- Categories ----------
    categorySection: {
      marginTop: 22,
    },
    chipRow: {
      paddingHorizontal: 16,
      paddingTop: 4,
    },
    categoryItem: {
      alignItems: 'center',
      marginRight: 18,
      width: 64,
    },
    categoryCircle: {
      width: 60,
      height: 60,
      borderRadius: 18,
      backgroundColor: colors.surface ?? '#F5F6F8',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: 6,
      borderWidth: 1.5,
      borderColor: 'transparent',
    },
    categoryCircleSelected: {
      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
      borderColor: colors.primary ?? '#05824C',
    },
    categoryIcon: {
      fontSize: 24,
    },
    categoryLabel: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      fontWeight: typography.fontWeight.medium,
      textAlign: 'center',
    },
    categoryLabelSelected: {
      color: colors.text,
      fontWeight: typography.fontWeight.bold,
    },

    // ---------- Section header ----------
    sectionHeaderRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: 16,
      marginTop: 26,
      marginBottom: 12,
    },
    sectionTitle: {
      fontSize: typography.fontSize.lg,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    sectionSubtitle: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      marginTop: 2,
    },
    seeAllText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.primary ?? '#05824C',
    },

    // ---------- Provider cards ----------
    providerList: {
      paddingHorizontal: 16,
    },
    providerCardWrap: {
      backgroundColor: colors.surface ?? '#FFFFFF',
      borderRadius: 18,
      marginBottom: 16,
      overflow: 'hidden',
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 3 },
          shadowOpacity: 0.06,
          shadowRadius: 10,
        },
        android: { elevation: 2 },
      }),
    },
    providerImageWrap: {
      width: '100%',
      height: 150,
      position: 'relative',
    },
    providerImage: {
      width: '100%',
      height: '100%',
    },
    discountRibbon: {
      position: 'absolute',
      top: 12,
      left: 0,
      backgroundColor: '#05824C',
      paddingVertical: 4,
      paddingHorizontal: 10,
      borderTopRightRadius: 8,
      borderBottomRightRadius: 8,
    },
    discountRibbonText: {
      color: '#FFFFFF',
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.bold,
    },
    favoriteButton: {
      position: 'absolute',
      top: 10,
      right: 10,
      width: 32,
      height: 32,
      borderRadius: 16,
      backgroundColor: 'rgba(255,255,255,0.92)',
      alignItems: 'center',
      justifyContent: 'center',
    },
    favoriteIcon: {
      fontSize: 15,
    },
    providerBody: {
      padding: 14,
    },
    providerTopRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'flex-start',
    },
    providerName: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      flex: 1,
      marginRight: 8,
    },
    ratingPill: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
      borderRadius: 8,
      paddingHorizontal: 6,
      paddingVertical: 3,
    },
    ratingStar: {
      fontSize: 11,
      marginRight: 3,
    },
    ratingText: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.bold,
      color: colors.primary ?? '#05824C',
    },
    metaRow: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: 8,
    },
    metaText: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
    },
    metaDivider: {
      width: 3,
      height: 3,
      borderRadius: 1.5,
      backgroundColor: colors.textSecondary,
      marginHorizontal: 8,
      opacity: 0.5,
    },
    tagPill: {
      alignSelf: 'flex-start',
      backgroundColor: colors.background,
      borderRadius: 6,
      paddingHorizontal: 8,
      paddingVertical: 3,
      marginTop: 10,
      borderWidth: 1,
      borderColor: colors.border ?? '#ECECEC',
    },
    tagPillText: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      fontWeight: typography.fontWeight.medium,
    },

    // ---------- Skeleton / empty ----------
    emptyWrap: {
      alignItems: 'center',
      paddingVertical: 40,
    },
    emptyEmoji: {
      fontSize: 36,
      marginBottom: 8,
    },
    emptyText: {
      color: colors.textSecondary,
      fontSize: typography.fontSize.sm,
    },
  });