"use client";

import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("Top-level error boundary caught:", error);
  }, [error]);

  return (
    <div className="mx-auto flex min-h-[60vh] max-w-2xl items-center justify-center px-4 py-12">
      <div className="w-full border-2 border-zinc-900 bg-white">
        <div className="flex items-center gap-3 border-b-2 border-zinc-900 bg-yellow-300 px-4 py-2">
          <span
            aria-hidden="true"
            className="inline-flex h-5 w-5 items-center justify-center bg-zinc-900 text-xs font-bold text-yellow-300"
          >
            !
          </span>
          <span className="font-mono text-[11px] font-bold uppercase tracking-[0.25em] text-zinc-900">
            api unreachable
          </span>
        </div>

        <div className="px-6 py-6 sm:px-8 sm:py-8">
          <h1 className="font-mono text-2xl font-bold uppercase tracking-tight text-zinc-900 sm:text-3xl">
            Couldn&apos;t reach the API
          </h1>
          <p className="mt-3 text-sm text-zinc-700 sm:text-base">
            The dashboard fetches data from{" "}
            <code className="rounded-sm bg-zinc-900 px-1.5 py-0.5 font-mono text-xs text-yellow-300">
              api-server:3000
            </code>{" "}
            on the internal docker network. The container may be down or
            still starting. Wait a few seconds and retry.
          </p>

          <button
            type="button"
            onClick={reset}
            className="mt-6 inline-flex items-center border-2 border-zinc-900 bg-yellow-300 px-4 py-2 font-mono text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-900 hover:bg-zinc-900 hover:text-yellow-300"
          >
            Retry →
          </button>

          <div className="mt-8 border-t-2 border-zinc-200 pt-4">
            <div className="font-mono text-[10px] font-bold uppercase tracking-[0.25em] text-zinc-500">
              error
            </div>
            <pre className="mt-2 overflow-x-auto rounded-sm bg-zinc-100 p-3 font-mono text-xs text-zinc-800">
              {error.message}
              {error.digest ? `\n\ndigest: ${error.digest}` : ""}
            </pre>
          </div>
        </div>
      </div>
    </div>
  );
}
