import {
  Layout,
  Modal,
  Input,
  message,
  ConfigProvider,
  theme as antTheme,
  Drawer,
  Button,
} from "antd"
import {
  HomeOutlined,
  SettingOutlined,
  UserOutlined,
  HistoryOutlined,
  SyncOutlined,
  AppstoreAddOutlined,
  ApartmentOutlined,
  UnorderedListOutlined,
  FileTextOutlined,
  MoreOutlined,
  UpOutlined,
  DownOutlined,
  HolderOutlined,
  CrownOutlined,
} from "@ant-design/icons"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { HashRouter, useLocation, useNavigate, Routes, Route } from "react-router-dom"
import { useTranslation } from "react-i18next"
import { Sidebar } from "./components/Sidebar"
import { ContentArea } from "./components/ContentArea"
import { OOBE } from "./components/OOBE/OOBE"
import { OAuthLogin } from "./components/OAuth/OAuthLogin"
import { OAuthCallback } from "./components/OAuth/OAuthCallback"
import { ThemeProvider, useTheme } from "./contexts/ThemeContext"
import { MOBILE_NAV_ITEMS, MobileNavKey, sanitizeMobileNavKeys } from "./shared/mobileNavigation"
import { resolveStoredFontFamily } from "./shared/fontFamily"
import { getPluginRuntime } from "./plugins/runtime"

const DEFAULT_MOBILE_BOTTOM_NAV_ITEMS: MobileNavKey[] = MOBILE_NAV_ITEMS.map((item) => item.key)
const DEFAULT_MOBILE_BOTTOM_PRIMARY_KEYS: MobileNavKey[] = DEFAULT_MOBILE_BOTTOM_NAV_ITEMS.slice(
  0,
  4
)
const applyGlobalFontFamily = (fontValue?: string) => {
  const fontFamily = resolveStoredFontFamily(fontValue)
  document.documentElement.style.setProperty("--ss-font-family", fontFamily)
  document.body.style.fontFamily = fontFamily
}

const mapOAuthPermissionToAppPermission = (
  oauthPermission: number
): "admin" | "points" | "view" => {
  if (oauthPermission >= 18) return "admin"
  if (oauthPermission >= 1) return "points"
  return "view"
}

function MainContent(): React.JSX.Element {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const location = useLocation()
  const { currentTheme } = useTheme()
  const [messageApi, contextHolder] = message.useMessage()
  const { isIosDevice, isAndroidDevice, defaultPortraitMode } = useMemo(getMobileDeviceInfo, [])
  const [immersiveMode, setImmersiveMode] = useState(false)

  const normalizeStoredBottomKeys = (raw: unknown): MobileNavKey[] => {
    if (Array.isArray(raw)) {
      return sanitizeMobileNavKeys(raw, []).slice(0, 4)
    }
    return DEFAULT_MOBILE_BOTTOM_PRIMARY_KEYS
  }

  useEffect(() => {
    const api = (window as any).api
    if (!api) return

    let disposed = false
    let unlisten: (() => void) | null = null

    api
      .onNavigate((route: string) => {
        const currentPath = location.pathname === "/" ? "/home" : location.pathname
        const targetPath = route === "/" ? "/home" : route

        if (immersiveMode && !targetPath.startsWith("/home")) {
          navigate("/", { replace: true })
          return
        }

        if (currentPath !== targetPath) {
          navigate(route)
        }
      })
      .then((fn: () => void) => {
        if (disposed) {
          fn()
          return
        }
        unlisten = fn
      })
      .catch(() => void 0)

    return () => {
      disposed = true
      if (unlisten) unlisten()
    }
  }, [navigate, location.pathname, immersiveMode])

  const [wizardVisible, setWizardVisible] = useState(false)
  const [permission, setPermission] = useState<"admin" | "points" | "view">("view")
  const [hasAnyPassword, setHasAnyPassword] = useState(false)
  const [authVisible, setAuthVisible] = useState(false)
  const [authPassword, setAuthPassword] = useState("")
  const [authLoading, setAuthLoading] = useState(false)
  const [oauthVisible, setOAuthVisible] = useState(false)
  const [oauthUserName, setOAuthUserName] = useState<string | null>(null)
  const [mobileBottomNavItems, setMobileBottomNavItems] = useState<MobileNavKey[]>(
    DEFAULT_MOBILE_BOTTOM_NAV_ITEMS
  )
  const [moreNavVisible, setMoreNavVisible] = useState(false)
  const [editingNav, setEditingNav] = useState(false)
  const [editingBottomNavKeys, setEditingBottomNavKeys] = useState<MobileNavKey[]>([])
  const [editingMoreNavKeys, setEditingMoreNavKeys] = useState<MobileNavKey[]>([])
  const [draggingNavKey, setDraggingNavKey] = useState<MobileNavKey | null>(null)
  const [draggingFromList, setDraggingFromList] = useState<"bottom" | "more" | null>(null)
  const [dragOverSlot, setDragOverSlot] = useState<{
    list: "bottom" | "more"
    index: number
  } | null>(null)
  const [isPortraitMode] = useState(defaultPortraitMode)
  const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultPortraitMode)
  const [floatingSidebarExpanded, setFloatingSidebarExpanded] = useState(false)
  const [syncConflictVisible, setSyncConflictVisible] = useState(false)
  const [syncConflicts, setSyncConflicts] = useState<
    Array<{ table: string; key: string; local_summary: string; remote_summary: string }>
  >([])
  const [syncApplyLoading, setSyncApplyLoading] = useState(false)
  const syncCheckingRef = useRef(false)
  const syncApplyLoadingRef = useRef(false)
  const lastLocalMutationAtRef = useRef(0)
  const pluginRuntimeRef = useRef(getPluginRuntime())
  const refreshPermissionFromAuth = useCallback(async () => {
    const api = (window as any).api
    if (!api) return

    const authRes = await api.authGetStatus()
    if (authRes?.success && authRes.data) {
      const anyPwd = Boolean(authRes.data.hasAdminPassword || authRes.data.hasPointsPassword)
      setHasAnyPassword(anyPwd)
      setPermission(authRes.data.permission)
      setAuthVisible(anyPwd && authRes.data.permission === "view")
    }
  }, [])

  const activeMenu = useMemo(() => {
    const p = location.pathname
    if (p === "/" || p.startsWith("/home")) return "home"
    if (p.startsWith("/students")) return "students"
    if (p.startsWith("/score")) return "score"
    if (p.startsWith("/boards")) return "boards"
    if (p.startsWith("/leaderboard")) return "leaderboard"
    if (p.startsWith("/settlements")) return "settlements"
    if (p.startsWith("/reasons")) return "reasons"
    if (p.startsWith("/auto-score")) return "auto-score"
    if (p.startsWith("/reward-settings")) return "reward-settings"
    if (p.startsWith("/plugins")) return "plugins"
    if (p.startsWith("/settings")) return "settings"
    return "home"
  }, [location.pathname])

  useEffect(() => {
    const runtime = pluginRuntimeRef.current
    runtime.start().catch((error) => {
      console.error("Failed to start plugin runtime:", error)
    })

    const handlePluginsUpdated = () => {
      runtime.reload().catch((error) => {
        console.error("Failed to reload plugin runtime:", error)
      })
    }
    window.addEventListener("ss:plugins-updated", handlePluginsUpdated)

    return () => {
      window.removeEventListener("ss:plugins-updated", handlePluginsUpdated)
      runtime.stop().catch((error) => {
        console.error("Failed to stop plugin runtime:", error)
      })
    }
  }, [])

  useEffect(() => {
    const normalizedPath = location.pathname === "/" ? "/home" : location.pathname
    window.dispatchEvent(new CustomEvent("ss:route-changed", { detail: { path: normalizedPath } }))
  }, [location.pathname])

  useEffect(() => {
    const checkWizard = async () => {
      if (!(window as any).api) return
      const res = await (window as any).api.getAllSettings()
      if (res.success && res.data && !res.data.is_wizard_completed) {
        setWizardVisible(true)
      }
    }
    checkWizard()
  }, [])

  useEffect(() => {
    const loadAuthAndSettings = async () => {
      const api = (window as any).api
      if (!api) return

      const [authRes, oauthRes, settingsRes] = await Promise.all([
        api.authGetStatus(),
        api.oauthLoadLoginState(),
        api.getAllSettings(),
      ])

      const oauthPermission =
        oauthRes?.success && oauthRes.data
          ? mapOAuthPermissionToAppPermission(oauthRes.data.permission)
          : null
      if (oauthRes?.success && oauthRes.data?.name) {
        setOAuthUserName(String(oauthRes.data.name))
      } else {
        setOAuthUserName(null)
      }

      if (authRes?.success && authRes.data) {
        const anyPwd = Boolean(authRes.data.hasAdminPassword || authRes.data.hasPointsPassword)
        setHasAnyPassword(anyPwd)

        const finalPermission = oauthPermission ?? authRes.data.permission
        setPermission(finalPermission)
        setAuthVisible(anyPwd && finalPermission === "view")
      } else if (oauthPermission) {
        setPermission(oauthPermission)
        setAuthVisible(false)
      }

      if (settingsRes?.success && settingsRes.data) {
        setMobileBottomNavItems(normalizeStoredBottomKeys(settingsRes.data.mobile_bottom_nav_items))
        applyGlobalFontFamily(settingsRes.data.font_family)
      }
    }

    loadAuthAndSettings()
  }, [])

  useEffect(() => {
    const handleOAuthUserUpdated = (event: Event) => {
      const customEvent = event as CustomEvent<{
        user?: { name?: string } | null
      }>
      const userName = customEvent?.detail?.user?.name
      if (typeof userName === "string" && userName.trim()) {
        setOAuthUserName(userName)
      } else {
        setOAuthUserName(null)
        void refreshPermissionFromAuth()
      }
    }

    window.addEventListener("ss:oauth-user-updated", handleOAuthUserUpdated as EventListener)
    return () => {
      window.removeEventListener("ss:oauth-user-updated", handleOAuthUserUpdated as EventListener)
    }
  }, [refreshPermissionFromAuth])

  useEffect(() => {
    const api = (window as any).api
    if (!api || typeof api.onSettingChanged !== "function") return

    let disposed = false
    let unlisten: (() => void) | null = null

    api
      .onSettingChanged((change: { key?: string; value?: unknown }) => {
        if (change?.key === "mobile_bottom_nav_items") {
          setMobileBottomNavItems(normalizeStoredBottomKeys(change.value))
          return
        }
        if (change?.key === "font_family") {
          applyGlobalFontFamily(String(change.value || "system"))
        }
      })
      .then((fn: () => void) => {
        if (disposed) {
          fn()
          return
        }
        unlisten = fn
      })
      .catch(() => void 0)

    return () => {
      disposed = true
      if (unlisten) unlisten()
    }
  }, [])

  useEffect(() => {
    const api = (window as any).api
    if (!api || !isIosDevice) return

    const fitIosWindow = async () => {
      try {
        await api.windowMaximize()
      } catch {
        void 0
      }

      try {
        await api.windowSetResizable(false)
      } catch {
        void 0
      }

      try {
        // 传入远大于设备尺寸的物理像素，交由系统裁剪为可用全屏区域
        await api.windowResize(10000, 10000)
      } catch {
        void 0
      }
    }

    fitIosWindow().catch(() => void 0)
    const timer = window.setTimeout(() => {
      fitIosWindow().catch(() => void 0)
    }, 300)

    return () => {
      window.clearTimeout(timer)
    }
  }, [isIosDevice])

  useEffect(() => {
    const api = (window as any).api
    if (!api || typeof api.onDataUpdated !== "function") return

    let disposed = false
    let unlisten: (() => void) | null = null

    api
      .onDataUpdated((payload: { category?: string; source?: string }) => {
        const detail = {
          category: payload?.category || "all",
          source: payload?.source || "tauri",
        }
        window.dispatchEvent(new CustomEvent("ss:data-updated", { detail }))
      })
      .then((fn: () => void) => {
        if (disposed) {
          fn()
          return
        }
        unlisten = fn
      })
      .catch(() => void 0)

    return () => {
      disposed = true
      if (unlisten) unlisten()
    }
  }, [])

  const applySyncStrategy = async (strategy: "keep_local" | "keep_remote") => {
    const api = (window as any).api
    if (!api) return
    setSyncApplyLoading(true)
    syncApplyLoadingRef.current = true
    try {
      const res = await api.dbSyncApply(strategy)
      if (res?.success && res?.data?.success) {
        messageApi.success(
          res.data.message ||
            `同步完成（同步 ${res.data.synced_records} 条，解决冲突 ${res.data.resolved_conflicts} 条）`
        )
        window.dispatchEvent(
          new CustomEvent("ss:data-updated", { detail: { category: "all", source: "sync" } })
        )
      } else {
        messageApi.error(res?.data?.message || res?.message || "同步失败")
      }
    } catch (error: any) {
      messageApi.error(error?.message || "同步失败")
    } finally {
      setSyncApplyLoading(false)
      syncApplyLoadingRef.current = false
      setSyncConflictVisible(false)
      setSyncConflicts([])
    }
  }

  useEffect(() => {
    const api = (window as any).api
    if (!api) return
    let disposed = false

    const checkAndSync = async () => {
      if (disposed || syncCheckingRef.current || syncApplyLoadingRef.current) return
      if (permission !== "admin") return
      try {
        syncCheckingRef.current = true
        const statusRes = await api.dbGetStatus()
        if (
          !statusRes?.success ||
          statusRes?.data?.type !== "postgresql" ||
          !statusRes?.data?.connected
        ) {
          return
        }

        const previewRes = await api.dbSyncPreview()
        if (!previewRes?.success || !previewRes?.data?.can_sync || !previewRes?.data?.need_sync) {
          return
        }

        const conflicts = previewRes.data.conflicts || []
        if (conflicts.length > 0) {
          const recentLocalMutation = Date.now() - lastLocalMutationAtRef.current < 15000
          if (recentLocalMutation) {
            const autoApplyRes = await api.dbSyncApply("keep_remote")
            if (
              autoApplyRes?.success &&
              autoApplyRes?.data?.success &&
              autoApplyRes?.data?.synced_records > 0
            ) {
              window.dispatchEvent(
                new CustomEvent("ss:data-updated", { detail: { category: "all", source: "sync" } })
              )
            }
            return
          }
          setSyncConflicts(conflicts)
          setSyncConflictVisible(true)
          return
        }

        const applyRes = await api.dbSyncApply("keep_remote")
        if (applyRes?.success && applyRes?.data?.success && applyRes?.data?.synced_records > 0) {
          window.dispatchEvent(
            new CustomEvent("ss:data-updated", { detail: { category: "all", source: "sync" } })
          )
        }
      } catch (error) {
        console.error("Auto sync failed:", error)
      } finally {
        syncCheckingRef.current = false
      }
    }

    checkAndSync()
    const timer = window.setInterval(checkAndSync, 30000)
    const onDataUpdated = (e: Event) => {
      const customEvent = e as CustomEvent<{ source?: string }>
      if (customEvent?.detail?.source !== "sync") {
        lastLocalMutationAtRef.current = Date.now()
      }
      window.setTimeout(() => {
        checkAndSync().catch(() => void 0)
      }, 1200)
    }
    window.addEventListener("ss:data-updated", onDataUpdated)

    return () => {
      disposed = true
      window.clearInterval(timer)
      window.removeEventListener("ss:data-updated", onDataUpdated)
    }
  }, [permission])

  const login = async () => {
    if (!(window as any).api) return
    setAuthLoading(true)
    const res = await (window as any).api.authLogin(authPassword)
    setAuthLoading(false)
    if (res.success && res.data) {
      setPermission(res.data.permission)
      setAuthVisible(false)
      setAuthPassword("")
      messageApi.success(t("auth.unlocked"))
    } else {
      messageApi.error(res.message || t("common.error"))
    }
  }

  const logout = async () => {
    const api = (window as any).api
    if (!api) return

    // 退出时同时清理 OAuth 持久化状态，避免刷新后又自动恢复权限
    try {
      await api.oauthClearLoginState()
      setOAuthUserName(null)
      window.dispatchEvent(new CustomEvent("ss:oauth-user-updated", { detail: { user: null } }))
    } catch (error) {
      console.error("Failed to clear OAuth login state:", error)
    }

    const res = await api.authLogout()
    if (res?.success && res.data) {
      setPermission(res.data.permission)
      messageApi.success(t("auth.logout"))
    }
  }

  const logoutOAuthFromHeader = useCallback(async () => {
    const api = (window as any).api
    if (!api) return

    try {
      await api.oauthClearLoginState()
      setOAuthUserName(null)
      window.dispatchEvent(new CustomEvent("ss:oauth-user-updated", { detail: { user: null } }))
      await refreshPermissionFromAuth()
      messageApi.success("已退出云账号")
    } catch (error: any) {
      messageApi.error(error?.message || t("common.error"))
    }
  }, [messageApi, refreshPermissionFromAuth, t])

  const handleOAuthSuccess = (userInfo: {
    user_id: string
    email: string
    name: string
    github_username?: string
    permission: number
  }) => {
    setPermission(mapOAuthPermissionToAppPermission(userInfo.permission))
    setAuthVisible(false)
    setOAuthUserName(userInfo.name || null)
    messageApi.success(t("auth.oauthSuccess", "登录成功"))
  }

  const onMenuChange = (v: string) => {
    const key = String(v)
    setMoreNavVisible(false)
    setEditingNav(false)
    if (immersiveMode && key !== "home") return
    if (key === "home") navigate("/")
    if (key === "students") navigate("/students")
    if (key === "score") navigate("/score")
    if (key === "auto-score") navigate("/auto-score")
    if (key === "reward-settings") navigate("/reward-settings")
    if (key === "boards") navigate("/boards")
    if (key === "leaderboard") navigate("/leaderboard")
    if (key === "settlements") navigate("/settlements")
    if (key === "reasons") navigate("/reasons")
    if (key === "plugins") navigate("/plugins")
    if (key === "settings") navigate("/settings")
  }

  const toggleSidebar = () => {
    if (immersiveMode) return
    if (isPortraitMode && sidebarCollapsed) {
      setFloatingSidebarExpanded((prev) => !prev)
      return
    }
    setSidebarCollapsed((prev) => !prev)
  }

  useEffect(() => {
    if (!immersiveMode) return
    if (location.pathname !== "/" && !location.pathname.startsWith("/home")) {
      navigate("/", { replace: true })
    }
  }, [immersiveMode, location.pathname, navigate])

  const toggleImmersiveMode = () => {
    setImmersiveMode((prev) => {
      const next = !prev
      if (next) {
        setFloatingSidebarExpanded(false)
        if (location.pathname !== "/" && !location.pathname.startsWith("/home")) {
          navigate("/", { replace: true })
        }
      }
      return next
    })
  }

  const isDark = currentTheme?.mode === "dark"
  const brandColor = currentTheme?.config?.tdesign?.brandColor || "#0052D9"
  const isMobileDevice = isIosDevice || isAndroidDevice
  const showMobileBottomNav = isPortraitMode && !immersiveMode
  const mobileBottomNavIconMap: Record<MobileNavKey, React.ReactNode> = {
    home: <HomeOutlined style={{ fontSize: "18px" }} />,
    students: <UserOutlined style={{ fontSize: "18px" }} />,
    score: <HistoryOutlined style={{ fontSize: "18px" }} />,
    "auto-score": <SyncOutlined style={{ fontSize: "18px" }} />,
    "reward-settings": <AppstoreAddOutlined style={{ fontSize: "18px" }} />,
    boards: <ApartmentOutlined style={{ fontSize: "18px" }} />,
    leaderboard: <UnorderedListOutlined style={{ fontSize: "18px" }} />,
    settlements: <FileTextOutlined style={{ fontSize: "18px" }} />,
    reasons: <UnorderedListOutlined style={{ fontSize: "18px" }} />,
    plugins: <CrownOutlined style={{ fontSize: "18px" }} />,
    settings: <SettingOutlined style={{ fontSize: "18px" }} />,
  }

  const mobileNavAvailableItems = useMemo(
    () => MOBILE_NAV_ITEMS.filter((item) => !(item.adminOnly && permission !== "admin")),
    [permission]
  )
  const mobileBottomSelectedKeys = useMemo(() => {
    const availableKeySet = new Set(mobileNavAvailableItems.map((item) => item.key))
    return sanitizeMobileNavKeys(mobileBottomNavItems, [])
      .filter((key) => availableKeySet.has(key))
      .slice(0, 4)
  }, [mobileBottomNavItems, mobileNavAvailableItems])
  const mobileBottomPrimaryItems = useMemo(
    () =>
      mobileBottomSelectedKeys
        .map((key) => mobileNavAvailableItems.find((item) => item.key === key))
        .filter((item): item is (typeof MOBILE_NAV_ITEMS)[number] => Boolean(item)),
    [mobileBottomSelectedKeys, mobileNavAvailableItems]
  )
  const mobileBottomOverflowItems = useMemo(
    () => mobileNavAvailableItems.filter((item) => !mobileBottomSelectedKeys.includes(item.key)),
    [mobileNavAvailableItems, mobileBottomSelectedKeys]
  )
  const isMoreActive = mobileBottomOverflowItems.some((item) => item.key === activeMenu)

  const openEditNav = () => {
    const savedKeys = mobileBottomSelectedKeys
    const missingKeys = mobileNavAvailableItems
      .map((item) => item.key)
      .filter((key) => !savedKeys.includes(key))
    setEditingBottomNavKeys(savedKeys)
    setEditingMoreNavKeys(missingKeys)
    setEditingNav(true)
    setDraggingNavKey(null)
    setDraggingFromList(null)
    setDragOverSlot(null)
  }

  const dropPlaceholder = (
    <div
      style={{
        border: "1px dashed var(--ant-color-primary)",
        borderRadius: "10px",
        background: "color-mix(in srgb, var(--ant-color-primary) 10%, transparent)",
        minHeight: "44px",
        padding: "8px 10px",
      }}
    />
  )

  const persistMobileBottomKeys = async (nextKeys: MobileNavKey[]) => {
    const api = (window as any).api
    if (!api) return
    const next = sanitizeMobileNavKeys(nextKeys, [])
    const res = await api.setSetting("mobile_bottom_nav_items", next)
    if (res.success) {
      setMobileBottomNavItems(next)
    } else {
      messageApi.error(res.message || t("settings.general.saveFailed"))
    }
  }

  const handleDropToList = (targetList: "bottom" | "more", targetIndex: number) => {
    if (!draggingNavKey || !draggingFromList) return
    const bottom = editingBottomNavKeys.slice()
    const more = editingMoreNavKeys.slice()

    const source = draggingFromList === "bottom" ? bottom : more
    const sourceIndex = source.indexOf(draggingNavKey)
    if (sourceIndex < 0) return
    source.splice(sourceIndex, 1)

    if (targetList === "bottom" && draggingFromList === "more" && bottom.length >= 4) {
      setDraggingNavKey(null)
      setDraggingFromList(null)
      setDragOverSlot(null)
      messageApi.warning(t("settings.mobile.bottomMaxHint", "底栏最多 4 个"))
      return
    }

    const target = targetList === "bottom" ? bottom : more
    const clampedIndex = Math.max(0, Math.min(targetIndex, target.length))
    target.splice(clampedIndex, 0, draggingNavKey)

    setEditingBottomNavKeys(bottom)
    setEditingMoreNavKeys(more)
    void persistMobileBottomKeys(bottom)
    setDraggingNavKey(null)
    setDraggingFromList(null)
    setDragOverSlot(null)
  }

  return (
    <ConfigProvider
      theme={{
        algorithm: isDark ? antTheme.darkAlgorithm : antTheme.defaultAlgorithm,
        token: {
          colorPrimary: brandColor,
          fontFamily:
            '"PingFang SC", "Hiragino Sans GB", "Heiti SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
        },
      }}
    >
      {contextHolder}
      <Layout
        style={{ height: "100%", flexDirection: "row", overflow: "hidden", position: "relative" }}
      >
        {!isPortraitMode && (
          <div
            className={`ss-immersive-sidebar ${immersiveMode ? "is-hidden" : "is-visible"}`}
            style={
              {
                "--ss-sidebar-width": `${sidebarCollapsed ? 64 : 200}px`,
              } as React.CSSProperties
            }
          >
            <Sidebar
              activeMenu={activeMenu}
              permission={permission}
              onMenuChange={onMenuChange}
              collapsed={sidebarCollapsed}
              floatingExpand={isPortraitMode}
              floatingExpanded={floatingSidebarExpanded}
              onFloatingExpandedChange={setFloatingSidebarExpanded}
            />
          </div>
        )}
        <ContentArea
          permission={permission}
          oauthUserName={oauthUserName}
          onOAuthLogout={logoutOAuthFromHeader}
          hasAnyPassword={hasAnyPassword}
          onAuthClick={() => setAuthVisible(true)}
          onLogout={logout}
          showWindowControls={!isIosDevice && !isAndroidDevice}
          isPortraitMode={isPortraitMode}
          isMobileDevice={isMobileDevice}
          sidebarCollapsed={sidebarCollapsed}
          floatingExpand={isPortraitMode}
          floatingExpanded={floatingSidebarExpanded}
          onToggleSidebar={toggleSidebar}
          immersiveMode={immersiveMode}
          isHomePage={activeMenu === "home"}
          onToggleImmersiveMode={toggleImmersiveMode}
          showSidebarToggle={!isPortraitMode}
          bottomInset={showMobileBottomNav ? 84 : 0}
        />
        {showMobileBottomNav && (
          <div
            style={{
              position: "fixed",
              left: 0,
              right: 0,
              bottom: 0,
              background: "var(--ss-header-bg)",
              backdropFilter: "blur(14px)",
              WebkitBackdropFilter: "blur(14px)",
              borderTop: "1px solid var(--ss-border-color)",
              zIndex: 1400,
              paddingBottom: "env(safe-area-inset-bottom, 0px)",
            }}
          >
            <div style={{ display: "flex", height: "60px" }}>
              {mobileBottomPrimaryItems.map((item) => (
                <button
                  key={item.key}
                  type="button"
                  onClick={() => onMenuChange(item.key)}
                  style={{
                    flex: 1,
                    border: "none",
                    background: "transparent",
                    color:
                      activeMenu === item.key
                        ? "var(--ant-color-primary)"
                        : "var(--ss-text-secondary, var(--ss-text-main))",
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: "2px",
                    fontSize: "12px",
                  }}
                >
                  {mobileBottomNavIconMap[item.key]}
                  <span>{t(item.labelKey)}</span>
                </button>
              ))}
              {mobileBottomOverflowItems.length > 0 && (
                <button
                  type="button"
                  onClick={() => setMoreNavVisible(true)}
                  style={{
                    flex: 1,
                    border: "none",
                    background: "transparent",
                    color: isMoreActive
                      ? "var(--ant-color-primary)"
                      : "var(--ss-text-secondary, var(--ss-text-main))",
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: "2px",
                    fontSize: "12px",
                  }}
                >
                  <MoreOutlined style={{ fontSize: "18px" }} />
                  <span>{t("common.more", "更多")}</span>
                </button>
              )}
            </div>
          </div>
        )}

        <Drawer
          title={editingNav ? t("common.edit") : t("common.more", "更多")}
          placement="bottom"
          open={moreNavVisible}
          onClose={() => {
            setMoreNavVisible(false)
            setEditingNav(false)
            setDraggingNavKey(null)
            setDraggingFromList(null)
            setDragOverSlot(null)
          }}
          height={editingNav ? "calc(100vh - env(safe-area-inset-top, 0px))" : "46vh"}
          styles={{
            content: {
              borderTopLeftRadius: editingNav ? 0 : "14px",
              borderTopRightRadius: editingNav ? 0 : "14px",
              background: "var(--ss-card-bg)",
            },
            header: {
              borderBottom: "1px solid var(--ss-border-color)",
              padding: "12px 16px",
            },
            body: {
              padding: "12px 16px 20px",
              display: "flex",
              flexDirection: "column",
              minHeight: 0,
            },
          }}
          extra={
            permission === "admin" &&
            (editingNav ? (
              <button
                type="button"
                onClick={() => setEditingNav(false)}
                style={{
                  border: "1px solid var(--ss-border-color)",
                  borderRadius: "8px",
                  background: "transparent",
                  color: "var(--ss-text-main)",
                  padding: "4px 10px",
                }}
              >
                {t("common.finish", "完成")}
              </button>
            ) : (
              <button
                type="button"
                onClick={openEditNav}
                style={{
                  border: "1px solid var(--ss-border-color)",
                  borderRadius: "8px",
                  background: "transparent",
                  color: "var(--ss-text-main)",
                  padding: "4px 10px",
                }}
              >
                {t("common.edit")}
              </button>
            ))
          }
        >
          {editingNav ? (
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: "12px",
                flex: 1,
                minHeight: 0,
                overflowY: "auto",
              }}
            >
              <div style={{ fontSize: "12px", color: "var(--ss-text-secondary)" }}>
                {t(
                  "settings.mobile.dragHint",
                  "拖动可调整顺序。前 4 项显示在底栏，其余显示在“更多”。"
                )}
              </div>
              {[
                {
                  list: "bottom" as const,
                  title: t("settings.mobile.bottomSection", "底栏（最多 4 个）"),
                  keys: editingBottomNavKeys,
                },
                {
                  list: "more" as const,
                  title: t("settings.mobile.moreSection", "更多"),
                  keys: editingMoreNavKeys,
                },
              ].map((group) => (
                <div key={group.list} style={{ marginTop: group.list === "more" ? 10 : 0 }}>
                  <div
                    style={{
                      marginBottom: "8px",
                      fontSize: "12px",
                      color: "var(--ss-text-secondary)",
                    }}
                  >
                    {group.title}
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                    {Array.from({ length: group.keys.length + 1 }, (_, i) => {
                      const key = group.keys[i]
                      const item = key ? MOBILE_NAV_ITEMS.find((it) => it.key === key) : null
                      return (
                        <div key={`${group.list}-slot-${i}`}>
                          <div
                            onDragEnter={() => setDragOverSlot({ list: group.list, index: i })}
                            onDragOver={(e) => {
                              e.preventDefault()
                              setDragOverSlot({ list: group.list, index: i })
                            }}
                            onDrop={() => handleDropToList(group.list, i)}
                          >
                            {dragOverSlot?.list === group.list && dragOverSlot?.index === i ? (
                              dropPlaceholder
                            ) : (
                              <div style={{ height: "8px" }} />
                            )}
                          </div>
                          {key && item && (
                            <button
                              type="button"
                              draggable
                              onDragStart={() => {
                                setDraggingNavKey(key)
                                setDraggingFromList(group.list)
                              }}
                              onDragEnd={() => {
                                setDraggingNavKey(null)
                                setDraggingFromList(null)
                                setDragOverSlot(null)
                              }}
                              style={{
                                border: "1px solid var(--ss-border-color)",
                                borderRadius: "10px",
                                background: "var(--ss-bg-color)",
                                color: "var(--ss-text-main)",
                                minHeight: "44px",
                                padding: "8px 10px",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "space-between",
                                gap: "8px",
                                fontSize: "14px",
                                opacity: draggingNavKey === key ? 0.35 : 1,
                                transform: draggingNavKey === key ? "scale(0.985)" : "scale(1)",
                                transition: "opacity 120ms ease, transform 120ms ease",
                                cursor: "grab",
                              }}
                            >
                              <span style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                {mobileBottomNavIconMap[key]}
                                <span>{t(item.labelKey)}</span>
                              </span>
                              <span
                                style={{
                                  display: "inline-flex",
                                  alignItems: "center",
                                  gap: "4px",
                                  color: "var(--ss-text-secondary)",
                                  opacity: 0.9,
                                }}
                              >
                                <UpOutlined style={{ fontSize: "11px" }} />
                                <DownOutlined style={{ fontSize: "11px" }} />
                                <HolderOutlined style={{ fontSize: "12px" }} />
                              </span>
                            </button>
                          )}
                        </div>
                      )
                    })}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
              {mobileBottomOverflowItems.map((item) => (
                <button
                  key={item.key}
                  type="button"
                  onClick={() => onMenuChange(item.key)}
                  style={{
                    border: "1px solid var(--ss-border-color)",
                    borderRadius: "10px",
                    background: "var(--ss-bg-color)",
                    color: "var(--ss-text-main)",
                    height: "44px",
                    padding: "0 12px",
                    display: "flex",
                    alignItems: "center",
                    gap: "8px",
                    fontSize: "14px",
                  }}
                >
                  {mobileBottomNavIconMap[item.key]}
                  <span>{t(item.labelKey)}</span>
                </button>
              ))}
            </div>
          )}
        </Drawer>

        <OOBE visible={wizardVisible} onComplete={() => setWizardVisible(false)} />

        <Modal
          title={t("auth.unlock")}
          open={authVisible}
          onCancel={() => setAuthVisible(false)}
          onOk={login}
          confirmLoading={authLoading}
          okText={t("auth.unlockButton")}
          cancelText={t("common.cancel")}
        >
          <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
            <div style={{ color: "var(--ss-text-secondary)", fontSize: "12px" }}>
              {t("auth.unlockHint")}
            </div>
            <Input
              value={authPassword}
              onChange={(e) => setAuthPassword(e.target.value)}
              placeholder={t("auth.passwordPlaceholder")}
              maxLength={6}
            />
            <div style={{ textAlign: "center", marginTop: "8px" }}>
              <Button
                type="link"
                onClick={() => {
                  setAuthVisible(false)
                  setOAuthVisible(true)
                }}
              >
                {t("auth.useOAuth", "使用 SECTL Auth 登录")}
              </Button>
            </div>
          </div>
        </Modal>

        <OAuthLogin
          visible={oauthVisible}
          onClose={() => setOAuthVisible(false)}
          onSuccess={handleOAuthSuccess}
        />

        <Modal
          title="检测到本地与远程数据冲突"
          open={syncConflictVisible}
          onCancel={() => {
            if (syncApplyLoading) return
            setSyncConflictVisible(false)
          }}
          footer={null}
          closable={!syncApplyLoading}
          maskClosable={false}
          destroyOnHidden
        >
          <div
            style={{ marginBottom: "10px", color: "var(--ss-text-secondary)", fontSize: "12px" }}
          >
            自动同步发现冲突，请选择冲突时优先保留哪一侧的数据。
          </div>
          <div
            style={{
              maxHeight: "280px",
              overflow: "auto",
              border: "1px solid var(--ss-border-color)",
              borderRadius: "6px",
              padding: "8px",
              marginBottom: "12px",
              fontSize: "12px",
            }}
          >
            {syncConflicts.slice(0, 30).map((item) => (
              <div key={`${item.table}-${item.key}`} style={{ marginBottom: "8px" }}>
                <div>
                  <b>{item.table}</b> / <b>{item.key}</b>
                </div>
                <div>本地: {item.local_summary}</div>
                <div>远程: {item.remote_summary}</div>
              </div>
            ))}
            {syncConflicts.length > 30 && <div>仅显示前 30 条冲突...</div>}
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px" }}>
            <button
              style={{ padding: "6px 10px", cursor: syncApplyLoading ? "not-allowed" : "pointer" }}
              disabled={syncApplyLoading}
              onClick={() => applySyncStrategy("keep_remote")}
            >
              保留远程
            </button>
            <button
              style={{ padding: "6px 10px", cursor: syncApplyLoading ? "not-allowed" : "pointer" }}
              disabled={syncApplyLoading}
              onClick={() => applySyncStrategy("keep_local")}
            >
              保留本地
            </button>
          </div>
        </Modal>

        {import.meta.env.DEV ? (
          <div
            style={{
              position: "fixed",
              display: "flex",
              bottom: "2px",
              left: "20px",
              opacity: 0.6,
              zIndex: 9999,
              pointerEvents: "none",
            }}
          >
            <p
              style={{
                color: "#df0000",
                fontWeight: "bold",
                fontSize: "14px",
                pointerEvents: "none",
              }}
            >
              开发中画面,不代表最终品质
            </p>
            <p
              style={{
                color: currentTheme?.mode === "dark" ? "#fff" : "#44474b",
                fontWeight: "bold",
                fontSize: "13px",
                paddingLeft: "5px",
              }}
            >
              SecScore Dev ({getPlatform()}-{getArchitecture()})
            </p>
          </div>
        ) : null}
      </Layout>
    </ConfigProvider>
  )
}

function getArchitecture(): string {
  const userAgent = navigator.userAgent.toLowerCase()

  if (userAgent.includes("arm64") || userAgent.includes("aarch64")) {
    return "ARM64"
  } else if (
    userAgent.includes("x64") ||
    userAgent.includes("amd64") ||
    userAgent.includes("x86_64") ||
    userAgent.includes("intel")
  ) {
    return "x64"
  } else if (userAgent.includes("i386") || userAgent.includes("i686")) {
    return "x86"
  }

  return "Unknown"
}

function getPlatform(): string {
  const userAgent = navigator.userAgent.toLowerCase()

  if (userAgent.includes("iphone") || userAgent.includes("ipad") || userAgent.includes("ipod")) {
    return "iOS"
  } else if (userAgent.includes("android")) {
    return "Android"
  }

  if (userAgent.includes("windows")) {
    return "Windows"
  } else if (userAgent.includes("mac")) {
    return "Mac"
  } else if (userAgent.includes("linux")) {
    return "Linux"
  }

  return "Unknown"
}

function getIosDeviceInfo(): { isIosDevice: boolean; isIosPhone: boolean } {
  const userAgent = navigator.userAgent.toLowerCase()
  const isIosDevice = /iphone|ipad|ipod/.test(userAgent)
  const isIosTablet = userAgent.includes("ipad")
  return {
    isIosDevice,
    isIosPhone: isIosDevice && !isIosTablet,
  }
}

function getMobileDeviceInfo(): {
  isIosDevice: boolean
  isAndroidDevice: boolean
  defaultPortraitMode: boolean
} {
  const { isIosDevice, isIosPhone } = getIosDeviceInfo()
  const isAndroidDevice = navigator.userAgent.toLowerCase().includes("android")
  return {
    isIosDevice,
    isAndroidDevice,
    defaultPortraitMode: isIosPhone || isAndroidDevice,
  }
}
function App(): React.JSX.Element {
  return (
    <ThemeProvider>
      <HashRouter>
        <Routes>
          <Route path="/oauth/callback" element={<OAuthCallback />} />
          <Route path="/*" element={<MainContent />} />
        </Routes>
      </HashRouter>
    </ThemeProvider>
  )
}

export default App