import Link from 'next/link';
import Image from 'next/image';
import CartButton from './CartButton';
import AccountMenu from './AccountMenu';
import ThemeToggle from './ThemeToggle';
import NavDropdown from './NavDropdown';
import CurrencySelector from './CurrencySelector';
import MobileNav from './MobileNav';
import { prisma } from '@/lib/prisma';
import { getCurrentCustomer } from '@/lib/auth';
import { isAdminAuthenticated } from '@/lib/adminAuth';

export default async function Header() {
  const [categories, collections, customer, isAdmin] = await Promise.all([
    prisma.category.findMany({
      where: { showOnPersonalised: true },
      orderBy: { name: 'asc' },
    }),
    prisma.collection.findMany({ orderBy: { name: 'asc' } }),
    getCurrentCustomer(),
    isAdminAuthenticated(),
  ]);
  const personalisedLinks = [
    { href: '/made-to-order', label: 'Shop all' },
    ...categories.map((c) => ({ href: `/made-to-order?category=${c.slug}`, label: c.name })),
  ];
  const shopBySections = [
    {
      title: 'Occasions',
      links: collections
        .filter((c) => c.group === 'OCCASION')
        .map((c) => ({ href: `/made-to-order?collection=${c.slug}`, label: c.name })),
    },
    {
      title: 'Gifts for',
      links: collections
        .filter((c) => c.group === 'RECIPIENT')
        .map((c) => ({ href: `/made-to-order?collection=${c.slug}`, label: c.name })),
    },
  ];

  return (
    <header className="sticky top-0 z-40 border-b border-line bg-paper/90 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:px-6 sm:py-4">
        <div className="flex items-center gap-3">
          <MobileNav
            personalisedLinks={personalisedLinks}
            shopBySections={shopBySections}
            customer={customer ? { name: customer.name, email: customer.email } : null}
          />
          <Link href="/" className="flex items-center gap-2 sm:gap-3">
            <Image
              src="/logo.png"
              alt="Craft2Prints"
              width={96}
              height={96}
              className="h-12 w-12 object-contain sm:h-20 sm:w-20"
            />
            <span className="font-script text-3xl leading-none text-ink sm:text-5xl">Craft2Prints</span>
          </Link>
        </div>
        <nav className="hidden items-center gap-6 md:flex">
          <NavDropdown label="Personalised" links={personalisedLinks} />
          <Link href="/products" className="tag-label hover:text-ink">
            Products
          </Link>
          <NavDropdown label="Shop by" sections={shopBySections} />
          <Link href="/gallery" className="tag-label hover:text-ink">
            Gallery
          </Link>
        </nav>
        <div className="flex items-center gap-2 sm:gap-4">
          <CurrencySelector />
          {isAdmin && (
            <Link href="/admin/orders" className="tag-label hover:text-ink">
              Admin
            </Link>
          )}
          <div className="hidden md:block">
            <AccountMenu customer={customer ? { name: customer.name, email: customer.email } : null} />
          </div>
          <ThemeToggle />
          <CartButton />
        </div>
      </div>
    </header>
  );
}