import type { CommonProps } from '@/proxy/common'
import ConfigProvider from '@/components/ui/ConfigProvider'
import { themeConfig } from '@/proxy/theme/theme.config'
import { useStoreActions, useStoreState } from '@/store'
import useDarkMode from '@/utils/hooks/useDarkmode'
import useNotification from '@/utils/hooks/useNotification'
import { useSetting } from '@/utils/hooks/useSetting'
import useTabFocus from '@/utils/hooks/useTabFocus'
import { ComponentProps, useEffect } from 'react'
import { Helmet } from 'react-helmet'
import { useNavigate, useLocation } from 'react-router-dom'
import { getSetupStatus } from '@/services/setup.service'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useAppVersionNotice } from '@/views/version/useAppVersionNotice'

let didInit = false

const Theme = (props: CommonProps) => {
  const { getConfig } = useStoreActions((a) => a.abpConfig)
  const { setSetupMode, setBootstrapFailed } = useStoreActions((a) => a.base.common)
  const navigate = useNavigate()
  const location = useLocation()

  useEffect(() => {
    if (didInit) return
    didInit = true

    // Direkt /setup'a gelindiyse — hemen setupMode=true yap (loading gate açılsın)
    if (location.pathname === ROUTES_ENUM.setup) {
      setSetupMode(true)
      return
    }

    // Doğrudan config yüklenir. Her sayfa açılışında ayrıca veritabanı probe'u
    // atılmaz — bu, canlı sistemde gereksiz bir istek ve DB bağlantısıydı.
    //
    // silentError: açılıştaki config hatası global hata diyaloğunu tetiklemez;
    // kurulum modu kararı aşağıda verilir. Aksi halde kullanıcı kurulum sayfasının
    // üstünde anlamsız bir "503" penceresi görüyordu.
    getConfig({ silentError: true }).catch(async () => {
      // Config alınamadı. Sunucu gerçekten kurulum modunda mı, yoksa geçici bir
      // arıza mı? Yönlendirme SADECE sunucu kurulum modundayken yapılır; böylece
      // çalışan bir sistemde veritabanı sorunu kullanıcıyı kurulum ekranına düşürmez.
      try {
        const { data } = await getSetupStatus()
        if (data.setupMode) {
          setSetupMode(true)
          navigate(ROUTES_ENUM.setup, { replace: true })
          return
        }
      } catch {
        // Sunucuya hiç ulaşılamıyor — aşağıdaki bakım ekranı gösterilir.
      }

      // Sunucu kurulum modunda değil ama uygulama da açılamıyor.
      // Bu bayrak olmadan loading gate hiç kapanmıyor ve ekran sonsuza kadar
      // spinner'da kalıyordu.
      setBootstrapFailed(true)
    })
  }, [])

  function getThemeStyle() {
    const mode = theme.mode
    const style = setting('App.SiteManagement.Theme.Style')

    return style?.replace(mode === 'dark' ? 'light' : 'dark', mode)
  }

  const { setting } = useSetting()

  const theme = useStoreState((state) => state.theme)
  const locale =
    useStoreState((state) => state.abpConfig.config?.localization.currentCulture.cultureName) ??
    'en'
  useDarkMode()
  useTabFocus()
  useNotification()
  useAppVersionNotice()

  type ConfigProviderValue = NonNullable<ComponentProps<typeof ConfigProvider>['value']>

  const currentTheme = {
    ...themeConfig,
    ...theme,
    ...{ locale },
  } as ConfigProviderValue

  return (
    <>
      {setting('App.SiteManagement.Theme.Style') && (
        <Helmet key="Devexpress stylesheet Helmet">
          <link
            key="Devexpress stylesheet Helmet link"
            rel="stylesheet"
            href={`/css/${getThemeStyle()}.css`}
          />
        </Helmet>
      )}
      <ConfigProvider value={currentTheme}>{props.children}</ConfigProvider>
    </>
  )
}

export default Theme