Final-Year-Project/MobileApp/app/onboarding.tsx

import { Redirect } from 'expo-router';
import React from 'react';
import {
  ActivityIndicator,
  KeyboardAvoidingView,
  Platform,
  Pressable,
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';

import { useApp } from '@/src/app-context';

export default function OnboardingScreen() {
  const { ready, state, actions } = useApp();

  if (!ready) {
    return (
      <View style={styles.loading}>
        <ActivityIndicator color="#60a5fa" size="large" />
      </View>
    );
  }

  if (!state.session?.session) {
    return <Redirect href={'/auth' as any} />;
  }

  if (state.deviceToken) {
    return <Redirect href="/(tabs)" />;
  }

  return (
    <SafeAreaView style={styles.safe}>
      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.container}>
        <View style={styles.heading}>
          <Text style={styles.title}>Configure Device</Text>
          <Text style={styles.subtitle}>Set up this mobile dashboard role.</Text>
        </View>

        <View style={styles.card}>
          <Text style={styles.label}>Device Name</Text>
          <TextInput
            style={styles.input}
            placeholder="e.g. Living Room Client"
            placeholderTextColor="#6b7280"
            value={state.onboardingForm.name}
            onChangeText={(value) => actions.setOnboardingField('name', value)}
          />

          <Text style={styles.label}>Role</Text>
          <View style={styles.roleRow}>
            <Pressable
              style={[styles.roleButton, state.onboardingForm.role === 'camera' ? styles.roleButtonActive : null]}
              onPress={() => actions.selectRole('camera')}>
              <Text style={[styles.roleText, state.onboardingForm.role === 'camera' ? styles.roleTextActive : null]}>
                Camera
              </Text>
            </Pressable>
            <Pressable
              style={[styles.roleButton, state.onboardingForm.role === 'client' ? styles.roleButtonActive : null]}
              onPress={() => actions.selectRole('client')}>
              <Text style={[styles.roleText, state.onboardingForm.role === 'client' ? styles.roleTextActive : null]}>
                Client
              </Text>
            </Pressable>
          </View>

          <Text style={styles.label}>Push Token (Optional)</Text>
          <TextInput
            style={styles.input}
            placeholder="simulated_token_123"
            placeholderTextColor="#6b7280"
            value={state.onboardingForm.pushToken}
            onChangeText={(value) => actions.setOnboardingField('pushToken', value)}
          />

          <Pressable style={styles.primaryButton} onPress={() => void actions.registerDevice()}>
            <Text style={styles.primaryText}>Complete Setup</Text>
          </Pressable>

          <Pressable style={styles.secondaryButton} onPress={() => void actions.loadSavedDevice()}>
            <Text style={styles.secondaryText}>Load previously saved device</Text>
          </Pressable>
        </View>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: {
    flex: 1,
    backgroundColor: '#0a0a0c',
  },
  loading: {
    flex: 1,
    backgroundColor: '#0a0a0c',
    alignItems: 'center',
    justifyContent: 'center',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  heading: {
    marginBottom: 20,
  },
  title: {
    color: '#f9fafb',
    fontSize: 28,
    fontWeight: '700',
  },
  subtitle: {
    color: '#9ca3af',
    fontSize: 13,
    marginTop: 6,
  },
  card: {
    borderRadius: 20,
    backgroundColor: '#111218',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.08)',
    padding: 18,
    gap: 12,
  },
  label: {
    fontSize: 11,
    letterSpacing: 0.6,
    textTransform: 'uppercase',
    color: '#9ca3af',
    fontWeight: '600',
  },
  input: {
    height: 48,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.12)',
    backgroundColor: '#09090d',
    color: '#f3f4f6',
    paddingHorizontal: 12,
  },
  roleRow: {
    flexDirection: 'row',
    gap: 10,
  },
  roleButton: {
    flex: 1,
    height: 42,
    borderRadius: 10,
    backgroundColor: '#1f2230',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.08)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  roleButtonActive: {
    backgroundColor: '#1d4ed8',
    borderColor: '#2563eb',
  },
  roleText: {
    color: '#9ca3af',
    fontWeight: '600',
  },
  roleTextActive: {
    color: '#f9fafb',
  },
  primaryButton: {
    marginTop: 6,
    height: 48,
    borderRadius: 12,
    backgroundColor: '#2563eb',
    alignItems: 'center',
    justifyContent: 'center',
  },
  primaryText: {
    color: '#f9fafb',
    fontWeight: '600',
    fontSize: 16,
  },
  secondaryButton: {
    height: 42,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.08)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  secondaryText: {
    color: '#9ca3af',
    fontSize: 13,
    fontWeight: '500',
  },
});