'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
import { AppSidebar } from '@/components/app-sidebar'
import { DashboardHeader } from '@/components/dashboard-header'
import { useAuthStore } from '@/stores/auth-store'
import { useT } from '@/stores/language-store'

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter()
  const user = useAuthStore((s) => s.user)
  const isLoading = useAuthStore((s) => s.isLoading)
  const fetchUser = useAuthStore((s) => s.fetchUser)
  const t = useT()

  useEffect(() => {
    // Only bootstrap when we have no user yet (e.g. hard refresh on a protected route).
    // After a successful login the store already has the user — refetching here
    // races with the redirect and a transient /me failure would bounce us back to /login.
    if (!user) {
      fetchUser()
    }
  }, [fetchUser, user])

  useEffect(() => {
    if (!isLoading && !user) {
      router.push('/login')
    }
  }, [isLoading, user, router])

  if (isLoading) {
    return (
      <div className="flex min-h-svh items-center justify-center">
        <div className="flex flex-col items-center gap-3">
          <div className="border-primary size-8 animate-spin rounded-full border-2 border-t-transparent" />
          <p className="text-muted-foreground text-sm">{t('loading')}</p>
        </div>
      </div>
    )
  }

  if (!user) {
    return null
  }

  return (
    <SidebarProvider className="h-svh overflow-hidden">
      <AppSidebar />
      <SidebarInset className="min-w-0">
        <DashboardHeader />
        <main className="flex min-w-0 flex-1 flex-col overflow-x-hidden overflow-y-auto [scrollbar-gutter:stable]">{children}</main>
      </SidebarInset>
    </SidebarProvider>
  )
}
