import { Dimensions, Platform, StyleSheet } from "react-native";
import { baseButton, baseInput, baseSelection, baseText } from "../theme/baseStyles";
import { colors } from "../theme/colors";
import { shadows } from "../theme/shadows";
import { typography } from "../theme/typography";

// Dynamic square size based on platform
const getSquareSize = () => {
    if (Platform.OS === "web") return 80; // Larger squares for web
    if (Dimensions.get("window").width >= 600) return 60; // Medium squares for tablets and large phones
    return 40; // Smaller squares for small phones
};

const SQUARE_SIZE = getSquareSize();
const getIsLargeDisplay = () => {
    const { width } = Dimensions.get("window");
    return Platform.OS === "web" || (Dimensions.get("window").width >= 400) || width >= 768;
};

const getTableAbbreviationFontSize = () => {
    if (getIsLargeDisplay()) return 16;
    return 10;
};

const getConfirmButtonFontSize = () => {
    if (getIsLargeDisplay()) return 18;
    return 16;
};

const TABLE_ABBR_FONT_SIZE = getTableAbbreviationFontSize();
const TABLE_ABBR_SELECTED_FONT_SIZE = getIsLargeDisplay() ? 18 : TABLE_ABBR_FONT_SIZE + 2;

export const tableSelectStyles = StyleSheet.create({
    scrollContent: {
        paddingBottom: 20,
        alignItems: "center", // Center content on larger screens
    },
    backButton: {
        alignSelf: "flex-start",
        marginBottom: 0,
    },
    backText: {
        ...baseText.body,
        fontSize: 16,
        color: colors.black,
    },

    // Input Section
    inputSection: {
        marginBottom: 20,
        width: "100%",
        maxWidth: 600,
    },
    label: {
        ...baseInput.label,
        color: colors.textDark,
        marginTop: 0,
    },
    input: {
        ...baseInput.input,
        ...baseInput.container,
        marginBottom: 0,
    },
    inputFocused: {
        ...baseInput.containerFocused,
    },

    // Grid Container
    gridContainer: {
        marginBottom: 10,
        borderWidth: 1,
        borderColor: colors.black,
        borderRadius: 12,
        padding: 8,
        backgroundColor: colors.white,
        alignSelf: "center",
        maxWidth: "95%", // Prevent border cutoff on mobile
    },
    gridRow: {
        flexDirection: "row",
        marginBottom: 6,
        gap: 6,
    },

    // Table Squares
    tableSquare: {
        ...baseSelection.item,
        width: SQUARE_SIZE,
        height: SQUARE_SIZE,
        borderRadius: 10,
        backgroundColor: colors.gray50,
        paddingHorizontal: 4,
        paddingVertical: 4,
        justifyContent: "center",
        alignItems: "center",
    },
    tableSquareSelected: {
        ...baseSelection.itemSelected,
        borderWidth: 0,
        ...shadows.medium,
    },
    tableAbbreviation: {
        ...baseSelection.itemText,
        fontSize: TABLE_ABBR_FONT_SIZE,
        fontFamily: typography.semibold,
        color: colors.textDark,
        marginTop: 0,
        marginBottom: 0,
        marginHorizontal: 0,
        width: "100%",
        textAlign: "center",
    },
    tableAbbreviationSelected: {
        ...baseSelection.itemTextSelected,
        color: "#E65100",
        fontSize: TABLE_ABBR_SELECTED_FONT_SIZE,
    },

    // Empty cell (for grid spacing)
    emptyCell: {
        width: SQUARE_SIZE,
        height: SQUARE_SIZE,
    },

    // Confirm Button
    confirmButtonWrapper: {
        ...baseButton.wrapper,
        width: getIsLargeDisplay() ? 600 : 300,
        height: getIsLargeDisplay() ? 60 : 60,
        maxWidth: 600,
        marginTop: 2,
    },
    confirmButton: {
        ...baseButton.button,    
    },
    confirmButtonText: {
        ...baseButton.text,
        fontSize: 18,
        marginTop: 0,
        marginBottom: 0,
    },
});
