"use client";

import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { LanguageSwitcher } from "@/components/language-switcher";
import { Menu } from "lucide-react";
import Image from "next/image";
import { Link, usePathname } from "@/i18n/routing";
import { useState } from "react";
import { useTranslations } from "next-intl";

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);
  const t = useTranslations();
  const pathname = usePathname();

  const navItems = [
    { label: t("common.home"), href: "/" },
    { label: t("common.about"), href: "/about-us" },
    { label: t("common.services"), href: "/our-services" },
    { label: t("common.lifi"), href: "/lifi" },
    { label: t("common.portfolio"), href: "/our-work" },
    { label: t("common.team"), href: "/our-team" },
    { label: t("common.blog"), href: "/blogs" },
  ];

  const isActive = (href: string) =>
    href === "/" ? pathname === "/" : pathname.startsWith(href);

  return (
    <header
      className="relative bg-linear-to-br from-[#1488cc] to-[#2b32b2] h-16 sm:h-20 md:h-24 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-[120px] py-3 sm:py-4 overflow-hidden"
      style={{
        backgroundImage: 'linear-gradient(112.12deg, #1488CC 0%, #2B32B2 140%)'
      }}
    >

      <div className="absolute -start-[250px] sm:-start-[350px] md:-start-[500px] lg:-start-[601px] -top-[200px] sm:-top-[300px] md:-top-[400px] lg:-top-[457px] w-[500px] h-[500px] sm:w-[700px] sm:h-[700px] md:w-[850px] md:h-[850px] lg:w-[914px] lg:h-[914px] pointer-events-none opacity-40 z-0">
        <Image
          src="/images/hero/ellipse.svg"
          alt=""
          fill
          className="object-contain"
          priority
        />
      </div>

      <div className="absolute left-1/2 -bottom-20 -translate-x-1/2 w-full max-w-[900px] lg:max-w-[1200px] h-[400px] sm:h-[500px] md:h-[590px] pointer-events-none opacity-20 z-0">
        <div className="relative w-full h-full rotate-180 scale-y-[-1]">
          <Image
            src="/images/hero/bg-line.svg"
            alt=""
            fill
            className="object-contain"
          />
        </div>
      </div>

      <div className="relative z-10 flex items-center justify-between h-full max-w-[1920px] mx-auto">

        <Link href="/" className="relative h-8 w-20 sm:h-9 sm:w-22 md:h-10 md:w-24 shrink-0">
          <Image
            src="/images/logo.svg"
            alt={t("header.logoAlt")}
            fill
            className="object-contain"
            priority
          />
        </Link>

        <nav className="hidden lg:flex items-center gap-2 xl:gap-4">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`px-2 xl:px-3 py-2 rounded-full text-sm xl:text-base font-medium text-white transition-colors hover:bg-white/10 ${
                isActive(item.href) ? "bg-white/10 font-semibold" : ""
              }`}
            >
              {item.label}
            </Link>
          ))}
        </nav>

        <div className="hidden lg:flex items-center gap-3 xl:gap-6">

          <LanguageSwitcher />

          <Button
            asChild
              variant="outline"
              className="h-10 xl:h-12 px-4 xl:px-6 rounded-xl border-primary-100 bg-transparent text-white hover:bg-white/10 hover:text-white font-semibold hover:border-primary-100 text-sm xl:text-base whitespace-nowrap"
            >
            <Link href="/contact-us">
              {t("common.contact")}
            </Link>
          </Button>
        </div>

        <div className="lg:hidden flex items-center gap-2">
          <Sheet open={isOpen} onOpenChange={setIsOpen}>
            <SheetTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="h-9 w-9 sm:h-10 sm:w-10 text-white hover:bg-white/10"
              >
                <Menu className="h-5 w-5 sm:h-6 sm:w-6" />
                <span className="sr-only">{t("common.openMenu")}</span>
              </Button>
            </SheetTrigger>
            <SheetContent
              side="left"
              className="w-[280px] sm:w-[340px] bg-primary border-white/16"
            >
              <div className="flex flex-col gap-4 sm:gap-6 mt-6 sm:mt-8">

                <nav className="flex flex-col gap-1.5 sm:gap-2 py-10">
                  {navItems.map((item) => (
                    <Link
                      key={item.href}
                      href={item.href}
                      onClick={() => setIsOpen(false)}
                      className={`px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg text-sm sm:text-base font-medium text-white transition-colors hover:bg-white/10 text-start ${
                        isActive(item.href) ? "bg-white/10 font-semibold" : ""
                      }`}
                    >
                      {item.label}
                    </Link>
                  ))}
                </nav>

                <div className="flex flex-col gap-2.5 sm:gap-3 pt-3 sm:pt-4 border-t border-white/16">
                  <LanguageSwitcher />

                  <Button
                    asChild
                      variant="outline"
                      className="h-11 sm:h-12 rounded-xl border-primary-100 bg-transparent text-white hover:bg-white/10 hover:text-white font-semibold hover:border-primary-100 w-full"
                    >
                    <Link href="/contact-us" onClick={() => setIsOpen(false)}>
                      {t("common.contact")}
                    </Link>
                  </Button>
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  );
}