import plugin from 'tailwindcss/plugin'
import type { CSSRuleObject } from 'tailwindcss/types/config'
declare let module: any

/**
 * Dropdown menu component styling.
 *
 * Class Names:
 *
 *  btu-dropdown-panel - Panel container with popover positioning
 *  btu-dropdown-item - Menu item row
 *  btu-dropdown-item-selected - Selected/checked item highlight
 *  btu-dropdown-item-disabled - Disabled item styling (no pointer-events: none)
 *  btu-dropdown-divider - Horizontal separator between item groups
 *  btu-dropdown-subhead - Group heading label
 *  btu-dropdown-header - Menu header bar
 *  btu-dropdown-checkbox - Checkbox indicator
 *  btu-dropdown-favorite - Favorite star button
 *  btu-dropdown-shortcut - Keyboard shortcut text
 *  btu-dropdown-chevron - Trigger chevron icon
 */

module.exports = plugin(function ({ addComponents, config, theme }) {
  const itemFontSize = config('theme.fontSize.sm')?.[0] ?? '0.875rem'
  const itemLineHeight = config('theme.fontSize.sm')?.[1] ?? '1.25rem'
  const subheadFontSize = config('theme.fontSize.xs')?.[0] ?? '0.75rem'

  const components: CSSRuleObject = {
    /* ─── Panel ─── */
    '.btu-dropdown-panel': {
      backgroundColor: 'var(--dropdown-panel-background, var(--btu-theme-white))',
      border: '1px solid var(--dropdown-panel-border-color, oklch(var(--btu-theme-gray-200)))',
      borderRadius: `var(--dropdown-panel-border-radius, ${theme('borderRadius.lg')})`,
      boxShadow: theme('boxShadow.lg'),
      padding: '0.25rem 0',
      overflow: 'auto',
      maxHeight: 'min(20rem, 50vh)',

      /* High-contrast border */
      ':root.is-moreContrast &': {
        borderColor: 'var(--dropdown-panel-border-color, oklch(var(--btu-theme-gray-400)))',
      },
      '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
        ':root:not(.is-normalContrast) &': {
          borderColor: 'var(--dropdown-panel-border-color, oklch(var(--btu-theme-gray-400)))',
        },
      },

      /* Exit state — hidden */
      opacity: '0',

      /* Transitions with allow-discrete for display/overlay */
      transition: `opacity 150ms ease`,
      '@supports (transition-behavior: allow-discrete)': {
        transition: `opacity 150ms ease, display 150ms allow-discrete, overlay 150ms allow-discrete`,
      },

      /* Reduced motion */
      '@media (prefers-reduced-motion: reduce)': {
        transition: 'opacity 0.01ms ease',
        '@supports (transition-behavior: allow-discrete)': {
          transition: 'opacity 0.01ms ease, display 0.01ms allow-discrete, overlay 0.01ms allow-discrete',
        },
      },
    },
    /* Entry state — visible (popover open) */
    '.btu-dropdown-panel:popover-open': {
      opacity: '1',
    },
    /* Starting style for entry animation */
    '@starting-style': {
      '.btu-dropdown-panel:popover-open': {
        opacity: '0',
      },
    } as any,

    /* ─── Header ─── */
    '.btu-dropdown-header': {
      display: 'flex',
      alignItems: 'center',
      padding: '0.5rem 0.75rem',
      fontSize: subheadFontSize,
      fontWeight: theme('fontWeight.semibold'),
      color: 'oklch(var(--btu-theme-gray-900))',
      borderBottom: '1px solid var(--dropdown-divider-color, oklch(var(--btu-theme-gray-200)))',
      marginBottom: '0.25rem',
    },

    /* ─── Empty state ─── */
    '.btu-dropdown-empty': {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '1rem',
      fontSize: itemFontSize,
      color: 'var(--dropdown-empty-color, oklch(var(--btu-theme-gray-400)))',
    },

    /* ─── Item ─── */
    '.btu-dropdown-item': {
      display: 'flex',
      alignItems: 'center',
      gap: '0.5rem',
      padding: '0.375rem 0.75rem',
      fontSize: `var(--dropdown-item-font-size, ${itemFontSize})`,
      lineHeight: itemLineHeight,
      color: 'var(--dropdown-item-color, oklch(var(--btu-theme-gray-700)))',
      backgroundColor: 'var(--dropdown-item-background, transparent)',
      cursor: 'pointer',
      userSelect: 'none',
      outline: 'none',
      whiteSpace: 'nowrap',

      '&:hover': {
        backgroundColor: 'var(--dropdown-item-hover-background, oklch(var(--btu-theme-gray-100)))',
        color: 'var(--dropdown-item-hover-color, oklch(var(--btu-theme-gray-900)))',
      },
      '&:focus-visible': {
        backgroundColor: 'var(--dropdown-item-hover-background, oklch(var(--btu-theme-gray-100)))',
        color: 'var(--dropdown-item-hover-color, oklch(var(--btu-theme-gray-900)))',
      },
    },

    '.btu-dropdown-item-selected': {
      backgroundColor: 'var(--dropdown-item-selected-background, oklch(var(--btu-theme-primary-50)))',
      color: 'var(--dropdown-item-selected-color, oklch(var(--btu-theme-primary-700)))',
      '&:hover': {
        backgroundColor: 'var(--dropdown-item-selected-background, oklch(var(--btu-theme-primary-50)))',
        color: 'var(--dropdown-item-selected-color, oklch(var(--btu-theme-primary-700)))',
      },
      '&:focus-visible': {
        backgroundColor: 'var(--dropdown-item-selected-background, oklch(var(--btu-theme-primary-50)))',
        color: 'var(--dropdown-item-selected-color, oklch(var(--btu-theme-primary-700)))',
      },
    },

    '.btu-dropdown-item-disabled': {
      opacity: '0.5',
      cursor: 'default',

      ':root.is-moreContrast &': {
        opacity: '0.4',
      },
      '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
        ':root:not(.is-normalContrast) &': {
          opacity: '0.4',
        },
      },
    },

    /* ─── Checkbox indicator ─── */
    '.btu-dropdown-checkbox': {
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: '1rem',
      height: '1rem',
      flexShrink: '0',
      borderRadius: theme('borderRadius.sm'),
      border: '1px solid oklch(var(--btu-theme-gray-300))',
      backgroundColor: 'transparent',
      color: 'transparent',
    },
    '.btu-dropdown-checkbox-checked': {
      backgroundColor: 'oklch(var(--btu-theme-primary-600))',
      borderColor: 'oklch(var(--btu-theme-primary-600))',
      color: 'var(--btu-theme-white)',
    },

    /* ─── Divider ─── */
    '.btu-dropdown-divider': {
      borderTop: '1px solid var(--dropdown-divider-color, oklch(var(--btu-theme-gray-200)))',
      margin: '0.25rem 0',
    },

    /* ─── Subhead ─── */
    '.btu-dropdown-subhead': {
      padding: '0.5rem 0.75rem 0.25rem',
      fontSize: subheadFontSize,
      fontWeight: theme('fontWeight.semibold'),
      color: 'oklch(var(--btu-theme-gray-500))',
      textTransform: 'uppercase',
      letterSpacing: '0.05em',
      lineHeight: '1rem',
    },

    /* ─── Favorite star ─── */
    'button.btu-dropdown-favorite': {
      flexShrink: '0',
      marginLeft: 'auto',
      color: 'oklch(var(--btu-theme-gray-400))',
      '&:hover': {
        color: 'oklch(var(--btu-theme-warning-500))',
      },
    },
    'button.btu-dropdown-favorite-active': {
      color: 'oklch(var(--btu-theme-warning-500))',
    },

    /* ─── Shortcut text ─── */
    '.btu-dropdown-shortcut': {
      marginLeft: 'auto',
      fontSize: subheadFontSize,
      color: 'oklch(var(--btu-theme-gray-400))',
    },

    /* ─── Disabled trigger ─── */
    'btu-dropdown[disabled]': {
      opacity: '0.5',
      pointerEvents: 'none',
    },

    /* ─── Chevron ─── */
    '.btu-dropdown-chevron': {
      transition: 'transform 200ms ease',
      flexShrink: '0',
    },
    /* Trigger with chevron: restore auto width + gap so the icon and chevron
       fit. Matches every chevron trigger, but is a no-op on labelled triggers
       (`.btu-button` already defaults to width:auto/gap:0.5rem). The effective
       target is icon-only triggers, where `.btu-button-text-hidden` forces a
       fixed square width and gap:0 — which would otherwise clip the chevron. */
    'btu-dropdown > button:has(.btu-dropdown-chevron)': {
      width: 'auto',
      gap: '0.5rem',
    },
    'btu-dropdown[open] .btu-dropdown-chevron': {
      transform: 'rotate(180deg)',
    },

    /* ─── Item icon container ─── */
    '.btu-dropdown-item-icon': {
      display: 'inline-flex',
      flexShrink: '0',
    },

    /* ─── Item label ─── */
    '.btu-dropdown-item-label': {
      flex: '1',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    },

    /* ─── Selected check mark (non-checkbox mode) ─── */
    '.btu-dropdown-check': {
      display: 'inline-flex',
      flexShrink: '0',
      color: 'oklch(var(--btu-theme-primary-600))',
    },
  }

  addComponents(components)
})
