<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-26 11:00:12
 * @FilePath: /lls_program/src/pages/MyFamily/index.vue
 * @Description: 我的家庭页面 - 展示用户加入的家庭列表
-->
<template>
  <view class="min-h-screen bg-gray-50 pb-20">
    <!-- 家庭列表 -->
    <view class="px-4 py-4 space-y-4">
      <view
        v-for="family in familyList"
        :key="family.id"
        class="bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100"
      >
        <!-- 家庭封面图和基本信息 -->
        <view class="relative">
          <!-- 当前家庭标记 -->
          <view
            v-if="family.is_current_family"
            class="absolute top-2 right-2 bg-[rgba(229,231,235,0.85)] text-blue-500 text-xs px-2 py-1 rounded-sm z-10"
          >
            当前家庭
          </view>

          <!-- 创建者标记 -->
          <view
            v-if="family.is_my"
            class="absolute top-2 left-2 bg-[rgba(229,231,235,0.85)] text-blue-500 text-xs px-2 py-1 rounded-sm z-10"
          >
            创建者
          </view>

          <!-- 封面图 -->
          <image
            :src="family.avatar_url || defaultFamilyCoverSvg"
            class="w-full h-44 object-cover"
            mode="aspectFill"
          />

          <!-- 家庭名称和大家长信息覆盖层 -->
          <view class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4">
            <view class="text-white font-bold text-lg mb-1">{{ family.name }}</view>
            <view class="text-white/90 text-sm">大家长：{{ family.created_by_nickname }}</view>
          </view>
        </view>

        <!-- 成员信息和操作按钮 -->
        <view class="p-4">
          <!-- 成员头像和数量 -->
          <view class="flex items-center justify-between mb-4">
            <view class="flex items-center">
              <!-- 成员头像叠加效果 -->
              <view class="avatar-overlap">
                <image
                  mode="aspectFill"
                  v-for="(member, index) in family?.users?.slice(0, 4) || []"
                  :key="member.id"
                  :src="member.avatar_url || defaultAvatar"
                  class="avatar-item w-8 h-8 rounded-full border-2 border-white object-cover"
                  :style="{ zIndex: 10 - index }"
                />
                <!-- 更多成员数量显示 -->
                <view
                  v-if="family?.users?.length > 4"
                  class="w-8 h-8 rounded-full bg-gray-300 border-2 border-white flex items-center justify-center text-xs text-gray-600"
                  :style="{ zIndex: 6 }"
                >
                  +{{ family?.users?.length - 4 }}
                </view>
              </view>
              <!-- 总成员数 -->
              <view class="ml-3 text-sm text-gray-600">
                {{ family?.users?.length || 0 }} 位家庭成员
              </view>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="flex gap-3 justify-end">
            <view
              v-if="family.is_my"
              @tap="showMemberManagement(family)"
              class="px-4 py-2 bg-green-500 text-white text-sm rounded-lg"
            >
              查看成员
            </view>
            <view
              v-if="!family.is_current_family"
              @tap="switchToFamily(family.id)"
              class="px-4 py-2 bg-blue-500 text-white text-sm rounded-lg"
            >
              切换到此家庭
            </view>
            <view
              v-if="!family.is_my"
              @tap="exitFamily(family.id)"
              class="px-4 py-2 bg-red-500 text-white text-sm rounded-lg"
            >
              退出家庭
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="familyList.length === 0" class="text-center py-12">
        <view class="text-gray-400 mb-4">
          <Home size="48" />
        </view>
        <view class="text-gray-500 mb-2">您还没有加入任何家庭</view>
      </view>
    </view>

    <!-- 底部固定按钮 -->
    <view v-if="familyList.length > 0" class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-4 z-10">
      <!-- 双按钮布局：可以创建家庭时 -->
      <view v-if="canAddFamily" class="flex gap-3">
        <view
          @tap="createNewFamily"
          class="flex-1 bg-green-500 text-white text-center py-3 rounded-lg font-medium text-sm"
        >
          创建家庭
        </view>
        <view
          @tap="joinNewFamily"
          class="flex-1 bg-blue-500 text-white text-center py-3 rounded-lg font-medium text-sm"
        >
          加入家庭
        </view>
      </view>

      <!-- 单按钮布局：只能加入家庭时 -->
      <view
        v-else
        @tap="joinNewFamily"
        class="w-full bg-blue-500 text-white text-center py-3 rounded-lg font-medium text-sm"
      >
        加入新家庭
      </view>
    </view>

    <!-- 成员管理弹窗 -->
    <nut-popup
      v-model:visible="showMemberPopup"
      position="bottom"
      :style="{ height: '60%' }"
      round
      closeable
      @close="closeMemberPopup"
    >
      <view class="h-full flex flex-col">
        <!-- 固定标题区域 -->
        <view class="p-4 pb-2 border-b border-gray-100">
          <view class="text-lg font-bold mb-2 text-center">家庭成员管理</view>
          <view class="text-sm text-gray-600 text-center">{{ currentFamily?.name }}</view>
        </view>

        <!-- 可滚动的成员列表区域 -->
        <view class="flex-1 overflow-hidden">
          <scroll-view :scroll-y="true" class="h-full">
            <view class="px-4 py-3">
              <view class="space-y-3">
                <view
                  v-for="member in currentMembers"
                  :key="member.id"
                  class="bg-gray-50 rounded-lg p-3"
                  @tap="toggleMemberSelection(member.id)"
                >
                  <view class="flex items-center">
                    <!-- 左侧：选择框 + 头像 + 信息 -->
                    <view class="flex items-center flex-1 min-w-0">
                      <!-- 选择框 -->
                      <view
                        class="w-5 h-5 rounded border-2 flex items-center justify-center flex-shrink-0"
                        :class="selectedMembers.includes(member.id) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'"
                      >
                        <Check
                          v-if="selectedMembers.includes(member.id)"
                          size="12"
                          color="white"
                        />
                      </view>

                      <!-- 头像 -->
                      <image
                        :src="member.avatar_url || defaultAvatar"
                        class="w-10 h-10 rounded-full ml-3 object-cover flex-shrink-0"
                      />

                      <!-- 昵称和角色 -->
                      <view class="ml-3 flex-1 min-w-0">
                        <view class="font-medium text-sm truncate">{{ member.nickname }}</view>
                        <view class="text-xs text-gray-500 truncate">{{ member.role }}</view>
                      </view>
                    </view>

                    <!-- 右侧：大家长标识 -->
                    <view
                      v-if="member.is_my"
                      class="ml-3 px-2 py-1 bg-yellow-100 text-yellow-600 text-xs rounded flex-shrink-0"
                    >
                      大家长
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>

        <!-- 固定底部按钮区域 -->
        <view class="p-4 pt-2 border-t border-gray-100">
          <view class="flex gap-3">
            <view
              @tap="closeMemberPopup"
              class="flex-1 py-3 bg-gray-200 text-gray-700 text-center rounded-lg text-sm"
            >
              关闭
            </view>
            <view
              @tap="removeSelectedMembers"
              class="flex-1 py-3 bg-red-500 text-white text-center rounded-lg text-sm"
              :class="selectedMembers.length === 0 ? 'opacity-50' : ''"
            >
              移除 ({{ selectedMembers.length }})
            </view>
          </view>
        </view>
      </view>
    </nut-popup>

    <!-- 确认弹窗已替换为Taro.showModal -->
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import Taro, { useDidShow } from '@tarojs/taro';
import { Home, Check } from '@nutui/icons-vue-taro';
import './index.less';
// 获取接口信息
import { getMyFamiliesAPI, switchCurrentFamilyAPI, deleteFamilyMemberAPI } from '@/api/family';
//
const defaultFamilyCoverSvg = '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 defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg?imageMogr2/strip/quality/60';
// 获取接口数据

// 响应式数据
const familyList = ref([]);

// 成员管理相关数据
const showMemberPopup = ref(false);
const currentFamily = ref(null);
const selectedMembers = ref([]);
const currentMembers = ref([]);

/**
 * 初始化页面数据
 */
const canAddFamily = ref(false);

const initPageData = async () => {
  // 获取家庭列表
  const { code, data } = await getMyFamiliesAPI();
  if (code) {
    familyList.value = data?.families || [];
    canAddFamily.value = data?.can_add || false;
  }
};

/**
 * 切换到指定家庭
 * @param {number} familyId - 家庭ID
 */
const switchToFamily = async (familyId) => {
  const family = familyList.value.find(f => f.id === familyId);
  if (!family) return;

  Taro.showModal({
    title: '切换家庭',
    content: `确定要切换到「${family.name}」吗？`,
    success: async (res) => {
      if (res.confirm) {
        const { code } = await switchCurrentFamilyAPI({ family_id: familyId });
        if (code) {
          // 切换家庭逻辑 - 先清除所有当前标记，再设置新的当前家庭
          familyList.value = familyList.value.map(f => ({
            ...f,
            is_current_family: f.id === familyId
          }));

          console.log('切换家庭后的列表:', familyList.value);
          Taro.showToast({
            title: '切换成功',
            icon: 'success'
          });
        }
      }
    }
  });
};

/**
 * 退出家庭
 * @param {number} familyId - 家庭ID
 */
const exitFamily = async (familyId) => {
  const family = familyList.value.find(f => f.id === familyId);
  if (!family) return;

  // 家庭所有者不能退出
  if (family.is_my) {
    Taro.showToast({
      title: '您是家庭创建者，不能退出家庭',
      icon: 'none',
    });
    return;
  }

  Taro.showModal({
    title: '退出家庭',
    content: `确定要退出「${family.name}」吗？退出后将无法查看该家庭的相关信息。`,
    success: async (res) => {
      if (res.confirm) {
        try {
          // 调用退出家庭API（主动退出时不传user_ids）
          const { code } = await deleteFamilyMemberAPI({
            family_id: familyId
          });

          if (code) {
            const exitingFamily = familyList.value.find(f => f.id === familyId);

            if (exitingFamily?.is_current_family) {
              // 如果退出的是当前家庭，需要返回我的页面
              familyList.value = familyList.value.filter(f => f.id !== familyId);

              Taro.showToast({
                title: '已退出家庭',
                icon: 'success'
              });

              // 延迟返回我的页面
              setTimeout(() => {
                Taro.navigateBack();
              }, 1500);
            } else {
              // 退出非当前家庭
              familyList.value = familyList.value.filter(f => f.id !== familyId);

              Taro.showToast({
                title: '已退出家庭',
                icon: 'success'
              });
            }
          }
        } catch (error) {
          console.error('退出家庭失败:', error);
          Taro.showToast({
            title: '退出失败，请重试',
            icon: 'none'
          });
        }
      }
    }
  });
};



/**
 * 加入新家庭
 */
const joinNewFamily = () => {
  Taro.navigateTo({
    url: '/pages/JoinFamily/index'
  });
};

/**
 * 创建新家庭
 */
const createNewFamily = () => {
  Taro.navigateTo({
    url: '/pages/CreateFamily/index'
  });
};

/**
 * 显示成员管理弹窗
 * @param {Object} family - 家庭对象
 */
const showMemberManagement = (family) => {
  currentFamily.value = family;
  // 生成成员数据
  currentMembers.value = family.users.map(user => ({
    ...user,
    is_my: user.is_creator
  }));
  //
  selectedMembers.value = [];
  showMemberPopup.value = true;
};

/**
 * 关闭成员管理弹窗
 */
const closeMemberPopup = () => {
  showMemberPopup.value = false;
  currentFamily.value = null;
  selectedMembers.value = [];
  currentMembers.value = [];
};

/**
 * 切换成员选择状态
 * @param {number} memberId - 成员ID
 */
const toggleMemberSelection = (memberId) => {
  const member = currentMembers.value.find(m => m.id === memberId);

  // 创建者不能被选择移除
  if (member?.is_my) {
    Taro.showToast({
      title: '创建者不能被移除',
      icon: 'none'
    });
    return;
  }

  const index = selectedMembers.value.indexOf(memberId);
  if (index > -1) {
    selectedMembers.value.splice(index, 1);
  } else {
    selectedMembers.value.push(memberId);
  }
};

/**
 * 移除选中的成员
 */
const removeSelectedMembers = async () => {
  if (selectedMembers.value.length === 0) {
    Taro.showToast({
      title: '请选择要移除的成员',
      icon: 'none'
    });
    return;
  }

  const selectedNames = currentMembers.value
    .filter(m => selectedMembers.value.includes(m.id))
    .map(m => m.nickname)
    .join('、');

  Taro.showModal({
    title: '移除成员',
    content: `确定要移除「${selectedNames}」吗？移除后他们将无法访问家庭信息。`,
    success: async (res) => {
      if (res.confirm) {
        try {
          // 调用移除成员API（创建者移除时传递user_ids）
          const { code } = await deleteFamilyMemberAPI({
            family_id: currentFamily.value.id,
            user_ids: selectedMembers.value
          });

          if (code) {
            // 从当前成员列表中移除选中的成员
            currentMembers.value = currentMembers.value.filter(m => !selectedMembers.value.includes(m.id));

            // 同时更新家庭列表中对应家庭的成员数据
            const familyIndex = familyList.value.findIndex(f => f.id === currentFamily.value.id);
            if (familyIndex !== -1) {
              familyList.value[familyIndex].users = familyList.value[familyIndex].users.filter(
                user => !selectedMembers.value.includes(user.id)
              );
            }

            selectedMembers.value = [];

            Taro.showToast({
              title: '移除成功',
              icon: 'success'
            });
          }
        } catch (error) {
          console.error('移除成员失败:', error);
          Taro.showToast({
            title: '移除失败，请重试',
            icon: 'none'
          });
        }
      }
    }
  });
};

// 页面加载时初始化数据
useDidShow(() => {
  initPageData();
});
</script>

<script>
export default {
  name: 'MyFamily',
};
</script>