import React, { useState } from 'react'
import NovaSelect from '../ui/NovaSelect'

const actions = [
  { value: 'publish',         label: 'Publish',          icon: 'fa-eye',          danger: false },
  { value: 'unpublish',       label: 'Unpublish (draft)', icon: 'fa-eye-slash',   danger: false },
  { value: 'archive',         label: 'Archive',          icon: 'fa-box-archive',  danger: false },
  { value: 'unarchive',       label: 'Unarchive',        icon: 'fa-rotate-left',  danger: false },
  { value: 'delete',          label: 'Delete',           icon: 'fa-trash',        danger: true },
  { value: 'change_category', label: 'Change category',  icon: 'fa-folder',       danger: false },
  { value: 'add_tags',        label: 'Add tags',         icon: 'fa-tag',          danger: false },
  { value: 'remove_tags',     label: 'Remove tags',      icon: 'fa-tags',         danger: false },
]

export default function BulkActionsBar({ count, onExecute, onClearSelection }) {
  const [action, setAction] = useState('')

  if (count === 0) return null

  const handleExecute = () => {
    if (!action) return
    onExecute(action)
    setAction('')
  }

  const selectedAction = actions.find((a) => a.value === action)

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-nova-900/95 backdrop-blur-xl border-t border-white/10 px-4 py-3 shadow-xl shadow-black/20">
      <div className="max-w-7xl mx-auto flex items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-accent/20 text-accent text-sm font-bold">
            {count}
          </span>
          <span className="text-sm text-slate-300">
            {count === 1 ? 'artwork' : 'artworks'} selected
          </span>
        </div>

        <div className="flex items-center gap-2">
          <div className="min-w-[180px]">
            <NovaSelect
              options={actions.map((a) => ({ value: a.value, label: a.label }))}
              value={action || null}
              onChange={(val) => setAction(val ?? '')}
              placeholder="Choose action…"
              searchable={false}
            />
          </div>

          <button
            onClick={handleExecute}
            disabled={!action}
            className={`px-5 py-2 rounded-xl text-sm font-semibold transition-all ${
              action
                ? selectedAction?.danger
                  ? 'bg-red-600 hover:bg-red-700 text-white'
                  : 'bg-accent hover:bg-accent/90 text-white'
                : 'bg-white/5 text-slate-500 cursor-not-allowed'
            }`}
          >
            Apply
          </button>

          <button
            onClick={onClearSelection}
            className="px-4 py-2 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
          >
            Clear
          </button>
        </div>
      </div>
    </div>
  )
}