import React, { useRef, useEffect } from 'react';
import { View, StyleSheet, Animated } from 'react-native';
import { colors, spacing, radii } from '../../theme';
import { useResponsive } from '../../hooks/useResponsive';

function ShimmerWrapper({ children }: { children: React.ReactNode }) {
  const shimmerAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(shimmerAnim, { toValue: 1, duration: 1200, useNativeDriver: true }),
        Animated.timing(shimmerAnim, { toValue: 0, duration: 1200, useNativeDriver: true }),
      ])
    ).start();
  }, []);

  const opacity = shimmerAnim.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [0.4, 0.7, 0.4],
  });

  return <Animated.View style={{ opacity }}>{children}</Animated.View>;
}

export function SkeletonLine({ width = 100, height = 14 }: { width?: number; height?: number }) {
  return (
    <ShimmerWrapper>
      <View style={[styles.line, { width: `${width}%`, height }]} />
    </ShimmerWrapper>
  );
}

export function SkeletonCard() {
  const { isPhone } = useResponsive();
  return (
    <View style={[styles.card, { width: isPhone ? '100%' : '48%' }]}>
      <SkeletonLine width={40} height={12} />
      <View style={{ height: spacing.sm }} />
      <SkeletonLine width={70} height={28} />
      <View style={{ height: spacing.sm }} />
      <SkeletonLine width={50} height={12} />
    </View>
  );
}

export function SkeletonTable({ rows = 5 }: { rows?: number }) {
  const { contentPadding } = useResponsive();
  return (
    <View style={[styles.table, { padding: contentPadding }]}>
      <View style={styles.tableHeader}>
        <SkeletonLine width={20} height={12} />
        <SkeletonLine width={30} height={12} />
        <SkeletonLine width={25} height={12} />
        <SkeletonLine width={15} height={12} />
      </View>
      {Array.from({ length: rows }).map((_, i) => (
        <View key={i} style={styles.tableRow}>
          <SkeletonLine width={20} height={14} />
          <SkeletonLine width={30} height={14} />
          <SkeletonLine width={25} height={14} />
          <SkeletonLine width={15} height={14} />
        </View>
      ))}
    </View>
  );
}

export function SkeletonDashboard() {
  const { contentPadding } = useResponsive();
  return (
    <View style={[styles.dashboard, { padding: contentPadding }]}>
      <View style={styles.statRow}>
        {Array.from({ length: 4 }).map((_, i) => (
          <SkeletonCard key={i} />
        ))}
      </View>
      <View style={{ height: spacing.xl }} />
      <SkeletonLine width={35} height={20} />
      <View style={{ height: spacing.md }} />
      {Array.from({ length: 3 }).map((_, i) => (
        <SkeletonLine key={i} width={100} height={48} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  line: {
    backgroundColor: colors.gray[100],
    borderRadius: radii.sm,
  },
  card: {
    backgroundColor: colors.white,
    borderRadius: radii.lg,
    padding: spacing.lg,
  },
  table: {
    flex: 1,
    backgroundColor: colors.background,
  },
  tableHeader: {
    flexDirection: 'row',
    padding: spacing.lg,
    gap: spacing.lg,
    backgroundColor: colors.gray[50],
    borderRadius: radii.lg,
    marginBottom: spacing.sm,
  },
  tableRow: {
    flexDirection: 'row',
    padding: spacing.lg,
    gap: spacing.lg,
    borderBottomWidth: 1,
    borderBottomColor: colors.gray[100],
    backgroundColor: colors.white,
  },
  dashboard: {
    flex: 1,
    backgroundColor: colors.background,
  },
  statRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: spacing.md,
  },
});