chatkit/frontend/src/components/Header.tsx

import { clearToken } from "../lib/api";

interface HeaderProps {
  userEmail: string;
  onLogout: () => void;
  isAdmin?: boolean;
  showAdmin?: boolean;
  onToggleAdmin?: () => void;
}

export function Header({ userEmail, onLogout, isAdmin, showAdmin, onToggleAdmin }: HeaderProps) {
  const handleLogout = () => {
    clearToken();
    onLogout();
  };

  return (
    <header className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-[var(--glass-bg)] border-b border-[var(--glass-border)]">
      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)] flex items-center justify-center text-white font-bold text-lg shadow-lg">
            C
          </div>
          <div>
            <h1 className="font-display text-xl font-semibold text-[var(--color-text)]">
              ClassLens
            </h1>
            <p className="text-xs text-[var(--color-text-muted)] hidden sm:block">
              AI-Powered Exam Analysis
            </p>
          </div>
        </div>

        <div className="flex items-center gap-4">
          {isAdmin && onToggleAdmin && (
            <button
              onClick={onToggleAdmin}
              className={`text-sm font-medium px-4 py-2 rounded-full border transition-colors ${
                showAdmin
                  ? "bg-[var(--color-primary)] text-white border-transparent"
                  : "text-[var(--color-text-muted)] border-[var(--color-border)] hover:text-[var(--color-text)]"
              }`}
            >
              {showAdmin ? "← 返回應用" : "管理後台"}
            </button>
          )}
          <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-success)]/10 border border-[var(--color-success)]/20">
            <span className="w-2 h-2 rounded-full bg-[var(--color-success)]"></span>
            <span className="text-sm font-medium text-[var(--color-success)]">
              {userEmail}
            </span>
          </div>
          <button
            onClick={handleLogout}
            className="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-accent)] transition-colors"
          >
            登出
          </button>
        </div>
      </div>
    </header>
  );
}