import { useState } from 'react'
import { useRouter, useDidShow, useShareAppMessage } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import { useAppSelector } from '@/store/hooks'
import { Navbar } from '@/components/navbar'
import { Loading } from '@/components/loading'
import { StateView } from '@/components/state-view'
import { FamilyCard } from '@/components/family-card'
import { ListRow, ListRowGroup } from '@/components/list-row'
import { Modal } from '@/components/modal'
import { getHomeDetail, getHomeMemberList, joinHome, transferOwner, updateMemberNickName, type HomeInfo, type HomeMember } from '@/api/home'
import { getCareMemberList, type CareMember } from '@/api/careMember'
import { MAX_CARED_PER_FAMILY } from '@/constants/family'
import { ROUTES } from '@/constants/routes'
import { navigateTo, reLaunch } from '@/utils/navigation'
import { showToast } from '@/utils/toast'
import styles from './detail.module.scss'

// Taro 类型未跟进 wx.showModal 的 editable 扩展（微信 2.17.1+），运行时真实存在
interface EditableModalOption extends Taro.showModal.Option {
  editable?: boolean
  placeholderText?: string
}

interface EditableModalResult extends Taro.showModal.SuccessCallbackResult {
  content?: string
}

const showEditableModal = (option: EditableModalOption) =>
  Taro.showModal(option as Taro.showModal.Option) as Promise<EditableModalResult>

// 成员显示名：家庭内昵称优先，未设置回落微信昵称
// 注意 2026-09-23 实测：清空昵称后端返回空串 '' 而非 null，需按空白处理
const memberName = (m: HomeMember): string => m.nickName?.trim() || m.userNickName?.trim() || '成员'

// 关爱对象联系人摘要：最多显示前 2 位姓名，其余以 +N 概括；未填则不显示
const contactsSummary = (c: CareMember): string => {
  const list = c.contacts ?? []
  if (list.length === 0) return ''
  const head = list.slice(0, 2).map((ct) => ct.name).join('、')
  const rest = list.length > 2 ? ` 等 ${list.length} 人` : ''
  return `${head}${rest}`
}

export default function FamilyDetail() {
  const router = useRouter()
  const familyId = router.params.id ?? ''
  const isInviteEnter = router.params.invite === '1'
  const token = useAppSelector((s) => s.auth.token)
  const myUserId = useAppSelector((s) => s.auth.userId)

  const [loading, setLoading] = useState(true)
  const [joining, setJoining] = useState(false)
  const [family, setFamily] = useState<HomeInfo | null>(null)
  const [members, setMembers] = useState<HomeMember[]>([])
  const [caredList, setCaredList] = useState<CareMember[]>([])

  // 转让群主：底部入口仅群主可见，点击后弹选人 Modal
  const [transferOpen, setTransferOpen] = useState(false)
  const [transferring, setTransferring] = useState(false)
  // 改昵称：点击成员行触发
  const [renaming, setRenaming] = useState(false)

  // 拉取家庭数据：详情必须成功；成员/关爱对象列表失败降级为空（受邀者尚未入圈，
  // 这两个接口会报权限错，不能因此把整个页面判成「家庭不存在」）
  // 返回本次拉到的成员列表（供 autoJoin 用最新数据判断，避免 stale state）
  const load = async (): Promise<HomeMember[] | null> => {
    // 分享卡直达本页且未登录：先去登录，登录后回跳本页
    if (!token) {
      const target = encodeURIComponent(`${ROUTES.FAMILY_DETAIL}?id=${familyId}&invite=1`)
      reLaunch(`${ROUTES.LOGIN}?redirect=${target}`)
      return null
    }
    setLoading(true)
    try {
      const home = await getHomeDetail(familyId)
      const [memberList, careList] = await Promise.all([
        getHomeMemberList(familyId).catch(() => [] as HomeMember[]),
        getCareMemberList(familyId).catch(() => [] as CareMember[])
      ])
      setFamily(home)
      setMembers(memberList)
      // 上限判定以关爱对象实际列表为准，家庭卡计数仅展示
      setCaredList(careList)
      return memberList
    } catch {
      setFamily(null)
      return null
    } finally {
      setLoading(false)
    }
  }

  // 从添加表单返回时刷新；受邀进入且尚未是成员时自动加入（跳过手动点击步骤）
  useDidShow(() => {
    load().then((memberList) => {
      if (
        !isInviteEnter || joining || myUserId == null ||
        !memberList || memberList.length === 0 || memberList.some((m) => m.memberId === myUserId)
      ) return
      autoJoin(familyId)
    })
  })

  // 受邀直达：已登录但非成员时自动加入，无需手点
  const autoJoin = async (homeId: string) => {
    if (joining) return
    setJoining(true)
    try {
      await joinHome(homeId)
      showToast('已加入家庭')
      await load()
    } catch (e) {
      // 加入失败（如接口异常）也要让页面可退出：详情能拉到就展示，拉不到走「家庭不存在」分支（带返回按钮）
      showToast(e instanceof Error ? e.message : '加入失败')
      if (!family) await load()
    } finally {
      setJoining(false)
    }
  }

  // 邀请分享：接收方点分享卡直达本页，登录后自动加入
  const inviterName = () => {
    const me = members.find((m) => m.memberId === myUserId)
    return memberName(me ?? members[0])
  }
  useShareAppMessage(() => ({
    title: `${inviterName()} 邀请你加入家庭圈「${family?.name ?? ''}」`,
    path: `${ROUTES.FAMILY_DETAIL}?id=${familyId}&invite=1`
  }))

  const addCared = () => {
    navigateTo(`${ROUTES.FAMILY_CONTACT_ADD}?familyId=${familyId}`)
  }

  // 我在成员列表里的角色：转让入口只对群主开放
  const myMember = members.find((m) => m.memberId === myUserId) ?? null
  const isOwner = myMember?.role === 'OWNER'
  // 注意：成员响应无 userId 字段（2026-09-23 实测），memberId 是家庭圈成员记录 ID，
  // 与登录 userId 不同源，isOwner 恒为 false——仅作未来后端补字段后的预留，勿用于门禁

  // 转让/改昵称入口全开：前端无法可靠识别自己，由后端权威校验
  // （transferOwner 实测已有 400「不能转让给自己」「成员不存在」等完整校验）
  const openTransfer = () => {
    if (transferring) return
    setTransferOpen(true)
  }
  const closeTransfer = () => {
    if (transferring) return
    setTransferOpen(false)
  }
  const doTransfer = async (target: HomeMember) => {
    if (transferring) return
    setTransferring(true)
    try {
      await transferOwner({ memberId: target.memberId })
      showToast('已转让群主')
      setTransferOpen(false)
      await load()
    } catch (e) {
      showToast(e instanceof Error ? e.message : '转让失败')
    } finally {
      setTransferring(false)
    }
  }

  // 点击成员行改昵称：wx.showModal editable 输入框，预填当前昵称
  const renameMember = async (target: HomeMember) => {
    if (renaming) return
    setRenaming(true)
    try {
      const { confirm, content } = await showEditableModal({
        title: '修改群昵称',
        editable: true,
        placeholderText: '请输入新的昵称',
        content: target.nickName ?? ''
      })
      if (!confirm) return
      const next = (content ?? '').trim()
      if (!next) {
        showToast('昵称不能为空')
        return
      }
      if (next === (target.nickName ?? '').trim()) {
        showToast('昵称未变化')
        return
      }
      await updateMemberNickName({ memberId: target.memberId, nickName: next })
      showToast('已修改')
      await load()
    } catch (e) {
      showToast(e instanceof Error ? e.message : '修改失败')
    } finally {
      setRenaming(false)
    }
  }

  if (loading) {
    return (
      <View className={styles.page}>
        <Navbar title="关爱对象信息" variant="hero" />
        <View className={styles.stateWrap}><Loading /></View>
      </View>
    )
  }

  if (!family) {
    return (
      <View className={styles.page}>
        <Navbar title="关爱对象信息" variant="hero" />
        <StateView
          status="error"
          mode="list"
          text="无法获取家庭信息"
          retryText="重新加载"
          onRetry={() => load()}
        />
        {/* 分享卡直达时页面栈只有本页，navigateBack 无处可退会卡死——退回首页 */}
        <View className={styles.fallbackBtn} hoverClass={styles.fallbackBtnPressed} onClick={() => reLaunch(ROUTES.HOME)}>
          <Text className={styles.fallbackBtnText}>回首页</Text>
        </View>
      </View>
    )
  }

  const caredCount = caredList.length
  const canAdd = caredCount < MAX_CARED_PER_FAMILY
  const stub = (tip: string) => () => showToast(tip)

  return (
    <View className={styles.page}>
      <Navbar title="关爱对象信息" variant="hero" />

      <View className={styles.body}>
        <FamilyCard family={family} />

        {/* 添加关爱对象卡：达上限后整卡隐藏（占位无意义），上限信息改由标题计数表达 */}
        {canAdd && (
          <View
            className={styles.addCared}
            hoverClass={styles.addCaredPressed}
            onClick={addCared}
          >
            <View className={styles.addCaredIcon}>
              <Text className={styles.addCaredIconText}>+</Text>
            </View>
            <Text className={styles.addCaredText}>+ 最多可添加 {MAX_CARED_PER_FAMILY} 人</Text>
          </View>
        )}

        <View className={styles.section}>
          <View className={styles.sectionTitleRow}>
            <Text className={styles.sectionTitle}>关爱对象</Text>
            <Text className={styles.sectionCount}>
              {caredCount}/{MAX_CARED_PER_FAMILY}
            </Text>
          </View>
          {caredCount === 0 ? (
            <Text className={styles.sectionEmpty}>暂无关爱对象，点击上方卡片添加</Text>
          ) : (
            <ListRowGroup>
              {caredList.map((c) => (
                <ListRow
                  key={c.memberId}
                  label={c.name}
                  value={contactsSummary(c)}
                  arrow
                  onClick={() =>
                    navigateTo(`${ROUTES.FAMILY_CONTACT_DETAIL}?familyId=${familyId}&memberId=${c.memberId}`)
                  }
                />
              ))}
            </ListRowGroup>
          )}
        </View>

        <View className={styles.section}>
          <Text className={styles.sectionTitle}>家庭成员</Text>
          {members.length === 0 ? (
            <Text className={styles.sectionEmpty}>暂无其他成员</Text>
          ) : (
            <ListRowGroup>
              {members.map((m) => (
                <ListRow
                  key={m.memberId}
                  label={memberName(m)}
                  value={m.role === 'OWNER' ? '群主' : undefined}
                  valueClass={styles.valueTag}
                  arrow
                  onClick={() => renameMember(m)}
                />
              ))}
            </ListRowGroup>
          )}
        </View>

        <View className={styles.section}>
          <ListRowGroup>
            <ListRow label="家庭编号" value={family.homeId} onClick={stub('复制成功（占位）')} arrow />
            {/* open-type=share 的 Button 铺满整行做命中区，样式与普通 ListRow 一致 */}
            <Button
              className={styles.shareRow}
              hoverClass={styles.shareRowPressed}
              openType="share"
            >
              <Text className={styles.shareLabel}>邀请他人</Text>
              <Text className={styles.shareArrow}>›</Text>
            </Button>
            <ListRow label="转让群主" arrow onClick={openTransfer} />
          </ListRowGroup>
        </View>
      </View>

      {/* 转让群主选人弹层：全部成员可选（含自己），后端对「转让给自己」返回 400 由 toast 透出 */}
      <Modal visible={transferOpen} onClose={closeTransfer}>
        <Text className={styles.transferTitle}>转让群主给谁？</Text>
        <View className={styles.transferList}>
          {members.length === 0 ? (
            <Text className={styles.transferEmpty}>暂无可转让的成员</Text>
          ) : (
            members.map((m) => (
              <View
                key={m.memberId}
                className={styles.transferItem}
                hoverClass={styles.transferItemPressed}
                onClick={() => doTransfer(m)}
              >
                <Text className={styles.transferItemName}>{memberName(m)}</Text>
                <Text className={styles.transferItemMeta}>
                  {m.role === 'OWNER' ? '群主' : '成员'} · 群昵称：{m.nickName || '未设置'}
                </Text>
              </View>
            ))
          )}
        </View>
        <View className={styles.transferCancel} hoverClass={styles.transferCancelPressed} onClick={closeTransfer}>
          <Text className={styles.transferCancelText}>取消</Text>
        </View>
      </Modal>
    </View>
  )
}