Navigation

"use client";

import type { MouseEvent } from "react";
import { useState } from "react";
import { Activity, Compass, FolderKanban, Home, LayoutDashboard, Settings } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Navbar, NavbarActions, NavbarBrand, NavbarContent } from "@/components/ui/navbar";
import {
  SidebarNav,
  SidebarNavGroup,
  SidebarNavItem,
} from "@/components/ui/sidebar-nav";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Tabs, TabsList, TabsPanel, TabsTrigger } from "@/components/ui/tabs";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { BottomNav, BottomNavItem } from "@/components/ui/bottom-nav";

/**
 * Live Navigation example — every part is a real, unmodified primitive from
 * its own doc; this page adds no components/ui/navigation.tsx of any kind.
 * `"use client"` only so the demo can swallow real navigation and hold
 * current-page / tab / pagination state — every part rendered is itself a
 * server component.
 */
const stayOnPage = (event: MouseEvent<HTMLAnchorElement>) => event.preventDefault();

const TASKS = [
  "Draft the onboarding checklist",
  "Review the Q3 roadmap",
  "Fix the broken invite link",
  "Write release notes",
  "Pair on the billing migration",
  "Triage the support backlog",
];
const TASKS_PER_PAGE = 2;
const TASK_PAGE_COUNT = Math.ceil(TASKS.length / TASKS_PER_PAGE);

/**
 * Section 1 — global + local navigation composed with hierarchy (Breadcrumb)
 * and same-page views (Tabs), one of which pages a list (Pagination).
 * Navbar renders no `NavbarLinks` / `NavbarMobileMenu` here — Sidebar Nav
 * already owns "which section," per docs/patterns/navigation.md's "Global
 * and local navigation."
 */
function GlobalAndLocalExample() {
  const [taskPage, setTaskPage] = useState(1);

  const pageTasks = TASKS.slice(
    (taskPage - 1) * TASKS_PER_PAGE,
    taskPage * TASKS_PER_PAGE,
  );

  return (
    <section className="flex flex-col gap-3">
      <h3 className="text-sm font-medium leading-snug text-muted-foreground">
        Global + local navigation, with hierarchy and same-page views
      </h3>
      <div className="overflow-hidden rounded-md border border-solid border-border">
        <Navbar className="static">
          <NavbarContent>
            <NavbarBrand>
              <span className="rounded-md px-1 py-1.5 text-sm font-semibold leading-snug tracking-tight">
                Acme
              </span>
            </NavbarBrand>
            <NavbarActions>
              <Button variant="outline" size="sm">
                Account
              </Button>
            </NavbarActions>
          </NavbarContent>
        </Navbar>

        <div className="flex items-stretch">
          <aside className="w-48 shrink-0 bg-sidebar p-3 text-sidebar-foreground">
            <SidebarNav aria-label="Product">
              <SidebarNavGroup label="Workspace">
                <SidebarNavItem
                  href="/dashboard"
                  icon={<LayoutDashboard />}
                  onClick={stayOnPage}
                >
                  Dashboard
                </SidebarNavItem>
                <SidebarNavItem
                  href="/projects"
                  current
                  icon={<FolderKanban />}
                  onClick={stayOnPage}
                >
                  Projects
                </SidebarNavItem>
                <SidebarNavItem
                  href="/settings"
                  icon={<Settings />}
                  onClick={stayOnPage}
                >
                  Settings
                </SidebarNavItem>
              </SidebarNavGroup>
            </SidebarNav>
          </aside>

          <div className="flex-1 p-4">
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem>
                  <BreadcrumbLink href="/dashboard" onClick={stayOnPage}>
                    Dashboard
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbLink href="/projects" onClick={stayOnPage}>
                    Projects
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbPage>Acme redesign</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>

            <div className="mt-4">
              <Tabs defaultValue="tasks">
                <TabsList aria-label="Project views" className="overflow-y-hidden">
                  <TabsTrigger value="tasks">Tasks</TabsTrigger>
                  <TabsTrigger value="activity">Activity</TabsTrigger>
                </TabsList>
                <TabsPanel value="tasks" className="flex flex-col gap-3 pt-3">
                  <ul className="flex flex-col gap-1">
                    {pageTasks.map((task) => (
                      <li
                        key={task}
                        className="rounded-sm px-2 py-1.5 text-sm leading-normal text-foreground"
                      >
                        {task}
                      </li>
                    ))}
                  </ul>
                  <Pagination>
                    <PaginationContent>
                      <PaginationItem>
                        <PaginationPrevious
                          href={`?page=${taskPage - 1}`}
                          disabled={taskPage === 1}
                          onClick={(event) => {
                            event.preventDefault();
                            setTaskPage((page) => Math.max(1, page - 1));
                          }}
                        />
                      </PaginationItem>
                      {Array.from({ length: TASK_PAGE_COUNT }, (_, i) => i + 1).map(
                        (page) => (
                          <PaginationItem key={page}>
                            <PaginationLink
                              href={`?page=${page}`}
                              isActive={taskPage === page}
                              onClick={(event) => {
                                event.preventDefault();
                                setTaskPage(page);
                              }}
                            >
                              {page}
                            </PaginationLink>
                          </PaginationItem>
                        ),
                      )}
                      <PaginationItem>
                        <PaginationNext
                          href={`?page=${taskPage + 1}`}
                          disabled={taskPage === TASK_PAGE_COUNT}
                          onClick={(event) => {
                            event.preventDefault();
                            setTaskPage((page) =>
                              Math.min(TASK_PAGE_COUNT, page + 1),
                            );
                          }}
                        />
                      </PaginationItem>
                    </PaginationContent>
                  </Pagination>
                </TabsPanel>
                <TabsPanel
                  value="activity"
                  className="pt-3 text-sm leading-normal text-muted-foreground"
                >
                  Recent activity on this project — comments, status changes,
                  and assignments, newest first.
                </TabsPanel>
              </Tabs>
            </div>
          </div>
        </div>
      </div>
      <p className="text-xs leading-snug text-muted-foreground">
        Navbar carries no destination links here — Sidebar Nav already owns
        “which section,” so the top bar stays limited to the brand and an
        always-visible action. The Breadcrumb trail and the selected Tabs
        trigger are each their own “current” signal, independent of Sidebar
        Nav’s current section.
      </p>
    </section>
  );
}

const SHELL_ITEMS = [
  { href: "/home", label: "Home", icon: <Home /> },
  { href: "/explore", label: "Explore", icon: <Compass /> },
  { href: "/activity", label: "Activity", icon: <Activity /> },
  { href: "/settings", label: "Settings", icon: <Settings /> },
];

/**
 * Section 2 — the same app-shell destination list rendered as both forms
 * named in docs/patterns/navigation.md's "Desktop-to-mobile transitions":
 * a Sidebar Nav rail (wide) and a Bottom Nav bar (narrow). One shared
 * `current` state drives both frames, standing in for the real `md:block` /
 * `md:hidden` breakpoint hand-off Sidebar Nav's own and Bottom Nav's own
 * responsive examples each demonstrate individually against the actual
 * viewport.
 */
function ResponsiveSubstitutionExample() {
  const [current, setCurrent] = useState(SHELL_ITEMS[0].href);

  return (
    <section className="flex flex-col gap-3">
      <h3 className="text-sm font-medium leading-snug text-muted-foreground">
        Responsive substitution — rail hands off to a bottom tab bar
      </h3>
      <div className="flex flex-wrap gap-6">
        <div className="flex flex-col gap-2">
          <p className="text-xs leading-snug text-muted-foreground">
            Wide (desktop/tablet) — Sidebar Nav rail
          </p>
          <div className="h-64 w-48 overflow-hidden rounded-md border border-solid border-border bg-sidebar p-3 text-sidebar-foreground">
            <SidebarNav aria-label="Product">
              <SidebarNavGroup>
                {SHELL_ITEMS.map((item) => (
                  <SidebarNavItem
                    key={item.href}
                    href={item.href}
                    icon={item.icon}
                    current={item.href === current}
                    onClick={(event) => {
                      stayOnPage(event);
                      setCurrent(item.href);
                    }}
                  >
                    {item.label}
                  </SidebarNavItem>
                ))}
              </SidebarNavGroup>
            </SidebarNav>
          </div>
        </div>

        <div className="flex flex-col gap-2">
          <p className="text-xs leading-snug text-muted-foreground">
            Narrow (mobile) — Bottom Nav bar
          </p>
          <div className="relative h-64 w-80 overflow-hidden rounded-md border border-solid border-border bg-background">
            <div className="flex h-full flex-col gap-2 p-3 pb-20">
              <p className="text-xs leading-snug text-muted-foreground">
                Page content
              </p>
            </div>
            <BottomNav className="absolute md:flex">
              {SHELL_ITEMS.map((item) => (
                <BottomNavItem
                  key={item.href}
                  href={item.href}
                  icon={item.icon}
                  label={item.label}
                  current={item.href === current}
                  onClick={(event) => {
                    stayOnPage(event);
                    setCurrent(item.href);
                  }}
                />
              ))}
            </BottomNav>
          </div>
        </div>
      </div>
      <p className="text-xs leading-snug text-muted-foreground">
        Both frames render the same four destinations, in the same order, and
        share one “current” value — activating an item in either frame moves
        both. This is a static stand-in for the hand-off; in real usage the
        rail is `md:block` and Bottom Nav is `md:hidden`, so only one is ever
        actually visible at a given viewport width (Bottom Nav’s own real
        `fixed` / `md:hidden` classes are also overridden here, the same
        demo-only override its own live example uses).
      </p>
    </section>
  );
}

export function NavigationShowcase() {
  return (
    <div className="flex flex-col gap-10">
      <GlobalAndLocalExample />
      <ResponsiveSubstitutionExample />
    </div>
  );
}