import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { listShopMessage } from '@/api/shop/shopMessage'
import type { ShopMessage } from '@/api/shop/shopMessage'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'

definePageConfig({
  navigationBarTitleText: '消息通知',
})

const NotificationPage: React.FC = () => {
  const [list, setList] = useState<ShopMessage[]>([])
  const [loading, setLoading] = useState(false)
  const [finished, setFinished] = useState(false)
  const [page, setPage] = useState(1)

  useEffect(() => {
    loadList(1)
  }, [])

  const loadList = async (p: number) => {
    if (loading) return
    setLoading(true)

    try {
      const res = await listShopMessage({
        page: p,
        limit: 10,
      })

      if (res?.list) {
        if (p === 1) {
          setList(res.list)
        } else {
          setList(prev => [...prev, ...res.list])
        }
        setFinished(res.list.length < 10)
        setPage(p)
      }
    } catch (err) {
      console.error('加载通知失败', err)
      Taro.showToast({ title: '加载失败', icon: 'none' })
    } finally {
      setLoading(false)
    }
  }

  const handleLoadMore = () => {
    if (!finished && !loading) {
      loadList(page + 1)
    }
  }

  return (
    <View className='min-h-screen bg-gray-50 flex flex-col'>
      <ScrollView scrollY className='flex-1' onScrollToLower={handleLoadMore}>
        {list.length === 0 ? (
          <EmptyState text='暂无消息' />
        ) : (
          <View className='p-3'>
            {list.map(item => (
              <View
                key={item.id}
                className='bg-white rounded-lg p-3 mb-2'
                style={{ opacity: item.isRead ? 0.7 : 1 }}
              >
                <View className='flex justify-between items-center mb-1'>
                  <View className='flex items-center gap-2'>
                    {!item.isRead && <View className='w-1 h-1 rounded-full bg-red-500' />}
                    <Text className='text-sm font-medium text-gray-800'>{item.title}</Text>
                  </View>
                  <Text className='text-xs text-gray-400'>{item.createdAt}</Text>
                </View>
                <Text className='text-xs text-gray-500'>{item.content}</Text>
              </View>
            ))}
          </View>
        )}
        <LoadMore loading={loading} finished={finished} />
      </ScrollView>
    </View>
  )
}

export default NotificationPage