"use client";

import Image from "@/components/ui/resilient-image";
import Link from "next/link";
import type { MouseEvent } from "react";

import { AddExtraButton } from "@/components/admin/guide-extra-controls";
import { ScrollableNav } from "@/components/public/scrollable-nav";
import { navigationIconPath } from "@/lib/navigation";
import { cn } from "@/lib/utils";

const sections = [
  { slug: "weapon", label: "อาวุธ" },
  { slug: "artifact", label: "อาร์ติแฟกต์และค่าสถานะ" },
  { slug: "constellations", label: "กลุ่มดาว" },
  { slug: "team", label: "คำนวณทีม" },
] as const;

export function GuideSectionNav({
  guideId,
  characterKey,
  current,
  extras,
}: {
  guideId: string;
  characterKey: string;
  current: string;
  extras: Array<{ id: string; slug: string; title: string }>;
}) {
  const confirmNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
    const browserWindow = window as Window & { __guideHasUnsavedChanges?: boolean };
    if (typeof window !== "undefined" && browserWindow.__guideHasUnsavedChanges && !window.confirm("ข้อมูลยังบันทึกไม่เสร็จหรือไม่ถูกต้อง ต้องการออกจากหน้านี้หรือไม่?")) {
      event.preventDefault();
      Object.assign(event.nativeEvent, { pageProgressCancelled: true });
    }
  };
  return (
    <ScrollableNav
      ariaLabel="เมนูแก้ไข Guide"
      activeKey={current}
      className="w-full rounded-xl border bg-card p-2"
    >
      <Link
        href={`/admin/${characterKey}`}
        prefetch={false}
        onClick={confirmNavigation}
        aria-current={current === "overview" ? "page" : undefined}
        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" />
        ภาพรวม
      </Link>
      {sections.map((section) => {
        const iconPath = navigationIconPath(section.slug);
        return (
          <Link
            key={section.slug}
            href={`/admin/${characterKey}/${section.slug}`}
            prefetch={false}
            onClick={confirmNavigation}
            aria-current={current === section.slug ? "page" : undefined}
            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>
        );
      })}
      {extras.map((extra) => (
        <Link
          key={extra.id}
          href={`/admin/${characterKey}/${extra.slug}`}
          prefetch={false}
          onClick={confirmNavigation}
          aria-current={current === extra.slug ? "page" : undefined}
          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 === extra.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
          )}
        >
          <Image src={navigationIconPath("extra")!} alt="" width={20} height={20} className="size-5 object-contain" />
          {extra.title}
        </Link>
      ))}
      <AddExtraButton
        guideId={guideId}
        characterKey={characterKey}
        size="icon-sm"
        label=""
      />
    </ScrollableNav>
  );
}