<template>
  <div>
    <h2 class="text-2xl font-bold mb-6">脚本预览</h2>

    <!-- 部署命令 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
      <h3 class="font-semibold mb-3">客户端部署命令</h3>
      <p class="text-sm text-gray-500 mb-3">在业务服务器上执行以下命令下载脚本：</p>
      <div class="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm overflow-x-auto">
        <div v-if="isLinux">
          curl -fsSL \<br />
          &nbsp;&nbsp;"{{ baseUrl }}/api/script/{{ domain }}?server_name={{ serverName }}" \<br />
          &nbsp;&nbsp;-o /usr/local/bin/deploy-cert.sh<br /><br />
          chmod +x /usr/local/bin/deploy-cert.sh<br /><br />
          # 添加 cron（每 30 分钟检查一次）<br />
          echo '*/30 * * * * /usr/local/bin/deploy-cert.sh >> /var/log/deploy-cert.log 2>&1' | crontab -
        </div>
        <div v-else>
          Invoke-WebRequest ` <br />
          &nbsp;&nbsp;-Uri "{{ baseUrl }}/api/script/{{ domain }}?server_name={{ serverName }}" ` <br />
          &nbsp;&nbsp;-OutFile C:\scripts\deploy-cert.ps1<br /><br />
          # 添加计划任务（每 30 分钟）<br />
          schtasks /create /sc minute /mo 30 /tn "CertDeploy-{{ domain }}" /tr "powershell -File C:\scripts\deploy-cert.ps1"
        </div>
      </div>
      <button @click="copyCommand" class="mt-3 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm">
        📋 复制命令
      </button>
    </div>

    <!-- 脚本内容 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
      <div class="flex justify-between items-center mb-3">
        <h3 class="font-semibold">脚本内容</h3>
        <button @click="downloadScript" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm">
          ⬇️ 下载脚本
        </button>
      </div>
      <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto whitespace-pre-wrap">{{ scriptContent }}</pre>
    </div>

    <!-- 复制成功提示 -->
    <div v-if="showCopied" class="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg text-sm">
      已复制到剪贴板
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getScript, getDomains } from '../api'

const route = useRoute()
const domain = route.params.domain
const serverName = route.query.server
const baseUrl = window.location.origin
const scriptContent = ref('')
const showCopied = ref(false)

const isLinux = computed(() => {
  // 从脚本内容判断平台
  return !scriptContent.value.includes('$ErrorActionPreference')
})

onMounted(async () => {
  const { data } = await getScript(domain, serverName)
  scriptContent.value = data
})

const copyCommand = async () => {
  const cmd = isLinux.value
    ? `curl -fsSL "${baseUrl}/api/script/${domain}?server_name=${serverName}" -o /usr/local/bin/deploy-cert.sh && chmod +x /usr/local/bin/deploy-cert.sh`
    : `Invoke-WebRequest -Uri "${baseUrl}/api/script/${domain}?server_name=${serverName}" -OutFile C:\\scripts\\deploy-cert.ps1`
  await navigator.clipboard.writeText(cmd)
  showCopied.value = true
  setTimeout(() => { showCopied.value = false }, 2000)
}

const downloadScript = () => {
  const ext = isLinux.value ? 'sh' : 'ps1'
  const blob = new Blob([scriptContent.value], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `deploy-cert-${domain}.${ext}`
  a.click()
  URL.revokeObjectURL(url)
}
</script>
