import { AuthErrorType, useAuth } from '@context-providers/auth-context-provider'

import { Button, InfoCard } from '@postxl/ui-components'

const errorMessages: Record<AuthErrorType, { title: string; message: string }> = {
  errorInit: {
    title: 'Authentication Failed',
    message: 'Failed to initialize the authentication system. Please try logging in again.',
  },
  errorLoadUser: {
    title: 'Unable to Load User Data',
    message: 'There was an error loading your user information. Please try logging in again.',
  },
  errorTokenRefresh: {
    title: 'Session Expired',
    message: 'Your session could not be refreshed. Please log in again to continue.',
  },
}

export const AuthErrorPage = ({ errorType }: { errorType?: AuthErrorType }) => {
  const errorInfo = errorMessages[errorType ?? 'errorInit']
  const { logout } = useAuth()

  return (
    <InfoCard variant="error" title={errorInfo.title} message={errorInfo.message}>
      <div className="flex gap-2">
        <Button asChild>
          {/* we don't use a tanstack link here to force a page reload. So all auth states will be re-initialized */}
          <a href="/">Try Again</a>
        </Button>
        <Button variant="secondary" onClick={() => void logout({ redirectUri: window.location.origin })}>
          Login Again
        </Button>
      </div>
    </InfoCard>
  )
}
