import { View, ScrollView, StyleSheet, ActivityIndicator } from 'react-native';
import { useTheme, Text, Card } from 'react-native-paper';
import { useLocalSearchParams } from 'expo-router';
import { useEffect, useState } from 'react';
import { getLocation } from '@/api/locations';

export default function Location() {
  const theme = useTheme();
  const { id } = useLocalSearchParams();
  const [location, setLocation] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchLocation = async () => {
      try {
        const data = await getLocation(id)
        setLocation(data);
      } catch (error) {
        console.error("Error fetching location:", error);
      } finally {
      setLoading(false);
      }
    }
    fetchLocation();
  }, [id]);

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

  if (!location) {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Brak lokalizacji - {id}</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <ScrollView>
        <Card style={{ margin: 10 }}>
          <Card.Cover style={{ marginBottom: 10 }} source={{ uri: location.image }} />
          <Card.Content style={{ marginBottom: 10 }}>
            <Text variant="headlineLarge" style={{ marginBottom: 10 }}>
              {location.name}
            </Text>
            <Text variant="headlineLarge" style={{ marginBottom: 10 }}>
              Opis:
            </Text>
            <Text variant="bodyMedium">{location.description}</Text>
          </Card.Content>

          <Card.Content>
            <Text variant="headlineLarge" style={{ marginBottom: 10 }}>
              Statystyki:
            </Text>
            <Text variant="bodyMedium" style={{ marginBottom: 10 }}>
              Powierzchnia: {location.area} km²
            </Text>
            <Text variant="bodyMedium" style={{ marginBottom: 10 }}>
              Ludność: {location.population} osób
            </Text>
          </Card.Content>
        </Card>
      </ScrollView>
    </View>
  );
}

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