"use client";

import { FileTextIcon, GemIcon, ImageIcon, MessageSquareIcon, SparklesIcon, SwordIcon, UsersIcon } from "lucide-react";
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 { cn } from "@/lib/utils";

const sections = [
  { slug: "weapon", label: "Weapons", icon: SwordIcon },
  { slug: "artifact", label: "Artifacts & Stats", icon: GemIcon },
  { slug: "constellations", label: "Constellations", icon: SparklesIcon },
  { slug: "team", label: "Team Calc", icon: UsersIcon },
] 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 editor navigation"
      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 whitespace-nowrap 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",
        )}
      >
        <ImageIcon className="size-5" aria-hidden="true" />
        Overview
      </Link>
      {sections.map((section) => {
        const Icon = section.icon;
        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 whitespace-nowrap 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",
            )}
          >
            <Icon className="size-5" aria-hidden="true" />
            {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 whitespace-nowrap 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",
          )}
        >
          <FileTextIcon className="size-5" aria-hidden="true" />
          {extra.title}
        </Link>
      ))}
      <Link
        href={`/admin/${characterKey}/comment`}
        prefetch={false}
        onClick={confirmNavigation}
        aria-current={current === "comment" ? "page" : undefined}
        className={cn(
          "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
          current === "comment" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
        )}
      >
        <MessageSquareIcon className="size-5" aria-hidden="true" />
        Comment
      </Link>
      <AddExtraButton
        guideId={guideId}
        characterKey={characterKey}
        size="icon-sm"
        label=""
      />
    </ScrollableNav>
  );
}