import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useState } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";

import { AppButton } from "@/components/shared/app-button";

type CustomerLoginFormProps = {
    error: string | null;
    isSubmitting: boolean;
    onSubmit: (credentials: { accountNumber: string; password: string }) => Promise<boolean>;
};

export function CustomerLoginForm({
    error,
    isSubmitting,
    onSubmit,
}: CustomerLoginFormProps) {
    const [accountNumber, setAccountNumber] = useState("");
    const [password, setPassword] = useState("");

    async function submit() {
        const didLogin = await onSubmit({
            accountNumber,
            password,
        });

        if (didLogin) {
            setPassword("");
        }
    }

    return (
        <View style={styles.panel}>
            <Text style={styles.title}>ანგარიშზე შესვლა</Text>

            <View style={styles.fieldGroup}>
                <Text style={styles.label}>აბონენტის ნომერი ან ელ. ფოსტა</Text>
                <View style={styles.inputShell}>
                    <MaterialCommunityIcons
                        name="account-key-outline"
                        size={20}
                        color="#5f6b7a"
                    />
                    <TextInput
                        value={accountNumber}
                        onChangeText={setAccountNumber}
                        autoCapitalize="none"
                        autoCorrect={false}
                        keyboardType="email-address"
                        placeholder="1001"
                        placeholderTextColor="#8a96a6"
                        style={styles.input}
                        returnKeyType="next"
                    />
                </View>
            </View>

            <View style={styles.fieldGroup}>
                <Text style={styles.label}>პაროლი</Text>
                <View style={styles.inputShell}>
                    <MaterialCommunityIcons name="lock-outline" size={20} color="#5f6b7a" />
                    <TextInput
                        value={password}
                        onChangeText={setPassword}
                        secureTextEntry
                        placeholder="••••••••"
                        placeholderTextColor="#8a96a6"
                        style={styles.input}
                        returnKeyType="send"
                        onSubmitEditing={submit}
                    />
                </View>
            </View>

            {error ? (
                <View style={styles.errorBox}>
                    <MaterialCommunityIcons
                        name="alert-circle-outline"
                        size={18}
                        color="#a33a2b"
                    />
                    <Text style={styles.errorText}>{error}</Text>
                </View>
            ) : null}

            <AppButton
                label="შესვლა"
                icon="login"
                onPress={submit}
                loading={isSubmitting}
                disabled={isSubmitting}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    panel: {
        backgroundColor: "#ffffff",
        borderColor: "#d9dfd2",
        borderRadius: 8,
        borderWidth: StyleSheet.hairlineWidth,
        elevation: 3,
        gap: 20,
        padding: 20,
        shadowColor: "#1f2933",
        shadowOffset: { width: 0, height: 12 },
        shadowOpacity: 0.08,
        shadowRadius: 24,
    },
    title: {
        color: "#18202a",
        fontSize: 24,
        fontWeight: "700",
        lineHeight: 30,
    },
    fieldGroup: {
        gap: 8,
    },
    label: {
        color: "#384351",
        fontSize: 14,
        fontWeight: "600",
        lineHeight: 20,
    },
    inputShell: {
        alignItems: "center",
        borderColor: "#cfd8c6",
        borderRadius: 8,
        borderWidth: 1,
        flexDirection: "row",
        gap: 10,
        minHeight: 52,
        paddingHorizontal: 14,
    },
    input: {
        color: "#18202a",
        flex: 1,
        fontSize: 16,
        minHeight: 50,
    },
    errorBox: {
        alignItems: "center",
        backgroundColor: "#fff2ef",
        borderColor: "#f0b8ad",
        borderRadius: 8,
        borderWidth: 1,
        flexDirection: "row",
        gap: 8,
        padding: 12,
    },
    errorText: {
        color: "#a33a2b",
        flex: 1,
        fontSize: 14,
        lineHeight: 20,
    },
});