<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-left 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-center text-sm mb-4">
        没有口令？请联系您的大家长获取
      </view>
      <!-- Role selection -->
      <view class="mb-6">
        <h3 class="identity-title">
          选择您的身份
        </h3>
        <view class="flex gap-2 flex-wrap">
          <view
            v-for="role in familyRoles"
            :key="role.id"
            @tap="selectedRole = role.id"
            :class="[
              'w-[calc(49%-4rpx)] py-3 rounded-lg border text-center flex flex-col items-center gap-1',
              selectedRole === role.id
                ? 'border-blue-500 bg-blue-50 text-blue-500'
                : 'border-gray-200 text-gray-700'
            ]"
          >
            <IconFont :name="role.type" size="25" />
            <span class="text-sm">{{ role.label }}</span>
          </view>
        </view>
      </view>
      <!-- Submit Button -->
      <view
        @tap="handleJoinFamily"
        :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>

    <!-- 家庭选择弹窗 -->
    <nut-popup
      v-model:visible="showFamilySelector"
      position="bottom"
      :style="{ height: '80vh' }"
      round
      closeable
      @close="closeFamilySelector"
    >
      <view class="family-selector-container h-full flex flex-col">
        <!-- 标题 -->
        <view class="text-lg font-bold text-center py-4 border-b border-gray-100 flex-shrink-0">
          选择要加入的家庭
        </view>

        <!-- 搜索框 -->
        <view class="p-4 flex-shrink-0">
          <nut-searchbar
            v-model="searchKeyword"
            placeholder="搜索家庭名称"
            @search="handleSearch"
            @clear="handleClearSearch"
          />
        </view>

        <!-- 家庭列表 -->
        <view class="flex-1 px-4 pb-4 overflow-hidden">
          <view
            ref="familyListContainer"
            class="h-full space-y-3 overflow-y-auto"
          >
            <view
              v-for="family in filteredFamilies"
              :key="family.id"
              @tap="selectFamily(family.id)"
              :class="[
                'family-item p-4 border rounded-lg flex items-center space-x-3',
                family.is_kicked
                  ? 'border-gray-300 bg-gray-100 opacity-60 cursor-not-allowed'
                  : selectedFamilyId === family.id
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 bg-white'
              ]"
            >
              <!-- 家庭头像 -->
              <view class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
                <image
                  :src="family.avatar_url || defaultAvatar"
                  class="w-full h-full object-cover"
                />
              </view>

              <!-- 家庭信息 -->
              <view class="flex-1">
                <view class="font-medium text-gray-900 mb-1">
                  {{ family.name }}
                </view>
                <text v-if="family.is_kicked" class="text-xs text-red-500">被大家长移除后无法再加入</text>
                <view class="text-sm text-gray-600 line-clamp-2">{{ family.note }}</view>
              </view>

              <!-- 选中状态 -->
              <view v-if="selectedFamilyId === family.id" class="text-blue-500">
                <Check size="20" />
              </view>
            </view>

            <!-- 加载更多按钮 -->
            <view v-if="hasMoreData && !searchKeyword" class="text-center py-4">
              <nut-button
                @click="loadMoreFamilies"
                :loading="isLoadingMore"
                type="default"
                size="small"
                plain
              >
                {{ isLoadingMore ? '加载中...' : '加载更多' }}
              </nut-button>
            </view>

            <!-- 没有更多数据提示 -->
            <view v-if="!hasMoreData && totalFamilies.length > 0 && !searchKeyword" class="text-center py-4 text-gray-500 text-sm">
              没有更多家庭了
            </view>
          </view>
        </view>

        <!-- 底部按钮 -->
        <view class="flex gap-3 p-4 border-t border-gray-100 flex-shrink-0">
          <nut-button
            @click="closeFamilySelector"
            class="flex-1"
            type="default"
            size="large"
            plain
          >
            关闭
          </nut-button>
          <nut-button
            @click="confirmJoinFamily"
            class="flex-1"
            :color="selectedFamilyId ? THEME_COLORS.PRIMARY : 'gray'"
            :disabled="!selectedFamilyId"
            size="large"
          >
            确认
          </nut-button>
        </view>
      </view>
    </nut-popup>
  </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 { searchFamilyByPassphraseAPI, joinFamilyAPI } from '@/api/family';
// 导入主题颜色
import { THEME_COLORS } from '@/utils/config';
// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%A8%E5%AE%B6%E7%A6%8F3_%E5%89%AF%E6%9C%AC.jpg?imageMogr2/strip/quality/60'

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

// 弹窗相关数据
const showFamilySelector = ref(false);
const searchKeyword = ref('');
const selectedFamilyId = ref('');
const mockFamilies = ref([]);
const familyListContainer = ref(null);
// 移除不再需要的familyListHeight变量，因为现在使用flexbox布局

// 分页相关数据
const currentPage = ref(0);
const pageSize = ref(10);
const hasMoreData = ref(true);
const isLoadingMore = ref(false);
const totalFamilies = ref([]);

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] = '';
  }
};

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 familyRoles = [
  { id: '丈夫', label: '丈夫', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/create/%E7%88%B7%E7%88%B7.png' },
  { id: '妻子', label: '妻子', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/create/%E5%A5%B6%E5%A5%B6.png' },
  { id: '儿子', label: '儿子', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/create/%E7%94%B7%E8%81%8C%E5%91%98.png' },
  { id: '女儿', label: '女儿', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/create/%E5%A5%B3%E8%81%8C%E5%91%98.png' },
  { id: '女婿', label: '女婿', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/create/%E7%94%B7%E8%81%8C%E5%91%98.png' },
  { id: '儿媳', label: '儿媳', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/create/%E5%A5%B3%E8%81%8C%E5%91%98.png' },
  { id: '孙子', label: '孙子', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/create/%E7%94%B7%E5%AD%A9.png' },
  { id: '外孙', label: '外孙', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/create/%E7%94%B7%E5%AD%A9.png' },
  { id: '孙女', label: '孙女', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/create/%E5%A5%B3%E5%AD%A9.png' },
  { id: '外孙女', label: '外孙女', type: 'https://cdn.ipadbiz.cn/lls_prog/icon/create/%E5%A5%B3%E5%AD%A9.png' }
];

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

// 过滤后的家庭列表
const filteredFamilies = computed(() => {
  if (!searchKeyword.value) {
    return mockFamilies.value
  }
  return mockFamilies.value.filter(family =>
    family.name?.includes(searchKeyword.value) ||
    family.description?.includes(searchKeyword.value)
  )
});

// 处理搜索
const handleSearch = (value) => {
  searchKeyword.value = value
  // 搜索时重置选中的家庭
  selectedFamilyId.value = ''
}

// 清除搜索
const handleClearSearch = () => {
  searchKeyword.value = ''
  // 清除搜索时重置选中的家庭
  selectedFamilyId.value = ''
};

// 选择家庭
const selectFamily = (familyId) => {
  // 查找对应的家庭信息
  const family = mockFamilies.value.find(f => f.id === familyId);

  // 如果家庭被禁用，则不允许选中
  if (family && family.is_kicked) {
    return;
  }

  selectedFamilyId.value = familyId
};

// 关闭家庭选择器
const closeFamilySelector = () => {
  showFamilySelector.value = false
  selectedFamilyId.value = ''
  searchKeyword.value = ''
}

// 监听弹窗显示状态，重置选中状态
watch(showFamilySelector, async (newVal) => {
  if (newVal) {
    await nextTick()
    // 移除高度计算逻辑，现在使用flexbox自动布局
  }
})

// 监听搜索关键词变化，重置选中的家庭
watch(searchKeyword, () => {
  selectedFamilyId.value = ''
})

// 确认加入家庭
const confirmJoinFamily = async () => {
  if (!selectedFamilyId.value) {
    Taro.showToast({
      title: '请选择一个家庭',
      icon: 'none'
    })
    return
  }

  const selectedFamily = mockFamilies.value.find(f => f.id === selectedFamilyId.value)
  console.log('确认加入家庭:', selectedFamily)
  const joinFamily = await joinFamilyAPI({
    family_id: selectedFamily.id,
    role: selectedRole.value
  })
  if (joinFamily.code) {
    // 关闭弹窗
    closeFamilySelector()

    Taro.showToast({
      title: '加入成功',
      icon: 'success'
    })

    setTimeout(() => {
      Taro.redirectTo({
        url: '/pages/Dashboard/index'
      })
    }, 1500)
  }
};

const handleJoinFamily = async () => {
  if (!isComplete.value) return

  const motto = mottoChars.value.join('')

  try {
    // 重置分页数据
    currentPage.value = 0;
    hasMoreData.value = true;
    totalFamilies.value = [];

    // 调用API查询家庭（第一页）
    const { code, data } = await searchFamilyByPassphraseAPI({
      passphrase: motto,
      page: currentPage.value,
      limit: pageSize.value
    })

    let families = [];

    if (code) {
      families = data;
      totalFamilies.value = families;

      // 检查是否还有更多数据
      hasMoreData.value = families.length === pageSize.value;

      console.log('查询家庭:', { motto, role: selectedRole.value, families, hasMore: hasMoreData.value })

      if (families.length === 0) {
        Taro.showToast({
          title: '未找到匹配的家庭',
          icon: 'none'
        })
        return
      }

      if (families.length === 1) {
        // 只有一个家庭，检查是否被踢出
        const family = families[0];

        if (family.is_kicked) {
          // 被踢出状态，显示选择弹窗让用户知道
          showFamilySelector.value = true;
          mockFamilies.value = totalFamilies.value;
        } else {
          // 未被踢出，直接加入
          const joinFamily = await joinFamilyAPI({
            family_id: family.id,
            role: selectedRole.value
          });

          if (joinFamily.code) {
            Taro.showToast({
              title: '加入成功',
              icon: 'success'
            });

            setTimeout(() => {
              Taro.redirectTo({
                url: '/pages/Dashboard/index'
              });
            }, 1500);
          }
        }
      } else {
        // 多个家庭，显示选择弹窗
        showFamilySelector.value = true
        mockFamilies.value = totalFamilies.value
      }
    }
  } catch (error) {
    console.error('加入家庭失败:', error)
    Taro.showToast({
      title: '加入失败，请重试',
      icon: 'none'
    })
  }
};

// 加载更多家庭数据
const loadMoreFamilies = async () => {
  if (isLoadingMore.value || !hasMoreData.value) return;

  isLoadingMore.value = true;

  try {
    const motto = mottoChars.value.join('');
    currentPage.value += 1;

    const { code, data } = await searchFamilyByPassphraseAPI({
      passphrase: motto,
      page: currentPage.value,
      limit: pageSize.value
    });

    if (code && data) {
      // 合并新数据到现有数据
      totalFamilies.value = [...totalFamilies.value, ...data];

      // 检查是否还有更多数据
      hasMoreData.value = data.length === pageSize.value;

      // 更新mockFamilies用于显示
      mockFamilies.value = totalFamilies.value;

      console.log('加载更多家庭:', {
        page: currentPage.value,
        newCount: data.length,
        totalCount: totalFamilies.value.length,
        hasMore: hasMoreData.value
      });
    } else {
      hasMoreData.value = false;
      Taro.showToast({
        title: '加载失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('加载更多家庭失败:', error);
    currentPage.value -= 1; // 回退页码
    Taro.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    });
  } finally {
    isLoadingMore.value = false;
  }
};
</script>
<style lang="less">
@import './index.less';
</style>