<script setup>
import { computed } from 'vue'
import RadioButtonGroup from '@/Components/RadioButtonGroup.vue'

const props = defineProps({
  question: {
    type: Object,
    required: true,
  },
  modelValue: {
    type: Object,
    default: () => ({ value: null, text_value: '' }),
  },
})

const emit = defineEmits(['update:modelValue'])

const hasRadioButtons = computed(() => {
  return props.question.has_yes || props.question.has_no || props.question.has_na
})

const showDetails = computed(() => {
  const d = props.question.details
  if (!d) return false
  if (d === 'required' || d === 'optional') return true
  if (d === 'req_on_yes' && props.modelValue.value === 'yes') return true
  if (d === 'req_on_no' && props.modelValue.value === 'no') return true
  return false
})

const detailsRequired = computed(() => {
  const d = props.question.details
  if (d === 'required') return true
  if (d === 'req_on_yes' && props.modelValue.value === 'yes') return true
  if (d === 'req_on_no' && props.modelValue.value === 'no') return true
  return false
})

const isTextOnly = computed(() => {
  return !hasRadioButtons.value && props.question.details
})

const availableOptions = computed(() => {
  const opts = []
  if (props.question.has_yes) opts.push({ value: 'yes', label: 'Yes' })
  if (props.question.has_no) opts.push({ value: 'no', label: 'No' })
  if (props.question.has_na) opts.push({ value: 'not_applicable', label: 'N/A' })
  return opts
})

const updateValue = (value) => {
  emit('update:modelValue', { ...props.modelValue, value })
}

const updateTextValue = (event) => {
  emit('update:modelValue', { ...props.modelValue, text_value: event.target.value })
}
</script>

<template>
    <div class="py-4">
        <p class="text-white mb-3">{{ question.text }}</p>

        <!-- Text-only question (no radio buttons) -->
        <div v-if="isTextOnly">
            <textarea
                :value="modelValue.text_value"
                @input="updateTextValue"
                rows="3"
                class="w-full rounded-lg border border-gray-600 bg-surface px-3 py-2 text-white placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary"
                placeholder="Enter your response..."
            ></textarea>
        </div>

        <!-- Radio button question -->
        <div v-if="hasRadioButtons">
            <RadioButtonGroup
                :modelValue="modelValue.value"
                @update:modelValue="updateValue($event)"
                :name="`question-${question.id}`"
                :options="availableOptions"
                class="mb-3"
            />

            <!-- Details textarea (conditional) -->
            <div v-if="showDetails" class="mt-2">
                <label class="block text-sm text-gray-400 mb-1">
                    Details{{ detailsRequired ? ' (required)' : ' (optional)' }}
                </label>
                <textarea
                    :value="modelValue.text_value"
                    @input="updateTextValue"
                    rows="2"
                    class="w-full rounded-lg border border-gray-600 bg-surface px-3 py-2 text-white placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary text-sm"
                    placeholder="Enter details..."
                ></textarea>
            </div>
        </div>
    </div>
</template>
