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

/**
 * Empty State component for displaying placeholder content when no data is available.
 *
 * Class Names:
 *
 *  btu-empty-state - Base container styles
 *  btu-empty-state-sm - Small size variant
 *  btu-empty-state-md - Medium size variant
 *  btu-empty-state-lg - Large size variant
 *  btu-empty-state-graphic - Graphic container (icon, image, picture, or svg)
 *  btu-empty-state-content - Content wrapper (heading + description)
 *  btu-empty-state-title - Heading text
 *  btu-empty-state-description - Description text
 *  btu-empty-state-actions - Actions container; applied to an internal
 *    btu-button-group (variant="spaced"). The button-group provides display,
 *    flex-flow, and gap; this class only collapses the container when empty.
 *
 * Example Usage:
 *
 *  <btu-empty-state class="btu-empty-state btu-empty-state-md">
 *    <div class="btu-empty-state-graphic">...</div>
 *    <div class="btu-empty-state-content">
 *      <h2 class="btu-empty-state-title">No items found</h2>
 *      <p class="btu-empty-state-description">Try adjusting your filters.</p>
 *    </div>
 *    <btu-button-group class="btu-empty-state-actions" variant="spaced">...</btu-button-group>
 *  </btu-empty-state>
 */

module.exports = plugin(function ({ addComponents }) {
  const className = '.btu-empty-state'

  // Graphic sizes per variant (img/svg/picture). btu-icon children are sized by the
  // component via the icon's own size prop.
  const graphicSize = { sm: '118px', md: '128px', lg: '160px' } as const

  const graphicChildren = (size: string) => ({
    [`& ${className}-graphic > img, & ${className}-graphic > svg, & ${className}-graphic > picture`]: {
      width: size,
      height: size,
    },
  })

  addComponents({
    // Base container
    [className]: {
      containerType: 'inline-size',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      textAlign: 'center',
      padding: '2rem',
    },

    // Graphic container
    [`${className}-graphic`]: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      '&:empty': { display: 'none' },
      '& > img, & > svg': {
        objectFit: 'contain',
      },
      '& > picture': {
        display: 'block',
      },
      '& > picture > img': {
        width: '100%',
        height: '100%',
        objectFit: 'contain',
      },
    },

    // Content wrapper (heading + description)
    [`${className}-content`]: {
      display: 'flex',
      flexDirection: 'column',
      maxWidth: 'var(--empty-state-max-width, min(75cqw, 360px))',
    },

    // Size variants (gap, description text, graphic size, content gap)
    [`${className}-sm`]: {
      gap: '1rem',
      [`& ${className}-description`]: { fontSize: '0.875rem', lineHeight: '1.25rem' },
      ...graphicChildren(graphicSize.sm),
      [`& ${className}-content`]: { gap: '0.25rem' },
    },
    [`${className}-md`]: {
      gap: '1.5rem',
      [`& ${className}-description`]: { fontSize: '0.875rem', lineHeight: '1.25rem' },
      ...graphicChildren(graphicSize.md),
      [`& ${className}-content`]: { gap: '0.5rem' },
    },
    [`${className}-lg`]: {
      gap: '1.5rem',
      [`& ${className}-description`]: { fontSize: '1rem', lineHeight: '1.5rem' },
      ...graphicChildren(graphicSize.lg),
      [`& ${className}-content`]: { gap: '0.5rem' },
    },

    // Title
    [`${className}-title`]: {
      color: 'var(--empty-state-color-heading, oklch(var(--btu-theme-gray-900)))',
      margin: '0',
    },

    // Description
    [`${className}-description`]: {
      color: 'var(--empty-state-color-description, oklch(var(--btu-theme-gray-500)))',
      margin: '0',
    },

    // Actions container — applied to an internal btu-button-group. Layout, gap,
    // and size propagation come from the button-group plugin; we only need to
    // collapse the container when it has no children.
    [`${className}-actions`]: {
      '&:empty': { display: 'none' },
    },
  })
})
