"use client";

import Image from "next/image";
import Link from "next/link";
import type { MouseEvent } from "react";

import { ScrollableNav } from "@/components/public/scrollable-nav";
import { navigationIconPath } from "@/lib/navigation";
import { cn } from "@/lib/utils";

const sections = [
  { slug: "weapon", label: "Weapons" },
  { slug: "artifact", label: "Artifacts & Stats" },
  { slug: "constellations", label: "Constellations" },
  { slug: "team", label: "Team Calc" },
  { slug: "extra", label: "Extra" },
] as const;

export function GuideSectionNav({
  characterKey,
  current,
}: {
  characterKey: string;
  current: "overview" | (typeof sections)[number]["slug"];
}) {
  const confirmNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
    const browserWindow = window as Window & { __guideHasUnsavedChanges?: boolean };
    if (typeof window !== "undefined" && browserWindow.__guideHasUnsavedChanges && !window.confirm("ข้อมูลยังบันทึกไม่เสร็จหรือไม่ถูกต้อง ต้องการออกจากหน้านี้หรือไม่?")) {
      event.preventDefault();
    }
  };
  return (
    <ScrollableNav
      ariaLabel="เมนูแก้ไข Guide"
      className="w-full rounded-xl border bg-card p-2"
    >
      <Link
        href={`/admin/${characterKey}`}
        prefetch
        onClick={confirmNavigation}
        className={cn(
          "flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
          current === "overview" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
        )}
      >
        <Image src={navigationIconPath("overview")!} alt="" width={20} height={20} className="size-5 object-contain" />
        Overview
      </Link>
      {sections.map((section) => {
        const iconPath = navigationIconPath(section.slug);
        return (
          <Link
            key={section.slug}
            href={`/admin/${characterKey}/${section.slug}`}
            prefetch
            onClick={confirmNavigation}
            className={cn(
              "flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
              current === section.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
            )}
          >
            {iconPath ? <Image src={iconPath} alt="" width={20} height={20} className="size-5 object-contain" /> : null}
            {section.label}
          </Link>
        );
      })}
    </ScrollableNav>
  );
}