<template>
  <view>
    <view class="back-link" @click="$emit('navigate', 'user')">‹ 返回用户列表</view>

    <view class="page-card" v-if="user">
      <view class="page-header">
        <text class="page-title">👥 用户详情 - {{ user.nickname || user.user_id }}</text>
        <view class="header-actions">
          <button class="btn-default btn-sm" v-if="user.devices && user.devices.length > 0" @click="onUnbindAll">解绑全部设备</button>
          <button class="btn-danger btn-sm" v-if="user.status !== 3" @click="onDeactivate">注销用户</button>
        </view>
      </view>

      <view class="user-profile">
        <view class="avatar">👤</view>
        <view class="profile-info">
          <text class="user-name">{{ user.nickname || '-' }}</text>
          <text class="user-phone">{{ user.phone || '-' }}</text>
          <view class="profile-badges">
            <text :class="statusBadge(user.status)">{{ statusText(user.status) }}</text>
            <text :class="user.subscription_status === 1 ? 'badge badge-success' : 'badge badge-default'">{{ subStatusText(user.subscription_status) }}</text>
          </view>
        </view>
      </view>

      <view class="stats-row">
        <view class="stat-item pink-bg">
          <text class="stat-value">{{ user.treatment_count || 0 }}</text>
          <text class="stat-label">使用次数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ user.total_duration ? Math.round(user.total_duration / 3600000) + 'h' : '0h' }}</text>
          <text class="stat-label">累计时长</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">¥{{ user.total_spent || 0 }}</text>
          <text class="stat-label">累计消费</text>
        </view>
      </view>
    </view>

    <view class="page-card" v-if="user">
      <view class="card-title">基本信息</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="info-label">用户状态</text>
          <text class="info-value"><text :class="statusBadge(user.status)">{{ statusText(user.status) }}</text></text>
        </view>
        <view class="info-item">
          <text class="info-label">绑定设备</text>
          <text class="info-value">{{ user.devices && user.devices.length > 0 ? user.devices[0].device_name || user.devices[0].device_id : '无' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">注册时间</text>
          <text class="info-value">{{ formatDate(user.created_at) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">订阅类型</text>
          <text class="info-value">{{ subTypeText(user.subscription_type) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">订阅到期</text>
          <text class="info-value">{{ formatDate(user.subscription_expire) }}</text>
        </view>
      </view>
    </view>

    <view class="page-card" v-if="user && user.devices && user.devices.length > 0">
      <view class="card-title">绑定设备</view>
      <view class="data-table">
        <view class="t-header">
          <view class="t-row">
            <text class="t-th flex2">设备编号</text>
            <text class="t-th flex2">设备名称</text>
            <text class="t-th flex1">操作</text>
          </view>
        </view>
        <view class="t-body">
          <view class="t-row" v-for="device in user.devices" :key="device.device_id">
            <text class="t-td flex2">{{ device.device_id }}</text>
            <text class="t-td flex2">{{ device.device_name || '-' }}</text>
            <text class="t-td flex1">
              <text class="action-link" @click="onDeviceDetail(device)">详情</text>
              <text class="action-link danger-link" @click="onUnbindDevice(device)">解绑</text>
            </text>
          </view>
        </view>
      </view>
    </view>

    <view class="page-card" v-if="user && user.recent_treatments">
      <view class="card-title">使用记录</view>
      <view class="data-table">
        <view class="t-header">
          <view class="t-row">
            <text class="t-th flex2">时间</text>
            <text class="t-th flex1">时长</text>
            <text class="t-th flex2">设备</text>
          </view>
        </view>
        <view class="t-body">
          <view class="t-row" v-for="(t, idx) in user.recent_treatments" :key="idx">
            <text class="t-td flex2">{{ formatDate(t.start_time) }}</text>
            <text class="t-td flex1">{{ Math.floor((t.total_duration_ms || 0) / 60000) }}分钟</text>
            <text class="t-td flex2">{{ t.device_id || '-' }}</text>
          </view>
        </view>
      </view>
      <view class="view-all" v-if="user.treatment_count > 5">
        <text class="view-all-link" @click="goRecords">查看全部{{ user.treatment_count }}条记录 ›</text>
      </view>
    </view>
  </view>
</template>

<script>
import { get, post } from '../utils/request'
import { formatDateShort } from '../utils/format'

export default {
  props: {
    user_id: { type: String, default: '' }
  },
  data() {
    return {
      user: null,
      userId: ''
    }
  },
  watch: {
    user_id: {
      immediate: true,
      handler(val) {
        if (val) {
          this.userId = val
          this.loadUser()
        }
      }
    }
  },
  methods: {
    async loadUser() {
      try {
        this.user = await get('/api/v1/admin/users/' + this.userId)
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    goRecords() {
      this.$emit('navigate', 'record', { user_id: this.userId })
    },
    onDeviceDetail(device) {
      this.$emit('navigate', 'device-detail', { device_id: device.device_id })
    },
    onUnbindDevice(device) {
      var self = this
      uni.showModal({
        title: '确认解绑',
        content: '确定要解绑设备 ' + device.device_id + ' 吗？',
        success: async function (res) {
          if (!res.confirm) return
          try {
            await post('/api/v1/admin/users/' + self.userId + '/unbind', { device_id: device.device_id })
            uni.showToast({ title: '解绑成功', icon: 'success' })
            self.loadUser()
          } catch (e) {
            uni.showToast({ title: '解绑失败', icon: 'none' })
          }
        }
      })
    },
    onUnbindAll() {
      var self = this
      uni.showModal({
        title: '确认解绑',
        content: '确定要解绑该用户当前绑定的全部设备吗？',
        success: async function (res) {
          if (!res.confirm) return
          try {
            await post('/api/v1/admin/users/' + self.userId + '/unbind', {})
            uni.showToast({ title: '解绑成功', icon: 'success' })
            self.loadUser()
          } catch (e) {
            uni.showToast({ title: '解绑失败', icon: 'none' })
          }
        }
      })
    },
    onDeactivate() {
      var self = this
      uni.showModal({
        title: '确认注销',
        content: '注销后该用户将无法继续登录，当前绑定设备也会被解绑。确定继续吗？',
        success: async function (res) {
          if (!res.confirm) return
          try {
            await post('/api/v1/admin/users/' + self.userId + '/deactivate', {})
            uni.showToast({ title: '已注销', icon: 'success' })
            self.loadUser()
          } catch (e) {
            uni.showToast({ title: '注销失败', icon: 'none' })
          }
        }
      })
    },
    statusText(status) {
      const map = { 1: '正常', 2: '禁用', 3: '已注销' }
      return map[status] || '未知'
    },
    statusBadge(status) {
      const map = { 1: 'badge badge-success', 2: 'badge badge-warning', 3: 'badge badge-error' }
      return map[status] || 'badge badge-default'
    },
    subStatusText(status) {
      return status === 1 ? '已订阅' : '未订阅'
    },
    subTypeText(type) {
      const map = { yearly: '年卡', monthly: '月卡', trial: '试用' }
      return map[type] || '-'
    },
    formatDate: formatDateShort
  }
}
</script>

<style scoped>
@import '../styles/common.css';

.back-link {
  color: #E6508C;
  font-size: 14px;
  margin-bottom: 16px;
  cursor: pointer;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.user-phone {
  font-size: 14px;
  color: #999;
}

.profile-badges {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.stats-row {
  display: flex;
  gap: 16px;
}

.stat-item {
  flex: 1;
  background: #fafafa;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.stat-item.pink-bg {
  background: #fff0f6;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.pink-bg .stat-value {
  color: #E6508C;
}

.stat-label {
  font-size: 13px;
  color: #999;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-label {
  font-size: 13px;
  color: #999;
}

.info-value {
  font-size: 14px;
  color: #333;
}

.view-all {
  text-align: center;
  margin-top: 16px;
}

.view-all-link {
  color: #E6508C;
  font-size: 14px;
  cursor: pointer;
}

.danger-link {
  color: #ff4d4f;
}
</style>
