import { useEffect, useMemo, useRef, useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Search } from 'lucide-react'
import { tasksQuery } from './queries'
import { TaskRow } from './task-row'
import { AddTaskInline } from './add-task-inline'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { useUiStore } from '@/stores/ui'
import type { Task } from '@/integrations/supabase/types'

type Filter = (task: Task) => boolean
export function TaskListView({ filter, emptyText = 'Nenhuma tarefa por aqui.', allowCompletedToggle = false, defaultStatus = 'todo' }: { filter?:Filter; emptyText?:string; allowCompletedToggle?:boolean; defaultStatus?:Task['status'] }) {
  const { data = [] } = useQuery(tasksQuery)
  const [search, setSearch] = useState('')
  const [showCompleted, setShowCompleted] = useState(false)
  const searchRef = useRef<HTMLInputElement>(null)
  const focusAt = useUiStore((s)=>s.searchFocusedAt)
  useEffect(()=>{ if(focusAt) searchRef.current?.focus() },[focusAt])
  const tasks = useMemo(() => data.filter((task) => (filter ? filter(task) : true)).filter((task) => showCompleted || !allowCompletedToggle || task.status !== 'done').filter((task) => task.title.toLocaleLowerCase('pt-BR').includes(search.toLocaleLowerCase('pt-BR'))), [data, filter, search, showCompleted, allowCompletedToggle])
  return <div className="space-y-4"><div className="flex flex-col gap-3 sm:flex-row sm:items-center"><div className="relative max-w-md flex-1"><Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"/><Input ref={searchRef} className="pl-9" placeholder="Buscar tarefas...  /" value={search} onChange={(e)=>setSearch(e.target.value)}/></div>{allowCompletedToggle && <label className="flex items-center gap-2 text-sm text-muted-foreground"><Switch checked={showCompleted} onCheckedChange={setShowCompleted}/>Mostrar concluídas</label>}</div><Card className="overflow-hidden"><AddTaskInline status={defaultStatus}/>{tasks.length ? tasks.map((task)=><TaskRow key={task.id} task={task}/>) : <div className="p-10 text-center text-muted-foreground">{emptyText}</div>}</Card></div>
}