import { ScrollArea } from "@/components/ui/scroll-area";
import { dungeonList } from "@/data";
import type { DungeonData } from "@/types/dungeon";

function toSlug(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/(^-|-$)/g, "");
}

function scrollToSection(id: string) {
  document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
}

interface SectionLink {
  id: string;
  label: string;
  type: "boss" | "trash";
}

function getSectionLinks(dungeon: DungeonData): SectionLink[] {
  const links: SectionLink[] = [];
  for (const section of dungeon.sections) {
    if (section.type === "boss") {
      links.push({
        id: `boss-${toSlug(section.data.name)}`,
        label: section.data.name,
        type: "boss",
      });
    } else if (section.type === "trash") {
      links.push({
        id: `trash-${toSlug(section.data.header)}`,
        label: section.data.header,
        type: "trash",
      });
    }
  }
  return links;
}

interface AppSidebarProps {
  activeDungeonId: string;
  activeDungeon: DungeonData;
  onSelectDungeon: (id: string) => void;
}

export function AppSidebar({
  activeDungeonId,
  activeDungeon,
  onSelectDungeon,
}: AppSidebarProps) {
  const sectionLinks = getSectionLinks(activeDungeon);

  return (
    <>
      {/* Desktop sidebar */}
      <nav className="frost-heavy fixed top-0 left-0 z-50 hidden h-screen w-[320px] border-r border-border-default md:block">
        <ScrollArea className="h-full">
          <div className="flex flex-col gap-4 p-5 pb-3">
            <div className="border-b border-border-default pb-3 text-[15px] font-bold uppercase tracking-[1.5px] text-accent-blue">
              Strategy Guide{" "}
              <span className="font-normal text-text-muted">
                · Midnight S1
              </span>
            </div>
            <div className="flex flex-col gap-0.5">
              {dungeonList.map((dungeon) => {
                const isActive = dungeon.id === activeDungeonId;
                const isDisabled = dungeon.disabled;
                return (
                  <div key={dungeon.id}>
                    <button
                      disabled={isDisabled}
                      onClick={() => !isDisabled && onSelectDungeon(dungeon.id)}
                      className={`flex w-full items-center gap-2.5 border border-transparent px-2.5 py-2 text-left text-[15px] font-medium transition-all ${
                        isDisabled
                          ? "cursor-not-allowed opacity-35"
                          : isActive
                            ? "border-l-[3px] border-l-accent-blue bg-accent-blue/10 text-accent-blue shadow-[0_0_16px_rgba(56,189,248,0.12)]"
                            : "cursor-pointer text-text-muted hover:bg-accent-blue/5 hover:text-text-default"
                      }`}
                      title={isDisabled ? "Coming soon" : undefined}
                    >
                      <img
                        src={dungeon.icon}
                        alt=""
                        className="size-7 shrink-0 object-cover"
                      />
                      <span className="whitespace-nowrap">{dungeon.name}</span>
                    </button>
                    {isActive && sectionLinks.length > 0 && (
                      <div className="ml-[18px] flex flex-col gap-0.5 border-l border-border-default py-1 pl-4">
                        {sectionLinks.map((link) => (
                          <button
                            key={link.id}
                            onClick={() => scrollToSection(link.id)}
                            className="flex items-center gap-2 py-1 text-left text-[13px] text-text-muted transition-all hover:text-text-default"
                          >
                            <span
                              className={`inline-block size-1.5 shrink-0 rounded-full ${
                                link.type === "boss"
                                  ? "bg-accent-blue"
                                  : "bg-accent-purple"
                              }`}
                            />
                            <span className="truncate">{link.label}</span>
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </ScrollArea>
      </nav>

      {/* Mobile top bar */}
      <nav className="frost-heavy sticky top-0 z-50 border-b border-border-default md:hidden">
        <div className="px-3 pt-3 pb-1 text-[13px] font-bold uppercase tracking-[1.5px] text-accent-blue">
          Strategy Guide{" "}
          <span className="font-normal text-text-muted">· Midnight S1</span>
        </div>
        <div className="flex gap-1 overflow-x-auto px-3 pb-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border-accent">
          {dungeonList.map((dungeon) => {
            const isActive = dungeon.id === activeDungeonId;
            const isDisabled = dungeon.disabled;
            return (
              <button
                key={dungeon.id}
                disabled={isDisabled}
                onClick={() => !isDisabled && onSelectDungeon(dungeon.id)}
                className={`flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 text-[14px] font-medium transition-all ${
                  isDisabled
                    ? "cursor-not-allowed opacity-35"
                    : isActive
                      ? "bg-accent-blue/10 text-accent-blue shadow-[0_0_8px_rgba(56,189,248,0.12)]"
                      : "cursor-pointer text-text-muted hover:bg-accent-blue/5 hover:text-text-default"
                }`}
              >
                <img
                  src={dungeon.icon}
                  alt=""
                  className="size-5 shrink-0 object-cover"
                />
                <span className="whitespace-nowrap">{dungeon.name}</span>
              </button>
            );
          })}
        </div>
      </nav>
    </>
  );
}
