import { StyleSheet } from 'react-native';
import { ThemeColors, colors as globalColors } from '../../theme';

export const getStyles = (colors: ThemeColors, isDark: boolean) =>
  StyleSheet.create({
    card: {
      backgroundColor: colors.card,
      borderRadius: 20,
      marginBottom: 20,
      shadowColor: isDark ? '#000000' : '#0F172A',
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: isDark ? 0.25 : 0.08,
      shadowRadius: 12,
      elevation: 4,
      borderWidth: 1,
      borderColor: colors.border,
    },

    /* ── Header ── */
    header: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      paddingHorizontal: 16,
      paddingTop: 16,
      paddingBottom: 14,
    },
    titleRow: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 10,
    },
    titleIconBadge: {
      width: 34,
      height: 34,
      borderRadius: 10,
      backgroundColor: globalColors.primary,
      justifyContent: 'center',
      alignItems: 'center',
      shadowColor: globalColors.primary,
      shadowOffset: { width: 0, height: 3 },
      shadowOpacity: 0.4,
      shadowRadius: 6,
      elevation: 4,
    },
    title: {
      fontSize: 15,
      fontWeight: '700',
      color: colors.text,
      letterSpacing: 0.1,
    },
    subtitle: {
      fontSize: 11,
      fontWeight: '500',
      color: colors.textMuted,
      marginTop: 1,
      letterSpacing: 0.2,
      textTransform: 'lowercase',
    },

    /* ── Dropdown Pill ── */
    dropdown: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 5,
      paddingHorizontal: 11,
      paddingVertical: 7,
      borderRadius: 20,
      borderWidth: 1.5,
      borderColor: isDark
        ? `${globalColors.primary}55`
        : `${globalColors.primary}33`,
      backgroundColor: isDark
        ? `${globalColors.primary}18`
        : `${globalColors.primary}0D`,
    },
    dropdownDot: {
      width: 6,
      height: 6,
      borderRadius: 3,
      backgroundColor: globalColors.primary,
    },
    dropdownText: {
      fontSize: 12,
      fontWeight: '700',
      color: globalColors.primary,
      letterSpacing: 0.2,
    },

    /* ── Divider ── */
    divider: {
      height: 1,
      backgroundColor: colors.border,
      marginHorizontal: 16,
      marginBottom: 16,
      opacity: isDark ? 0.5 : 0.8,
    },

    /* ── Body ── */
    body: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: 16,
      paddingBottom: 16,
    },
    chartContainer: {
      width: 140,
      height: 140,
      justifyContent: 'center',
      alignItems: 'center',
      position: 'relative',
    },
    loaderContainer: {
      flex: 1,
      height: 140,
      justifyContent: 'center',
      alignItems: 'center',
    },
    centerLabelContainer: {
      justifyContent: 'center',
      alignItems: 'center',
    },
    centerNumber: {
      fontSize: 24,
      fontWeight: '800',
      color: colors.text,
      lineHeight: 28,
    },
    centerText: {
      fontSize: 12,
      color: colors.textMuted,
      fontWeight: '600',
      marginTop: 2,
    },

    /* ── Legend ── */
    legendContainer: {
      flex: 1,
      marginLeft: 16,
      maxHeight: 140,
    },
    legendItem: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingVertical: 7,
    },
    legendItemLeft: {
      flexDirection: 'row',
      alignItems: 'center',
      flex: 1,
    },
    bullet: {
      width: 10,
      height: 10,
      borderRadius: 5,
      marginRight: 8,
    },
    legendLabel: {
      fontSize: 13,
      fontWeight: '600',
      color: colors.text,
    },
    legendItemRight: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-end',
      width: 76,
    },
    legendCount: {
      fontSize: 13,
      fontWeight: '700',
      color: colors.text,
      textAlign: 'right',
      width: 32,
    },
    legendPercentage: {
      fontSize: 12,
      color: colors.textMuted,
      textAlign: 'right',
      width: 44,
    },

    /* ── Dropdown Menu ── */
    menuOverlay: {
      position: 'absolute',
      top: 52,
      right: 14,
      backgroundColor: colors.card,
      borderRadius: 12,
      borderWidth: 1,
      borderColor: colors.border,
      zIndex: 9999,
      elevation: 20,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 6 },
      shadowOpacity: isDark ? 0.35 : 0.12,
      shadowRadius: 12,
      minWidth: 120,
    },
    menuItem: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingVertical: 11,
      paddingHorizontal: 16,
    },
    menuItemActive: {
      backgroundColor: isDark
        ? `${globalColors.primary}25`
        : `${globalColors.primary}0F`,
    },
    menuItemText: {
      fontSize: 13,
      fontWeight: '600',
      color: colors.textSecondary,
    },
    menuItemTextActive: {
      color: globalColors.primary,
      fontWeight: '700',
    },
  });