<template>
  <view class="min-h-screen flex flex-col bg-white">
    <view class="flex-1 px-4 pt-3 pb-6 flex flex-col">
      <!-- Title -->
      <h2 class="text-xl font-bold text-center mb-2">
        输入助力码
      </h2>
      <!-- Description -->
      <view class="text-gray-600 text-center text-sm mb-6">
        请输入家人提供的助力码，参与助力榜排行
      </view>
      <!-- Input boxes -->
      <view class="motto-input-container">
        <view
          v-for="(char, index) in mottoChars"
          :key="index"
          class="motto-input-box"
          :style="{
            borderColor: focusedIndex === index ? THEME_COLORS.PRIMARY : '#d1d5db'
          }"
        >
          <input
            :ref="(el) => (inputRefs[index] = el)"
            type="text"
            v-model="mottoChars[index]"
            @input="(e) => handleInputChange(index, e.target.value)"
            @keydown="(e) => handleKeyDown(index, e)"
            @focus="focusedIndex = index"
            @blur="handleBlur(index)"
            class="motto-input"
            :cursorSpacing="100"
          />
        </view>
      </view>
      <!-- Help text -->
      <view class="text-gray-500 text-left text-sm mb-4">
        没有口令？请联系家里小辈，咨询单位学校是否参与了助力榜排行哦
      </view>

      <!-- 幼儿园信息显示 -->
      <view v-if="matchedKindergarten?.id" class="mb-6">
        <view class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
          <view class="flex items-center space-x-3">
            <!-- 幼儿园Logo -->
            <view class="w-12 h-12 rounded-full bg-white flex items-center justify-center overflow-hidden border-gray-200 border">
              <image
                :src="matchedKindergarten.logo || defaultKindergartenLogo"
                class="w-full h-full object-cover"
              />
            </view>
            <!-- 幼儿园信息 -->
            <view class="flex-1">
              <view class="font-medium text-gray-900 mb-1">{{ matchedKindergarten.name }}</view>
              <view class="text-sm text-gray-600">{{ matchedKindergarten.address }}</view>
            </view>
          </view>
        </view>

        <!-- 确认提示 -->
        <view v-if="!isAlreadyJoined" class="text-center mb-4">
          <view class="text-gray-700 text-sm mb-2">这是您家小辈所在的单位/学校吗？</view>
          <view class="text-gray-600 text-xs">
            <view>确认后您的家庭步数将计入其中，参与助力榜的排行哦</view>
            <view>（不会影响家庭参与市、区榜）</view>
          </view>
        </view>

        <!-- 已参与提示 -->
        <view v-if="isAlreadyJoined" class="text-center mb-4">
          <view class="text-green-600 text-sm font-medium">您的家庭已经参与助力榜</view>
        </view>
      </view>
      <!-- Submit Button -->
      <view
        @tap="handleConfirmJoin"
        :disabled="!isComplete"
        :class="[
          'w-full py-3 text-white text-lg font-medium rounded-lg mt-auto text-center',
          isComplete ? 'bg-blue-500' : 'bg-gray-300'
        ]"
      >
        确认加入
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, watch } from 'vue';
import Taro from '@tarojs/taro';
import { My, Check, IconFont } from '@nutui/icons-vue-taro';
// 获取接口信息
import { searchInstitutionAPI, getSupportedInstitutionAPI, supportInstitutionAPI } from '@/api/organization';
// 导入主题颜色
import { THEME_COLORS } from '@/utils/config';
// 默认幼儿园Logo
const defaultKindergartenLogo = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'

const mottoChars = ref(['', '', '', '']);
const inputRefs = ref([]);
const focusedIndex = ref(-1);

// 幼儿园相关数据
const matchedKindergarten = ref(null);
const isAlreadyJoined = ref(false);

// 页面加载时检查是否已参与助力榜
onMounted(() => {
  checkExistingJoinStatus();
});

/**
 * 检查现有参与状态
 */
const checkExistingJoinStatus = async () => {
  try {
    const response = await getSupportedInstitutionAPI();
    if (response.code && response.data) {
      // 用户已经助力了某个单位
      matchedKindergarten.value = {
        id: response.data.id,
        name: response.data.name,
        address: '', // API返回中没有地址字段，使用空字符串
        logo: response.data.avatar_url
      };
      isAlreadyJoined.value = !!response.data.id;
      // 清空输入框，因为已经参与了
      mottoChars.value = ['', '', '', ''];
    } else {
      // 用户还没有助力任何单位
      matchedKindergarten.value = null;
      isAlreadyJoined.value = false;
    }
  } catch (error) {
    console.error('检查助力状态失败:', error);
    // 出错时重置状态
    matchedKindergarten.value = null;
    isAlreadyJoined.value = false;
  }
};

/**
 * 检查并匹配单位
 */
const checkAndMatchKindergarten = async () => {
  const motto = mottoChars.value.join('');

  if (motto.length === 4) {
    try {
      // 调用API搜索单位
      const response = await searchInstitutionAPI({ passphrase: motto });

      if (response.code && response.data) {
        const institution = {
          id: response.data.id,
          name: response.data.name,
          address: '', // API返回中没有地址字段，使用空字符串
          logo: response.data.avatar_url
        };

        // 检查是否要更换单位
        if (isAlreadyJoined.value && matchedKindergarten.value && institution.id !== matchedKindergarten.value.id) {
          // 用户要更换单位，显示确认提示
          showChangeConfirmation(institution);
          return;
        }

        matchedKindergarten.value = institution;
        // 如果之前已经参与，保持已参与状态；否则设为未参与
        if (!isAlreadyJoined.value) {
          isAlreadyJoined.value = false;
        }
      } else {
        // 没有找到匹配的单位
        matchedKindergarten.value = null;
        isAlreadyJoined.value = false;
        // 提示用户没有找到匹配的单位
        Taro.showToast({
          title: '没有找到匹配的单位',
          icon: 'none'
        });
      }
    } catch (error) {
      console.error('搜索单位失败:', error);
      matchedKindergarten.value = null;
      isAlreadyJoined.value = false;
    }
  } else {
    // 输入未完成，如果之前已参与，保持显示已参与的单位
    if (!isAlreadyJoined.value) {
      matchedKindergarten.value = null;
    }
  }
};

// 显示更换幼儿园确认提示
const showChangeConfirmation = (newKindergarten) => {
  Taro.showModal({
    title: '更换单位/学校',
    content: `新单位：${newKindergarten.name}\n\n您要更换新的单位/学校，参与助力榜吗？`,
    confirmText: '确认更换',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        // 用户确认更换，使用 nextTick 确保状态更新的顺序
        nextTick(() => {
          matchedKindergarten.value = newKindergarten;
          isAlreadyJoined.value = false; // 重置为未参与状态
        });
      } else {
        // 用户取消，清空输入
        nextTick(() => {
          mottoChars.value = ['', '', '', ''];
        });
      }
    }
  });
};

const handleInputChange = (index, value) => {
  // 允许输入多个字符，但只保留第一个有效字符（汉字、数字、大小写字母），兼容输入法
  if (value) {
    // 提取第一个有效字符（汉字、数字、大小写字母）
    const firstChar = value.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] || '';
    mottoChars.value[index] = firstChar;

    // 如果输入了有效字符且不是最后一个输入框，自动聚焦下一个
    if (firstChar && index < 3) {
      focusedIndex.value = index + 1;
      // 使用 nextTick 确保 DOM 更新后再聚焦
      nextTick(() => {
        if (inputRefs.value[index + 1]) {
          inputRefs.value[index + 1].focus();
        }
      });
    }
  } else {
    mottoChars.value[index] = '';
  }

  // 检查是否输入完成，如果完成则匹配幼儿园
  checkAndMatchKindergarten();
};

const handleKeyDown = (index, e) => {
  if (e.key === 'Backspace' && !mottoChars.value[index] && index > 0) {
    // 同样，在Taro中处理光标移动需要不同的方式
  }
};

/**
 * 处理输入框失焦事件
 * @param {number} index - 输入框索引
 */
const handleBlur = (index) => {
  // 重置焦点状态
  focusedIndex.value = -1;

  // 失焦时再次验证输入值，确保只保留有效字符（汉字、数字、大小写字母）
  const currentValue = mottoChars.value[index];
  if (currentValue) {
    const firstChar = currentValue.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] || '';
    mottoChars.value[index] = firstChar;
  }
};

const isComplete = computed(() => {
  return mottoChars.value.every((char) => char) && matchedKindergarten.value;
});

/**
 * 处理确认加入
 */
const handleConfirmJoin = async () => {
  if (!matchedKindergarten.value) return;

  try {
    // 调用助力API
    const response = await supportInstitutionAPI({
      institution_id: matchedKindergarten.value.id
    });

    if (response.code) {
      // 助力成功
      isAlreadyJoined.value = true;

      // 显示成功提示
      Taro.showToast({
        title: '助力成功！',
        icon: 'success',
        duration: 2000
      });

      // 延迟跳转到排行榜页面
      setTimeout(() => {
        Taro.navigateBack({
          delta: 1
        });
      }, 2000);
    } else {
      // 助力失败
      Taro.showToast({
        title: response.message || '助力失败，请重试',
        icon: 'none',
        duration: 2000
      });
    }
  } catch (error) {
    console.error('助力操作失败:', error);
    Taro.showToast({
      title: '网络错误，请重试',
      icon: 'none',
      duration: 2000
    });
  }
};
</script>
<style lang="less">
@import './index.less';
</style>