"use client";

import { useEffect } from "react";
import Link from "next/link";

type ErrorPageProps = {
  error: Error & { digest?: string };
  reset: () => void;
};

export default function ErrorPage({ error, reset }: ErrorPageProps) {
  useEffect(() => {
    console.log("[500] Erro na aplicação", {
      message: error.message,
      digest: error.digest,
      stack: error.stack,
      timestamp: new Date().toISOString(),
    });
  }, [error]);

  return (
    <main className="flex min-h-screen flex-col items-center justify-center gap-6 bg-white px-6 text-center text-slate-900">
      <div className="flex max-w-xl flex-col gap-3">
        <span className="text-sm font-semibold uppercase tracking-[0.3em] text-slate-400">
          Erro 500
        </span>
        <h1 className="text-3xl font-semibold md:text-4xl">
          Algo deu errado por aqui
        </h1>
        <p className="text-base text-slate-600">
          Registramos detalhes no console do navegador para ajudar na
          investigação. Tente novamente ou volte para a página inicial.
        </p>
        {error.digest ? (
          <p className="text-xs text-slate-400">
            Código do erro: <span className="font-mono">{error.digest}</span>
          </p>
        ) : null}
      </div>
      <div className="flex flex-wrap items-center justify-center gap-4">
        <button
          type="button"
          onClick={() => {
            console.log("[500] Reset solicitado pelo usuário");
            reset();
          }}
          className="rounded-full bg-slate-900 px-6 py-2 text-sm font-medium text-white shadow-sm hover:bg-slate-800"
        >
          Tentar novamente
        </button>
        <Link
          href="/"
          className="rounded-full border border-slate-200 px-6 py-2 text-sm font-medium text-slate-700 hover:border-slate-300 hover:text-slate-900"
        >
          Voltar ao início
        </Link>
      </div>
    </main>
  );
}
