import { StyleSheet } from "react-native";
import { baseButton, baseContainer, baseLayout, baseSelection, baseText } from "../theme/baseStyles";
import { colors } from "../theme/colors";
import { typography } from "../theme/typography";

export const takenoteStyles = StyleSheet.create({
    // --- HEADER ---
    header: {
        ...baseLayout.row,
        marginBottom: 25,
    },
    backButton: {
        marginRight: 16,
    },
    backText: {
        ...baseText.body,
        fontSize: 16,
    },
    title: {
        ...baseText.h1,
        textAlign: "left",
        marginBottom: 0,
    },

    // --- MAIN LAYOUT ---
    mainRow: {
        flexDirection: "row",
        flex: 1,
        gap: 18,
    },
    column: {
        flex: 1,
    },

    // --- CATEGORY LIST ---
    sectionTitle: {
        ...baseText.h3,
        marginBottom: 12,
    },
    categoryButton: {
        ...baseSelection.item,
        paddingVertical: 14,
        paddingHorizontal: 12,
        marginBottom: 10,
    },
    categorySelected: {
        ...baseSelection.itemSelected,
    },
    categoryText: {
        ...baseSelection.itemText,
        textAlign: "center",
    },
    categoryTextSelected: {
        ...baseSelection.itemTextSelected,
    },

    // --- PRODUCT GRID ---
    productGrid: {
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "space-between",
    },

    productButton: {
        ...baseSelection.item,
        paddingVertical: 12,
        paddingHorizontal: 10,
        marginBottom: 10,
    },
    productSelected: {
        ...baseSelection.itemSelected,
    },
    productText: {
        ...baseSelection.itemText,
        fontSize: 13,
        textAlign: "center",
    },
    productTextSelected: {
        ...baseSelection.itemTextSelected,
    },

    // badge con cantidad dentro del botón
    productBadge: {
        position: "absolute",
        top: 6,
        right: 8,
        minWidth: 20,
        paddingHorizontal: 6,
        paddingVertical: 2,
        borderRadius: 10,
        backgroundColor: "rgba(0,0,0,0.1)",
        alignItems: "center",
        justifyContent: "center",
    },
    productBadgeText: {
        fontSize: 11,
        fontFamily: typography.semibold,
        color: colors.textDark,
    },

    // --- ORDER SUMMARY ---
    orderContainer: {
        ...baseContainer.card,
        flexDirection: "column",
    },
    orderTitle: {
        ...baseText.h2,
        textAlign: "center",
        marginBottom: 18,
    },
    orderList: {
        flex: 1,
    },
    orderItem: {
        ...baseLayout.spaceBetween,
        marginBottom: 14,
        paddingBottom: 12,
        borderBottomWidth: 1,
        borderBottomColor: colors.gray100,
    },
    orderItemInfo: {
        flex: 1,
    },
    orderText: {
        ...baseText.body,
        fontFamily: typography.semibold,
        marginBottom: 4,
    },
    orderPrice: {
        ...baseText.bodySmall,
        color: colors.gray500,
    },

    // --- QUANTITY SELECTOR ---
    quantityContainer: {
        ...baseLayout.row,
        backgroundColor: colors.gray50,
        borderRadius: 8,
        paddingHorizontal: 5,
    },
    quantityButton: {
        paddingHorizontal: 10,
        paddingVertical: 5,
    },
    quantityText: {
        fontFamily: typography.semibold,
        fontSize: 16,
        color: colors.textDark,
    },
    quantityValue: {
        fontFamily: typography.semibold,
        color: colors.textDark,
        fontSize: 14,
        marginHorizontal: 8,
    },

    // --- FOOTER ---
    footer: {
        marginTop: 10,
        borderTopWidth: 1,
        borderTopColor: colors.gray100,
        paddingTop: 18,
    },
    total: {
        fontFamily: typography.semibold,
        fontSize: 18,
        color: colors.textDark,
        textAlign: "right",
        marginBottom: 15,
    },

    // --- SEND BUTTON ---
    sendButtonWrapper: {
        ...baseButton.wrapperSmall,
    },
    sendButton: {
        ...baseButton.buttonSmall,
    },
    sendText: {
        ...baseButton.textSmall,
    },
});
