import React, { useState, useCallback } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { ScreenListContainer } from '../../components/layout/ScreenContainer';
import { AnimatedCard } from '../../components/ui/AnimatedCard';
import { EmptyState } from '../../components/ui/EmptyState';
import { useResponsive } from '../../hooks/useResponsive';
import { locationService } from '../../services/locationService';
import { LocationLog } from '../../types';
import { colors, spacing, radii } from '../../theme';

export default function LocationHistoryScreen() {
  const navigation = useNavigation<any>();
  const { contentPadding, fontSize } = useResponsive();
  const [locations, setLocations] = useState<LocationLog[]>([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  const loadLocations = async () => {
    try {
      const data = await locationService.history();
      setLocations(data);
    } catch (error) {
      console.error('Failed to load locations:', error);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    loadLocations();
  }, []);

  React.useEffect(() => {
    loadLocations();
  }, []);

  return (
    <ScreenListContainer
      title="Location History"
      subtitle={`${locations.length} records`}
      onBack={() => navigation.goBack()}
      loading={loading}
      refreshing={refreshing}
      onRefresh={onRefresh}
      data={locations}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item, index }) => (
        <AnimatedCard delay={index * 60} style={{ marginBottom: spacing.sm }}>
          <View style={[styles.row, { gap: spacing.md }]}>
            <View style={[styles.iconContainer, { backgroundColor: colors.primary[50] }]}>
              <Ionicons name="location" size={18} color={colors.primary[600]} />
            </View>
            <View style={styles.info}>
              <Text style={[styles.coords, { fontSize: fontSize.body }]}>
                {item.latitude.toFixed(6)}, {item.longitude.toFixed(6)}
              </Text>
              <Text style={[styles.time, { fontSize: fontSize.caption, marginTop: spacing.xs }]}>
                {new Date(item.recorded_at).toLocaleString()}
              </Text>
            </View>
          </View>
        </AnimatedCard>
      )}
      ListEmptyComponent={
        <EmptyState
          icon="location-outline"
          title="No location records"
          description="Location history will appear here"
        />
      }
    />
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconContainer: {
    width: 36,
    height: 36,
    borderRadius: radii.md,
    justifyContent: 'center',
    alignItems: 'center',
  },
  info: {
    flex: 1,
  },
  coords: {
    fontFamily: 'monospace',
    color: colors.gray[800],
  },
  time: {
    color: colors.gray[400],
  },
});