"use client";

import Link from "next/link";
import { useAuth } from "@/lib/auth";

export default function AuthHeader() {
  const { user, isLoggedIn, logout } = useAuth();

  return (
    <>
      {/* 桌面端顶栏 */}
      <header className="hidden md:flex items-center justify-end px-6 py-3 bg-white border-b border-slate-200 gap-3">
        {isLoggedIn ? (
          <>
            <span className="text-sm text-slate-500">{user?.email}</span>
            {user?.role === "admin" && (
              <span className="bg-amber-100 text-amber-700 text-xs px-2 py-0.5 rounded-full font-medium">Admin</span>
            )}
            <button onClick={logout}
              className="text-sm text-slate-600 hover:text-red-500 px-3 py-1.5 rounded-lg border border-slate-200 hover:border-red-300 transition-colors">
              退出
            </button>
          </>
        ) : (
          <>
            <Link href="/login"
              className="text-sm text-slate-600 hover:text-blue-600 px-3 py-1.5 rounded-lg border border-slate-200 hover:border-blue-300 transition-colors">
              登录
            </Link>
            <Link href="/register"
              className="text-sm text-white bg-blue-600 hover:bg-blue-700 px-3 py-1.5 rounded-lg transition-colors font-medium">
              注册
            </Link>
          </>
        )}
      </header>

      {/* 手机端顶栏 */}
      <header className="md:hidden flex items-center justify-between px-4 py-2 bg-white border-b border-slate-200 fixed top-0 left-0 right-0 z-40">
        <span className="font-bold text-blue-600 text-sm">⚡ ArbEngine</span>
        <div className="flex items-center gap-2">
          {isLoggedIn ? (
            <button onClick={logout} className="text-xs text-slate-500 hover:text-red-500">退出</button>
          ) : (
            <>
              <Link href="/login" className="text-xs text-slate-500">登录</Link>
              <Link href="/register" className="text-xs bg-blue-600 text-white px-2 py-1 rounded">注册</Link>
            </>
          )}
        </div>
      </header>
    </>
  );
}