import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
import { addDays, addMonths, endOfMonth, endOfWeek, format, getMonth, getYear, isSameDay, startOfMonth, startOfWeek, subMonths } from 'date-fns';
import { useRouter } from 'expo-router';
import * as SecureStore from 'expo-secure-store';
import React, { useEffect, useState } from "react";
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";

const PRIMARY = '#A24BFA';
const BG = '#0c0a0a';

export default function Schedule() {
    const [currentMonth, setCurrentMonth] = useState(new Date());
    const [workdays, setWorkdays] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);
    const router = useRouter();

    useEffect(() => {
        fetchWorkdays();
    }, [currentMonth]);

    async function fetchWorkdays() {
        setLoading(true);
        try {
            const userCookieRaw = await SecureStore.getItemAsync('cookie');
            if (!userCookieRaw) {
                throw new Error('Nincs elmentett cookie, kérlek jelentkezz be újra!');
            }

            const userCookie = userCookieRaw.split(';')[0];
            const year = getYear(currentMonth);
            const month = getMonth(currentMonth) + 1;

            console.log(userCookie)

            const response = await fetch(`https://mymenu.mcdonalds.hu/api/UserDataApi/GetWorkDayMonthList`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    cookie: userCookie,
                    origin: 'https://mymenu.mcdonalds.hu',
                },
                body: JSON.stringify({
                    Data: {
                        Year: year,
                        Month: month
                    }
                })
            });

            const data = await response.json();

            console.log('API teljes válasz:', data);
            if (!data || !data.data || !data.data.Data) {
                console.log('Nincs beosztás adat a válaszban!');
                setWorkdays([]);
                return;
            }

        } catch (e) {
            const err = e as any;
            if (err.response) {
                console.log('API error response:', {
                    data: err.response.data,
                });
            } else {
                console.log('Network error:', e);
            }
            setWorkdays([]);
        } finally {
            setLoading(false);
        }
    }

    function renderCalendar() {
        const monthStart = startOfMonth(currentMonth);
        const monthEnd = endOfMonth(monthStart);
        const startDate = startOfWeek(monthStart, { weekStartsOn: 1 });
        const endDate = endOfWeek(monthEnd, { weekStartsOn: 1 });
        const today = new Date();
        const rows = [];
        let days = [];
        let day = startDate;
        let formattedDate = '';
        while (day <= endDate) {
            for (let i = 0; i < 7; i++) {
                formattedDate = format(day, 'yyyy-MM-dd');
                const wd = workdays.find(w => w.WorkDay?.slice(0, 10) === formattedDate);
                let bg = 'rgba(24,20,28,0.7)';
                let color = '#fff';
                let borderWidth = 0;
                if (isSameDay(day, today)) {
                    borderWidth = 2;
                    color = PRIMARY;
                }
                if (wd) {
                    bg = wd.color || 'deepskyblue';
                    color = '#222';
                }
                days.push(
                    <View key={day.toString()} style={{ flex: 1, aspectRatio: 1, margin: 2 }}>
                        <View style={{
                            backgroundColor: bg,
                            borderRadius: 8,
                            borderWidth,
                            borderColor: PRIMARY,
                            justifyContent: 'center',
                            alignItems: 'center',
                            flex: 1,
                        }}>
                            <Text style={{ color, fontWeight: isSameDay(day, today) ? 'bold' : 'normal' }}>{format(day, 'd')}</Text>
                            {wd && <Text style={{ color, fontSize: 10 }}>{wd.text}</Text>}
                        </View>
                    </View>
                );
                day = addDays(day, 1);
            }
            rows.push(<View key={day.toString()} style={{ flexDirection: 'row' }}>{days}</View>);
            days = [];
        }
        return (
            <View>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                    <TouchableOpacity onPress={() => setCurrentMonth(subMonths(currentMonth, 1))}><Ionicons name="chevron-back" size={28} color="#fff" /></TouchableOpacity>
                    <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>{format(currentMonth, 'yyyy. MMMM')}</Text>
                    <TouchableOpacity onPress={() => setCurrentMonth(addMonths(currentMonth, 1))}><Ionicons name="chevron-forward" size={28} color="#fff" /></TouchableOpacity>
                </View>
                <View style={{ flexDirection: 'row', marginBottom: 4 }}>
                    {["H", "K", "Sz", "Cs", "P", "Szo", "V"].map(d => (
                        <Text key={d} style={{ flex: 1, color: '#bdbdbd', textAlign: 'center', fontWeight: 'bold' }}>{d}</Text>
                    ))}
                </View>
                {loading ? (
                    <Text style={{ color: '#fff', textAlign: 'center', marginTop: 24 }}>Betöltés…</Text>
                ) : (
                    <View>{rows}</View>
                )}
            </View>
        );
    }

    return (
        <ScrollView style={{ flex: 1, backgroundColor: BG }} contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center', minHeight: '100%', paddingBottom: 80 }}>
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%' }}>
                <View style={[styles.card, { alignSelf: 'center', marginTop: 48, marginBottom: 48 }]}>
                    <Text style={styles.label}>Beosztás naptár</Text>
                    {(!loading && workdays.length === 0) && (
                        <Text style={{ color: '#ff5252', textAlign: 'center', marginBottom: 12, fontWeight: 'bold' }}>
                            Nincs beosztás vagy nem vagy bejelentkezve!
                        </Text>
                    )}
                    {renderCalendar()}
                </View>
            </View>
            <View style={styles.navBar}>
                <NavBar activeTab="schedule" />
            </View>
        </ScrollView>
    );
}

function NavBar({ activeTab }: { activeTab: string }) {
    const router = useRouter();
    return (
        <View style={styles.navBar}>
            <TouchableOpacity style={styles.navItem} onPress={() => router.push('/profile')}>
                <MaterialIcons name="person" size={28} color={activeTab === 'profile' ? PRIMARY : '#bdbdbd'} />
                <Text style={[styles.navLabel, { color: activeTab === 'profile' ? PRIMARY : '#bdbdbd' }]}>Profilom</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.navItem} onPress={() => router.push('/schedule')}>
                <MaterialCommunityIcons name="calendar-month" size={28} color={activeTab === 'schedule' ? PRIMARY : '#bdbdbd'} />
                <Text style={[styles.navLabel, { color: activeTab === 'schedule' ? PRIMARY : '#bdbdbd' }]}>Beosztás</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.navItem} onPress={() => router.push('/requests')}>
                <Ionicons name="mail" size={28} color={activeTab === 'requests' ? PRIMARY : '#bdbdbd'} />
                <Text style={[styles.navLabel, { color: activeTab === 'requests' ? PRIMARY : '#bdbdbd' }]}>Kérelmek</Text>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    card: {
        backgroundColor: 'rgba(24, 20, 28, 0.95)',
        borderRadius: 24,
        padding: 32,
        width: '90%',
        maxWidth: 400,
        shadowColor: '#000',
        shadowOpacity: 0.3,
        shadowRadius: 24,
        shadowOffset: { width: 0, height: 8 },
        elevation: 8,
        marginBottom: 32,
        marginTop: 32,
    },
    label: {
        color: '#bdbdbd',
        fontSize: 16,
        marginBottom: 16,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    navBar: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: 'rgba(24, 20, 28, 0.98)',
        borderTopWidth: 1,
        borderTopColor: '#222',
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        height: 64,
        paddingHorizontal: 16,
    },
    navItem: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    navLabel: {
        fontSize: 13,
        marginTop: 2,
        fontWeight: 'bold',
    },
});