<script setup>
import DialogModal from '@/Components/DialogModal.vue'
import InputLabel from '@/Components/InputLabel.vue'
import TextInput from '@/Components/TextInput.vue'
import { useForm } from '@inertiajs/vue3'
import { computed, watch } from 'vue'

const props = defineProps({
  show: { type: Boolean, default: false },
  client_case_uuid: { type: String, required: true },
  document: { type: Object, default: null },
  contracts: { type: Array, default: () => [] },
})

const emit = defineEmits(['close', 'saved'])

const form = useForm({
  name: '',
  description: '',
  is_public: false,
  contract_uuid: null,
})

watch(
  () => props.document,
  (d) => {
    if (!d) return
    form.name = d.name || d.original_name || ''
    form.description = d.description || ''
    form.is_public = !!d.is_public
    // Pre-fill contract selection if this doc belongs to a contract
    const isContract = (d?.documentable_type || '').toLowerCase().includes('contract')
    form.contract_uuid = isContract ? d.contract_uuid || null : null
  },
  { immediate: true }
)

const submit = () => {
  if (!props.document) return
  form.patch(
    route('clientCase.document.update', {
      client_case: props.client_case_uuid,
      document: props.document.uuid,
    }),
    {
      preserveScroll: true,
      onSuccess: () => {
        emit('saved')
        emit('close')
      },
    }
  )
}

const contractOptions = computed(() => {
  return props.contracts || []
})
</script>

<template>
  <DialogModal :show="show" @close="$emit('close')">
    <template #title>Uredi dokument</template>
    <template #content>
      <div class="space-y-4">
        <div>
          <InputLabel for="docName" value="Ime" />
          <TextInput id="docName" v-model="form.name" class="mt-1 block w-full" />
          <div v-if="form.errors.name" class="text-sm text-red-600 mt-1">{{ form.errors.name }}</div>
        </div>
        <div>
          <InputLabel for="docDesc" value="Opis" />
          <TextInput id="docDesc" v-model="form.description" class="mt-1 block w-full" />
          <div v-if="form.errors.description" class="text-sm text-red-600 mt-1">{{ form.errors.description }}</div>
        </div>
        <div class="flex items-center gap-2">
          <input id="docPublic" type="checkbox" v-model="form.is_public" />
          <InputLabel for="docPublic" value="Javno" />
        </div>
        <div>
          <InputLabel for="docContract" value="Pogodba" />
          <select id="docContract" v-model="form.contract_uuid" class="mt-1 block w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
            <option :value="null">— Brez — (dok. pri primeru)</option>
            <option v-for="c in contractOptions" :key="c.uuid || c.id" :value="c.uuid">{{ c.reference || c.uuid }}</option>
          </select>
          <div v-if="form.errors.contract_uuid" class="text-sm text-red-600 mt-1">{{ form.errors.contract_uuid }}</div>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="flex justify-end gap-2">
        <button type="button" class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200" @click="$emit('close')">Prekliči</button>
        <button type="button" class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" :disabled="form.processing" @click="submit">Shrani</button>
      </div>
    </template>
  </DialogModal>
</template>