"use client";

import { motion } from "framer-motion";
import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from "lucide-react";
import Link from "next/link";
import { useEffect } from "react";
import ReactMarkdown from "react-markdown";

export type ProjectDetailData = {
  id: number;
  slug: string;
  title: string;
  description: string;
  content: string;
  tags: string[];
  featured: boolean;
  category: string;
  date: string;
  github?: string | null;
  live?: string | null;
  imageUrl?: string | null;
};

export default function ProjectDetailClient({
  project,
  locale,
}: {
  project: ProjectDetailData;
  locale: string;
}) {
  // Track page view (non-blocking)
  useEffect(() => {
    try {
      navigator.sendBeacon?.(
        "/api/analytics/track",
        new Blob(
          [
            JSON.stringify({
              type: "pageview",
              projectId: project.id.toString(),
              page: `/${locale}/projects/${project.slug}`,
            }),
          ],
          { type: "application/json" },
        ),
      );
    } catch {
      // ignore
    }
  }, [project.id, project.slug, locale]);

  return (
    <div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
      <div className="max-w-4xl mx-auto px-4">
        {/* Navigation */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="mb-8"
        >
          <Link
            href={`/${locale}/projects`}
            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
          >
            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
            <span className="font-medium">Back to Projects</span>
          </Link>
        </motion.div>

        {/* Header & Meta */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.1 }}
          className="mb-12"
        >
          <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
            <h1 className="text-4xl md:text-6xl font-black font-sans text-stone-900 tracking-tight leading-tight">
              {project.title}
            </h1>
            <div className="flex gap-2 shrink-0 pt-2">
              {project.featured && (
                <span className="px-4 py-1.5 bg-stone-900 text-stone-50 text-xs font-bold rounded-full shadow-sm">
                  Featured
                </span>
              )}
              <span className="px-4 py-1.5 bg-white border border-stone-200 text-stone-600 text-xs font-medium rounded-full shadow-sm">
                {project.category}
              </span>
            </div>
          </div>

          <p className="text-xl md:text-2xl text-stone-600 font-light leading-relaxed max-w-3xl mb-8">
            {project.description}
          </p>

          <div className="flex flex-wrap items-center gap-6 text-stone-500 text-sm border-y border-stone-200 py-6">
            <div className="flex items-center space-x-2">
              <Calendar size={18} />
              <span className="font-mono">
                {new Date(project.date).toLocaleDateString(undefined, {
                  year: "numeric",
                  month: "long",
                  day: "numeric",
                })}
              </span>
            </div>
            <div className="h-4 w-px bg-stone-300 hidden sm:block"></div>
            <div className="flex flex-wrap gap-2">
              {project.tags.map((tag) => (
                <span key={tag} className="text-stone-700 font-medium">
                  #{tag}
                </span>
              ))}
            </div>
          </div>
        </motion.div>

        {/* Featured Image / Fallback */}
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
        >
          {project.imageUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={project.imageUrl} alt={project.title} className="w-full h-full object-cover" />
          ) : (
            <div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
              <span className="text-9xl font-serif font-bold text-stone-500/20 select-none">
                {project.title.charAt(0)}
              </span>
            </div>
          )}
        </motion.div>

        {/* Content & Sidebar Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
          {/* Main Content */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="lg:col-span-2"
          >
            <div className="markdown prose prose-stone max-w-none prose-lg prose-headings:font-bold prose-headings:tracking-tight prose-a:text-stone-900 prose-a:decoration-stone-300 hover:prose-a:decoration-stone-900 prose-img:rounded-xl prose-img:shadow-lg">
              <ReactMarkdown
                components={{
                  h1: ({ children }) => (
                    <h1 className="text-3xl font-bold text-stone-900 mt-8 mb-4">{children}</h1>
                  ),
                  h2: ({ children }) => (
                    <h2 className="text-2xl font-bold text-stone-900 mt-8 mb-4">{children}</h2>
                  ),
                  p: ({ children }) => <p className="text-stone-700 leading-relaxed mb-6">{children}</p>,
                  li: ({ children }) => <li className="text-stone-700">{children}</li>,
                  code: ({ children }) => (
                    <code className="bg-stone-100 text-stone-800 px-1.5 py-0.5 rounded text-sm font-mono font-medium">
                      {children}
                    </code>
                  ),
                  pre: ({ children }) => (
                    <pre className="bg-stone-900 text-stone-50 p-6 rounded-xl overflow-x-auto my-6 shadow-lg">
                      {children}
                    </pre>
                  ),
                }}
              >
                {project.content}
              </ReactMarkdown>
            </div>
          </motion.div>

          {/* Sidebar / Actions */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="lg:col-span-1 space-y-8"
          >
            <div className="bg-white/50 backdrop-blur-xl border border-white/60 p-6 rounded-2xl shadow-sm sticky top-32">
              <h3 className="font-bold text-stone-900 mb-4 flex items-center gap-2">
                <Share2 size={18} />
                Project Links
              </h3>
              <div className="space-y-3">
                {project.live && project.live.trim() && project.live !== "#" ? (
                  <a
                    href={project.live}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-between w-full px-4 py-3 bg-stone-900 text-stone-50 rounded-xl font-medium hover:bg-stone-800 hover:scale-[1.02] transition-all shadow-md group"
                  >
                    <span>Live Demo</span>
                    <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
                  </a>
                ) : (
                  <div className="px-4 py-3 bg-stone-100 text-stone-400 rounded-xl font-medium text-sm text-center border border-stone-200 cursor-not-allowed">
                    Live demo not available
                  </div>
                )}

                {project.github && project.github.trim() && project.github !== "#" ? (
                  <a
                    href={project.github}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-between w-full px-4 py-3 bg-white border border-stone-200 text-stone-700 rounded-xl font-medium hover:bg-stone-50 hover:text-stone-900 hover:border-stone-300 transition-all shadow-sm group"
                  >
                    <span>View Source</span>
                    <GithubIcon size={18} className="group-hover:rotate-12 transition-transform" />
                  </a>
                ) : null}
              </div>

              <div className="mt-8 pt-6 border-t border-stone-100">
                <h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">Tech Stack</h4>
                <div className="flex flex-wrap gap-2">
                  {project.tags.map((tag) => (
                    <span
                      key={tag}
                      className="px-2.5 py-1 bg-stone-100 text-stone-600 text-xs font-medium rounded-md border border-stone-200"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}