"use client";

import { use } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import {
  ArrowLeft,
  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";

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 <div>Project Not Found</div>;

  if (!project)
    return (
      <div className="p-24 text-white font-mono">Project Log Not Found.</div>
    );

  return (
    <main className="min-h-screen bg-[#0a0a0a] text-white p-6 md:p-12 lg:p-24">
      <div className="max-w-6xl mx-auto">
        {/* Navigation */}
        <Link
          href={`/projects/${category}`}
          className="flex items-center gap-2 text-neutral-500 hover:text-white transition-colors mb-12 font-mono text-[10px] uppercase tracking-widest"
        >
          <ArrowLeft size={12} /> Back to {category}
        </Link>

        {/* Header Section */}
        <header className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
          >
            <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:bg-neutral-200 transition-all"
                >
                  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-all"
                >
                  View Source <Github size={14} />
                </a>
              )}
            </div>
          </motion.div>

          {/* Stats Sidebar */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            className="bg-neutral-900/30 border border-neutral-800 p-8 rounded-3xl h-fit"
          >
            <div className="space-y-8">
              <div className="flex items-center gap-4">
                <ShieldCheck className="text-blue-500" />
                <div>
                  <p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">
                    My Role
                  </p>
                  <p className="text-sm font-semibold">{project.role}</p>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <Cpu className="text-purple-500" />
                <div>
                  <p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">
                    Stack
                  </p>
                  <p className="text-sm font-semibold">
                    {project.stack.join(", ")}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <Users className="text-green-500" />
                <div>
                  <p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">
                    Impact
                  </p>
                  <p className="text-sm font-semibold">
                    {project.metrics.join(" • ")}
                  </p>
                </div>
              </div>
            </div>
          </motion.div>
        </header>

        <section className="mb-20">
          {/* Desktop Showcase View */}
          <div className="hidden lg:block">
            <ProjectShowcase images={project.images} />
          </div>

          {/* Mobile Carousel View */}
          <div className="block lg:hidden">
            <ImageCarousel images={project.images} />
          </div>

          <p className="mt-4 text-center text-[10px] font-mono text-neutral-600 uppercase tracking-[0.2em]">
            Interactive Gallery — Select or swipe to explore
          </p>
        </section>

        {/* Mermaid */}
        {project.mermaidChart && (
          <section 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>
          </section>
        )}

        {/* Engineering Narrative */}
        <section 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 text-left">
            <ReactMarkdown>{project.engineeringStory}</ReactMarkdown>
          </div>
        </section>
      </div>
    </main>
  );
}
