"use client";

import { FolderKanban, Home, Mail, Package, ShieldCheck, User } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState, type ComponentType } from "react";

import { LocaleToggle } from "@/components/layout/locale-toggle";
import { SoundToggle } from "@/components/sound-toggle";
import { ThemeToggle } from "@/components/theme-toggle";
import { Dock, DockIcon } from "@/components/ui/dock";
import { buildAdminUrl } from "@/lib/admin-routing";
import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
import { cn } from "@/lib/utils";

type SiteDockProps = {
  lightLogoUrl?: string | null;
  darkLogoUrl?: string | null;
  defaultLocale: AppLocale;
  /**
   * Server-computed via `isSuperAdmin()` in the parent layout. This client
   * component only decides whether to *render* the Admin shortcut — it performs
   * no auth check and grants no access; the real guard lives server-side on
   * each admin page/action.
   */
  isSuperAdmin?: boolean;
};

type NavItem = {
  key: "home" | "about" | "portfolio" | "products" | "contact";
  path: string;
  Icon: ComponentType<{ className?: string }>;
  disabled?: boolean;
};

const navItems: NavItem[] = [
  { key: "home", path: "", Icon: Home },
  { key: "about", path: "/about", Icon: User },
  { key: "portfolio", path: "/portfolio", Icon: FolderKanban },
  { key: "products", path: "/products", Icon: Package, disabled: true },
  { key: "contact", path: "/contact", Icon: Mail },
];

function isNavItemActive(currentPath: string, itemPath: string) {
  if (itemPath === "/") {
    return currentPath === "/";
  }
  return currentPath === itemPath || currentPath.startsWith(`${itemPath}/`);
}

function MenuClock({ locale }: { locale: string }) {
  const [time, setTime] = useState("");

  useEffect(() => {
    const format = () =>
      setTime(
        new Date().toLocaleTimeString(locale === "ar" ? "ar" : locale, {
          hour: "2-digit",
          minute: "2-digit",
        }),
      );
    format();
    const id = setInterval(format, 20_000);
    return () => clearInterval(id);
  }, [locale]);

  return (
    <span
      suppressHydrationWarning
      className="hidden select-none px-1 text-xs font-semibold tabular-nums text-foreground/65 sm:inline"
    >
      {time || "--:--"}
    </span>
  );
}

export function SiteDock({
  lightLogoUrl,
  darkLogoUrl,
  defaultLocale,
  isSuperAdmin = false,
}: SiteDockProps) {
  const locale = useLocale();
  const pathname = usePathname();
  const t = useTranslations("navigation");
  const { theme, resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const isArabic = locale === "ar";
  const currentPath = stripLocalePrefix(pathname);
  const homeHref = getLocalizedPath(locale, "/", defaultLocale);
  const adminHref = buildAdminUrl("/");

  const activeTheme = theme === "system" ? resolvedTheme : theme;
  const isDark = mounted && activeTheme === "dark";
  const logoSrc = isDark
    ? darkLogoUrl || lightLogoUrl || "/logos/dark-primary.svg"
    : lightLogoUrl || darkLogoUrl || "/logos/light-primary.svg";

  const brandSubtitle = isArabic
    ? "مطوّر ويب · فريلانسر"
    : "Webdesigner Bremen · Freelancer";

  const controlButtonClassName =
    "h-8 w-8 rounded-full border border-transparent text-foreground/70 hover:bg-accent hover:text-foreground";

  return (
    <>
      {/* ===== Top menu bar (macOS-style utility strip) ===== */}
      <header
        className="fixed inset-x-0 top-0 z-40 border-b border-border/60 bg-background/70 backdrop-blur-chrome"
        style={{ paddingTop: "env(safe-area-inset-top, 0px)" }}
      >
        <div className="mx-auto flex h-12 max-w-[100rem] items-center gap-3 px-4 sm:px-6">
          <Link
            href={homeHref}
            className="flex items-center gap-2 rounded-full px-1 py-1 font-black tracking-tight"
            aria-label="mohfarawati"
          >
            <span className="h-2 w-2 rounded-full bg-primary shadow-[0_0_10px_hsl(var(--primary))]" />
            <span className="text-sm" dir={isArabic ? "rtl" : undefined}>
              {isArabic ? (
                <>
                  <span className="text-[hsl(var(--hero-ink))] dark:text-foreground">محمد</span>{" "}
                  <span className="text-primary">فرواتي</span>
                </>
              ) : (
                <>
                  <span className="text-[hsl(var(--hero-ink))] dark:text-foreground">MOH</span>
                  <span className="text-primary">FARAWATI</span>
                </>
              )}
            </span>
          </Link>

          <span
            className="hidden border-s border-border/60 ps-3 text-xs font-medium text-foreground/60 md:inline"
            dir={isArabic ? "rtl" : undefined}
          >
            {brandSubtitle}
          </span>

          <div className="ms-auto flex items-center gap-1">
            <MenuClock locale={locale} />
            <LocaleToggle
              locale={locale}
              defaultLocale={defaultLocale}
              className={controlButtonClassName}
            />
            <SoundToggle
              ariaLabel={t("soundMute")}
              mutedAriaLabel={t("soundUnmute")}
              variant="ghost"
              className={controlButtonClassName}
            />
            <ThemeToggle
              ariaLabel={t("themeToggle")}
              variant="ghost"
              className={controlButtonClassName}
            />
            {isSuperAdmin ? (
              <a
                href={adminHref}
                aria-label="Open admin dashboard"
                className="ms-1 inline-flex h-8 items-center gap-1.5 rounded-full border border-border/60 bg-background/60 px-3 text-xs font-semibold text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
              >
                <ShieldCheck className="h-4 w-4" />
                <span className="hidden lg:inline">Admin</span>
              </a>
            ) : null}
          </div>
        </div>
      </header>

      {/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
      <div
        className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
        style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
      >
        <Dock
          direction="bottom"
          iconSize={50}
          iconMagnification={86}
          iconDistance={160}
          className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
        >
          {/* Logo — first icon in the dock */}
          <DockIcon className="group relative overflow-visible rounded-[28%] border border-border/60 bg-white shadow-[inset_0_1px_0_rgba(255,255,255,0.5)]">
            <Link
              href={homeHref}
              aria-label="mohfarawati — Home"
              className="flex h-full w-full items-center justify-center rounded-[inherit]"
            >
              <Image
                src={logoSrc}
                alt="mohfarawati"
                width={96}
                height={96}
                sizes="96px"
                priority
                className={cn(
                  "h-full w-full rounded-full object-contain transition-opacity duration-300",
                  mounted ? "opacity-100" : "opacity-0",
                )}
              />
            </Link>
            <DockTip label="mohfarawati" />
          </DockIcon>

          <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />

          {navItems.map(({ key, path, Icon, disabled }) => {
            const itemPath = path || "/";
            const isActive = isNavItemActive(currentPath, itemPath);
            const label = t(key);

            const inner = (
              <span className="flex h-full w-full items-center justify-center rounded-[inherit]">
                <Icon className="h-[72%] w-[72%]" strokeWidth={1.9} />
              </span>
            );

            return (
              <DockIcon
                key={key}
                className={cn(
                  "group relative overflow-visible rounded-[28%] border transition-all duration-200",
                  "shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]",
                  isActive
                    ? "border-primary/50 bg-primary/15 text-primary shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_0_0_1px_hsl(var(--primary)/0.35),0_10px_24px_-8px_hsl(var(--primary)/0.6)]"
                    : disabled
                      ? "border-border/50 bg-foreground/[0.03] text-foreground/35"
                      : "border-border/60 bg-foreground/[0.05] text-foreground/75 hover:border-border hover:bg-foreground/[0.09] hover:text-foreground",
                )}
              >
                {/* top gloss */}
                <span
                  aria-hidden
                  className="pointer-events-none absolute inset-0 rounded-[inherit] bg-gradient-to-b from-white/10 to-transparent"
                />
                {disabled ? (
                  <span aria-disabled="true" className="flex h-full w-full cursor-not-allowed items-center justify-center">
                    {inner}
                  </span>
                ) : (
                  <Link
                    href={getLocalizedPath(locale, itemPath, defaultLocale)}
                    aria-label={label}
                    aria-current={isActive ? "page" : undefined}
                    className="flex h-full w-full items-center justify-center rounded-[inherit]"
                  >
                    {inner}
                  </Link>
                )}

                <DockTip label={label} soon={disabled ? t("soon") : undefined} />
              </DockIcon>
            );
          })}
        </Dock>
      </div>
    </>
  );
}

function DockTip({ label, soon }: { label: string; soon?: string }) {
  return (
    <span
      role="tooltip"
      className="pointer-events-none absolute bottom-[calc(100%+0.75rem)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-lg border border-border/60 bg-background/90 px-2.5 py-1 text-xs font-semibold text-foreground opacity-0 shadow-md backdrop-blur-chrome transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
    >
      {label}
      {soon ? <span className="ms-1.5 text-[0.625rem] tracking-wide text-primary">{soon}</span> : null}
    </span>
  );
}