Free Fire AI

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, Alert, Slider, TouchableOpacity, ScrollView } from 'react-native';

// Login hardcoded
const USER = 'FF';
const PASS = '25';

export default function App() {
  const [stage, setStage] = useState('login'); // login or menu or screens
  const [username, setUsername] = useState(USER);
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  // States for sensitivity calibration
  const [sensi, setSensi] = useState(50);
  const [redDot, setRedDot] = useState(50);
  const [scope2x, setScope2x] = useState(50);
  const [scope4x, setScope4x] = useState(50);
  const [awm, setAwm] = useState(50);
  const [peek, setPeek] = useState(50);
  const [dpi, setDpi] = useState(50);

  // States for performance
  const [shadows, setShadows] = useState(true);
  const [resolution, setResolution] = useState('Médio');
  const [graphics, setGraphics] = useState('Médio');
  const [fps, setFps] = useState(60);

  // IA Training suggestions mock
  const [iaSuggest, setIaSuggest] = useState('Use mira 2x para precisão em média distância.');

  // Feedback status
  const [statusMsg, setStatusMsg] = useState('');

  // Handlers
  function handleLogin() {
    if (username === USER && password === PASS) {
      setError('');
      setStage('menu');
      setStatusMsg('Login bem sucedido!');
    } else {
      setError('Usuário ou senha incorretos!');
      setStatusMsg('');
    }
  }

  function renderLogin() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Free Fire AI</Text>
        <TextInput 
          style={styles.input} 
          value={username} 
          editable={false} 
          placeholder="Usuário"
        />
        <TextInput 
          style={styles.input} 
          value={password} 
          placeholder="Senha" 
          onChangeText={setPassword} 
          secureTextEntry 
        />
        {error ? <Text style={styles.error}>{error}</Text> : null}
        <Button title="Entrar" onPress={handleLogin} />
      </View>
    );
  }

  function renderMenu() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Menu Principal</Text>
        <TouchableOpacity style={styles.button} onPress={() => setStage('calibrar')}>
          <Text style={styles.btnText}>Calibrar Sensi</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => setStage('desempenho')}>
          <Text style={styles.btnText}>Melhorar Desempenho</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => setStage('iaTreino')}>
          <Text style={styles.btnText}>IA de Treino</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => setStage('configuracoes')}>
          <Text style={styles.btnText}>Configurações Gerais</Text>
        </TouchableOpacity>
        <View style={styles.statusBar}>
          <Text>{statusMsg}</Text>
        </View>
      </View>
    );
  }

  function renderCalibrar() {
    return (
      <ScrollView style={styles.container}>
        <Text style={styles.title}>Calibrar Sensibilidade</Text>
        {renderSlider('Sensibilidade Geral', sensi, setSensi)}
        {renderSlider('Mira Ponto Vermelho', redDot, setRedDot)}
        {renderSlider('Mira 2x', scope2x, setScope2x)}
        {renderSlider('Mira 4x', scope4x, setScope4x)}
        {renderSlider('AWM', awm, setAwm)}
        {renderSlider('Olhadinha', peek, setPeek)}
        {renderSlider('DPI', dpi, setDpi)}
        <Button title="Aplicar" onPress={() => setStatusMsg('Calibragem aplicada!')} />
        <Button title="Voltar" onPress={() => setStage('menu')} color="#888" />
      </ScrollView>
    );
  }

  function renderSlider(label, value, setValue) {
    return (
      <View style={{marginVertical: 10}}>
        <Text>{label}: {value}</Text>
        <Slider 
          minimumValue={0}
          maximumValue={100}
          step={1}
          value={value}
          onValueChange={setValue}
        />
      </View>
    );
  }

  function renderDesempenho() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Melhorar Desempenho</Text>
        <View style={{marginVertical: 10, flexDirection: 'row', justifyContent: 'space-between'}}>
          <Text>Sombras</Text>
          <Button title={shadows ? "Ligado" : "Desligado"} onPress={() => setShadows(!shadows)} />
        </View>
        <Text>Resolução: {resolution}</Text>
        {renderOptionSelector(['Baixa','Médio','Alta'], resolution, setResolution)}
        <Text>Gráficos: {graphics}</Text>
        {renderOptionSelector(['Baixa','Médio','Alta'], graphics, setGraphics)}
        <Text>FPS: {fps}</Text>
        {renderOptionSelector([30,60,90,120], fps, setFps)}
        <Button title="Aplicar" onPress={() => setStatusMsg('Configurações de desempenho aplicadas!')} />
        <Button title="Voltar" onPress={() => setStage('menu')} color="#888" />
      </View>
    );
  }

  function renderOptionSelector(options, selected, setSelected) {
    return (
      <View style={{flexDirection: 'row', marginVertical: 5}}>
        {options.map(opt => (
          <TouchableOpacity 
            key={opt.toString()} 
            style={[styles.optionButton, opt === selected && styles.optionSelected]} 
            onPress={() => setSelected(opt)}>
            <Text style={opt === selected ? {color: '#fff'} : {}}>{opt}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }

  function renderIaTreino() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>IA de Treino</Text>
        <Text>Dica automática para facilitar capas:</Text>
        <View style={styles.iaBox}>
          <Text>{iaSuggest}</Text>
        </View>
        <Button title="Aplicar sugestão" onPress={() => setStatusMsg('Sugestão aplicada!')} />
        <Button title="Voltar" onPress={() => setStage('menu')} color="#888" />
      </View>
    );
  }

  function renderConfiguracoes() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Configurações Gerais</Text>
        <Button title="Resetar calibragens" onPress={() => {
          setSensi(50); setRedDot(50); setScope2x(50); setScope4x(50); setAwm(50); setPeek(50); setDpi(50);
          setStatusMsg('Calibragens resetadas!');
        }} />
        <Button title="Voltar" onPress={() => setStage('menu')} color="#888" />
      </View>
    );
  }

  switch(stage) {
    case 'login': return renderLogin();
    case 'menu': return renderMenu();
    case 'calibrar': return renderCalibrar();
    case 'desempenho': return renderDesempenho();
    case 'iaTreino': return renderIaTreino();
    case 'configuracoes': return renderConfiguracoes();
    default: return renderLogin();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    padding: 20, 
    justifyContent: 'flex-start',
    backgroundColor: '#f5f5f5'
  },
  title: {
    fontSize: 24, 
    fontWeight: 'bold', 
    marginBottom: 20, 
    textAlign: 'center'
  },
  input: {
    height: 40, 
    borderColor: '#999', 
    borderWidth: 1, 
    marginBottom: 15,
    borderRadius: 5,
    paddingLeft: 10,
    backgroundColor: '#fff'
  },
  error: {
    color: 'red', 
    marginBottom: 10, 
    textAlign: 'center'
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    marginVertical: 7,
    borderRadius: 5,
  },
  btnText: {
    color: '#fff',
    fontWeight: '600',
    textAlign: 'center'
  },
  statusBar: {
    marginTop: 20,
    padding: 10,
    backgroundColor: '#ddd',
    borderRadius: 8,
    alignItems: 'center'
  },
  optionButton: {
    paddingHorizontal: 15,
    paddingVertical: 8,
    marginRight: 10,
    borderWidth: 1,
    borderColor: '#007AFF',
    borderRadius: 5
  },
  optionSelected: {
    backgroundColor: '#007AFF',
  },
  iaBox: {
    marginVertical: 15,
    padding: 10,
    backgroundColor: '#e3e3e3',
    borderRadius: 5
  }
});