/**
 * Skeleton.tsx
 *
 * A lightweight, theme-aware shimmer "skeleton" placeholder for
 * CometChat search results (conversations and messages).
 * ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 *  • 10 rows (top + bottom layers) drawn with react-native-svg.
 *  • Two Animated views slide across on a loop to create
 *    the shimmer illusion.
 *  • Colours, speed, opacity and gradient come from the active
 *    CometChatTheme but can be overridden per-instance via `style`.
 */

import React, { useEffect, useRef } from "react";
import { Animated, Dimensions, Easing, ScrollView, StyleSheet, View } from "react-native";
import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";

import { useTheme } from "@cometchat/chat-uikit-react-native";
import { CometChatTheme } from "@cometchat/chat-uikit-react-native/src/theme/type";

// ───────────────────────────────────────────────────────────────
// Consts & Types
// ───────────────────────────────────────────────────────────────
const { width: screenWidth } = Dimensions.get("window");
const SKELETON_ROW_COUNT = 10; // How many rows to render for search results

type SkeletonStyle = CometChatTheme["conversationStyles"]["skeletonStyle"];

interface SkeletonProps {
  style?: SkeletonStyle; // Optional per-instance overrides
}

// ───────────────────────────────────────────────────────────────
// Reusable SVG snippets for search results
// ───────────────────────────────────────────────────────────────

/**
 * Bottom SVG layer – pure grey rectangles that will be *under* the shimmer.
 */
const SkeletonItemBottom: React.FC<SkeletonProps> = ({ style }) => {
  const theme = useTheme();

  return (
    <Svg
      height={screenWidth / 5}
      viewBox='0 0 360 72'
      fill='none'
      preserveAspectRatio='xMidYMid meet'
    >
      <G>
        {/* Avatar circle */}
        <Path d='M64 12H16V60H64V12Z' fill='url(#paint0_linear)' />
      </G>
      {/* Main content line */}
      <Path d='M236 16.5H76V35.5H236V35.5Z' fill='url(#paint0_linear)' />
      {/* Trailing content (timestamp/badge area) */}
      <Path d='M344 16.5H284V35.5H344V35.5Z' fill='url(#paint0_linear)' />
      {/* Subtitle line */}
      <Path d='M284 43.5H76V55.5H284V55.5Z' fill='url(#paint0_linear)' />
      {/* Preview area for messages (right side) */}
      <Path d='M344 36H304V60H344V36Z' fill='url(#paint0_linear)' />

      {/* Gradient definition */}
      <Defs>
        <LinearGradient
          id='paint0_linear'
          x1={16}
          y1={36}
          x2={64}
          y2={36}
          gradientUnits='userSpaceOnUse'
        >
          <Stop
            stopColor={
              style?.linearGradientColors?.[0] ??
              theme.conversationStyles.skeletonStyle.linearGradientColors[0]
            }
          />
          <Stop
            offset={1}
            stopColor={
              style?.linearGradientColors?.[1] ??
              theme.conversationStyles.skeletonStyle.linearGradientColors[1]
            }
          />
        </LinearGradient>
      </Defs>
    </Svg>
  );
};

/**
 * Top SVG "cookie-cutter" layer – punched out shapes that mask out the
 * shimmer where content will eventually appear.
 */
const SkeletonItemTop: React.FC<SkeletonProps> = ({ style }) => {
  const theme = useTheme();

  return (
    <Svg height={screenWidth / 5} viewBox='0 0 360 72' fill='none'>
      {/* The giant path draws avatar circle + text bars + preview area */}
      <Path
        fillRule='evenodd'
        clipRule='evenodd'
        d='M0 0H360V72H0V0ZM16 36C16 22.7452 26.7452 12 40 12C53.2548 12 64 22.7452 64 36C64 49.2548 53.2548 60 40 60C26.7452 60 16 49.2548 16 36ZM84 16.5C79.5817 16.5 76 20.0817 76 24.5V27.5C76 31.9183 79.5817 35.5 84 35.5H228C232.418 35.5 236 31.9183 236 27.5V24.5C236 20.0817 232.418 16.5 228 16.5H84ZM284 24.5C284 20.0817 287.582 16.5 292 16.5H336C340.418 16.5 344 20.0817 344 24.5V27.5C344 31.9183 340.418 35.5 336 35.5H292C287.582 35.5 284 31.9183 284 27.5V24.5ZM82 43.5C78.6863 43.5 76 46.1863 76 49.5C76 52.8137 78.6863 55.5 82 55.5H278C281.314 55.5 284 52.8137 284 49.5C284 46.1863 281.314 43.5 278 43.5H82ZM312 40C308.686 40 306 42.6863 306 46V54C306 57.3137 308.686 60 312 60H336C339.314 60 342 57.3137 342 54V46C342 42.6863 339.314 40 336 40H312Z'
        fill={
          /* Mask must match background so the shimmer underneath shows */
          style?.containerBackgroundColor ||
          theme.conversationStyles.skeletonStyle.containerBackgroundColor
        }
      />
    </Svg>
  );
};

// ───────────────────────────────────────────────────────────────
// Main Component
// ───────────────────────────────────────────────────────────────
export const Skeleton: React.FC<SkeletonProps> = ({ style }) => {
  const theme = useTheme();
  const animatedValue = useRef(new Animated.Value(0)).current;

  /* Kick-off the shimmer animation once on mount */
  useEffect(() => {
    animatedValue.setValue(0);
    Animated.loop(
      Animated.timing(animatedValue, {
        toValue: 1,
        duration: (1 / (style?.speed || theme.conversationStyles.skeletonStyle.speed)) * 1000,
        easing: Easing.linear,
        useNativeDriver: false, // translateX is layout-related
      })
    ).start();
  }, [animatedValue, style?.speed || theme.conversationStyles.skeletonStyle.speed]);

  /* Map 0-1 → off-screen-left → off-screen-right */
  const shimmerTranslateX = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [-screenWidth * 2, screenWidth],
  });

  /* Render ----------------------------------------------------- */
  return (
    <ScrollView showsVerticalScrollIndicator={false} scrollEnabled={false}>
      {/* Bottom layer rectangles */}
      {Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => (
        <SkeletonItemBottom style={style} key={`bottom-${i}`} />
      ))}

      {/* Two angled shimmer bars */}
      {[0, screenWidth / 2].map((offset, i) => (
        <Animated.View
          key={`shimmer-${i}`}
          style={[
            styles.animatedView,
            {
              transform: [
                { translateX: Animated.add(shimmerTranslateX, offset) },
                { translateY: -20 },
                { rotate: "15deg" },
              ],
              backgroundColor:
                style?.shimmerBackgroundColor ??
                theme.conversationStyles.skeletonStyle.shimmerBackgroundColor,
              opacity:
                style?.shimmerOpacity ?? theme.conversationStyles.skeletonStyle.shimmerOpacity,
            },
          ]}
        />
      ))}

      {/* Top mask layer – sits above shimmer to carve out shapes */}
      <View style={StyleSheet.absoluteFill}>
        {Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => (
          <SkeletonItemTop style={style} key={`top-${i}`} />
        ))}
      </View>
    </ScrollView>
  );
};

// ───────────────────────────────────────────────────────────────
// Styles
// ───────────────────────────────────────────────────────────────
const styles = StyleSheet.create({
  animatedView: {
    width: "25%", // narrow bar looks nicer at an angle
    top: 0,
    bottom: 0,
    position: "absolute",
  },
});