<template>
  <div class="overlay-body">
    <div class="sub-panel">
      <header class="sub-panel-header">
        <h3>快捷命令</h3>
        <button class="btn-ghost tiny" @click="loadCommands" :disabled="commandLoading">刷新</button>
      </header>
      <p v-if="commandError" class="form-error small">{{ commandError }}</p>

      <div class="item-list" v-if="commandList.length">
        <div class="item-row" v-for="(item, index) in commandList" :key="index">
          <div class="item-meta">
            <strong>{{ item.alias }}</strong>
            <code class="cmd-code">{{ item.command }}</code>
          </div>
          <div class="item-actions">
            <button class="btn-accent tiny" @click="applyCommandToTerminal(item)">发送</button>
            <button class="btn-ghost tiny" @click="editCommand(item, index)">编辑</button>
            <button class="btn-danger tiny" @click="deleteCommand(index)">删除</button>
          </div>
        </div>
      </div>
      <p v-else class="empty-hint">暂无快捷命令，可在下方新建。</p>

      <form class="sub-form" @submit.prevent="saveCommand">
        <h4>{{ commandEditingIndex >= 0 ? "编辑快捷命令" : "新建快捷命令" }}</h4>
        <div class="form-grid">
          <label>
            别名
            <input v-model.trim="commandForm.alias" placeholder="例如 查看磁盘" />
          </label>
          <label>
            命令
            <input v-model.trim="commandForm.command" placeholder="例如 df -h" />
          </label>
        </div>
        <div class="form-actions">
          <button class="btn-primary small" type="submit" :disabled="commandSaving">
            {{ commandSaving ? "保存中..." : "保存" }}
          </button>
          <button class="btn-secondary small" type="button" @click="resetCommandForm">重置</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { useCommands } from "../../composables/useCommands";

const {
  commandList, commandLoading, commandSaving, commandError,
  commandEditingIndex, commandForm,
  loadCommands, resetCommandForm, editCommand, saveCommand,
  deleteCommand, applyCommandToTerminal,
} = useCommands();
</script>
