'use client';

import type { ComponentProps } from 'react';
import Link from 'next/link';
import { SpoonLogo } from '@/components/brand/logo';
import { useConvexAuth } from 'convex/react';
import {
  GitBranch,
  LayoutDashboard,
  MessagesSquare,
  Settings,
  ShieldCheck,
} from 'lucide-react';

import { Button } from '@spoon/ui';

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

const Header = (headerProps: ComponentProps<'header'>) => {
  const { isAuthenticated } = useConvexAuth();
  const navItems: NavItem[] = isAuthenticated
    ? [
        {
          href: '/dashboard',
          icon: LayoutDashboard,
          label: 'Dashboard',
        },
        {
          href: '/spoons',
          icon: GitBranch,
          label: 'Spoons',
        },
        {
          href: '/threads',
          icon: MessagesSquare,
          label: 'Threads',
        },
        {
          href: '/settings/profile',
          icon: Settings,
          label: 'Settings',
        },
      ]
    : [
        {
          href: '/#workflow',
          icon: GitBranch,
          label: 'Workflow',
        },
        {
          href: '/#threads',
          icon: MessagesSquare,
          label: 'Threads',
        },
        {
          href: '/#security',
          icon: ShieldCheck,
          label: 'Security',
        },
      ];

  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'>
        <SpoonLogo />

        <DesktopNavigation items={navItems} />

        <div className='flex items-center gap-2'>
          {isAuthenticated ? (
            <Button size='sm' variant='outline' asChild>
              <Link href='/spoons/new'>New Spoon</Link>
            </Button>
          ) : (
            <Button size='sm' className='hidden sm:inline-flex' asChild>
              <Link href='/sign-in'>Get started</Link>
            </Button>
          )}
          <Controls />
          <MobileNavigation items={navItems} />
        </div>
      </div>
    </header>
  );
};

export default Header;
