"use client"

import { useRouter } from "next/navigation"
import dynamic from "next/dynamic"
import { sessionService } from "@/services/api"
import { SessionContext } from "@/types"
import { PowerCircle, TrendingUp } from "lucide-react"
import { PageHeader } from "@/components/page-header"
import { PoweredBy } from "@/components/powered-by"
import { ROUTES } from "@/utils/routes"
import { Reveal } from "@/components/ui/reveal"

const ProjectSelectionSection = dynamic(
    () => import("@/components/project-selection-section").then(mod => mod.ProjectSelectionSection),
    { ssr: false }
)


export default function NewAnalysisPage() {
    const router = useRouter()

    const handleSelectionComplete = (session: SessionContext) => {
        // Save session to storage and navigate to upload page
        sessionService.saveSession(session)
        router.push(ROUTES.UPLOAD)
    }

    return (
        <div className="min-h-screen">
            {/* Main Content */}
            <main className="min-h-screen">

                <div className="container mx-auto px-6 py-10 max-w-340">
                    {/* Refined Left-Aligned Header */}
                    <div className="mb-8">
                        <PageHeader
                            title="VisionRoad Detection System"
                            description="Select project details to begin your AI-powered road infrastructure analysis"
                            icon={TrendingUp}
                        />
                    </div>

                    {/* Project Selection Section */}
                    <Reveal delay={0.2} direction="up">
                        <div>
                            <ProjectSelectionSection onSelectionComplete={handleSelectionComplete} />
                        </div>
                    </Reveal>


                    <Reveal delay={0.4}>
                        <PoweredBy />
                    </Reveal>
                </div>
            </main>
        </div>
    )
}

