import React from 'react'
import { Button } from './Button'

export interface BulkAction {
  label: string
  icon?: string
  onClick: () => void
  variant?: 'primary' | 'secondary' | 'danger'
}

export interface BulkActionBarProps {
  selectedCount: number
  onClearSelection: () => void
  actions: BulkAction[]
  position?: 'bottom-floating' | 'bottom-sticky' | 'top-floating'
  theme?: 'dark' | 'light'
  className?: string
}


const positionClass: Record<NonNullable<BulkActionBarProps['position']>, string> = {
  'bottom-floating': 'fixed bottom-4 left-1/2 -translate-x-1/2',
  'bottom-sticky': 'sticky bottom-4',
  'top-floating': 'fixed top-16 left-1/2 -translate-x-1/2',
}

export const BulkActionBar: React.FC<BulkActionBarProps> = ({
  selectedCount,
  onClearSelection,
  actions,
  position = 'bottom-floating',
  theme = 'dark',
  className = '',
}) => {
  const isDark = theme === 'dark'

  const containerClass = isDark
    ? 'bg-slate-900 text-white'
    : 'bg-white border border-slate-200 text-slate-800'

  const countClass = isDark ? 'text-teal-300' : 'text-teal-600'

  return (
    <div
      className={`
        ${positionClass[position]} z-40 max-w-3xl w-full mx-auto
        transition-all duration-200
        ${selectedCount > 0 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}
        ${className}
      `}
      role="region"
      aria-label="일괄 액션"
    >
      <div className={`${containerClass} rounded-[14px] shadow-soft-xl px-3 py-2 md:px-5 md:py-3 flex items-center justify-between gap-2 md:gap-4`}>
        {/* Count + Clear */}
        <div className="flex items-center gap-2 md:gap-3">
          <span className="text-caption md:text-body-sm font-bold" aria-live="polite">
            <span className={countClass}>{selectedCount}</span>개 선택
            <span className="hidden md:inline">됨</span>
          </span>
          <button
            type="button"
            className={`text-caption font-semibold ${isDark ? 'text-slate-400 hover:text-white' : 'text-slate-400 hover:text-slate-600'} transition-colors`}
            onClick={onClearSelection}
          >
            해제
          </button>
        </div>

        {/* Actions */}
        <div className="flex items-center gap-1 md:gap-2">
          {actions.map((action, index) => {
            const variant = action.variant ?? 'secondary'
            const dsVariant = variant === 'secondary' ? 'ghost' : variant
            const darkSecondaryClass = isDark && variant === 'secondary'
              ? 'text-slate-300 hover:text-white hover:bg-slate-700'
              : ''
            return (
              <Button
                key={index}
                variant={dsVariant}
                size="sm"
                onClick={action.onClick}
                leftIcon={action.icon}
                className={`text-caption ${darkSecondaryClass}`}
              >
                {action.label}
              </Button>
            )
          })}
        </div>
      </div>
    </div>
  )
}