<script setup lang="ts">
import type {
  AdminCloudtentaclesLoginTestResult,
  AdminCloudtentaclesSendSmsResult,
  AdminCloudtentaclesSourceItem,
  AdminCloudtentaclesValidateSessionResult,
} from '@/types/admin'
import AdminResultCard from '@/components/admin/AdminResultCard.vue'
import { formatAdminDateTime } from '@/utils/admin-time'

type CloudtentaclesForm = {
  baseUrl: string
  username: string
  password: string
  phone: string
  code: string
  token: string
  vnKey: string
  vnId: number
  skuId: number
  skuCount: number
  deviceId: string
  deviceType: number
}

type SourceOption = {
  key: string
  label: string
}

type Props = {
  cloudtentaclesForm: CloudtentaclesForm
  cloudtentaclesSaving: boolean
  cloudtentaclesSendingSms: boolean
  cloudtentaclesTesting: boolean
  cloudtentaclesValidating: boolean
  cloudtentaclesResultError: string
  cloudtentaclesSmsResult: AdminCloudtentaclesSendSmsResult | null
  cloudtentaclesLoginResult: AdminCloudtentaclesLoginTestResult | null
  cloudtentaclesValidateResult: AdminCloudtentaclesValidateSessionResult | null
  selectedSourceKey: string
  sourceOptions: SourceOption[]
  sources: AdminCloudtentaclesSourceItem[]
  handleCloudtentaclesSaveSource: () => void | Promise<void>
  handleCloudtentaclesSendSmsCode: () => void | Promise<void>
  handleCloudtentaclesTestLogin: () => void | Promise<void>
  handleCloudtentaclesValidateSession: () => void | Promise<void>
  switchSource: (sourceKey: string) => void
  addSource: () => void
  removeSource: (sourceKey: string) => void
}

defineProps<Props>()
</script>

<template>
  <el-card class="section-card">
    <template #header>
      <div class="card-header">
        <div>
          <span class="card-title">cloudtentacles 履约平台配置</span>
          <p class="card-desc">
            先保存账号、密码、手机号和设备头，再发送短信验证码，最后执行登录测试或手动校验 token。
          </p>
        </div>
        <div class="card-actions">
          <el-button :loading="cloudtentaclesSaving" @click="handleCloudtentaclesSaveSource"
            >保存履约配置</el-button
          >
          <el-button :loading="cloudtentaclesSendingSms" @click="handleCloudtentaclesSendSmsCode"
            >发送短信验证码</el-button
          >
          <el-button
            :loading="cloudtentaclesTesting"
            type="primary"
            @click="handleCloudtentaclesTestLogin"
            >测试登录</el-button
          >
          <el-button
            :loading="cloudtentaclesValidating"
            @click="handleCloudtentaclesValidateSession"
            >校验 token</el-button
          >
        </div>
      </div>
    </template>

    <!-- 账号选择器 -->
    <div class="source-selector">
      <el-select
        :model-value="selectedSourceKey"
        placeholder="选择账号"
        @change="switchSource"
        class="source-select"
      >
        <el-option
          v-for="opt in sourceOptions"
          :key="opt.key"
          :label="opt.label"
          :value="opt.key"
        />
      </el-select>
      <el-button type="primary" plain size="small" @click="addSource">新增账号</el-button>
      <el-button
        v-if="selectedSourceKey !== 'default'"
        type="danger"
        plain
        size="small"
        @click="removeSource(selectedSourceKey)"
        >删除账号</el-button
      >
    </div>

    <el-form label-width="auto" label-position="top">
      <el-form-item label="Base URL">
        <el-input v-model="cloudtentaclesForm.baseUrl" placeholder="https://123.207.217.176" />
      </el-form-item>
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="账号">
            <el-input
              v-model="cloudtentaclesForm.username"
              placeholder="cloudtentacles 登录账号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="密码">
            <el-input
              v-model="cloudtentaclesForm.password"
              type="password"
              show-password
              placeholder="cloudtentacles 登录密码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号">
            <el-input v-model="cloudtentaclesForm.phone" placeholder="接收短信验证码的手机号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="短信验证码">
            <el-input v-model="cloudtentaclesForm.code" placeholder="收到验证码后填写" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="VN Key">
            <el-input v-model="cloudtentaclesForm.vnKey" placeholder="例如 1" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="VN ID">
            <el-input-number
              v-model="cloudtentaclesForm.vnId"
              :min="0"
              controls-position="right"
              class="w-full"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="SKU ID">
            <el-input-number
              v-model="cloudtentaclesForm.skuId"
              :min="0"
              controls-position="right"
              class="w-full"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="购买数量">
            <el-input-number
              v-model="cloudtentaclesForm.skuCount"
              :min="1"
              controls-position="right"
              class="w-full"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="deviceId">
            <el-input v-model="cloudtentaclesForm.deviceId" placeholder="-" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="deviceType">
            <el-input-number
              v-model="cloudtentaclesForm.deviceType"
              :min="0"
              controls-position="right"
              class="w-full"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="token（可手动粘贴）">
            <el-input
              v-model="cloudtentaclesForm.token"
              placeholder="登录成功后可自动回填，也可手动粘贴"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-alert
      v-if="cloudtentaclesResultError"
      :title="cloudtentaclesResultError"
      type="error"
      show-icon
      :closable="false"
      class="mt-4"
    />

    <div class="result-grid mt-4">
      <AdminResultCard label="短信发送" :value="cloudtentaclesSmsResult ? '成功' : '未执行'">
        <p v-if="cloudtentaclesSmsResult">
          {{ cloudtentaclesSmsResult.phoneMasked }}，{{
            formatAdminDateTime(cloudtentaclesSmsResult.sentAt)
          }}
        </p>
        <p v-else>先发送短信验证码，确认手机号可用。</p>
      </AdminResultCard>
      <AdminResultCard label="登录结果" :value="cloudtentaclesLoginResult ? '成功' : '未执行'">
        <p v-if="cloudtentaclesLoginResult">
          {{ cloudtentaclesLoginResult.phoneMasked }}，{{
            formatAdminDateTime(cloudtentaclesLoginResult.loggedInAt)
          }}
        </p>
        <p v-else>填写短信验证码后可执行测试登录。</p>
      </AdminResultCard>
      <AdminResultCard label="会话校验" :value="cloudtentaclesValidateResult ? '成功' : '未执行'">
        <p v-if="cloudtentaclesValidateResult">
          权限 {{ cloudtentaclesValidateResult.session.permissionCount }} 项，余额
          {{ cloudtentaclesValidateResult.asset }}
        </p>
        <p v-else>登录成功后可继续校验 token 会话。</p>
      </AdminResultCard>
    </div>
  </el-card>
</template>

<style scoped>
.section-card {
  border-radius: var(--radius-lg);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.card-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.card-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.source-selector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.source-select {
  width: 180px;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
</style>
