<template>
    <teleport to="body">
        <div class="modal fade show d-block" tabindex="-1" role="dialog" aria-modal="true" @click.self="closeModal">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Create New Note</h5>
                        <button type="button" class="btn-close" aria-label="Close" @click="closeModal"></button>
                    </div>
                    <div class="modal-body">
                        <form @submit.prevent="handleCreate">
                            <div class="mb-3">
                                <label for="noteTitle" class="form-label">Note Title</label>
                                <input id="noteTitle" v-model="form.title" type="text" class="form-control" required />
                            </div>
                            <div class="mb-3">
                                <label for="noteContent" class="form-label">Content</label>
                                <textarea id="noteContent" v-model="form.content" class="form-control" rows="5"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="noteDescription" class="form-label">Description</label>
                                <textarea id="noteDescription" v-model="form.description" class="form-control" rows="2" maxlength="500" placeholder="Short summary shown in note lists"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="noteCategory" class="form-label">Category</label>
                                <select id="noteCategory" v-model="form.category_id" class="form-select">
                                    <option :value="null">Uncategorized</option>
                                    <option v-for="category in categoryOptions" :key="category.id" :value="category.id">
                                        {{ category.label }}
                                    </option>
                                </select>
                            </div>
                            <div class="note-flags mb-3">
                                <label class="form-check flag-check">
                                    <input v-model="form.is_pinned" class="form-check-input" type="checkbox" />
                                    <span class="form-check-label">Pinned</span>
                                </label>

                                <label class="form-check flag-check">
                                    <input v-model="form.is_favorite" class="form-check-input" type="checkbox" />
                                    <span class="form-check-label">Featured</span>
                                </label>

                                <label v-if="publicSharingEnabled" class="form-check flag-check">
                                    <input v-model="form.is_public" class="form-check-input" type="checkbox" />
                                    <span class="form-check-label">Public</span>
                                </label>

                                <label class="form-check flag-check">
                                    <input v-model="form.is_password_protected" class="form-check-input" type="checkbox" />
                                    <span class="form-check-label">Password Protected</span>
                                </label>
                            </div>

                            <div v-if="form.is_password_protected" class="mb-3">
                                <label for="notePassword" class="form-label">Note Password</label>
                                <input id="notePassword" v-model="form.note_password" type="password" class="form-control" minlength="4" maxlength="128" required />
                            </div>
                            <button type="submit" class="btn btn-primary">Create</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show"></div>
    </teleport>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { useSettingsStore } from "../stores/settingsStore";

const props = defineProps({
    categoryOptions: {
        type: Array,
        default: () => [],
    },
    defaultCategoryId: {
        type: String,
        default: null,
    },
});

const emit = defineEmits(["close", "create"]);
const settingsStore = useSettingsStore();
const publicSharingEnabled = ref(true);

const form = ref({
    title: "",
    description: "",
    content: "",
    category_id: null,
    is_pinned: false,
    is_favorite: false,
    is_public: false,
    is_password_protected: false,
    note_password: "",
});

watch(
    () => props.defaultCategoryId,
    (defaultCategoryId) => {
        form.value.category_id = defaultCategoryId || null;
    },
    { immediate: true },
);

onMounted(async () => {
    await settingsStore.loadFeatureFlags();
    publicSharingEnabled.value = settingsStore.publicSharingEnabled;

    if (!publicSharingEnabled.value) {
        form.value.is_public = false;
    }
});

const closeModal = () => {
    emit("close");
};

const handleCreate = () => {
    if (form.value.title.trim()) {
        const { is_password_protected, ...payload } = form.value;
        emit("create", {
            ...payload,
            category_id: payload.category_id || null,
            note_password: is_password_protected ? payload.note_password || "" : "",
        });
        form.value = {
            title: "",
            description: "",
            content: "",
            category_id: props.defaultCategoryId || null,
            is_pinned: false,
            is_favorite: false,
            is_public: false,
            is_password_protected: false,
            note_password: "",
        };
    }
};
</script>

<style scoped src="../assets/styles/scoped/components/CreateNoteModal.css"></style>



