'use client';
import { Menu, Bell, ExternalLink, LogOut } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/hooks/useAuth';

export function Topbar({ onMenu, storeSlug }: { onMenu: () => void; storeSlug?: string }) {
  const { user, logout } = useAuth();
  const router = useRouter();

  async function handleLogout() {
    await logout();
    router.push('/login');
  }

  return (
    <header className="flex h-16 items-center justify-between border-b border-ink-200 bg-white px-4 lg:px-6">
      <button onClick={onMenu} className="lg:hidden text-ink-600" aria-label="Abrir menu">
        <Menu className="h-5 w-5" />
      </button>
      <div className="flex-1" />
      <div className="flex items-center gap-3">
        {storeSlug && (
          <Link
            href={`/loja/${storeSlug}`}
            target="_blank"
            className="hidden items-center gap-1.5 rounded-lg border border-ink-200 px-3 py-1.5 text-sm text-ink-600 hover:bg-ink-50 sm:flex"
          >
            <ExternalLink className="h-4 w-4" />
            Ver loja
          </Link>
        )}
        <button className="relative text-ink-500 hover:text-ink-700" aria-label="Notificações">
          <Bell className="h-5 w-5" />
          <span className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-brand-600" />
        </button>
        <div className="flex items-center gap-2 border-l border-ink-100 pl-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-brand-100 text-sm font-medium text-brand-700">
            {user?.name?.charAt(0) ?? 'L'}
          </div>
          <div className="hidden text-right sm:block">
            <p className="text-sm font-medium text-ink-900">{user?.name ?? 'Lojista'}</p>
            <p className="text-xs text-ink-400">{user?.email}</p>
          </div>
          <button onClick={handleLogout} className="text-ink-400 hover:text-red-600" aria-label="Sair">
            <LogOut className="h-4 w-4" />
          </button>
        </div>
      </div>
    </header>
  );
}