<template>
  <view class="page">
    <!-- 导航栏 -->
    <NavBar title="客户详情" :showBack="true" />

    <!-- 客户信息卡片 -->
    <view class="info-section">
      <view class="info-card">
        <view class="info-header">
          <view class="info-avatar">
            <text class="avatar-text">{{ getAvatarText(customer.nickname) }}</text>
          </view>
          <view class="info-main">
            <text class="customer-name">{{ customer.nickname || '未命名用户' }}</text>
            <view class="status-tag" :class="getStatusClass(customer.status)">
              <text>{{ getStatusText(customer.status) }}</text>
            </view>
          </view>
        </view>

        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">手机号</text>
            <text class="info-value">{{ formatPhone(customer.phone) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">信用分</text>
            <text class="info-value" :class="getCreditClass(customer.creditScore)">{{ customer.creditScore || 0 }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">注册时间</text>
            <text class="info-value">{{ formatDate(customer.createTime) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">用户ID</text>
            <text class="info-value id">{{ customer.id }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <view class="action-card">
        <text class="action-title">账户操作</text>
        <view class="action-list">
          <view class="action-item" @click="handleToggleStatus">
            <view class="action-icon" :class="customer.status === 1 ? 'warning' : 'success'">
              <view class="icon-status"></view>
            </view>
            <view class="action-content">
              <text class="action-name">{{ customer.status === 1 ? '禁用账户' : '启用账户' }}</text>
              <text class="action-desc">{{ customer.status === 1 ? '禁止该用户下单' : '恢复该用户正常使用' }}</text>
            </view>
            <view class="action-arrow"></view>
          </view>

          <view class="action-item" @click="showCreditModal = true">
            <view class="action-icon primary">
              <view class="icon-credit"></view>
            </view>
            <view class="action-content">
              <text class="action-name">调整信用分</text>
              <text class="action-desc">修改用户信用评分</text>
            </view>
            <view class="action-arrow"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <view class="loading-spinner"></view>
      <text>加载中...</text>
    </view>

    <!-- 信用分调整弹窗 -->
    <view class="modal-overlay" v-if="showCreditModal" @click="showCreditModal = false">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">调整信用分</text>
        </view>
        <view class="modal-body">
          <text class="modal-label">当前信用分: {{ customer.creditScore || 0 }}</text>
          <input
            class="modal-input"
            v-model="newCreditScore"
            type="number"
            placeholder="请输入新的信用分"
            placeholder-class="input-placeholder"
          />
        </view>
        <view class="modal-footer">
          <button class="btn-cancel" @click="showCreditModal = false">取消</button>
          <button class="btn-confirm" @click="handleUpdateCredit">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { logger } from '@/utils/logger';
import NavBar from '@/components/NavBar.vue';
import { getCustomerDetail, updateCustomerStatus, updateCustomerCredit } from '@/api/customer';
import { UserStatus, UserStatusText } from '@/utils/constants';
import { showConfirm, showToast } from '@/utils/common';

const customer = ref<any>({});
const loading = ref(false);
const showCreditModal = ref(false);
const newCreditScore = ref('');

const getStatusText = (status: number) => UserStatusText[status] || '未知';

const getStatusClass = (status: number) => {
  return status === UserStatus.ENABLED ? 'enabled' : 'disabled';
};

const getAvatarText = (nickname: string) => {
  if (!nickname) return '?';
  return nickname.charAt(0).toUpperCase();
};

const formatPhone = (phone: string) => {
  if (!phone) return '未绑定手机号';
  if (phone.length === 11) {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  }
  return phone;
};

const formatDate = (dateStr: string) => {
  if (!dateStr) return '-';
  const date = new Date(dateStr);
  if (isNaN(date.getTime())) return dateStr;
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

const getCreditClass = (score: number) => {
  if (score == null) return 'medium';
  if (score >= 80) return 'high';
  if (score >= 60) return 'medium';
  return 'low';
};

const loadCustomerDetail = async () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const customerId = (currentPage as any).options?.id;
  if (!customerId) {
    showToast('客户ID不存在', 'error');
    return;
  }

  loading.value = true;
  try {
    const res = await getCustomerDetail(customerId);
    customer.value = res || {};
  } catch (error) {
    logger.warn('加载客户详情失败', error);
    showToast('加载客户详情失败', 'error');
  } finally {
    loading.value = false;
  }
};

const handleToggleStatus = async () => {
  const newStatus = customer.value.status === UserStatus.ENABLED ? UserStatus.DISABLED : UserStatus.ENABLED;
  const actionText = newStatus === UserStatus.DISABLED ? '禁用' : '启用';

  const confirmed = await showConfirm(`确认${actionText}该客户账户？`);
  if (!confirmed) return;

  try {
    await updateCustomerStatus(customer.value.id, newStatus);
    customer.value.status = newStatus;
    showToast(`${actionText}成功`, 'success');
  } catch (error) {
    logger.warn('更新客户状态失败', error);
    showToast('操作失败', 'error');
  }
};

const handleUpdateCredit = async () => {
  const score = parseInt(newCreditScore.value);
  if (isNaN(score) || score < 0 || score > 100) {
    showToast('请输入0-100之间的有效分数', 'error');
    return;
  }

  try {
    await updateCustomerCredit(customer.value.id, score);
    customer.value.creditScore = score;
    showCreditModal.value = false;
    newCreditScore.value = '';
    showToast('信用分更新成功', 'success');
  } catch (error) {
    logger.warn('更新信用分失败', error);
    showToast('操作失败', 'error');
  }
};

onMounted(() => {
  loadCustomerDetail();
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: $bg-color-page;
  padding-bottom: 40rpx;
}

/* 信息卡片 */
.info-section {
  padding: 16rpx 24rpx;
}

.info-card {
  background: $bg-color-card;
  border: 1rpx solid $border-color;
  border-radius: 20rpx;
  padding: 32rpx;
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.info-avatar {
  width: 100rpx;
  height: 100rpx;
  background: $success-color-bg;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;

  .avatar-text {
    font-size: 40rpx;
    font-weight: 700;
    color: $primary-color;
  }
}

.info-main {
  flex: 1;

  .customer-name {
    display: block;
    font-size: 34rpx;
    font-weight: 700;
    color: $text-color-primary;
    margin-bottom: 8rpx;
  }
}

.status-tag {
  display: inline-flex;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 22rpx;
  font-weight: 500;

  &.enabled {
    background: $success-color-bg;
    color: $primary-color;
  }

  &.disabled {
    background: $error-color-bg;
    color: $error-color;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  background: $bg-color-page;
  border-radius: 12rpx;
  padding: 20rpx;
}

.info-item {
  .info-label {
    display: block;
    font-size: 22rpx;
    color: $text-color-muted;
    margin-bottom: 4rpx;
  }

  .info-value {
    font-size: 28rpx;
    color: $text-color-primary;
    font-weight: 500;

    &.high { color: $primary-color; }
    &.medium { color: $accent-color; }
    &.low { color: $error-color; }
    &.id { font-size: 22rpx; color: $text-color-tertiary; font-family: monospace; }
  }
}

/* 操作区域 */
.action-section {
  padding: 0 24rpx;
}

.action-card {
  background: $bg-color-card;
  border: 1rpx solid $border-color;
  border-radius: 20rpx;
  overflow: hidden;

  .action-title {
    display: block;
    padding: 20rpx 24rpx 12rpx;
    font-size: 24rpx;
    color: $text-color-muted;
    font-weight: 600;
  }
}

.action-list {
  .action-item {
    display: flex;
    align-items: center;
    padding: 20rpx 24rpx;
    border-bottom: 1rpx solid $bg-color-secondary;
    transition: background 0.15s;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background: $bg-color-page;
    }
  }
}

.action-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  flex-shrink: 0;

  &.warning { background: $accent-color-bg; }
  &.success { background: $success-color-bg; }
  &.primary { background: $info-color-bg; }

  .icon-status {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    border: 3rpx solid $accent-color;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8rpx;
      height: 8rpx;
      background: $accent-color;
      border-radius: 50%;
    }
  }

  .icon-credit {
    width: 20rpx;
    height: 20rpx;
    border: 3rpx solid $info-color;
    border-radius: 50%;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 3rpx;
      height: 10rpx;
      background: $info-color;
    }

    &::after {
      content: '';
      position: absolute;
      top: 4rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 3rpx;
      height: 3rpx;
      background: $info-color;
      border-radius: 50%;
    }
  }
}

.action-content {
  flex: 1;

  .action-name {
    display: block;
    font-size: 30rpx;
    color: $text-color-primary;
    font-weight: 500;
    margin-bottom: 2rpx;
  }

  .action-desc {
    font-size: 24rpx;
    color: $text-color-muted;
  }
}

.action-arrow {
  width: 12rpx;
  height: 12rpx;
  border-top: 3rpx solid $text-color-placeholder;
  border-right: 3rpx solid $text-color-placeholder;
  transform: rotate(45deg);
  margin-left: 12rpx;
  flex-shrink: 0;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: $text-color-muted;
  font-size: 28rpx;

  .loading-spinner {
    width: 48rpx;
    height: 48rpx;
    border: 4rpx solid $border-color;
    border-top-color: $primary-color;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16rpx;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48rpx;
}

.modal-content {
  width: 100%;
  background: $bg-color-card;
  border-radius: 20rpx;
  overflow: hidden;

  .modal-header {
    padding: 24rpx;
    border-bottom: 1rpx solid $bg-color-secondary;

    .modal-title {
      font-size: 32rpx;
      font-weight: 600;
      color: $text-color-primary;
    }
  }

  .modal-body {
    padding: 24rpx;

    .modal-label {
      display: block;
      font-size: 26rpx;
      color: $text-color-tertiary;
      margin-bottom: 16rpx;
    }

    .modal-input {
      width: 100%;
      height: 88rpx;
      background: $bg-color-page;
      border: 2rpx solid $border-color;
      border-radius: 12rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: $text-color-primary;
      box-sizing: border-box;
    }
  }

  .modal-footer {
    display: flex;
    padding: 16rpx 24rpx 24rpx;
    gap: 12rpx;

    button {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 12rpx;
      font-size: 28rpx;
      font-weight: 500;
      border: none;
      padding: 0;

      &::after {
        border: none;
      }
    }

    .btn-cancel {
      background: $bg-color-page;
      color: $text-color-tertiary;
    }

    .btn-confirm {
      background: $primary-color;
      color: #fff;
    }
  }
}

.input-placeholder {
  color: $text-color-placeholder;
}
</style>
