"use client";

import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { LanguageSwitcher } from "@/components/language-switcher";
import { Link, usePathname } from "@/i18n/routing";
import { isRtlLocale, type Locale } from "@/lib/i18n-utils";
import { cn } from "@/lib/utils";
import { Facebook, Instagram, Mail, Menu, Phone } from "lucide-react";
import Image from "next/image";
import { useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { useGlobalSettings } from "@/components/providers/global-settings-provider";
import { motion, useScroll, useMotionValueEvent } from "motion/react";

const WEBSITE_LOGO_SRC = "/images/login/icons/maal co logo 1.svg";
const ease = [0.22, 1, 0.36, 1] as const;

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const t = useTranslations();
  const locale = useLocale() as Locale;
  const isRtl = isRtlLocale(locale);
  const pathname = usePathname();
  const { settings } = useGlobalSettings();
  const { scrollY } = useScroll();

  // Detect scroll to add shadow / backdrop on main nav
  useMotionValueEvent(scrollY, "change", (y) => setScrolled(y > 12));

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

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

  return (
    <motion.header
      className="w-full"
      initial={{ opacity: 0, y: -12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, ease }}
    >
      {/* ── Top bar ── */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.55, ease, delay: 0.15 }}
        className="h-14 px-4 md:px-8 lg:px-[120px]"
        style={{ background: "linear-gradient(to right, #1E7C73, #00AE9D)" }}
      >
        <div className="mx-auto flex h-full w-full max-w-[1440px] items-center justify-between">
          {/* Contact info */}
          <motion.div
            className="hidden items-center gap-4 lg:flex"
            initial={{ opacity: 0, x: isRtl ? 16 : -16 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, ease, delay: 0.3 }}
          >
            <div className="flex items-center gap-2">
              <Phone className="h-4 w-4 text-white" />
              <span className="text-sm font-medium text-white">{t("header.inquiry")}</span>
            </div>
            <div className="h-4 w-px bg-white/40" />
            <div className="flex items-center gap-2">
              <Mail className="h-4 w-4 text-white" />
              <span className="text-sm font-medium text-white">
                {t("header.emailLabel")} : {settings?.company?.company_email || t("footer.email")}
              </span>
            </div>
          </motion.div>

          {/* Social + lang */}
          <motion.div
            className="flex items-center gap-3"
            initial={{ opacity: 0, x: isRtl ? -16 : 16 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, ease, delay: 0.3 }}
          >
            <LanguageSwitcher size="compact" className="border border-white/20" />
            <span className="text-sm font-medium text-white">{t("contact.followUs")}</span>
            <motion.div whileHover={{ scale: 1.2, rotate: 5 }} transition={{ duration: 0.2 }}>
              <Facebook className="h-4 w-4 cursor-pointer text-white" />
            </motion.div>
            <motion.div whileHover={{ scale: 1.2, rotate: -5 }} transition={{ duration: 0.2 }}>
              <Instagram className="h-4 w-4 cursor-pointer text-white" />
            </motion.div>
          </motion.div>
        </div>
      </motion.div>

      {/* ── Main nav ── */}
      <motion.div
        className="h-20 bg-white px-4 md:px-8 lg:px-[120px]"
        animate={{
          boxShadow: scrolled
            ? "0 4px 32px rgba(13,52,48,0.10)"
            : "0 1px 0 rgba(13,52,48,0.06)",
        }}
        transition={{ duration: 0.35 }}
      >
        <div className="mx-auto flex h-full w-full max-w-[1440px] items-center justify-between gap-4">

          {/* Logo */}
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, ease: [0.34, 1.56, 0.64, 1], delay: 0.2 }}
            whileHover={{ scale: 1.06 }}
          >
            <Link
              href="/"
              className="relative flex h-14 w-14 shrink-0 overflow-hidden rounded-full border border-stroke"
            >
              <Image
                src={settings?.company?.logo_primary || WEBSITE_LOGO_SRC}
                alt={t("header.logoAlt")}
                fill
                className="object-contain"
                priority
              />
            </Link>
          </motion.div>

          {/* Desktop nav */}
          <nav className="hidden items-center lg:flex">
            {navItems.map((item, i) => {
              const active = isActiveRoute(item.href);
              return (
                <motion.div
                  key={item.href}
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.45, ease, delay: 0.25 + i * 0.06 }}
                >
                  <Link
                    href={item.href}
                    className={cn(
                      "group relative flex h-[72px] items-center justify-center px-4 py-2 text-base font-medium transition-colors hover:text-primary",
                      active ? "font-semibold text-primary" : "text-font-primary"
                    )}
                  >
                    {item.label}
                    {/* Animated underline */}
                    <motion.span
                      className="absolute bottom-3 h-[2px] rounded-full bg-primary"
                      initial={false}
                      animate={{ width: active ? "60%" : "0%" }}
                      transition={{ duration: 0.3, ease }}
                    />
                    {/* Hover underline (CSS group-hover) */}
                    {!active && (
                      <span className="absolute bottom-3 h-[2px] w-0 rounded-full bg-primary/40 transition-all duration-300 group-hover:w-[60%]" />
                    )}
                  </Link>
                </motion.div>
              );
            })}
          </nav>

          {/* Desktop CTA */}
          <motion.div
            className={cn(
              "hidden items-center gap-4 lg:flex",
              isRtl ? "flex-row" : "flex-row-reverse"
            )}
            initial={{ opacity: 0, x: isRtl ? -20 : 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, ease, delay: 0.4 }}
          >
            <Link href="/contact-us">
              <motion.div
                whileHover={{ scale: 1.1, rotate: 8, backgroundColor: "rgba(30,124,115,0.12)" }}
                whileTap={{ scale: 0.95 }}
                transition={{ duration: 0.2 }}
                className="flex h-12 w-12 items-center justify-center rounded-full bg-primary-50"
              >
                <Phone className="h-5 w-5 text-primary" />
              </motion.div>
            </Link>
            <Link href="/contact-us">
              <Button className="h-12 rounded-full bg-primary px-6 text-sm font-bold tracking-[-0.084px] text-white hover:bg-primary-600">
                {t("common.freeConsultation")}
              </Button>
            </Link>
          </motion.div>

          {/* Mobile actions */}
          <div className="flex items-center gap-2 lg:hidden">
            <LanguageSwitcher size="compact" className="border border-stroke" />
            <Sheet open={isOpen} onOpenChange={setIsOpen}>
              <SheetTrigger asChild>
                <Button
                  variant="ghost"
                  size="icon-sm"
                  className="text-font-primary hover:bg-primary/10"
                >
                  <Menu className="h-5 w-5" />
                  <span className="sr-only">{t("common.openMenu")}</span>
                </Button>
              </SheetTrigger>
              <SheetContent
                side={isRtl ? "right" : "left"}
                className="w-[300px] border-stroke bg-white"
              >
                <div className="mt-8 flex flex-col gap-6">
                  <Link href="/" onClick={() => setIsOpen(false)} className="relative h-10 w-[110px]">
                    <Image
                      src={settings?.company?.logo_primary || WEBSITE_LOGO_SRC}
                      alt={t("header.logoAlt")}
                      fill
                      className="object-contain"
                    />
                  </Link>

                  <nav className="flex flex-col gap-2 py-2">
                    {navItems.map((item, i) => (
                      <motion.div
                        key={item.href}
                        initial={{ opacity: 0, x: isRtl ? 16 : -16 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.3, ease, delay: i * 0.05 }}
                      >
                        <Link
                          href={item.href}
                          onClick={() => setIsOpen(false)}
                          className={cn(
                            "block rounded-xl px-4 py-3 text-start text-base font-medium text-font-primary transition-colors hover:bg-primary/10 hover:text-primary",
                            isActiveRoute(item.href) && "bg-primary/10 font-semibold text-primary"
                          )}
                        >
                          {item.label}
                        </Link>
                      </motion.div>
                    ))}
                  </nav>

                  <div className="flex flex-col gap-3 border-t border-stroke pt-4">
                    <Link href="/contact-us" onClick={() => setIsOpen(false)}>
                      <Button className="h-12 w-full rounded-full bg-primary px-6 text-sm font-bold tracking-[-0.084px] text-white hover:bg-primary-600">
                        {t("common.freeConsultation")}
                      </Button>
                    </Link>
                  </div>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </motion.div>
    </motion.header>
  );
}