import { ArrowDown, ArrowDownUp, ArrowUp } from 'lucide-react';

export type SortDirection = 'asc' | 'desc';

export function SortableColumnHeader<Key extends string>({
  label,
  sortKey,
  activeSortKey,
  sortDirection,
  onSort,
  align = 'left',
  className = '',
}: {
  label: string;
  sortKey: Key;
  activeSortKey: Key;
  sortDirection: SortDirection;
  onSort: (sortKey: Key) => void;
  align?: 'left' | 'right' | 'center';
  className?: string;
}) {
  const active = activeSortKey === sortKey;
  const Icon = active ? (sortDirection === 'asc' ? ArrowUp : ArrowDown) : ArrowDownUp;
  const order = active ? (sortDirection === 'asc' ? '升序' : '降序') : '未排序';
  const justify = align === 'right' ? 'justify-end' : align === 'center' ? 'justify-center' : 'justify-start';

  return (
    <button
      type="button"
      onClick={() => onSort(sortKey)}
      className={`inline-flex w-full items-center ${justify} gap-1 rounded px-1 py-0.5 transition-colors ${active ? 'text-blue-600' : 'text-slate-400 hover:bg-slate-100 hover:text-slate-600'} ${className}`}
      title={`${label}：${order}，点击切换`}
      aria-label={`${label}：${order}，点击切换`}
      aria-sort={active ? (sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'}
    >
      <span>{label}</span>
      <Icon size={12} strokeWidth={active ? 2.5 : 2} />
    </button>
  );
}

export function toggleSort<Key extends string>(
  currentKey: Key,
  currentDirection: SortDirection,
  nextKey: Key,
): { key: Key; direction: SortDirection } {
  return nextKey === currentKey
    ? { key: currentKey, direction: currentDirection === 'asc' ? 'desc' : 'asc' }
    : { key: nextKey, direction: 'desc' };
}

export function sortBy<Key extends string, Row>(
  rows: Row[],
  sortKey: Key,
  sortDirection: SortDirection,
  valueOf: (row: Row, key: Key) => string | number | null | undefined,
): Row[] {
  const multiplier = sortDirection === 'asc' ? 1 : -1;
  // Keep the caller's row order immutable while remaining compatible with the
  // ES2022 target used by this dashboard (Array.prototype.toSorted is ES2023).
  return [...rows].sort((left, right) => {
    const leftValue = valueOf(left, sortKey) ?? '';
    const rightValue = valueOf(right, sortKey) ?? '';
    if (typeof leftValue === 'number' && typeof rightValue === 'number') return (leftValue - rightValue) * multiplier;
    return String(leftValue).localeCompare(String(rightValue), 'zh-CN', { numeric: true }) * multiplier;
  });
}