"use client";

import {useParams, useRouter} from "next/navigation";
import {useEffect, useState} from "react";
import Link from "next/link";
import Image from "next/image";
import Header from "../../components/Header";
import Footer from "./Footer";

interface Project {
    id: string;
    title: string;
    slug: string;
    description: string;
    link: string;
    image: string;
}

export default function ProjectDetail() {
    const params = useParams();
    const router = useRouter();
    const {slug} = params as { slug: string };
    const [project, setProject] = useState<Project | null>(null);

    useEffect(() => {
        if (slug) {
            fetch("/data/projects.json")
                .then((res) => res.json())
                .then((data: Project[]) => {
                    const found = data.find((proj) => proj.slug === slug);
                    if (found) {
                        setProject(found);

                        // Log the project view
                        fetch("/api/stats", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            body: JSON.stringify({
                                type: "project_view",
                                projectId: found.id,
                            }),
                        }).catch((err) => console.error("Failed to log project view", err));
                    } else {
                        // Redirect to 404 if project not found
                        router.replace("/not-found");
                    }
                });
        }
    }, [slug, router]);

    if (!project) {
        return <div className="p-10 text-center">Loading...</div>;
    }

    return (
        <div className="min-h-screen flex flex-col bg-radiant">
            <Header/>
            <div className="flex-grow p-10 pt-24">
                <div
                    className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto">
                    <h1 className="text-4xl font-bold text-gray-800 dark:text-white">
                        {project.title}
                    </h1>
                    <Image
                        src={project.image}
                        alt={project.title}
                        width={400}
                        height={400}
                        className="mt-4 w-full max-w-md rounded shadow-lg"
                    />
                    <p className="mt-4 text-gray-600 dark:text-gray-300">
                        {project.description}
                    </p>
                    <Link
                        href={`/`}
                        className="mt-4 inline-block text-blue-500 hover:underline"
                    >
                        Go back Home
                    </Link>
                </div>
            </div>
            <Footer/>
        </div>
    );
}