import { Link, useNavigate } from '@tanstack/react-router'
import { useQueryClient } from '@tanstack/react-query'
import { BarChart3, Calendar, CalendarDays, ChevronLeft, Inbox, LayoutGrid, List, LogOut, Menu, Sparkles, Sun, Target } from 'lucide-react'
import { supabase } from '@/integrations/supabase/client'
import { useUiStore } from '@/stores/ui'
import { cn } from '@/lib/utils'
import { BrandLogo } from './brand-logo'
import { Button } from './ui/button'
import { Sheet, SheetContent, SheetTitle } from './ui/sheet'

const items = [
  ['/hoje', Sun, 'Hoje'], ['/inbox', Inbox, 'Caixa de entrada'], ['/proximos', CalendarDays, 'Próximos 7 dias'], ['/todas', List, 'Todas as tarefas'], ['/kanban', LayoutGrid, 'Kanban'], ['/calendario', Calendar, 'Calendário'], ['/produtividade', Sparkles, 'Produtividade'], ['/triade', Target, 'Tríade do Tempo'], ['/dashboard', BarChart3, 'Dashboard'],
] as const

function SidebarContent({ email, mobile = false }: { email?: string; mobile?: boolean }) {
  const collapsed = useUiStore((s) => s.sidebarCollapsed) && !mobile
  const toggle = useUiStore((s) => s.toggleSidebar)
  const setMobileOpen = useUiStore((s) => s.setMobileSidebarOpen)
  const queryClient = useQueryClient()
  const navigate = useNavigate()
  async function signOut() {
    await queryClient.cancelQueries()
    queryClient.clear()
    await supabase.auth.signOut()
    await navigate({ to: '/auth', replace: true })
  }
  return <div className="flex h-full flex-col bg-sidebar text-sidebar-foreground">
    <div className={cn('flex h-16 items-center border-b border-sidebar-border px-3', collapsed ? 'justify-center' : 'gap-3')}>
      <BrandLogo className="shrink-0"/>{!collapsed && <span className="truncate font-semibold">Central de Tarefas</span>}
    </div>
    <nav className="flex-1 space-y-1 overflow-y-auto p-2">
      {items.map(([to, Icon, label]) => <Link key={to} to={to} onClick={() => mobile && setMobileOpen(false)} activeProps={{ className: 'bg-sidebar-accent text-sidebar-accent-foreground' }} className={cn('flex h-10 items-center rounded-lg px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground', collapsed ? 'justify-center px-0' : 'gap-3')} title={collapsed ? label : undefined}><Icon className="size-4 shrink-0"/>{!collapsed && <span>{label}</span>}</Link>)}
    </nav>
    <div className="border-t border-sidebar-border p-2">
      {!collapsed && <div className="mb-2 truncate px-2 text-xs text-muted-foreground">{email}</div>}
      <Button variant="ghost" className={cn('w-full text-muted-foreground', collapsed ? 'px-0' : 'justify-start')} onClick={signOut}><LogOut className="size-4"/>{!collapsed && 'Sair'}</Button>
    </div>
    {!mobile && <Button variant="outline" size="icon" className="absolute -right-4 top-20 size-8 rounded-full bg-background" onClick={toggle}><ChevronLeft className={cn('size-4 transition-transform', collapsed && 'rotate-180')}/></Button>}
  </div>
}

export function DesktopSidebar({ email }: { email?: string }) {
  const collapsed = useUiStore((s) => s.sidebarCollapsed)
  return <aside className={cn('relative hidden h-screen shrink-0 border-r border-sidebar-border transition-[width] md:block', collapsed ? 'w-14' : 'w-56')}><SidebarContent email={email}/></aside>
}

export function MobileSidebar({ email }: { email?: string }) {
  const open = useUiStore((s) => s.mobileSidebarOpen)
  const setOpen = useUiStore((s) => s.setMobileSidebarOpen)
  return <><Button variant="ghost" size="icon" className="md:hidden" onClick={() => setOpen(true)}><Menu className="size-5"/></Button><Sheet open={open} onOpenChange={setOpen}><SheetContent side="left" className="w-72 p-0"><SheetTitle className="sr-only">Navegação</SheetTitle><SidebarContent email={email} mobile/></SheetContent></Sheet></>
}