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

export default function CheckupTab({ selectedTrip, selectedTripItems, checkupStats, startCheckupFlow }) {
  return (
    <View style={styles.section}>
      <Text style={styles.sectionTitle}>Check-Up</Text>

      {!selectedTrip ? <Text style={styles.muted}>Select a trip first.</Text> : null}
      {selectedTrip && selectedTripItems.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}

      {selectedTrip && selectedTripItems.length > 0 ? (
        <View style={styles.cardSoft}>
          <Text style={styles.cardTitle}>Run a check-up for {selectedTrip.name}</Text>
          <Text style={styles.cardMeta}>{selectedTripItems.length} items will be checked one by one.</Text>

          <View style={styles.statsRow}>
            <View style={[styles.statPill, styles.statPillCorrect]}>
              <Text style={styles.statPillText}>Correct: {checkupStats.correct}</Text>
            </View>
            <View style={[styles.statPill, styles.statPillBad]}>
              <Text style={styles.statPillText}>Bad: {checkupStats.bad}</Text>
            </View>
            <View style={[styles.statPill, styles.statPillPending]}>
              <Text style={styles.statPillText}>Pending: {checkupStats.pending}</Text>
            </View>
          </View>

          <Pressable style={styles.primaryBtn} onPress={startCheckupFlow}>
            <Text style={styles.primaryBtnText}>Start Check-Up</Text>
          </Pressable>
        </View>
      ) : null}
    </View>
  );
}