// components/Header.tsx
"use client";

import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import {
  FiChevronDown,
  FiClipboard,
  FiArrowRight,
  FiMenu,
  FiX,
} from "react-icons/fi";
import ThemeToggle from "./ThemeToggle";

const omsLogoUrl = "/oms-logo.svg";

// --- Basic Dropdown Placeholder ---
type DropdownMenuProps = {
  trigger: React.ReactNode;
  children: React.ReactNode;
  menuClasses?: string;
};
const DropdownMenu = ({
  trigger,
  children,
  menuClasses = "w-48",
}: DropdownMenuProps) => (
  <div className="relative group">
    <button className="flex items-center space-x-1 text-sm font-medium focus:outline-none inherit-color group">
      {trigger}
      <FiChevronDown className="w-4 h-4 transition-transform duration-200 group-hover:rotate-180" />
    </button>
    <div
      className={`
        absolute left-0 mt-2 ${menuClasses} origin-top-left rounded-md shadow-lg z-50
        bg-light border border-gray-200 dark:bg-[var(--color-dark-bg-secondary)] dark:border-[var(--color-dark-border)]
        opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200
      `}
    >
      <div className="py-1">{children}</div>
    </div>
  </div>
);

type DropdownLinkProps = {
  href: string;
  children: React.ReactNode;
};
const DropdownLink = ({ href, children }: DropdownLinkProps) => (
  <Link
    href={href}
    className="block px-4 py-2 text-sm text-gray-700 dark:text-[var(--color-dark-text-secondary)] hover:bg-gray-100 hover:text-primary dark:hover:bg-gray-700 dark:hover:text-primary"
  >
    {children}
  </Link>
);
// --- End Dropdown Placeholder ---

const Header = () => {
  const pathname = usePathname() || "/";
  const isActive = (path: string) => pathname === path;

  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => setIsMenuOpen((open) => !open);
  const handleMobileLinkClick = () => setIsMenuOpen(false);

  // Optionally switch logo based on a global CSS class or via next-themes
  const currentLogo = omsLogoUrl;

  return (
    <header className="sticky top-0 z-50 shadow-md bg-light dark:bg-dark-bg dark:border-b dark:border-dark-border">
      {/* Top Row */}
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link
            href="/"
            className="flex items-center space-x-2"
            title="OMS Home"
          >
            <Image
              src={currentLogo}
              alt="OMS Logo"
              width={40}
              height={40}
              priority
            />
            <span className="text-xl font-bold text-dark dark:text-light hidden sm:inline">
              Owethu Managed Services
            </span>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-6 lg:space-x-8">
            <Link
              href="/"
              className={`text-sm font-medium ${
                isActive("/")
                  ? "text-primary font-semibold"
                  : "text-gray-700 dark:text-[var(--color-dark-text-secondary)] hover:text-primary"
              }`}
            >
              Home
            </Link>
            <Link
              href="/about"
              className={`text-sm font-medium ${
                pathname.startsWith("/about")
                  ? "text-primary font-semibold"
                  : "text-gray-700 dark:text-[var(--color-dark-text-secondary)] hover:text-primary"
              }`}
            >
              About Us
            </Link>
            <Link
              href="/contact"
              className={`text-sm font-medium ${
                isActive("/contact")
                  ? "text-primary font-semibold"
                  : "text-gray-700 dark:text-[var(--color-dark-text-secondary)] hover:text-primary"
              }`}
            >
              Contact Us
            </Link>
          </nav>

          {/* Right Utilities (Desktop) */}
          <div className="hidden md:flex items-center space-x-4">
            <ThemeToggle />

            <Link
              href="/request-demo"
              className="flex items-center text-sm font-medium bg-primary text-dark px-3 py-1.5 rounded-md hover:bg-opacity-90 transition-colors"
              title="Request a Demo"
            >
              <FiClipboard className="w-4 h-4 mr-1.5" />
              Request Demo
            </Link>
          </div>

          {/* Mobile Buttons */}
          <div className="md:hidden flex items-center">
            <ThemeToggle />

            <button
              onClick={toggleMenu}
              className="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary focus:outline-none ml-3"
              aria-label="Toggle menu"
            >
              {isMenuOpen ? (
                <FiX className="w-6 h-6" />
              ) : (
                <FiMenu className="w-6 h-6" />
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Secondary Row */}
      <div className="bg-primary dark:bg-primary">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="hidden md:flex justify-between items-center h-12">
            <nav className="flex items-center space-x-6 lg:space-x-8 text-dark">
              <DropdownMenu trigger={<span>Services</span>}>
                <DropdownLink href="/services/resource-augmentation">
                  Resource Augmentation
                </DropdownLink>
                <DropdownLink href="/services/project-management">
                  Project Management
                </DropdownLink>
                <DropdownLink href="/services/product-development">
                  Product Development
                </DropdownLink>
              </DropdownMenu>
              <DropdownMenu trigger={<span>Products</span>}>
                <DropdownLink href="/products/obse">OBSE</DropdownLink>
              </DropdownMenu>
              <DropdownMenu trigger={<span>Join Our Team</span>}>
                <DropdownLink href="/join-us/vacancies">Vacancies</DropdownLink>
                <DropdownLink href="/join-us/portal">
                  Recruitment Portal
                </DropdownLink>
              </DropdownMenu>
            </nav>
            <Link
              href="/services"
              className="flex items-center text-sm font-medium text-dark hover:text-opacity-80 transition-opacity group"
            >
              Explore Our Offerings
              <FiArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
            </Link>
          </div>
        </div>
      </div>

      {/* Mobile Menu Panel */}
      <div
        id="mobile-menu"
        className={`md:hidden absolute top-full left-0 w-full shadow-lg transition-all duration-300 ease-in-out overflow-hidden bg-light dark:bg-[var(--color-dark-bg-secondary)] border-t border-gray-200 dark:border-[var(--color-dark-border)] ${
          isMenuOpen ? "max-h-screen py-4" : "max-h-0 py-0"
        }`}
      >
        <nav className="container mx-auto px-4 sm:px-6 lg:px-8 flex flex-col space-y-3">
          <Link
            href="/"
            onClick={handleMobileLinkClick}
            className={`block py-2 text-base font-medium ${
              isActive("/")
                ? "text-primary font-semibold"
                : "text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
            }`}
          >
            Home
          </Link>
          <Link
            href="/about"
            onClick={handleMobileLinkClick}
            className={`block py-2 text-base font-medium ${
              pathname.startsWith("/about")
                ? "text-primary font-semibold"
                : "text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
            }`}
          >
            About Us
          </Link>

          <span className="pt-2 text-xs uppercase text-gray-500 dark:text-gray-400">
            Services
          </span>
          <Link
            href="/services/resource-augmentation"
            onClick={handleMobileLinkClick}
            className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
          >
            Resource Augmentation
          </Link>
          <Link
            href="/services/project-management"
            onClick={handleMobileLinkClick}
            className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
          >
            Project Management
          </Link>
          <Link
            href="/services/product-development"
            onClick={handleMobileLinkClick}
            className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
          >
            Product Development
          </Link>

          <span className="pt-2 text-xs uppercase text-gray-500 dark:text-gray-400">
            Products
          </span>
          <Link
            href="/products/obse"
            onClick={handleMobileLinkClick}
            className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
          >
            OBSE
          </Link>

          <span className="pt-2 text-xs uppercase text-gray-500 dark:text-gray-400">
            Join Us
          </span>
          <Link
            href="/join-us/vacancies"
            onClick={handleMobileLinkClick}
            className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
          >
            Vacancies
          </Link>
          <Link
            href="/join-us/portal"
            onClick={handleMobileLinkClick}
            className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
          >
            Recruitment Portal
          </Link>

          <Link
            href="/contact"
            onClick={handleMobileLinkClick}
            className={`block py-2 text-base font-medium ${
              isActive("/contact")
                ? "text-primary font-semibold"
                : "text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
            }`}
          >
            Contact Us
          </Link>

          <div className="pt-4">
            <Link
              href="/request-demo"
              onClick={handleMobileLinkClick}
              className="flex w-full justify-center items-center text-sm font-medium bg-primary text-dark px-4 py-2 rounded-md hover:bg-opacity-90 transition-colors"
              title="Request a Demo"
            >
              <FiClipboard className="w-4 h-4 mr-1.5" />
              Request Demo
            </Link>
          </div>
        </nav>
      </div>
    </header>
  );
};

export default Header;