"use client";

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

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="p-10 bg-gray-100 dark:bg-gray-800 min-h-screen">
      <h1 className="text-4xl font-bold text-gray-800 dark:text-white">
        {project.title}
      </h1>
      <Image
        src={project.image}
        alt={project.title}
        className="mt-4 w-full max-w-md rounded shadow"
      />
      <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>
  );
}