import { useQuery } from '@tanstack/react-query'
import { useState } from 'react'
import { tasksQuery, useUpdateTask } from './queries'
import { STATUS_LABELS } from './constants'
import type { TaskStatus } from '@/integrations/supabase/types'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { AddTaskInline } from './add-task-inline'
import { useUiStore } from '@/stores/ui'

const statuses: TaskStatus[] = ['inbox','todo','in_progress','done']
export function KanbanBoard() {
  const {data:tasks=[]}=useQuery(tasksQuery)
  const update=useUpdateTask()
  const open=useUiStore((s)=>s.setSelectedTaskId)
  const [dragging,setDragging]=useState<string|null>(null)
  return <div className="grid gap-4 lg:grid-cols-4">{statuses.map((status)=><section key={status} onDragOver={(e)=>e.preventDefault()} onDrop={()=>{if(dragging)update.mutate({id:dragging,patch:{status,completed_at:status==='done'?new Date().toISOString():null}});setDragging(null)}} className="min-h-72 rounded-xl bg-muted/60 p-3"><header className="mb-3 flex items-center justify-between"><h2 className="font-semibold">{STATUS_LABELS[status]}</h2><Badge>{tasks.filter((t)=>t.status===status).length}</Badge></header><div className="space-y-2">{tasks.filter((t)=>t.status===status).map((task)=><Card key={task.id} draggable onDragStart={()=>setDragging(task.id)} onClick={()=>open(task.id)} className="cursor-grab p-3 active:cursor-grabbing"><div className="font-medium">{task.title}</div>{task.due_date&&<div className="mt-2 text-xs text-muted-foreground">Prazo: {task.due_date}</div>}</Card>)}</div><div className="mt-2"><AddTaskInline status={status}/></div></section>)}</div>
}