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

const { width } = Dimensions.get('window');
const CARD_WIDTH = (width - 48) / 2; // 2-col grid with 16px side padding + 16px gap

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

    // ---------- Header ----------
    header: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 16,
      paddingTop: 14,
      paddingBottom: 12,
      backgroundColor: colors.background,
      borderBottomWidth: 1,
      borderBottomColor: colors.border ?? '#ECECEC',
    },
    backBtn: {
      width: 36,
      height: 36,
      borderRadius: 12,
      backgroundColor: colors.surface ?? '#F5F6F8',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: 12,
    },
    backBtnText: {
      fontSize: 18,
      color: colors.text,
    },
    headerTitle: {
      fontSize: typography.fontSize.lg,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      flex: 1,
    },
    headerCount: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
    },

    // ---------- Search Bar wrapper ----------
    searchWrap: {
      paddingHorizontal: 16,
      paddingVertical: 10,
    },

    // ---------- Category chips ----------
    chipsContainer: {
      borderBottomWidth: 1,
      borderBottomColor: colors.border ?? '#ECECEC',
    },
    chipsList: {
      paddingHorizontal: 16,
      paddingVertical: 10,
    },
    chip: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 14,
      paddingVertical: 8,
      borderRadius: 20,
      marginRight: 10,
      borderWidth: 1.5,
    },
    chipActive: {
      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
      borderColor: colors.primary ?? '#05824C',
    },
    chipInactive: {
      backgroundColor: colors.surface ?? '#F5F6F8',
      borderColor: 'transparent',
    },
    chipEmoji: {
      fontSize: 14,
      marginRight: 5,
    },
    chipLabel: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.medium,
    },
    chipLabelActive: {
      color: colors.primary ?? '#05824C',
      fontWeight: typography.fontWeight.bold,
    },
    chipLabelInactive: {
      color: colors.textSecondary,
    },

    // ---------- Section header ----------
    sectionHeader: {
      paddingHorizontal: 16,
      paddingTop: 16,
      paddingBottom: 8,
    },
    sectionTitle: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    sectionSubtitle: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      marginTop: 2,
    },

    // ---------- Product grid ----------
    gridContent: {
      paddingHorizontal: 16,
      paddingTop: 8,
      paddingBottom: 32,
    },
    row: {
      justifyContent: 'space-between',
    },

    // ---------- Skeleton cards ----------
    skeletonCard: {
      width: CARD_WIDTH,
      height: CARD_WIDTH + 80,
      backgroundColor: colors.surface ?? '#F0F0F0',
      borderRadius: 12,
      marginBottom: 16,
      overflow: 'hidden',
    },
    skeletonImageBlock: {
      width: '100%',
      height: CARD_WIDTH,
      backgroundColor: colors.border ?? '#E8E8E8',
    },
    skeletonTextBlock: {
      marginTop: 8,
      marginHorizontal: 10,
      height: 12,
      borderRadius: 6,
      backgroundColor: colors.border ?? '#E8E8E8',
    },
    skeletonTextBlockShort: {
      marginTop: 6,
      marginHorizontal: 10,
      width: '55%',
      height: 10,
      borderRadius: 5,
      backgroundColor: colors.border ?? '#E8E8E8',
    },

    // ---------- Empty state ----------
    empty: {
      alignItems: 'center',
      paddingTop: 80,
      paddingHorizontal: 40,
    },
    emptyIcon: {
      fontSize: 52,
      marginBottom: 14,
    },
    emptyTitle: {
      fontSize: typography.fontSize.lg,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      textAlign: 'center',
      marginBottom: 6,
    },
    emptyText: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
      textAlign: 'center',
      lineHeight: 20,
    },

    // ---------- Error state ----------
    errorWrap: {
      alignItems: 'center',
      paddingTop: 80,
      paddingHorizontal: 40,
    },
    errorIcon: {
      fontSize: 40,
      marginBottom: 12,
    },
    errorText: {
      fontSize: typography.fontSize.sm,
      color: colors.error ?? '#E53935',
      textAlign: 'center',
    },
  });