"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";

const navLinks = [
  { name: "صفحه اصلی", href: "/" },
  { name: "خدمات", href: "/services" },
  { name: "نمونه کارها", href: "/portfolio" },
  { name: "درباره ما", href: "/about" },
];

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // تغییر ظاهر هدر هنگام اسکرول به پایین
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // جلوگیری از اسکرول شدن صفحه وقتی منوی موبایل باز است
  useEffect(() => {
    if (isMobileMenuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "unset";
    }
  }, [isMobileMenuOpen]);

  return (
    <>
      <header
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 border-b ${
          isScrolled
            ? "bg-gray-950/60 backdrop-blur-md border-white/10 py-3" // حالت شیشه‌ای هنگام اسکرول
            : "bg-transparent border-transparent py-5" // حالت شفاف در بالای صفحه
        }`}
      >
        <div className="max-w-6xl mx-auto px-6 flex items-center justify-between">
          {/* لوگو */}
          <Link href="/" className="relative z-50 flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-blue-600 to-blue-400 flex items-center justify-center">
              <span className="text-white font-bold text-lg">N</span>
            </div>
            <span className="text-neutral-50 font-medium tracking-wide">
              نوین‌تک
            </span>
          </Link>

          {/* منوی دسکتاپ */}
          <nav className="hidden md:flex items-center gap-8">
            {navLinks.map((link) => (
              <Link
                key={link.name}
                href={link.href}
                className="text-sm text-neutral-400 hover:text-neutral-50 transition-colors duration-300"
              >
                {link.name}
              </Link>
            ))}
          </nav>

          {/* دکمه تماس / اکشن دسکتاپ */}
          <div className="hidden md:block">
            <button className="text-sm font-medium text-white px-5 py-2 rounded-full border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-300 backdrop-blur-sm">
              شروع پروژه
            </button>
          </div>

          {/* دکمه همبرگری موبایل */}
          <button
            onClick={() => setIsMobileMenuOpen(true)}
            className="md:hidden relative z-50 p-2 text-neutral-300 hover:text-white transition-colors"
            aria-label="Toggle Menu"
          >
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
            >
              <line x1="4" y1="8" x2="20" y2="8" />
              <line x1="4" y1="16" x2="20" y2="16" />
            </svg>
          </button>
        </div>
      </header>

      {/* منوی موبایل (Drawer) */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <>
            {/* لایه تاریک پس‌زمینه (Overlay) */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.3 }}
              onClick={() => setIsMobileMenuOpen(false)}
              className="fixed inset-0 z-[60] bg-gray-950/60 backdrop-blur-sm"
            />

            {/* پنل کشویی از سمت راست */}
            <motion.div
              initial={{ x: "100%" }} // شروع از بیرون صفحه (سمت راست)
              animate={{ x: 0 }} // ورود به صفحه
              exit={{ x: "100%" }} // خروج به سمت راست
              transition={{
                duration: 0.5,
                ease: [0.16, 1, 0.3, 1], // همان منحنی نرم اپل-استایل
              }}
              className="fixed top-0 right-0 bottom-0 w-3/4 max-w-sm z-[70] bg-gray-950/90 backdrop-blur-xl border-l border-white/10 shadow-2xl flex flex-col"
            >
              <div className="flex items-center justify-between p-6 border-b border-white/10">
                <span className="text-neutral-50 font-medium">منو</span>
                <button
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="p-2 text-neutral-400 hover:text-white transition-colors bg-white/5 rounded-full"
                >
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                  >
                    <line x1="18" y1="6" x2="6" y2="18" />
                    <line x1="6" y1="6" x2="18" y2="18" />
                  </svg>
                </button>
              </div>

              <div className="flex flex-col p-6 gap-6 flex-1 overflow-y-auto">
                {navLinks.map((link, i) => (
                  <motion.div
                    key={link.name}
                    initial={{ opacity: 0, x: 20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.1 + i * 0.1, duration: 0.4 }}
                  >
                    <Link
                      href={link.href}
                      onClick={() => setIsMobileMenuOpen(false)}
                      className="text-lg text-neutral-300 hover:text-white transition-colors"
                    >
                      {link.name}
                    </Link>
                  </motion.div>
                ))}
              </div>

              <div className="p-6 border-t border-white/10">
                <button className="w-full py-3 rounded-xl bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors">
                  شروع پروژه
                </button>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </>
  );
}