import React from 'react'
import ReactDOM from 'react-dom/client'
import { App as AntApp, ConfigProvider } from 'antd'
import type { ThemeConfig } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import { QueryClientProvider } from '@tanstack/react-query'
import * as Sentry from '@sentry/react'

// 移动端调试工具：vConsole（仅在开发环境或移动端启用）
if (import.meta.env.DEV || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  import('vconsole').then(({ default: VConsole }) => {
    new VConsole()
  }).catch(() => {
    // vConsole 加载失败，非关键错误
  })
}

// 【关键】必须在Ant Design之前导入并配置dayjs
// 这确保antd使用我们已配置的dayjs实例
import './config/dayjs'
import './styles/global.css'
import './styles/variables.css'
import './styles/utilities.css'
import './styles/responsive.css'
import './styles/ios.css'

// 导入App组件
import App from '@/app/App'
import SupabaseConfigErrorPage from '@/components/common/SupabaseConfigErrorPage'
import { isSupabaseConfigured } from '@/services/supabase/client'
import { queryClient } from './queryClient'
import { initWebVitalsReporting } from './monitoring/webVitals'
import { initAnalytics } from './monitoring/analytics'
import FeedbackBridge from '@/components/feedback/FeedbackBridge'
import { ErrorBoundary } from '@/components/common/ErrorBoundary'
import { initIOSOptimizations, setupIOSEventOptimizations, setupIOSInputOptimizations } from './utils/ios'
import { Capacitor } from '@capacitor/core'
import { CapacitorUpdater } from '@capgo/capacitor-updater'

// 验证dayjs是否正确加载（同步检查）
import dayjs from './config/dayjs'
if (!dayjs || typeof dayjs.extend !== 'function') {
  // Day.js 加载失败，但页面仍会尝试运行
}

// Optional: Sentry (商用级线上可观测性)
// 若未配置 DSN，不影响正常运行
const parseSampleRate = (raw: string | undefined, fallback: number): number => {
  if (raw === undefined || raw === '') return fallback
  const n = Number(raw)
  if (!Number.isFinite(n) || n < 0 || n > 1) return fallback
  return n
}

const sentryDsn = import.meta.env.VITE_SENTRY_DSN
if (sentryDsn && typeof sentryDsn === 'string') {
  const replaySession = parseSampleRate(import.meta.env.VITE_SENTRY_REPLAY_SESSION_SAMPLE_RATE, 0)
  const replayOnError = parseSampleRate(import.meta.env.VITE_SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE, 1)

  Sentry.init({
    dsn: sentryDsn,
    environment: import.meta.env.MODE,
    integrations: [
      Sentry.replayIntegration({
        maskAllText: true,
        blockAllMedia: true,
      }),
    ],
    tracesSampleRate: 0.1,
    replaysSessionSampleRate: replaySession,
    replaysOnErrorSampleRate: replayOnError,
  })
  Sentry.setTag('app', 'lulu-content-clean')
  try {
    Sentry.setTag('release', String(__APP_VERSION__))
  } catch {
    /* __APP_VERSION__ 由构建注入，极少数环境下可能不可用 */
  }
}

if (!isSupabaseConfigured) {
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <SupabaseConfigErrorPage />
    </React.StrictMode>,
  )
} else {
  initWebVitalsReporting()
  initAnalytics()
  
  // 初始化iOS特定优化
  void initIOSOptimizations()
  setupIOSEventOptimizations()
  setupIOSInputOptimizations()

  if ('serviceWorker' in navigator && import.meta.env.PROD) {
    window.addEventListener('load', () => {
      const swVersion = encodeURIComponent(__APP_VERSION__)
      void navigator.serviceWorker.register(`/sw.js?v=${swVersion}`).then((reg) => {
        reg?.addEventListener('updatefound', () => {
          const nw = reg.installing
          if (!nw) return
          nw.addEventListener('statechange', () => {
            if (nw.state === 'installed' && navigator.serviceWorker.controller) {
              window.location.reload()
            }
          })
        })
      })
    })
  }

  // 全局设计系统主题（仅视觉层）：统一配色、字号、圆角与组件视觉风格
  // 使用CSS变量实现紧凑化设计和统一间距
  const appTheme: ThemeConfig = {
  token: {
    /** 高于前台 Header/侧栏等局部 z-index，减少多个 Modal/抽屉与静态 Modal 同档导致「看得见点不动」 */
    zIndexPopupBase: 5000,
    colorPrimary: '#165DFF',
    colorInfo: '#165DFF',
    colorSuccess: '#00A870',
    colorWarning: '#FF7D00',
    colorError: '#F53F3F',
    colorText: '#1D2129',
    colorTextSecondary: '#4E5969',
    colorBgLayout: '#F2F3F5',
    colorBgContainer: '#FFFFFF',
    colorBorder: '#E5E6EB',
    borderRadius: 8,
    borderRadiusLG: 12,
    fontFamily: "'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
    fontSize: 14,
    lineHeight: 1.5,
    boxShadowTertiary: '0 10px 30px rgba(15, 23, 42, 0.08)',
    // 紧凑化间距
    padding: 12,
    paddingXS: 8,
    paddingSM: 12,
    paddingMD: 16,
    paddingLG: 24,
    paddingXL: 32,
    marginXS: 8,
    marginSM: 12,
    marginMD: 16,
    marginLG: 24,
    marginXL: 32,
  },
  components: {
    Button: {
      borderRadius: 8,
      controlHeight: 32,
      fontWeight: 500,
      paddingInline: 16,
    },
    Card: {
      borderRadiusLG: 12,
      paddingLG: 12,
    },
    Input: {
      borderRadius: 8,
      controlHeight: 32,
      paddingInline: 12,
    },
    Select: {
      borderRadius: 8,
      controlHeight: 32,
    },
    Modal: {
      borderRadiusLG: 12,
      paddingLG: 16,
    },
    Menu: {
      itemBorderRadius: 8,
      itemHeight: 40,
    },
    Table: {
      headerBg: '#F7F8FA',
      borderColor: '#E5E6EB',
      cellPaddingInline: 12,
      cellPaddingBlock: 8,
    },
    Pagination: {
      borderRadius: 8,
      itemSize: 32,
    },
    Tag: {
      borderRadiusSM: 4,
    },
    Form: {
      itemMarginBottom: 16,
    },
    Space: {
      sizeSM: 8,
      sizeMD: 12,
      sizeLG: 16,
    },
  }
  }

  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <ConfigProvider
          locale={zhCN}
          theme={appTheme}
        >
          <AntApp>
            <FeedbackBridge />
            <ErrorBoundary>
              <App />
            </ErrorBoundary>
          </AntApp>
        </ConfigProvider>
      </QueryClientProvider>
    </React.StrictMode>,
  )

  if (Capacitor.isNativePlatform()) {
    CapacitorUpdater.notifyAppReady()
  }
}