'use client'

// Review M-6: a backend outage is not a logout. Server components throw
// BackendUnavailableError (auth guards) or fail their data fetch; show a
// retry surface instead of redirecting to /login or rendering empty data.
import { useEffect } from 'react'

export default function AppError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    console.error('App route failed', error)
  }, [error])

  return (
    <main className="mx-auto flex min-h-[60vh] max-w-md flex-col items-center justify-center gap-4 p-6 text-center">
      <h1 className="text-xl font-semibold">Service temporarily unavailable</h1>
      <p className="text-sm text-muted-foreground">
        The application backend could not be reached. You are still signed in; try again in a moment.
      </p>
      <button
        type="button"
        onClick={() => reset()}
        className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
      >
        Try again
      </button>
    </main>
  )
}