ims/components/incidents/incident-filters.tsx

'use client'

import { useRouter, useSearchParams, usePathname } from 'next/navigation'
import { useCallback, useState, useTransition, Suspense } from 'react'

const STATUS_OPTIONS = [
  { value: '', label: 'All Statuses' },
  { value: 'reported', label: 'Reported' },
  { value: 'triaged', label: 'Triaged' },
  { value: 'investigating', label: 'Investigating' },
  { value: 'capa_pending', label: 'CAPA Pending' },
  { value: 'verification', label: 'Pending Verification' },
  { value: 'closed', label: 'Closed' },
]

const TYPE_OPTIONS = [
  { value: '', label: 'All Types' },
  { value: 'injury', label: 'Injury' },
  { value: 'near_miss', label: 'Near Miss' },
  { value: 'hazard', label: 'Hazard' },
  { value: 'asset_damage', label: 'Asset Damage' },
  { value: 'environmental', label: 'Environmental' },
  { value: 'security', label: 'Security' },
  { value: 'fire', label: 'Fire' },
  { value: 'transport', label: 'Transport' },
]

export interface SiteOption { id: string; name: string }
export interface TruckOption { id: string; truck_no: string }

interface FiltersProps {
  sites: SiteOption[]
  trucks: TruckOption[]
}

function FiltersInner({ sites, trucks }: FiltersProps) {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [, startTransition] = useTransition()
  const [search, setSearch] = useState(searchParams.get('q') ?? '')

  const updateParam = useCallback((key: string, value: string) => {
    const params = new URLSearchParams(searchParams.toString())
    if (value) {
      params.set(key, value)
    } else {
      params.delete(key)
    }
    params.delete('page')
    startTransition(() => {
      router.replace(`${pathname}?${params.toString()}`)
    })
  }, [router, pathname, searchParams])

  const handleSearch = useCallback((value: string) => {
    setSearch(value)
    const timer = setTimeout(() => updateParam('q', value), 300)
    return () => clearTimeout(timer)
  }, [updateParam])

  const hasFilters = searchParams.get('q') || searchParams.get('status') ||
    searchParams.get('type') || searchParams.get('site_id') || searchParams.get('truck_id')

  return (
    <div className="flex flex-wrap gap-2 mb-4">
      <div className="relative flex-1 min-w-48">
        <svg
          className="absolute left-2.5 top-2 h-4 w-4 text-gray-400 pointer-events-none"
          fill="none" stroke="currentColor" viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
        <input
          type="search"
          placeholder="Search reference or description..."
          value={search}
          onChange={e => handleSearch(e.target.value)}
          className="w-full pl-8 pr-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>
      <select
        value={searchParams.get('status') ?? ''}
        onChange={e => updateParam('status', e.target.value)}
        className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
      >
        {STATUS_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
      <select
        value={searchParams.get('type') ?? ''}
        onChange={e => updateParam('type', e.target.value)}
        className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
      >
        {TYPE_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
      {sites.length > 0 && (
        <select
          value={searchParams.get('site_id') ?? ''}
          onChange={e => updateParam('site_id', e.target.value)}
          className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
        >
          <option value="">All Sites</option>
          {sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
        </select>
      )}
      {trucks.length > 0 && (
        <select
          value={searchParams.get('truck_id') ?? ''}
          onChange={e => updateParam('truck_id', e.target.value)}
          className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
        >
          <option value="">All Trucks</option>
          {trucks.map(tk => <option key={tk.id} value={tk.id}>{tk.truck_no}</option>)}
        </select>
      )}
      {hasFilters && (
        <button
          onClick={() => {
            setSearch('')
            router.replace(pathname)
          }}
          className="text-sm text-gray-500 hover:text-gray-700 px-2 py-1.5 underline"
        >
          Clear filters
        </button>
      )}
    </div>
  )
}

export function IncidentFilters({ sites, trucks }: FiltersProps) {
  return (
    <Suspense fallback={<div className="h-10 mb-4" />}>
      <FiltersInner sites={sites} trucks={trucks} />
    </Suspense>
  )
}