"use client";

import Link from "next/link";
import { useState, useEffect } from "react";
import { useAuth } from "@/lib/auth-context";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, X, Search, User } from "lucide-react";

const navLinks = [
  { label: "Home", href: "/" },
  { label: "Companies", href: "/companies" },
  { label: "Magazine", href: "/magazine" },
  { label: "Blog", href: "/blog" },
  { label: "About", href: "/about" },
  { label: "Contact", href: "/contact" },
];

export function Navbar() {
  const { user, isLoading } = useAuth();
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
        scrolled
          ? "bg-obsidian-900/95 backdrop-blur-md py-3 shadow-2xl"
          : "bg-transparent py-5"
      }`}
    >
      <div className="mx-auto max-w-[1400px] px-6 lg:px-10">
        <div className="flex items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-3 group">
            <div className="relative flex h-11 w-11 items-center justify-center bg-primary transition-transform group-hover:scale-105">
              <span className="font-display text-base font-black text-white leading-none">
                DP
              </span>
            </div>
            <div className="hidden sm:flex flex-col">
              <span className="font-display text-[15px] font-bold text-white tracking-[0.2em] leading-none">
                DIASPORA
              </span>
              <span className="font-display text-[10px] font-medium text-white/60 tracking-[0.35em] leading-none mt-1">
                PROPERTY
              </span>
            </div>
          </Link>

          {/* Desktop Nav - Center */}
          <div className="hidden xl:flex items-center gap-1">
            {navLinks.map((link) => (
              <Link
                key={link.label}
                href={link.href}
                className="relative px-4 py-2 text-[13px] font-medium text-white/80 hover:text-white transition-colors uppercase tracking-[0.15em] group"
              >
                {link.label}
                <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-0 h-[2px] bg-primary transition-all duration-300 group-hover:w-full" />
              </Link>
            ))}
          </div>

          {/* Right Side - Icons & CTA */}
          <div className="hidden xl:flex items-center gap-5">
            <button className="text-white/70 hover:text-white transition-colors">
              <Search size={18} strokeWidth={1.5} />
            </button>
            {!isLoading &&
              (user ? (
                <Link
                  href="/dashboard"
                  className="flex items-center gap-2 bg-primary px-5 py-2.5 text-[12px] font-semibold text-white uppercase tracking-[0.15em] hover:bg-orange-600 transition-colors"
                >
                  <User size={14} strokeWidth={1.5} />
                  Dashboard
                </Link>
              ) : (
                <>
                  <Link
                    href="/login"
                    className="text-[13px] font-medium text-white/70 hover:text-white transition-colors uppercase tracking-wider"
                  >
                    Sign In
                  </Link>
                  <Link
                    href="/register"
                    className="bg-primary px-5 py-2.5 text-[12px] font-semibold text-white uppercase tracking-[0.15em] hover:bg-orange-600 transition-colors"
                  >
                    Get Started
                  </Link>
                </>
              ))}
          </div>

          {/* Mobile Toggle */}
          <button
            className="xl:hidden text-white p-2"
            onClick={() => setMobileOpen(!mobileOpen)}
          >
            {mobileOpen ? <X size={22} /> : <Menu size={22} />}
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      <AnimatePresence>
        {mobileOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3, ease: "easeInOut" }}
            className="xl:hidden bg-obsidian-900/98 backdrop-blur-xl border-t border-white/5 mt-3"
          >
            <div className="px-6 py-8 flex flex-col gap-1">
              {navLinks.map((link) => (
                <Link
                  key={link.label}
                  href={link.href}
                  className="text-[13px] font-medium text-white/70 hover:text-primary hover:pl-2 transition-all uppercase tracking-[0.15em] py-3 border-b border-white/5"
                  onClick={() => setMobileOpen(false)}
                >
                  {link.label}
                </Link>
              ))}
              <div className="pt-6 flex flex-col gap-3">
                {!isLoading && !user && (
                  <>
                    <Link
                      href="/login"
                      className="text-[13px] font-medium text-white/70 hover:text-white transition-colors uppercase tracking-wider py-2"
                    >
                      Sign In
                    </Link>
                    <Link
                      href="/register"
                      className="bg-primary px-6 py-3 text-[12px] font-semibold text-white text-center uppercase tracking-[0.15em]"
                    >
                      Get Started
                    </Link>
                  </>
                )}
                {!isLoading && user && (
                  <Link
                    href="/dashboard"
                    className="bg-primary px-6 py-3 text-[12px] font-semibold text-white text-center uppercase tracking-[0.15em]"
                  >
                    Dashboard
                  </Link>
                )}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}
