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

const STAGE_CARD_CONTENT = [
  {
    key: "songwriter",
    title: "Nathalie",
    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: "designer",
    title: "Bena",
    description: "Come back when you want to generate cover!",
    image: ai.leftIcon,
  },
  {
    key: "director",
    title: "John",
    description: "Come back when your audio is ready!",
    image: ai.rightIcon,
  },
];

const WEB_SCROLL_INACTIVE_DELTA = 0.05;
const HOME_BACKGROUND_COLOR = "#425B87"; // Derived from the bottom color of the home hero image
const AnimatedImage = Animated.createAnimatedComponent(Image);

const FeatureCarousel = ({
  style,
  selectedProject,
  stageStates: stageStatesProp,
  activeIndex,
  onActiveIndexChange,
  backgroundImage,
}) => {
  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 scrollViewRef = useRef(null);
  const alignTimeoutRef = useRef(null);
  const activeIndexRef = useRef(
    typeof activeIndex === "number" ? activeIndex : 0
  );
  const onActiveIndexChangeRef = useRef(onActiveIndexChange);
  const scrollY = useRef(new Animated.Value(0)).current;
  const parallaxTranslateY = useMemo(() => {
    if (!itemHeight) {
      return null;
    }
    return scrollY.interpolate({
      inputRange: [0, itemHeight],
      outputRange: [0, -itemHeight * 0.25],
      extrapolate: "clamp",
    });
  }, [itemHeight, scrollY]);

  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 getScrollNode = useCallback(() => {
    const node = scrollViewRef.current;
    if (!node) {
      return null;
    }
    if (typeof node.scrollTo === "function") {
      return node;
    }
    if (typeof node.getNode === "function") {
      return node.getNode();
    }
    return null;
  }, []);

  const scrollToIndex = useCallback(
    (index, animated = true, heightOverride) => {
      const target = getScrollNode();
      if (!target) {
        return;
      }

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

      if (!height) {
        return;
      }

      updateSnapHeight(height);
      const offset = clamped * height;

      try {
        if (typeof target.scrollTo === "function") {
          target.scrollTo({ y: offset, animated });
        } else if (typeof target.scrollToOffset === "function") {
          target.scrollToOffset({ offset, animated });
        }
      } catch (_error) {
        // ScrollView not ready yet, ignore.
      }
      activeIndexRef.current = clamped;
    },
    [clampIndex, getScrollNode, itemHeight, updateSnapHeight]
  );

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

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

  const alignToOffset = useCallback(
    (offset, layoutHeight, options = {}) => {
      const { forceSnap = false } = options || {};
      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 (forceSnap || hasChanged) {
        scrollToIndex(nextIndex, true, 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, { forceSnap: true });
    },
    [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, { forceSnap: false });
        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 renderContent = useMemo(
    () =>
      carouselItems.map((item, index) => {
        const card = (
          <View style={styles.cardWrapper}>
            <PersonaCard
              item={item}
              index={index}
              isLock={item.isLocked}
              height={itemHeight}
            />
          </View>
        );

        const containerStyle = [styles.backgroundItem, { height: itemHeight }];
        const isFirstItem = index === 0 && backgroundImage;

        if (isFirstItem) {
          const parallaxStyles = [
            styles.parallaxImage,
            itemHeight ? { height: itemHeight * 1.2 } : null,
            itemHeight ? { top: -itemHeight * 0.1 } : null,
            { width: "100%" },
          ].filter(Boolean);
          if (parallaxTranslateY) {
            parallaxStyles.push({
              transform: [{ translateY: parallaxTranslateY }],
            });
          }
          return (
            <View
              key={item.key}
              style={[...containerStyle, styles.parallaxContainer]}
            >
              <AnimatedImage
                source={backgroundImage}
                style={parallaxStyles}
                resizeMode="cover"
              />
              <LinearGradient
                colors={[
                  "rgba(66, 91, 135, 0)",
                  "rgba(66, 91, 135, 0.4)",
                  HOME_BACKGROUND_COLOR,
                ]}
                locations={[0, 0.75, 1]}
                style={styles.backgroundGradient}
                pointerEvents="none"
              />
              {card}
            </View>
          );
        }

        return (
          <View key={item.key} style={[containerStyle, styles.plainBackground]}>
            {card}
          </View>
        );
      }),
    [backgroundImage, carouselItems, itemHeight, parallaxTranslateY]
  );

  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}
    >
      <Animated.ScrollView
        ref={scrollViewRef}
        showsVerticalScrollIndicator={false}
        pagingEnabled={!isWeb}
        bounces={false}
        overScrollMode="never"
        scrollEventThrottle={16}
        snapToAlignment="start"
        snapToInterval={!isWeb && itemHeight ? itemHeight : undefined}
        snapToOffsets={snapOffsets}
        decelerationRate={!isWeb ? "fast" : "normal"}
        style={styles.list}
        contentContainerStyle={styles.scrollContent}
        onScroll={animatedScrollHandler}
        onMomentumScrollEnd={handleScrollEnd}
        onScrollEndDrag={isWeb ? handleScrollEnd : undefined}
      >
        {renderContent}
      </Animated.ScrollView>
      <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",
    backgroundColor: HOME_BACKGROUND_COLOR,
  },
  containerWeb: {
    // paddingRight: 56,
  },
  list: {
    flex: 1,
  },
  scrollContent: {
    flexGrow: 1,
  },
  backgroundItem: {
    width: "100%",
    justifyContent: "flex-start",
  },
  parallaxContainer: {
    overflow: "hidden",
    position: "relative",
    backgroundColor: HOME_BACKGROUND_COLOR,
  },
  parallaxImage: {
    position: "absolute",
    left: 0,
    right: 0,
  },
  backgroundGradient: {
    ...StyleSheet.absoluteFillObject,
  },
  plainBackground: {
    backgroundColor: HOME_BACKGROUND_COLOR,
  },
  cardWrapper: {
    flex: 1,
    width: "60%",
    justifyContent: "center",
    alignSelf: "center",
    zIndex: 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)",
  },
});