"use client";

import { motion, useScroll, useTransform, AnimatePresence } from "framer-motion";
import { useRef, useState, useEffect } from "react";
import Link from "next/link";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import type { Locale } from "@/i18n-config";

const expo: [number, number, number, number] = [0.16, 1, 0.3, 1];

const IconArrowLeft = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="19" y1="12" x2="5" y2="12" />
    <polyline points="12 19 5 12 12 5" />
  </svg>
);
const IconArrowRight = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12" />
    <polyline points="12 5 19 12 12 19" />
  </svg>
);
const IconCheck = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0A0A0A" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="20 6 9 17 4 12" />
  </svg>
);

// Tag colors per category
const accentFor = (tag: string): string => {
  if (/ai|yz|ml/i.test(tag)) return "#FFE600";
  if (/web3|blockchain|chain/i.test(tag)) return "#FF4500";
  if (/mobile|mobil/i.test(tag)) return "#0A0A0A";
  return "#00CC77";
};

interface Props {
  lang: Locale;
  dict: any;
  project: any;
  prev: any | null;
  next: any | null;
}

const screenshotsFor = (slug: string): string[] => {
  const mapping: Record<string, string[]> = {
    "financeai-dashboard": [
      "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1200&q=80",
      "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1200&q=80",
      "https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1200&q=80",
    ],
    "chainsupply-network": [
      "https://images.unsplash.com/photo-1508873535684-277a3cbcc4e8?auto=format&fit=crop&w=1200&q=80",
      "https://images.unsplash.com/photo-1639762681485-074b7f938ba0?auto=format&fit=crop&w=1200&q=80",
      "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1200&q=80",
    ],
    "meditrack-mobile": [
      "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1200&q=80",
      "https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=1200&q=80",
      "https://images.unsplash.com/photo-1530026405186-ed1ea0ac7a63?auto=format&fit=crop&w=1200&q=80",
    ],
    "novamart-platform": [
      "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1200&q=80",
      "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1200&q=80",
      "https://images.unsplash.com/photo-1523474253046-8cd2748b5fd2?auto=format&fit=crop&w=1200&q=80",
    ],
  };
  return mapping[slug] || [];
};

export default function WorkDetailClient({ lang, dict, project, prev, next }: Props) {
  const heroRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "30%"]);

  const [activeImage, setActiveImage] = useState<string | null>(null);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") setActiveImage(null);
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  const accent = accentFor(project.tag);
  let screenshots = screenshotsFor(project.slug);
  if (project.gallery && project.gallery.length > 0) {
    screenshots = project.gallery;
  }

  return (
    <div className="bg-[#F4F0E8] text-[#0A0A0A] font-body min-h-screen">
      <Header lang={lang} dict={dict.nav} />

      {/* ── HERO ── */}
      <section
        ref={heroRef}
        className="relative min-h-[70vh] flex flex-col justify-end overflow-hidden border-b border-[#C8C2B8]"
      >
        {/* Dot grid */}
        <motion.div
          className="absolute inset-0"
          style={{ y: heroY }}
        >
          {project.image ? (
            <>
              <div
                className="absolute inset-0 bg-cover bg-center"
                style={{ backgroundImage: `url(${project.image})` }}
              />
              <div className="absolute inset-0 bg-[#F4F0E8]/80" />
            </>
          ) : (
            <div className="absolute inset-0 dot-grid opacity-50" />
          )}
        </motion.div>

        {/* Accent left vertical bar */}
        <div className="absolute top-0 left-0 w-1 h-full" style={{ backgroundColor: accent }} />

        {/* Big number watermark */}
        <motion.div
          className="absolute right-0 bottom-0 font-display font-black select-none pointer-events-none text-[#E8E3DC] leading-none"
          style={{ fontSize: "clamp(8rem, 25vw, 20rem)" }}
          initial={{ opacity: 0, x: 40 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 1, delay: 0.3 }}
        >
          {project.num}
        </motion.div>

        <div className="relative z-10 max-w-7xl mx-auto px-6 w-full pb-16 pt-36">
          {/* Breadcrumb */}
          <motion.div
            className="flex items-center gap-3 mb-10"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.1 }}
          >
            <Link
              href={`/${lang}/work`}
              className="flex items-center gap-2 font-mono text-[10px] tracking-[0.25em] uppercase text-[#A0998E] hover:text-[#0A0A0A] transition-colors"
            >
              <IconArrowLeft /> {dict.nav.work}
            </Link>
            <span className="text-[#C8C2B8]">/</span>
            <span className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#0A0A0A]">
              {project.num}
            </span>
          </motion.div>

          {/* Tag badge */}
          <motion.div
            className="mb-5"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2, duration: 0.5 }}
          >
            <span
              className="inline-block font-mono text-[10px] tracking-[0.25em] uppercase px-3 py-1.5 border border-[#C8C2B8]"
              style={{ borderLeftColor: accent, borderLeftWidth: 3 }}
            >
              {project.tag}
            </span>
          </motion.div>

          {/* Title */}
          <div className="overflow-hidden mb-8">
            <motion.h1
              className="font-display font-black uppercase leading-[0.85] tracking-tight text-[#0A0A0A]"
              style={{ fontSize: "clamp(3rem, 8vw, 7rem)" }}
              initial={{ y: "110%" }}
              animate={{ y: 0 }}
              transition={{ duration: 0.85, ease: expo, delay: 0.25 }}
            >
              {project.title}
            </motion.h1>
          </div>

          {/* Meta row */}
          <motion.div
            className={`grid grid-cols-2 ${project.website ? 'md:grid-cols-5' : 'md:grid-cols-4'} gap-px bg-[#C8C2B8] border-t border-[#C8C2B8]`}
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5, duration: 0.6 }}
          >
            {[
              { label: lang === "tr" ? "Yıl" : "Year", value: project.year },
              { label: lang === "tr" ? "Süre" : "Duration", value: project.duration },
              { label: lang === "tr" ? "Sektör" : "Sector", value: project.tag },
              { label: lang === "tr" ? "Müşteri" : "Client", value: project.client },
            ].map((m, i) => (
              <div key={i} className="bg-[#F4F0E8] px-5 py-4">
                <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-1">{m.label}</div>
                <div className="font-display font-black text-[13px] uppercase text-[#0A0A0A] truncate">{m.value}</div>
              </div>
            ))}
            
            {project.website && (
              <a
                href={project.website.startsWith('http') ? project.website : `https://${project.website}`}
                target="_blank"
                rel="noopener noreferrer"
                className="bg-[#0A0A0A] px-5 py-4 group hover:bg-[#FFE600] transition-colors col-span-2 md:col-span-1 flex flex-col justify-center"
              >
                <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] group-hover:text-[#0A0A0A] mb-1 transition-colors">
                  {lang === "tr" ? "Canlı Proje" : "Live Project"}
                </div>
                <div className="font-display font-black text-[13px] uppercase text-white group-hover:text-[#0A0A0A] truncate flex items-center gap-2 transition-colors">
                  {lang === "tr" ? "SİTEYE GİT" : "VISIT SITE"}
                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="square" strokeLinejoin="miter" strokeWidth="2.5" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                  </svg>
                </div>
              </a>
            )}
          </motion.div>
        </div>
      </section>

      {/* ── CONTENT ── */}
      <main className="max-w-7xl mx-auto px-6 py-20">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">

          {/* Left column: main content */}
          <div className="lg:col-span-8 space-y-20">

            {/* Overview */}
            <motion.section
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.7 }}
            >
              <div className="flex items-center gap-3 mb-6">
                <div className="w-4 h-4 flex-shrink-0" style={{ backgroundColor: accent }} />
                <span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">
                  {lang === "tr" ? "Genel Bakış" : "Overview"}
                </span>
                <div className="flex-1 h-px bg-[#C8C2B8]" />
              </div>
              <p className="text-[#4A4440] text-lg leading-relaxed border-l-4 pl-6" style={{ borderColor: accent }}>
                {project.desc}
              </p>
            </motion.section>

            {/* Challenge */}
            <motion.section
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.7 }}
            >
              <div className="flex items-center gap-3 mb-6">
                <div className="w-4 h-4 border-2 border-[#0A0A0A] flex-shrink-0" />
                <span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">
                  {lang === "tr" ? "Problem" : "The Challenge"}
                </span>
                <div className="flex-1 h-px bg-[#C8C2B8]" />
              </div>
              <h2 className="font-display font-black text-2xl uppercase text-[#0A0A0A] mb-4">
                {lang === "tr" ? "Ne Sorununu Çözdük?" : "What Problem Did We Solve?"}
              </h2>
              <p className="text-[#6A6460] leading-relaxed">
                {project.challenge}
              </p>
            </motion.section>

            {/* Solution */}
            <motion.section
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.7 }}
            >
              <div className="flex items-center gap-3 mb-6">
                <div className="w-4 h-4 border-2 flex-shrink-0" style={{ borderColor: accent }} />
                <span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">
                  {lang === "tr" ? "Çözüm" : "Our Solution"}
                </span>
                <div className="flex-1 h-px bg-[#C8C2B8]" />
              </div>
              <h2 className="font-display font-black text-2xl uppercase text-[#0A0A0A] mb-4">
                {lang === "tr" ? "Nasıl İnşa Ettik?" : "How Did We Build It?"}
              </h2>
              <p className="text-[#6A6460] leading-relaxed">
                {project.solution}
              </p>
            </motion.section>

            {/* Results */}
            <motion.section
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.7 }}
            >
              <div className="flex items-center gap-3 mb-8">
                <div className="w-4 h-4 flex-shrink-0" style={{ backgroundColor: accent }} />
                <span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">
                  {lang === "tr" ? "Sonuçlar" : "Results"}
                </span>
                <div className="flex-1 h-px bg-[#C8C2B8]" />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-[#C8C2B8]">
                {project.results.map((r: string, idx: number) => (
                  <motion.div
                    key={idx}
                    className="bg-[#F4F0E8] p-6 flex items-start gap-4 group"
                    initial={{ opacity: 0 }}
                    whileInView={{ opacity: 1 }}
                    viewport={{ once: true }}
                    transition={{ delay: idx * 0.1 }}
                    whileHover={{ backgroundColor: "#EDE8E0" }}
                  >
                    <div
                      className="w-6 h-6 flex-shrink-0 flex items-center justify-center mt-0.5"
                      style={{ backgroundColor: accent }}
                    >
                      <IconCheck />
                    </div>
                    <p className="font-display font-bold text-[14px] uppercase text-[#0A0A0A] leading-snug">
                      {r}
                    </p>
                  </motion.div>
                ))}
              </div>
            </motion.section>
          </div>

          {/* Right column: sidebar */}
          <aside className="lg:col-span-4 space-y-0">
            <div className="sticky top-24">

              {/* Perf spec */}
              <motion.div
                className="border border-[#C8C2B8] mb-px"
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.4 }}
              >
                <div className="border-b border-[#C8C2B8] px-6 py-3 flex items-center gap-2">
                  <div className="w-2 h-2" style={{ backgroundColor: accent }} />
                  <span className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E]">
                    {dict.work.specsLabel}
                  </span>
                </div>
                <div className="px-6 py-5">
                  <p className="font-display font-black text-sm uppercase text-[#0A0A0A] leading-snug">
                    {project.spec}
                  </p>
                </div>
              </motion.div>

              {/* Tech stack */}
              <motion.div
                className="border border-[#C8C2B8] mb-px"
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.5 }}
              >
                <div className="border-b border-[#C8C2B8] px-6 py-3">
                  <span className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E]">
                    {lang === "tr" ? "Teknoloji Yığını" : "Tech Stack"}
                  </span>
                </div>
                <div className="px-6 py-5 flex flex-wrap gap-2">
                  {project.tech.map((t: string) => (
                    <span
                      key={t}
                      className="font-mono text-[10px] tracking-wider uppercase px-2.5 py-1.5 border border-[#C8C2B8] text-[#6A6460] hover:border-[#0A0A0A] hover:text-[#0A0A0A] transition-colors cursor-default"
                    >
                      {t}
                    </span>
                  ))}
                </div>
              </motion.div>

              {/* Removed old Website block */}

              {/* CTA */}
              <motion.div
                className="border-2 border-[#0A0A0A] p-6"
                style={{ backgroundColor: accent }}
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.6 }}
              >
                <p className="font-display font-black text-sm uppercase text-[#0A0A0A] mb-4 leading-snug">
                  {lang === "tr" ? "Benzer bir proje mi istiyorsunuz?" : "Want a similar project?"}
                </p>
                <Link
                  href={`/${lang}/contact`}
                  className="btn-brutal inline-flex items-center gap-2 px-5 py-3 font-display font-black text-[11px] tracking-widest uppercase cursor-pointer bg-[#0A0A0A] text-[#F4F0E8] border-[#0A0A0A]"
                >
                  {dict.nav.quote} <IconArrowRight />
                </Link>
              </motion.div>
            </div>
          </aside>
        </div>
      </main>

      {/* ── PROJECT SCREENSHOTS GALLERY ── */}
      {screenshots.length > 0 && (
        <section className="py-24 border-t border-[#C8C2B8] bg-[#EDE8E0]">
          <div className="max-w-7xl mx-auto px-6">
            <div className="flex items-center gap-3 mb-12">
              <div className="w-3 h-3" style={{ backgroundColor: accent }} />
              <span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">
                {dict.work.galleryTitle || "EKRAN GÖRÜNTÜLERİ"}
              </span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {screenshots.map((src, idx) => (
                <motion.div
                  key={idx}
                  className="group bg-[#F4F0E8] border border-[#C8C2B8] hover:border-[#0A0A0A] p-3 relative overflow-hidden transition-all duration-300 cursor-zoom-in"
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: idx * 0.1, duration: 0.6 }}
                  onClick={() => setActiveImage(src)}
                  whileHover={{ y: -6, boxShadow: `4px 4px 0px 0px ${accent}` }}
                >
                  <div className="aspect-[16/10] w-full overflow-hidden border border-[#C8C2B8] group-hover:border-[#0A0A0A] bg-[#EDE8E0] transition-colors relative">
                    <img
                      src={src}
                      alt={`${project.title} screenshot ${idx + 1}`}
                      className="w-full h-full object-cover grayscale group-hover:grayscale-0 contrast-[1.1] brightness-[0.98] group-hover:scale-105 transition-all duration-700"
                    />
                    <div className="absolute inset-0 bg-[#0A0A0A]/5 opacity-100 group-hover:opacity-0 transition-opacity duration-300" />
                  </div>
                  <div className="mt-3 flex justify-between items-center font-mono text-[9px] text-[#A0998E] group-hover:text-[#0A0A0A] transition-colors">
                    <span>SCREEN // 0{idx + 1}</span>
                    <span className="uppercase tracking-widest">[ ZOOM ]</span>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Lightbox Modal */}
      <AnimatePresence>
        {activeImage && (
          <motion.div
            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/85 backdrop-blur-md px-6 cursor-zoom-out"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setActiveImage(null)}
          >
            <button
              onClick={() => setActiveImage(null)}
              className="absolute top-6 right-6 w-12 h-12 border border-white/20 hover:border-white/80 hover:bg-white/10 text-white flex items-center justify-center font-mono text-[10px] uppercase tracking-widest cursor-pointer transition-colors duration-200"
            >
              [ CLOSE ]
            </button>
            <motion.div
              className="max-w-5xl max-h-[85vh] border-2 border-white/10 bg-[#0A0A0A] p-2 relative"
              initial={{ scale: 0.9, y: 20 }}
              animate={{ scale: 1, y: 0 }}
              exit={{ scale: 0.9, y: 20 }}
              transition={{ duration: 0.4, ease: expo }}
              onClick={(e) => e.stopPropagation()}
            >
              <img
                src={activeImage}
                alt="Enlarged project screenshot"
                className="max-w-full max-h-[80vh] object-contain block"
              />
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* ── PREV / NEXT NAVIGATION ── */}
      <div className="border-t border-[#C8C2B8]">
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-px bg-[#C8C2B8]">

          {/* Prev */}
          <div>
            {prev ? (
              <Link
                href={`/${lang}/work/${prev.slug}`}
                className="group flex flex-col p-10 bg-[#F4F0E8] hover:bg-[#EDE8E0] transition-colors h-full"
              >
                <div className="flex items-center gap-2 font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] group-hover:text-[#0A0A0A] transition-colors mb-4">
                  <IconArrowLeft />
                  {lang === "tr" ? "Önceki Proje" : "Previous Project"}
                </div>
                <div className="font-display font-black text-xl uppercase text-[#0A0A0A] mt-auto">
                  {prev.title}
                </div>
                <div className="font-mono text-[10px] tracking-wider uppercase text-[#A0998E] mt-1">
                  {prev.tag}
                </div>
              </Link>
            ) : (
              <div className="p-10 bg-[#EDE8E0]" />
            )}
          </div>

          {/* Next */}
          <div>
            {next ? (
              <Link
                href={`/${lang}/work/${next.slug}`}
                className="group flex flex-col items-end p-10 bg-[#F4F0E8] hover:bg-[#EDE8E0] transition-colors h-full text-right"
              >
                <div className="flex items-center gap-2 font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] group-hover:text-[#0A0A0A] transition-colors mb-4">
                  {lang === "tr" ? "Sonraki Proje" : "Next Project"}
                  <IconArrowRight />
                </div>
                <div className="font-display font-black text-xl uppercase text-[#0A0A0A] mt-auto">
                  {next.title}
                </div>
                <div className="font-mono text-[10px] tracking-wider uppercase text-[#A0998E] mt-1">
                  {next.tag}
                </div>
              </Link>
            ) : (
              <Link
                href={`/${lang}/work`}
                className="group flex flex-col items-end p-10 bg-[#F4F0E8] hover:bg-[#EDE8E0] transition-colors h-full text-right"
              >
                <div className="flex items-center gap-2 font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] group-hover:text-[#0A0A0A] transition-colors mb-4">
                  {lang === "tr" ? "Tüm Projeler" : "All Projects"}
                  <IconArrowRight />
                </div>
                <div className="font-display font-black text-xl uppercase text-[#C8C2B8] mt-auto">
                  {lang === "tr" ? "Portfolyo" : "Portfolio"}
                </div>
              </Link>
            )}
          </div>
        </div>
      </div>

      <Footer lang={lang} dict={dict} />
    </div>
  );
}