'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

import { UserWorkspace } from '@/app/home/(user)/_lib/server/load-user-workspace';
import { LayoutDashboard } from 'lucide-react';

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  useSidebar,
} from '@kit/ui/shadcn-sidebar';
import { Trans } from '@kit/ui/trans';

import { AppLogo } from '@kit/shared/components/app-logo';
import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';

import { pathsConfig } from '@kit/shared/config';

export function DoctorSidebar({
  accounts,
}: {
  accounts: UserWorkspace['accounts'];
}) {
  const path = usePathname();
  const { open } = useSidebar();
  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className={'m-2'}>
        <AppLogo
          href={pathsConfig.app.doctor}
          className="max-w-full"
          compact={!open}
        />
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>
            <Trans i18nKey="common:doctor" />
          </SidebarGroupLabel>

          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuButton
                isActive={path === pathsConfig.app.doctor}
                asChild
              >
                <Link className={'flex gap-2.5'} href={pathsConfig.app.doctor}>
                  <LayoutDashboard className={'h-4'} />
                  <Trans i18nKey={'doctor:sidebar.dashboard'} />
                </Link>
              </SidebarMenuButton>
              <SidebarMenuButton
                isActive={path === pathsConfig.app.openJobs}
                asChild
              >
                <Link
                  className={'flex gap-2.5'}
                  href={pathsConfig.app.openJobs}
                >
                  <LayoutDashboard className={'h-4'} />
                  <Trans i18nKey={'doctor:sidebar.openReviews'} />
                </Link>
              </SidebarMenuButton>
              <SidebarMenuButton
                isActive={path === pathsConfig.app.myJobs}
                asChild
              >
                <Link
                  className={'flex gap-2.5'}
                  href={pathsConfig.app.myJobs}
                >
                  <LayoutDashboard className={'h-4'} />
                  <Trans i18nKey={'doctor:sidebar.myReviews'} />
                </Link>
              </SidebarMenuButton>
              <SidebarMenuButton
                isActive={path === pathsConfig.app.completedJobs}
                asChild
              >
                <Link
                  className={'flex gap-2.5'}
                  href={pathsConfig.app.completedJobs}
                >
                  <LayoutDashboard className={'h-4'} />
                  <Trans i18nKey={'doctor:sidebar.completedReviews'} />
                </Link>
              </SidebarMenuButton>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <ProfileAccountDropdownContainer accounts={accounts} />
      </SidebarFooter>
    </Sidebar>
  );
}