'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { AnimateIn, StandardSiteLogo } from '@/app/components'
import {EXTERNAL_LINKS, NAV_ITEMS, SECONDARY_NAV_ITEMS} from '@/app/data/content'
import { scrollToElement } from '@/app/lib/scroll'
import { ArrowUpRightIcon } from 'lucide-react'

export function Sidebar() {
    const [activeSection, setActiveSection] = useState<string>('#')

    useEffect(() => {
        const sectionIds = NAV_ITEMS
            .map(item => item.href)
            .filter(href => href !== '#')
            .map(href => href.slice(1))

        const observers: IntersectionObserver[] = []

        sectionIds.forEach(id => {
            const element = document.getElementById(id)
            if (!element) return

            const observer = new IntersectionObserver(
                (entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            setActiveSection(`#${id}`)
                        }
                    })
                },
                {
                    rootMargin: '-20% 0px -70% 0px',
                    threshold: 0
                }
            )

            observer.observe(element)
            observers.push(observer)
        })

        // Handle scroll to top (home section)
        const handleScroll = () => {
            if (window.scrollY < 100) {
                setActiveSection('#')
            }
        }

        window.addEventListener('scroll', handleScroll)
        handleScroll()

        return () => {
            observers.forEach(observer => observer.disconnect())
            window.removeEventListener('scroll', handleScroll)
        }
    }, [])

    return (
        <AnimateIn
            as="aside"
            direction="left"
            delay={ 0.75 }
            onScroll={ false }
            className="flex sticky top-8 w-32 shrink-0 flex-col gap-6"
        >
            <StandardSiteLogo className="size-7 text-base-content" />

            <nav className="flex flex-col gap-2">
                { NAV_ITEMS.map((item) => (
                    <a
                        key={ item.label }
                        href={ item.href }
                        onClick={ (e) => {
                            e.preventDefault()
                            scrollToElement(item.href)
                        } }
                        className={ `font-medium text-base tracking-tight ${
                            activeSection === item.href ? 'text-base-content' : 'text-muted-content'
                        } hover:text-base-content transition-colors` }
                    >
                        { item.label }
                    </a>
                )) }
            </nav>

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

            <nav className="flex flex-col gap-2">
                { SECONDARY_NAV_ITEMS.map((item) => (
                    <Link
                        key={ item.label }
                        href={ item.href }
                        className="font-medium text-base tracking-tight text-muted-content hover:text-base-content transition-colors"
                    >
                        { item.label }
                    </Link>
                )) }
            </nav>

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

            <nav className="flex flex-col gap-2">
                { EXTERNAL_LINKS.map((link) => (
                    <a
                        key={ link.label }
                        href={ link.href }
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-end group font-medium text-base tracking-tight text-muted-content hover:text-base-content transition-colors"
                    >
                        { link.label }
                        <ArrowUpRightIcon className="ml-auto size-5 tranform translate-y-2 -translate-x-2 group-hover:translate-0 transition-all duration-300 opacity-0 group-hover:opacity-100"/>
                    </a>
                )) }
            </nav>
        </AnimateIn>
    )
}