<template>
  <div class="overlay-body">
    <div class="sub-panel">
      <header class="sub-panel-header">
        <h3>SSH 配置</h3>
        <button class="btn-ghost tiny" @click="loadSSH" :disabled="sshLoading">刷新</button>
      </header>
      <p v-if="sshError" class="form-error small">{{ sshError }}</p>

      <div class="item-list" v-if="sshList.length">
        <div class="item-row" v-for="item in sshList" :key="item.name">
          <div class="item-meta">
            <div class="item-title">
              <strong>{{ item.alias }}</strong>
              <span class="muted">({{ item.name }})</span>
            </div>
            <div class="item-sub">{{ item.username }}@{{ item.host }}:{{ item.port || 22 }}</div>
          </div>
          <div class="item-actions">
            <button class="btn-accent tiny" @click="connectWithSSH(item)">连接</button>
            <button class="btn-ghost tiny" @click="editSSH(item)">编辑</button>
            <button class="btn-danger tiny" @click="deleteSSH(item)">删除</button>
          </div>
        </div>
      </div>
      <p v-else class="empty-hint">暂无 SSH 配置，可在下方新建。</p>

      <form class="sub-form" @submit.prevent="saveSSH">
        <h4>{{ sshEditingName ? "编辑 SSH 配置" : "新建 SSH 配置" }}</h4>
        <div class="form-grid">
          <label>
            标识名 (name)
            <input v-model.trim="sshForm.name" :disabled="!!sshEditingName" placeholder="文件名，不含 .json" />
          </label>
          <label>
            别名 (alias)
            <input v-model.trim="sshForm.alias" placeholder="例如 生产环境" />
          </label>
          <label>
            主机 (host)
            <input v-model.trim="sshForm.host" placeholder="例如 192.168.1.10" />
          </label>
          <label>
            端口
            <input v-model.number="sshForm.port" type="number" min="1" max="65535" />
          </label>
          <label>
            用户名
            <input v-model.trim="sshForm.username" placeholder="root / ubuntu" />
          </label>
          <label>
            密码 (可选)
            <input v-model="sshForm.password" type="password" />
          </label>
          <label>
            私钥 (可选)
            <textarea v-model="sshForm.privateKey" rows="4" placeholder="粘贴 OpenSSH 私钥"></textarea>
          </label>
          <label>
            私钥口令 (可选)
            <input v-model="sshForm.passphrase" type="password" />
          </label>
        </div>
        <div class="form-actions">
          <button class="btn-primary small" type="submit" :disabled="sshSaving">
            {{ sshSaving ? "保存中..." : "保存" }}
          </button>
          <button class="btn-secondary small" type="button" @click="resetSSHForm">重置</button>
        </div>
      </form>
    </div>
  </div>
</template>

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

const {
  sshList, sshLoading, sshSaving, sshError, sshEditingName, sshForm,
  loadSSH, resetSSHForm, editSSH, saveSSH, deleteSSH,
} = useSSH();

const { connectWithSSH } = useSessions();
</script>
