import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react'
import { TableHead } from '@/components/ui/table'
import { useI18n } from '@/i18n'
import type { SortState } from '@/lib/table-sort'

// Header cell with a state-aware indicator: unsorted → faded ChevronsUpDown,
// asc → ArrowUp, desc → ArrowDown. Right-aligned columns put the indicator
// LEFT of the label so the label stays flush with its numbers. `aria-sort`
// lives on the <th>, where assistive tech expects it.
export function SortableHeader<C extends string>({ column, label, align = 'left', className, sort, onToggle }: {
  column: C
  label: string
  align?: 'left' | 'right'
  className?: string
  sort: SortState<C>
  onToggle: (col: C) => void
}) {
  const { t } = useI18n()
  const direction = sort?.column === column ? sort.direction : null
  const Indicator = direction === 'asc' ? ArrowUp : direction === 'desc' ? ArrowDown : ChevronsUpDown
  return (
    <TableHead
      className={[align === 'right' ? 'text-right' : '', className].filter(Boolean).join(' ') || undefined}
      aria-sort={direction === 'asc' ? 'ascending' : direction === 'desc' ? 'descending' : 'none'}
    >
      <button
        type="button"
        onClick={() => onToggle(column)}
        aria-label={t('analytics.sortBy', { column: label })}
        className={`inline-flex items-center gap-1 select-none ${align === 'right' ? 'flex-row-reverse' : ''}`}
      >
        <span>{label}</span>
        <Indicator className={`size-3 shrink-0 ${direction ? '' : 'text-muted-foreground opacity-60'}`} aria-hidden="true" />
      </button>
    </TableHead>
  )
}