'use client';

import { Search, Bell, Settings, User, LogOut } from 'lucide-react';
import Link from 'next/link';
import { useSession } from 'next-auth/react';
import { signOut } from 'next-auth/react';

import { BrandLockup } from '@/components/brand';

export function PortalHeader() {
  const { data: session } = useSession();

  return (
    <header className="sticky top-0 z-50 w-full border-b border-sovereign-bronze/25 bg-sovereign-midnight/95 backdrop-blur supports-[backdrop-filter]:bg-sovereign-midnight/80">
      <div className="mx-auto flex h-auto min-h-16 w-full max-w-[1920px] flex-wrap items-center gap-3 px-4 py-2 sm:px-6 lg:h-16 lg:flex-nowrap lg:py-0">
        <Link
          href="/"
          className="order-1 flex shrink-0 items-center no-underline hover:opacity-90"
        >
          <BrandLockup size="sm" subtitle="Sovereign Console" />
        </Link>

        <div className="order-3 flex min-w-0 flex-1 basis-full items-center lg:order-2 lg:mx-6 lg:max-w-2xl lg:basis-auto">
          <div className="relative w-full">
            <Search
              className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-sovereign-bronze"
              aria-hidden
            />
            <input
              type="search"
              placeholder="Search blocks, transactions, addresses…"
              aria-label="Search blockchain resources"
              className="w-full rounded-md border border-sovereign-bronze/30 bg-sovereign-obsidian py-2 pl-10 pr-4 text-sm text-sovereign-ivory placeholder-sovereign-ivory/40 focus:border-sovereign-gold focus:outline-none focus:ring-2 focus:ring-sovereign-gold/30"
            />
          </div>
        </div>

        <nav className="order-2 flex shrink-0 items-center gap-1 sm:gap-2 lg:order-3 lg:ml-auto">
          <button className="relative p-2 text-sovereign-ivory/60 transition-colors hover:text-sovereign-ivory">
            <Bell className="h-5 w-5" />
            <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-sovereign-copper" />
          </button>

          <Link
            href="/settings"
            className="p-2 text-sovereign-ivory/60 no-underline transition-colors hover:text-sovereign-ivory"
          >
            <Settings className="h-5 w-5" />
          </Link>

          <div className="flex items-center space-x-2 border-l border-sovereign-bronze/25 pl-4">
            <div className="flex items-center space-x-2">
              <div className="flex h-8 w-8 items-center justify-center rounded-full border border-sovereign-gold/40 bg-sovereign-midnight">
                <User className="h-4 w-4 text-sovereign-gold" />
              </div>
              <div className="hidden text-sm md:block">
                <div className="font-medium text-sovereign-ivory">
                  {session?.user?.name || session?.user?.email || 'User'}
                </div>
                <div className="text-xs text-sovereign-ivory/50">
                  {session?.user?.role || 'Admin'}
                </div>
              </div>
            </div>
            <button
              onClick={() => signOut()}
              className="p-2 text-sovereign-ivory/60 transition-colors hover:text-sovereign-ivory"
              title="Sign out"
            >
              <LogOut className="h-5 w-5" />
            </button>
          </div>
        </nav>
      </div>
    </header>
  );
}
