"use client";
import React from 'react';
import { useRouter } from 'next/navigation';
import { useTranslations } from "next-intl";
import Image from 'next/image';
import Link from 'next/link';
import { IconLogout } from '@tabler/icons-react';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  useSidebar
} from '@/components/ui/sidebar';
import { getNavItems } from '@/config/nav-items';
import { signOut } from '@/lib/auth/auth-client';
import { NavMenu } from './dashboard/nav-menu';

export default function AppSidebar() {
  const t = useTranslations();
  const { isMobile, state } = useSidebar();
  const router = useRouter();
  const navItems = getNavItems();
  const isCollapsed = state === 'collapsed';

  return (
    <Sidebar collapsible='icon'>
      <SidebarHeader>
        <Link
          href='/'
          className='text-client-red flex w-fit items-center gap-2 font-medium hover:underline'
        >
          <Image
            src='/logo.svg'
            alt='Magasinet KBH'
            width={50}
            height={50}
            className='size-8'
            priority
          />
        </Link>
      </SidebarHeader>
      <SidebarContent className='overflow-x-hidden'>
        <SidebarGroup>
          <SidebarGroupLabel>Dashboard</SidebarGroupLabel>
          <NavMenu items={navItems} collapsed={isCollapsed} mobile={isMobile} />
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              tooltip={t('dashboard.general.menu.logout')}
              onClick={async () => {
                await signOut({
                  fetchOptions: {
                    onSuccess: () => {
                      router.push('/auth/sign-in');
                    }
                  }
                });
              }}
            >
              <IconLogout />
              <span>{t('dashboard.general.menu.logout')}</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}