'use client'

import { format } from 'date-fns'
import type { GanttFilterState } from './types'

export interface GanttFilterBarProps {
  filters: GanttFilterState
  onFilterChange: (filters: GanttFilterState) => void
  uniqueStatuses: string[]
  uniqueCategories: string[]
}

export function GanttFilterBar({ filters, onFilterChange, uniqueStatuses, uniqueCategories }: GanttFilterBarProps) {
  const hasActiveFilters =
    filters.search !== '' ||
    filters.statuses.length > 0 ||
    filters.categories.length > 0 ||
    filters.dateRange.start !== null ||
    filters.dateRange.end !== null

  return (
    <div className="gantt-filter-bar">
      <input
        type="text"
        className="gantt-filter-search"
        placeholder="Search items..."
        value={filters.search}
        onChange={(e) => onFilterChange({ ...filters, search: e.target.value })}
      />
      {uniqueStatuses.length > 0 && (
        <select
          className="gantt-filter-select"
          value=""
          onChange={(e) => {
            const val = e.target.value
            if (!val) return
            onFilterChange({
              ...filters,
              statuses: filters.statuses.includes(val) ? filters.statuses.filter((s) => s !== val) : [...filters.statuses, val],
            })
          }}
        >
          <option value="">Status{filters.statuses.length > 0 ? ` (${filters.statuses.length})` : ''}</option>
          {uniqueStatuses.map((s) => (
            <option key={s} value={s}>{filters.statuses.includes(s) ? '\u2713 ' : ''}{s.replace(/_/g, ' ')}</option>
          ))}
        </select>
      )}
      {uniqueCategories.length > 0 && (
        <select
          className="gantt-filter-select"
          value=""
          onChange={(e) => {
            const val = e.target.value
            if (!val) return
            onFilterChange({
              ...filters,
              categories: filters.categories.includes(val) ? filters.categories.filter((c) => c !== val) : [...filters.categories, val],
            })
          }}
        >
          <option value="">Category{filters.categories.length > 0 ? ` (${filters.categories.length})` : ''}</option>
          {uniqueCategories.map((c) => (
            <option key={c} value={c}>{filters.categories.includes(c) ? '\u2713 ' : ''}{c}</option>
          ))}
        </select>
      )}
      <input
        type="date"
        className="gantt-filter-date"
        value={filters.dateRange.start ? format(filters.dateRange.start, 'yyyy-MM-dd') : ''}
        onChange={(e) => onFilterChange({ ...filters, dateRange: { ...filters.dateRange, start: e.target.value ? new Date(e.target.value) : null } })}
        title="Filter from date"
      />
      <input
        type="date"
        className="gantt-filter-date"
        value={filters.dateRange.end ? format(filters.dateRange.end, 'yyyy-MM-dd') : ''}
        onChange={(e) => onFilterChange({ ...filters, dateRange: { ...filters.dateRange, end: e.target.value ? new Date(e.target.value) : null } })}
        title="Filter to date"
      />
      {hasActiveFilters && (
        <button className="gantt-filter-clear" onClick={() => onFilterChange({ search: '', statuses: [], categories: [], dateRange: { start: null, end: null } })}>Clear</button>
      )}
      {/* Active filter pills */}
      {filters.statuses.map((s) => (
        <span key={`s-${s}`} className="gantt-filter-pill">
          {s.replace(/_/g, ' ')}
          <button onClick={() => onFilterChange({ ...filters, statuses: filters.statuses.filter((x) => x !== s) })}>x</button>
        </span>
      ))}
      {filters.categories.map((c) => (
        <span key={`c-${c}`} className="gantt-filter-pill">
          {c}
          <button onClick={() => onFilterChange({ ...filters, categories: filters.categories.filter((x) => x !== c) })}>x</button>
        </span>
      ))}
    </div>
  )
}