'use client';
import { useEffect } from 'react';

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

/*
 * The one sanctioned hard-coded-string exception in this codebase (documented in `client/CLAUDE.md`).
 * `global-error.tsx` is a special Next.js file that replaces the ENTIRE root layout — including
 * `[locale]/layout.tsx` — when an error is thrown above or inside that layout itself (e.g. a broken
 * `NextIntlClientProvider`/`ThemeProvider`). It therefore has no access to next-intl, the theme, or any
 * other provider, and per Next.js's own contract must render its own `<html>`/`<body>`. Since there is no
 * reliable way to know the visitor's locale here, the copy is minimal, static, and bilingual (fa + en)
 * rather than guessing a language. Kept deliberately inline (no MUI, no design tokens) — this file must
 * render correctly even if the entire component/theme tree is what broke.
 */
export default function GlobalError({ error, reset }: GlobalErrorProps) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <html lang="fa" dir="rtl">
      <body
        style={{
          margin: 0,
          minHeight: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontFamily: 'system-ui, sans-serif',
          background: '#faf9f5',
          color: '#1b2521',
        }}
      >
        <div style={{ textAlign: 'center', maxWidth: 420, padding: 24 }}>
          <p style={{ fontSize: '1.125rem', fontWeight: 700, margin: '0 0 8px' }}>مشکلی پیش آمد</p>
          <p style={{ margin: '0 0 4px', color: '#5b655f' }}>لطفاً دوباره تلاش کنید.</p>
          <p style={{ fontSize: '1rem', fontWeight: 700, margin: '16px 0 8px' }} dir="ltr">
            Something went wrong
          </p>
          <p style={{ margin: '0 0 20px', color: '#5b655f' }} dir="ltr">
            Please try again.
          </p>
          <button
            type="button"
            onClick={reset}
            style={{
              padding: '10px 24px',
              borderRadius: 4,
              border: 'none',
              background: '#1d4a40',
              color: '#f3efe9',
              fontWeight: 700,
              fontSize: '0.9rem',
              cursor: 'pointer',
            }}
          >
            تلاش دوباره / Try again
          </button>
        </div>
      </body>
    </html>
  );
}
