'use client';

import type { ComponentProps } from 'react';
import { Kanit } from 'next/font/google';
import Image from 'next/image';
import Link from 'next/link';
import { useConvexAuth, useQuery } from 'convex/react';
import { Coffee, Server, User, Wrench } from 'lucide-react';

import { api } from '@gib/backend/convex/_generated/api.js';

import type { NavItem } from './navigation';
import { Controls } from './controls';
import { DesktopNavigation, MobileNavigation } from './navigation';

const kanitSans = Kanit({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
});

const Header = (headerProps: ComponentProps<'header'>) => {
  const { isAuthenticated } = useConvexAuth();
  const user = useQuery(api.auth.getUser, isAuthenticated ? {} : 'skip');
  const navItems: NavItem[] = [
    {
      href: '/#features',
      icon: Wrench,
      label: 'Features',
    },
    {
      href: '/#tech-stack',
      icon: Server,
      label: 'Stack',
    },
    {
      href: 'https://git.gbrown.org/gib/convex-monorepo',
      icon: Coffee,
      label: 'Repository',
      external: true,
    },
  ];

  if (user?.isAdmin) {
    navItems.push({
      href: '/admin',
      icon: User,
      label: 'Admin',
      external: true,
    });
  }

  return (
    <header
      className='border-border/40 bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur'
      {...headerProps}
    >
      <div className='container mx-auto flex h-16 items-center justify-between px-4 md:px-6'>
        {/* Logo */}
        <Link
          href='/'
          className='to-accent-foreground flex items-center gap-2 bg-linear-to-r from-[#281A65] via-[#363354] bg-clip-text text-transparent transition-opacity hover:opacity-80 dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]'
        >
          <Image
            src='/misc/convex/convex-symbol-white.svg'
            alt='Convex Monorepo'
            width={50}
            height={50}
            className='w-10 invert lg:w-15 dark:invert-0'
          />
          <span
            className={`hidden font-extrabold sm:mb-1 sm:text-lg md:inline lg:mb-3 lg:text-4xl xl:text-5xl ${kanitSans.className}`}
          >
            convex-monorepo
          </span>
        </Link>

        <DesktopNavigation items={navItems} />

        <div className='flex items-center gap-2'>
          <Controls />
          <MobileNavigation items={navItems} />
        </div>
      </div>
    </header>
  );
};

export default Header;
