import React from 'react';
import { Pressable, Text, View } from 'react-native';
import { styles } from '../styles';

export default function HistoryTab({ selectedTrip, selectedTripCheckups, selectedCheckupId, setSelectedCheckupId }) {
  return (
    <View style={styles.section}>
      <Text style={styles.sectionTitle}>History</Text>

      {!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
      {selectedTrip ? <Text style={styles.tripHistoryLabel}>Check-ups for: {selectedTrip.name}</Text> : null}
      {selectedTrip && selectedTripCheckups.length === 0 ? <Text style={styles.muted}>No check-ups saved yet.</Text> : null}

      {selectedTripCheckups.map((checkup) => (
        <View key={checkup.id} style={styles.cardSoft}>
          <Pressable onPress={() => setSelectedCheckupId((prev) => (prev === checkup.id ? null : checkup.id))}>
            <Text style={styles.cardTitle}>{new Date(checkup.createdAt).toLocaleString()}</Text>
            <Text style={styles.cardMeta}>
              {checkup.snapshot.length} items · correct: {checkup.stats?.correct ?? checkup.snapshot.filter((x) => x.result === 'correct').length} · bad:{' '}
              {checkup.stats?.bad ?? checkup.snapshot.filter((x) => x.result === 'bad').length}
            </Text>
            <Text style={styles.cardMeta}>{selectedCheckupId === checkup.id ? 'Tap to collapse' : 'Tap to open'}</Text>
          </Pressable>

          {selectedCheckupId === checkup.id ? (
            <View style={styles.snapshotWrap}>
              {checkup.snapshot.map((entry) => (
                <View key={entry.itemId} style={styles.snapshotRow}>
                  <Text style={styles.snapshotTitle}>{entry.name}</Text>
                  <Text style={styles.cardMeta}>
                    {entry.status} · {entry.placement}
                    {entry.status === 'lent-to' && entry.lentTo ? ` · ${entry.lentTo}` : ''}
                  </Text>
                </View>
              ))}
            </View>
          ) : null}
        </View>
      ))}
    </View>
  );
}