import { seasonApi, matchApi } from '@/axios';
import MatchList from '@/components/Match/MatchList';
import SeasonDropdownItem from '@/components/Season/SeasonDropdownItem';
import { customColor } from '@/constants/Colors';
import { shadow } from '@/constants/Styles';
import convertDatas from '@/converter/dataConverter';
import { State } from '@/redux';
import { reloadSeason, selectSeason, setSeason } from '@/redux/slice/season';
import { Ionicons } from '@expo/vector-icons';
import { useLayoutEffect, useState, useEffect, useCallback, useRef, memo } from 'react';
import { FlatList, ImageBackground, Pressable, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useLoading, useSnackbar } from '../../../contexts';
import { TapGestureHandler } from 'react-native-gesture-handler';
import { clientApi } from '@/axios/client';
import { useFocusEffect } from '@react-navigation/native';
import TabBar from '@/components/UI/TabBar';
import { selectNewMatchs } from '@/redux/slice/match';
import SearchModal from '@/components/modal/SearchModal';

export default function MatchScreen({ route, navigation }: { route: any; navigation: any }) {
	const isInitialRender = useRef(true);
	const [isFocus, setIsFocus] = useState(false);
	const [currentMatchs, setCurrentMatchs] = useState<any>([]);
	const fixedMatchs = useRef<any>([]);
	const { isLoading, startLoading, stopLoading } = useLoading();

	const { seasons, selectedSeason } = useSelector((state: State) => state.season);
	const [currentSeason, setCurrentSeason] = useState<any>({});

	const { newMatchs } = useSelector((state: State) => state.match, shallowEqual);
	const [refreshing, setRefreshing] = useState(false);
	const [thisUserMatchData, setThisUserMatchData] = useState({ lost_money: 0, win: 0, lose: 0 });
	const [showSearch, setShowSearch] = useState(false);
	const dispatch = useDispatch();
	const { showSnackbar } = useSnackbar();

	const fetchMatchs = async (is_new_match?: number) => {
		try {
			const rawMatchs = await matchApi.getMatchBySeason(selectedSeason, is_new_match);
			const convertedMatchs = convertDatas(rawMatchs.data.data);
			setCurrentMatchs(convertedMatchs);
			fixedMatchs.current = convertedMatchs;
		} catch (err: any) {
			console.log('Match error', err.response.data.detail);
			console.log('Match error');
			showSnackbar(err.response.data.detail, 'error');
		}
	};

	const pressSeason = useCallback(
		(item: any) => {
			if (selectedSeason !== item.season_id) {
				dispatch(selectSeason({ selectedSeason: item.season_id }));
				dispatch(reloadSeason());
				setIsFocus(!isFocus);
			}
		},
		[selectedSeason],
	);

	const fetchSeason = async () => {
		try {
			startLoading();
			console.log('fetchSeason: selectedSeason', selectedSeason);
			const rawSeasons = await seasonApi.getSession();
			const convertedSeasons = convertDatas(rawSeasons.data.data);
			dispatch(setSeason({ seasons: convertedSeasons }));
			dispatch(selectSeason({ selectedSeason: selectedSeason === -1 ? convertedSeasons[0].season_id : selectedSeason }));
			//dispatch(reloadSeason());
		} catch (err: any) {
			console.log('Season error');
			console.log('season error', err.response.data.detail);
			showSnackbar(err.response.data.detail, 'error');
		} finally {
			stopLoading();
		}
	};

	const getLostMoney = async () => {
		try {
			const response = await clientApi.getUserLostMoney(selectedSeason);
			const money = response.data.data[0].user_lost_money;
			setThisUserMatchData((prev) => {
				return { ...prev, lost_money: money };
			});
		} catch (error: any) {
			console.log('Money error');
			showSnackbar(error?.response.data.detail, 'error');
		}
	};

	const getMatchStatus = async () => {
		let win: number = 0,
			lose: number = 0;
		fixedMatchs.current.filter((val: any) => {
			const selectedOption = val.options.find((option: any) => option.selected === true);
			if (selectedOption && val.match_correct_option !== null) {
				if (selectedOption.option_name === val.match_correct_option) {
					win++;
				} else {
					lose++;
				}
			}
		});

		setThisUserMatchData((prev) => {
			return { ...prev, win: win, lose: lose };
		});
	};

	useEffect(() => {
		const currentSeason = seasons.find((item: any) => item.season_id === selectedSeason);
		setCurrentSeason(currentSeason);
		fetchMatchs(newMatchs);
		getLostMoney();
	}, [selectedSeason]);

	useEffect(() => {
		console.log('newMatchs', newMatchs);
		console.log('selectSeason', selectSeason);
		if (newMatchs === 0) {
			getMatchStatus();
		}
		console.log('Uffect chay khi tiên or newmath');
	}, [thisUserMatchData.lost_money, newMatchs, selectedSeason]);

	useFocusEffect(
		useCallback(() => {
			console.log('useFocusEffect chạy');

			fetchMatchs(newMatchs);
		}, [selectedSeason]),
	);

	useLayoutEffect(() => {
		navigation.setOptions({
			headerRight: () => {
				return (
					<Pressable style={[styles.shadow, { marginRight: 10 }]} onPress={(_) => setIsFocus((prev) => !prev)}>
						<SeasonDropdownItem season={currentSeason} textStyle={{ width: 40 }} showText={true} indicator={true} icon={isFocus ? 'arrow-up' : 'arrow-down'} />
					</Pressable>
				);
			},
		});
	}, [navigation, isFocus, currentSeason]);

	const pressTabbar = useCallback(
		async (id: number) => {
			startLoading();
			try {
				await fetchMatchs(id);
				dispatch(selectNewMatchs({ is_new_match: id }));
			} catch (error) {
				showSnackbar('Có lỗi xảy ra', 'error');
			} finally {
				stopLoading();
			}
		},
		[selectedSeason],
	);

	const onRefresh = useCallback(async () => {
		setRefreshing(true);
		try {
			console.log('onfre nè');
			await fetchSeason();
			await fetchMatchs(newMatchs);
			await getLostMoney();
		} catch (error) {
			showSnackbar('Có lỗi xảy ra', 'error');
		} finally {
			setRefreshing(false);
		}
	}, [selectedSeason, newMatchs]);

	return (
		<View style={{ flex: 1 }}>
			<ImageBackground style={{ flex: 1 }} imageStyle={styles.imgBackground} source={require('../../../assets/images/football_bg.jpg')}>
				{seasons?.length > 0 && (
					<View style={styles.seasonContainer}>
						{isFocus && (
							<FlatList
								contentContainerStyle={{
									backgroundColor: customColor.drawer.inactiveTint,
									padding: 8,
									borderRadius: 12,
									borderWidth: 1,
									borderColor: customColor.card.background2,
								}}
								showsVerticalScrollIndicator={false}
								style={{ height: 130 }}
								data={seasons}
								renderItem={({ item }) => {
									return (
										<Pressable
											key={item.season_id}
											onPress={(_) => {
												pressSeason(item);
											}}
										>
											<SeasonDropdownItem showText={true} selected={selectedSeason === item.season_id} season={item} />
										</Pressable>
									);
								}}
							/>
						)}
					</View>
				)}
				<View style={{ marginHorizontal: 15 }}>
					<View style={{ justifyContent: 'space-between', flexDirection: 'row', marginTop: 6, alignItems: 'center' }}>
						<View style={{ width: '90%', flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap' }}>
							<Text style={{ fontSize: 16, fontWeight: '600', color: customColor.mainContent.textOnBright2 }}>
								{`Nộp quỹ: ${thisUserMatchData.lost_money.toLocaleString() + 'đ'}`}
							</Text>
							{(thisUserMatchData.win !== 0 || thisUserMatchData.lose !== 0) && (
								<Text> {`(Thắng: ${thisUserMatchData.win} - Thua: ${thisUserMatchData.lose})`}</Text>
							)}
						</View>
						<TouchableOpacity style={{ width: '10%' }} onPress={() => setShowSearch(true)}>
							<Ionicons name="search-circle-sharp" size={40} color={customColor.mainContent.darkBackground} />
						</TouchableOpacity>
					</View>
					{currentMatchs.length > 0 && <MatchList isRefreshing={refreshing} onRefresh={onRefresh} matchs={currentMatchs} />}

					{!isLoading && currentMatchs.length === 0 ? (
						<View style={{ justifyContent: 'center', width: '100%', height: '80%' }}>
							<Text style={{ textAlign: 'center', fontSize: 18, fontWeight: '700', color: customColor.mainContent.textOnBright2 }}>
								Không có kèo được tìm thấy
							</Text>
						</View>
					) : (
						<Text style={{ textAlign: 'center', fontSize: 18, fontWeight: '700', color: customColor.mainContent.textOnBright2 }}>....</Text>
					)}

					{showSearch && (
						<SearchModal
							currentMatchs={currentMatchs}
							currentSeason={currentSeason}
							fixedMatchs={fixedMatchs}
							refresh={setCurrentMatchs}
							visible={showSearch}
							onDismiss={() => setShowSearch(false)}
						/>
					)}
				</View>
			</ImageBackground>
			<TabBar onClick={pressTabbar} />
		</View>
	);
}
const styles = StyleSheet.create({
	imgBackground: {
		opacity: 1,
	},
	seasonContainer: {
		position: 'absolute',
		right: 10,
		zIndex: 999,
	},
	shadow: {
		...shadow,
	},
});