import * as Sentry from "@sentry/react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { AppWrapper } from "./components/common/PageMeta.tsx";
import { initWebVitals } from "./lib/webVitals";
import "./index.css";

const isDev = import.meta.env.DEV;

// Sentry 初始化包在 try-catch 里，防止 Sentry 本身异常导致整个应用白屏
try {
  Sentry.init({
    dsn: import.meta.env.VITE_SENTRY_DSN as string | undefined,
    environment: import.meta.env.MODE,
    sampleRate: isDev ? 0 : 1.0,
    tracesSampleRate: isDev ? 0 : 0.1,
    replaysSessionSampleRate: 0,
    replaysOnErrorSampleRate: 0,
    ignoreErrors: [
      /ReactRefresh/,
      /react-refresh/,
      /hmr/i,
      /Fast Refresh/,
      /Cannot read properties of null.*useState/,
      /Rendered fewer hooks than expected/,
      /Rendered more hooks than during the previous render/,
    ],
    beforeSend(event) {
      if (isDev) return null;
      const frames = event.exception?.values?.[0]?.stacktrace?.frames || [];
      const isHmrError = frames.some(
        (f) =>
          f.filename?.includes('react-refresh') ||
          f.filename?.includes('vite/dist/client') ||
          f.filename?.includes('@vite')
      );
      if (isHmrError) return null;
      return event;
    },
  });
} catch (e) {
  // Sentry 初始化失败静默忽略，确保应用正常运行
  console.warn('[Sentry] init failed:', e);
}

const rootEl = document.getElementById("root");
if (rootEl) {
  try {
    createRoot(rootEl).render(
      <Sentry.ErrorBoundary fallback={
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', padding: '24px', textAlign: 'center' }}>
          <p style={{ fontSize: '16px', color: '#333', marginBottom: '12px' }}>应用发生错误</p>
          <button onClick={() => window.location.reload()} style={{ background: '#4f46e5', color: '#fff', border: 'none', padding: '10px 24px', borderRadius: '8px', fontSize: '14px', cursor: 'pointer' }}>刷新重试</button>
        </div>
      }>
        <AppWrapper>
          <App />
        </AppWrapper>
      </Sentry.ErrorBoundary>
    );
  } catch (e) {
    // createRoot 或渲染期间的顶层异常兜底
    // 防止 WebView 中某些 polyfill 缺失导致整个应用静默白屏
    console.error('[main] createRoot 失败:', e, '| UA:', navigator.userAgent);
    rootEl.innerHTML = '<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px;text-align:center;font-family:sans-serif;">' +
      '<p style="font-size:16px;color:#333;margin-bottom:8px;">页面加载失败</p>' +
      '<p style="font-size:13px;color:#999;margin-bottom:20px;">请刷新重试，或使用系统浏览器打开</p>' +
      '<button onclick="location.reload()" style="background:#4f46e5;color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:14px;cursor:pointer;">刷新页面</button>' +
      '</div>';
  }
} else {
  console.error('[main] #root 元素不存在，DOM 可能未加载完成');
}

// 初始化 Web Vitals 性能监控
initWebVitals();

// 注册 Service Worker（离线缓存）
if ('serviceWorker' in navigator && import.meta.env.PROD) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then((registration) => {
        console.log('[SW] Registered successfully:', registration.scope);
        
        // 检查更新
        registration.addEventListener('updatefound', () => {
          const newWorker = registration.installing;
          if (newWorker) {
            newWorker.addEventListener('statechange', () => {
              if (newWorker.state === 'installed') {
                // 新版本已安装，强制跳过等待并刷新
                console.log('[SW] New version installed, forcing update...');
                newWorker.postMessage({ type: 'SKIP_WAITING' });
              }
              if (newWorker.state === 'activated') {
                console.log('[SW] New version activated, reloading page...');
                // 自动刷新页面以加载新版本
                window.location.reload();
              }
            });
          }
        });
        
        // 定期检查更新（每5分钟）
        setInterval(() => {
          registration.update();
        }, 5 * 60 * 1000);
      })
      .catch((error) => {
        console.warn('[SW] Registration failed:', error);
      });
      
    // 监听控制器变化（新SW激活后）
    navigator.serviceWorker.addEventListener('controllerchange', () => {
      console.log('[SW] Controller changed, reloading...');
      window.location.reload();
    });
  });
}