import React, { useEffect, useRef } from 'react';
import {
  View,
  StyleSheet,
  Animated,
  useColorScheme,
} from 'react-native';
import { Colors } from '../constants/Colors';

interface SkeletonRowProps {
  delay?: number;
}

function SkeletonRow({ delay = 0 }: SkeletonRowProps) {
  const colorScheme = useColorScheme() ?? 'light';
  const colors = Colors[colorScheme];
  const opacity = useRef(new Animated.Value(0.3)).current;

  useEffect(() => {
    const animation = Animated.loop(
      Animated.sequence([
        Animated.timing(opacity, {
          toValue: 0.7,
          duration: 800,
          useNativeDriver: true,
          delay,
        }),
        Animated.timing(opacity, {
          toValue: 0.3,
          duration: 800,
          useNativeDriver: true,
        }),
      ])
    );
    animation.start();
    return () => animation.stop();
  }, [opacity, delay]);

  const bgColor = colorScheme === 'dark' ? '#374151' : '#e5e7eb';

  return (
    <View
      style={[
        styles.row,
        {
          backgroundColor: colors.card,
          borderColor: colors.border,
        },
      ]}
    >
      <Animated.View
        style={[
          styles.dot,
          { backgroundColor: bgColor, opacity },
        ]}
      />
      <View style={styles.content}>
        <Animated.View
          style={[
            styles.titleBar,
            { backgroundColor: bgColor, opacity },
          ]}
        />
        <Animated.View
          style={[
            styles.subtitleBar,
            { backgroundColor: bgColor, opacity },
          ]}
        />
      </View>
    </View>
  );
}

export function TaskListSkeleton() {
  return (
    <View style={styles.container}>
      <SkeletonRow delay={0} />
      <SkeletonRow delay={100} />
      <SkeletonRow delay={200} />
      <SkeletonRow delay={300} />
      <SkeletonRow delay={400} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    minHeight: 64,
  },
  dot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    marginRight: 12,
  },
  content: {
    flex: 1,
    gap: 8,
  },
  titleBar: {
    height: 16,
    width: '70%',
    borderRadius: 4,
  },
  subtitleBar: {
    height: 12,
    width: '40%',
    borderRadius: 4,
  },
});