import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet, Text } from 'react-native';
import { signInWithEmailAndPassword, createUserWithEmailAndPassword } from 'firebase/auth';
import { doc, setDoc, getDoc } from 'firebase/firestore';
import { auth, db } from '../config/firebase';

export default function LoginScreen({ navigation }: any) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isAdmin, setIsAdmin] = useState(false);

  const handleLogin = async () => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      const userDoc = await getDoc(doc(db, 'users', userCredential.user.uid));
      const role = userDoc.data()?.role || 'user';
      navigation.replace(role === 'admin' ? 'Admin' : 'Profile');
    } catch (error: any) {
      alert(error.message);
    }
  };

  const handleRegister = async () => {
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      await setDoc(doc(db, 'users', userCredential.user.uid), {
        email,
        role: isAdmin ? 'admin' : 'user',
      });
      navigation.replace(isAdmin ? 'Admin' : 'Profile');
    } catch (error: any) {
      alert(error.message);
    }
  };

  return (
    <View style={styles.container}>
      <TextInput style={styles.input} placeholder="Email" value={email} onChangeText={setEmail} />
      <TextInput style={styles.input} placeholder="Jelszó" value={password} onChangeText={setPassword} secureTextEntry />
      <Button title="Bejelentkezés" onPress={handleLogin} color="#ff00ff" />
      <Button title="Regisztráció" onPress={handleRegister} color="#ff00ff" />
      <Text onPress={() => setIsAdmin(!isAdmin)} style={styles.toggle}>
        {isAdmin ? 'Admin mód' : 'User mód'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, justifyContent: 'center', backgroundColor: '#000000' },
  input: { borderWidth: 1, borderColor: '#333333', padding: 8, marginBottom: 16, borderRadius: 4, backgroundColor: '#1a1a1a', color: '#ffffff' },
  toggle: { marginTop: 16, textAlign: 'center', color: '#ff00ff' },
});