import React from 'react';
import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
import { ITEM_PLACEMENTS, ITEM_STATUSES } from '../constants';
import ChipGroup from '../components/ChipGroup';
import Field from '../components/Field';
import { styles } from '../styles';

export default function CheckupFixModal({
  visible,
  checkupFixForm,
  setCheckupFixForm,
  setCheckupFixModalVisible,
  saveFixModal,
}) {
  return (
    <Modal visible={visible} animationType="slide" transparent>
      <View style={styles.modalBackdrop}>
        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
          <View style={styles.modalCard}>
            <View style={styles.sectionRow}>
              <Text style={styles.sectionTitle}>Update for this Check-Up</Text>
              <Pressable onPress={() => setCheckupFixModalVisible(false)}>
                <Text style={styles.closeText}>Close</Text>
              </Pressable>
            </View>

            <ScrollView
              keyboardShouldPersistTaps="handled"
              keyboardDismissMode="interactive"
              contentContainerStyle={{ paddingBottom: 12 }}
              showsVerticalScrollIndicator={false}
            >
              <Field label="Status">
                <ChipGroup
                  options={ITEM_STATUSES}
                  value={checkupFixForm.status}
                  onChange={(v) => setCheckupFixForm((prev) => ({ ...prev, status: v }))}
                />
              </Field>

              <Field label="Placement">
                <ChipGroup
                  options={ITEM_PLACEMENTS}
                  value={checkupFixForm.placement}
                  onChange={(v) => setCheckupFixForm((prev) => ({ ...prev, placement: v }))}
                />
              </Field>

              {checkupFixForm.status === 'lent-to' ? (
                <Field label="Lent to">
                  <TextInput
                    style={styles.input}
                    value={checkupFixForm.lentTo}
                    onChangeText={(v) => setCheckupFixForm((prev) => ({ ...prev, lentTo: v }))}
                    placeholder="Person name"
                    placeholderTextColor="#6b7280"
                  />
                </Field>
              ) : null}

              <Pressable
                style={styles.inlineToggle}
                onPress={() => setCheckupFixForm((prev) => ({ ...prev, updateMasterList: !prev.updateMasterList }))}
              >
                <Text style={styles.inlineToggleText}>
                  {checkupFixForm.updateMasterList ? '☑' : '☐'} Also update item in trip list
                </Text>
              </Pressable>

              <Pressable style={styles.primaryBtn} onPress={saveFixModal}>
                <Text style={styles.primaryBtnText}>Save</Text>
              </Pressable>
            </ScrollView>
          </View>
        </KeyboardAvoidingView>
      </View>
    </Modal>
  );
}