import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

import { CustomerLoginForm } from "@/components/auth/customer-login-form";
import { CustomerDashboard } from "@/components/customer/customer-dashboard";
import { AppScreenHeader } from "@/components/shared/app-screen-header";
import { useMobileAuth } from "@/hooks/use-mobile-auth";

export default function HomeScreen() {
    const { error, isLoggingOut, isSubmitting, login, logout, session } = useMobileAuth();

    return (
        <SafeAreaView style={styles.safeArea}>
            <KeyboardAvoidingView
                behavior={Platform.OS === "ios" ? "padding" : undefined}
                style={styles.keyboardView}
            >
                <ScrollView
                    contentContainerStyle={styles.scrollContent}
                    keyboardShouldPersistTaps="handled"
                >
                    <AppScreenHeader />

                    {session ? (
                        <CustomerDashboard
                            user={session.user}
                            isLoggingOut={isLoggingOut}
                            onLogout={logout}
                        />
                    ) : (
                        <CustomerLoginForm
                            error={error}
                            isSubmitting={isSubmitting}
                            onSubmit={login}
                        />
                    )}
                </ScrollView>
            </KeyboardAvoidingView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    safeArea: {
        flex: 1,
        backgroundColor: "#f7f8f3",
    },
    keyboardView: {
        flex: 1,
    },
    scrollContent: {
        flexGrow: 1,
        justifyContent: "center",
        padding: 24,
    },
});