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

const statusOptions = [
  { value: 'published', label: 'Published' },
  { value: 'draft',     label: 'Draft' },
  { value: 'archived',  label: 'Archived' },
]

const performanceOptions = [
  { value: 'rising', label: 'Rising (hot)' },
  { value: 'top',    label: 'Top performers' },
  { value: 'low',    label: 'Low performers' },
]

export default function StudioFilters({
  open,
  onClose,
  filters,
  onFilterChange,
  categories = [],
}) {
  if (!open) return null

  const handleChange = (key, value) => {
    onFilterChange({ ...filters, [key]: value })
  }

  const categoryOptions = useMemo(() => {
    const opts = []
    categories.forEach((ct) => {
      ct.categories?.forEach((cat) => {
        opts.push({ value: cat.slug, label: cat.name, group: ct.name })
        cat.children?.forEach((ch) => {
          opts.push({ value: ch.slug, label: ch.name, group: ct.name })
        })
      })
    })
    return opts
  }, [categories])

  return (
    <>
      {/* Mobile backdrop */}
      <div className="lg:hidden fixed inset-0 z-40 bg-black/50 backdrop-blur-sm" onClick={onClose} />

      {/* Filter panel */}
      <div className="fixed lg:relative inset-y-0 left-0 z-50 lg:z-auto w-72 lg:w-64 bg-nova-900 lg:bg-nova-900/40 border-r lg:border border-white/10 lg:rounded-2xl p-5 space-y-5 overflow-y-auto nova-scrollbar lg:static lg:mb-4">
        <div className="flex items-center justify-between lg:hidden">
          <h3 className="text-base font-semibold text-white">Filters</h3>
          <button onClick={onClose} className="text-slate-400 hover:text-white" aria-label="Close filters">
            <i className="fa-solid fa-xmark text-lg" />
          </button>
        </div>

        <h3 className="hidden lg:block text-sm font-semibold text-slate-400 uppercase tracking-wider">Filters</h3>

        {/* Status */}
        <NovaSelect
          label="Status"
          options={statusOptions}
          value={filters.status || null}
          onChange={(val) => handleChange('status', val ?? '')}
          placeholder="All statuses"
          searchable={false}
          clearable
        />

        {/* Category */}
        <NovaSelect
          label="Category"
          options={categoryOptions}
          value={filters.category || null}
          onChange={(val) => handleChange('category', val ?? '')}
          placeholder="All categories"
          clearable
        />

        {/* Performance */}
        <NovaSelect
          label="Performance"
          options={performanceOptions}
          value={filters.performance || null}
          onChange={(val) => handleChange('performance', val ?? '')}
          placeholder="All performance"
          searchable={false}
          clearable
        />

        {/* Date range */}
        <DateRangePicker
          label="Date range"
          start={filters.date_from || ''}
          end={filters.date_to || ''}
          onChange={({ start, end }) => {
            onFilterChange({ ...filters, date_from: start, date_to: end })
          }}
          clearable
          placeholder="Any date"
        />

        {/* Clear */}
        <button
          onClick={() => onFilterChange({ status: '', category: '', performance: '', date_from: '', date_to: '', tags: [] })}
          className="w-full text-center text-xs text-slate-500 hover:text-white transition-colors py-2"
        >
          Clear all filters
        </button>
      </div>
    </>
  )
}
