import React, { useState, useEffect } from 'react'

/**
 * 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>
          <select
            value={selectedId}
            onChange={(e) => setSelectedId(e.target.value)}
            className="w-full px-3 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50"
          >
            <option value="" className="bg-nova-900">Select a category…</option>
            {categories.map((ct) => (
              <optgroup key={ct.id} label={ct.name}>
                {ct.categories?.map((cat) => (
                  <React.Fragment key={cat.id}>
                    <option value={cat.id} className="bg-nova-900">{cat.name}</option>
                    {cat.children?.map((ch) => (
                      <option key={ch.id} value={ch.id} className="bg-nova-900">&nbsp;&nbsp;{ch.name}</option>
                    ))}
                  </React.Fragment>
                ))}
              </optgroup>
            ))}
          </select>
        </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>
  )
}