client/components/trainee/AnswerStep.tsx

import React from "react";
import { View, Text, Pressable, TextInput } from "react-native";
import { useTraineeStyles } from "@/styles/trainee.styles";
import { useColors } from "@/theme/colors";
import { CONFIDENCE_LEVELS } from "@/constants/trainee";
import type { Scenario } from "@/services/trainingService";

type Props = {
  scenario: Scenario;
  answer: string;
  setAnswer: (t: string) => void;
  confidence: number | null;
  setConfidence: (n: number) => void;
  submitting?: boolean;
  onBack: () => void;
  onSubmit: () => void;
};

// Step 2: read the scenario, write a free-text answer, pick a confidence level.
export default function AnswerStep({
  scenario,
  answer,
  setAnswer,
  confidence,
  setConfidence,
  submitting = false,
  onBack,
  onSubmit,
}: Props) {
  const styles = useTraineeStyles();
  const colors = useColors();

  const canSubmit = answer.trim().length > 0 && confidence !== null && !submitting;

  return (
    <View>
      <Text style={styles.title}>Scenario</Text>
      <View style={styles.card}>
        <Text style={styles.body}>{scenario.text}</Text>
      </View>

      <Text style={styles.sectionTitle}>Your answer</Text>
      <TextInput
        value={answer}
        onChangeText={setAnswer}
        editable={!submitting}
        placeholder="Write your answer and reasoning here…"
        placeholderTextColor={colors.secondary}
        multiline
        style={styles.answerInput}
      />

      <Text style={styles.sectionTitle}>How confident are you?</Text>
      <View style={styles.confidenceRow}>
        {CONFIDENCE_LEVELS.map((level) => {
          const selected = confidence === level.value;
          return (
            <Pressable
              key={level.value}
              disabled={submitting}
              style={({ pressed }) => [
                styles.confidenceButton,
                selected && styles.confidenceButtonSelected,
                submitting && styles.disabled,
                pressed && !submitting && { opacity: 0.8 },
              ]}
              onPress={() => setConfidence(level.value)}
            >
              <Text style={styles.confidenceNumber}>{level.value}</Text>
            </Pressable>
          );
        })}
      </View>
      <Text style={styles.confidenceCaption}>
        {confidence === null
          ? "Select a level"
          : `${confidence} · ${CONFIDENCE_LEVELS[confidence - 1].label}`}
      </Text>

      <View style={{ flexDirection: "row", gap: 12 }}>
        <Pressable
          disabled={submitting}
          style={({ pressed }) => [
            styles.secondaryButton,
            submitting && styles.disabled,
            pressed && !submitting && { opacity: 0.7 },
          ]}
          onPress={onBack}
        >
          <Text style={styles.buttonText}>Back</Text>
        </Pressable>
        <Pressable
          disabled={!canSubmit}
          style={({ pressed }) => [
            styles.primaryButton,
            !canSubmit && styles.disabled,
            pressed && canSubmit && { opacity: 0.7 },
          ]}
          onPress={onSubmit}
        >
          <Text style={styles.buttonText}>
            {submitting ? "Submitting…" : "Submit answer"}
          </Text>
        </Pressable>
      </View>
    </View>
  );
}