'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import AccountSidebar from '@/components/AccountSidebar'
import Loader from '@/components/ui/Loader'
import { RiUser3Line } from 'react-icons/ri'
import { CgNotes } from 'react-icons/cg'
import { FaStar } from 'react-icons/fa6'
import useUserStore from '@/app/store/userStore'

export default function AccountLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()
  const { isAuthenticated, user } = useUserStore()

  useEffect(() => {
    if (!isAuthenticated || !user) {
      router.replace('/login')
      return
    }

    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 300)

    return () => clearTimeout(timer)
  }, [isAuthenticated, user, router])

  if (!isAuthenticated || !user || isLoading) {
    return <Loader />
  }

  const userNavigation = [
    { name: 'Профиль', href: '/account', icon: RiUser3Line },
    { name: 'Мои маршруты', href: '/account/routes', icon: CgNotes },
  ]

  return (
    <div className="min-h-full">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex flex-col md:flex-row gap-6">
          <div className="w-full md:w-64 flex-shrink-0">
            <div className="sticky top-8">
              <AccountSidebar user={user} navigation={userNavigation} />
            </div>
          </div>
          <main className="flex-1 min-w-0">{children}</main>
        </div>
      </div>
    </div>
  )
}