import React, { useCallback, useState } from 'react'
import { View, ScrollView, TouchableOpacity, Text, StyleSheet } from 'react-native'
import { useFocusEffect } from '@react-navigation/native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { initDatabase, getAllMeasurements } from '../database/db'
import { Measurement } from '../types'
import LatestMeasurementCard from '../components/LatestMeasurementCard'
import WeightChart from '../components/WeightChart'

type Props = { navigation: any }

export default function DashboardScreen({ navigation }: Props) {
  const insets = useSafeAreaInsets()
  const [all, setAll] = useState<Measurement[]>([])
  const [loading, setLoading] = useState(true)

  useFocusEffect(
    useCallback(() => {
      const load = async () => {
        setLoading(true)
        await initDatabase()
        const allM = await getAllMeasurements()
        const visible = allM.filter(m => !m.deletedAt)
        setAll(visible)
        setLoading(false)
      }
      load()
    }, [])
  )

  return (
    <View style={styles.outer}>
      <View style={styles.navBar}>
        <TouchableOpacity onPress={() => navigation.navigate('History')}>
          <Text style={styles.navLink}>Historie</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
          <Text style={styles.navLink}>Instellingen</Text>
        </TouchableOpacity>
      </View>
      <ScrollView style={styles.container}>
        {loading ? (
          <Text style={styles.loading}>Laden...</Text>
        ) : (
          <>
            <LatestMeasurementCard measurements={all} />
            <WeightChart measurements={all} />
          </>
        )}
      </ScrollView>

      <TouchableOpacity
        style={[styles.fab, { marginBottom: insets.bottom + 16 }]}
        onPress={() => navigation.navigate('NewMeasurement')}
      >
        <Text style={styles.fabText}>+ Nieuwe meting</Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  outer: { flex: 1, backgroundColor: '#f5f5f5' },
  container: { flex: 1 },
  navBar: { flexDirection: 'row', justifyContent: 'space-around', padding: 12, backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#eee' },
  navLink: { fontSize: 16, color: '#2196F3', fontWeight: '600' },
  fab: { backgroundColor: '#4CAF50', padding: 16, borderRadius: 8, margin: 16, alignItems: 'center' },
  fabText: { color: '#fff', fontSize: 16, fontWeight: '700' },
  loading: { fontSize: 16, color: '#999', textAlign: 'center', padding: 40 },
})