'use client';

import Link from 'next/link';
import { useTransition } from 'react';
import { ShoppingCart, Menu, X, Search, User, LogOut } from 'lucide-react';
import { useState } from 'react';
import { useCart } from '@/components/CartProvider';
import { cn } from '@/lib/utils';
import { logoutCustomer } from '@/app/account/actions';

export function Header({
  user,
  admin,
}: {
  user?: { name: string; email: string };
  admin?: boolean;
}) {
  const { count } = useCart();
  const [open, setOpen] = useState(false);
  const [isPending, startTransition] = useTransition();

  const links = [
    { href: '/', label: 'Home' },
    { href: '/products', label: 'Shop' },
    { href: '/cart', label: 'Cart' },
    ...(admin ? [{ href: '/admin', label: 'Admin' }] : []),
  ];

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-16 items-center justify-between px-4">
        <Link href="/" className="text-xl font-bold tracking-tight">
          LOM Electronics
        </Link>

        <nav className="hidden items-center gap-6 md:flex">
          {links.map((l) => (
            <Link
              key={l.href}
              href={l.href}
              className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
            >
              {l.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-3">
          <Link
            href="/products"
            className="hidden rounded-full p-2 text-muted-foreground hover:bg-muted hover:text-foreground md:block"
            aria-label="Search"
          >
            <Search className="h-5 w-5" />
          </Link>

          <Link
            href="/cart"
            className="relative rounded-full p-2 text-muted-foreground hover:bg-muted hover:text-foreground"
            aria-label="Cart"
          >
            <ShoppingCart className="h-5 w-5" />
            {count > 0 && (
              <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-bold text-primary-foreground">
                {count}
              </span>
            )}
          </Link>

          {user ? (
            <div className="hidden items-center gap-2 md:flex">
              <Link
                href="/account/orders"
                className="flex items-center gap-1 rounded-full p-2 text-muted-foreground hover:bg-muted hover:text-foreground"
                aria-label="My account"
              >
                <User className="h-5 w-5" />
                <span className="max-w-[120px] truncate text-sm">{user.name}</span>
              </Link>
              <button
                onClick={() => startTransition(() => logoutCustomer())}
                disabled={isPending}
                className="rounded-full p-2 text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50"
                aria-label="Logout"
              >
                <LogOut className="h-5 w-5" />
              </button>
            </div>
          ) : (
            <Link
              href="/account/login"
              className="hidden rounded-full p-2 text-muted-foreground hover:bg-muted hover:text-foreground md:block"
              aria-label="Account"
            >
              <User className="h-5 w-5" />
            </Link>
          )}

          <button
            onClick={() => setOpen(!open)}
            className="rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground md:hidden"
            aria-label="Toggle menu"
          >
            {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </div>
      </div>

      <div
        className={cn(
          'overflow-hidden border-t bg-background transition-all duration-300 md:hidden',
          open ? 'max-h-64' : 'max-h-0'
        )}
      >
        <nav className="flex flex-col gap-2 px-4 py-4">
          {links.map((l) => (
            <Link
              key={l.href}
              href={l.href}
              onClick={() => setOpen(false)}
              className="text-sm font-medium text-muted-foreground hover:text-foreground"
            >
              {l.label}
            </Link>
          ))}
        </nav>
      </div>
    </header>
  );
}