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

import { AccountSummary } from "@/components/customer/account-summary";
import { PaymentLinks } from "@/components/customer/payment-links";
import { AppButton } from "@/components/shared/app-button";
import type { MobileUser } from "@/lib/api";

type CustomerDashboardProps = {
    user: MobileUser;
    isLoggingOut: boolean;
    onLogout: () => void;
};

export function CustomerDashboard({
    user,
    isLoggingOut,
    onLogout,
}: CustomerDashboardProps) {
    return (
        <View style={styles.panel}>
            <View style={styles.userHeader}>
                <View style={styles.avatar}>
                    <MaterialCommunityIcons name="account" size={26} color="#ffffff" />
                </View>
                <View style={styles.userHeaderText}>
                    <Text style={styles.welcome}>
                        გამარჯობა, {user.name ?? "მომხმარებელო"}
                    </Text>
                    <Text style={styles.accountNumber}>#{user.account_number}</Text>
                </View>
            </View>

            <AccountSummary user={user} />
            <PaymentLinks />

            <AppButton
                label="ანგარიშიდან გამოსვლა"
                icon="logout"
                onPress={onLogout}
                loading={isLoggingOut}
                disabled={isLoggingOut}
                variant="secondary"
            />
        </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,
    },
    userHeader: {
        alignItems: "center",
        flexDirection: "row",
        gap: 12,
    },
    avatar: {
        alignItems: "center",
        backgroundColor: "#2c7a5b",
        borderRadius: 8,
        height: 50,
        justifyContent: "center",
        width: 50,
    },
    userHeaderText: {
        flex: 1,
        gap: 3,
    },
    welcome: {
        color: "#18202a",
        fontSize: 20,
        fontWeight: "700",
        lineHeight: 26,
    },
    accountNumber: {
        color: "#5f6b7a",
        fontSize: 14,
        lineHeight: 20,
    },
});