import { View, Text, Image, Input } from '@tarojs/components'
import { useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { clearToken, getToken } from '@/services/auth'
import {
  BindingListItem,
  clearSelectedBindingDeviceId,
  loadCurrentChildBindingContext,
  setSelectedBindingDeviceId,
  unbindDevice,
} from '@/services/binding'
import { Child, clearSelectedChildId, createChild, setSelectedChildId, updateChild } from '@/services/child'
import { DeviceFirmwareStatus, getDeviceFirmwareStatus, startDeviceFirmwareUpdate } from '@/services/device'
import { useSystemBanner } from '@/components/system-banner/use-system-banner'
import './index.scss'

interface MenuItem {
  icon: string
  iconBgClass: string
  name: string
  value: string
  arrow?: boolean
  disabled?: boolean
}

export default function Sleep() {
  const systemBanner = useSystemBanner()
  const [loading, setLoading] = useState(true)
  const [children, setChildren] = useState<Child[]>([])
  const [bindings, setBindings] = useState<BindingListItem[]>([])
  const [binding, setBinding] = useState<BindingListItem | null>(null)
  const [currentChild, setCurrentChild] = useState<Child | null>(null)
  const [firmwareStatus, setFirmwareStatus] = useState<DeviceFirmwareStatus | null>(null)
  const [isLoadingFirmware, setIsLoadingFirmware] = useState(false)
  const [isUpdatingFirmware, setIsUpdatingFirmware] = useState(false)
  const [showModal, setShowModal] = useState(false)
  const [showChildModal, setShowChildModal] = useState(false)
  const [modalType, setModalType] = useState<'add' | 'edit'>('add')
  const [childName, setChildName] = useState('')
  const [editingChildId, setEditingChildId] = useState<number | null>(null)
  const [parentInfo, setParentInfo] = useState<{ nickname?: string; avatar_url?: string }>({})

  useDidShow(() => {
    void loadData()
  })

  const loadData = async () => {
    if (!getToken()) {
      Taro.reLaunch({ url: '/pages/login/index' })
      return
    }

    setLoading(true)
    try {
      const context = await loadCurrentChildBindingContext()
      const nextBinding = (context.currentBinding as BindingListItem | null) || null
      setChildren(context.children)
      setBindings(context.bindings as BindingListItem[])
      setCurrentChild(context.currentChild)
      setBinding(nextBinding)
      setParentInfo(Taro.getStorageSync('userInfo') || {})
      void loadFirmwareStatus(nextBinding?.device_id)
    } catch (error: any) {
      console.error('[manage] load failed:', error)
      Taro.showToast({
        title: error?.message || '加载失败，请稍后重试',
        icon: 'none',
      })
    } finally {
      setLoading(false)
    }
  }

  const currentChildName = currentChild?.child_name || '未设置'

  const loadFirmwareStatus = async (deviceId?: string | null) => {
    const normalizedDeviceId = String(deviceId || '').trim()
    if (!normalizedDeviceId) {
      setFirmwareStatus(null)
      setIsLoadingFirmware(false)
      return
    }

    setIsLoadingFirmware(true)
    try {
      const nextFirmwareStatus = await getDeviceFirmwareStatus(normalizedDeviceId)
      setFirmwareStatus(nextFirmwareStatus)
    } catch (error: any) {
      console.error('[manage] firmware load failed:', error)
      setFirmwareStatus(null)
      Taro.showToast({
        title: error?.message || '系统更新状态加载失败',
        icon: 'none',
      })
    } finally {
      setIsLoadingFirmware(false)
    }
  }

  const handleOpenModal = (type: 'add' | 'edit', child?: Child) => {
    setModalType(type)
    setChildName(child?.child_name || '')
    setEditingChildId(child?.child_id || null)
    setShowModal(true)
  }

  const handleCloseModal = () => {
    setShowModal(false)
    setChildName('')
    setEditingChildId(null)
  }

  const handleSelectChild = (child: Child) => {
    setSelectedChildId(child.child_id)
    const nextBinding = bindings.find((item) => item.child_id === child.child_id) || null
    if (nextBinding?.device_id) {
      setSelectedBindingDeviceId(nextBinding.device_id)
    } else {
      clearSelectedBindingDeviceId()
    }
    setCurrentChild(child)
    setBinding(nextBinding)
    void loadFirmwareStatus(nextBinding?.device_id)
    setShowChildModal(false)
    Taro.showToast({
      title: '已切换当前孩子',
      icon: 'success',
    })
  }

  const handleOpenAddChildFromSwitch = () => {
    setShowChildModal(false)
    handleOpenModal('add')
  }

  const handleSubmitModal = async () => {
    const normalizedName = childName.trim()
    if (!normalizedName) {
      Taro.showToast({ title: '请输入儿童昵称', icon: 'none' })
      return
    }

    try {
      if (modalType === 'add') {
        const createdChild = await createChild({ child_name: normalizedName })
        setSelectedChildId(createdChild.child_id)
        Taro.showToast({ title: '创建成功', icon: 'success' })
      } else if (editingChildId) {
        await updateChild(editingChildId, { child_name: normalizedName })
        Taro.showToast({ title: '修改成功', icon: 'success' })
      }

      handleCloseModal()
      await loadData()
    } catch (error: any) {
      console.error('[manage] save child failed:', error)
      Taro.showToast({
        title: error?.message || '保存失败，请重试',
        icon: 'none',
      })
    }
  }

  const handleStartFirmwareUpdate = () => {
    if (!binding?.device_id || !firmwareStatus?.can_update || isLoadingFirmware || isUpdatingFirmware) return

    Taro.showModal({
      title: '系统更新',
      content: `确定要更新当前设备 ${binding.device_id} 吗？`,
      confirmText: '更新',
      confirmColor: '#16A34A',
      success: async (result) => {
        if (!result.confirm || !binding?.device_id) return

        setIsUpdatingFirmware(true)
        try {
          const nextFirmwareStatus = await startDeviceFirmwareUpdate(binding.device_id)
          setFirmwareStatus(nextFirmwareStatus)
          Taro.showToast({
            title: '更新指令已发送',
            icon: 'success',
          })
        } catch (error: any) {
          Taro.showToast({
            title: error?.message || '更新失败，请重试',
            icon: 'none',
          })
        } finally {
          setIsUpdatingFirmware(false)
        }
      },
    })
  }

  const handleUnbind = () => {
    if (!binding) return

    Taro.showModal({
      title: '解除设备绑定',
      content: `确定要解除 ${currentChildName} 当前绑定的设备吗？`,
      confirmColor: '#FF8C42',
      success: async (result) => {
        if (!result.confirm) return

        try {
          await unbindDevice(binding.device_id)
          clearSelectedBindingDeviceId()
          Taro.showToast({ title: '已解绑', icon: 'success' })
          await loadData()
        } catch (error: any) {
          Taro.showToast({
            title: error?.message || '解绑失败，请重试',
            icon: 'none',
          })
        }
      },
    })
  }

  const handleLogout = () => {
    Taro.showModal({
      title: '退出登录',
      content: '确定要退出当前账号吗？',
      confirmColor: '#FF8C42',
      success: (result) => {
        if (!result.confirm) return
        clearToken()
        clearSelectedBindingDeviceId()
        clearSelectedChildId()
        Taro.removeStorageSync('userInfo')
        Taro.reLaunch({ url: '/pages/login/index' })
      },
    })
  }

  const handleMenuClick = (item: MenuItem) => {
    if (item.disabled) return

    if (item.name === '当前孩子') {
      setShowChildModal(true)
      return
    }

    if (item.name === '编辑当前孩子') {
      if (currentChild) {
        handleOpenModal('edit', currentChild)
      } else {
        handleOpenModal('add')
      }
      return
    }

    if (item.name === '新增孩子') {
      handleOpenModal('add')
      return
    }

    if (item.name === '绑定设备') {
      if (!currentChild) {
        handleOpenModal('add')
        Taro.showToast({
          title: '请先添加儿童资料',
          icon: 'none',
        })
        return
      }
      Taro.navigateTo({ url: '/pages/bind/index' })
      return
    }

    if (item.name === '解除设备绑定') {
      handleUnbind()
    }
  }

  if (loading) {
    return (
      <View className='manage-page'>
        <View className='loading'>
          <Text>加载中...</Text>
        </View>
        {systemBanner}
      </View>
    )
  }

  const parentDisplayName = parentInfo.nickname?.trim() || '家长'
  const currentFirmwareLabel = firmwareStatus?.current_version || '--'
  const latestFirmwareLabel = firmwareStatus?.latest_version || '--'
  const canUpdateFirmware = Boolean(binding?.device_id && firmwareStatus?.can_update && !isLoadingFirmware && !isUpdatingFirmware)
  const firmwareActionText = isLoadingFirmware ? '查询中' : isUpdatingFirmware ? '发送中' : '更新'
  const firmwareSubtitle = !binding?.device_id
    ? '绑定设备后可查看系统版本'
    : isLoadingFirmware
      ? '正在查询当前设备版本'
      : firmwareStatus?.update_available
        ? '发现可更新版本'
        : '当前设备版本状态'
  const menuItems: MenuItem[] = [
    {
      icon: require('../../assets/tab-icons/orange-robot.png'),
      iconBgClass: 'orange',
      name: '当前孩子',
      value: currentChildName,
      arrow: true,
    },
    {
      icon: require('../../assets/tab-icons/orange-robot.png'),
      iconBgClass: 'orange',
      name: '新增孩子',
      value: '',
      arrow: true,
    },
    {
      icon: require('../../assets/tab-icons/orange-robot.png'),
      iconBgClass: 'orange',
      name: '编辑当前孩子',
      value: '',
      arrow: true,
    },
    {
      icon: require('../../assets/tab-icons/rings.png'),
      iconBgClass: 'green',
      name: '绑定设备',
      value: binding?.device_id ? `当前: ${binding.device_id}` : '未绑定',
      arrow: true,
    },
    {
      icon: require('../../assets/tab-icons/broken-rings.png'),
      iconBgClass: 'red',
      name: '解除设备绑定',
      value: binding?.device_id ? `当前: ${binding.device_id}` : '',
      arrow: true,
      disabled: !binding,
    },
  ]

  return (
    <View className='manage-page'>
      <View className='page-header'>
        <Text className='page-title'>设置与管理</Text>
      </View>

      <View className='user-card'>
        <View className='user-avatar'>
          {parentInfo.avatar_url ? (
            <Image className='avatar-img image-avatar' src={parentInfo.avatar_url} mode='aspectFill' />
          ) : (
            <Text className='avatar-img'>👤</Text>
          )}
        </View>
        <View className='user-info'>
          <Text className='user-name'>{parentDisplayName}</Text>
        </View>
        <View className='verified-badge'>
          <Text>{currentChild ? '已选择当前孩子' : '未选择孩子'}</Text>
        </View>
      </View>

      <View className='summary-card'>
        <View className='summary-row'>
          <Text className='summary-label'>儿童资料数</Text>
          <Text className='summary-value'>{children.length} 个</Text>
        </View>
        <View className='summary-row'>
          <Text className='summary-label'>当前儿童</Text>
          <Text className='summary-value'>{currentChildName}</Text>
        </View>
        <View className='summary-row'>
          <Text className='summary-label'>当前设备</Text>
          <Text className='summary-value'>{binding?.device_id || '未绑定'}</Text>
        </View>
      </View>

      <View className={`system-update-card ${binding?.device_id ? '' : 'disabled'}`}>
        <View className='system-update-header'>
          <View className='system-update-heading'>
            <Text className='system-update-title'>系统更新</Text>
            <Text className='system-update-subtitle'>{firmwareSubtitle}</Text>
          </View>
          <View
            className={`system-update-action ${canUpdateFirmware ? '' : 'disabled'}`}
            onClick={canUpdateFirmware ? handleStartFirmwareUpdate : undefined}
          >
            <Text className='system-update-action-text'>{firmwareActionText}</Text>
          </View>
        </View>
        <View className='system-update-body'>
          <View className='system-update-row'>
            <Text className='system-update-label'>当前设备</Text>
            <Text className='system-update-value'>{binding?.device_id || '未绑定'}</Text>
          </View>
          <View className='system-update-row'>
            <Text className='system-update-label'>当前版本</Text>
            <Text className='system-update-value'>{currentFirmwareLabel}</Text>
          </View>
          <View className='system-update-row'>
            <Text className='system-update-label'>最新版本</Text>
            <Text className='system-update-value highlight'>{latestFirmwareLabel}</Text>
          </View>
        </View>
      </View>

      <View className='menu-card'>
        {menuItems.map((item, index) => (
          <View key={index}>
            <View className={`menu-item ${item.disabled ? 'disabled' : ''}`} onClick={() => handleMenuClick(item)}>
              <View className='menu-left'>
                <View className={`icon-bg ${item.iconBgClass}`}>
                  <Image className='control-icon-img' src={item.icon} mode='aspectFit' />
                </View>
                <Text className='menu-name'>{item.name}</Text>
              </View>
              <View className='menu-right'>
                {item.value && <Text className='menu-value'>{item.value}</Text>}
                {item.arrow && <Text className='arrow'>›</Text>}
              </View>
            </View>
            {index < menuItems.length - 1 && <View className='divider'></View>}
          </View>
        ))}
      </View>

      <View className='logout-section'>
        <View className='logout-btn' onClick={handleLogout}>
          <Text className='logout-text'>退出登录</Text>
        </View>
      </View>

      <View className='version-info'>
        <Text className='version-text'>伴伴 Companion V1.1.0</Text>
      </View>

      {showChildModal && (
        <View className='modal-mask' onClick={() => setShowChildModal(false)}>
          <View
            className='modal-card device-switch-card'
            onClick={(event) => {
              event.stopPropagation()
            }}
          >
            <Text className='modal-title'>切换当前孩子</Text>
            {children.length === 0 ? (
              <Text className='device-switch-empty'>当前还没有儿童资料</Text>
            ) : (
              <View className='device-switch-list'>
                {children.map((item) => {
                  const isActive = currentChild?.child_id === item.child_id
                  const itemBinding = bindings.find((bindingItem) => bindingItem.child_id === item.child_id) || null
                  return (
                    <View
                      key={item.child_id}
                      className={`device-switch-item ${isActive ? 'active' : ''}`}
                      onClick={() => handleSelectChild(item)}
                    >
                      <View className='device-switch-head'>
                        <Text className='device-switch-id'>{item.child_name}</Text>
                        {isActive && <Text className='device-switch-tag'>当前</Text>}
                      </View>
                      <Text className='device-switch-name'>{itemBinding?.device_id || '未绑定设备'}</Text>
                    </View>
                  )
                })}
              </View>
            )}
            <View className='device-switch-footer'>
              <Text className='device-switch-add' onClick={handleOpenAddChildFromSwitch}>
                + 新增孩子
              </Text>
            </View>
            <View className='modal-actions'>
              <Text className='modal-action cancel' onClick={() => setShowChildModal(false)}>
                关闭
              </Text>
            </View>
          </View>
        </View>
      )}

      {showModal && (
        <View className='modal-mask'>
          <View className='modal-card'>
            <Text className='modal-title'>{modalType === 'add' ? '新建儿童资料' : '修改儿童昵称'}</Text>
            <View className='modal-input-wrap'>
              <Input
                className='modal-input'
                value={childName}
                placeholder='请输入儿童昵称'
                focus
                onInput={(event) => setChildName(event.detail.value)}
              />
            </View>
            <View className='modal-actions'>
              <Text className='modal-action cancel' onClick={handleCloseModal}>
                取消
              </Text>
              <Text className='modal-action confirm' onClick={handleSubmitModal}>
                确认
              </Text>
            </View>
          </View>
        </View>
      )}
      {systemBanner}
    </View>
  )
}