import plugin from 'tailwindcss/plugin'
declare let module: any

/**
 * NOTE on btu-tab-button carve-out:
 * `btu-tab-button` is a standalone button primitive, NOT composed from `btu-button-*`.
 * This is intentional — tabs require a bottom-edge active-state indicator (::after)
 * and a tab-specific height/padding model that the generic action-button anatomy
 * cannot express. See `.ai/LESSONS-BUTTON-REUSE.md` §4. Do not "fix" this by
 * migrating to btu-button; either extend btu-button with a new variant or leave as-is.
 *
 * Tabs component styles.
 *
 * Class Names:
 *
 *  btu-tabs           - Root container
 *  btu-tabs-xs        - Extra small container padding
 *  btu-tabs-sm        - Small container padding
 *  btu-tabs-md        - Medium container padding (default)
 *  btu-tabs-lg        - Large container padding
 *  btu-tab            - Individual tab wrapper
 *  btu-tab-button     - Inner tab button
 *  btu-tab-button-xs  - Extra small button height/text
 *  btu-tab-button-sm  - Small button height/text
 *  btu-tab-button-md  - Medium button height/text (default)
 *  btu-tab-button-lg  - Large button height/text
 *  btu-tab-indicator  - Active tab underline indicator
 *  btu-tabs-menu-mode - Menu variant overflow override
 *  btu-tab-menu-wrapper - Menu variant wrapper for label and dropdown
 *  btu-tab-menu-label - Menu variant active tab label
 *
 * CSS Custom Properties:
 *
 *  --tabs-active-color          - Text and icon color of the active tab (default: gray-700)
 *  --tabs-active-indicator-color - Color of the active tab underline indicator (default: primary gradient)
 *  --tabs-border-color          - Bottom border divider color (default: gray-200)
 *  --tabs-color                 - Text and icon color for all tabs (default: gray-500)
 *  --tabs-background            - Background color for all tab buttons (default: transparent)
 *  --tabs-container-background  - Background color of the tabs container (default: theme white)
 *  --tabs-hover-background      - Background color of a tab on hover (default: gray-100)
 *  --tabs-hover-color           - Text and icon color of a tab on hover (default: gray-700)
 *  --tabs-gap                   - Spacing between tabs (default: 1rem)
 */

module.exports = plugin(function ({ addComponents, addBase, config, theme }) {
  const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem'
  const fontSize_sm = config('theme.fontSize.sm')?.[0] ?? '0.875rem'
  const fontSize_base = config('theme.fontSize.base')?.[0] ?? '1rem'

  addBase({
    '@keyframes btu-tab-draw': {
      from: { transform: 'scaleX(0)' },
      to: { transform: 'scaleX(1)' },
    },
  })

  addComponents({
    '.btu-tabs': {
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--tabs-gap, 1rem)',
      position: 'relative',
      borderBottom: '1px solid var(--tabs-border-color, oklch(var(--btu-theme-gray-200)))',
      backgroundColor: 'var(--tabs-container-background, var(--btu-theme-white))',
      overflowX: 'auto',
      overflowY: 'clip',
    },
    // In menu mode, disable scrolling so the dropdown can extend beyond the container
    '.btu-tabs-menu-mode': {
      overflowX: 'visible',
      overflowY: 'visible',
    },
    '.btu-tabs-xs': { paddingInline: '1rem' },
    '.btu-tabs-sm': { paddingInline: '1rem' },
    '.btu-tabs-md': { paddingInline: '1.5rem' },
    '.btu-tabs-lg': { paddingInline: '1.5rem' },

    '.btu-tab': {
      display: 'inline-flex',
      flexDirection: 'column',
      alignItems: 'center',
      flexShrink: '0',
    },

    '.btu-tab-button': {
      position: 'relative',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      gap: '0.5rem',
      paddingInline: '0.5rem',
      cursor: 'pointer',
      whiteSpace: 'nowrap',
      boxSizing: 'border-box',
      backgroundColor: 'var(--tabs-background, transparent)',
      color: 'var(--tabs-color, oklch(var(--btu-theme-gray-500)))',
      transitionProperty: 'color, background-color',
      transitionDuration: '150ms',
      transitionTimingFunction: 'ease',
      '&:hover:not([aria-disabled="true"])': {
        backgroundColor: 'var(--tabs-hover-background, oklch(var(--btu-theme-gray-100)))',
        color: 'var(--tabs-hover-color, oklch(var(--btu-theme-gray-700)))',
      },
      '&[aria-selected="true"]:not([aria-disabled="true"])': {
        color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
      },
      '&[aria-disabled="true"]': {
        color: 'oklch(var(--btu-theme-gray-300))',
        cursor: 'not-allowed',
      },
      '&:focus-visible': {
        outline: 'none',
        boxShadow:
          'inset 0 0 0 3px oklch(var(--btu-theme-primary-100)), inset 0 0 0 4px oklch(var(--btu-theme-primary-600))',
      },
      '@media (prefers-reduced-motion: reduce)': {
        transitionDuration: '0.01ms',
      },
    },

    '.btu-tab-button-xs': {
      height: '2.25rem',
      fontSize: fontSize_xs,
      fontWeight: '400',
    },
    '.btu-tab-button-sm': {
      height: '2.75rem',
      fontSize: fontSize_sm,
      fontWeight: '500',
    },
    '.btu-tab-button-md': {
      height: '3.25rem',
      fontSize: fontSize_sm,
      fontWeight: '500',
    },
    '.btu-tab-button-lg': {
      height: '3.5rem',
      fontSize: fontSize_base,
      fontWeight: '500',
    },

    '.btu-tab-indicator': {
      position: 'absolute',
      bottom: '0',
      left: '0',
      right: '0',
      height: '0.125rem',
      background: `var(--tabs-active-indicator-color, ${theme('backgroundImage.primary-gradient')})`,
      transformOrigin: 'left',
      animation: 'btu-tab-draw 200ms ease-out',
      '@media (prefers-reduced-motion: reduce)': {
        animationDuration: '0.01ms',
      },
    },

    '.btu-tab-menu-wrapper': {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.5rem',
    },

    '.btu-tab-menu-label': {
      fontSize: fontSize_sm,
      fontWeight: '500',
      color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
      whiteSpace: 'nowrap',
    },
  })
})
