// api/fieldfunded.ts
const BASE_URL = 'https://api.fieldfunded.com/v1';
const API_KEY = process.env.FIELDFUNDED_API_KEY!;

const headers = {
  'X-API-Key': API_KEY,
  'Accept-Encoding': 'gzip',  // Reduce data usage
};

export async function apiGet<T>(path: string, params?: Record<string, string>): Promise<T> {
  const url = new URL(`${BASE_URL}${path}`);
  if (params) {
    Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
  }

  const res = await fetch(url.toString(), { headers });
  if (!res.ok) throw new Error(`API error: ${res.status}`);
  return res.json();
}

// screens/EventsScreen.tsx
import React, { useEffect, useState } from 'react';
import { FlatList, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import { apiGet } from '../api/fieldfunded';

interface Event {
  id: string;
  home_team: string;
  away_team: string;
  commence_time: string;
  sport_key: string;
}

export function EventsScreen({ navigation }: any) {
  const [events, setEvents] = useState<Event[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    apiGet<{ events: Event[] }>('/events', { sport: 'soccer' })
      .then(data => setEvents(data.events || []))
      .finally(() => setLoading(false));
  }, []);

  return (
    <FlatList
      data={events}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <TouchableOpacity
          style={styles.card}
          onPress={() => navigation.navigate('Odds', { eventId: item.id })}
        >
          <Text style={styles.teams}>
            {item.home_team} vs {item.away_team}
          </Text>
          <Text style={styles.time}>
            {new Date(item.commence_time).toLocaleString()}
          </Text>
        </TouchableOpacity>
      )}
    />
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, borderBottomWidth: 1, borderColor: '#eee' },
  teams: { fontSize: 16, fontWeight: '600' },
  time: { fontSize: 12, color: '#888', marginTop: 4 },
});

// screens/OddsScreen.tsx
import React, { useEffect, useState } from 'react';
import { ScrollView, Text, View, StyleSheet } from 'react-native';
import { apiGet } from '../api/fieldfunded';

interface Market {
  id: string;
  name: string;
  selections: { id: string; name: string; odds: number }[];
}

export function OddsScreen({ route }: any) {
  const { eventId } = route.params;
  const [markets, setMarkets] = useState<Market[]>([]);

  useEffect(() => {
    apiGet<{ markets: Market[] }>(`/events/${eventId}/odds`)
      .then(data => setMarkets(data.markets || []));
  }, [eventId]);

  return (
    <ScrollView style={styles.container}>
      {markets.map(market => (
        <View key={market.id} style={styles.marketCard}>
          <Text style={styles.marketName}>{market.name}</Text>
          {market.selections.map(sel => (
            <View key={sel.id} style={styles.selectionRow}>
              <Text style={styles.selName}>{sel.name}</Text>
              <Text style={styles.odds}>{sel.odds.toFixed(2)}</Text>
            </View>
          ))}
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  marketCard: { marginBottom: 16, padding: 12, backgroundColor: '#f9f9f9', borderRadius: 8 },
  marketName: { fontSize: 14, fontWeight: '700', marginBottom: 8 },
  selectionRow: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 6 },
  selName: { fontSize: 14 },
  odds: { fontSize: 14, fontWeight: '600', color: '#2563eb' },
});

// hooks/useLiveScores.ts
import { useEffect, useRef, useState } from 'react';
import { AppState } from 'react-native';
import { apiGet } from '../api/fieldfunded';

export function useLiveScores(sport: string) {
  const [scores, setScores] = useState<any[]>([]);
  const intervalRef = useRef<NodeJS.Timer | null>(null);

  useEffect(() => {
    const poll = async () => {
      const data = await apiGet<{ scores: any[] }>('/scores', { sport });
      setScores(data.scores || []);
    };

    // Start polling
    poll();
    intervalRef.current = setInterval(poll, 30_000); // 30s when app is active

    // Reduce polling when app is backgrounded
    const sub = AppState.addEventListener('change', (state) => {
      if (intervalRef.current) clearInterval(intervalRef.current);
      if (state === 'active') {
        poll(); // Immediate refresh on foreground
        intervalRef.current = setInterval(poll, 30_000);
      }
      // Stop polling entirely when backgrounded
    });

    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
      sub.remove();
    };
  }, [sport]);

  return scores;
}

// utils/cache.ts
import AsyncStorage from '@react-native-async-storage/async-storage';

const CACHE_TTL = 60_000; // 1 minute

interface CacheEntry<T> {
  data: T;
  timestamp: number;
}

export async function cachedFetch<T>(
  key: string,
  fetcher: () => Promise<T>
): Promise<T> {
  const cached = await AsyncStorage.getItem(key);

  if (cached) {
    const entry: CacheEntry<T> = JSON.parse(cached);
    if (Date.now() - entry.timestamp < CACHE_TTL) {
      return entry.data;
    }
  }

  const data = await fetcher();
  await AsyncStorage.setItem(key, JSON.stringify({
    data,
    timestamp: Date.now(),
  }));
  return data;
}