<template>
  <div class="model-settings">
    <!-- 背景效果 -->
    <div class="bg-effects">
      <div class="glow-orb glow-1"></div>
      <div class="glow-orb glow-2"></div>
    </div>

    <!-- 页面头部 -->
    <header class="page-header">
      <div class="header-left">
        <el-button text class="back-btn" @click="goHome">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回</span>
        </el-button>
      </div>
      <div class="header-content">
        <h1 class="page-title">
          <el-icon class="title-icon"><Cpu /></el-icon>
          模型管理
        </h1>
        <p class="page-subtitle">管理您的 AI 模型 API</p>
      </div>
      <div class="header-right">
        <el-button type="primary" class="add-btn" @click="openAddDialog">
          <el-icon><Plus /></el-icon>
          <span>添加模型</span>
        </el-button>
      </div>
    </header>

    <!-- 主内容 -->
    <main class="page-main">
      <!-- 模型列表 -->
      <section class="models-section">
        <div class="section-header">
          <h2 class="section-title">
            <span class="title-line"></span>
            已配置的模型
          </h2>
          <span class="count-badge">{{ models.length }} 个</span>
        </div>

        <!-- 空状态 -->
        <div v-if="models.length === 0 && !loading" class="empty-state">
          <div class="empty-illustration">
            <div class="pulse-ring"></div>
            <el-icon size="48"><Setting /></el-icon>
          </div>
          <h3>暂无模型配置</h3>
          <p>添加您的第一个 AI 模型开始使用</p>
          <el-button type="primary" @click="openAddDialog">添加模型</el-button>
        </div>

        <!-- 模型卡片 -->
        <div v-else class="models-grid">
          <article
            v-for="(model, index) in models"
            :key="model.id"
            class="model-card"
            :class="{ 'is-default': model.is_default === 'true' }"
            :style="{ '--delay': index * 0.08 + 's' }"
          >
            <div class="card-glow"></div>

            <!-- 默认标识 -->
            <div v-if="model.is_default === 'true'" class="default-badge">
              <el-icon><Star /></el-icon>
              默认
            </div>

            <!-- 提供商图标 -->
            <div class="provider-logo" :class="model.provider">
              {{ getProviderAbbr(model.provider) }}
            </div>

            <!-- 模型信息 -->
            <div class="model-info">
              <div class="model-name-row">
                <h3 class="model-name">{{ model.model_name }}</h3>
                <span class="model-type-badge" :class="`type-${normalizeModelType(model.model_type, model.model_name)}`">
                  {{ getModelTypeLabel(model.model_type, model.model_name) }}
                </span>
              </div>
              <p class="model-endpoint">
                <el-icon><Link /></el-icon>
                {{ model.api_base || '默认端点' }}
              </p>
            </div>

            <!-- 底部操作 -->
            <div class="card-footer">
              <div class="status-badge" :class="model.connection_status">
                <span class="status-dot" :class="model.connection_status"></span>
                <template v-if="model.connection_status === 'connected'">已联通</template>
                <template v-else-if="model.connection_status === 'failed'">连接失败</template>
                <template v-else>未测试</template>
              </div>
              <div class="card-actions">
                <el-button text class="action-btn test" @click="testConnection(model)">
                  测试连接
                </el-button>
                <el-button text class="action-btn delete" @click="confirmDelete(model)">
                  删除
                </el-button>
              </div>
            </div>
          </article>
        </div>
      </section>
    </main>

    <el-dialog
      v-model="showAddDialog"
      :show-close="false"
      width="560px"
      class="add-dialog"
      :append-to-body="true"
    >
      <template #header>
        <div class="dialog-header">
          <div class="dialog-icon">
            <el-icon size="20"><Plus /></el-icon>
          </div>
          <div class="dialog-title">
            <h3>添加模型</h3>
            <p>配置新的 AI 模型</p>
          </div>
          <button class="dialog-close" @click="showAddDialog = false">
            <el-icon><Close /></el-icon>
          </button>
        </div>
      </template>

      <el-form :model="modelForm" label-position="top" class="model-form">
        <el-form-item label="选择提供商">
          <el-select
            v-model="modelForm.provider"
            placeholder="选择 AI 服务提供商"
            size="large"
            class="provider-select"
            popper-class="provider-select-dropdown"
          >
            <el-option
              v-for="provider in providers"
              :key="provider.value"
              :label="provider.label"
              :value="provider.value"
            >
              <div class="provider-option-item">
                <span class="provider-icon">{{ provider.abbr }}</span>
                <div class="provider-copy">
                  <span>{{ provider.label }}</span>
                  <small>{{ provider.desc }}</small>
                </div>
              </div>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="模型类型">
          <el-select
            v-model="modelForm.model_type"
            placeholder="选择模型类型"
            size="large"
            class="provider-select"
          >
            <el-option
              v-for="type in modelTypes"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            >
              <div class="provider-option-item">
                <span class="provider-icon">{{ type.abbr }}</span>
                <div class="provider-copy">
                  <span>{{ type.label }}</span>
                  <small>{{ type.desc }}</small>
                </div>
              </div>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="模型名称" required>
          <el-input
            v-model="modelForm.model_name"
            placeholder="例如: gpt-4o-mini / text-embedding-v3-small"
            size="large"
          />
        </el-form-item>

        <el-form-item label="API Key" required>
          <el-input
            v-model="modelForm.api_key"
            type="password"
            placeholder="输入 API Key"
            size="large"
            show-password
          />
        </el-form-item>

        <el-form-item label="API 地址">
          <el-input
            v-model="modelForm.api_base"
            placeholder="自定义 API 地址"
            size="large"
          />
        </el-form-item>

        <el-form-item>
          <el-checkbox v-model="modelForm.is_default">
            设为默认模型
          </el-checkbox>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showAddDialog = false" size="large">取消</el-button>
          <el-button type="primary" @click="addModel" :loading="submitting" size="large">
            添加模型
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="deleteDialogVisible"
      :show-close="false"
      width="400"
      class="delete-dialog"
      :append-to-body="true"
    >
      <template #header>
        <div class="delete-header">
          <div class="delete-icon">
            <el-icon size="24"><WarningFilled /></el-icon>
          </div>
          <h3>确认删除</h3>
        </div>
      </template>

      <div class="delete-content">
        <p>确定要删除模型 <strong>{{ modelToDelete?.model_name }}</strong> 吗？</p>
        <p class="warning-text">此操作不可恢复</p>
      </div>

      <template #footer>
        <div class="delete-footer">
          <el-button @click="deleteDialogVisible = false" size="large">取消</el-button>
          <el-button type="danger" @click="handleDelete" :loading="deleting" size="large">
            确认删除
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" src="../page-logic/ModelSettingsPage.ts"></script>
<style scoped src="../styles/pages/model-settings.css"></style>
