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

const props = defineProps({
    project: { type: Object, default: null },
    speerpunten: { type: Array, default: () => [] },
    show: { type: Boolean, default: false },
})

const emit = defineEmits(['close'])

const isEditing = !!props.project

const form = useForm({
    naam: props.project?.naam ?? '',
    beschrijving: props.project?.beschrijving ?? '',
    speerpunt_id: props.project?.speerpunt_id ?? '',
    prioriteit: props.project?.prioriteit ?? '',
    startdatum: props.project?.startdatum ?? '',
    streef_einddatum: props.project?.streef_einddatum ?? '',
})

// Reset form when show changes to true and project changes
watch(() => props.show, (val) => {
    if (val) {
        form.naam = props.project?.naam ?? ''
        form.beschrijving = props.project?.beschrijving ?? ''
        form.speerpunt_id = props.project?.speerpunt_id ?? ''
        form.prioriteit = props.project?.prioriteit ?? ''
        form.startdatum = props.project?.startdatum ?? ''
        form.streef_einddatum = props.project?.streef_einddatum ?? ''
        form.clearErrors()
    }
})

const speerpuntOptions = props.speerpunten.map(s => ({
    value: s.id,
    label: s.naam ?? s.name ?? s.id,
}))

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

const handleSubmit = () => {
    if (isEditing) {
        form.put(`/projects/${props.project.id}`, {
            onSuccess: () => emit('close'),
        })
    } else {
        form.post('/projects', {
            onSuccess: () => emit('close'),
        })
    }
}

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

<template>
    <Modal
        :show="show"
        :title="isEditing ? 'PROJECT BEWERKEN' : 'NIEUW PROJECT'"
        max-width="560px"
        @close="handleClose"
    >
        <form class="project-form" @submit.prevent="handleSubmit">
            <div class="form-grid">
                <FormInput
                    label="Naam"
                    :model-value="form.naam"
                    :error="form.errors.naam"
                    :required="true"
                    placeholder="Project naam..."
                    @update:model-value="form.naam = $event"
                />

                <FormInput
                    label="Beschrijving"
                    type="textarea"
                    :model-value="form.beschrijving"
                    :error="form.errors.beschrijving"
                    placeholder="Omschrijf het project..."
                    @update:model-value="form.beschrijving = $event"
                />

                <FormInput
                    label="Speerpunt"
                    type="select"
                    :model-value="form.speerpunt_id"
                    :options="speerpuntOptions"
                    :error="form.errors.speerpunt_id"
                    @update:model-value="form.speerpunt_id = $event"
                />

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

                <div class="form-row">
                    <FormInput
                        label="Startdatum"
                        type="date"
                        :model-value="form.startdatum"
                        :error="form.errors.startdatum"
                        @update:model-value="form.startdatum = $event"
                    />
                    <FormInput
                        label="Streef einddatum"
                        type="date"
                        :model-value="form.streef_einddatum"
                        :error="form.errors.streef_einddatum"
                        @update:model-value="form.streef_einddatum = $event"
                    />
                </div>
            </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>
.project-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.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>
