import { useRouter } from "expo-router";
import React, { useEffect, useState } from "react";
import {
    Pressable,
    ScrollView,
    StyleSheet,
    View,
} from "react-native";

// UI Components & Theme
import AppScreen from "../src/components/ui/AppScreen";
import AppText from "../src/components/ui/AppText";
import { shadows } from "../src/theme/shadows";
import { typography } from "../src/theme/typography";

export default function ServeOrders() {
    const [orders, setOrders] = useState<(Order & { id: string })[]>([]);
    const router = useRouter();

    useEffect(() => {
        const unsubscribe = listenOrders(setOrders);
        return () => unsubscribe();
    }, []);

    // Filter for ready orders
    const readyOrders = orders.filter((o) => o.status === "ready");

    return (
        <AppScreen>
            <View style={styles.header}>
                <Pressable style={styles.backButton} onPress={() => router.back()}>
                    <AppText style={styles.backText}>← Back</AppText>
                </Pressable>
                <AppText style={styles.title}>Orders to Serve</AppText>
            </View>

            <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
                {readyOrders.length === 0 ? (
                    <AppText style={styles.empty}>No orders ready to serve</AppText>
                ) : (
                    <>
                        {readyOrders.map((order) => (
                            <View
                                key={order.id}
                                style={[
                                    styles.orderCard,
                                    { borderLeftColor: "#FBC02D" }, // Yellow for ready
                                ]}
                            >
                                <View style={styles.cardHeader}>
                                    <AppText style={styles.table}>Table {order.taula}</AppText>
                                </View>

                                {order.products.map((p, i) => (
                                    <View key={i} style={styles.productRow}>
                                        <AppText style={styles.quantity}>{p.quantity}x</AppText>
                                        <AppText style={styles.productName}>{p.name}</AppText>
                                        <AppText style={styles.productPrice}>
                                            €{(p.price * p.quantity).toFixed(2)}
                                        </AppText>
                                    </View>
                                ))}

                                <View style={styles.cardFooter}>
                                    <AppText style={styles.total}>
                                        Total: €{order.total_price.toFixed(2)}
                                    </AppText>
                                    <AppText
                                        style={[
                                            styles.status,
                                            { color: "#FBC02D" },
                                        ]}
                                    >
                                        Status: Ready
                                    </AppText>
                                </View>

                                <View style={styles.actions}>
                                    <Pressable
                                        style={styles.actionButton}
                                        onPress={() => updateOrderStatus(order.id, "delivered")}
                                    >
                                        <AppText style={styles.actionText}>Mark as Served</AppText>
                                    </Pressable>
                                </View>
                            </View>
                        ))}
                    </>
                )}
            </ScrollView>
        </AppScreen>
    );
}

const styles = StyleSheet.create({
    header: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 20,
    },
    backButton: {
        marginRight: 20,
    },
    backText: {
        color: "#000",
        fontSize: 16,
        fontFamily: typography.regular,
    },
    title: {
        fontSize: 24,
        fontFamily: typography.semibold,
        color: "#FBC02D",
        marginTop: 0,
        marginBottom: 0,
        textAlign: "left",
    },
    scrollContent: {
        paddingBottom: 40,
    },
    empty: {
        color: "#888",
        fontSize: 16,
        textAlign: "center",
        marginTop: 30,
        fontFamily: typography.regular,
    },
    orderCard: {
        backgroundColor: "#fff",
        padding: 15,
        borderRadius: 12,
        marginBottom: 15,
        borderLeftWidth: 6,
        ...shadows.medium,
    },
    cardHeader: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: 10,
    },
    table: {
        color: "#333",
        fontSize: 18,
        fontFamily: typography.semibold,
        marginTop: 0,
        marginBottom: 0,
    },
    productRow: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 6,
    },
    quantity: {
        color: "#FBC02D",
        fontFamily: typography.semibold,
        fontSize: 16,
        marginRight: 8,
        marginTop: 0,
        marginBottom: 0,
    },
    productName: {
        flex: 1,
        color: "#333",
        fontSize: 16,
        fontFamily: typography.regular,
        marginTop: 0,
        marginBottom: 0,
    },
    productPrice: {
        color: "#666",
        fontSize: 14,
        fontFamily: typography.regular,
        marginTop: 0,
        marginBottom: 0,
    },
    cardFooter: {
        marginTop: 10,
        paddingTop: 10,
        borderTopWidth: 1,
        borderTopColor: "#f0f0f0",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    total: {
        color: "#333",
        fontFamily: typography.semibold,
        marginTop: 0,
        fontSize: 15,
        marginBottom: 0,
    },
    status: {
        fontSize: 14,
        fontFamily: typography.semibold,
        marginTop: 0,
        marginBottom: 0,
    },
    actions: {
        flexDirection: "row",
        marginTop: 15,
    },
    actionButton: {
        flex: 1,
        backgroundColor: "#333",
        paddingVertical: 12,
        borderRadius: 8,
        alignItems: "center",
        ...shadows.small,
    },
    actionText: {
        color: "#fff",
        fontFamily: typography.semibold,
        fontSize: 14,
        marginTop: 0,
        marginBottom: 0,
    },
});
