"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ArrowLeftIcon } from "lucide-react";

import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { buttonVariants } from "@/components/ui/button";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { cn } from "@/lib/utils";
import { DS_HOME, DS_SECTIONS } from "./nav";
import { type SidebarTone, useSidebarTone } from "./sidebar-tone";

export function DsTopbar() {
  const pathname = usePathname();
  const current = DS_SECTIONS.find((s) => pathname.startsWith(s.href)) ?? DS_HOME;
  const { tone, setTone } = useSidebarTone();

  return (
    <div className="sticky top-0 z-20 flex h-14 items-center gap-3 border-b border-border bg-background px-4">
      <SidebarTrigger className="-ml-1" />
      <Separator orientation="vertical" className="h-5" />
      <p className="min-w-0 truncate text-sm font-semibold text-foreground">{current.title}</p>
      <div className="ml-auto flex items-center gap-2">
        <span className="hidden text-xs text-muted-foreground sm:inline">Sidebar</span>
        <ToggleGroup
          variant="outline"
          size="sm"
          spacing={0}
          aria-label="Sidebar tone"
          value={[tone]}
          onValueChange={(v: string[]) => v[0] && setTone(v[0] as SidebarTone)}
        >
          <ToggleGroupItem value="light">Light</ToggleGroupItem>
          <ToggleGroupItem value="brand">Teal</ToggleGroupItem>
        </ToggleGroup>
      </div>
      <Link href="/dashboard" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
        <ArrowLeftIcon data-icon="inline-start" />
        Back to app
      </Link>
    </div>
  );
}