import { useEffect, useMemo, useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { ArrowDown, ArrowUp, Plus, Trash2 } from 'lucide-react'
import { Sheet, SheetContent, SheetDescription, SheetTitle } from '@/components/ui/sheet'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Button } from '@/components/ui/button'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'
import { useUiStore } from '@/stores/ui'
import { checklistQuery, tasksQuery, useCreateChecklistItem, useDeleteChecklistItem, useDeleteTask, useUpdateChecklistItem, useUpdateTask } from './queries'
import { PRIORITY_LABELS, SPHERE_LABELS, STATUS_LABELS } from './constants'
import type { TaskPriority, TaskStatus, TimeSphere } from '@/integrations/supabase/types'

export function TaskDrawer() {
  const selectedId = useUiStore((s) => s.selectedTaskId)
  const setSelected = useUiStore((s) => s.setSelectedTaskId)
  const { data: tasks = [] } = useQuery(tasksQuery)
  const task = useMemo(() => tasks.find((item) => item.id === selectedId), [tasks, selectedId])
  const [title, setTitle] = useState('')
  const [notes, setNotes] = useState('')
  const [newItem, setNewItem] = useState('')
  const update = useUpdateTask()
  const remove = useDeleteTask()
  useEffect(() => { setTitle(task?.title ?? ''); setNotes(task?.notes ?? '') }, [task?.id, task?.title, task?.notes])
  if (!task) return null
  return <Sheet open={Boolean(task)} onOpenChange={(open) => !open && setSelected(null)}><SheetContent className="overflow-y-auto"><SheetTitle className="pr-8 text-lg">Detalhes da tarefa</SheetTitle><SheetDescription className="mt-1 text-sm text-muted-foreground">Edite os campos; as alterações são salvas ao sair do campo.</SheetDescription>
    <div className="mt-6 space-y-5">
      <label className="space-y-1.5"><span className="text-xs font-medium text-muted-foreground">Título</span><Input value={title} onChange={(e)=>setTitle(e.target.value)} onBlur={()=> title.trim() && title !== task.title && update.mutate({id:task.id,patch:{title:title.trim()}})}/></label>
      <label className="space-y-1.5"><span className="text-xs font-medium text-muted-foreground">Notas</span><Textarea value={notes} onChange={(e)=>setNotes(e.target.value)} onBlur={()=> notes !== (task.notes ?? '') && update.mutate({id:task.id,patch:{notes:notes || null}})} placeholder="Detalhes, links e contexto..."/></label>
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <Field label="Status"><Select value={task.status} onValueChange={(status:TaskStatus)=>update.mutate({id:task.id,patch:{status,completed_at:status==='done' ? (task.completed_at ?? new Date().toISOString()) : null}})}><SelectTrigger><SelectValue/></SelectTrigger><SelectContent>{(Object.keys(STATUS_LABELS) as TaskStatus[]).map((key)=><SelectItem key={key} value={key}>{STATUS_LABELS[key]}</SelectItem>)}</SelectContent></Select></Field>
        <Field label="Prioridade"><Select value={task.priority} onValueChange={(priority:TaskPriority)=>update.mutate({id:task.id,patch:{priority}})}><SelectTrigger><SelectValue/></SelectTrigger><SelectContent>{(Object.keys(PRIORITY_LABELS) as TaskPriority[]).map((key)=><SelectItem key={key} value={key}>{PRIORITY_LABELS[key]}</SelectItem>)}</SelectContent></Select></Field>
        <Field label="Data de início"><Input type="date" value={task.start_date ?? ''} onChange={(e)=>update.mutate({id:task.id,patch:{start_date:e.target.value || null}})}/></Field>
        <Field label="Prazo"><Input type="date" value={task.due_date ?? ''} onChange={(e)=>update.mutate({id:task.id,patch:{due_date:e.target.value || null}})}/></Field>
      </div>
      <div className="space-y-3 rounded-lg border p-3"><Toggle label="Importante" checked={task.is_important} onChange={(is_important)=>update.mutate({id:task.id,patch:{is_important}})}/><Toggle label="Urgente" checked={task.is_urgent} onChange={(is_urgent)=>update.mutate({id:task.id,patch:{is_urgent}})}/><Toggle label="Foco de hoje" checked={task.is_focus_today} onChange={(is_focus_today)=>update.mutate({id:task.id,patch:{is_focus_today}})}/></div>
      <Field label="Esfera do tempo"><Select value={task.time_sphere ?? 'none'} onValueChange={(value)=>update.mutate({id:task.id,patch:{time_sphere:value === 'none' ? null : value as TimeSphere}})}><SelectTrigger><SelectValue placeholder="Não definida"/></SelectTrigger><SelectContent><SelectItem value="none">Não definida</SelectItem>{(Object.keys(SPHERE_LABELS) as TimeSphere[]).map((key)=><SelectItem key={key} value={key}>{SPHERE_LABELS[key]}</SelectItem>)}</SelectContent></Select></Field>
      <Checklist taskId={task.id} newItem={newItem} setNewItem={setNewItem}/>
      <Button variant="destructive" className="w-full" onClick={()=>remove.mutate(task.id,{onSuccess:()=>setSelected(null)})}><Trash2 className="size-4"/>Excluir tarefa</Button>
    </div>
  </SheetContent></Sheet>
}

function Field({ label, children }: { label:string; children:React.ReactNode }) { return <label className="space-y-1.5"><span className="text-xs font-medium text-muted-foreground">{label}</span>{children}</label> }
function Toggle({ label, checked, onChange }: { label:string; checked:boolean; onChange:(value:boolean)=>void }) { return <label className="flex items-center justify-between"><span>{label}</span><Switch checked={checked} onCheckedChange={onChange}/></label> }
function Checklist({ taskId, newItem, setNewItem }: { taskId:string; newItem:string; setNewItem:(v:string)=>void }) {
  const { data:items=[] } = useQuery(checklistQuery(taskId))
  const create = useCreateChecklistItem(taskId)
  const update = useUpdateChecklistItem(taskId)
  const remove = useDeleteChecklistItem(taskId)
  function add() { if(newItem.trim()) create.mutate(newItem,{onSuccess:()=>setNewItem('')}) }
  function move(index:number, direction:-1|1) { const target=items[index+direction]; const item=items[index]; if(!target||!item)return; update.mutate({id:item.id,patch:{position:target.position}}); update.mutate({id:target.id,patch:{position:item.position}}) }
  return <div className="space-y-2"><div className="text-xs font-medium text-muted-foreground">Checklist</div>{items.map((item,index)=><div key={item.id} className="flex items-center gap-2 rounded-lg border p-2"><input type="checkbox" checked={item.is_done} onChange={(e)=>update.mutate({id:item.id,patch:{is_done:e.target.checked}})} className="size-4 accent-primary"/><input value={item.title} onChange={(e)=>update.mutate({id:item.id,patch:{title:e.target.value}})} className="min-w-0 flex-1 bg-transparent outline-none"/><Button variant="ghost" size="icon" className="size-7" disabled={index===0} onClick={()=>move(index,-1)}><ArrowUp className="size-3.5"/></Button><Button variant="ghost" size="icon" className="size-7" disabled={index===items.length-1} onClick={()=>move(index,1)}><ArrowDown className="size-3.5"/></Button><Button variant="ghost" size="icon" className="size-7" onClick={()=>remove.mutate(item.id)}><Trash2 className="size-3.5"/></Button></div>)}<div className="flex gap-2"><Input value={newItem} onChange={(e)=>setNewItem(e.target.value)} onKeyDown={(e)=>e.key==='Enter'&&add()} placeholder="Novo item..."/><Button size="icon" onClick={add}><Plus className="size-4"/></Button></div></div>
}