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

/**
 * Pagination component styles.
 *
 * Class Names:
 *
 *  btu-pagination           - Root container
 *  btu-pagination-hidden    - Hidden state (single page / no items)
 *  btu-pagination-disabled  - Disabled state
 *  btu-pagination-loading   - Loading state with dimmed controls
 *  btu-pagination-nav       - Inner nav wrapper
 *  btu-pagination-size-changer - Page size dropdown area
 *  btu-pagination-total     - "1-10 of 200" display
 *  btu-pagination-controls  - Button group container
 *  btu-pagination-jumper    - Slot area for custom jumper content
 *
 * Navigation buttons use btu-button classes (btu-button btu-button-text-hidden
 * btu-button-sm). The controls container overrides
 * border-radius for grouped button appearance.
 *
 * CSS Custom Properties:
 *
 *  --pagination-color-background  - Dropdown/button background
 *  --pagination-color-foreground  - Text/icon color
 */

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

  addComponents({
    '.btu-pagination': {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.75rem',
      fontSize: fontSize_sm,
      color: 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
    },

    '.btu-pagination-hidden': {
      display: 'none',
    },

    '.btu-pagination-disabled': {
      opacity: '0.5',
      pointerEvents: 'none',
    },

    '.btu-pagination-loading': {
      pointerEvents: 'none',
      '& .btu-pagination-size-changer': {
        opacity: '0.5',
      },
      '& .btu-pagination-total': {
        opacity: '0.5',
      },
      '& .btu-pagination-controls > btu-icon-button': {
        opacity: '0.5',
      },
      '& .btu-pagination-controls > btu-circular-progress': {
        position: 'absolute',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)',
        zIndex: '1',
      },
    },

    '.btu-pagination-nav': {
      display: 'flex',
      alignItems: 'center',
      gap: '0.75rem',
      width: '100%',
    },

    '.btu-pagination-size-changer': {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.5rem',
      '&:empty': {
        display: 'none',
      },
    },

    '.btu-pagination-total': {
      fontSize: fontSize_xs,
      color: 'oklch(var(--btu-theme-gray-500))',
      fontWeight: '500',
      whiteSpace: 'nowrap',
    },

    // When size-changer is hidden (empty), push total right next to controls
    '.btu-pagination-size-changer:empty + .btu-pagination-total': {
      marginLeft: 'auto',
    },

    '.btu-pagination-controls': {
      position: 'relative',
      display: 'inline-flex',
      alignItems: 'center',
      marginLeft: 'auto',
      border: '1px solid oklch(var(--btu-theme-gray-300))',
      borderRadius: '0.5rem',
      '& > btu-icon-button:first-of-type > button': {
        borderTopLeftRadius: 'calc(0.5rem - 1px)',
        borderBottomLeftRadius: 'calc(0.5rem - 1px)',
      },
      '& > btu-icon-button:last-of-type > button': {
        borderTopRightRadius: 'calc(0.5rem - 1px)',
        borderBottomRightRadius: 'calc(0.5rem - 1px)',
      },
      '& > btu-icon-button > button:focus-visible': {
        zIndex: '1',
        outline: 'none',
        boxShadow: '0 0 0 1px oklch(var(--btu-theme-primary-400)), 0 0 0 4px oklch(var(--btu-theme-primary-100))',
        borderRadius: 'calc(0.5rem - 1px)',
      },
    },

    // Scoped under .btu-pagination so it beats the button plugin's :hover /
    // :focus-visible rules — otherwise pagination buttons flash to the
    // button's default color on interaction.
    '.btu-pagination .btu-pagination-controls > btu-icon-button > button': {
      '--button-border-radius': '0',
      '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
      '--button-text-color': 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
      borderRight: '1px solid oklch(var(--btu-theme-gray-200))',
    },

    '.btu-pagination .btu-pagination-controls > btu-icon-button:last-of-type > button': {
      borderRight: 'none',
    },

    '.btu-pagination-jumper': {
      display: 'inline-flex',
      alignItems: 'center',
      background: 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
      '&:empty': {
        display: 'none',
      },
      '&:not(:empty)': {
        borderRight: '1px solid oklch(var(--btu-theme-gray-200))',
      },
    },

    // Dropdown integration: page size changer (same .btu-pagination scope as
    // above so it wins over the button plugin's :hover / :focus-visible rules).
    '.btu-pagination .btu-pagination-size-changer > btu-dropdown > button': {
      '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
      '--button-text-color': 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
    },

    // Dropdown integration: jumper (blends into button group)
    '.btu-pagination .btu-pagination-jumper > btu-dropdown > button': {
      '--button-border-radius': '0',
      '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
      '--button-text-color': 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
    },
  })
})
