import { useMemo, useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { addMonths, eachDayOfInterval, endOfMonth, endOfWeek, format, isSameDay, isSameMonth, startOfMonth, startOfWeek, subMonths } from 'date-fns'
import { ptBR } from 'date-fns/locale'
import { ChevronLeft, ChevronRight, Plus } from 'lucide-react'
import { tasksQuery, useCreateTask } from './queries'
import { Button } from '@/components/ui/button'
import { useUiStore } from '@/stores/ui'
import { cn } from '@/lib/utils'

export function CalendarView() {
  const {data:tasks=[]}=useQuery(tasksQuery)
  const [month,setMonth]=useState(new Date())
  const create=useCreateTask()
  const open=useUiStore((s)=>s.setSelectedTaskId)
  const days=useMemo(()=>eachDayOfInterval({start:startOfWeek(startOfMonth(month),{weekStartsOn:0}),end:endOfWeek(endOfMonth(month),{weekStartsOn:0})}),[month])
  function quickAdd(day:Date){const title=window.prompt('Título da nova tarefa:'); if(title?.trim()) create.mutate({title:title.trim(),status:'todo',due_date:format(day,'yyyy-MM-dd')})}
  return <div className="space-y-4"><div className="flex items-center justify-between"><Button variant="outline" size="icon" onClick={()=>setMonth(subMonths(month,1))}><ChevronLeft className="size-4"/></Button><h2 className="text-lg font-semibold capitalize">{format(month,'MMMM yyyy',{locale:ptBR})}</h2><Button variant="outline" size="icon" onClick={()=>setMonth(addMonths(month,1))}><ChevronRight className="size-4"/></Button></div><div className="grid grid-cols-7 overflow-hidden rounded-xl border bg-card"><>{['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'].map((d)=><div key={d} className="border-b bg-muted p-2 text-center text-xs font-medium text-muted-foreground">{d}</div>)}</>{days.map((day)=><div key={day.toISOString()} className={cn('group min-h-28 border-b border-r p-2',!isSameMonth(day,month)&&'bg-muted/40 text-muted-foreground')}><div className="flex items-center justify-between"><span className="text-xs font-medium">{format(day,'d')}</span><button type="button" onClick={()=>quickAdd(day)} className="rounded p-1 opacity-0 hover:bg-accent group-hover:opacity-100"><Plus className="size-3"/></button></div><div className="mt-2 space-y-1">{tasks.filter((t)=>t.due_date&&isSameDay(new Date(`${t.due_date}T12:00:00`),day)).slice(0,4).map((task)=><button type="button" key={task.id} onClick={()=>open(task.id)} className="block w-full truncate rounded bg-accent px-2 py-1 text-left text-[11px] text-accent-foreground">{task.title}</button>)}</div></div>)}</div></div>
}