<script setup lang="ts">
import { computed, ref } from "vue";
import AdminNumberInput from "@/components/AdminNumberInput.vue";
import AppIcon from "@/components/AppIcon.vue";

const props = defineProps<{
  form: Record<string, any>;
  editing: boolean;
}>();
const replacingAPIKey = ref(false);

const normalizedRate = computed(() => {
  const cny = Number(props.form.exchange_cny_amount);
  const points = Number(props.form.exchange_point_amount);
  if (!Number.isFinite(cny) || cny <= 0 || !Number.isFinite(points) || points <= 0) return "--";
  return (points / cny).toFixed(2);
});

function cancelAPIKeyReplacement() {
  props.form.api_key = "";
  replacingAPIKey.value = false;
}
</script>

<template>
  <div class="channel-editor">
    <section class="channel-section">
      <header class="channel-section__header">
        <span class="channel-section__icon"><AppIcon name="Connection" /></span>
        <div>
          <h3>基础连接</h3>
          <p>配置渠道标识、接口地址和访问凭证。</p>
        </div>
      </header>
      <div class="channel-grid">
        <el-form-item
          label="渠道名"
          prop="name"
          required
        >
          <el-input
            v-model.trim="form.name"
            placeholder="输入渠道名称"
          />
        </el-form-item>
        <el-form-item
          label="渠道 URL"
          prop="base_url"
          required
        >
          <el-input
            v-model.trim="form.base_url"
            placeholder="https://api.example.com"
          />
        </el-form-item>
        <el-form-item
          class="channel-field--full"
          label="API Key"
          prop="api_key"
          :required="!editing"
        >
          <template v-if="editing && !replacingAPIKey">
            <div class="masked-key-row">
              <el-input
                :model-value="form.api_key_masked || '未配置'"
                readonly
              />
              <el-button @click="replacingAPIKey = true">更换 API Key</el-button>
            </div>
            <div class="field-helper">仅显示前后各 5 位，完整密钥不会返回管理端</div>
          </template>
          <template v-else>
            <el-input
              v-model="form.api_key"
              type="password"
              show-password
              placeholder="输入新 API Key"
            />
            <div class="api-key-helper-row">
              <div class="field-helper">凭证将加密保存</div>
              <el-button
                v-if="editing"
                link
                @click="cancelAPIKeyReplacement"
                >取消更换</el-button
              >
            </div>
          </template>
        </el-form-item>
      </div>
    </section>

    <section class="channel-section">
      <header class="channel-section__header">
        <span class="channel-section__icon"><AppIcon name="Coin" /></span>
        <div>
          <h3>渠道汇率</h3>
          <p>设置人民币与渠道积分的兑换关系，用于模型价格换算。</p>
        </div>
      </header>
      <div class="exchange-rate-row">
        <el-form-item
          label="人民币金额"
          required
        >
          <AdminNumberInput
            v-model="form.exchange_cny_amount"
            :min="0.01"
            :precision="2"
            placeholder="1.00"
          />
        </el-form-item>
        <span class="exchange-rate-row__equals">=</span>
        <el-form-item
          label="渠道积分"
          required
        >
          <AdminNumberInput
            v-model="form.exchange_point_amount"
            :min="0.01"
            :precision="2"
            placeholder="1.00"
          />
        </el-form-item>
      </div>
      <div class="exchange-rate-summary">
        <span>归一化汇率</span>
        <strong>1.00 元 = {{ normalizedRate }} 渠道积分</strong>
      </div>
    </section>

    <section class="channel-section">
      <header class="channel-section__header">
        <span class="channel-section__icon"><AppIcon name="Setting" /></span>
        <div>
          <h3>运行限制</h3>
          <p>配置余额预警和任务并发上限。</p>
        </div>
      </header>
      <div class="channel-grid channel-grid--three">
        <el-form-item
          label="余额预警阈值"
          prop="warning_threshold"
          required
        >
          <AdminNumberInput
            v-model="form.warning_threshold"
            :min="0"
            :precision="2"
          />
        </el-form-item>
        <el-form-item
          label="最大并发数"
          prop="max_concurrency"
          required
        >
          <AdminNumberInput
            v-model="form.max_concurrency"
            :min="1"
            :max="5000"
            :precision="0"
          />
          <div class="field-helper">已提交且未进入终态的总任务数</div>
        </el-form-item>
        <el-form-item
          label="单用户最高并发数"
          prop="max_user_concurrency"
          required
        >
          <AdminNumberInput
            v-model="form.max_user_concurrency"
            :min="1"
            :max="500"
            :precision="0"
          />
          <div class="field-helper">超出后继续排队，不计入轮询请求</div>
        </el-form-item>
      </div>
    </section>
  </div>
</template>

<style scoped>
.channel-editor {
  display: grid;
  gap: 16px;
}

.channel-section {
  padding: 18px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.channel-section__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.channel-section__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.channel-section__header h3 {
  color: var(--color-text);
  font-size: 15px;
}

.channel-section__header p {
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.channel-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.channel-field--full {
  grid-column: 1 / -1;
}

.masked-key-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.masked-key-row :deep(.el-input__inner) {
  font-variant-numeric: tabular-nums;
}

.masked-key-row > .el-button {
  min-height: 40px;
}

.api-key-helper-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.exchange-rate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.exchange-rate-row__equals {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 18px;
  text-align: center;
}

.exchange-rate-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-size: 12px;
}

.exchange-rate-summary strong {
  color: var(--color-text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .channel-section {
    padding: 14px;
  }

  .channel-grid,
  .channel-grid--three {
    grid-template-columns: 1fr;
  }

  .exchange-rate-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .exchange-rate-row__equals {
    margin: -4px 0 10px;
  }

  .exchange-rate-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .masked-key-row {
    grid-template-columns: 1fr;
  }
}
</style>
