import { useState } from 'react';
import { Button } from './ui';

export default function AdminBulkSelectionToolbar({
  selectedCount,
  onClearSelection,
  onBatchEdit
}) {
  const [showActions, setShowActions] = useState(false);

  if (selectedCount === 0) return null;

  return (
    <div className="fixed bottom-4 left-4 right-4 sm:bottom-6 sm:left-1/2 sm:right-auto sm:transform sm:-translate-x-1/2 z-50">
      <div
        className="glass-panel-strong rounded-2xl px-3 sm:px-6 py-3 sm:py-4 flex items-center justify-between sm:justify-start sm:space-x-4 sm:min-w-96"
        style={{
          boxShadow: 'var(--rim-light-inner), var(--elevation-pronounced)',
        }}
      >
        {/* Selection Count */}
        <div className="flex items-center space-x-2">
          <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
            <span className="text-white text-sm font-bold">{selectedCount}</span>
          </div>
          <span className="font-medium text-sm sm:text-base" style={{ color: 'var(--text-primary)' }}>
            <span className="hidden sm:inline">{selectedCount} card{selectedCount !== 1 ? 's' : ''} selected</span>
            <span className="sm:hidden">{selectedCount}</span>
          </span>
        </div>

        {/* Divider - Hidden on mobile */}
        <div className="hidden sm:block h-6 w-px" style={{ backgroundColor: 'var(--border)' }}></div>

        {/* Actions */}
        <div className="flex items-center space-x-1 sm:space-x-2">
          <Button
            variant="primary"
            size="sm"
            onClick={onBatchEdit}
            leadingIcon={
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
              </svg>
            }
          >
            Batch Edit
          </Button>

          {/* More Actions Button */}
          <div className="relative">
            <button
              onClick={() => setShowActions(!showActions)}
              className="nav-item-hover p-2 rounded-xl transition-colors"
              style={{ color: 'var(--text-secondary)' }}
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
              </svg>
            </button>

            {/* Dropdown Actions */}
            {showActions && (
              <div className="glass-panel-strong absolute bottom-full right-0 mb-2 rounded-xl py-2 min-w-48">
                <div
                  className="my-1 border-t"
                  style={{ borderColor: 'var(--border)' }}
                ></div>
                <button
                  onClick={() => {
                    onClearSelection();
                    setShowActions(false);
                  }}
                  className="nav-item-hover w-full px-4 py-2 text-left text-sm flex items-center space-x-2"
                  style={{ color: 'rgb(239, 68, 68)' }}
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                  <span>Clear Selection</span>
                </button>
              </div>
            )}
          </div>

          {/* Clear Selection */}
          <button
            onClick={onClearSelection}
            className="nav-item-hover p-2 rounded-xl transition-colors"
            style={{ color: 'var(--text-secondary)' }}
            title="Clear selection"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  );
}