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

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

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

  return (
    <header className="fixed top-0 left-0 right-0 z-50" style={{ background: "#2e5480" }}>
      <div className="max-w-7xl mx-auto px-6 py-3.5 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div>
            <h1 className="font-display text-lg font-semibold text-white leading-none">
              ClassLens
            </h1>
            <p className="text-[11px] text-white/50 mt-0.5 hidden sm:block tracking-wide">
              Exam Analysis
            </p>
          </div>
        </div>

        <div className="flex items-center gap-4">
          {onToggleDashboard && (
            <button
              onClick={onToggleDashboard}
              className={`text-sm font-medium px-3.5 py-1.5 rounded-md border transition-colors ${
                showDashboard
                  ? "bg-white/20 text-white border-white/30"
                  : "text-white/70 border-white/20 hover:text-white hover:border-white/40"
              }`}
            >
              {showDashboard ? "Upload Exam" : "Dashboard"}
            </button>
          )}
          {onToggleAdmin && (
            <button
              onClick={onToggleAdmin}
              className={`text-sm font-medium px-3.5 py-1.5 rounded-md border transition-colors ${
                showAdmin
                  ? "bg-white/20 text-white border-white/30"
                  : "text-white/70 border-white/20 hover:text-white hover:border-white/40"
              }`}
            >
              {showAdmin ? "返回應用" : isAdmin ? "管理後台" : "我的資料"}
            </button>
          )}
          <button
            onClick={handleLogout}
            className="flex items-center gap-1.5 text-sm text-white/60 hover:text-white transition-colors"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
              <polyline points="16 17 21 12 16 7" />
              <line x1="21" y1="12" x2="9" y2="12" />
            </svg>
            Log out
          </button>
        </div>
      </div>
    </header>
  );
}