import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router"

import type { Route } from "./+types/root"

import "./app.css"
import "streamdown/styles.css"

export const links: Route.LinksFunction = () => [
	{ rel: "preconnect", href: "https://fonts.googleapis.com" },
	{
		rel: "preconnect",
		href: "https://fonts.gstatic.com",
		crossOrigin: "anonymous",
	},
	{
		rel: "stylesheet",
		href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
	},
	{
		rel: "icon",
		href: "/favicon-light.svg",
		type: "image/svg+xml",
		media: "(prefers-color-scheme: light)",
	},
	{
		rel: "icon",
		href: "/favicon-dark.svg",
		type: "image/svg+xml",
		media: "(prefers-color-scheme: dark)",
	},
	{
		rel: "icon",
		href: "/favicon.ico",
		sizes: "any",
	},
]

export function Layout({ children }: { children: React.ReactNode }) {
	return (
		<html lang="en">
			<head>
				<meta charSet="utf-8" />
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<Meta />
				<Links />
			</head>
			<body>
				{children}
				<ScrollRestoration />
				<Scripts />
			</body>
		</html>
	)
}

export default function App() {
	return <Outlet />
}

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
	let message = "Oops!"
	let details = "An unexpected error occurred."
	let stack: string | undefined

	if (isRouteErrorResponse(error)) {
		message = error.status === 404 ? "404" : "Error"
		details =
			error.status === 404 ? "The requested page could not be found." : error.statusText || details
	} else if (import.meta.env.DEV && error && error instanceof Error) {
		details = error.message
		stack = error.stack
	}

	return (
		<main className="flex flex-col items-center justify-center w-full h-full gap-4">
			<h1 className="text-6xl font-semibold">{message}</h1>
			<p className="text-stone-600 dark:text-stone-400">{details}</p>
			<a href="/" className="mt-4 text-sm underline opacity-50 hover:opacity-75">
				Back to home
			</a>
			{stack && (
				<pre className="mt-8 w-full max-w-2xl p-4 overflow-x-auto text-xs bg-stone-100 dark:bg-stone-800 rounded-lg">
					<code>{stack}</code>
				</pre>
			)}
		</main>
	)
}
