import React, { useState } from 'react';
import {
  View, Text, TextInput, TouchableOpacity,
  StyleSheet, Alert, ActivityIndicator, ScrollView,
} from 'react-native';
import { register } from '../../services/api';

export default function RegisterScreen({ navigation }: any) {
  const [name, setName]         = useState('');
  const [email, setEmail]       = useState('');
  const [phone, setPhone]       = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading]   = useState(false);

  const handleRegister = async () => {
    if (!name.trim() || !email.trim() || !password) {
      Alert.alert('Error', 'Name, email and password are required.');
      return;
    }
    setLoading(true);
    try {
      await register(name.trim(), email.trim(), phone.trim(), password);
      Alert.alert('Success', 'Account created! You can now log in.', [
        { text: 'OK', onPress: () => navigation.replace('Login') },
      ]);
    } catch (err: any) {
      const msg = err?.response?.data?.error || 'Registration failed.';
      Alert.alert('Error', msg);
    } finally {
      setLoading(false);
    }
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <View style={styles.card}>
        <Text style={styles.logo}>🔥 Stile Energy</Text>
        <Text style={styles.title}>Create Account</Text>
        <Text style={styles.subtitle}>Start ordering LPG gas today</Text>

        <TextInput style={styles.input} placeholder="Full name" placeholderTextColor="#94a3b8"
          value={name} onChangeText={setName} />
        <TextInput style={styles.input} placeholder="Email address" placeholderTextColor="#94a3b8"
          value={email} onChangeText={setEmail} keyboardType="email-address" autoCapitalize="none" />
        <TextInput style={styles.input} placeholder="Phone number (optional)" placeholderTextColor="#94a3b8"
          value={phone} onChangeText={setPhone} keyboardType="phone-pad" />
        <TextInput style={styles.input} placeholder="Password (min 6 chars)" placeholderTextColor="#94a3b8"
          value={password} onChangeText={setPassword} secureTextEntry />

        <TouchableOpacity style={styles.btn} onPress={handleRegister} disabled={loading}>
          {loading
            ? <ActivityIndicator color="#fff" />
            : <Text style={styles.btnText}>Create Account</Text>}
        </TouchableOpacity>

        <TouchableOpacity onPress={() => navigation.navigate('Login')}>
          <Text style={styles.link}>Already have an account? <Text style={styles.linkBold}>Sign In</Text></Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flexGrow: 1, backgroundColor: '#0f172a', justifyContent: 'center', padding: 24 },
  card:      { backgroundColor: '#1e293b', borderRadius: 16, padding: 28 },
  logo:      { fontSize: 28, textAlign: 'center', marginBottom: 8 },
  title:     { fontSize: 24, fontWeight: '700', color: '#fff', textAlign: 'center' },
  subtitle:  { fontSize: 14, color: '#94a3b8', textAlign: 'center', marginBottom: 28 },
  input:     {
    backgroundColor: '#0f172a', borderRadius: 10, padding: 14,
    color: '#fff', marginBottom: 14, fontSize: 15,
    borderWidth: 1, borderColor: '#334155',
  },
  btn:      { backgroundColor: '#f97316', borderRadius: 10, padding: 16, alignItems: 'center', marginTop: 4 },
  btnText:  { color: '#fff', fontSize: 16, fontWeight: '700' },
  link:     { color: '#94a3b8', textAlign: 'center', marginTop: 20 },
  linkBold: { color: '#f97316', fontWeight: '700' },
});
