import React, { useState, useEffect } from 'react';
import { View, Text, Image } from '@tarojs/components';
import { GeneralNavbar } from '@/components';
import { useGlobalState } from '@/store/global';
import httpService from '@/services/httpService';
import './index.scss';

const EnableNotificationPage: React.FC = () => {
  const { statusNavbarHeightInfo } = useGlobalState() || {};
  const { totalHeight = 98 } = statusNavbarHeightInfo || {};
  const [qrCodeUrl, setQrCodeUrl] = useState<string>('');

  // 获取二维码
  useEffect(() => {
    const fetchQRCode = async () => {
      try {
        const res = await httpService.post('/parameter/many_key', {
          keys: 'ServiceAccountQRCode',
        });
        if (res.code === 0 && res.data?.ServiceAccountQRCode) {
          setQrCodeUrl(res.data.ServiceAccountQRCode);
        }
      } catch (error) {
        console.warn('获取二维码失败:', error);
      }
    };
    fetchQRCode();
  }, []);

  // 示例消息数据
  const exampleMessages = [
    {
      id: '1',
      avatar: require('@/static/other_pages/albert-avatar.png'),
      name: 'Albert',
      content: '发现一家宝藏新球场，周末一起去试试吗？',
    },
    {
      id: '2',
      avatar: require('@/static/other_pages/evelyn-avatar.png'),
      name: 'Evelyn',
      content: '周五晚混双比赛，寻找NTRP 3.5队友！',
    },
    {
      id: '3',
      avatar: require('@/static/other_pages/cici-avatar.png'),
      name: 'CiCi',
      content: '我也在黄浦，明早8点晨练打球吗？',
    },
  ];

  return (
    <View className="enable_notification_page" style={{ paddingTop: `${totalHeight}px` }}>
      <GeneralNavbar title="" showBack={true} />

      <View className="enable_notification_page__content">
        {/* 示例消息卡片 */}
        <View className="enable_notification_page__messages">
          {exampleMessages.map((message, index) => (
            <View 
              key={message.id} 
              className={`enable_notification_page__message_card enable_notification_page__message_card--${index + 1}`}
            >
              <Image
                className="enable_notification_page__avatar"
                src={message.avatar}
                mode="aspectFill"
              />
              <View className="enable_notification_page__message_content">
                <Text className="enable_notification_page__name">{message.name}</Text>
                <Text className="enable_notification_page__text">{message.content}</Text>
              </View>
            </View>
          ))}
        </View>

        {/* 标题区域 */}
        <View className="enable_notification_page__title_section">
          <Text className="enable_notification_page__title">开启消息通知</Text>
          <Text className="enable_notification_page__subtitle">请放心，我们只会在必要时提醒你</Text>
        </View>

        {/* 二维码区域 */}
        <View className="enable_notification_page__qr_section">
          <View className="enable_notification_page__qr_wrapper">
            {qrCodeUrl ? (
              <Image
                className="enable_notification_page__qr_image"
                src={qrCodeUrl}
                mode="aspectFit"
                showMenuByLongpress
              />
            ) : (
              <View className="enable_notification_page__qr_placeholder">
                <Text className="enable_notification_page__qr_loading">加载中...</Text>
              </View>
            )}
          </View>
          <Text className="enable_notification_page__qr_text">长按关注👆开启提醒</Text>
        </View>
      </View>
    </View>
  );
};

export default EnableNotificationPage;