import type { FC } from "hono/jsx"
import { css, js } from "../helpers"

export const Error: FC = async ({ error }) => (
    <>
        {css`
            :root {
                --letterbox: #CC8800;
                --text: #FFBF40;
                --bg: #201600;
            }
            * { color: var(--text); text-align: center; }
            html { background: var(--letterbox); }
            #content { background-color: var(--bg); }

            h1 { max-width: 38%; margin: 0 auto; margin-top: 100px; }
            h2 { max-width: 80%; margin: 0 auto; margin-top: 10px; }
            p { max-width: 90%; margin: 0 auto; margin-top: 150px; }

            .restart { max-width: 35%;  }
            .restart button {
                font-size: 30px;
                background: var(--letterbox);
                color: var(--red);
            }

            h1 { animation: glow 3s ease-in-out infinite alternate; }

            @keyframes glow {
                0% {
                    text-shadow: none;
                }
                100% {
                    text-shadow:
                        0 0 2px #FFAA33,
                        0 0 4px #FF8800,
                        0 0 6px #FF6600;
                }
            }

        `}

        {js`
            window.addEventListener("click", async e => {
                if (!e.target || !e.target.matches("button")) return
                e.target.textContent = "[RESTARTING...]"
                await fetch("/cmd/restart")
                setTimeout(() => window.location.reload(), 3000)
            })
        `}

        <h1>Fatal Error</h1>
        <h2>NOSE failed to start properly.</h2>
        <br />
        <p>{error}</p>
        <p class="restart">
            <button>[RESTART]</button>
        </p>
    </>
)