import React from 'react'
import { View, Text, ScrollView, StyleSheet } from 'react-native'

const bridge = (window as any).mixone || {}

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <View style={s.infoRow}>
      <Text style={s.infoLabel}>{label}</Text>
      <Text style={s.infoValue}>{value}</Text>
    </View>
  )
}

export default function About() {
  return (
    <ScrollView style={s.page}>
      <Text style={s.h1}>ℹ️ About & Packaging</Text>
      <Text style={s.sub}>App info · Shell integration · Desktop packaging</Text>

      <View style={s.card}>
        <Text style={s.cardTitle}>📊 App Info</Text>
        <InfoRow label="Electron" value={bridge.version || '-'} />
        <InfoRow label="Chromium" value={bridge.chrome || '-'} />
        <InfoRow label="Node.js" value={bridge.node || '-'} />
        <InfoRow label="Platform" value={bridge.platform || '-'} />
      </View>

      <View style={s.card}>
        <Text style={s.cardTitle}>🔗 Shell Integration</Text>
        <Text style={s.hint} onPress={() => bridge.shell?.openExternal('https://github.com/qew4/mixone-example')}>🌐 Open GitHub</Text>
        <Text style={s.hint} onPress={() => bridge.shell?.openExternal('https://www.npmjs.com/package/mixone')}>📦 Open npm</Text>
        <Text style={s.hint} onPress={() => bridge.shell?.beep()}>🔔 System Beep</Text>
      </View>

      <View style={s.card}>
        <Text style={s.cardTitle}>📦 Desktop Packaging</Text>
        <Text style={s.desc}>Package as .exe / .dmg / .AppImage, output to release/ directory</Text>
        <View style={s.codeBlock}>
          <Text style={s.codeLine}>npm run build:desktop</Text>
          <Text style={[s.codeLine, s.codeDim]}># Disable bytecode:</Text>
          <Text style={s.codeLine}>MIXONE_NO_BYTECODE=1 npm run build:desktop</Text>
        </View>
        <InfoRow label="Bytecode" value="Enabled by default (.jsc)" />
        <InfoRow label="Windows" value="NSIS (.exe)" />
        <InfoRow label="macOS" value="DMG" />
        <InfoRow label="Linux" value="AppImage" />
      </View>

      <View style={s.card}>
        <Text style={s.cardTitle}>⚙️ App Control</Text>
        <Text style={s.hint} onPress={() => bridge.app?.relaunch()}>🔄 Relaunch App</Text>
        <Text style={[s.hint, { color: '#f87171' }]} onPress={() => bridge.app?.quit()}>✕ Quit App</Text>
      </View>
    </ScrollView>
  )
}

const s = StyleSheet.create({
  page: { flex: 1, padding: 24 },
  h1: { fontSize: 22, fontWeight: '600', color: '#e2e8f0', marginBottom: 4 },
  sub: { fontSize: 13, color: '#94a3b8', marginBottom: 20 },
  card: { backgroundColor: '#1e293b', borderWidth: 1, borderColor: '#334155', borderRadius: 12, padding: 20, marginBottom: 16 },
  cardTitle: { fontSize: 14, fontWeight: '600', color: '#38bdf8', marginBottom: 16 },
  infoRow: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: 'rgba(255,255,255,0.05)' },
  infoLabel: { color: '#94a3b8', fontSize: 13 },
  infoValue: { fontFamily: 'monospace', fontSize: 12, color: '#e2e8f0' },
  desc: { fontSize: 13, color: '#94a3b8', marginBottom: 12 },
  hint: { fontSize: 13, color: '#38bdf8', paddingVertical: 6 },
  codeBlock: { backgroundColor: '#0f172a', borderWidth: 1, borderColor: '#334155', borderRadius: 8, padding: 14, marginBottom: 12 },
  codeLine: { fontFamily: 'monospace', fontSize: 13, color: '#38bdf8', lineHeight: 22 },
  codeDim: { color: '#94a3b8', marginTop: 8 }
})