import { useAuth } from '@/auth/useAuth'
import { useTranslation } from 'react-i18next'
import { IconButton } from '@/ui'
import { SignInIcon, SignOutIcon, UserIcon } from '@phosphor-icons/react'

/**
 * Бейдж в header'е: «Войти» если anonymous; имя + logout если залогинен.
 *
 * <p>Logout жмёт {@code signoutRedirect} — Keycloak инвалидирует SSO-сессию и
 * вернёт на post-logout-uri (корень).
 */
export function AuthBadge() {
  const { t } = useTranslation()
  const auth = useAuth()

  if (auth.isLoading) {
    return (
      <span className="text-cap text-mute">
        {t('loading')}
      </span>
    )
  }

  if (auth.error) {
    // Не валим UI — просто кнопка для повтора login.
    return (
      <button
        type="button"
        onClick={() => auth.signinRedirect()}
        className="h-7 px-2.5 rounded-md border border-line bg-surface text-cell text-ink-2 hover:bg-surface-2 hover:text-ink inline-flex items-center gap-1.5 transition-colors"
      >
        <SignInIcon size={14} weight="regular" />
        {t('auth.login')}
      </button>
    )
  }

  if (!auth.isAuthenticated) {
    // Compact sign-in button matching TopBar control style (h-8, surface bg).
    // Previously Button variant="primary" — слишком крупно, выбивалось из
    // toolbar style per user feedback ("кнопка Войти слишком большая").
    return (
      <button
        type="button"
        onClick={() => auth.signinRedirect()}
        className="h-7 px-2.5 rounded-md border border-line bg-surface text-cell text-ink-2 hover:bg-surface-2 hover:text-ink inline-flex items-center gap-1.5 transition-colors"
      >
        <SignInIcon size={14} weight="regular" />
        {t('auth.login')}
      </button>
    )
  }

  const profile = auth.user?.profile
  const display =
    profile?.preferred_username ||
    profile?.name ||
    profile?.email ||
    profile?.sub ||
    'user'

  return (
    <div className="flex items-center gap-2">
      <span className="inline-flex items-center gap-1 text-body text-ink">
        <UserIcon size={14} weight="duotone" />
        <span className="hidden sm:inline">{display}</span>
      </span>
      <IconButton
        type="button"
        icon={<SignOutIcon weight="bold" />}
        label={t('auth.logout')}
        onClick={() =>
          auth.signoutRedirect().catch(() => {
            // Если Keycloak недоступен — просто очищаем локальный state.
            auth.removeUser()
          })
        }
      />
    </div>
  )
}