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

export default function CheckupTab({ checkupSession, answerCheckupYes, openFixModal, createFreshCheckupSession, saveCheckup }) {
  return (
    <View style={styles.section}>
      <View style={styles.sectionRow}>
        <Text style={styles.sectionTitle}>Check-Up</Text>
        <Pressable style={styles.secondaryBtnTight} onPress={createFreshCheckupSession}>
          <Text style={styles.secondaryBtnText}>Restart</Text>
        </Pressable>
      </View>

      {checkupSession.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}

      {checkupSession.map((entry) => (
        <View key={entry.itemId} style={styles.cardSoft}>
          <Text style={styles.cardTitle}>{entry.name}</Text>
          <Text style={styles.cardMeta}>{entry.category || 'uncategorized'}</Text>
          <Text style={styles.cardMeta}>
            {entry.current.status} · {entry.current.placement}
            {entry.current.status === 'lent-to' && entry.current.lentTo ? ` · ${entry.current.lentTo}` : ''}
          </Text>

          <View style={styles.answerRow}>
            <Pressable style={styles.answerYes} onPress={() => answerCheckupYes(entry.itemId)}>
              <Text style={styles.answerText}>Yes</Text>
            </Pressable>
            <Pressable style={styles.answerNo} onPress={() => openFixModal(entry.itemId)}>
              <Text style={styles.answerText}>No</Text>
            </Pressable>
            <View style={[styles.answerStateDot, entry.confirmed ? styles.answerStateDotOn : null]} />
          </View>
        </View>
      ))}

      {!!checkupSession.length && (
        <Pressable style={styles.primaryBtn} onPress={saveCheckup}>
          <Text style={styles.primaryBtnText}>Save Check-Up Snapshot</Text>
        </Pressable>
      )}
    </View>
  );
}