<script setup>
import { ref, onMounted, inject } from 'vue'
const bridge = window.{{bridgeGlobal}} || {}
const toast = inject('toast')
const info = ref(null)
onMounted(async () => { if (bridge.app) info.value = await bridge.app.info() })
</script>

<template>
  <div>
    <div class="page-header">
      <h1>ℹ️ About & Packaging</h1>
      <p>App info · Shell integration · Desktop packaging</p>
    </div>

    <div class="grid">
      <div class="card">
        <div class="card-title">📊 App Info</div>
        <div class="info-row"><span class="info-label">Name</span><span class="info-value">{{ info?.name || '-' }}</span></div>
        <div class="info-row"><span class="info-label">Version</span><span class="info-value">{{ info?.version || '-' }}</span></div>
        <div class="info-row"><span class="info-label">Electron</span><span class="info-value">{{ info?.electron || '-' }}</span></div>
        <div class="info-row"><span class="info-label">Chromium</span><span class="info-value">{{ info?.chrome || '-' }}</span></div>
        <div class="info-row"><span class="info-label">Node.js</span><span class="info-value">{{ info?.node || '-' }}</span></div>
        <div class="info-row"><span class="info-label">Platform</span><span class="info-value">{{ info?.platform || '-' }}</span></div>
        <div class="info-row"><span class="info-label">CWD</span><span class="info-value" style="font-size:11px">{{ info?.cwd || '-' }}</span></div>
      </div>
      <div class="card">
        <div class="card-title">🔗 Shell Integration</div>
        <div class="btn-group" style="flex-direction:column;align-items:flex-start">
          <button class="btn" @click="bridge.shell?.openExternal('https://github.com/qew4/mixone-example')">🌐 Open GitHub</button>
          <button class="btn" @click="bridge.shell?.openExternal('https://www.npmjs.com/package/mixone')">📦 Open npm</button>
          <button class="btn" @click="bridge.shell?.openPath(info?.cwd || '.')">📂 Open CWD</button>
          <button class="btn" @click="bridge.shell?.beep()">🔔 System Beep</button>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-title">📦 Desktop Packaging</div>
      <p style="color:var(--text-muted);font-size:13px;margin-bottom:12px">
        Package as native installer (.exe / .dmg / .AppImage), output to <code>release/</code> directory
      </p>
      <div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:14px;font-family:'SF Mono',Consolas,monospace;font-size:13px;line-height:1.8">
        <div><span style="color:var(--text-muted)"># Package for current platform (Windows/macOS/Linux)</span></div>
        <div><span style="color:var(--accent)">npm run build:desktop</span></div>
        <div style="margin-top:8px"><span style="color:var(--text-muted)"># Or specify a platform</span></div>
        <div><span style="color:var(--accent)">npx electron-builder --win</span>  <span style="color:var(--text-muted)"># Windows</span></div>
        <div><span style="color:var(--accent)">npx electron-builder --mac</span>  <span style="color:var(--text-muted)"># macOS (must run on macOS)</span></div>
        <div><span style="color:var(--accent)">npx electron-builder --linux</span> <span style="color:var(--text-muted)"># Linux</span></div>
      </div>
      <div style="margin-top:12px">
        <div class="info-row"><span class="info-label">Output dir</span><span class="tag tag-blue">release/</span></div>
        <div class="info-row"><span class="info-label">Windows</span><span class="tag tag-green">NSIS installer (.exe)</span></div>
        <div class="info-row"><span class="info-label">macOS</span><span class="tag tag-green">DMG image</span></div>
        <div class="info-row"><span class="info-label">Linux</span><span class="tag tag-green">AppImage</span></div>
      </div>
    </div>

    <div class="card">
      <div class="card-title">⚙️ App Control</div>
      <div class="btn-group">
        <button class="btn" @click="bridge.app?.relaunch()">🔄 Relaunch App</button>
        <button class="btn btn-danger" @click="bridge.app?.quit()">✕ Quit App</button>
      </div>
    </div>
  </div>
</template>