import React, { useCallback, useEffect, useState } from 'react';
import { Button, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import styles from './index.module.scss';
import {
  SUBSCRIBE_TEMPLATES,
  bindWechat,
  getWechatBinding,
  updateWechatSubscribe,
  type WechatBinding,
} from '@/api/wechat';

const NotificationPage: React.FC = () => {
  const [binding, setBinding] = useState<WechatBinding | null>(null);
  const [loading, setLoading] = useState(false);

  const refresh = useCallback(async () => {
    const data = await getWechatBinding().catch(() => ({ bound: false } as WechatBinding));
    setBinding(data);
  }, []);

  useEffect(() => {
    refresh();
  }, [refresh]);

  const handleBind = async () => {
    setLoading(true);
    try {
      const { code } = await Taro.login();
      if (!code) throw new Error('获取登录 code 失败');
      await bindWechat(code);
      Taro.showToast({ title: '微信绑定成功', icon: 'success' });
      refresh();
    } catch (err) {
      Taro.showToast({
        title: err instanceof Error ? err.message : '绑定失败',
        icon: 'none',
      });
    } finally {
      setLoading(false);
    }
  };

  const handleSubscribe = async () => {
    const configured = SUBSCRIBE_TEMPLATES.filter((t) => t.id);
    if (configured.length === 0) {
      Taro.showModal({
        title: '模板未配置',
        content: '订阅消息模板 ID 尚未配置，申请模板后填入 miniapp/src/api/wechat.ts 即可启用。',
        showCancel: false,
        confirmText: '知道了',
      });
      return;
    }
    setLoading(true);
    try {
      const res = await Taro.requestSubscribeMessage({
        tmplIds: configured.map((t) => t.id),
      });
      for (const t of configured) {
        if (res[t.id] === 'accept') {
          await updateWechatSubscribe(t.key, true);
        }
      }
      Taro.showToast({ title: '订阅设置已更新', icon: 'success' });
      refresh();
    } catch (err) {
      Taro.showToast({
        title: err instanceof Error ? err.message : '订阅失败',
        icon: 'none',
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <View className={styles.page}>
      <View className={styles.card}>
        <Text className={styles.cardTitle}>微信订阅消息</Text>
        <Text className={styles.cardDesc}>
          绑定微信后，巡检风险（黄/橙/红）和告警发生时可通过订阅消息提醒你。注意：微信一次性订阅消息每次触发都需重新授权。
        </Text>
        <View className={styles.statusRow}>
          <Text className={styles.statusLabel}>绑定状态</Text>
          <Text className={binding?.bound ? styles.statusOk : styles.statusNo}>
            {binding?.bound ? '已绑定' : '未绑定'}
          </Text>
        </View>
        {binding?.bound && binding.openId ? (
          <Text className={styles.openId}>openid：{binding.openId}</Text>
        ) : null}
        {binding?.bound && binding.authorized && binding.authorized.length > 0 ? (
          <Text className={styles.openId}>已授权：{binding.authorized.join('、')}</Text>
        ) : null}
        <Button
          className={`${styles.btn} ${styles.btnPrimary}`}
          loading={loading}
          onClick={handleBind}
        >
          绑定微信
        </Button>
        <Button
          className={`${styles.btn} ${styles.btnPrimary}`}
          loading={loading}
          onClick={handleSubscribe}
        >
          授权订阅
        </Button>
      </View>
      <View className={styles.card}>
        <Text className={styles.cardTitle}>可订阅场景</Text>
        {SUBSCRIBE_TEMPLATES.map((t) => (
          <View key={t.key} className={styles.tplRow}>
            <Text className={styles.tplLabel}>{t.label}</Text>
            <Text className={t.id ? styles.tplReady : styles.tplPending}>
              {t.id ? '已配置' : '待配置模板 ID'}
            </Text>
          </View>
        ))}
      </View>
    </View>
  );
};

export default NotificationPage;