import { Outlet, useLocation } from '@tanstack/react-router'
import { useEffect } from 'react'
import type { User } from '@supabase/supabase-js'
import { DesktopSidebar, MobileSidebar } from './app-sidebar'
import { ThemeToggle } from './theme-toggle'
import { useUiStore } from '@/stores/ui'
import { TaskDrawer } from '@/features/tasks/task-drawer'

const titles: Record<string, string> = { '/hoje':'Hoje', '/inbox':'Caixa de entrada', '/proximos':'Próximos 7 dias', '/todas':'Todas as tarefas', '/kanban':'Kanban', '/calendario':'Calendário', '/produtividade':'Produtividade', '/triade':'Tríade do Tempo', '/dashboard':'Dashboard' }

export function AppShell({ user }: { user: User }) {
  const pathname = useLocation({ select: (s) => s.pathname })
  const setNewTaskOpen = useUiStore((s) => s.setNewTaskOpen)
  const focusSearch = useUiStore((s) => s.focusSearch)
  const setSelected = useUiStore((s) => s.setSelectedTaskId)
  useEffect(() => {
    const onKey = (event: KeyboardEvent) => {
      const target = event.target as HTMLElement | null
      const typing = target?.matches('input, textarea, [contenteditable="true"]')
      if (!typing && event.key.toLowerCase() === 'n') { event.preventDefault(); setNewTaskOpen(true) }
      if (!typing && event.key === '/') { event.preventDefault(); focusSearch() }
      if (event.key === 'Escape') setSelected(null)
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [focusSearch, setNewTaskOpen, setSelected])
  return <div className="flex min-h-screen bg-background"><DesktopSidebar email={user.email}/><div className="min-w-0 flex-1"><header className="sticky top-0 z-30 flex h-16 items-center gap-3 border-b bg-background/90 px-4 backdrop-blur md:px-6"><MobileSidebar email={user.email}/><h1 className="text-lg font-semibold">{titles[pathname] ?? 'Central de Tarefas'}</h1><div className="ml-auto"><ThemeToggle/></div></header><main className="mx-auto max-w-7xl p-4 md:p-6"><Outlet/></main></div><TaskDrawer/></div>
}