import { Link, useLocation } from "react-router-dom";
import { pageTitles } from "../data/nav";

type TopBarProps = {
  collapsed: boolean;
  onToggle: () => void;
};

export function TopBar({ collapsed, onToggle }: TopBarProps) {
  const location = useLocation();
  const meta = pageTitles.get(location.pathname);
  const section = meta?.section?.includes("Demo") || meta?.section?.includes("Prototype") ? "Demos" : "Docs";
  let title = meta?.title ?? "Overview";

  // Custom (dynamic) pages aren't in the static pageTitles registry.
  if (location.pathname.startsWith("/docs/custom")) {
    if (location.pathname === "/docs/custom") title = "Custom Pages";
    else if (location.pathname.endsWith("/new")) title = "New Page";
    else title = "Custom Page";
  }

  return (
    <div className="flex h-topbar min-h-topbar min-w-0 items-center gap-4 border-b border-border bg-surface px-5 text-[0.8rem] max-md:gap-2 max-md:px-3">
      <button
        className="flex cursor-pointer items-center rounded border border-border bg-transparent px-2 py-1 text-base text-muted transition-all duration-150 hover:border-border-light hover:text-fg"
        onClick={onToggle}
      >
        {collapsed ? "→" : "←"}
      </button>
      <div className="flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap font-mono text-[0.75rem] text-muted max-md:flex-1">
        <Link className="text-inherit no-underline" to="/">VOID::NAV</Link>
        <span className="text-border-light">/</span>
        <span>{section}</span>
        <span className="text-border-light">/</span>
        <span className="overflow-hidden text-ellipsis text-fg-bright">{title}</span>
      </div>
      <div className="ml-auto flex items-center gap-4 whitespace-nowrap font-mono text-[0.7rem] text-muted max-md:hidden">
        <span><span className="mr-1 inline-block size-1.5 rounded-full bg-green shadow-[0_0_6px_var(--color-green)]" /> Connected</span>
        <span className="text-accent">●</span>
        <span>Prototype v0.1.0</span>
      </div>
    </div>
  );
}