import { MaterialIcons } from '@expo/vector-icons';
import axios from 'axios';
import { useRouter } from 'expo-router';
import * as SecureStore from 'expo-secure-store';
import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from "react";
import { ActivityIndicator, Alert, Platform, StyleSheet, Text, TextInput, ToastAndroid, TouchableOpacity, View } from "react-native";

const PRIMARY = '#A24BFA';
const BG = '#0c0a0a';

export default function Index() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [autoLogin, setAutoLogin] = useState(false);
  const router = useRouter();

  useEffect(() => {
    (async () => {
      const savedEmail = await SecureStore.getItemAsync('email');
      const savedPassword = await SecureStore.getItemAsync('password');
      console.log('Mentett email:', savedEmail, 'Mentett password:', savedPassword);
      if (savedEmail && savedPassword) {
        setUsername(savedEmail);
        setPassword(savedPassword);
        setAutoLogin(true);
        setTimeout(() => {
          handleLogin(savedEmail, savedPassword, true);
        }, 1000);
      }
    })();
  }, []);

  async function handleLogin(emailOverride?: string, passwordOverride?: string, isAuto?: boolean) {
    setLoading(true);
    const user = emailOverride ?? username;
    const pass = passwordOverride ?? password;
    console.log('Login attempt:', user);
    try {
      const response = await axios.post(
        "https://mymenu.mcdonalds.hu/api/AccountApi/Login",
        {
          Data: {
            UserName: user,
            Password: pass
          }
        },
        {
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'referer': 'https://mymenu.mcdonalds.hu/',
            'origin': 'https://mymenu.mcdonalds.hu'
          }
        }
      );
      //console.log('Login response:', response.data, response.headers);
      const cookie = response.headers['set-cookie']?.join('; ');
      const userId = response.data.Data.UserID;
      const fullName = response.data.Data.FullName;
      await SecureStore.setItemAsync('cookie', cookie || '');
      await SecureStore.setItemAsync('userId', String(userId));
      await SecureStore.setItemAsync('email', user);
      await SecureStore.setItemAsync('password', pass);
      await SecureStore.setItemAsync('fullName', fullName || '');
      //console.log('Saved to SecureStore:', { cookie, userId, user, pass, fullName });
      if (isAuto) {
        if (Platform.OS === 'android') {
          ToastAndroid.show('Sikeres automatikus bejelentkezés', ToastAndroid.SHORT);
        } else {
          // iOS: custom toast helyett Alert
          console.log('Sikeres automatikus bejelentkezés');
        }
      }
      router.replace('/profile');
    } catch (e) {
      console.log('Login error:', e);
      Alert.alert('Hiba', 'Hibás felhasználónév vagy jelszó, vagy hálózati hiba.');
    } finally {
      setLoading(false);
      setAutoLogin(false);
    }
  }

  return (
    <View style={styles.container}>
      <StatusBar style="light" backgroundColor={BG} />
      <View style={styles.card}>
        <Text style={styles.title}>Üdv újra</Text>
        <Text style={styles.subtitle}>Jelentkezz be a mymenu fiókodba</Text>
        <View style={{ height: 24 }} />
        <Text style={styles.label}>Felhasználónév</Text>
        <View style={styles.inputRow}>
          <MaterialIcons name="email" size={22} color="#bdbdbd" style={{ marginRight: 8 }} />
          <TextInput
            style={styles.input}
            placeholder="valaki@gmail.com"
            placeholderTextColor="#aaa"
            value={username}
            onChangeText={setUsername}
            autoCapitalize="none"
          />
        </View>
        <View style={{ height: 16 }} />
        <Text style={styles.label}>Jelszó</Text>
        <View style={styles.inputRow}>
          <MaterialIcons name="lock" size={22} color="#bdbdbd" style={{ marginRight: 8 }} />
          <TextInput
            style={styles.input}
            placeholder="••••••••"
            placeholderTextColor="#aaa"
            value={password}
            onChangeText={setPassword}
            secureTextEntry
          />
        </View>
        <View style={{ height: 24 }} />
        <TouchableOpacity style={styles.button} onPress={() => handleLogin()} disabled={loading}>
          {loading ? (
            <ActivityIndicator color="#fff" />
          ) : (
            <Text style={styles.buttonText}>Bejelentkezés</Text>
          )}
        </TouchableOpacity>
      </View>
      {(loading || autoLogin) && (
        <View style={styles.loadingOverlay}>
          <ActivityIndicator size="large" color={PRIMARY} />
          <Text style={styles.loadingText}>{autoLogin ? 'Bejelentkezés...' : 'Betöltés...'}</Text>
        </View>
      )}
    </View>
  );
}

export const options = {
  headerShown: false,
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: BG,
    justifyContent: 'center',
    alignItems: 'center',
  },
  card: {
    width: '90%',
    maxWidth: 400,
    backgroundColor: 'rgba(24, 20, 28, 0.95)',
    borderRadius: 24,
    padding: 32,
    shadowColor: '#000',
    shadowOpacity: 0.3,
    shadowRadius: 24,
    shadowOffset: { width: 0, height: 8 },
    elevation: 8,
  },
  title: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 28,
    textAlign: 'center',
    marginBottom: 4,
  },
  subtitle: {
    color: '#bdbdbd',
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 24,
  },
  label: {
    color: '#bdbdbd',
    fontSize: 14,
    marginBottom: 8,
  },
  inputRow: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(20,18,24,1)',
    borderColor: PRIMARY,
    borderWidth: 1,
    borderRadius: 12,
    marginBottom: 16,
    paddingHorizontal: 8,
  },
  input: {
    flex: 1,
    backgroundColor: 'transparent',
    color: '#fff',
    paddingHorizontal: 8,
    paddingVertical: 12,
    fontSize: 16,
    borderWidth: 0,
  },
  button: {
    backgroundColor: PRIMARY,
    borderRadius: 12,
    paddingVertical: 14,
    alignItems: 'center',
    marginTop: 8,
    shadowColor: PRIMARY,
    shadowOpacity: 0.3,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 2 },
    elevation: 2,
  },
  buttonText: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 18,
  },
  loadingOverlay: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(12,10,10,0.85)',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10,
  },
  loadingText: {
    color: PRIMARY,
    fontSize: 18,
    marginTop: 16,
    fontWeight: 'bold',
  },
});