'use client'

// 2026-04-26 P2.5 by Claude — AIOps Timeline
// ============================================================
// TimelineFilter — 篩選器元件
// incident_id 搜尋 + 時間範圍 + 狀態過濾
// ============================================================

import { useTranslations } from 'next-intl'
import { Search, Clock, Filter } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { TimelineFilterState } from './types'

interface TimelineFilterProps {
  filter: TimelineFilterState
  onChange: (updated: Partial<TimelineFilterState>) => void
  incidentCount: number
}

const TIME_RANGES: Array<{ value: TimelineFilterState['time_range']; labelKey: string }> = [
  { value: '1h',  labelKey: '1h' },
  { value: '6h',  labelKey: '6h' },
  { value: '24h', labelKey: '24h' },
  { value: '7d',  labelKey: '7d' },
]

const STATUS_FILTERS: Array<{ value: TimelineFilterState['status_filter']; labelKey: string }> = [
  { value: 'all',     labelKey: 'all' },
  { value: 'success', labelKey: 'success' },
  { value: 'failed',  labelKey: 'failed' },
  { value: 'running', labelKey: 'running' },
]

export function TimelineFilter({ filter, onChange, incidentCount }: TimelineFilterProps) {
  const t = useTranslations('aiopsTimeline')

  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4 mb-6">
      {/* 事件編號搜尋 */}
      <div className="relative flex-1 min-w-0">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-nothing-gray-400 pointer-events-none" />
        <input
          type="text"
          value={filter.incident_id}
          onChange={(e) => onChange({ incident_id: e.target.value })}
          placeholder={t('filters.incident_id_placeholder')}
          className={cn(
            'w-full pl-9 pr-3 py-2 rounded-lg',
            'bg-white border border-nothing-gray-200',
            'font-body text-sm text-nothing-black',
            'placeholder:text-nothing-gray-400',
            'focus:outline-none focus:ring-2 focus:ring-claw-blue/30 focus:border-claw-blue',
            'transition-colors'
          )}
          aria-label={t('filters.incident_id')}
        />
      </div>

      {/* 時間範圍 */}
      <div className="flex items-center gap-1.5">
        <Clock className="w-3.5 h-3.5 text-nothing-gray-400 flex-shrink-0" aria-hidden="true" />
        <div className="flex gap-1" role="group" aria-label={t('filters.time_range')}>
          {TIME_RANGES.map(({ value, labelKey }) => (
            <button
              key={value}
              onClick={() => onChange({ time_range: value })}
              className={cn(
                'px-2.5 py-1.5 rounded text-xs font-body font-medium transition-colors',
                filter.time_range === value
                  ? 'bg-nothing-black text-white'
                  : 'bg-nothing-gray-100 text-nothing-gray-600 hover:bg-nothing-gray-200'
              )}
              aria-pressed={filter.time_range === value}
            >
              {t(`filters.timeRange.${labelKey}`)}
            </button>
          ))}
        </div>
      </div>

      {/* 狀態過濾 */}
      <div className="flex items-center gap-1.5">
        <Filter className="w-3.5 h-3.5 text-nothing-gray-400 flex-shrink-0" aria-hidden="true" />
        <div className="flex gap-1" role="group" aria-label={t('filters.status_filter')}>
          {STATUS_FILTERS.map(({ value, labelKey }) => (
            <button
              key={value}
              onClick={() => onChange({ status_filter: value })}
              className={cn(
                'px-2.5 py-1.5 rounded text-xs font-body font-medium transition-colors',
                filter.status_filter === value
                  ? 'bg-nothing-black text-white'
                  : 'bg-nothing-gray-100 text-nothing-gray-600 hover:bg-nothing-gray-200'
              )}
              aria-pressed={filter.status_filter === value}
            >
              {t(`filters.statusFilter.${labelKey}`)}
            </button>
          ))}
        </div>
      </div>

      {/* 結果計數 */}
      <div className="text-xs font-body text-nothing-gray-400 whitespace-nowrap">
        {t('filters.incident_count', { count: incidentCount })}
      </div>
    </div>
  )
}
