import React, { memo, useEffect, useState, useCallback, useRef } from 'react';
import { FlatList, ScrollView, View } from 'react-native';
import { Text } from '@/components/ui/text';
import { Pressable } from '@/components/ui/pressable';
import { Image } from '@/components/ui/image';
import { Box } from '@/components/ui/box';
import { Icon } from '@/components/ui/icon';
import { VStack } from '@/components/ui/vstack';
import { SkeletonText } from '@/components/ui/skeleton';
import { useShowToast } from '@/core-components/useShowToast';
import { Plus, UserRound } from 'lucide-react-native';
import { AXIOS } from '@/utils/utils';
import CustomSpinner, { SmallSpinner } from '@/core-components/CustomSpinner';
import CustomRefreshControl from '@/core-components/CustomRefreshControl';
import InternetError from '@/core-components/InternetError';

const PageItem = memo(({ item, navigate }) => (
  <Pressable
    onPress={() => navigate('PageDetail', { id: item.id })}
    className='flex-row items-center gap-x-3 p-2 bg-white dark:bg-gray-800 rounded-lg elevation-2'
  >
    <Image
      source={{ uri: item.logo_thumbnail }}
      alt={item.name}
      size='sm'
      className='rounded-full bg-background-100 dark:bg-gray-700 border border-zinc-300 dark:border-gray-700'
    />
    <Text numberOfLines={1} className='flex-1 text-xl'>{item.name}</Text>
  </Pressable>
));

const RenderEmptyComponent = memo(({ state, onRefresh }) => {
  if (state.loading) return <CustomSpinner />;
  else if (state.error) return <InternetError isLoading={state.refreshing} onPress={onRefresh} />;
  else return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between' }}
      style={{ margin: -8 }}
    >
      <View style={{ padding: 8 }}>
        <Text className='text-typography-900 text-3xl font-heading text-center mt-5'>Crea tu primera página</Text>
        <Text className='text-typography-800 font-mono text-lg text-center my-5'>Lanza tu espacio en segundos y conecta con tu comunidad.</Text>
        <Text className='font-mono text-lg'>Tu página es el lugar perfecto para compartir tus ideas, mostrar tu trabajo o vender tus productos. En solo unos clics tendrás un sitio profesional, listo para recibir visitas.{'\n'}• Elige un nombre memorable.{'\n'}• Usa imágenes de tu marca.{'\n'}• Crea publicaciones.{'\n'}• Y mucho más.</Text>
      </View>

      <Box className='bg-white dark:bg-gray-800 elevation-2 rounded-t-2xl border border-white dark:border-gray-800 overflow-hidden mt-10 pb-5'>
        <Box className='w-full h-44 bg-[#cfcfcf] dark:bg-[#2a3441] border-b border-zinc-300 dark:border-gray-700' />
        <Box className='absolute top-20 left-2 right-2 h-[135px] w-[135px] rounded-full bg-[#cfcfcf] dark:bg-[#2a3441] overflow-hidden border-[5px] border-white dark:border-gray-800'>
          <Icon as={UserRound} className='w-full h-full text-neutral-200 dark:text-gray-800' />
        </Box>
        <VStack space='sm' className='pl-2 mt-16'>
          <Text className='text-3xl font-heading ml-2 mb-1'>Nombre de la página</Text>
          <SkeletonText speed={7} startColor='bg-background-500' className='h-4 w-4/5 rounded-full opacity-95' />
          <SkeletonText speed={7} startColor='bg-background-500' className='h-3 w-1/2 rounded-full opacity-95' />
        </VStack>
      </Box>
    </ScrollView>
  )
});

const keyExtractor = item => item.id.toString();

export default ({ navigation: { navigate, setOptions }, route: { params } }) => {
  const showToast = useShowToast();
  const lastProcessedRefreshed = useRef(undefined);
  const [state, setState] = useState({ loading: true });

  useEffect(() => {
    const isInitialLoad = params?.refreshed === undefined && lastProcessedRefreshed.current === undefined;
    const hasRefreshTriggered = params?.refreshed !== undefined && params?.refreshed !== lastProcessedRefreshed.current;

    if (isInitialLoad) {
      setOptions({
        headerRight: () => (
          <Pressable
            onPress={() => navigate('FrmCreatePage')}
            className='rounded-full px-4 py-1.5 ml-5 bg-white dark:bg-gray-700 flex-row items-center elevation-2'
          >
            <Text>Crear página</Text>
            <Icon as={Plus} className='text-typography-700 ml-1' />
          </Pressable>
        )
      });
    }

    const controller = new AbortController();
    if (isInitialLoad || hasRefreshTriggered) {
      (async () => {
        try {
          if (hasRefreshTriggered) setState(prevState => ({ ...prevState, refreshing: true }));
          const { data } = await AXIOS.get('/me/page/', { signal: controller.signal });
          setState(data);
          lastProcessedRefreshed.current = params?.refreshed;
        } catch {
          if (controller.signal.aborted) return;
          setState({ error: true });
          showToast();
        }
      })();
    }
    return () => controller.abort();
  }, [params?.refreshed]);

  const onRefresh = useCallback(async () => {
    try {
      setState(prevState => ({ ...prevState, refreshing: true }));
      const { data } = await AXIOS.get('/me/page/');
      setState(data);
    } catch {
      setState(prevState => ({ ...prevState, refreshing: false }));
      showToast();
    }
  }, []);

  const loadMore = useCallback(async () => {
    try {
      setState(prevState => ({ ...prevState, loading_more: true }));
      const { data } = await AXIOS.get(`/me/page/?page=${state.next}`);
      setState(prevState => ({
        next: data.next,
        results: prevState.results.concat(data.results)
      }));
    } catch {
      setState(prevState => ({ ...prevState, loading_more: false }));
      showToast();
    }
  }, [state?.next]);

  const renderItem = useCallback(({ item }) => <PageItem item={item} navigate={navigate} />, []);

  return (
    <FlatList
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ flexGrow: 1, padding: 8, rowGap: 8 }}
      data={state.results}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      refreshControl={<CustomRefreshControl enabled={!state.loading} refreshing={state.refreshing} onRefresh={onRefresh} />}
      onEndReached={(state.next && !state.loading_more) ? loadMore : null}
      ListFooterComponent={state.next && <SmallSpinner />}
      ListEmptyComponent={<RenderEmptyComponent state={state} onRefresh={onRefresh} />}
    />
  );
};