const bridge = window.mixone || {}

export default function About() {
  return (
    <div>
      <div className="page-header">
        <h1>ℹ️ About & Packaging</h1>
        <p>App info · Shell integration · Desktop packaging</p>
      </div>

      <div className="grid">
        <div className="card">
          <div className="card-title">📊 App Info</div>
          <div className="info-row"><span className="info-label">Name</span><span className="info-value">{bridge.platform ? '{{appName}}' : '-'}</span></div>
          <div className="info-row"><span className="info-label">Electron</span><span className="info-value">{bridge.version || '-'}</span></div>
          <div className="info-row"><span className="info-label">Chromium</span><span className="info-value">{bridge.chrome || '-'}</span></div>
          <div className="info-row"><span className="info-label">Node.js</span><span className="info-value">{bridge.node || '-'}</span></div>
          <div className="info-row"><span className="info-label">Platform</span><span className="info-value">{bridge.platform || '-'}</span></div>
        </div>
        <div className="card">
          <div className="card-title">🔗 Shell Integration</div>
          <div className="btn-group" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
            <button className="btn" onClick={() => bridge.shell?.openExternal('https://github.com/qew4/mixone-example')}>🌐 Open GitHub</button>
            <button className="btn" onClick={() => bridge.shell?.openExternal('https://www.npmjs.com/package/mixone')}>📦 Open npm</button>
            <button className="btn" onClick={() => bridge.shell?.beep()}>🔔 System Beep</button>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-title">📦 Desktop Packaging</div>
        <p style={{ color: 'var(--text-muted)', fontSize: 13, marginBottom: 12 }}>
          Package as native installer (.exe / .dmg / .AppImage), output to <code>release/</code> directory
        </p>
        <div style={{ background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 8, padding: 14, fontFamily: "'SF Mono', Consolas, monospace", fontSize: 13, lineHeight: 1.8 }}>
          <div><span style={{ color: 'var(--text-muted)' }}># Package for current platform</span></div>
          <div><span style={{ color: 'var(--accent)' }}>npm run build:desktop</span></div>
          <div style={{ marginTop: 8 }}><span style={{ color: 'var(--text-muted)' }}># Disable bytecode</span></div>
          <div><span style={{ color: 'var(--accent)' }}>MIXONE_NO_BYTECODE=1 npm run build:desktop</span></div>
        </div>
        <div style={{ marginTop: 12 }}>
          <div className="info-row"><span className="info-label">Output dir</span><span className="tag tag-blue">release/</span></div>
          <div className="info-row"><span className="info-label">Bytecode</span><span className="tag tag-green">Enabled by default (.jsc)</span></div>
          <div className="info-row"><span className="info-label">Windows</span><span className="tag tag-green">NSIS (.exe)</span></div>
          <div className="info-row"><span className="info-label">macOS</span><span className="tag tag-green">DMG</span></div>
          <div className="info-row"><span className="info-label">Linux</span><span className="tag tag-green">AppImage</span></div>
        </div>
      </div>

      <div className="card">
        <div className="card-title">⚙️ App Control</div>
        <div className="btn-group">
          <button className="btn" onClick={() => bridge.app?.relaunch()}>🔄 Relaunch App</button>
          <button className="btn btn-danger" onClick={() => bridge.app?.quit()}>✕ Quit App</button>
        </div>
      </div>
    </div>
  )
}