"use client";

import { ShieldCheck } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLocale, useTranslations } from "next-intl";

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 = {
  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 NavKey = "home" | "about" | "portfolio" | "products" | "contact";

type NavItem = {
  key: NavKey;
  path: string;
  disabled?: boolean;
};

const navItems: NavItem[] = [
  { key: "home", path: "" },
  { key: "about", path: "/about" },
  { key: "portfolio", path: "/portfolio" },
  { key: "products", path: "/products", disabled: true },
  { key: "contact", path: "/contact" },
];

// Graphite squircle that matches the SVG page icons, used for the live control
// tiles (theme / sound / language / admin) so the whole dock reads as one set.
const controlTile =
  "group relative overflow-visible rounded-[26%] bg-gradient-to-b from-[#3f4551] to-[#191d24] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-white/10 transition-shadow duration-200 hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]";
const controlButton =
  "h-full w-full rounded-[inherit] border-0 bg-transparent text-white hover:bg-white/10 hover:text-white";

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

export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps) {
  const locale = useLocale();
  const pathname = usePathname();
  const t = useTranslations("navigation");

  const currentPath = stripLocalePrefix(pathname);
  const homeHref = getLocalizedPath(locale, "/", defaultLocale);

  return (
    <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={52}
        iconMagnification={90}
        iconDistance={160}
        className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
      >
        {/* ── Logo (fixed src → no refresh flash) ── */}
        <DockIcon className="group relative overflow-visible rounded-[26%] bg-white shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-black/10">
          <Link
            href={homeHref}
            aria-label="mohfarawati — Home"
            className="flex h-full w-full items-center justify-center rounded-[inherit]"
          >
            <Image
              src="/logos/light-primary.svg"
              alt="mohfarawati"
              width={104}
              height={104}
              sizes="104px"
              priority
              className="h-full w-full rounded-[inherit] object-contain"
            />
          </Link>
          <DockTip label="mohfarawati" />
        </DockIcon>

        <DockSeparator />

        {/* ── Pages ── */}
        {navItems.map(({ key, path, disabled }) => {
          const itemPath = path || "/";
          const isActive = isNavItemActive(currentPath, itemPath);
          const label = t(key);
          const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;

          const icon = (
            <Image
              src={src}
              alt={label}
              width={104}
              height={104}
              sizes="104px"
              className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
            />
          );

          return (
            <DockIcon
              key={key}
              className={cn(
                "group relative overflow-visible rounded-[26%] transition-shadow duration-200",
                isActive
                  ? "shadow-[0_12px_26px_-8px_hsl(var(--primary)/0.65)]"
                  : "shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]",
              )}
            >
              {disabled ? (
                <span
                  aria-disabled="true"
                  className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-[inherit]"
                >
                  {icon}
                </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]"
                >
                  {icon}
                </Link>
              )}
              <DockTip label={label} soon={disabled ? t("soon") : undefined} />
            </DockIcon>
          );
        })}

        <DockSeparator />

        {/* ── Settings (live controls) ── */}
        <DockIcon className={controlTile}>
          <TileGloss />
          <SoundToggle
            ariaLabel={t("soundMute")}
            mutedAriaLabel={t("soundUnmute")}
            variant="ghost"
            className={controlButton}
            iconClassName="h-[46%] w-[46%]"
          />
          <DockTip label={t("soundMute")} />
        </DockIcon>

        <DockIcon className={controlTile}>
          <TileGloss />
          <ThemeToggle ariaLabel={t("themeToggle")} variant="ghost" className={controlButton} iconClassName="h-[46%] w-[46%]" />
          <DockTip label={t("themeToggle")} />
        </DockIcon>

        <DockIcon className={controlTile}>
          <TileGloss />
          <LocaleToggle
            locale={locale}
            defaultLocale={defaultLocale}
            className={cn(controlButton, "p-0")}
          />
          <DockTip label={locale.toUpperCase()} />
        </DockIcon>

        {isSuperAdmin ? (
          <DockIcon className={controlTile}>
            <TileGloss />
            <a
              href={buildAdminUrl("/")}
              aria-label="Open admin dashboard"
              className="flex h-full w-full items-center justify-center rounded-[inherit] text-white hover:bg-white/10"
            >
              <ShieldCheck className="h-[46%] w-[46%]" />
            </a>
            <DockTip label="Admin" />
          </DockIcon>
        ) : null}
      </Dock>
    </div>
  );
}

function DockSeparator() {
  return <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />;
}

function TileGloss() {
  return (
    <span
      aria-hidden
      className="pointer-events-none absolute inset-x-0 top-0 h-1/2 rounded-t-[26%] bg-gradient-to-b from-white/25 to-transparent"
    />
  );
}

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>
  );
}