import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ErrorBoundary } from 'react-error-boundary'
import App from './App'
import './index.css'

function ErrorFallback({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) {
  return (
    <div className="min-h-screen bg-[var(--color-bg-primary)] flex flex-col items-center justify-center p-4">
      <div className="bg-gradient-card rounded-2xl p-8 max-w-md w-full text-center border border-[var(--color-border)]">
        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--color-danger)]/20 flex items-center justify-center">
          <svg className="w-8 h-8 text-[var(--color-danger)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h2 className="text-xl font-bold text-white mb-2">页面出错了</h2>
        <p className="text-[var(--color-text-secondary)] mb-6 text-sm">{error.message}</p>
        <button
          onClick={resetErrorBoundary}
          className="px-6 py-3 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] text-white rounded-xl font-semibold hover:shadow-lg hover:shadow-cyan-500/25 transition-all"
        >
          刷新重试
        </button>
      </div>
    </div>
  )
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <App />
    </ErrorBoundary>
  </StrictMode>,
)