import { BlurView } from "expo-blur";
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  Animated,
  FlatList,
  Platform,
  StyleSheet,
  View,
  useWindowDimensions,
} from "react-native";
import { responsiveHeight } from "../../actions/responsiveSizes";
import { ai } from "../../assets";
import { gutters } from "../../styles";
import { getCreationStageStates } from "../../utils/projectStages";
import AnimatedPaginationDot from "../AnimatedPaginationDot/AnimatedPaginationDot";
import PersonaCard from "../cards/PersonaCard/PersonaCard";

const STAGE_CARD_CONTENT = [
  {
    key: "songwriter",
    title: "Céline",
    description: "Let’s write lyrics together !",
    image: ai.leftIcon,
  },
  {
    key: "beatmaker",
    title: "Theo",
    description: "Come back, when you'll have lyrics!",
    image: ai.rightIcon,
  },
  {
    key: "director",
    title: "John",
    description: "Come back when your audio is ready!",
    image: ai.rightIcon,
  },
  {
    key: "publisher",
    title: "Bena",
    description: "Ta vidéo est prête ? Direction YouTube !",
    image: ai.bena,
  },
];

const WEB_SCROLL_INACTIVE_DELTA = 0.05;

const FeatureCarousel = ({
  style,
  selectedProject,
  stageStates: stageStatesProp,
  activeIndex,
  onActiveIndexChange,
}) => {
  const stageStates = useMemo(() => {
    if (stageStatesProp) {
      return stageStatesProp;
    }
    return getCreationStageStates(selectedProject);
  }, [stageStatesProp, selectedProject]);

  const stageStatesByKey = useMemo(() => {
    if (!Array.isArray(stageStates)) {
      return {};
    }
    return stageStates.reduce((acc, stage) => {
      if (stage?.key) {
        acc[stage.key] = stage;
      }
      return acc;
    }, {});
  }, [stageStates]);

  const carouselItems = useMemo(
    () =>
      STAGE_CARD_CONTENT.map((item) => {
        const state = stageStatesByKey[item.key];
        return {
          ...item,
          isLocked: state?.isLocked ?? true,
          description: state?.description ?? item.description,
        };
      }),
    [stageStatesByKey]
  );

  const { height: windowHeight } = useWindowDimensions();
  const isWeb = Platform.OS === "web";

  const [viewportHeight, setViewportHeight] = useState(() =>
    Math.max(windowHeight, 1)
  );

  const updateSnapHeight = useCallback((height) => {
    if (!height || Number.isNaN(height)) {
      return;
    }
    setViewportHeight((prev) => {
      if (prev == null || Math.abs(prev - height) > 0.5) {
        return height;
      }
      return prev;
    });
  }, []);

  useEffect(() => {
    updateSnapHeight(Math.max(windowHeight, 1));
  }, [updateSnapHeight, windowHeight]);

  const itemHeight = Math.max(viewportHeight, 1);

  const listRef = useRef(null);
  const pendingScrollRef = useRef(false);
  const alignTimeoutRef = useRef(null);
  const activeIndexRef = useRef(
    typeof activeIndex === "number" ? activeIndex : 0
  );
  const onActiveIndexChangeRef = useRef(onActiveIndexChange);
  const scrollY = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    onActiveIndexChangeRef.current = onActiveIndexChange;
  }, [onActiveIndexChange]);

  useEffect(() => {
    if (typeof activeIndex === "number") {
      activeIndexRef.current = activeIndex;
    }
  }, [activeIndex]);

  const clampIndex = useCallback(
    (index) => {
      if (!carouselItems.length) {
        return 0;
      }
      if (index < 0) {
        return 0;
      }
      if (index >= carouselItems.length) {
        return carouselItems.length - 1;
      }
      return index;
    },
    [carouselItems.length]
  );

  const clearPendingAlignment = useCallback(() => {
    if (alignTimeoutRef.current != null) {
      globalThis.clearTimeout(alignTimeoutRef.current);
      alignTimeoutRef.current = null;
    }
  }, []);

  useEffect(() => () => clearPendingAlignment(), [clearPendingAlignment]);

  const scrollToIndex = useCallback(
    (index, animated = true, heightOverride) => {
      const ref = listRef.current;
      if (!ref) {
        return;
      }

      const clamped = clampIndex(index);
      const height =
        heightOverride && heightOverride > 0 ? heightOverride : itemHeight;

      if (isWeb) {
        if (!height) {
          return;
        }
        updateSnapHeight(height);
        try {
          ref.scrollToOffset({ offset: clamped * height, animated });
        } catch (_error) {
          // Ignore scroll errors when list is not ready yet.
        }
        activeIndexRef.current = clamped;
        return;
      }

      try {
        pendingScrollRef.current = !!animated;
        ref.scrollToIndex({ index: clamped, animated });
        activeIndexRef.current = clamped;
      } catch (_error) {
        pendingScrollRef.current = false;
      }
    },
    [clampIndex, isWeb, itemHeight, updateSnapHeight]
  );

  useEffect(() => {
    if (
      listRef.current == null ||
      typeof activeIndex !== "number" ||
      activeIndex < 0 ||
      activeIndex >= carouselItems.length ||
      (isWeb && !itemHeight)
    ) {
      return;
    }
    scrollToIndex(activeIndex);
  }, [activeIndex, carouselItems.length, isWeb, itemHeight, scrollToIndex]);

  useEffect(() => {
    if (listRef.current == null || (isWeb && !itemHeight)) {
      return;
    }
    scrollToIndex(activeIndexRef.current, false);
  }, [carouselItems.length, isWeb, itemHeight, scrollToIndex]);

  const alignToOffset = useCallback(
    (offset, layoutHeight) => {
      const height =
        layoutHeight && layoutHeight > 0 ? layoutHeight : itemHeight;
      if (!height) {
        return;
      }

      updateSnapHeight(height);

      const currentIndex = activeIndexRef.current;
      const rawIndex = height ? offset / height : currentIndex;

      let nextIndex = currentIndex;
      if (isWeb) {
        const delta = rawIndex - currentIndex;
        if (Math.abs(delta) > WEB_SCROLL_INACTIVE_DELTA) {
          if (Math.abs(delta) <= 1) {
            nextIndex = clampIndex(currentIndex + (delta > 0 ? 1 : -1));
          } else {
            nextIndex = clampIndex(currentIndex + Math.round(delta));
          }
        }
      } else {
        nextIndex = clampIndex(Math.round(rawIndex));
      }

      const hasChanged = nextIndex !== activeIndexRef.current;

      if (hasChanged) {
        activeIndexRef.current = nextIndex;
        const callback = onActiveIndexChangeRef.current;
        if (callback) {
          callback(nextIndex);
        }
      }

      if (isWeb || hasChanged) {
        const shouldAnimate = isWeb ? true : !isWeb;
        scrollToIndex(nextIndex, shouldAnimate, height);
      }
    },
    [clampIndex, isWeb, itemHeight, scrollToIndex, updateSnapHeight]
  );

  const handleScrollEnd = useCallback(
    (event) => {
      clearPendingAlignment();
      const offsetY = event?.nativeEvent?.contentOffset?.y ?? 0;
      const layoutHeight = event?.nativeEvent?.layoutMeasurement?.height;
      alignToOffset(offsetY, layoutHeight);
    },
    [alignToOffset, clearPendingAlignment]
  );

  const handleScroll = useCallback(
    (event) => {
      if (!isWeb) {
        return;
      }
      const offsetY = event?.nativeEvent?.contentOffset?.y ?? 0;
      const layoutHeight = event?.nativeEvent?.layoutMeasurement?.height;
      clearPendingAlignment();
      alignTimeoutRef.current = globalThis.setTimeout(() => {
        alignToOffset(offsetY, layoutHeight);
        alignTimeoutRef.current = null;
      }, 80);
    },
    [alignToOffset, clearPendingAlignment, isWeb]
  );

  const animatedScrollHandler = useMemo(
    () =>
      Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
        useNativeDriver: false,
        listener: isWeb ? handleScroll : undefined,
      }),
    [handleScroll, isWeb, scrollY]
  );

  const handleLayout = useCallback(
    (event) => {
      const layoutHeight = event?.nativeEvent?.layout?.height ?? 0;
      if (layoutHeight > 0) {
        updateSnapHeight(layoutHeight);
      }
    },
    [updateSnapHeight]
  );

  const keyExtractor = useCallback((item) => item.key, []);

  const renderItem = useCallback(
    ({ item, index }) => (
      <PersonaCard
        item={item}
        index={index}
        isLock={item.isLocked}
        height={itemHeight}
      />
    ),
    [itemHeight]
  );

  const getItemLayout = useCallback(
    (_data, index) => ({
      length: itemHeight,
      offset: itemHeight * index,
      index,
    }),
    [itemHeight]
  );

  const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 60 });

  const handleViewableItemsChangedRef = useRef();
  if (!handleViewableItemsChangedRef.current) {
    handleViewableItemsChangedRef.current = ({ viewableItems }) => {
      if (!viewableItems?.length) return;
      const firstVisible = viewableItems.find((item) => item?.isViewable);
      if (!firstVisible || firstVisible.index == null) return;
      if (pendingScrollRef.current) {
        if (firstVisible.index === activeIndexRef.current) {
          pendingScrollRef.current = false;
        }
        return;
      }
      const callback = onActiveIndexChangeRef.current;
      if (callback && firstVisible.index !== activeIndexRef.current) {
        callback(firstVisible.index);
      }
    };
  }

  const snapOffsets = useMemo(() => {
    if (!itemHeight || !isWeb) {
      return undefined;
    }
    return carouselItems.map((_, index) => index * itemHeight);
  }, [carouselItems, isWeb, itemHeight]);

  const blurIntensity = isWeb ? 80 : 30;
  const dotsWrapperStyle = useMemo(
    () => [
      styles.dotsWrapperBase,
      isWeb ? styles.dotsWrapperWeb : styles.dotsWrapperNative,
    ],
    [isWeb]
  );

  return (
    <View
      style={[styles.container, isWeb && styles.containerWeb, style]}
      onLayout={handleLayout}
    >
      <FlatList
        ref={listRef}
        data={carouselItems}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
        onViewableItemsChanged={handleViewableItemsChangedRef.current}
        viewabilityConfig={viewabilityConfig.current}
        getItemLayout={getItemLayout}
        showsVerticalScrollIndicator={false}
        pagingEnabled={!isWeb}
        bounces={false}
        overScrollMode="never"
        initialNumToRender={1}
        maxToRenderPerBatch={2}
        windowSize={3}
        scrollEventThrottle={16}
        snapToAlignment={isWeb ? undefined : "start"}
        snapToInterval={!isWeb && itemHeight ? itemHeight : undefined}
        snapToOffsets={snapOffsets}
        disableIntervalMomentum={!isWeb}
        decelerationRate={!isWeb ? "fast" : undefined}
        style={styles.list}
        onScroll={animatedScrollHandler}
        onMomentumScrollEnd={handleScrollEnd}
        onScrollEndDrag={isWeb ? handleScrollEnd : undefined}
      />
      <BlurView
        intensity={blurIntensity}
        tint={Platform.OS === "web" ? undefined : "dark"}
        style={dotsWrapperStyle}
        pointerEvents="none"
      >
        <AnimatedPaginationDot
          data={carouselItems}
          scrollValue={scrollY}
          itemDimension={itemHeight}
          orientation={AnimatedPaginationDot.orientation.VERTICAL}
          expandingDotSize={24}
          inactiveDotOpacity={0.3}
          containerStyle={styles.dotsContainer}
          dotStyle={styles.dot}
          baseDotSize={8}
        />
      </BlurView>
    </View>
  );
};

export default FeatureCarousel;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
    flexDirection: "row",
    paddingBottom: responsiveHeight(5),
    paddingHorizontal: gutters,
  },
  containerWeb: {
    paddingRight: 56,
  },
  list: {
    flex: 1,
  },
  dotsWrapperBase: {
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 16,
    paddingVertical: 12,
    paddingHorizontal: 8,
    overflow: "hidden",
    backgroundColor: "rgba(18, 18, 18, 0.2)",
  },
  dotsWrapperWeb: {
    position: "absolute",
    right: 12,
    top: 0,
    bottom: 0,
    maxHeight: "75%",
    alignSelf: "center",
  },
  dotsWrapperNative: {
    marginLeft: 12,
    alignSelf: "center",
  },
  dotsContainer: {
    flexDirection: "column",
  },
  dot: {
    width: 8,
    height: 8,
    marginHorizontal: 0,
    marginVertical: 6,
    borderRadius: 999,
    backgroundColor: "rgba(255,255,255,0.4)",
  },
});