import { LogIn } from "lucide-react"
import { type JSX } from "react"
import { Link } from "react-router-dom"

import { useLightAuth } from "@/auth/context"
import { Button } from "@/components/ui/button"

/**
 * Header session control (Phase 8). Anonymous readers get a "Sign in" button
 * (public Google lane); signed-in readers see who they are and a sign-out, plus
 * an Admin link when the session is privileged.
 */
export function LoginButton(): JSX.Element {
  const { isAuthenticated, isAdmin, nickname, login, logout } = useLightAuth()

  if (!isAuthenticated) {
    return (
      <Button variant="outline" size="sm" onClick={login}>
        <LogIn data-icon="inline-start" aria-hidden="true" />
        Sign in
      </Button>
    )
  }

  return (
    <div className="flex items-center gap-2">
      {isAdmin && (
        <Button asChild variant="ghost" size="sm">
          <Link to="/admin">Admin</Link>
        </Button>
      )}
      <span className="text-xs font-semibold tracking-widest text-muted-foreground uppercase">
        {nickname ?? (isAdmin ? "Admin" : "Reader")}
      </span>
      <Button variant="ghost" size="sm" onClick={logout}>
        Sign out
      </Button>
    </div>
  )
}