'use client';

import * as Sentry from '@sentry/nextjs';
import { useEffect } from 'react';
import { AlertOctagon } from 'lucide-react';

type GlobalErrorPageProps = {
  error: Error & { digest?: string };
  reset: () => void;
};

export default function GlobalErrorPage({ error, reset }: GlobalErrorPageProps) {
  useEffect(() => {
    Sentry.captureException(error);
  }, [error]);

  return (
    <html lang="ru">
      <body className="min-h-screen bg-[#050505] text-white">
        <div className="flex min-h-screen items-center justify-center px-4">
          <div className="w-full max-w-md rounded-[1.5rem] border border-white/10 bg-black/40 p-6 text-center shadow-[0_24px_80px_rgba(0,0,0,0.6)] backdrop-blur-xl">
            <div className="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl border border-red-500/30 bg-red-500/15 text-red-300">
              <AlertOctagon className="h-6 w-6" />
            </div>
            <h2 className="mb-2 text-xl font-semibold text-white">Критическая ошибка приложения</h2>
            <p className="mb-2 text-gray-400">Попробуйте повторить действие через несколько секунд.</p>
            {error?.digest ? (
              <p className="mb-5 text-xs text-gray-500">Error ID: {error.digest}</p>
            ) : null}
            <button
              type="button"
              onClick={reset}
              className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-gradient-to-r from-fuchsia-500 to-violet-600 px-4 text-sm font-semibold text-white transition-colors hover:from-fuchsia-500/90 hover:to-violet-600/90"
            >
              Перезапустить
            </button>
          </div>
        </div>
      </body>
    </html>
  );
}
