Sidebar Boards

"use client";

import { useState, type ReactNode } from "react";
import { ChevronRight, Plus, Star } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarBoardsGroup {
  name: string;
  emoji: string;
  boards: { name: string; href: string; emoji: string; count?: number }[];
}

export interface SidebarBoardsProps {
  favorites?: { name: string; href: string; emoji: string }[];
  groups?: SidebarBoardsGroup[];
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_GROUPS: SidebarBoardsGroup[] = [
  {
    name: "Marketing",
    emoji: "📣",
    boards: [
      { name: "Q4 content", href: "#q4", emoji: "✍️", count: 12 },
      { name: "Newsletter", href: "#newsletter", emoji: "💌", count: 3 },
    ],
  },
  {
    name: "Product",
    emoji: "🧩",
    boards: [
      { name: "Website relaunch", href: "#website", emoji: "🚀", count: 9 },
      { name: "Bugs", href: "#bugs", emoji: "🐞", count: 4 },
    ],
  },
  { name: "People", emoji: "👥", boards: [{ name: "Hiring: designer", href: "#hiring", emoji: "🎨", count: 6 }] },
];

/** Board navigator: favorites with stars, then collapsible emoji spaces holding emoji boards with count bubbles; the active board gets a white pill. */
export function SidebarBoards({
  favorites = [
    { name: "Website relaunch", href: "#website", emoji: "🚀" },
    { name: "This week", href: "#week", emoji: "🗓️" },
  ],
  groups = DEFAULT_GROUPS,
  activeHref = "#website",
  children,
  className,
}: SidebarBoardsProps) {
  const [closed, setClosed] = useState<Record<string, boolean>>({});
  const row = (active: boolean) =>
    cn(
      "da-focus da-transition flex h-10 items-center gap-2.5 rounded-da-md px-3 text-[15px]",
      active ? "bg-da-surface font-semibold shadow-da-sm" : "text-da-muted-fg hover:bg-da-surface/60 hover:text-da-fg",
    );

  return (
    <div className={cn("flex min-h-dvh flex-col bg-da-bg text-da-fg md:flex-row", className)}>
      <aside className="bg-da-surface-2 p-4 md:sticky md:top-0 md:h-dvh md:w-72 md:shrink-0 md:overflow-y-auto">
        <nav aria-label="Boards">
          <p className="mb-2 flex items-center gap-1.5 px-3 text-xs font-bold text-da-muted-fg uppercase">
            <Star aria-hidden className="size-3.5 fill-da-warning text-da-warning" /> Favorites
          </p>
          <ul className="space-y-1">
            {favorites.map((f) => (
              <li key={f.href}>
                <a href={f.href} aria-current={f.href === activeHref ? "page" : undefined} className={row(f.href === activeHref)}>
                  <span aria-hidden>{f.emoji}</span>
                  {f.name}
                </a>
              </li>
            ))}
          </ul>
          <div className="mt-6 space-y-2">
            {groups.map((g) => {
              const isClosed = closed[g.name];
              return (
                <div key={g.name}>
                  <button
                    type="button"
                    aria-expanded={!isClosed}
                    onClick={() => setClosed((c) => ({ ...c, [g.name]: !c[g.name] }))}
                    className="da-focus flex h-10 w-full items-center gap-2 rounded-da-md px-3 font-da-display font-extrabold hover:bg-da-surface/60"
                  >
                    <ChevronRight
                      aria-hidden
                      className={cn("size-4 transition-transform duration-(--da-duration) ease-da-emphasized", !isClosed && "rotate-90")}
                    />
                    <span aria-hidden>{g.emoji}</span>
                    {g.name}
                  </button>
                  <ul hidden={isClosed} className="mt-1 space-y-1 pl-6">
                    {g.boards.map((b) => (
                      <li key={b.href}>
                        <a href={b.href} aria-current={b.href === activeHref ? "page" : undefined} className={row(b.href === activeHref)}>
                          <span aria-hidden>{b.emoji}</span>
                          <span className="truncate">{b.name}</span>
                          {b.count !== undefined && (
                            <span className="ml-auto rounded-full bg-da-surface px-2 text-xs font-bold text-da-muted-fg">{b.count}</span>
                          )}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              );
            })}
          </div>
          <a
            href="#new-space"
            className="da-focus mt-4 flex h-10 items-center gap-2 rounded-da-md border-2 border-dashed border-da-border-strong px-3 text-sm font-semibold text-da-muted-fg hover:border-da-primary hover:text-da-fg"
          >
            <Plus aria-hidden className="size-4" /> New space
          </a>
        </nav>
      </aside>
      <main className="min-w-0 flex-1">{children}</main>
    </div>
  );
}

export default SidebarBoards;