"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

interface NavbarProps {
  variant?: "landing" | "app";
}

export default function Navbar({ variant = "app" }: NavbarProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "unset";
    }
    return () => {
      document.body.style.overflow = "unset";
    };
  }, [isOpen]);

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

  const isLanding = variant === "landing";
  
  // Base classes for the header
  const headerClasses = isLanding
    ? `fixed inset-x-0 top-0 z-50 transition-all duration-300 ${
        scrolled ? "bg-[#1c3d36]/95 backdrop-blur-md shadow-lg py-3" : "bg-transparent py-5"
      }`
    : `sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-stone-200 py-3 transition-all duration-300`;

  const textClasses = isLanding ? "text-white" : "text-stone-900";
  const linkClasses = isLanding ? "text-white/60 hover:text-white" : "text-stone-500 hover:text-stone-900";
  const logoSrc = isLanding ? "/Untitled_design__1_-removebg-preview.png" : "/aci_loco-06-removebg-preview.png";

  const navLinks = [
    { href: "/database", label: "Database" },
    { href: "/scenarios", label: "Scenarios" },
  ];

  return (
    <header className={headerClasses}>
      <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
        <Link href="/" className="flex items-center">
          <img
            src={logoSrc}
            alt="ACI Logo"
            className={`${isLanding ? "h-10 sm:h-14" : "h-9 sm:h-11"} w-auto transition-all`}
          />
        </Link>

        {/* Desktop Nav */}
        <div className="hidden items-center gap-8 md:flex">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={`text-sm font-medium transition-colors ${linkClasses} ${
                pathname === link.href ? (isLanding ? "text-white" : "text-stone-900") : ""
              }`}
            >
              {link.label}
            </Link>
          ))}
          <Link
            href="/scenarios/new"
            className="rounded-xl px-5 py-2.5 text-sm font-bold shadow-sm transition hover:opacity-90"
            style={{ backgroundColor: "#03ff94", color: "#1c3d36" }}
          >
            New Scenario
          </Link>
        </div>

        {/* Mobile Menu Toggle */}
        <div className="flex md:hidden">
          <button
            onClick={() => setIsOpen(!isOpen)}
            className={`p-2 rounded-lg transition ${isLanding ? "text-white hover:bg-white/10" : "text-stone-900 hover:bg-stone-100"}`}
          >
            <span className="sr-only">Open menu</span>
            {isOpen ? (
              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            ) : (
              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
              </svg>
            )}
          </button>
        </div>
      </nav>

      {/* Mobile Menu Overlay */}
      <div 
        className={`fixed inset-0 z-[100] md:hidden transition-all duration-500 ease-in-out ${
          isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
        }`}
        style={{ height: '100vh', width: '100vw' }}
      >
        {/* Backdrop */}
        <div 
          className="absolute inset-0 bg-black/80 backdrop-blur-2xl" 
          onClick={() => setIsOpen(false)} 
        />
        
        {/* Content */}
        <div 
          className={`absolute inset-y-0 right-0 w-full max-w-sm p-8 shadow-2xl transition-transform duration-500 ease-in-out ${
            isOpen ? "translate-x-0" : "translate-x-full"
          } ${isLanding ? "bg-[#1c3d36]" : "bg-white"}`}
        >
          <div className="flex items-center justify-end mb-12">
            <button
              onClick={() => setIsOpen(false)}
              className={`p-3 rounded-xl ${isLanding ? "text-white hover:bg-white/10" : "text-stone-900 hover:bg-stone-100"}`}
            >
              <svg className="h-7 w-7" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          <div className="flex flex-col gap-6 overflow-y-auto max-h-[calc(100vh-250px)] no-scrollbar">
            <p className={`text-[10px] font-bold uppercase tracking-[0.2em] mb-2 ${isLanding ? "text-white/40" : "text-stone-400"}`}>
              Navigation
            </p>
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                onClick={() => setIsOpen(false)}
                className={`text-3xl font-bold transition-all hover:translate-x-2 ${
                  isLanding ? "text-white" : "text-stone-900"
                } ${pathname === link.href ? (isLanding ? "text-[#03ff94]" : "text-emerald-700") : ""}`}
              >
                {link.label}
              </Link>
            ))}
            
            <div className="mt-8 pt-8 border-t border-white/10">
              <Link
                href="/scenarios/new"
                onClick={() => setIsOpen(false)}
                className="flex items-center justify-between rounded-2xl px-8 py-5 text-lg font-bold shadow-2xl transition hover:scale-[1.02] active:scale-95"
                style={{ backgroundColor: "#03ff94", color: "#1c3d36" }}
              >
                Start New Scenario
                <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                </svg>
              </Link>
            </div>
          </div>
          
          <div className="absolute bottom-10 left-8 right-8">
            <div className={`p-6 rounded-2xl border ${isLanding ? "bg-white/5 border-white/10" : "bg-stone-50 border-stone-200"}`}>
               <p className={`text-xs leading-relaxed ${isLanding ? "text-white/60" : "text-stone-500"}`}>
                ACI Platform provides AI-driven agronomic modelling for precision agriculture.
              </p>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}