import { createFileRoute } from "@tanstack/react-router"
import {
    AppWindow,
    ArrowDown,
    ArrowUpRight,
    BriefcaseBusiness,
    ChefHat,
    Code2,
    CodeXml,
    Database,
    GitBranch,
    Hammer,
    Home,
    Library,
    MapPin,
    PackageOpen,
    PanelsTopLeft,
    Radio,
    UserRound,
} from "lucide-react"
import { useEffect, useState } from "react"
import { ProjectCard } from "@/components/portfolio/ProjectCard"
import { SectionHeading } from "@/components/portfolio/SectionHeading"
import { Win98Status } from "@/components/portfolio/Win98Status"

export const Route = createFileRoute("/_main/")({
    component: RouteComponent,
})

const sections = [
    { id: "top", number: "00", label: "Home", icon: Home },
    { id: "work", number: "01", label: "Selected work", icon: BriefcaseBusiness },
    { id: "workbench", number: "02", label: "Workbench", icon: Hammer },
    { id: "about", number: "03", label: "About", icon: UserRound },
    { id: "repositories", number: "04", label: "Repositories", icon: GitBranch },
] as const

function RouteComponent() {
    const [activeSection, setActiveSection] = useState("top")

    useEffect(() => {
        const observer = new IntersectionObserver(
            entries => {
                const visible = entries
                    .filter(entry => entry.isIntersecting)
                    .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]

                if (visible) setActiveSection(visible.target.id)
            },
            { rootMargin: "-18% 0px -62% 0px", threshold: [0, 0.15, 0.4] },
        )

        for (const section of sections) {
            const element = document.getElementById(section.id)
            if (element) observer.observe(element)
        }

        return () => observer.disconnect()
    }, [])

    const current = sections.find(section => section.id === activeSection) ?? sections[0]

    return (
        <main className="portfolio-page">
            <div className="site-shell">
                <aside className="site-rail" aria-label="Page index">
                    <a className="site-mark" href="#top" aria-label="Julien Valverde, back to top">
                        <span>JV</span>
                        <span>Julien<br />Valverde</span>
                    </a>

                    <nav aria-label="Main navigation">
                        <p>Index</p>
                        {sections.map(section => (
                            <a
                                key={section.id}
                                href={`#${section.id}`}
                                className={activeSection === section.id ? "is-active" : undefined}
                                aria-current={activeSection === section.id ? "location" : undefined}
                            >
                                <section.icon aria-hidden="true" />
                                <span>{section.number}</span>
                                {section.label}
                            </a>
                        ))}
                    </nav>

                    <div className="site-rail__meta">
                        <span className="availability-dot" aria-hidden="true" />
                        Available for select projects
                        <small>Chambéry, France</small>
                    </div>
                </aside>

                <div className="site-content">
                    <header className="site-header">
                        <p><span>julien.dev</span> / {current.label}</p>
                        <a href="mailto:hello@valverde.cloud">hello@valverde.cloud ↗</a>
                    </header>

                    <section className="hero" id="top">
                        <div className="hero__intro">
                            <p className="hero__kicker"><MapPin aria-hidden="true" /> Full-stack engineer · Product builder</p>
                            <h1>
                                Useful systems,
                                <span>built properly.</span>
                            </h1>
                            <p className="hero__summary">
                                I turn difficult domain problems into clear, durable software—from
                                open-source primitives to complete vertical products.
                            </p>
                            <a className="brutal-button" href="#work">
                                See the work
                                <ArrowDown aria-hidden="true" />
                            </a>
                        </div>

                        <aside className="hero__status" aria-label="Developer status">
                            <Win98Status />
                        </aside>
                    </section>

                    <ul className="capability-strip" aria-label="Core capabilities">
                        <li><CodeXml aria-hidden="true" /> TypeScript</li>
                        <li><Radio aria-hidden="true" /> Effect</li>
                        <li><PanelsTopLeft aria-hidden="true" /> React</li>
                        <li><AppWindow aria-hidden="true" /> Product engineering</li>
                        <li><PackageOpen aria-hidden="true" /> Open source</li>
                    </ul>

                    <section className="work-section" id="work">
                        <SectionHeading
                            eyebrow="01 / Selected work"
                            title="Shipped and useful."
                            description="Libraries and products solving concrete problems. No concept pieces."
                        />

                        <div className="project-grid">
                            <ProjectCard
                                index="01"
                                title="Effect View"
                                category="Open source / React"
                                categoryIcon={<PanelsTopLeft aria-hidden="true" />}
                                description="A small bridge for writing React function components as composable Effect programs."
                                tags={["Effect", "React", "DX"]}
                                href="https://www.npmjs.com/package/effect-view"
                                linkLabel="View on npm"
                                accent="teal"
                                logo={<img src="/logos/effect-view.svg" alt="Effect View" />}
                            />
                            <ProjectCard
                                index="02"
                                title="Effect Lens"
                                category="Open source / library"
                                categoryIcon={<Library aria-hidden="true" />}
                                description="Focus, subscribe to, and update nested state without losing typed failures or requirements."
                                tags={["Effect", "State", "TypeScript"]}
                                href="https://www.npmjs.com/package/effect-lens"
                                linkLabel="View on npm"
                                accent="violet"
                                logo={<img src="/logos/effect-lens.svg" alt="Effect Lens" />}
                            />
                            <ProjectCard
                                index="03"
                                title="Comme le Chef"
                                category="SaaS / Food tech"
                                categoryIcon={<ChefHat aria-hidden="true" />}
                                description="A recipe workspace for nutrition, allergens, costing, and production documents."
                                tags={["Product", "SaaS", "Food tech"]}
                                href="https://commedeschef.com/"
                                linkLabel="Visit website"
                                variant="outline"
                                accent="chef"
                                logo={
                                    <span className="comme-le-chef-logo" role="img" aria-label="Comme le Chef">
                                        <span>Comme</span><span>le Chef</span>
                                    </span>
                                }
                            />
                        </div>
                    </section>

                    <section className="upcoming-section" id="workbench">
                        <SectionHeading
                            eyebrow="02 / Workbench"
                            title="Now building."
                            description="Two systems in active development."
                        />

                        <div className="upcoming-grid">
                            <ProjectCard
                                index="04"
                                title="FLOWpti"
                                category="Upcoming / Logistics"
                                categoryIcon={<MapPin aria-hidden="true" />}
                                description="Route optimization that turns operational constraints into efficient delivery plans."
                                tags={["Routing", "Optimization", "B2B"]}
                            />
                            <ProjectCard
                                index="05"
                                title="Sentinel"
                                category="Upcoming / Open source"
                                categoryIcon={<Database aria-hidden="true" />}
                                description="Self-hosted OBD-II telemetry for vehicle diagnostics and remote insight."
                                tags={["OBD-II", "Telemetry", "Self-hosted"]}
                                variant="dark"
                            />
                        </div>
                    </section>

                    <section className="about-section" id="about">
                        <div className="about-section__label">
                            <span>03</span>
                            <span>About</span>
                        </div>
                        <div className="about-section__copy">
                            <p className="about-section__lead">
                                Full-stack engineer and entrepreneur in the French Alps.
                            </p>
                            <div className="about-section__columns">
                                <p>
                                    I work in the difficult middle, where domain problems, product
                                    decisions, interface design, and systems engineering meet.
                                </p>
                                <p>
                                    Current interests: typed functional programming, React,
                                    operational software, optimization, and self-hosted infrastructure.
                                </p>
                            </div>
                        </div>
                    </section>

                    <section className="repo-section" id="repositories">
                        <SectionHeading
                            eyebrow="04 / Repositories"
                            title="Follow the commits."
                            description="Source code, experiments, and work in progress."
                        />
                        <div className="repo-links">
                            <a href="https://git.valverde.cloud/" target="_blank" rel="noreferrer">
                                <GitBranch aria-hidden="true" />
                                <span><small>Primary forge</small>git.valverde.cloud</span>
                                <ArrowUpRight aria-hidden="true" />
                            </a>
                            <a href="https://github.com/Thiladev" target="_blank" rel="noreferrer">
                                <Code2 aria-hidden="true" />
                                <span><small>Public collaboration</small>github.com/Thiladev</span>
                                <ArrowUpRight aria-hidden="true" />
                            </a>
                        </div>
                    </section>

                    <footer className="site-footer">
                        <p>Build it well. Make it useful.</p>
                        <div>
                            <span>Julien Valverde © {new Date().getFullYear()}</span>
                            <a href="#top">Back to top ↑</a>
                        </div>
                    </footer>
                </div>
            </div>
        </main>
    )
}