"use client";

import type { CSSProperties } from "react";
import Link from "next/link";
import { SignInButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";

const headerStyle: CSSProperties = {
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center",
  padding: "1rem 1.5rem",
  borderBottom: "1px solid #e5e7eb",
  backgroundColor: "#ffffff",
  position: "sticky",
  top: 0,
  zIndex: 10,
};

const brandStyle: CSSProperties = {
  display: "flex",
  alignItems: "center",
  gap: "0.75rem",
  fontWeight: 600,
  fontSize: "1.125rem",
};

const actionGroupStyle: CSSProperties = {
  display: "flex",
  alignItems: "center",
  gap: "0.75rem",
};

const signInButtonStyle: CSSProperties = {
  padding: "0.5rem 1.1rem",
  borderRadius: "999px",
  border: "1px solid #2563eb",
  backgroundColor: "transparent",
  color: "#2563eb",
  cursor: "pointer",
  fontSize: "0.95rem",
};

export function AppHeader() {
  return (
    <header style={headerStyle}>
      <Link href="/" style={brandStyle}>
        <span role="img" aria-label="logo">
          📚
        </span>
        AutoTeacher
      </Link>
      <div style={actionGroupStyle}>
        <SignedOut>
          <SignInButton mode="modal">
            <button type="button" style={signInButtonStyle}>
              教师登录
            </button>
          </SignInButton>
        </SignedOut>
        <SignedIn>
          <Link href="/teacher" style={{ color: "#2563eb", fontWeight: 500 }}>
            教师后台
          </Link>
          <UserButton afterSignOutUrl="/" />
        </SignedIn>
      </div>
    </header>
  );
}

export default AppHeader;