'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { ArrowLeftIcon, MenuIcon, XIcon } from 'lucide-react'
import BlurEffect from 'react-progressive-blur'
import { AnimateIn, StandardSiteLogo } from '@/app/components'
import { DOCS_NAV } from '@/app/data/docs-nav'

export function DocsNav() {
    const [isOpen, setIsOpen] = useState(false)
    const pathname = usePathname()
    const [prevPathname, setPrevPathname] = useState(pathname)

    // Close menu when route changes (adjusting state during render)
    if (pathname !== prevPathname) {
        setPrevPathname(pathname)
        setIsOpen(false)
    }

    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = 'hidden'
        } else {
            document.body.style.overflow = ''
        }

        return () => {
            document.body.style.overflow = ''
        }
    }, [isOpen])

    return (
        <>
            <AnimateIn
                as="header"
                direction="down"
                delay={0.5}
                onScroll={false}
                className="fixed left-0 right-0 top-0 z-30 px-4 py-2 md:hidden"
            >
                <div
                    className={`p-4 relative flex flex-col gap-6 z-40 mx-auto max-w-[38rem] w-full min-h-0 overflow-hidden rounded-2xl transition-all duration-300 ease-in-out ${
                        isOpen
                            ? 'bg-zinc-950 dark:bg-zinc-50 text-zinc-50 dark:text-zinc-950 max-h-[80vh] overflow-y-auto'
                            : 'text-base-content h-15'
                    }`}
                >
                    <div className="flex justify-between items-center">
                        <Link href="/" className="flex items-center gap-2">
                            <StandardSiteLogo className="size-7" />
                            <span className="font-medium text-sm tracking-tight">Docs</span>
                        </Link>
                        {!isOpen && (
                            <button
                                onClick={() => setIsOpen(true)}
                                aria-label="Open menu"
                            >
                                <MenuIcon className="size-6" />
                            </button>
                        )}
                        {isOpen && (
                            <button
                                onClick={() => setIsOpen(false)}
                                aria-label="Close menu"
                            >
                                <XIcon className="size-6" />
                            </button>
                        )}
                    </div>

                    {isOpen && (
                        <nav className="flex flex-col gap-6">
                            {DOCS_NAV.map((section) => (
                                <div key={section.title} className="flex flex-col gap-2">
                                    <span className="font-mono text-xs font-medium tracking-tight text-muted-content uppercase">
                                        {section.title}
                                    </span>
                                    <div className="flex flex-col gap-2">
                                        {section.items.map((item) => {
                                            const isDocPage = item.href.startsWith('/docs/')
                                            const className = `font-medium text-lg tracking-tight ${
                                                pathname === item.href
                                                    ? 'text-zinc-50 dark:text-zinc-950'
                                                    : 'text-muted-content'
                                            } hover:text-zinc-50 dark:hover:text-zinc-950 transition-colors`

                                            if (!isDocPage) {
                                                return (
                                                    <a key={item.href} href={item.href} className={className}>
                                                        {item.label}
                                                    </a>
                                                )
                                            }

                                            return (
                                                <Link key={item.href} href={item.href} className={className}>
                                                    {item.label}
                                                </Link>
                                            )
                                        })}
                                    </div>
                                </div>
                            ))}

                            <div className="h-px w-full bg-border/10" />

                            <Link
                                href="/"
                                className="flex items-center gap-2 font-medium text-lg tracking-tight text-muted-content hover:text-zinc-50 dark:hover:text-zinc-950 transition-colors"
                            >
                                <ArrowLeftIcon className="size-5" />
                                Back home
                            </Link>
                        </nav>
                    )}
                </div>
                <BlurEffect
                    className="bg-gradient-to-b from-base-100 to-transparent absolute inset-0 w-full h-full -z-10"
                    position="top"
                    intensity={75}
                />
            </AnimateIn>

            {/* Overlay */}
            <div
                className={`fixed inset-0 z-10 bg-base-100/50 backdrop-blur-sm transition-opacity duration-300 md:hidden ${
                    isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
                }`}
                onClick={() => setIsOpen(false)}
            />
        </>
    )
}