'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 { FaRoute } from 'react-icons/fa'
import { GoPackageDependents, GoPackageDependencies } from 'react-icons/go'
import { MdOutlinePayments } from 'react-icons/md'
import { CgNotes } from 'react-icons/cg'
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: FaRoute },
    {
      name: 'Отправить посылку',
      href: '/account/create-as-sender',
      icon: GoPackageDependents,
    },
    {
      name: 'Перевезти посылку',
      href: '/account/create-as-deliveler',
      icon: GoPackageDependencies,
    },
    { name: 'Тарифы', href: '/account/payments', icon: MdOutlinePayments },
  ]

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