import Link from "next/link";
import { MODES } from "@/lib/types";
import NavGroup from "./NavGroup";

// The places, in the order somebody works: the dashboard, every project, what
// is waiting, the two benches that are not a project (mix, find), and the song
// piles folded under one entry.
//
// SEVEN visible entries (home, browse, decisions, articles, mix, find, song ▸),
// and the cap is still NINE. A tenth wraps the header on
// a laptop, and a nav that wraps stops reading as one row of places and starts
// reading as a list. The next tool goes UNDER one of these, not beside them --
// which is exactly what happened to the four judging piles and the sources
// page: they are the `song ▸` group now, at the same URLs they always had, so
// `/sort`, `/keeps` and every bookmark still land where they did.
//
// The active link is `sel`, the one interaction colour. It used to be
// `--color-accent`, a second green two inches from `--color-good` on a verdict
// button -- a NAVIGATION state wearing a VERDICT's colour -- and accent is gone
// rather than retuned.
const SONG_ITEMS = [
  ...MODES.map((m) => ({ href: `/${m}`, label: m as string })),
  // Where the palette comes from, across every song at once.
  { href: "/browse/sources", label: "sources" },
];

export default function AppNav({ active }: { active: string }) {
  const items = [
    { href: "/", label: "home" },
    { href: "/browse", label: "browse" },
    // The worklist across every project, not a sixth pile. It sits beside
    // browse because that is where every decision it names gets settled.
    { href: "/browse/decisions", label: "decisions" },
    // Every site's articles -- published and drafts -- with their notes, their
    // evidence and the workspace they were written in. Named for what it lists:
    // the editor's /sites is the sites themselves, and two "sites" a tab apart
    // were two places with one name. The URL stays /sites.
    { href: "/sites", label: "articles" },
    { href: "/mix", label: "mix" },
    // Every occurrence of a word across the corpus. It sits with browse because
    // what it retrieves is raw material for a build, not a pile to judge.
    { href: "/browse/find", label: "find" },
  ];
  const songActive = SONG_ITEMS.some((it) => it.label === active);
  return (
    <nav className="flex gap-1" aria-label="Main">
      {items.map((it) => {
        const on = it.label === active;
        return (
          <Link
            key={it.href}
            href={it.href}
            aria-current={on ? "page" : undefined}
            className={`rounded px-2.5 py-1 text-sm ${
              on
                ? "bg-[var(--color-panel-2)] text-[var(--color-sel)]"
                : "text-[var(--color-dim)] hover:text-[var(--color-text)]"
            }`}
          >
            {it.label}
          </Link>
        );
      })}
      <NavGroup label="song" items={SONG_ITEMS} active={active} on={songActive} />
    </nav>
  );
}