import { useTranslation } from 'react-i18next'
import { AnnotationStatus } from '../../types'

interface DatasetFilterBarProps {
  fromDate: string
  toDate: string
  onFromDateChange: (v: string) => void
  onToDateChange: (v: string) => void
  statusFilter: AnnotationStatus | null
  onStatusFilterChange: (s: AnnotationStatus | null) => void
  flightName: string | null
  shownCount: number
  totalCount: number
}

export default function DatasetFilterBar({
  fromDate,
  toDate,
  onFromDateChange,
  onToDateChange,
  statusFilter,
  onStatusFilterChange,
  flightName,
  shownCount,
  totalCount,
}: DatasetFilterBarProps) {
  const { t } = useTranslation()

  const STATUS_OPTIONS = [
    {
      value: null,
      label: t('dataset.status.all'),
      tone: 'muted' as const,
      dot: 'var(--text-muted)',
    },
    {
      value: AnnotationStatus.Created,
      label: t('dataset.status.created'),
      tone: 'amber' as const,
      dot: 'var(--accent-amber)',
    },
    {
      value: AnnotationStatus.Edited,
      label: t('dataset.status.edited'),
      tone: 'blue' as const,
      dot: 'var(--accent-blue)',
    },
    {
      value: AnnotationStatus.Validated,
      label: t('dataset.status.validated'),
      tone: 'green' as const,
      dot: 'var(--accent-green)',
    },
  ]

  return (
    <div
      className="bracket panel relative flex items-center gap-3 px-3 shrink-0"
      style={{ height: 48 }}
    >
      <span className="br" />

      {/* Range group */}
      <div className="flex items-center gap-2">
        <span className="micro">{t('dataset.range')}</span>
        <input
          type="date"
          className="inp inp-mono cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:inset-0 [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:cursor-pointer"
          style={{ width: 104, height: 28, padding: '0 10px' }}
          value={fromDate}
          onChange={e => onFromDateChange(e.target.value)}
          onClick={e => e.currentTarget.showPicker?.()}
        />
        <span className="mono text-text-muted">—</span>
        <input
          type="date"
          className="inp inp-mono cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:inset-0 [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:cursor-pointer"
          style={{ width: 104, height: 28, padding: '0 10px' }}
          value={toDate}
          onChange={e => onToDateChange(e.target.value)}
          onClick={e => e.currentTarget.showPicker?.()}
        />
      </div>

      {/* divider */}
      <span className="w-px h-5 bg-border-hair shrink-0" />

      {/* Flight group — display-only chip */}
      <div className="flex items-center gap-2">
        <span className="micro">{t('dataset.flight')}</span>
        <div
          className="inp inline-flex items-center gap-2"
          style={{ padding: '0 10px', height: 28, cursor: 'default' }}
        >
          <span className="w-1.5 h-1.5 rounded-full bg-accent-amber" />
          <span className="mono text-[12px] text-text-primary tracking-wider">
            {flightName ?? '—'}
          </span>
          <span className="text-[10px] text-text-muted ml-1">▾</span>
        </div>
      </div>

      {/* divider */}
      <span className="w-px h-5 bg-border-hair shrink-0" />

      {/* Status chips */}
      <div className="flex items-center gap-1.5">
        <span className="micro mr-1">{t('dataset.statusLabel')}</span>
        {STATUS_OPTIONS.map(opt => {
          const isActive = statusFilter === opt.value
          const stateCls = !isActive
            ? 'text-text-secondary border-border-hair hover:text-text-primary hover:border-border-raised'
            : opt.tone === 'muted'
              ? 'text-text-primary border-border-raised bg-text-muted/20'
              : opt.tone === 'amber'
                ? 'text-accent-amber border-accent-amber bg-accent-amber/10'
                : opt.tone === 'blue'
                  ? 'text-accent-blue border-accent-blue bg-accent-blue/10'
                  : /* green */ 'text-accent-green border-accent-green bg-accent-green/10'
          return (
            <button
              key={String(opt.value)}
              type="button"
              onClick={() => onStatusFilterChange(opt.value)}
              className={`inline-flex items-center gap-1.5 h-6 px-2.5 rounded-[2px] border font-mono text-[10px] font-semibold uppercase tracking-widest cursor-pointer transition-colors ${stateCls}`}
            >
              <span
                className="rounded-full shrink-0"
                style={{ width: 6, height: 6, background: opt.dot }}
              />
              {opt.label}
            </button>
          )
        })}
      </div>

      {/* right side */}
      <div className="ml-auto flex items-center gap-3">
        <span className="micro" style={{ color: 'var(--text-muted)' }}>
          {t('dataset.showing')}
        </span>
        <span className="mono text-[12px] text-text-primary tabular-nums">
          {shownCount.toLocaleString()}
          <span className="text-text-muted"> / {totalCount.toLocaleString()}</span>
        </span>
        <span className="w-px h-5 bg-border-hair shrink-0" />
        <button
          type="button"
          title={t('dataset.sort')}
          className="w-7 h-7 inline-flex items-center justify-center border border-border-hair rounded-[2px] text-text-secondary hover:text-text-primary hover:border-border-raised transition-colors"
          disabled
        >
          <svg
            width="13"
            height="13"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.6"
          >
            <path d="M3 6h18M6 12h12M10 18h4" />
          </svg>
        </button>
        <button
          type="button"
          title={t('dataset.gridDensity')}
          className="w-7 h-7 inline-flex items-center justify-center border border-border-hair rounded-[2px] text-text-secondary hover:text-text-primary hover:border-border-raised transition-colors"
          disabled
        >
          <svg
            width="13"
            height="13"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.6"
          >
            <rect x="3" y="3" width="7" height="7" />
            <rect x="14" y="3" width="7" height="7" />
            <rect x="3" y="14" width="7" height="7" />
            <rect x="14" y="14" width="7" height="7" />
          </svg>
        </button>
      </div>
    </div>
  )
}
