import { StyleSheet, View } from "react-native";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  useDerivedValue,
  Easing,
} from "react-native-reanimated";
import { ThemedView } from "@/components/ThemedView";
import { ThemedText } from "@/components/ThemedText";
import { useThemeColor } from "@/hooks/useThemeColor";

export const LoadingView = () => {
  const rotation = useSharedValue(0);

  // Theme-aware colors
  const backgroundColor = useThemeColor({ light: "#f8fafc", dark: "#111827" }, "background");
  const textColor = useThemeColor({ light: "#1f2937", dark: "#f9fafb" }, "text");
  const subtitleColor = useThemeColor({ light: "#6b7280", dark: "#9ca3af" }, "text");

  rotation.value = withRepeat(
    withTiming(360, { easing: Easing.linear, duration: 2000 }),
    -1,
    false
  );
  const rotationDeg = useDerivedValue(() => {
    return `${rotation.value}deg`;
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ rotate: rotationDeg.value }],
    };
  });

  return (
    <ThemedView style={[styles.loadingContainer, { backgroundColor }]}>
      <View style={styles.loadingContent}>
        <View style={styles.logoContainer}>
          <Animated.Image
            source={require("@/assets/images/logo.png")}
            style={[styles.logo, animatedStyle]}
          />
        </View>
        <ThemedText type="title" style={[styles.title, { color: textColor }]}>
          XTablo
        </ThemedText>
        <ThemedText type="subtitle" style={[styles.subtitle, { color: subtitleColor }]}>
          Initialisation de l'application...
        </ThemedText>
      </View>
    </ThemedView>
  );
};

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  loadingContent: {
    alignItems: "center",
    paddingHorizontal: 40,
  },
  logoContainer: {
    alignItems: "center",
    width: 130,
    height: 130,
  },
  logo: {
    width: 100,
    height: 100,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  title: {
    fontSize: 28,
    fontWeight: "bold",
    textAlign: "center",
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    textAlign: "center",
    marginBottom: 32,
    opacity: 0.8,
  },
});