import React, { useEffect } from 'react'
import { useDidShow, useDidHide } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import { useH5AuthStore } from './store/auth'
import './app.css'

function App(props: { children: React.ReactNode }) {
  const restore = useH5AuthStore((s) => s.restore)
  const isAuthenticated = useH5AuthStore((s) => s.isAuthenticated)

  useEffect(() => {
    restore()
  }, [restore])

  // Handle QR scan entry: URL rewritten by index.html script
  useEffect(() => {
    const abstractId: string | undefined = (window as any).__SCAN_ABSTRACT_ID__
    if (!abstractId) return

    if (isAuthenticated) {
      import('./api').then(({ h5Api }) => {
        h5Api.getCabinetByAbstract(abstractId)
          .then((res) => Taro.navigateTo({ url: `/pages/device-detail/index?id=${res.data.id}` }))
          .catch(() => Taro.redirectTo({ url: `/pages/login/index?abstract_id=${abstractId}` }))
      })
    } else {
      Taro.redirectTo({ url: `/pages/login/index?abstract_id=${abstractId}` })
    }
    // ponytail: runs once on mount, auth changes handled by redirect
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAuthenticated])

  useDidShow(() => {
    // ponytail: analytics hook, add when needed
  })

  useDidHide(() => {
    // ponytail: cleanup hook, add when needed
  })

  return <>{props.children}</>
}

export default App