import { CalendarIcon, Flag } from 'lucide-react'
import { format } from 'date-fns'
import { ptBR } from 'date-fns/locale'
import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Input } from '@/components/ui/input'
import { PRIORITY_CLASSES, PRIORITY_LABELS } from './constants'
import type { Task, TaskPriority } from '@/integrations/supabase/types'
import { useUpdateTask } from './queries'

export function PriorityPopover({ task }: { task: Task }) {
  const update = useUpdateTask()
  const priorities = Object.keys(PRIORITY_LABELS) as TaskPriority[]
  return <Popover><PopoverTrigger asChild><Button variant="ghost" size="sm" className="h-7 px-2"><span className={`priority-dot ${PRIORITY_CLASSES[task.priority]}`}/><span className="hidden sm:inline">{PRIORITY_LABELS[task.priority]}</span></Button></PopoverTrigger><PopoverContent className="w-52 p-1" align="end">{priorities.map((priority) => <button type="button" key={priority} onClick={() => update.mutate({ id:task.id, patch:{ priority } })} className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm hover:bg-accent"><span className={`priority-dot ${PRIORITY_CLASSES[priority]}`}/>{PRIORITY_LABELS[priority]}</button>)}</PopoverContent></Popover>
}

export function DatePopover({ task }: { task: Task }) {
  const update = useUpdateTask()
  return <Popover><PopoverTrigger asChild><Button variant="ghost" size="sm" className="h-7 px-2"><CalendarIcon className="size-3.5"/>{task.due_date ? format(new Date(`${task.due_date}T12:00:00`), "d 'de' MMM", { locale:ptBR }) : 'Data'}</Button></PopoverTrigger><PopoverContent className="w-64" align="end"><label className="mb-2 block text-xs font-medium text-muted-foreground">Data de conclusão</label><Input type="date" value={task.due_date ?? ''} onChange={(e) => update.mutate({ id:task.id, patch:{ due_date:e.target.value || null } })}/>{task.due_date && <Button variant="ghost" size="sm" className="mt-2 w-full" onClick={() => update.mutate({ id:task.id, patch:{ due_date:null } })}>Remover data</Button>}</PopoverContent></Popover>
}