<script setup>
import { watch } from 'vue'
import { useForm } from '@inertiajs/vue3'
import Modal from '../Modal.vue'
import FormInput from './FormInput.vue'

const props = defineProps({
    commitment: { type: Object, default: null },
    projectId: { type: [Number, String], required: true },
    users: { type: Array, default: () => [] },
    show: { type: Boolean, default: false },
})

const emit = defineEmits(['close'])

const isEditing = !!props.commitment

const form = useForm({
    beschrijving: props.commitment?.beschrijving ?? '',
    eigenaar_id: props.commitment?.eigenaar_id ?? '',
    deadline: props.commitment?.deadline ?? '',
    prioriteit: props.commitment?.prioriteit ?? '',
    project_id: props.projectId,
})

watch(() => props.show, (val) => {
    if (val) {
        form.beschrijving = props.commitment?.beschrijving ?? ''
        form.eigenaar_id = props.commitment?.eigenaar_id ?? ''
        form.deadline = props.commitment?.deadline ?? ''
        form.prioriteit = props.commitment?.prioriteit ?? ''
        form.project_id = props.projectId
        form.clearErrors()
    }
})

const userOptions = props.users.map(u => ({
    value: u.id,
    label: u.name ?? u.naam ?? String(u.id),
}))

const prioriteitOptions = [
    { value: 'laag', label: 'Laag' },
    { value: 'midden', label: 'Midden' },
    { value: 'hoog', label: 'Hoog' },
]

const handleSubmit = () => {
    form.post('/commitments', {
        onSuccess: () => emit('close'),
    })
}

const handleClose = () => {
    form.reset()
    form.clearErrors()
    emit('close')
}
</script>

<template>
    <Modal
        :show="show"
        :title="isEditing ? 'COMMITMENT BEWERKEN' : 'NIEUW COMMITMENT'"
        max-width="480px"
        @close="handleClose"
    >
        <form class="commitment-form" @submit.prevent="handleSubmit">
            <div class="form-grid">
                <FormInput
                    label="Beschrijving"
                    type="textarea"
                    :model-value="form.beschrijving"
                    :error="form.errors.beschrijving"
                    :required="true"
                    placeholder="Omschrijf het commitment..."
                    @update:model-value="form.beschrijving = $event"
                />

                <FormInput
                    label="Eigenaar"
                    type="select"
                    :model-value="form.eigenaar_id"
                    :options="userOptions"
                    :error="form.errors.eigenaar_id"
                    :required="true"
                    @update:model-value="form.eigenaar_id = $event"
                />

                <FormInput
                    label="Deadline"
                    type="date"
                    :model-value="form.deadline"
                    :error="form.errors.deadline"
                    :required="true"
                    @update:model-value="form.deadline = $event"
                />

                <FormInput
                    label="Prioriteit"
                    type="select"
                    :model-value="form.prioriteit"
                    :options="prioriteitOptions"
                    :error="form.errors.prioriteit"
                    @update:model-value="form.prioriteit = $event"
                />
            </div>

            <div class="form-actions">
                <button type="button" class="btn-cancel" @click="handleClose">
                    [ANNULEER]
                </button>
                <button
                    type="submit"
                    class="btn-submit"
                    :disabled="form.processing"
                >
                    <span v-if="form.processing">VERWERKEN...</span>
                    <span v-else>{{ isEditing ? '[OPSLAAN]' : '[AANMAKEN]' }}</span>
                </button>
            </div>
        </form>
    </Modal>
</template>

<style scoped>
.commitment-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 210, 255, 0.12);
}

.btn-cancel,
.btn-submit {
    font-family: 'VT323', monospace;
    font-size: 16px;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.5px;
}

.btn-cancel {
    background: transparent;
    border: 1px solid rgba(136, 146, 176, 0.4);
    color: #8892b0;
}

.btn-cancel:hover {
    border-color: #e94560;
    color: #e94560;
    text-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
}

.btn-submit {
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid #00d2ff;
    color: #00d2ff;
}

.btn-submit:hover:not(:disabled) {
    background: rgba(0, 210, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
}

.btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
</style>
