import ActionsRequired from '@/components/common/actions-required';
import AdminNotification from '@/components/common/admin-notification';
import LangSwitcher from '@/components/common/lang-switcher';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { useInitials } from '@/hooks/use-initials';
import { SharedData } from '@/types';
import { getImageUrl } from '@/utils/getImageUrl';
import { Link, router, usePage } from '@inertiajs/react';
import { ArrowUpRightIcon, CaretDownIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';

export function AdminHeader() {
  const { auth } = usePage<SharedData>().props;
  const getInitials = useInitials();
  const { t } = useTranslation();

  const fullName = [auth?.user?.first_name, auth?.user?.last_name]
    .filter(Boolean)
    .join(' ');

  return (
    <header className="flex h-16 shrink-0 items-center justify-between gap-2 border-b border-black/5 bg-header px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 md:px-4">
      <div className="flex items-center gap-2">
        <SidebarTrigger className="-ml-1" />
      </div>
      <div className="flex items-center gap-2">
        <Link
          href="/"
          prefetch
          target="_blank"
          rel="noopener noreferrer"
          className="hidden items-center gap-2 px-4 py-2.5 font-medium md:flex"
        >
          <span>{t('Visit site')}</span>
          <ArrowUpRightIcon weight="bold" className="size-5" />
        </Link>
        <div className="h-6 w-px bg-black/5" />
        <LangSwitcher variant="admin" />
        <div className="h-6 w-px bg-black/5" />
        <ActionsRequired />
        <AdminNotification />
        <DropdownMenu>
          <DropdownMenuTrigger className="flex cursor-pointer items-center gap-3 px-4 pr-0 font-medium outline-0 md:pr-4">
            <span className="hidden md:inline">{fullName}</span>
            <Avatar className="size-8 overflow-hidden rounded-full">
              <AvatarImage
                src={getImageUrl(auth?.user?.profile?.profile_photo)}
                alt={fullName}
              />
              <AvatarFallback>{getInitials(fullName)}</AvatarFallback>
            </Avatar>
            <CaretDownIcon weight="bold" className="size-5" />
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem onClick={() => router.visit('/admin/profile')}>
              {t('My Profile')}
            </DropdownMenuItem>
            <DropdownMenuItem
              onClick={() => router.visit('/admin/site-settings')}
            >
              {t('Settings')}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => router.post('/logout')}>
              {t('Logout')}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}