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

/**
 * ActionBar component styling.
 *
 * Class Names:
 *
 *  btu-action-bar - Bar container with flex layout and border
 *  btu-action-bar-start - Left zone for destructive/start actions
 *  btu-action-bar-end - Right zone for primary/secondary actions
 *
 * Attribute selectors:
 *
 *  btu-action-bar[position="top"] - Top-positioned bar with border-bottom
 *  btu-action-bar[sticky] - Sticky-positioned bar
 *  btu-action-bar[item-alignment="start|center|end"] - Content alignment
 *  btu-action-bar[shadow] - Box shadow enabled
 *  btu-action-item[disabled] - Disabled item styling
 *  btu-action-item[loading] - Loading item styling
 */

module.exports = plugin(function ({ addComponents, theme }) {
  const components: CSSRuleObject = {
    /* ─── Bar ─── */
    'btu-action-bar': {
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--action-bar-gap, 0.75rem)',
      padding: 'var(--action-bar-padding, 1rem 1.5rem)',
      backgroundColor: 'var(--action-bar-background, var(--btu-theme-white))',
      borderTop: '1px solid var(--action-bar-border-color, oklch(var(--btu-theme-gray-200)))',
      zIndex: 'var(--action-bar-z-index, 100)',
      marginTop: 'auto',
    },

    /* ─── Position: top ─── */
    'btu-action-bar[position="top"]': {
      borderTop: 'none',
      borderBottom: '1px solid var(--action-bar-border-color, oklch(var(--btu-theme-gray-200)))',
      marginTop: '0',
      marginBottom: 'auto',
    },

    /* ─── Sticky positioning ─── */
    'btu-action-bar[sticky]': {
      position: 'sticky',
      bottom: '0',
    },
    'btu-action-bar[sticky][position="top"]': {
      bottom: 'auto',
      top: '0',
    },

    /* ─── Alignment variants ─── */
    'btu-action-bar[item-alignment="start"]': {
      justifyContent: 'flex-start',
    },
    'btu-action-bar[item-alignment="center"]': {
      justifyContent: 'center',
    },
    'btu-action-bar[item-alignment="end"]': {
      justifyContent: 'flex-end',
    },

    /* ─── Non-default alignment: zones don't grow ─── */
    'btu-action-bar:not([item-alignment="default"]) .btu-action-bar-start': {
      flex: '0 0 auto',
    },
    'btu-action-bar:not([item-alignment="default"]) .btu-action-bar-end': {
      flex: '0 0 auto',
      justifyContent: 'initial',
    },
    'btu-action-bar:not([item-alignment="default"]) .btu-action-bar-start:empty': {
      display: 'none',
    },

    /* ─── Shadow ─── */
    'btu-action-bar[shadow]': {
      boxShadow: theme('boxShadow.md'),
    },

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

    /* ─── Inner layout zones ─── */
    '.btu-action-bar-start': {
      display: 'flex',
      alignItems: 'center',
      flex: '1 0 0',
      minWidth: '0',
      gap: 'var(--action-bar-gap, 0.75rem)',
    },
    '.btu-action-bar-end': {
      display: 'flex',
      alignItems: 'center',
      flex: '1 0 0',
      minWidth: '0',
      justifyContent: 'flex-end',
      gap: 'var(--action-bar-gap, 0.75rem)',
    },

    /* ─── Disabled item ─── */
    'btu-action-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',
        },
      },
    },

    /* ─── Loading item ─── */
    'btu-action-item[loading]': {
      pointerEvents: 'none',
      cursor: 'default',
    },
  }

  addComponents(components)
})
