import React from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
import { colors, spacing, borderRadius, typography } from '../../../../theme/tokens';
import { SectionHeader } from '../components/SectionHeader';
import { ParamRow } from '../components/ParamRow';
import { NumInput } from '../components/NumInput';
import { BoolRow } from '../components/BoolRow';
import type { ModelConfigFormState } from '../types';

interface OutputSectionProps {
  state: ModelConfigFormState;
}

export default function OutputSection({ state }: OutputSectionProps) {
  const {
    expanded, toggle, showTooltip,
    ignoreEos, setIgnoreEos,
    nProbs, setNProbs,
    stopStr, setStopStr,
  } = state;

  return (
    <>
      <SectionHeader
        title="📤 Sortie"
        badge="3 params"
        expanded={expanded.output}
        onToggle={() => toggle('output')}
      />
      {expanded.output && (
        <View style={styles.card}>
          <BoolRow
            paramKey="ignore_eos"
            value={ignoreEos}
            onChange={setIgnoreEos}
            onInfo={showTooltip}
          />
          <ParamRow paramKey="n_probs" onInfo={showTooltip}>
            <NumInput value={nProbs} onChange={setNProbs} placeholder="0 (désactivé)" />
          </ParamRow>
          <ParamRow paramKey="stop" onInfo={showTooltip}>
            <TextInput
              style={styles.textInput}
              value={stopStr}
              onChangeText={setStopStr}
              placeholder='ex: "User:,<|im_end|>,###"'
              placeholderTextColor={colors.textTertiary}
            />
          </ParamRow>
        </View>
      )}
    </>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.surface,
    borderRadius: borderRadius.lg,
    borderWidth: 1,
    borderColor: colors.border,
    padding: spacing.md,
    marginBottom: spacing.sm,
  },
  textInput: {
    backgroundColor: colors.background,
    borderRadius: borderRadius.md,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    fontSize: typography.sizes.sm,
    color: colors.textPrimary,
  },
});