import { useState, useCallback } from 'react'
import { ArrowDownUp, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { useProjectStore } from '@/stores'
import { useI18n } from '@/i18n/useI18n'

export function SortProjectsButton(): React.JSX.Element {
  const [isSorting, setIsSorting] = useState(false)
  const sortProjectsByLastMessage = useProjectStore((s) => s.sortProjectsByLastMessage)
  const { t } = useI18n()

  const handleSort = useCallback(async (): Promise<void> => {
    if (isSorting) return
    setIsSorting(true)
    try {
      await sortProjectsByLastMessage()
    } finally {
      setIsSorting(false)
    }
  }, [isSorting, sortProjectsByLastMessage])

  return (
    <Button
      variant="ghost"
      size="icon"
      className="h-7 w-7 rounded-lg text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/70"
      title={t('sidebar.sortProjectsTitle')}
      onClick={handleSort}
      disabled={isSorting}
      data-testid="sort-projects-button"
    >
      {isSorting ? (
        <Loader2 className="h-4 w-4 animate-spin" />
      ) : (
        <ArrowDownUp className="h-4 w-4" />
      )}
    </Button>
  )
}
