import { Check, Tag } from 'lucide-react'
import { isBefore, startOfToday } from 'date-fns'
import { Badge } from '@/components/ui/badge'
import { cn } from '@/lib/utils'
import type { Task } from '@/integrations/supabase/types'
import { useToggleComplete } from './queries'
import { DatePopover, PriorityPopover } from './task-controls'
import { useUiStore } from '@/stores/ui'

export function TaskRow({ task }: { task: Task }) {
  const toggle = useToggleComplete()
  const open = useUiStore((s) => s.setSelectedTaskId)
  const overdue = Boolean(task.due_date && task.status !== 'done' && isBefore(new Date(`${task.due_date}T12:00:00`), startOfToday()))
  return <div className="group flex items-center gap-3 border-b px-2 py-3 last:border-b-0 hover:bg-muted/50">
    <button type="button" aria-label={task.status === 'done' ? 'Reabrir tarefa' : 'Concluir tarefa'} onClick={() => toggle.mutate(task)} className={cn('flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors', task.status === 'done' ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground/50 hover:border-primary')}>{task.status === 'done' && <Check className="size-3"/>}</button>
    <button type="button" onClick={() => open(task.id)} className="min-w-0 flex-1 text-left"><span className={cn('block truncate font-medium', task.status === 'done' && 'text-muted-foreground line-through')}>{task.title}</span>{task.notes && <span className="block truncate text-xs text-muted-foreground">{task.notes}</span>}</button>
    <Tag className="hidden size-3.5 text-muted-foreground/60 sm:block" aria-label="Etiquetas"/>
    <div className="hidden items-center gap-1 md:flex"><PriorityPopover task={task}/><span className={cn(overdue && 'rounded-md bg-overdue-bg text-overdue-fg')}><DatePopover task={task}/></span></div>
    {overdue && <Badge className="border-transparent bg-overdue-bg text-overdue-fg md:hidden">Atrasada</Badge>}
  </div>
}