"use client";

import { use } from "react";
import { motion, Variants } from "framer-motion";
import { ExternalLink, Github, ShieldCheck, Cpu, Users } from "lucide-react";
import { PROJECT_REGISTRY } from "@/data/projects";
import Mermaid from "@/components/Mermaid";
import ProjectShowcase from "@/components/ProjectShowcase";
import ImageCarousel from "@/components/ImageCarousel";
import ReactMarkdown from "react-markdown";
import MobileStack from "@/components/MobileStack";
import PageLayout from "@/components/PageLayout";

// 1. Professional Animation Variants
const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15, // Smoothly delay each section
      delayChildren: 0.1,
    },
  },
};

const sectionVariants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.8, ease: "easeOut" },
  },
};

export default function ProjectDetail({
  params,
}: {
  params: Promise<{ category: string; slug: string }>;
}) {
  const { category, slug } = use(params);
  const project = PROJECT_REGISTRY.find((p) => p.slug === slug);

  if (!project) {
    return (
      <PageLayout backLink={`/projects/${category}`}>
        <div className="font-mono text-white">Project Log Not Found.</div>
      </PageLayout>
    );
  }

  return (
    <PageLayout
      backLink={
        category == "infrastructure"
          ? "/infrastructure"
          : `/projects/${category}`
      }
      backLabel={`Back to ${category}`}
      maxWidth="6xl"
    >
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        {/* Header Section */}
        <motion.header
          variants={sectionVariants}
          className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20"
        >
          <div className="flex flex-col justify-center">
            <h1 className="text-6xl font-bold tracking-tighter mb-4">
              {project.title}
            </h1>
            <p className="text-blue-500 font-mono text-sm uppercase tracking-widest mb-6">
              {project.subtitle}
            </p>
            <p className="text-neutral-400 text-lg leading-relaxed">
              {project.description}
            </p>

            <div className="flex gap-4 mt-8">
              {project.liveUrl && (
                <a
                  href={project.liveUrl}
                  className="flex items-center gap-2 bg-white text-black px-6 py-3 rounded-full font-bold text-sm hover:scale-105 transition-transform"
                >
                  Launch Site <ExternalLink size={14} />
                </a>
              )}
              {project?.repoUrl && (
                <a
                  href={project.repoUrl}
                  className="flex items-center gap-2 border border-neutral-800 px-6 py-3 rounded-full font-bold text-sm hover:bg-neutral-900 transition-colors"
                >
                  View Source <Github size={14} />
                </a>
              )}
            </div>
          </div>

          {/* Stats Sidebar */}
          <div className="bg-neutral-900/30 border border-neutral-800 p-8 rounded-3xl h-fit backdrop-blur-sm">
            <div className="space-y-8 font-mono">
              <StatItem
                icon={<ShieldCheck className="text-blue-500" />}
                label="My Role"
                value={project.role}
              />
              <StatItem
                icon={<Cpu className="text-purple-500" />}
                label="Stack"
                value={project.stack.join(", ")}
              />
              <StatItem
                icon={<Users className="text-green-500" />}
                label="Impact"
                value={project.metrics.join(" • ")}
              />
            </div>
          </div>
        </motion.header>

        {/* Media Showcase */}
        <motion.section variants={sectionVariants} className="mb-20">
          {project.category === "mobile" ? (
            <MobileStack images={project.images} />
          ) : (
            <>
              <div className="hidden lg:block">
                <ProjectShowcase images={project.images} />
              </div>
              <div className="block lg:hidden">
                <ImageCarousel images={project.images} />
              </div>
            </>
          )}
          <p className="mt-6 text-center text-[10px] font-mono text-neutral-600 uppercase tracking-[0.2em]">
            Interactive Gallery — Select or swipe to explore
          </p>
        </motion.section>

        {/* System Architecture */}
        {project.mermaidChart && (
          <motion.section variants={sectionVariants} className="mb-16">
            <div className="flex items-center gap-3 mb-8">
              <div className="h-px flex-1 bg-neutral-900" />
              <h3 className="text-[10px] font-mono text-neutral-500 uppercase tracking-[0.3em]">
                System Architecture Log
              </h3>
              <div className="h-px flex-1 bg-neutral-900" />
            </div>
            <div className="bg-neutral-900/20 rounded-3xl border border-neutral-800/50 p-4 md:p-12">
              <Mermaid chart={project.mermaidChart} />
            </div>
          </motion.section>
        )}

        {/* Engineering Narrative */}
        <motion.section
          variants={sectionVariants}
          className="w-full pb-20 mt-12"
        >
          <div className="flex items-center gap-3 mb-12">
            <h3 className="text-[10px] font-mono text-blue-500 uppercase tracking-[0.3em] font-bold">
              PROJECT LOG // {project.storyLabel || "NARRATIVE"}
            </h3>
            <div className="h-px flex-1 bg-neutral-900" />
            <h2 className="text-xl font-bold tracking-tighter">
              The Engineering Story
            </h2>
          </div>
          <div className="prose prose-invert prose-neutral max-w-none">
            <ReactMarkdown>{project.engineeringStory}</ReactMarkdown>
          </div>
        </motion.section>
      </motion.div>
    </PageLayout>
  );
}

// Small helper component to keep the JSX clean
function StatItem({
  icon,
  label,
  value,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
}) {
  return (
    <div className="flex items-center gap-4">
      {icon}
      <div>
        <p className="text-[10px] text-neutral-500 uppercase tracking-tighter">
          {label}
        </p>
        <p className="text-sm font-semibold">{value}</p>
      </div>
    </div>
  );
}
