import { useNavigation } from '@react-navigation/native'
import { useQueryErrorResetBoundary } from '@tanstack/react-query'
import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { onAuthRefresh } from '../../utils/auth_events'
import { ResponseError } from '../../utils/response_error'
import BlankState from '../primitive/blank_state_primitive'
import { ErrorBoundary, ErrorBoundaryFallback, ErrorBoundaryProps } from './error_boundary'

const renderPageFallback: ErrorBoundaryFallback = (error, reset) => (
  <ErrorView error={error} reset={reset} />
)

export function PageErrorBoundary({ children, ...props }: PropsWithChildren<ErrorBoundaryProps>) {
  return (
    <ErrorBoundary scope="screen" fallback={renderPageFallback} {...props}>
      {children}
    </ErrorBoundary>
  )
}

function ErrorView({ error, reset }: { error: Error; reset: () => void }) {
  const { reset: resetQueries } = useQueryErrorResetBoundary()

  const handleReset = useCallback(() => {
    resetQueries()
    reset()
  }, [resetQueries, reset])

  useEffect(() => handleReset, [handleReset])

  if (error instanceof ResponseError) {
    return <ResponseErrorView response={error.response} onReset={handleReset} />
  }

  if (isNetworkError(error)) {
    return (
      <ErrorContent
        heading={'Problem connecting!'}
        body={'Check your internet connection and try again.'}
      />
    )
  }

  return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'} />
}

function isNetworkError(error: Error) {
  const networkFailedMessages = [
    'Network request failed',
    'Network request timed out',
    'Failed to fetch',
  ]

  return new RegExp(networkFailedMessages.join('|'), 'i').test(error.message)
}

function ResponseErrorView({ response, onReset }: { response: Response; onReset: () => void }) {
  const { status } = response

  const heading = useMemo(() => {
    switch (status) {
      case 403:
        return 'Permission required'
      case 404:
        return 'Content not found'
      default:
        return 'Oops!'
    }
  }, [status])

  const body = useMemo(() => {
    switch (status) {
      case 403:
        return 'Contact your administrator for access.'
      case 404:
        return 'If you believe something should be here, please reach out to your administrator.'
      default:
        return 'Something unexpected happened.'
    }
  }, [status])

  useEffect(() => {
    if (status !== 401) return

    return onAuthRefresh(onReset)
  }, [status, onReset])

  if (status === 429) {
    return <RateLimitedView response={response} onReset={onReset} />
  }

  return <ErrorContent heading={heading} body={body} />
}

const RATE_LIMIT_WINDOW_S = 20

function RateLimitedView({ response, onReset }: { response: Response; onReset: () => void }) {
  const retryAfterS = parseInt(
    response.headers?.get('Retry-After') ?? String(RATE_LIMIT_WINDOW_S),
    10
  )
  const readyAt = useRef(Date.now() + retryAfterS * 1000).current
  const [now, setNow] = useState(Date.now)

  useEffect(() => {
    const id = setInterval(() => {
      setNow(prev => (prev >= readyAt ? prev : Date.now()))
    }, 1000)
    return () => clearInterval(id)
  }, [readyAt])

  const navigation = useNavigation()
  const secondsLeft = Math.max(0, Math.ceil((readyAt - now) / 1000))

  return (
    <BlankState.Root>
      <BlankState.Imagery name="people.noTextMessage" />
      <BlankState.Content>
        <BlankState.Heading>Too many requests</BlankState.Heading>
        <BlankState.Text>
          Chat is being accessed too frequently. Please wait a moment.
        </BlankState.Text>
      </BlankState.Content>
      <BlankState.Button
        title={secondsLeft > 0 ? `Retry in ${secondsLeft}s` : 'Try again'}
        disabled={secondsLeft > 0}
        onPress={onReset}
        size="md"
        accessibilityRole="button"
      />
      <BlankState.TextButton onPress={navigation.goBack}>Go back</BlankState.TextButton>
    </BlankState.Root>
  )
}

function ErrorContent({ heading, body }: { heading: string; body: string }) {
  const navigation = useNavigation()

  return (
    <BlankState.Root>
      <BlankState.Imagery name="people.noTextMessage" />
      <BlankState.Content>
        <BlankState.Heading>{heading}</BlankState.Heading>
        <BlankState.Text>{body}</BlankState.Text>
      </BlankState.Content>
      <BlankState.Button
        title="Go back"
        onPress={navigation.goBack}
        size="md"
        accessibilityRole="link"
      />
      <BlankState.TextButton onPress={() => navigation.navigate('BugReport')}>
        Report a bug
      </BlankState.TextButton>
    </BlankState.Root>
  )
}