import { useTranslation } from 'react-i18next'
import DatasetClassList from './DatasetClassList'

interface DatasetLeftPanelProps {
  selectedClassNum: number
  onSelectClass: (n: number) => void
  classCounts: Record<number, number>
  objectsOnly: boolean
  onObjectsOnlyChange: (v: boolean) => void
  search: string
  onSearchChange: (v: string) => void
  totalCount: number
  validatedCount: number
}

export default function DatasetLeftPanel({
  selectedClassNum,
  onSelectClass,
  classCounts,
  objectsOnly,
  onObjectsOnlyChange,
  search,
  onSearchChange,
  totalCount,
  validatedCount,
}: DatasetLeftPanelProps) {
  const { t } = useTranslation()

  return (
    <aside className="bracket panel flex flex-col shrink-0" style={{ width: 250 }}>
      <span className="br" />

      <DatasetClassList
        selectedClassNum={selectedClassNum}
        onSelect={onSelectClass}
        counts={classCounts}
      />

      <div className="mt-auto border-t border-border-hair px-3 py-3 flex flex-col gap-3">
        <span className="micro">{t('dataset.filters')}</span>

        <div className="flex items-center justify-between">
          <div className="flex flex-col">
            <span className="text-[12px] text-text-primary">{t('dataset.objectsOnly')}</span>
            <span className="text-[10px] text-text-muted">{t('dataset.hideEmpty')}</span>
          </div>
          <button
            type="button"
            role="switch"
            aria-checked={objectsOnly}
            onClick={() => onObjectsOnlyChange(!objectsOnly)}
            className={`relative shrink-0 rounded-[2px] border transition-colors ${
              objectsOnly
                ? 'border-accent-amber bg-accent-amber/20'
                : 'border-border-hair bg-surface-0'
            }`}
            style={{ width: 30, height: 16 }}
          >
            <span
              className={`absolute top-px left-px block rounded-[2px] transition-transform ${
                objectsOnly ? 'bg-accent-amber' : 'bg-text-muted'
              }`}
              style={{
                width: 12,
                height: 12,
                transform: objectsOnly ? 'translateX(14px)' : 'translateX(0)',
              }}
            />
          </button>
        </div>

        <div className="relative">
          <svg
            className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none"
            width="13"
            height="13"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.8"
          >
            <circle cx="11" cy="11" r="7" />
            <line x1="21" y1="21" x2="16.65" y2="16.65" />
          </svg>
          <input
            type="text"
            className="inp w-full"
            style={{ height: 28, padding: '0 10px 0 28px' }}
            placeholder={t('dataset.search')}
            value={search}
            onChange={e => onSearchChange(e.target.value)}
          />
        </div>

        <div className="grid grid-cols-2 gap-2 pt-1">
          <div className="border border-border-hair rounded-[2px] p-2">
            <div className="micro" style={{ color: 'var(--text-muted)' }}>{t('dataset.total')}</div>
            <div className="mono text-[15px] text-text-primary">{totalCount.toLocaleString()}</div>
          </div>
          <div className="border border-border-hair rounded-[2px] p-2">
            <div className="micro" style={{ color: 'var(--text-muted)' }}>{t('dataset.validatedCount')}</div>
            <div className="mono text-[15px] text-accent-green">{validatedCount.toLocaleString()}</div>
          </div>
        </div>
      </div>
    </aside>
  )
}
