import { ThemedText } from "@/components/themed-text";
import { Colors } from "@/constants/theme";
import { useTheme } from "@/context/ThemeContext";
import { fetchOdds } from "@/lib/api";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, StyleSheet, View } from "react-native";

interface OddsViewProps {
  sportId: number;
  matchId: number;
}

export function OddsView({ sportId, matchId }: OddsViewProps) {
  const { theme } = useTheme();
  const { t } = useTranslation();
  const isDark = theme === "dark";
  const bgColor = isDark ? "#1C1C1E" : "#FFF";

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;

    const run = async () => {
      try {
        setLoading(true);
        setError(null);
        const data = await fetchOdds(sportId, matchId);
        if (cancelled) return;
        console.log("odds", { sportId, matchId, data });
      } catch (e: any) {
        if (cancelled) return;
        setError(e?.message || "fetchOdds failed");
      } finally {
        if (!cancelled) setLoading(false);
      }
    };

    run();
    return () => {
      cancelled = true;
    };
  }, [sportId, matchId]);

  return (
    <View style={[styles.container, { backgroundColor: bgColor }]}>
      {loading ? (
        <View style={styles.center}>
          <ActivityIndicator size="small" color={Colors[theme].tint} />
          <ThemedText style={styles.text}>{t("detail.loading")}</ThemedText>
        </View>
      ) : error ? (
        <ThemedText style={styles.text}>{error}</ThemedText>
      ) : (
        <ThemedText style={styles.text}>{t("detail.empty_odds")}</ThemedText>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    marginTop: 0,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  center: {
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
  },
  text: {
    opacity: 0.7,
  },
});