import React, { useCallback, useState } from 'react'
import { View, FlatList, StyleSheet, Text } from 'react-native'
import { useFocusEffect } from '@react-navigation/native'
import { initDatabase, getAllMeasurements } from '../database/db'
import { Measurement } from '../types'
import MeasurementRow from '../components/MeasurementRow'

export default function HistoryScreen() {
  const [measurements, setMeasurements] = useState<Measurement[]>([])

  useFocusEffect(
    useCallback(() => {
      const load = async () => {
        await initDatabase()
        const all = await getAllMeasurements()
        setMeasurements(all)
      }
      load()
    }, [])
  )

  return (
    <View style={styles.container}>
      <Text style={styles.count}>{measurements.length} metingen</Text>
      <FlatList
        data={measurements}
        keyExtractor={item => item.id}
        renderItem={({ item }) => <MeasurementRow measurement={item} />}
        contentContainerStyle={measurements.length === 0 ? styles.empty : undefined}
        ListEmptyComponent={<Text style={styles.emptyText}>Nog geen metingen</Text>}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f5f5f5' },
  count: { fontSize: 14, color: '#666', padding: 16, paddingBottom: 8 },
  empty: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  emptyText: { fontSize: 16, color: '#999' },
})