import { MaterialCommunityIcons } from '@expo/vector-icons';
import {
    Image,
    Pressable,
    ScrollView,
    StyleSheet,
    Text,
    View,
} from 'react-native';

const PRIMARY = '#083318';
const SECONDARY = '#4E8214';
const BACKGROUND = '#F4F7F2';
const TEXT = '#163321';
const MUTED = '#6B786F';
const BORDER = '#E2E8E2';

type MenuItemProps = {
    icon: keyof typeof MaterialCommunityIcons.glyphMap;
    title: string;
    subtitle: string;
};

function MenuItem({ icon, title, subtitle }: MenuItemProps) {
    return (
        <Pressable style={styles.menuItem}>
            <View style={styles.menuItemIcon}>
                <MaterialCommunityIcons
                    name={icon}
                    size={29}
                    color={SECONDARY}
                />
            </View>

            <View style={styles.menuItemTextBox}>
                <Text style={styles.menuItemTitle}>{title}</Text>
                <Text style={styles.menuItemSubtitle}>{subtitle}</Text>
            </View>

            <MaterialCommunityIcons
                name="chevron-right"
                size={26}
                color={SECONDARY}
            />
        </Pressable>
    );
}

function DataRow({
    icon,
    label,
    value,
}: {
    icon: keyof typeof MaterialCommunityIcons.glyphMap;
    label: string;
    value: string;
}) {
    return (
        <View style={styles.dataRow}>
            <View style={styles.dataIcon}>
                <MaterialCommunityIcons
                    name={icon}
                    size={22}
                    color={SECONDARY}
                />
            </View>

            <View style={styles.dataTextBox}>
                <Text style={styles.dataLabel}>{label}</Text>
                <Text style={styles.dataValue}>{value}</Text>
            </View>
        </View>
    );
}

export default function MenuPrincipalScreen() {
    return (
        <View style={styles.screen}>
            <ScrollView contentContainerStyle={styles.container}>
                <View style={styles.headerCard}>
                    <Image
                        source={require('../assets/images/logo-g10bio.png')}
                        style={styles.logo}
                        resizeMode="contain"
                    />

                    <Text style={styles.appName}>Produtor</Text>
                    <Text style={styles.appSubtitle}>
                        Acompanhe suas atividades no projeto G10 Bio
                    </Text>
                </View>

                <View style={styles.menuBox}>
                    <MenuItem
                        icon="package-variant-closed"
                        title="Retirada de produto"
                        subtitle="Informe quando for retirar seu produto"
                    />

                    <MenuItem
                        icon="spray-bottle"
                        title="Aplicação do produto"
                        subtitle="Informe quando for aplicar seu produto"
                    />

                    <MenuItem
                        icon="chart-line"
                        title="Evolução"
                        subtitle="Fotos e análises"
                    />
                </View>

                <View style={styles.sectionCard}>
                    <View style={styles.sectionHeader}>
                        <View style={styles.sectionIcon}>
                            <MaterialCommunityIcons
                                name="map-marker-radius-outline"
                                size={25}
                                color={SECONDARY}
                            />
                        </View>

                        <View>
                            <Text style={styles.sectionTitle}>Propriedade</Text>
                            <Text style={styles.sectionSubtitle}>
                                Área cadastrada para acompanhamento
                            </Text>
                        </View>
                    </View>

                    <View style={styles.mapBox}>
                        <Image
                            source={require('../assets/images/geocerca-exemplo.png')}
                            style={styles.mapImage}
                            resizeMode="cover"
                        />

                        <View style={styles.mapOverlay}>
                            <View style={styles.geofenceShape} />
                        </View>

                        <View style={styles.mapBadge}>
                            <MaterialCommunityIcons
                                name="map-marker-check"
                                size={17}
                                color="#FFFFFF"
                            />
                            <Text style={styles.mapBadgeText}>Geocerca cadastrada</Text>
                        </View>
                    </View>
                </View>

                <View style={styles.sectionCard}>
                    <View style={styles.sectionHeader}>
                        <View style={styles.sectionIcon}>
                            <MaterialCommunityIcons
                                name="clipboard-account-outline"
                                size={25}
                                color={SECONDARY}
                            />
                        </View>

                        <View>
                            <Text style={styles.sectionTitle}>Dados cadastrais</Text>
                            <Text style={styles.sectionSubtitle}>
                                Informações da propriedade
                            </Text>
                        </View>
                    </View>

                    <View style={styles.dataList}>
                        <DataRow
                            icon="tractor"
                            label="Nome da propriedade"
                            value="G10 Teste"
                        />

                        <DataRow
                            icon="target"
                            label="Segmento"
                            value="Citricultura"
                        />

                        <DataRow
                            icon="progress-check"
                            label="Fase"
                            value="Andamento"
                        />

                        <DataRow
                            icon="fruit-citrus"
                            label="Variedade"
                            value="Ponkan"
                        />

                        <DataRow
                            icon="pine-tree"
                            label="Porta-enxerto"
                            value="Citromelo Swingle"
                        />

                        <DataRow
                            icon="calendar-range"
                            label="Idade do pomar"
                            value="5 a 10 anos"
                        />
                    </View>
                </View>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        backgroundColor: PRIMARY,
    },

    container: {
        paddingHorizontal: 18,
        paddingTop: 18,
        paddingBottom: 40,
    },

    headerCard: {
        backgroundColor: '#FFFFFF',
        borderRadius: 28,
        paddingHorizontal: 20,
        paddingVertical: 18,
        alignItems: 'center',
    },

    logo: {
        width: 205,
        height: 105,
    },

    appName: {
        marginTop: 4,
        fontSize: 27,
        fontWeight: '900',
        color: TEXT,
    },

    appSubtitle: {
        marginTop: 5,
        fontSize: 13,
        fontWeight: '600',
        color: MUTED,
        textAlign: 'center',
    },

    menuBox: {
        marginTop: 16,
        backgroundColor: '#FFFFFF',
        borderRadius: 26,
        overflow: 'hidden',
    },

    menuItem: {
        minHeight: 84,
        paddingHorizontal: 16,
        paddingVertical: 14,
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: BORDER,
    },

    menuItemIcon: {
        width: 54,
        height: 54,
        borderRadius: 18,
        backgroundColor: '#EDF5E9',
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 13,
    },

    menuItemTextBox: {
        flex: 1,
    },

    menuItemTitle: {
        color: TEXT,
        fontSize: 17,
        fontWeight: '900',
    },

    menuItemSubtitle: {
        color: MUTED,
        fontSize: 12,
        lineHeight: 18,
        marginTop: 3,
    },

    sectionCard: {
        marginTop: 16,
        backgroundColor: '#FFFFFF',
        borderRadius: 26,
        padding: 17,
    },

    sectionHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 15,
    },

    sectionIcon: {
        width: 48,
        height: 48,
        borderRadius: 17,
        backgroundColor: '#EDF5E9',
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 12,
    },

    sectionTitle: {
        color: TEXT,
        fontSize: 20,
        fontWeight: '900',
    },

    sectionSubtitle: {
        color: MUTED,
        fontSize: 12,
        marginTop: 2,
    },

    mapBox: {
        height: 275,
        borderRadius: 22,
        overflow: 'hidden',
        backgroundColor: BACKGROUND,
        position: 'relative',
    },

    mapImage: {
        width: '100%',
        height: '100%',
    },

    mapOverlay: {
        ...StyleSheet.absoluteFillObject,
        alignItems: 'center',
        justifyContent: 'center',
    },

    geofenceShape: {
        width: 125,
        height: 145,
        backgroundColor: 'rgba(76, 175, 80, 0.42)',
        borderWidth: 3,
        borderColor: '#F2B600',
        transform: [
            { rotate: '7deg' },
            { skewX: '-5deg' },
        ],
    },

    mapBadge: {
        position: 'absolute',
        left: 12,
        bottom: 12,
        backgroundColor: 'rgba(8, 51, 24, 0.88)',
        borderRadius: 15,
        paddingHorizontal: 11,
        paddingVertical: 8,
        flexDirection: 'row',
        alignItems: 'center',
    },

    mapBadgeText: {
        color: '#FFFFFF',
        fontSize: 12,
        fontWeight: '800',
        marginLeft: 6,
    },

    dataList: {
        borderWidth: 1,
        borderColor: BORDER,
        borderRadius: 20,
        overflow: 'hidden',
    },

    dataRow: {
        minHeight: 68,
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 14,
        paddingVertical: 11,
        borderBottomWidth: 1,
        borderBottomColor: BORDER,
    },

    dataIcon: {
        width: 40,
        height: 40,
        borderRadius: 14,
        backgroundColor: '#EDF5E9',
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 12,
    },

    dataTextBox: {
        flex: 1,
    },

    dataLabel: {
        color: MUTED,
        fontSize: 11,
        fontWeight: '700',
        textTransform: 'uppercase',
    },

    dataValue: {
        color: TEXT,
        fontSize: 15,
        fontWeight: '800',
        marginTop: 2,
    },
});