<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';

interface TokenFormData {
  id?: string;
  name: string;
  expireTime: string;
  premiumQuotaLimit: number | null;
  quotaUnit: string;
}

interface Props {
  visible: boolean;
  mode: 'create' | 'edit';
  formData?: TokenFormData;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  mode: 'create',
  formData: () => ({
    name: '',
    expireTime: '',
    premiumQuotaLimit: 0,
    quotaUnit: '万',
  }),
});

const emit = defineEmits<{
  'update:visible': [value: boolean];
  'confirm': [data: TokenFormData];
}>();

const localFormData = ref<TokenFormData>({
  name: '',
  expireTime: '',
  premiumQuotaLimit: 0,
  quotaUnit: '万',
});

const submitting = ref(false);
const neverExpire = ref(false); // 永不过期开关
const unlimitedQuota = ref(false); // 无限制额度开关

// 移动端检测
const isMobile = ref(false);

function checkMobile() {
  isMobile.value = window.innerWidth < 768;
}

onMounted(() => {
  checkMobile();
  window.addEventListener('resize', checkMobile);
});

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile);
});

const quotaUnitOptions = [
  { label: '个', value: '个', multiplier: 1 },
  { label: '十', value: '十', multiplier: 10 },
  { label: '百', value: '百', multiplier: 100 },
  { label: '千', value: '千', multiplier: 1000 },
  { label: '万', value: '万', multiplier: 10000 },
  { label: '亿', value: '亿', multiplier: 100000000 },
];

// 监听visible变化，重置表单
watch(() => props.visible, (newVal) => {
  if (newVal) {
    if (props.mode === 'edit' && props.formData) {
      // 编辑模式：转换后端数据为展示数据
      const quota = props.formData.premiumQuotaLimit || 0;
      let displayValue = quota;
      let unit = '个';

      // 判断是否无限制
      unlimitedQuota.value = quota === 0;

      if (!unlimitedQuota.value) {
        // 自动选择合适的单位
        if (quota >= 100000000 && quota % 100000000 === 0) {
          displayValue = quota / 100000000;
          unit = '亿';
        }
        else if (quota >= 10000 && quota % 10000 === 0) {
          displayValue = quota / 10000;
          unit = '万';
        }
        else if (quota >= 1000 && quota % 1000 === 0) {
          displayValue = quota / 1000;
          unit = '千';
        }
        else if (quota >= 100 && quota % 100 === 0) {
          displayValue = quota / 100;
          unit = '百';
        }
        else if (quota >= 10 && quota % 10 === 0) {
          displayValue = quota / 10;
          unit = '十';
        }
      }

      // 判断是否永不过期
      neverExpire.value = !props.formData.expireTime;

      localFormData.value = {
        ...props.formData,
        premiumQuotaLimit: displayValue,
        quotaUnit: unit,
      };
    }
    else {
      // 新增模式：重置表单
      localFormData.value = {
        name: '',
        expireTime: '',
        premiumQuotaLimit: 1,
        quotaUnit: '万',
      };
      neverExpire.value = false;
      unlimitedQuota.value = false;
    }
    submitting.value = false;
  }
});

// 监听永不过期开关
watch(neverExpire, (newVal) => {
  if (newVal) {
    localFormData.value.expireTime = '';
  }
});

// 监听无限制开关
watch(unlimitedQuota, (newVal) => {
  if (newVal) {
    localFormData.value.premiumQuotaLimit = 0;
  }
});

// 关闭对话框
function handleClose() {
  if (submitting.value)
    return;
  emit('update:visible', false);
}

// 确认提交
async function handleConfirm() {
  if (!localFormData.value.name.trim()) {
    ElMessage.warning('请输入API密钥名称');
    return;
  }

  if (!neverExpire.value && !localFormData.value.expireTime) {
    ElMessage.warning('请选择过期时间');
    return;
  }

  if (!unlimitedQuota.value && localFormData.value.premiumQuotaLimit <= 0) {
    ElMessage.warning('请输入有效的配额限制');
    return;
  }

  submitting.value = true;

  try {
    // 将展示值转换为实际值
    let actualQuota = null;
    if (!unlimitedQuota.value) {
      const unit = quotaUnitOptions.find(u => u.value === localFormData.value.quotaUnit);
      actualQuota = localFormData.value.premiumQuotaLimit * (unit?.multiplier || 1);
    }
    const submitData: TokenFormData = {
      ...localFormData.value,
      expireTime: neverExpire.value ? '' : localFormData.value.expireTime,
      premiumQuotaLimit: actualQuota,
    };

    emit('confirm', submitData);
  }
  finally {
    // 注意：这里不设置 submitting.value = false
    // 因为父组件会关闭对话框，watch会重置状态
  }
}

const dialogTitle = computed(() => props.mode === 'create' ? '新增 API密钥' : '编辑 API密钥');
</script>

<template>
  <el-dialog
    :model-value="visible"
    :title="dialogTitle"
    :width="isMobile ? '95%' : '540px'"
    :fullscreen="isMobile"
    :close-on-click-modal="false"
    :show-close="!submitting"
    @close="handleClose"
  >
    <el-form :model="localFormData" :label-width="isMobile ? '100%' : '110px'" :label-position="isMobile ? 'top' : 'right'">
      <el-form-item label="API密钥名称" required>
        <el-input
          v-model="localFormData.name"
          placeholder="例如：生产环境、测试环境、开发环境"
          maxlength="50"
          show-word-limit
          clearable
          :disabled="submitting"
        >
          <template #prefix>
            <el-icon><i-ep-collection-tag /></el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="过期时间">
        <div class="form-item-with-switch">
          <el-switch
            v-model="neverExpire"
            active-text="永不过期"
            :disabled="submitting"
            class="expire-switch"
          />
          <el-date-picker
            v-if="!neverExpire"
            v-model="localFormData.expireTime"
            type="datetime"
            placeholder="选择过期时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DDTHH:mm:ss"
            style="width: 100%"
            clearable
            :disabled="submitting"
            :disabled-date="(time: Date) => time.getTime() < Date.now()"
          >
            <template #prefix>
              <el-icon><i-ep-clock /></el-icon>
            </template>
          </el-date-picker>
        </div>
        <div v-if="!neverExpire" class="form-hint">
          <el-icon><i-ep-warning /></el-icon>
          API密钥将在过期时间后自动失效
        </div>
      </el-form-item>

      <el-form-item label="配额限制">
        <div class="form-item-with-switch">
          <el-switch
            v-model="unlimitedQuota"
            active-text="无限制"
            :disabled="submitting"
            class="quota-switch"
          />
          <div v-if="!unlimitedQuota" class="quota-input-group">
            <el-input-number
              v-model="localFormData.premiumQuotaLimit"
              :min="1"
              :precision="0"
              :controls="true"
              controls-position="right"
              placeholder="请输入配额"
              class="quota-number"
              :disabled="submitting"
            />
            <el-select
              v-model="localFormData.quotaUnit"
              class="quota-unit"
              placeholder="单位"
              :disabled="submitting"
            >
              <el-option
                v-for="option in quotaUnitOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </div>
        </div>
        <div v-if="!unlimitedQuota" class="form-hint">
          <el-icon><i-ep-info-filled /></el-icon>
          超出配额后API密钥将无法继续使用
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button :disabled="submitting" @click="handleClose">
          取消
        </el-button>
        <el-button
          type="primary"
          :loading="submitting"
          :disabled="submitting"
          @click="handleConfirm"
        >
          {{ mode === 'create' ? '创建' : '保存' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.form-item-with-switch {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.expire-switch,
.quota-switch {
  --el-switch-on-color: #67c23a;
}

.quota-input-group {
  display: flex;
  gap: 10px;
  width: 100%;
}

.quota-number {
  flex: 1;

  :deep(.el-input__wrapper) {
    width: 100%;
  }
}

.quota-unit {
  width: 100px;
}

.form-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #606266;
  background: #f4f4f5;
  border-radius: 6px;
  border-left: 3px solid #409eff;

  .el-icon {
    font-size: 14px;
    color: #409eff;
    flex-shrink: 0;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #303133;
}

:deep(.el-input__prefix) {
  color: #909399;
}
</style>
