'use client';
import Link from 'next/link';
import Image from 'next/image';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Menu, X, CircleUserRound } from 'lucide-react';
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuList
} from '@/components/ui/navigation-menu';
import {
  Popover,
  PopoverContent,
  PopoverTrigger
} from '@/components/ui/popover';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { TopMenu } from "@/components/dashboard/dashboard/top-menu";
import { useSession } from '@/lib/auth/auth-client';
import { HeaderSearch } from './header-search';
import { Routes } from '@/config/routes';
import { useMediaQuery } from '@/hooks/use-media-query';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';

const menuItems = [
  { href: Routes.KBH_PLUS, label: 'KBH+' },
  { href: Routes.BYENS_RUM, label: 'byens rum' },
  { href: Routes.BYENS_LIV, label: 'byens liv' },
  { href: Routes.OPINION, label: 'opinion' },
  { href: Routes.VISIONER, label: 'visioner' },
  { href: Routes.PROJEKTER, label: 'projekter' },
  { href: Routes.CITY_CHANGE, label: 'citychange' },
  { href: Routes.MAP, label: 'kort' },
  { href: Routes.REVIEWS, label: 'anmeldelser' }
];

export default function PublicHeader() {
  const { data: session } = useSession();
  const pathname = usePathname();
  const isDesktop = useMediaQuery('(min-width: 1280px)');
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header
      id='mkbh-header'
      role='banner'
      className='bg-background w-full px-3 md:px-8 xl:px-0'
    >
      <TopMenu />
      <div className='container mx-auto flex max-w-[1360px] items-start justify-between'>
        {/* Logo */}
        <Link
          href={Routes.HOME}
          className='bg-background relative z-1 flex shrink-0 items-center gap-2 xl:px-[30px]'
          title='Magasinet KBH'
        >
          <Image
            src='/logo.svg'
            alt='Magasinet KBH'
            width={240}
            height={240}
            className='size-[100px] md:size-[180px] xl:size-[240px]'
            priority
          />
        </Link>

        {/* User menu */}
        <div className='flex flex-wrap items-start justify-end gap-x-4 py-3 xl:py-5 xl:pe-8'>
          <Link
            href={session?.user ? Routes.PROFILE : Routes.AUTH.SIGN_IN}
            className='hover:text-client-red flex flex-row-reverse items-center gap-2 xl:flex-row'
          >
            <Avatar className='size-6 rounded-full md:size-8'>
              <AvatarImage
                src={session?.user?.image || ''}
                alt={session?.user?.name || ''}
              />
              <AvatarFallback className='bg-unset'>
                <CircleUserRound className='size-full' />
                {/* <svg
                  version='1.1'
                  id='Слой_1'
                  xmlns='http://www.w3.org/2000/svg'
                  x='0px'
                  y='0px'
                  viewBox='0 0 47.5 41.8'
                  xmlSpace='preserve'
                  className='size-8'
                >
                  <path
                    fill='#CCCCCC'
                    d='M23.7,0C10.6,0,0,10.6,0,23.7C0,31,3.3,37.5,8.4,41.8c1.1-7.3,5-12.8,9.6-12.8h11.9c4.5,0,8.4,5.3,9.5,12.5
	c5-4.4,8.1-10.7,8.1-17.9C47.5,10.6,36.9,0,23.7,0z M23.9,26.1c-4.9,0-8.9-4-8.9-8.9c0-4.9,4-8.9,8.9-8.9c4.9,0,8.9,4,8.9,8.9
	C32.8,22.1,28.8,26.1,23.9,26.1z'
                  />
                </svg> */}
              </AvatarFallback>
            </Avatar>
            <span className='text-sm font-medium text-current sm:text-base'>
              {session?.user?.name || 'log ind'}
            </span>
          </Link>
          <div className='hidden xl:block'>
            <HeaderSearch isDesktop />
          </div>
        </div>
      </div>

      {/* Navigation */}
      <div className='-mt-[38px] hidden border-t border-b border-t-neutral-400 border-b-[#dcdcdc] bg-[#dcdcdc] xl:block'>
        <NavigationMenu className='container mx-auto block max-w-[1360px] pl-[301px]'>
          <NavigationMenuList className='bg-background flex flex-wrap items-center justify-center gap-x-8 p-1'>
            {menuItems.map((item) => (
              <NavigationMenuItem key={item.href}>
                <Link
                  href={item.href}
                  className={cn(
                    'after:bg-client-red relative cursor-pointer text-lg font-medium after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-0 after:transition-all after:duration-300 hover:after:w-full',
                    pathname.includes(item.href) && 'after:w-full'
                  )}
                >
                  {item.label}
                </Link>
              </NavigationMenuItem>
            ))}
          </NavigationMenuList>
        </NavigationMenu>
      </div>

      {/* Menu for mobile */}
      {!isDesktop && (
        <div className='-mt-[24px] flex justify-end gap-2 md:-mt-[30px] xl:hidden'>
          <HeaderSearch />
          <Popover open={menuOpen} onOpenChange={setMenuOpen}>
            <PopoverTrigger asChild>
              <Button
                variant='ghost'
                size='icon'
                className='size-min xl:hidden'
                aria-label='Open menu'
              >
                {menuOpen ? (
                  <X className='size-6 md:size-8' />
                ) : (
                  <Menu className='size-6 md:size-8' />
                )}
              </Button>
            </PopoverTrigger>
            <PopoverContent className='-mt-1 w-screen rounded-none border-0 border-b border-b-black bg-white p-8 shadow-none xl:hidden'>
              <NavigationMenu>
                <NavigationMenuList className='block'>
                  {menuItems.map((item) => (
                    <NavigationMenuItem key={item.href}>
                      <Link
                        href={item.href}
                        className={cn(
                          'after:bg-client-red relative cursor-pointer text-2xl after:absolute after:-bottom-1 after:left-0 after:h-0.5 after:w-0 after:transition-all after:duration-300 hover:after:w-full',
                          pathname.includes(item.href) && 'after:w-full'
                        )}
                      >
                        {item.label}
                      </Link>
                    </NavigationMenuItem>
                  ))}
                </NavigationMenuList>
              </NavigationMenu>
            </PopoverContent>
          </Popover>
        </div>
      )}
    </header>
  );
}