"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="flex min-h-[60vh] items-center justify-center px-4 py-12">
      <div className="w-full max-w-lg overflow-hidden rounded-2xl bg-white ring-1 ring-zinc-200/60">
        <div className="flex items-center gap-3 border-b border-zinc-100 px-6 py-4">
          <span
            aria-hidden="true"
            className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-100 text-xs font-semibold text-red-700"
          >
            !
          </span>
          <span className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
            API unreachable
          </span>
        </div>

        <div className="px-6 py-6 sm:px-8">
          <h1 className="text-2xl font-semibold tracking-tight text-zinc-900">
            Couldn&apos;t reach the API
          </h1>
          <p className="mt-2 text-sm leading-relaxed text-zinc-600">
            The dashboard fetches data from{" "}
            <code className="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-xs text-zinc-700">
              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 gap-2 rounded-full bg-zinc-900 px-5 py-2 text-xs font-medium text-white transition-colors hover:bg-zinc-700"
          >
            Retry
            <span aria-hidden="true">→</span>
          </button>

          <div className="mt-8 border-t border-zinc-100 pt-4">
            <div className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
              Error
            </div>
            <pre className="mt-2 overflow-x-auto rounded-md bg-zinc-50 p-3 font-mono text-xs text-zinc-700 ring-1 ring-zinc-200/60">
              {error.message}
              {error.digest ? `\n\ndigest: ${error.digest}` : ""}
            </pre>
          </div>
        </div>
      </div>
    </div>
  );
}