<script setup lang="ts">
import { ref, watch } from 'vue'
import { X, Bot, Plus, Edit2, Trash2, Eye, EyeOff, Copy } from 'lucide-vue-next'
import { useTemple } from './composables/useTemple'
import { useSkillsPage } from '../skills/composables/useSkillsPage'
import { type Skill, type SkillCreate } from '@/api/skill'

// ===== Props / Emits =====
const props = defineProps<{ visible: boolean }>()
const emit = defineEmits<{ close: [] }>()

// ===== Temple (Tools) =====
const {
  activeTab,
  toolsLoading,
  toolsError,
  categories,
  summary,
  selectedSubgroup,
  selectedTool,
  currentTools,
  fetchTools,
  selectCategory,
  selectSubgroup,
  selectTool,
  switchTab,
} = useTemple()

// ===== Skills (inline from useSkillsPage) =====
const skillsPage = useSkillsPage()
const {
  skills,
  loading: skillsLoading,
  modalOpen,
  editingSkill,
  closeModal,
  createSkill,
  updateSkill,
  deleteSkill,
  toggleActive,
  copySkill,
} = skillsPage

// ===== Fetch tools when modal opens =====
watch(
  () => props.visible,
  (val) => {
    if (val) {
      void fetchTools()
    }
  },
  { immediate: true }
)

// ===== Close =====
function handleClose() {
  emit('close')
}

// ===== Skills form state (local for modal) =====
const skillForm = ref<SkillCreate>({
  name: '',
  description: '',
  instructions: '',
  agent_type: 'general',
  tools: [],
  visibility: 'private',
})

function openNewSkillModal() {
  skillForm.value = {
    name: '',
    description: '',
    instructions: '',
    agent_type: 'general',
    tools: [],
    visibility: 'private',
  }
  editingSkill.value = null
  modalOpen.value = true
}

function openEditSkillModal(skill: Skill) {
  skillForm.value = {
    name: skill.name,
    description: skill.description ?? '',
    instructions: skill.instructions,
    agent_type: skill.agent_type,
    tools: [...skill.tools],
    visibility: skill.visibility,
  }
  editingSkill.value = skill
  modalOpen.value = true
}

async function handleSaveSkill() {
  if (editingSkill.value) {
    await updateSkill()
  } else {
    await createSkill()
  }
  closeModal()
}

async function handleDeleteSkill(skill: Skill) {
  if (confirm(`Delete skill "${skill.name}"?`)) {
    await deleteSkill(skill)
  }
}

const AGENT_TYPES = ['general', 'schedule_planner', 'executor', 'librarian', 'analyst']
const AVAILABLE_TOOLS = ['file_operations', 'web_search', 'code_execution', 'database', 'api_calls', 'shell', 'git', 'calendar', 'tasks']
const VISIBILITY_OPTIONS = ['private', 'team', 'market'] as const
</script>

<template>
  <Teleport to="body">
    <div v-if="visible" class="temple-modal-overlay" @click.self="handleClose">
      <div class="temple-modal" role="dialog" aria-modal="true" aria-label="智慧神殿">

        <!-- Header -->
        <div class="temple-header">
          <div class="temple-header-title">
            <span class="temple-title-icon">◈</span>
            <span class="temple-title-text">智慧神殿</span>
          </div>
          <button class="temple-close-btn" aria-label="关闭" @click="handleClose">
            <X :size="16" />
          </button>
        </div>

        <!-- Tab Bar -->
        <div class="temple-tabs">
          <button
            class="temple-tab"
            :class="{ active: activeTab === 'tools' }"
            @click="switchTab('tools')"
          >
            <span class="temple-tab-icon">◈</span>
            <span>Tools</span>
          </button>
          <button
            class="temple-tab"
            :class="{ active: activeTab === 'skills' }"
            @click="switchTab('skills')"
          >
            <span class="temple-tab-icon">✦</span>
            <span>Skills</span>
          </button>
        </div>

        <!-- Metrics Strip -->
        <div class="temple-metrics">
          <div class="temple-metric">
            <span class="temple-metric-label">TOTAL</span>
            <span class="temple-metric-value">{{ summary.total_commands }}</span>
          </div>
          <div class="temple-metric">
            <span class="temple-metric-label">ACTIVE</span>
            <span class="temple-metric-value">{{ summary.active_commands }}</span>
          </div>
          <div class="temple-metric">
            <span class="temple-metric-label">MANIFEST</span>
            <span class="temple-metric-value">{{ summary.manifest_tools }}</span>
          </div>
          <div class="temple-metric">
            <span class="temple-metric-label">AGENT</span>
            <span class="temple-metric-value">{{ summary.agent_tools }}</span>
          </div>
        </div>

        <!-- Body -->
        <div class="temple-body">

          <!-- ========== TOOLS TAB ========== -->
          <div v-if="activeTab === 'tools'" class="temple-tools-layout">

            <!-- Left: Category Tree -->
            <nav class="temple-tree">
              <template v-for="cat in categories" :key="cat.name">
                <div class="temple-tree-section-title">{{ cat.display_name || cat.name }}</div>
                <div
                  v-for="sub in cat.subgroups"
                  :key="sub.name"
                  class="temple-tree-item temple-tree-subgroup"
                  :class="{ active: selectedSubgroup === sub.name }"
                  @click="selectCategory(cat.name); selectSubgroup(sub.name)"
                >
                  <span class="temple-tree-dot"></span>
                  {{ sub.display_name || sub.name }}
                </div>
              </template>
            </nav>

            <!-- Middle: Tool List -->
            <div class="temple-tool-list">
              <div v-if="toolsLoading" class="temple-loading">
                <span>Loading tools...</span>
              </div>
              <div v-else-if="toolsError" class="temple-empty" style="color:#f87171;">
                <div class="temple-empty-icon">⚠</div>
                <span>加载失败: {{ toolsError }}</span>
              </div>
              <div v-else-if="categories.length === 0" class="temple-empty">
                <div class="temple-empty-icon">◈</div>
                <span>暂无可用工具</span>
              </div>
              <div
                v-for="tool in currentTools"
                :key="tool.name"
                class="temple-tool-card"
                :class="{ selected: selectedTool?.name === tool.name }"
                @click="selectTool(tool)"
              >
                <div class="temple-tool-card-icon">⚙</div>
                <div class="temple-tool-card-info">
                  <div class="temple-tool-card-name">{{ tool.display_name || tool.name }}</div>
                  <div class="temple-tool-card-desc">{{ tool.description }}</div>
                </div>
                <div class="temple-tool-card-commands">{{ tool.commands.length }} cmds</div>
              </div>
            </div>

            <!-- Right: Tool Detail -->
            <div class="temple-detail">
              <div v-if="!selectedTool" class="temple-empty">
                <div class="temple-empty-icon">◈</div>
                <span>选择工具查看详情</span>
              </div>
              <template v-else>
                <div class="temple-detail-header">
                  <div>
                    <div class="temple-detail-name">{{ selectedTool.display_name || selectedTool.name }}</div>
                    <div class="temple-detail-display-name">{{ selectedTool.name }}</div>
                  </div>
                  <span class="temple-detail-source">{{ selectedTool.source }}</span>
                </div>

                <p class="temple-detail-desc">{{ selectedTool.description }}</p>

                <div class="temple-detail-section">
                  <div class="temple-detail-section-title">STATS</div>
                  <div class="temple-detail-stats">
                    <div class="temple-detail-stat">
                      <span class="temple-detail-stat-value">{{ selectedTool.stats?.call_count ?? 0 }}</span>
                      <span class="temple-detail-stat-label">Calls</span>
                    </div>
                    <div class="temple-detail-stat">
                      <span class="temple-detail-stat-value">{{ selectedTool.stats?.error_rate ?? 0 }}%</span>
                      <span class="temple-detail-stat-label">Error Rate</span>
                    </div>
                    <div class="temple-detail-stat">
                      <span class="temple-detail-stat-value">{{ selectedTool.stats?.avg_duration_ms ?? 0 }}ms</span>
                      <span class="temple-detail-stat-label">Avg Duration</span>
                    </div>
                  </div>
                </div>

                <div class="temple-detail-section">
                  <div class="temple-detail-section-title">COMMANDS ({{ selectedTool.commands.length }})</div>
                  <div class="temple-commands">
                    <div v-for="cmd in selectedTool.commands" :key="cmd.name" class="temple-command-item">
                      <div class="temple-command-name">/{{ cmd.name }}</div>
                      <div class="temple-command-desc">{{ cmd.description }}</div>
                    </div>
                  </div>
                </div>

                <div class="temple-detail-section">
                  <div class="temple-detail-section-title">TAGS</div>
                  <div class="temple-tags">
                    <span v-for="tag in selectedTool.tags" :key="tag" class="temple-tag">{{ tag }}</span>
                    <span class="temple-tag" style="background:rgba(0,245,212,0.1);color:#00f5d4;border-color:rgba(0,245,212,0.2)">
                      {{ selectedTool.source }}
                    </span>
                  </div>
                </div>
              </template>
            </div>
          </div>

          <!-- ========== SKILLS TAB ========== -->
          <div v-if="activeTab === 'skills'" class="temple-skills-container">

            <!-- Skills Toolbar -->
            <div class="toolbar" style="padding:10px 16px;border-bottom:1px solid rgba(0,245,212,0.08);display:flex;gap:8px;align-items:center;">
              <button class="btn-add" style="display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:6px;background:rgba(0,245,212,0.1);border:1px solid rgba(0,245,212,0.3);color:#00f5d4;cursor:pointer;font-size:12px;font-weight:500;" @click="openNewSkillModal">
                <Plus :size="13" />
                <span>新建技能</span>
              </button>
            </div>

            <!-- Skills Table -->
            <div v-if="skillsLoading" class="temple-loading" style="padding:40px;">
              <span>Loading skills...</span>
            </div>
            <div v-else-if="skills.length === 0" class="temple-empty">
              <div class="temple-empty-icon">✦</div>
              <span>暂无技能</span>
            </div>
            <div v-else class="skills-table-wrap" style="flex:1;overflow-y:auto;padding:0 16px;">
              <table class="skills-table" style="width:100%;border-collapse:collapse;">
                <thead>
                  <tr style="border-bottom:1px solid rgba(0,245,212,0.1);">
                    <th style="text-align:left;padding:8px 10px;font-size:10px;color:#5a6b7a;letter-spacing:1px;font-weight:600;">NAME</th>
                    <th style="text-align:left;padding:8px 10px;font-size:10px;color:#5a6b7a;letter-spacing:1px;font-weight:600;">TYPE</th>
                    <th style="text-align:left;padding:8px 10px;font-size:10px;color:#5a6b7a;letter-spacing:1px;font-weight:600;">VISIBILITY</th>
                    <th style="text-align:left;padding:8px 10px;font-size:10px;color:#5a6b7a;letter-spacing:1px;font-weight:600;">STATUS</th>
                    <th style="text-align:left;padding:8px 10px;font-size:10px;color:#5a6b7a;letter-spacing:1px;font-weight:600;">SOURCE</th>
                    <th style="text-align:right;padding:8px 10px;font-size:10px;color:#5a6b7a;letter-spacing:1px;font-weight:600;">ACTIONS</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="skill in skills"
                    :key="skill.id"
                    style="border-bottom:1px solid rgba(0,245,212,0.05);transition:background 0.12s;"
                    :style="{ opacity: skill.is_active ? 1 : 0.5 }"
                  >
                    <td style="padding:10px 10px;">
                      <div style="display:flex;align-items:center;gap:8px;">
                        <Bot :size="13" style="color:#00f5d4;flex-shrink:0;" />
                        <div>
                          <div style="font-size:13px;font-weight:600;color:#e8f4f8;">{{ skill.name }}</div>
                          <div style="font-size:11px;color:#5a6b7a;margin-top:1px;">{{ skill.description || '无描述' }}</div>
                        </div>
                      </div>
                    </td>
                    <td style="padding:10px 10px;">
                      <span class="mono-pill" style="font-size:10px;padding:2px 8px;border-radius:3px;background:rgba(0,245,212,0.06);color:#8a9bae;border:1px solid rgba(0,245,212,0.1);font-family:monospace;">{{ skill.agent_type }}</span>
                    </td>
                    <td style="padding:10px 10px;">
                      <span style="font-size:10px;padding:2px 8px;border-radius:3px;"
                        :style="skill.visibility === 'private' ? 'background:rgba(168,85,247,0.12);color:#c084fc;border:1px solid rgba(168,85,247,0.2)' : skill.visibility === 'team' ? 'background:rgba(34,197,94,0.12);color:#4ade80;border:1px solid rgba(34,197,94,0.2)' : 'background:rgba(59,130,246,0.12);color:#60a5fa;border:1px solid rgba(59,130,246,0.2)'">
                        {{ skill.visibility }}
                      </span>
                    </td>
                    <td style="padding:10px 10px;">
                      <span style="display:flex;align-items:center;gap:5px;font-size:11px;" :style="{ color: skill.is_active ? '#4ade80' : '#6b7280' }">
                        <span style="width:5px;height:5px;border-radius:50%;flex-shrink:0;" :style="{ background: skill.is_active ? '#4ade80' : '#6b7280' }"></span>
                        {{ skill.is_active ? 'Active' : 'Inactive' }}
                      </span>
                    </td>
                    <td style="padding:10px 10px;">
                      <span style="font-size:10px;padding:2px 8px;border-radius:3px;" :style="skill.is_builtin ? 'background:rgba(251,191,36,0.1);color:#fbbf24;border:1px solid rgba(251,191,36,0.2)' : 'background:rgba(0,245,212,0.06);color:#8a9bae;border:1px solid rgba(0,245,212,0.1)'">
                        {{ skill.is_builtin ? 'builtin' : 'custom' }}
                      </span>
                    </td>
                    <td style="padding:10px 10px;">
                      <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
                        <button class="action-btn" :style="{ color: skill.is_active ? '#4ade80' : '#6b7280' }" :title="skill.is_active ? 'Disable' : 'Enable'" @click="toggleActive(skill)">
                          <Eye v-if="skill.is_active" :size="13" />
                          <EyeOff v-else :size="13" />
                        </button>
                        <button class="action-btn" title="Copy" style="color:#8a9bae;" @click="copySkill(skill)">
                          <Copy :size="13" />
                        </button>
                        <button class="action-btn edit" title="Edit" style="color:#60a5fa;" @click="openEditSkillModal(skill)">
                          <Edit2 :size="13" />
                        </button>
                        <button class="action-btn delete" title="Delete" style="color:#f87171;" :disabled="skill.is_builtin" @click="handleDeleteSkill(skill)">
                          <Trash2 :size="13" />
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- Skills Create/Edit Modal (inline) -->
        <Transition :css="false" @enter="(el: Element, done: () => void) => { (el as HTMLElement).style.opacity = '1'; done() }" @leave="(el: Element, done: () => void) => { (el as HTMLElement).style.opacity = '0'; done() }">
          <div v-if="modalOpen" class="modal-overlay" @click.self="closeModal">
            <div class="modal-card" style="width:min(560px,90vw);max-height:85vh;overflow-y:auto;">
              <div class="modal-header">
                <span class="modal-title">{{ editingSkill ? '// 编辑技能' : '// 新建技能' }}</span>
                <button class="btn-close" aria-label="关闭" @click="closeModal"><X :size="16" /></button>
              </div>
              <div class="modal-body">
                <div class="form-group">
                  <label class="form-label" for="skill-name">// NAME</label>
                  <input id="skill-name" v-model="skillForm.name" type="text" class="form-input" placeholder="Skill name" />
                </div>
                <div class="form-group">
                  <label class="form-label" for="skill-desc">// DESCRIPTION</label>
                  <textarea id="skill-desc" v-model="skillForm.description" class="form-textarea" rows="2" placeholder="Describe what this skill does..."></textarea>
                </div>
                <div class="form-row">
                  <div class="form-group">
                    <label class="form-label" for="skill-type">// AGENT TYPE</label>
                    <select id="skill-type" v-model="skillForm.agent_type" class="form-select">
                      <option v-for="t in AGENT_TYPES" :key="t" :value="t">{{ t }}</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="skill-vis">// VISIBILITY</label>
                    <select id="skill-vis" v-model="skillForm.visibility" class="form-select">
                      <option v-for="v in VISIBILITY_OPTIONS" :key="v" :value="v">{{ v }}</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label class="form-label">// TOOLS</label>
                  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:6px;">
                    <label v-for="tool in AVAILABLE_TOOLS" :key="tool" style="display:flex;align-items:center;gap:6px;cursor:pointer;padding:5px 8px;border-radius:4px;border:1px solid rgba(0,245,212,0.08);transition:all 0.12s;" :style="{ background: skillForm.tools?.includes(tool) ? 'rgba(0,245,212,0.08)' : 'transparent' }">
                      <input type="checkbox" :checked="skillForm.tools?.includes(tool)" @change="() => { if (!skillForm.tools) skillForm.tools = []; const idx = skillForm.tools.indexOf(tool); if (idx >= 0) skillForm.tools.splice(idx, 1); else skillForm.tools.push(tool); }" style="accent-color:#00f5d4;" />
                      <span style="font-size:11px;color:#8a9bae;">{{ tool }}</span>
                    </label>
                  </div>
                </div>
                <div class="form-group flex-1">
                  <label class="form-label" for="skill-inst">// INSTRUCTIONS</label>
                  <textarea id="skill-inst" v-model="skillForm.instructions" class="form-textarea code-textarea" rows="6" placeholder="Enter skill instructions..."></textarea>
                </div>
              </div>
              <div class="modal-footer">
                <button class="btn-secondary" @click="closeModal">Cancel</button>
                <button
                  class="btn-primary"
                  :disabled="!skillForm.name || !skillForm.instructions"
                  @click="handleSaveSkill"
                >
                  {{ editingSkill ? 'Update' : 'Create' }}
                </button>
              </div>
            </div>
          </div>
        </Transition>

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

<style scoped src="./templePage.css">
</style>

<style scoped>
/* Skills modal overrides */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.modal-card {
  background: #0f1117;
  border: 1px solid rgba(0, 245, 212, 0.15);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 245, 212, 0.1);
}

.modal-title {
  font-size: 13px;
  font-weight: 600;
  color: #00f5d4;
  letter-spacing: 0.3px;
}

.btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 245, 212, 0.15);
  border-radius: 5px;
  background: transparent;
  color: #8a9bae;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-close:hover {
  border-color: #00f5d4;
  color: #00f5d4;
}

.modal-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid rgba(0, 245, 212, 0.1);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

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

.form-label {
  font-size: 10px;
  color: #5a6b7a;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}

.form-input,
.form-select,
.form-textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 245, 212, 0.12);
  border-radius: 6px;
  color: #e8f4f8;
  font-size: 12.5px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(0, 245, 212, 0.4);
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.form-textarea {
  resize: vertical;
  min-height: 60px;
}

.code-textarea {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.5;
}

.flex-1 {
  flex: 1;
}

.btn-secondary {
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid rgba(0, 245, 212, 0.2);
  background: transparent;
  color: #8a9bae;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-secondary:hover {
  border-color: rgba(0, 245, 212, 0.4);
  color: #e8f4f8;
}

.btn-primary {
  padding: 7px 18px;
  border-radius: 6px;
  border: 1px solid rgba(0, 245, 212, 0.3);
  background: rgba(0, 245, 212, 0.1);
  color: #00f5d4;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-primary:hover:not(:disabled) {
  background: rgba(0, 245, 212, 0.15);
  border-color: #00f5d4;
}

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

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 245, 212, 0.1);
  border-radius: 4px;
  background: transparent;
  color: #8a9bae;
  cursor: pointer;
  transition: all 0.15s;
}

.action-btn:hover:not(:disabled) {
  background: rgba(0, 245, 212, 0.06);
}

.action-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
</style>
