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

/**
 * Modal for choosing a category in bulk.
 *
 * Props:
 *  - open: boolean
 *  - categories: array of content types with nested categories
 *  - onClose: () => void
 *  - onConfirm: (categoryId: number) => void
 */
export default function BulkCategoryModal({ open, categories = [], onClose, onConfirm }) {
  const [selectedId, setSelectedId] = useState('')

  useEffect(() => {
    if (open) setSelectedId('')
  }, [open])

  const handleConfirm = () => {
    if (!selectedId) return
    onConfirm(Number(selectedId))
  }

  const handleKeyDown = (e) => {
    if (e.key === 'Escape') onClose()
    if (e.key === 'Enter' && selectedId) handleConfirm()
  }

  if (!open) return null

  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4" onKeyDown={handleKeyDown}>
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />

      {/* Modal */}
      <div className="relative w-full max-w-md bg-nova-900 border border-white/10 rounded-2xl shadow-2xl p-6 space-y-4">
        {/* Header */}
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
            <i className="fa-solid fa-folder text-accent" />
          </div>
          <div>
            <h3 className="text-lg font-bold text-white">Change category</h3>
            <p className="text-sm text-slate-400">Choose a category to assign to the selected artworks.</p>
          </div>
        </div>

        {/* Category select */}
        <div>
          <label className="text-xs font-medium text-slate-400 mb-1.5 block">Category</label>
          <NovaSelect
            value={selectedId}
            onChange={(value) => setSelectedId(value)}
            placeholder="Select a category…"
            options={categories.flatMap((ct) => (
              (ct.categories || []).flatMap((cat) => ([
                { value: String(cat.id), label: cat.name, group: ct.name },
                ...((cat.children || []).map((child) => ({ value: String(child.id), label: child.name, group: ct.name }))),
              ]))
            ))}
          />
        </div>

        {/* Actions */}
        <div className="flex items-center justify-end gap-2 pt-2">
          <button
            onClick={onClose}
            className="px-4 py-2 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
          >
            Cancel
          </button>
          <button
            onClick={handleConfirm}
            disabled={!selectedId}
            className={`px-5 py-2 rounded-xl text-sm font-semibold transition-all ${
              selectedId
                ? 'bg-accent hover:bg-accent/90 text-white'
                : 'bg-white/5 text-slate-500 cursor-not-allowed'
            }`}
          >
            Apply category
          </button>
        </div>
      </div>
    </div>
  )
}