import { useEffect, useRef, useState } from 'react'
import { Plus } from 'lucide-react'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { useCreateTask } from './queries'
import type { TaskStatus } from '@/integrations/supabase/types'
import { useUiStore } from '@/stores/ui'

export function AddTaskInline({ status = 'todo', dueDate }: { status?: TaskStatus; dueDate?: string }) {
  const [title, setTitle] = useState('')
  const [active, setActive] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)
  const create = useCreateTask()
  const requested = useUiStore((s) => s.newTaskOpen)
  const setRequested = useUiStore((s) => s.setNewTaskOpen)
  useEffect(() => { if (requested) { setActive(true); queueMicrotask(() => inputRef.current?.focus()); setRequested(false) } }, [requested, setRequested])
  function submit() {
    if (!title.trim()) return
    create.mutate({ title:title.trim(), status, due_date:dueDate ?? null }, { onSuccess: () => { setTitle(''); inputRef.current?.focus() } })
  }
  if (!active) return <Button variant="ghost" className="w-full justify-start text-muted-foreground" onClick={() => { setActive(true); queueMicrotask(() => inputRef.current?.focus()) }}><Plus className="size-4"/>Adicionar tarefa <kbd className="ml-auto rounded border px-1.5 text-[10px]">N</kbd></Button>
  return <div className="flex gap-2 p-2"><Input ref={inputRef} value={title} onChange={(e)=>setTitle(e.target.value)} onKeyDown={(e)=>{ if(e.key==='Enter') submit(); if(e.key==='Escape'){setActive(false);setTitle('')} }} placeholder="Digite a tarefa e pressione Enter"/><Button onClick={submit} disabled={!title.trim() || create.isPending}>Adicionar</Button></div>
}