import { View, StyleSheet, FlatList, ActivityIndicator, RefreshControl } from 'react-native';
import { useTheme, Card, Text, Button } from 'react-native-paper';
import { Link } from 'expo-router';
import { useState, useEffect } from 'react';
import { listLocations } from '@/api/locations';

export default function Index() {
  const theme = useTheme();
  const [locations, setLocations] = useState([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  const fetchLocations = async () => {
    try {
      const data = await listLocations();
      setLocations(data);
    } catch (error) {
      console.error("Error fetching locations:", error);
    } finally {
      setLoading(false);
    }
  };

  const onRefresh = async () => {
    setRefreshing(true);
    await fetchLocations();
    setRefreshing(false);
  };

  useEffect(() => {
    fetchLocations();
  }, []);

  if (loading) {
    return (
      <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
        <ActivityIndicator size="large" color={theme.colors.primary} />
      </View>
    );
  }

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
      <FlatList
        data={locations}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <Card style={{ margin: 10 }}>
            <Card.Cover style={{ marginBottom: 10 }} source={{ uri: item.image }} />
            <Card.Content style={{ marginBottom: 10 }}>
              <Text variant="titleLarge">{item.name}</Text>
              <Text variant="bodyMedium">
                {item.description && item.description.split('.')[0]}...
              </Text>
            </Card.Content>
            <Card.Actions>
              <Link href={`/location/${item.id}`} asChild>
                <Button>Zobacz więcej</Button>
              </Link>
            </Card.Actions>
          </Card>
        )}
        refreshControl={
        <RefreshControl
            refreshing={refreshing || loading}
            onRefresh={onRefresh}
            colors={["#3b82f6"]}
            tintColor="#3b82f6"
        />
      }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'center',
    alignItems: 'center',
  },
});