<template>
    <DialogWidget ref="dialog" :title="$t('admin.editcontactrequest.title')" :show-close="true" :buttons="buttons"
        @close="closeDialog" name="AnswerContact" :modal="true" :isTitleTranslated="true">
        <div class="contact-details">
            <h3>Von: {{ contact.email }}</h3>
            <p>{{ contact.message }}</p>
        </div>
        <div class="editor-container">
            <EditorContent :editor="editor" class="editor" />
        </div>
    </DialogWidget>

    <DialogWidget ref="errorDialog" :title="$t('error.title')" :show-close="true" :buttons="errorButtons"
        @close="closeErrorDialog" name="ErrorDialog" :modal="true" :isTitleTranslated="false">
        <div>
            <p>{{ errorMessage }}</p>
        </div>
    </DialogWidget>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import apiClient from '@/utils/axios.js'
import DialogWidget from '@/components/DialogWidget.vue'

export default {
    name: 'AnswerContact',
    components: {
        DialogWidget,
        EditorContent,
    },
    data() {
        return {
            dialog: null,
            errorDialog: null,
            contact: null,
            errorMessage: '',
            editor: null,
            buttons: [
                { text: 'OK', action: this.sendAnswer },
                { text: 'Cancel', action: this.closeDialog }
            ],
            errorButtons: [
                { text: 'OK', action: this.closeErrorDialog }
            ]
        }
    },
    methods: {
        open(contactData) {
            this.contact = contactData;
            this.dialog.open();
            if (this.editor) this.editor.commands.setContent('');
        },
        closeDialog() {
            this.dialog.close();
            if (this.editor) this.editor.commands.clearContent();
        },
        closeErrorDialog() {
            this.errorDialog.close();
        },
        async sendAnswer() {
            const answer = this.editor ? this.editor.getHTML() : '';
            try {
                await apiClient.post('/api/admin/contacts/answer', {
                    id: this.contact.id,
                    answer,
                });
                this.dialog.close();
                this.$emit('refresh');
                if (this.editor) this.editor.commands.clearContent();
            } catch (error) {
                const errorText = error.response?.data?.error || 'An unexpected error occurred.';
                this.errorMessage = errorText;
                this.errorDialog.open();
            }
        }
    },
    mounted() {
        this.dialog = this.$refs.dialog;
        this.errorDialog = this.$refs.errorDialog;

        this.editor = new Editor({
            extensions: [StarterKit],
            content: '',
        });
    },
    beforeUnmount() {
        if (this.editor) {
            this.editor.destroy();
        }
    }
}
</script>

<style scoped>
.contact-details {
    margin-bottom: 20px;
}

.editor-container {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 200px;
}

.editor {
    min-height: 150px;
    outline: none;
}
</style>
