<template>
  <div class="rounded-lg border border-amber-200 bg-amber-50 p-4">
    <p class="mb-3 text-sm font-semibold text-amber-900">{{ prompt }}</p>
    <form class="space-y-3" @submit.prevent="submit">
      <div v-for="field in fields" :key="field.name" class="space-y-1">
        <label class="text-xs font-medium text-slate-600">
          {{ field.label }}
        </label>
        <input
          v-model="form[field.name]"
          class="w-full rounded border border-slate-300 px-3 py-2 text-sm"
          :type="field.type === 'number' ? 'number' : 'text'"
          :required="field.required"
        />
      </div>
      <button
        type="submit"
        class="rounded bg-slate-900 px-4 py-2 text-sm font-semibold text-white"
      >
        Submit
      </button>
    </form>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  schema: Record<string, any>
  prompt: string
}>()

const emit = defineEmits<{
  (event: 'submit', payload: Record<string, unknown>): void
}>()

const form = reactive<Record<string, string>>({})

const fields = computed(() => {
  const properties = props.schema?.properties || {}
  const required = props.schema?.required || []
  return Object.entries(properties).map(([name, config]: [string, any]) => ({
    name,
    label: config.title || name,
    type: config.type || 'string',
    required: required.includes(name),
  }))
})

const submit = () => {
  emit('submit', { ...form })
}
</script>
