<script setup lang="ts">
import LLMTableRow from '@/components/settings/LLMTableRow.vue'
import { Save, RotateCcw, Plus } from 'lucide-vue-next'
import { useSettingsView } from '@/pages/settings/composables/useSettingsView'

const {
  loading,
  saving,
  toast,
  expandedRow,
  showRequiredWarning,
  profile,
  newPassword,
  llmConfig,
  schedulerConfig,
  isProfileDirty,
  isSchedulerDirty,
  addModel,
  removeModel,
  getRowKey,
  toggleRow,
  updateModel,
  saveProfile,
  saveModel,
  testModel,
  saveScheduler,
  resetProfile,
  resetScheduler,
} = useSettingsView()
</script>

<template>
  <div class="settings-view scanlines">
    <!-- Background -->
    <div class="bg-grid"></div>
    <div class="bg-glow"></div>

    <!-- Header -->
    <div class="view-header">
      <span class="header-title">// SETTINGS</span>
    </div>

    <!-- Toast -->
    <Transition name="fade">
      <div v-if="toast.show" class="toast" :class="toast.type">
        {{ toast.message }}
      </div>
    </Transition>

    <!-- Loading -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-text">LOADING...</div>
    </div>

    <!-- Content -->
    <div class="settings-content">

      <!-- Profile Section -->
      <div class="settings-card">
        <div class="card-header">
          <span class="card-title">PROFILE</span>
          <button v-if="isProfileDirty" class="reset-btn" @click="resetProfile">
            <RotateCcw :size="12" /> 重置
          </button>
        </div>

        <div class="form-group">
          <label class="form-label">// EMAIL</label>
          <input v-model="profile.email" type="email" disabled class="form-input disabled" />
        </div>

        <div class="form-group">
          <label class="form-label">// NAME</label>
          <input v-model="profile.full_name" type="text" class="form-input" placeholder="Your name" />
        </div>

        <div class="form-group">
          <label class="form-label">// NEW PASSWORD (留空保持不变)</label>
          <input v-model="newPassword" type="password" class="form-input" placeholder="••••••••" />
        </div>

        <button class="save-btn" @click="saveProfile" :disabled="saving || !isProfileDirty">
          <div v-if="saving" class="btn-loader"></div>
          <Save v-else :size="14" />
          <span>{{ saving ? 'SAVING...' : 'SAVE PROFILE' }}</span>
        </button>
      </div>

      <!-- LLM Config Section -->
      <div class="settings-card">
        <div class="card-header">
          <span class="card-title">// LLM CONFIGURATION</span>
        </div>

        <!-- 必填警告 -->
        <div v-if="showRequiredWarning" class="warning-bar">
          ⚠ chat / embedding / rerank 为知识库必填，请确保已配置
        </div>

        <!-- Chat Section -->
        <div class="llm-type-section">
          <div class="llm-type-header">
            <span class="llm-type-title">CHAT</span>
            <button class="add-btn" @click="addModel('chat')">
              <Plus :size="12" /> 添加
            </button>
          </div>
          <div v-if="llmConfig.chat && llmConfig.chat.length > 0" class="model-table">
            <div v-for="(model, index) in llmConfig.chat" :key="index">
              <LLMTableRow
                :model="model"
                :is-expanded="expandedRow === getRowKey('chat', index)"
                @toggle="toggleRow('chat', index, model)"
                @update="(m) => updateModel('chat', index, m)"
                @delete="removeModel('chat', index)"
                @test="(m) => testModel('chat', index, m)"
                @save="(m) => saveModel('chat', index, m)"
              />
            </div>
          </div>
          <div v-else class="empty-state">暂无 chat 模型配置</div>
        </div>

        <!-- VLM Section -->
        <div class="llm-type-section">
          <div class="llm-type-header">
            <span class="llm-type-title">VLM <span class="optional-tag">(可选)</span></span>
            <button class="add-btn" @click="addModel('vlm')">
              <Plus :size="12" /> 添加
            </button>
          </div>
          <div v-if="llmConfig.vlm && llmConfig.vlm.length > 0" class="model-table">
            <div v-for="(model, index) in llmConfig.vlm" :key="index">
              <LLMTableRow
                :model="model"
                :is-expanded="expandedRow === getRowKey('vlm', index)"
                @toggle="toggleRow('vlm', index, model)"
                @update="(m) => updateModel('vlm', index, m)"
                @delete="removeModel('vlm', index)"
                @test="(m) => testModel('vlm', index, m)"
                @save="(m) => saveModel('vlm', index, m)"
              />
            </div>
          </div>
          <div v-else class="empty-state">暂无 vlm 模型配置</div>
        </div>

        <!-- Embedding Section -->
        <div class="llm-type-section">
          <div class="llm-type-header">
            <span class="llm-type-title">EMBEDDING <span class="required-tag">(知识库)</span></span>
            <button class="add-btn" @click="addModel('embedding')">
              <Plus :size="12" /> 添加
            </button>
          </div>
          <div v-if="llmConfig.embedding && llmConfig.embedding.length > 0" class="model-table">
            <div v-for="(model, index) in llmConfig.embedding" :key="index">
              <LLMTableRow
                :model="model"
                :is-expanded="expandedRow === getRowKey('embedding', index)"
                @toggle="toggleRow('embedding', index, model)"
                @update="(m) => updateModel('embedding', index, m)"
                @delete="removeModel('embedding', index)"
                @test="(m) => testModel('embedding', index, m)"
                @save="(m) => saveModel('embedding', index, m)"
              />
            </div>
          </div>
          <div v-else class="empty-state">暂无 embedding 模型配置</div>
        </div>

        <!-- Rerank Section -->
        <div class="llm-type-section">
          <div class="llm-type-header">
            <span class="llm-type-title">RERANK <span class="required-tag">(知识库)</span></span>
            <button class="add-btn" @click="addModel('rerank')">
              <Plus :size="12" /> 添加
            </button>
          </div>
          <div v-if="llmConfig.rerank && llmConfig.rerank.length > 0" class="model-table">
            <div v-for="(model, index) in llmConfig.rerank" :key="index">
              <LLMTableRow
                :model="model"
                :is-expanded="expandedRow === getRowKey('rerank', index)"
                @toggle="toggleRow('rerank', index, model)"
                @update="(m) => updateModel('rerank', index, m)"
                @delete="removeModel('rerank', index)"
                @test="(m) => testModel('rerank', index, m)"
                @save="(m) => saveModel('rerank', index, m)"
              />
            </div>
          </div>
          <div v-else class="empty-state">暂无 rerank 模型配置</div>
        </div>
      </div>

      <!-- Scheduler Section -->
      <div class="settings-card">
        <div class="card-header">
          <span class="card-title">SCHEDULER</span>
          <button v-if="isSchedulerDirty" class="reset-btn" @click="resetScheduler">
            <RotateCcw :size="12" /> 重置
          </button>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">// DAILY PLAN TIME</label>
            <input v-model="schedulerConfig.daily_plan_time" type="time" class="form-input" />
          </div>
          <div class="form-group">
            <label class="form-label">// TODO AI GENERATE TIME</label>
            <input v-model="schedulerConfig.todo_ai_generate_time" type="time" class="form-input" />
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">// FORUM SCAN INTERVAL (minutes)</label>
          <input
            v-model.number="schedulerConfig.forum_scan_interval_minutes"
            type="number"
            min="5"
            max="1440"
            class="form-input"
          />
        </div>

        <div class="form-group toggle-group">
          <label class="form-label">// SCHEDULER ENABLED</label>
          <button
            class="toggle-btn"
            :class="{ active: schedulerConfig.enabled }"
            @click="schedulerConfig.enabled = !schedulerConfig.enabled"
          >
            <span class="toggle-knob"></span>
          </button>
        </div>

        <button
          class="save-btn"
          @click="saveScheduler"
          :disabled="saving || !isSchedulerDirty"
        >
          <div v-if="saving" class="btn-loader"></div>
          <Save v-else :size="14" />
          <span>{{ saving ? 'SAVING...' : 'SAVE SCHEDULER' }}</span>
        </button>
      </div>

    </div>
  </div>
</template>

<style scoped>
.settings-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-void);
  position: relative;
  overflow: hidden;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,212,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,212,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.bg-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,245,212,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.view-header {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-dim);
  background: rgba(5,8,16,0.6);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 10;
}

.header-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--text-primary);
}

/* Toast */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  z-index: 1000;
  animation: slide-in 0.3s ease;
}

.toast.success {
  background: rgba(0, 245, 212, 0.15);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
}

.toast.error {
  background: rgba(255, 71, 87, 0.15);
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* Loading */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,8,16,0.8);
  z-index: 50;
}

.loading-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent-cyan);
  animation: pulse 1s ease-in-out infinite;
}

/* Content */
.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}

/* Card */
.settings-card {
  background: rgba(13,21,37,0.9);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: 20px;
  backdrop-filter: blur(12px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent-cyan);
}

.reset-btn, .add-btn, .test-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.reset-btn:hover, .add-btn:hover, .test-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.add-btn {
  border-color: rgba(0,245,212,0.3);
  color: var(--accent-cyan);
}

.test-btn {
  border-color: rgba(0,245,212,0.3);
  color: var(--accent-cyan);
}

/* LLM Type Section */
.llm-type-section {
  margin-bottom: 20px;
}

.llm-type-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.llm-type-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--accent-cyan);
}

.optional-tag {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.required-tag {
  font-size: 9px;
  color: var(--accent-red);
  letter-spacing: 0.1em;
}

/* Warning Bar */
.warning-bar {
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-bottom: 16px;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Form */
.form-group {
  margin-bottom: 14px;
}

.form-row {
  display: flex;
  gap: 14px;
}

.form-row .form-group {
  flex: 1;
}

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.form-input, .form-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  transition: all var(--transition-fast);
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 1px rgba(0,245,212,0.1);
}

.form-input.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-select {
  cursor: pointer;
}

.input-with-toggle {
  display: flex;
  gap: 8px;
}

.input-with-toggle .form-input {
  flex: 1;
}

.toggle-visibility {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toggle-visibility:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* Toggle */
.toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-btn {
  width: 44px;
  height: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 11px;
  padding: 2px;
  cursor: pointer;
  transition: all 0.25s;
}

.toggle-btn.active {
  background: rgba(0,245,212,.15);
  border-color: var(--accent-cyan);
}

.toggle-knob {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: all 0.25s;
}

.toggle-btn.active .toggle-knob {
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  transform: translateX(22px);
}

/* Save Button */
.save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: rgba(0,245,212,0.08);
  border: 1px solid rgba(0,245,212,0.3);
  border-radius: var(--radius-sm);
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 8px;
}

.save-btn:hover:not(:disabled) {
  background: rgba(0,245,212,0.15);
  box-shadow: 0 0 12px rgba(0,245,212,0.2);
}

.save-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.save-btn.full-width {
  margin-top: 0;
}

.btn-loader {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
</style>
