import { useState, useCallback, useMemo } from 'react'
import { useDidShow } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { Navbar } from '@/components/navbar'
import { Loading } from '@/components/loading'
import { Empty } from '@/components/empty'
import { getEventList, type EventItem } from '@/api/event'
import { ROUTES } from '@/constants/routes'
import { navigateTo } from '@/utils/navigation'
import { showToast } from '@/utils/toast'
import { splitAlerts } from './splitAlerts'
import styles from './index.module.scss'

export default function Index() {
  const [alertList, setAlertList] = useState<EventItem[]>([])
  const [loading, setLoading] = useState(true)
  const [loadError, setLoadError] = useState(false)

  // 每次进入页面重拉全量告警（与事件页"全部"筛选同参数）
  const loadAlerts = useCallback(async () => {
    setLoading(true)
    setLoadError(false)
    try {
      const list = await getEventList({ sceneId: 0, status: 0, startDate: '', endDate: '' })
      setAlertList(list)
    } catch {
      setLoadError(true)
    } finally {
      setLoading(false)
    }
  }, [])

  useDidShow(() => {
    loadAlerts()
  })

  const { unhandled, messages } = useMemo(() => splitAlerts(alertList), [alertList])

  const goFamily = () => navigateTo(ROUTES.FAMILY)
  const goAlertDetail = () => showToast('告警详情即将上线')

  return (
    <View className={styles.page}>
      <Navbar title="智慧养老" autoBack={false} />

      {loading ? (
        <View className={styles.stateWrap}><Loading /></View>
      ) : loadError ? (
        <View className={styles.stateWrap}>
          <Empty text="加载失败，请检查网络" mode="wifi" />
          <View className={styles.retryBtn} onClick={loadAlerts}><Text>重试</Text></View>
        </View>
      ) : (
        <>
          <FamilyEntry onClick={goFamily} />

          {unhandled.length > 0 && (
            <UnhandledAlert alert={unhandled[0]} onClick={goAlertDetail} />
          )}

          {messages.length > 0 && (
            <View className={styles.messageList}>
              {messages.map((alert) => (
                <AlertMessageItem key={alert.id} alert={alert} onClick={goAlertDetail} />
              ))}
            </View>
          )}

          {unhandled.length === 0 && messages.length === 0 && (
            <View className={styles.stateWrap}>
              <Empty text="暂无告警消息" mode="message" />
            </View>
          )}
        </>
      )}
    </View>
  )
}

function FamilyEntry({ onClick }: { onClick: () => void }) {
  return (
    <View className={styles.familyEntry} onClick={onClick}>
      <View className={styles.familyIcon}>
        <Text className={styles.familyEmoji}>👨‍👩‍👧</Text>
      </View>
      <Text className={styles.familyText}>家庭圈</Text>
    </View>
  )
}

function UnhandledAlert({ alert, onClick }: { alert: EventItem; onClick: () => void }) {
  return (
    <View className={styles.unhandledCard} onClick={onClick}>
      <View className={styles.unhandledTag}><Text>未处理</Text></View>
      <Text className={styles.unhandledTitle}>{alert.deviceName || '未知设备'}</Text>
      {alert.sceneName && (
        <View className={styles.unhandledRow}>
          <Text className={styles.rowLabel}>家庭圈：</Text>
          <Text className={styles.rowValue}>{alert.sceneName}</Text>
        </View>
      )}
      {alert.time && (
        <View className={styles.unhandledRow}>
          <Text className={styles.rowLabel}>时间：</Text>
          <Text className={styles.rowValue}>{alert.time}</Text>
        </View>
      )}
    </View>
  )
}

function AlertMessageItem({ alert, onClick }: { alert: EventItem; onClick: () => void }) {
  return (
    <View className={styles.messageCard} onClick={onClick}>
      <View className={styles.messageHead}>
        <View className={styles.messageDot} />
        <Text className={styles.messageTitle}>告警消息</Text>
      </View>
      {alert.time && <Text className={styles.messageTime}>{alert.time}</Text>}
    </View>
  )
}