"use client";

import Link from "next/link";
import {
  UserRoundCog,
  ShoppingCart,
  Search,
  ChevronDown,
  ShieldCheck,
} from "lucide-react";
import ThemeToggle from "../common/theme-toggle";
import { useState } from "react";

export default function Header({
  searchOpen,
  setSearchOpen,
}: {
  searchOpen: boolean;
  setSearchOpen: React.Dispatch<React.SetStateAction<boolean>>;
}) {
  const [profileOpen, setProfileOpen] = useState(false);

  return (
    <header className="fixed top-0 z-50 w-full border-b border-border-custom bg-header/90 shadow-sm backdrop-blur-md transition-colors duration-200">
      <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-6">
        {/* Logo */}
        <Link href="/" className="group flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-tr from-blue-900 to-blue-600 shadow-md transition-transform group-hover:scale-105">
            <ShieldCheck
              size={21}
              strokeWidth={2.5}
              className="text-white"
            />
          </div>

          <div>
            <span className="block text-xl font-black leading-none tracking-tight text-foreground">
              BIZ<span className="text-blue-600">TRUST</span>
            </span>

            <span className="mt-0.5 block text-[9px] font-extrabold uppercase tracking-[0.15em] text-blue-600">
              Verify. Trust. Grow.
            </span>
          </div>
        </Link>

        {/* Navigation */}
        <nav className="hidden items-center gap-8 font-medium text-muted-foreground text-sm  md:flex">
          <Link
            href="/api-services"
            className="group flex items-center gap-1 transition-colors hover:text-blue-600"
          >
            <span>API Services</span>
            <ChevronDown
              size={18}
              className="transition-transform duration-200 group-hover:rotate-180"
            />
          </Link>

          <Link
            href="/erp-solutions"
            className="group flex items-center gap-1 transition-colors hover:text-blue-600"
          >
            <span>ERP Solutions</span>

            <ChevronDown
              size={18}
              className="transition-transform duration-200 group-hover:rotate-180"
            />
          </Link>

          <Link
            href="/pricing"
            className="transition-colors hover:text-blue-600"
          >
            Pricing
          </Link>

          <Link
            href="/documentation"
            className="transition-colors hover:text-blue-600"
          >
            Documentation
          </Link>

        </nav>

        {/* Right Actions */}
        <div className="flex items-center gap-5">
          {/* Search */}
          <button
            type="button"
            onClick={() => setSearchOpen((prev) => !prev)}
            aria-label={searchOpen ? "Close search" : "Open search"}
            className={`hidden transition-colors sm:block ${searchOpen
                ? "text-blue-600 cursor-pointer"
                : "text-muted-foreground hover:text-blue-600 cursor-pointer"
              }`}
          >
            <Search size={20} />
          </button>

          {/* Cart */}
          <Link
            href="/cart"
            aria-label="Shopping cart"
            className="text-muted-foreground transition-colors hover:text-blue-600"
          >
            <ShoppingCart size={21} />
          </Link>

          {/* Profile */}
          <div className="relative">
            <button
              onClick={() => setProfileOpen(!profileOpen)}
              type="button"
              aria-label="User profile"
              className="flex cursor-pointer items-center gap-1 text-muted-foreground transition-colors hover:text-blue-600"
            >
              <UserRoundCog size={21} />
              <ChevronDown
                size={14}
                className={`transition-transform duration-200 ${profileOpen ? "rotate-180" : ""
                  }`}
              />
            </button>

            {profileOpen && (
              <div className="absolute right-0 top-full z-50 mt-3 w-48 overflow-hidden rounded-xl border border-border-custom bg-header shadow-xl">
                <Link
                  href="/profile"
                  onClick={() => setProfileOpen(false)}
                  className="block px-4 py-3 text-sm text-muted-foreground transition-colors hover:bg-hover-background hover:text-blue-600"
                >
                  My Profile
                </Link>

                <button
                  type="button"
                  onClick={() => {
                    setProfileOpen(false);
                  }}
                  className="block w-full cursor-pointer px-4 py-3 text-left text-sm text-muted-foreground transition-colors hover:bg-hover-background hover:text-blue-600"
                >
                  Logout
                </button>
              </div>
            )}
          </div>

          {/* Theme */}
          <ThemeToggle />

          {/* Get Started */}
          <Link
            href="/companies"
            className="hidden rounded-xl bg-blue-600 px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-blue-500/20 transition-all hover:-translate-y-0.5 hover:bg-blue-700 sm:block"
          >
            Get Started →
          </Link>
        </div>
      </div>
    </header>
  );
}