import React from "react";
import {AppRegistry, Pressable, SafeAreaView, StyleSheet, Text, View} from "react-native";
import {registerGlobals} from "@livekit/react-native";
import {name as appName} from "../../app.json";
import {returnToDanoGoMobile, markIssue, recordTestEvent} from "../../../packages/mobile-test-sdk/src/index";

registerGlobals();

function FieldSmoke() {
  return (
    <SafeAreaView style={styles.root}>
      <View style={styles.card}>
        <Text style={styles.eyebrow}>DANOGO MOBILE GUEST</Text>
        <Text style={styles.title}>Field Smoke Project</Text>
        <Text style={styles.copy}>
          This is an independent guest bundle delivered through the DanoGo Mobile runtime.
        </Text>
        <Pressable
          style={styles.primary}
          onPress={() => void recordTestEvent("field-smoke-marker")}>
          <Text style={styles.primaryText}>RECORD TEST EVENT</Text>
        </Pressable>
        <Pressable
          style={styles.secondary}
          onPress={() => void markIssue({projectId:"field-smoke",projectName:"Field Smoke Project"},"Manual smoke issue")}>
          <Text style={styles.secondaryText}>MARK ISSUE</Text>
        </Pressable>
        <Pressable
          style={styles.secondary}
          onPress={() => void returnToDanoGoMobile()}>
          <Text style={styles.secondaryText}>RETURN TO DANOGO MOBILE</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  );
}

const styles=StyleSheet.create({
  root:{flex:1,backgroundColor:"#000",justifyContent:"center",padding:24},
  card:{borderWidth:1,borderColor:"#252525",backgroundColor:"#101010",borderRadius:18,padding:22,gap:16},
  eyebrow:{color:"#007fff",fontSize:11,fontWeight:"900",letterSpacing:1.3},
  title:{color:"#fff",fontSize:28,fontWeight:"900"},
  copy:{color:"#999",lineHeight:20},
  primary:{height:50,borderRadius:12,backgroundColor:"#007fff",alignItems:"center",justifyContent:"center"},
  primaryText:{color:"#fff",fontWeight:"900"},
  secondary:{height:50,borderRadius:12,borderWidth:1,borderColor:"#333",alignItems:"center",justifyContent:"center"},
  secondaryText:{color:"#fff",fontWeight:"800"},
});

AppRegistry.registerComponent(appName,()=>FieldSmoke);
