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

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

  const handleLogin = async () => {
    if (!email.trim() || !password) {
      Alert.alert('Error', 'Please enter your email and password.');
      return;
    }
    setLoading(true);
    try {
      const data = await login(email.trim(), password);
      if (data.user.role === 'admin') {
        navigation.replace('AdminTabs');
      } else {
        navigation.replace('CustomerTabs');
      }
    } catch (err: any) {
      const msg = err?.response?.data?.error || 'Login failed. Please try again.';
      Alert.alert('Login Failed', msg);
    } finally {
      setLoading(false);
    }
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <View style={styles.card}>
        <Text style={styles.logo}>🔥 Stile Energy</Text>
        <Text style={styles.title}>Welcome Back</Text>
        <Text style={styles.subtitle}>Sign in to your account</Text>

        <TextInput
          style={styles.input}
          placeholder="Email address"
          placeholderTextColor="#94a3b8"
          value={email}
          onChangeText={setEmail}
          keyboardType="email-address"
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholder="Password"
          placeholderTextColor="#94a3b8"
          value={password}
          onChangeText={setPassword}
          secureTextEntry
        />

        <TouchableOpacity style={styles.btn} onPress={handleLogin} disabled={loading}>
          {loading
            ? <ActivityIndicator color="#fff" />
            : <Text style={styles.btnText}>Sign In</Text>}
        </TouchableOpacity>

        <TouchableOpacity onPress={() => navigation.navigate('Register')}>
          <Text style={styles.link}>Don't have an account? <Text style={styles.linkBold}>Register</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' },
});
