import { View, Text, StyleSheet, Alert } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useRouter } from "expo-router";

import { COLORS } from "../constants/colors";
import PrimaryButton from "../components/PrimaryButton";

import { useApp } from "../context/AppContext";
import { resetDemo } from "../services/tracking.service";

export default function ProfileScreen() {
    const { user, logout, refreshStatus } = useApp();
    const router = useRouter();

    const handleResetDemo = async () => {
        try {
            await resetDemo();
            await refreshStatus();
            Alert.alert("Demo reiniciado", "Estado y notificaciones borradas.");
        } catch (err) {
            Alert.alert(
                "Error",
                err instanceof Error ? err.message : "No se pudo reiniciar",
            );
        }
    };

    if (!user) {
        return (
            <SafeAreaView style={styles.container}>
                <View style={styles.content}>
                    <Text style={styles.title}>No has iniciado sesión</Text>
                    <PrimaryButton
                        title="Iniciar sesión"
                        onPress={() => router.push("/login")}
                    />
                </View>
            </SafeAreaView>
        );
    }

    const handleLogout = () => {
        logout();
        router.replace("/login");
    };

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.content}>
                <Text style={styles.title}>Hola, {user.name}</Text>
                <Text style={styles.email}>{user.email}</Text>

                <View style={{ height: 24 }} />

                <PrimaryButton
                    title="Mi domicilio"
                    onPress={() => router.push("/addresses")}
                />

                <View style={{ height: 12 }} />

                <PrimaryButton
                    title="Buzón de retroalimentación"
                    onPress={() => router.push("/feedback")}
                />

                <View style={{ height: 12 }} />

                <PrimaryButton
                    title="Reiniciar demo"
                    onPress={handleResetDemo}
                />

                <View style={{ height: 12 }} />

                <PrimaryButton title="Cerrar sesión" onPress={handleLogout} />
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: COLORS.background,
    },
    content: {
        flex: 1,
        padding: 24,
        justifyContent: "center",
    },
    title: {
        fontSize: 22,
        fontWeight: "bold",
        textAlign: "center",
        marginBottom: 6,
    },
    email: {
        fontSize: 14,
        color: "#6B7280",
        textAlign: "center",
        marginBottom: 16,
    },
});