"use client";

import React, { useEffect } from "react";




export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("[PPT Fatal Root Error]", error);
  }, [error]);

  return (
    <html lang="id">
      <head>
        <title>Terjadi Kendala — PPT Adventure</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
      <body
        style={{
          margin: 0,
          padding: 0,
          fontFamily:
            "'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          backgroundColor: "#F7F9F7",
          color: "#17211D",
          display: "flex",
          minHeight: "100vh",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <div
          style={{
            maxWidth: 480,
            width: "90%",
            margin: "0 auto",
            textAlign: "center",
            padding: "2.5rem 1.5rem",
            backgroundColor: "#FFFFFF",
            borderRadius: "16px",
            border: "1px solid #E5EBE7",
            boxShadow: "0 4px 16px rgba(23, 33, 29, 0.08)",
          }}
        >
          <div style={{ marginBottom: "1.25rem", display: "inline-block" }}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/brand/ppt-logo.png"
              alt="PPT Adventure"
              width={56}
              height={46}
              style={{ display: "block" }}
            />
          </div>

          <div
            style={{
              fontSize: "0.75rem",
              fontWeight: 700,
              letterSpacing: "0.08em",
              color: "#3DAD3C",
              marginBottom: "0.5rem",
              textTransform: "uppercase",
            }}
          >
            500 · TERJADI KENDALA SISTEM
          </div>

          <h1
            style={{
              fontSize: "1.65rem",
              fontWeight: 800,
              lineHeight: 1.25,
              color: "#17211D",
              margin: "0 0 0.75rem 0",
            }}
          >
            Perjalanan Kami Sedikit Terganggu
          </h1>

          <p
            style={{
              fontSize: "0.925rem",
              lineHeight: 1.6,
              color: "#68746E",
              margin: "0 0 1.5rem 0",
            }}
          >
            Terjadi kendala teknis saat memuat sistem PPT Adventure. Silakan coba
            kembali atau kembali ke halaman beranda.
          </p>

          {error?.digest && (
            <div
              style={{
                display: "inline-block",
                padding: "0.25rem 0.5rem",
                marginBottom: "1.25rem",
                backgroundColor: "rgba(23, 33, 29, 0.05)",
                borderRadius: "4px",
                fontSize: "0.75rem",
                fontFamily: "monospace",
                color: "#68746E",
              }}
            >
              Referensi: ERR-{error.digest}
            </div>
          )}

          <div
            style={{
              display: "flex",
              justifyContent: "center",
              gap: "0.75rem",
              flexWrap: "wrap",
            }}
          >
            <button
              type="button"
              onClick={reset}
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "0.5rem",
                padding: "0.65rem 1.25rem",
                backgroundColor: "#3DAD3C",
                color: "#FFFFFF",
                border: "none",
                borderRadius: "8px",
                fontWeight: 700,
                fontSize: "0.875rem",
                cursor: "pointer",
              }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
              <span>Coba Lagi</span>
            </button>

            <a
              href="/"
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "0.5rem",
                padding: "0.65rem 1.25rem",
                backgroundColor: "#FFFFFF",
                color: "#17211D",
                border: "1.5px solid #E5EBE7",
                borderRadius: "8px",
                fontWeight: 600,
                fontSize: "0.875rem",
                textDecoration: "none",
              }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
              <span>Kembali ke Beranda</span>
            </a>
          </div>
        </div>
      </body>
    </html>
  );
}
