Navbar

'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'
import { buttonVariants, Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { MobileNav } from '@/components/ui/navbar'

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
} from '@/components/ui/navigation-menu'

import { BellIcon, PlusCircleIcon, SettingsIcon } from 'lucide-react'
import { useTheme } from 'next-themes'

/* ------------------ Sample nav (replace with real links) ------------------ */
const navigationLinks = [
  {
    name: 'Menu',
    items: [
      { href: '#', label: 'Products', active: true },
      { href: '#', label: 'Docs' },
      { href: '#', label: 'Settings' },
      { href: '#', label: 'Notifications' },
    ],
  },
]

/* -------------------------------- Search --------------------------------- */
export function Search({ className }: React.ComponentProps<'button'>) {
  // safe client-side detection of mac
  const isMac =
    typeof window !== 'undefined' &&
    typeof navigator !== 'undefined' &&
    navigator.platform?.toUpperCase().includes('MAC')

  return (
    <Button
      variant="secondary"
      className={cn(
        'bg-surface text-surface-foreground/60 dark:bg-card relative h-8 w-full justify-start pl-2.5 font-normal shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64',
        className
      )}
      aria-label="Search"
    >
      <span className="hidden lg:inline-flex">Search...</span>
      <span className="inline-flex lg:hidden">Search...</span>

      <div className="absolute top-1.5 right-1.5 hidden gap-1 sm:flex">
        <CommandMenuKbd>{isMac ? '⌘' : 'Ctrl'}</CommandMenuKbd>
        <CommandMenuKbd className="h-5 w-5">K</CommandMenuKbd>
      </div>
    </Button>
  )
}

function CommandMenuKbd({ className, ...props }: React.ComponentProps<'kbd'>) {
  return (
    <kbd
      className={cn(
        'bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none',
        className
      )}
      {...props}
    />
  )
}

/* ----------------------------- ModeSwitcher ------------------------------ */
export function ModeSwitcher() {
  const { setTheme, resolvedTheme } = useTheme()

  const toggleTheme = React.useCallback(() => {
    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
  }, [resolvedTheme, setTheme])

  return (
    <Button
      variant="ghost"
      size="icon"
      className="h-8 w-8 flex items-center justify-center cursor-pointer"
      onClick={toggleTheme}
      title="Toggle theme"
      aria-label="Toggle theme"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="h-5 w-5"
        aria-hidden
      >
        <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
      </svg>
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}

/* -------------------------------- Navbar --------------------------------- */
export default function Navbar() {
  // Replace with `import Link from 'next/link'` when using Next.js
  const Link: any = 'a'

  return (
    <header className="container mx-auto flex h-14 items-center justify-between gap-4 px-4">
      <div className="flex items-center justify-start gap-2 md:flex-1 md:gap-4">
        <MobileNav nav={navigationLinks} />

        <Link
          href="#"
          className={cn(
            buttonVariants({ variant: 'ghost', size: 'icon' }),
            'dark:hover:bg-accent text-accent-foreground h-8 w-8 flex items-center justify-center'
          )}
          aria-label="Home"
        >
          <svg viewBox="0 0 40 40" fill="currentColor" className="h-6 w-6" aria-hidden>
            <path d="M11.77 21.83 7.42 20.49c-2.42-.49-2.42-.49-1.79-2.62l3.15-3.88c.63-.77 1.57-1.23 2.56-1.23h6.93" />
            <path d="M12.5 23l-1.5-2.5c0-.4 5-7.5 9-7.5 2.17 1.83 6.12 3.47 7 7 .5 2-5 6.17-8 8.5L12.5 23z" />
          </svg>
        </Link>

        <Search className="mr-2 hidden md:flex" />
      </div>

      <nav className="flex items-center justify-end gap-2">
        <div className="flex items-center space-x-2">
          <Switch id="test-mode" className="cursor-pointer" />
          <Label htmlFor="test-mode" className="hidden cursor-pointer sm:flex">
            Test Mode
          </Label>
        </div>

        <Separator orientation="vertical" className="hidden data-[orientation=vertical]:h-5 sm:flex" />

        <Link
          href="#"
          className={cn(
            buttonVariants({ variant: 'ghost', size: 'sm' }),
            'hidden h-8 w-8 items-center justify-center sm:flex'
          )}
          aria-label="Notifications"
        >
          <BellIcon className="h-4 w-4" />
        </Link>

        <Separator orientation="vertical" className="hidden data-[orientation=vertical]:h-5 sm:flex" />

        <Link
          href="#"
          className={cn(
            buttonVariants({ variant: 'ghost', size: 'sm' }),
            'hidden h-8 w-8 items-center justify-center sm:flex'
          )}
          aria-label="Settings"
        >
          <SettingsIcon className="h-4 w-4" />
        </Link>

        <Separator orientation="vertical" className="data-[orientation=vertical]:h-5" />

        <Button variant="ghost" size="icon" className="h-8 w-8 cursor-pointer" aria-label="Add">
          <PlusCircleIcon className="h-5 w-5" />
        </Button>

        <Separator orientation="vertical" className="hidden md:flex data-[orientation=vertical]:h-5" />

        <ModeSwitcher />
      </nav>
    </header>
  )
}