import { useAuth } from 'react-oidc-context'
import { useTranslation } from 'react-i18next'
import { Button, 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"
        variant="secondary"
        leftIcon={<SignInIcon size={16} />}
        onClick={() => auth.signinRedirect()}
      >
        {t('auth.login')}
      </Button>
    )
  }

  if (!auth.isAuthenticated) {
    return (
      <Button
        type="button"
        variant="primary"
        leftIcon={<SignInIcon size={16} />}
        onClick={() => auth.signinRedirect()}
      >
        {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-sm 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>
  )
}