<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 ? '#3b82f6' : '#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'
            ]"
          >
            <My size="20" />
            <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">
        <!-- 标题 -->
        <view class="text-lg font-bold text-center py-4 border-b border-gray-100">
          选择要加入的家庭
        </view>

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

        <!-- 家庭列表 -->
        <view class="flex-1 px-4 pb-4">
          <view
            ref="familyListContainer"
            class="space-y-3 overflow-y-auto"
            :style="{ maxHeight: familyListHeight + 'rpx' }"
          >
            <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',
                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>
                <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>
        </view>

        <!-- 底部按钮 -->
        <view class="flex gap-3 p-4 border-t border-gray-100">
          <nut-button
            @click="closeFamilySelector"
            class="flex-1"
            type="default"
            size="large"
            plain
          >
            关闭
          </nut-button>
          <nut-button
            @click="confirmJoinFamily"
            class="flex-1"
            :color="selectedFamilyId ? '#3b82f6' : '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 } from '@nutui/icons-vue-taro';
// 获取接口信息
import { searchFamilyByPassphraseAPI, joinFamilyAPI } from '@/api/family';
// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'

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);
const familyListHeight = ref(400); // 默认高度

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: '丈夫' },
  { id: '妻子', label: '妻子' },
  { id: '儿子', label: '儿子' },
  { id: '女儿', label: '女儿' },
  { id: '女婿', label: '女婿' },
  { id: '儿媳', label: '儿媳' },
  { id: '孙子', label: '孙子' },
  { id: '外孙', label: '外孙' },
  { id: '孙女', label: '孙女' },
  { id: '外孙女', label: '外孙女' }
];

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) => {
  selectedFamilyId.value = familyId
};

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

/**
 * 计算家庭列表容器的可用高度
 */
const calculateFamilyListHeight = async () => {
  try {
    // 获取系统信息
    const systemInfo = await Taro.getSystemInfo()
    const windowHeight = systemInfo.windowHeight

    // 弹窗高度为70vh
    const popupHeight = windowHeight * 0.8

    // 减去固定元素的高度（估算值，单位px转rpx需要乘以2）
    const titleHeight = 60 * 2 // 标题区域
    const searchHeight = 80 * 2 // 搜索区域
    const buttonHeight = 80 * 2 // 底部按钮区域
    const padding = 32 * 2 // 内边距

    // 计算可用高度（px转rpx）
    const availableHeight = (popupHeight - (titleHeight + searchHeight + buttonHeight + padding) / 2)

    // 设置最小高度和最大高度
    familyListHeight.value = Math.max(200, Math.min(availableHeight * 2, 800))
  } catch (error) {
    console.error('计算高度失败:', error)
    familyListHeight.value = 400 // 使用默认值
  }
}

// 监听弹窗显示状态，动态计算高度
watch(showFamilySelector, async (newVal) => {
  if (newVal) {
    await nextTick()
    await calculateFamilyListHeight()
  }
})

// 监听搜索关键词变化，重置选中的家庭
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 {
    // 调用API查询家庭
    const { code, data } = await searchFamilyByPassphraseAPI({
      passphrase: motto,
      page: 0,
      limit: 9999
    })

    let families = [];

    if (code) {
      families = data;
      console.log('查询家庭:', { motto, role: selectedRole.value, families })

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

      if (families.length === 1) {
        // 只有一个家庭，直接加入
        const joinFamily = await joinFamilyAPI({
          family_id: families[0].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 = families
      }
    }
  } catch (error) {
    console.error('加入家庭失败:', error)
    Taro.showToast({
      title: '加入失败，请重试',
      icon: 'none'
    })
  }
};
</script>
<style lang="less">
@import './index.less';
</style>