<script setup>
import { ref, onMounted, inject } from 'vue'
const bridge = window.{{bridgeGlobal}} || {}
const toast = inject('toast')
const info = ref(null)
const time = ref(new Date().toLocaleTimeString())

onMounted(async () => {
  if (bridge.app) info.value = await bridge.app.info()
  setInterval(() => { time.value = new Date().toLocaleTimeString() }, 1000)
})

function baseUrl() { return location.origin + location.pathname }
</script>

<template>
  <div>
    <div class="hero">
      <div class="hero-bg"></div>
      <div class="hero-content">
        <div class="hero-badge">⚡ Powered by mixone</div>
        <h1 class="hero-title">{{appName}}</h1>
        <p class="hero-sub">Vue 3 + Electron desktop app · Full-featured IPC bridge demo</p>
        <div class="hero-time">{{ time }}</div>
      </div>
    </div>

    <div class="stat-grid">
      <div class="stat-box" v-for="s in [
        { val: info?.electron, lbl: 'Electron', icon: '⚡' },
        { val: info?.chrome, lbl: 'Chromium', icon: '🌐' },
        { val: info?.node, lbl: 'Node.js', icon: '📦' },
        { val: info?.platform, lbl: 'Platform', icon: '💻' }
      ]" :key="s.lbl">
        <div class="stat-icon">{{ s.icon }}</div>
        <div class="stat-value">{{ s.val || '-' }}</div>
        <div class="stat-label">{{ s.lbl }}</div>
      </div>
    </div>

    <div class="grid">
      <div class="card card-glow">
        <div class="card-title">🪟 Window Management</div>
        <p class="card-desc">Create child windows, Modal windows, control window state</p>
        <div class="btn-group">
          <button class="btn btn-primary" @click="bridge.window?.open({ url: baseUrl() + '#/ipc', width: 800, height: 600, title: 'IPC Demo' }); toast('Child window opened', 'success')">📄 Child Window</button>
          <button class="btn btn-purple" @click="bridge.window?.openModal({ url: baseUrl() + '#/about', width: 520, height: 420 }); toast('Modal opened', 'info')">🔒 Modal</button>
          <button class="btn btn-danger" @click="bridge.window?.close()">✕ Close</button>
        </div>
      </div>

      <div class="card card-glow">
        <div class="card-title">💬 Dialog & System</div>
        <p class="card-desc">Message dialog, system beep, external links</p>
        <div class="btn-group">
          <button class="btn" @click="bridge.dialog?.messageBox({ type: 'info', title: 'Hello', message: 'Greetings from mixone 👋', buttons: ['OK'] })">💬 Message</button>
          <button class="btn" @click="bridge.shell?.beep()">🔔 Beep</button>
          <button class="btn" @click="bridge.shell?.openExternal('https://github.com/qew4/mixone-example')">🌐 GitHub</button>
        </div>
      </div>
    </div>

    <div class="card feature-grid">
      <div class="card-title">🚀 Core Features</div>
      <div class="features">
        <div class="feature" v-for="f in [
          { icon: '⚡', title: 'Zero-bundle main process', desc: 'main.js is native CommonJS, electron . runs directly' },
          { icon: '🔌', title: 'Built-in IPC', desc: 'Window/dialog/filesystem/clipboard/Shell full coverage' },
          { icon: '📦', title: 'Unified deps', desc: 'vue/react/vite/electron all provided by mixone' },
          { icon: '🔒', title: 'V8 bytecode', desc: 'mixone build --bytecode protects source code' },
          { icon: '🎨', title: 'Custom splash', desc: 'Drop splash.html to replace the default splash' },
          { icon: '🔄', title: 'Auto port', desc: 'Auto-switches if port is in use, no manual config' }
        ]" :key="f.title">
          <div class="feature-icon">{{ f.icon }}</div>
          <div class="feature-text">
            <div class="feature-title">{{ f.title }}</div>
            <div class="feature-desc">{{ f.desc }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-title">📖 Quick Commands</div>
      <div class="commands">
        <div class="cmd" v-for="c in [
          { cmd: 'npm run dev', desc: 'Start dev mode', tag: 'dev', color: 'blue' },
          { cmd: 'npm run build', desc: 'Build renderer', tag: 'build', color: 'blue' },
          { cmd: 'npm run build -- --bytecode', desc: 'Build + V8 bytecode', tag: 'bytecode', color: 'green' },
          { cmd: 'npm run build:desktop', desc: 'Package desktop installer', tag: 'desktop', color: 'green' }
        ]" :key="c.cmd">
          <code class="cmd-code">{{ c.cmd }}</code>
          <span class="cmd-desc">{{ c.desc }}</span>
          <span :class="['tag', 'tag-' + c.color]">{{ c.tag }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.hero {
  position: relative;
  margin: -24px -24px 24px;
  padding: 48px 24px;
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56,189,248,0.15), rgba(168,85,247,0.1), rgba(74,222,128,0.08));
}
.hero-content { position: relative; z-index: 1; }
.hero-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(56,189,248,0.15);
  border: 1px solid rgba(56,189,248,0.3);
  color: var(--accent);
  font-size: 12px;
  margin-bottom: 12px;
}
.hero-title { font-size: 32px; font-weight: 700; margin-bottom: 8px; background: linear-gradient(135deg, #38bdf8, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { color: var(--text-muted); margin-bottom: 8px; }
.hero-time { font-family: 'SF Mono', Consolas, monospace; font-size: 14px; color: var(--accent); }
.card-glow { transition: all 0.3s; }
.card-glow:hover { border-color: rgba(56,189,248,0.3); box-shadow: 0 4px 20px rgba(56,189,248,0.1); }
.card-desc { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; }
.btn-purple { border-color: rgba(168,85,247,0.3); color: #c084fc; }
.btn-purple:hover { background: rgba(168,85,247,0.1); border-color: #c084fc; }
.feature-grid { padding: 24px; }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature { display: flex; gap: 12px; padding: 12px; border-radius: 8px; transition: background 0.2s; }
.feature:hover { background: rgba(255,255,255,0.03); }
.feature-icon { font-size: 24px; flex-shrink: 0; }
.feature-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.feature-desc { font-size: 12px; color: var(--text-muted); }
.commands { display: flex; flex-direction: column; gap: 8px; }
.cmd { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg); border-radius: 8px; }
.cmd-code { font-family: 'SF Mono', Consolas, monospace; font-size: 13px; color: var(--accent); min-width: 260px; }
.cmd-desc { font-size: 13px; color: var(--text-muted); flex: 1; }
</style>