import { useSession } from '@/lib/auth-client';
import { Separator } from '@base-ui/react/separator';
import { BellIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import RouterBreadcrumb from './sidebar/RouterBreadcrumb';
import { Badge } from './ui/badge';
import { Button } from './ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from './ui/dropdown-menu';
import { SidebarTrigger } from './ui/sidebar';

export default function Header() {
  const { t } = useTranslation();
  const { data: session } = useSession();

  return (
    <>
      <header className="flex h-(--header-height) sticky top-0 shrink-0 items-center justify-between gap-2 border-b bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
        <div className="flex items-center gap-1 lg:gap-2 px-2">
          <SidebarTrigger size="lg" />
          <Separator
            orientation="vertical"
            className="mx-2 data-[orientation=vertical]:h-4 border"
          />
          <RouterBreadcrumb />
        </div>
        <div className="flex mr-2">
          {session?.user && (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button size="lg" variant="ghost" className="relative">
                  <BellIcon size={32} />
                  {false && (
                    <Badge
                      variant="destructive"
                      className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs"
                    >
                      0
                    </Badge>
                  )}
                  <span className="sr-only">Notifications</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-sm min-w-56 rounded-lg">
                <DropdownMenuLabel className="font-bold text-black">
                  {t('ui.label_notifications')}
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                  <DropdownMenuItem>
                    <div className="flex flex-col gap-1">
                      <p className="text-sm font-medium">System</p>
                      <p className="text-xs text-muted-foreground">
                        1 hour ago
                      </p>
                    </div>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    {t('ui.view_all_notifications')}
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          )}
        </div>
      </header>
      {/* <Link
            to="/demo/start/ssr"
            onClick={() => setIsOpen(false)}
            className="flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
            activeProps={{
              className:
                'flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
            }}
          >
            <span className="font-medium">Start - SSR Demos</span>
          </Link> */}
    </>
  );
}