<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 src="./settingsPage.css">
</style>
