"use client";

/**
 * App Router error boundary for the trade-in page (Next 15 idiom).
 *
 * Triggers when a component below `app/page.tsx` throws during render or
 * inside an Effect. Without this, the page would white-screen. Closes
 * finding #16 from 2026-05-24 trade-in audit.
 */
import { useEffect } from "react";

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

export default function Error({ error, reset }: Props) {
  useEffect(() => {
    // Surfaces to browser devtools + (if wired) Sentry.
    console.error("trade-in page error:", error);
  }, [error]);

  return (
    <main className="page" role="alert" style={{ padding: "32px 16px", maxWidth: 600, margin: "0 auto" }}>
      <h1 style={{ marginBottom: 12, fontSize: 20, fontWeight: 600 }}>
        Что-то пошло не так
      </h1>
      <p style={{ color: "var(--muted)", marginBottom: 16, lineHeight: 1.5 }}>
        Произошла ошибка при отображении страницы. Можно попробовать ещё раз —
        если повторяется, перезагрузите страницу.
      </p>
      {error.digest && (
        <p style={{ color: "var(--muted-2)", fontSize: 12, marginBottom: 16, fontFamily: "monospace" }}>
          ID ошибки: {error.digest}
        </p>
      )}
      <button
        type="button"
        onClick={reset}
        style={{
          padding: "10px 16px",
          background: "var(--accent)",
          color: "white",
          border: "none",
          borderRadius: 6,
          fontSize: 14,
          fontWeight: 500,
          cursor: "pointer",
        }}
      >
        Попробовать ещё раз
      </button>
    </main>
  );
}