import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { spacing, borderRadius, fontSize, fontWeight, shadows } from "../theme";
import { useTheme } from "../context/ThemeContext";
import StatusBadge from "./StatusBadge";
import { formatOrderDate, calculateOrderTotal, formatPrice } from "../api/api";

interface OrderCardProps {
    order: {
        id: number;
        status: string;
        adresse?: string;
        delivery_address?: string;
        created_at: string;
        total?: number;
        total_prix?: number;
        livreur_assign?: string;
        items?: any[];
    };
    onPress: () => void;
}

export default function OrderCard({ order, onPress }: OrderCardProps) {
    const { colors } = useTheme();
    const total = calculateOrderTotal(order);
    const address =
        order.delivery_address || order.adresse || "Adresse inconnue";

    return (
        <TouchableOpacity
            onPress={onPress}
            activeOpacity={0.7}
            style={[
                styles.card,
                shadows.sm,
                {
                    backgroundColor: colors.bgCard,
                    borderColor: colors.borderLight,
                },
            ]}
        >
            <View style={styles.header}>
                <Text style={[styles.orderId, { color: colors.textWhite }]}>
                    Commande #{order.id}
                </Text>
                <StatusBadge status={order.status} />
            </View>

            <View style={styles.body}>
                <View style={styles.row}>
                    <Ionicons
                        name="location-outline"
                        size={14}
                        color={colors.textMuted}
                    />
                    <Text
                        style={[styles.detail, { color: colors.textSecondary }]}
                        numberOfLines={1}
                    >
                        {address}
                    </Text>
                </View>
                <View style={styles.row}>
                    <Ionicons
                        name="time-outline"
                        size={14}
                        color={colors.textMuted}
                    />
                    <Text
                        style={[styles.detail, { color: colors.textSecondary }]}
                    >
                        {formatOrderDate(order.created_at)}
                    </Text>
                </View>
                {order.livreur_assign && (
                    <View style={styles.row}>
                        <Ionicons
                            name="bicycle-outline"
                            size={14}
                            color={colors.textMuted}
                        />
                        <Text
                            style={[
                                styles.detail,
                                { color: colors.textSecondary },
                            ]}
                        >
                            {order.livreur_assign}
                        </Text>
                    </View>
                )}
            </View>

            <View
                style={[styles.footer, { borderTopColor: colors.borderLight }]}
            >
                <Text style={[styles.total, { color: colors.success }]}>
                    {formatPrice(total)}
                </Text>
                <Ionicons
                    name="chevron-forward"
                    size={18}
                    color={colors.textMuted}
                />
            </View>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    card: {
        borderRadius: borderRadius.md,
        padding: spacing.l,
        marginBottom: spacing.m,
        borderWidth: 1,
    },
    header: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: spacing.m,
    },
    orderId: {
        fontSize: fontSize.md,
        fontWeight: fontWeight.semibold,
    },
    body: {
        marginBottom: spacing.m,
    },
    row: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: spacing.xs,
    },
    detail: {
        fontSize: fontSize.sm,
        marginLeft: spacing.s,
        flex: 1,
    },
    footer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        borderTopWidth: 1,
        paddingTop: spacing.m,
    },
    total: {
        fontSize: fontSize.lg,
        fontWeight: fontWeight.bold,
    },
});