{% extends "django_kie/base_ui.html" %}

{% block extra_head %}
<style>
.field-row { background: #fff; border: 1px solid #dee2e6; border-radius: 4px; padding: 10px; margin-bottom: 8px; }
.field-row:hover { background: #f8f9fa; }
.field-row .drag-handle { cursor: grab; color: #aaa; }
.preview-code { background: #1e1e1e; color: #d4d4d4; padding: 16px; border-radius: 6px; font-family: monospace; font-size: 11px; white-space: pre-wrap; overflow-x: auto; }
.nested-badge { font-size: 0.75em; }
</style>
{% endblock %}

{% block content_ui %}
<div id="app">
    <div class="container-fluid m-0 p-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h1>[[ isNew ? 'New Document Type' : 'Edit: ' + form.name ]]</h1>
            <a href="{% url 'django_kie:doctype_list' %}" class="btn btn-outline-secondary">Back to list</a>
        </div>

        <div class="row">
            <!-- Left: Form -->
            <div class="col-7">
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-6">
                                <label class="form-label fw-bold">Name</label>
                                <input type="text" class="form-control" v-model="form.name" :class="{'is-invalid': errors.name}" placeholder="e.g. PurchaseOrder">
                                <div class="invalid-feedback">[[ errors.name ]]</div>
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-bold">Temperature</label>
                                <input type="number" step="0.1" min="0" max="2" class="form-control" v-model.number="form.temperature">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Description</label>
                                <textarea class="form-control" rows="2" v-model="form.description" placeholder="Description of this document type"></textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Custom Instructions</label>
                                <textarea class="form-control" rows="2" v-model="form.custom_instructions" placeholder="Custom extraction instructions"></textarea>
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-bold">Custom Input Data Description</label>
                                <textarea class="form-control" rows="2" v-model="form.custom_input_data_description"></textarea>
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-bold">Custom Output Data Description</label>
                                <textarea class="form-control" rows="2" v-model="form.custom_output_data_description"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fields -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <strong>Fields</strong>
                        <button type="button" class="btn btn-sm btn-primary" @click="addField">
                            <i class="bi bi-plus-lg"></i> Add Field
                        </button>
                    </div>
                    <div class="card-body">
                        <div v-if="form.fields.length === 0" class="text-muted text-center py-3">
                            No fields yet. Click "Add Field" to start.
                        </div>
                        <div v-for="(field, idx) in form.fields" :key="field.uid" class="field-row">
                            <div class="d-flex align-items-start gap-2">
                                <div class="drag-handle mt-2" title="Drag to reorder">
                                    <i class="bi bi-grip-vertical"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="row g-2 mb-2">
                                        <div class="col-3">
                                            <input type="text" class="form-control form-control-sm" v-model="field.key" placeholder="key" :class="{'is-invalid': fieldErrors[idx] && fieldErrors[idx].key}">
                                            <div class="invalid-feedback">[[ fieldErrors[idx] && fieldErrors[idx].key ]]</div>
                                        </div>
                                        <div class="col-3">
                                            <input type="text" class="form-control form-control-sm" v-model="field.label" placeholder="label (optional)">
                                        </div>
                                        <div class="col-3">
                                            <select class="form-select form-select-sm" v-model="field.field_type">
                                                <option v-for="ft in fieldTypes" :key="ft[0]" :value="ft[0]">[[ ft[1] ]]</option>
                                            </select>
                                        </div>
                                        <div class="col-3" v-if="field.field_type === 'doc' || field.field_type === 'list'">
                                            <select class="form-select form-select-sm" v-model="field.referenced_document_type_id">
                                                <option :value="null">-- select --</option>
                                                <option v-for="dt in allDocumentTypes" :key="dt.id" :value="dt.id">[[ dt.name ]]</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row g-2">
                                        <div class="col-8">
                                            <input type="text" class="form-control form-control-sm" v-model="field.description" placeholder="description (optional)">
                                        </div>
                                        <div class="col-2">
                                            <div class="form-check mt-1">
                                                <input type="checkbox" class="form-check-input" v-model="field.required" :id="'req-' + field.uid">
                                                <label class="form-check-label" :for="'req-' + field.uid">Required</label>
                                            </div>
                                        </div>
                                        <div class="col-2 text-end">
                                            <button type="button" class="btn btn-sm btn-outline-secondary me-1" @click="moveField(idx, -1)" :disabled="idx === 0" title="Move up">
                                                <i class="bi bi-arrow-up"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-secondary me-1" @click="moveField(idx, 1)" :disabled="idx === form.fields.length - 1" title="Move down">
                                                <i class="bi bi-arrow-down"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-danger" @click="removeField(idx)" title="Remove">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right: Preview -->
            <div class="col-5">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <strong>Pydantic Model Preview</strong>
                        <button type="button" class="btn btn-sm btn-outline-primary" @click="trial" :disabled="loading">
                            <i class="bi bi-play-fill"></i> Trial
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div v-if="previewError" class="alert alert-danger m-3">[[ previewError ]]</div>
                        <div v-if="previewCode" class="preview-code">[[ previewCode ]]</div>
                        <div v-if="!previewCode && !previewError" class="text-muted text-center py-5">
                            Click "Trial" to preview the generated Pydantic model.
                        </div>
                    </div>
                </div>

                <div class="card mt-3" v-if="previewSchema">
                    <div class="card-header"><strong>JSON Schema</strong></div>
                    <div class="card-body p-0">
                        <div class="preview-code" style="max-height: 40vh;">[[ JSON.stringify(previewSchema, null, 2) ]]</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom bar -->
    <div class="position-sticky bottom-0 bg-white border-top p-3" style="z-index: 1000;">
        <div class="d-flex align-items-center justify-content-end gap-2">
            <span v-if="saveSuccess" class="text-success me-3"><i class="bi bi-check-circle"></i> Saved successfully</span>
            <span v-if="saveError" class="text-danger me-3">[[ saveError ]]</span>
            <button type="button" class="btn btn-outline-primary" @click="trial" :disabled="loading">
                <i class="bi bi-play-fill me-1"></i>Trial
            </button>
            <button type="button" class="btn btn-primary" @click="save" :disabled="loading">
                <i class="bi bi-check-lg me-1"></i>Save
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
app = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    data: {
        isNew: {{ is_new|yesno:"true,false" }},
        doctypeId: {{ doctype_id|default:"null" }},
        loading: false,
        saveSuccess: false,
        saveError: '',
        previewCode: '',
        previewSchema: null,
        previewError: '',
        errors: {},
        fieldErrors: {},
        uidCounter: 0,
        fieldTypes: {{ field_types|safe }},
        allDocumentTypes: {{ all_document_types|safe }},
        form: {
            name: {{ form_data.name|safe }},
            description: {{ form_data.description|safe }},
            custom_instructions: {{ form_data.custom_instructions|safe }},
            custom_input_data_description: {{ form_data.custom_input_data_description|safe }},
            custom_output_data_description: {{ form_data.custom_output_data_description|safe }},
            temperature: {{ form_data.temperature|safe }},
            fields: {{ form_data.fields|safe }},
        },
    },
    created: function() {
        // assign uid to existing fields
        for (var i = 0; i < this.form.fields.length; i++) {
            this.form.fields[i].uid = this.uidCounter++;
        }
    },
    methods: {
        addField: function() {
            this.form.fields.push({
                uid: this.uidCounter++,
                key: '',
                label: '',
                field_type: 'str',
                referenced_document_type_id: null,
                required: false,
                description: '',
            });
        },
        removeField: function(idx) {
            this.form.fields.splice(idx, 1);
        },
        moveField: function(idx, direction) {
            var target = idx + direction;
            if (target < 0 || target >= this.form.fields.length) return;
            var fields = this.form.fields;
            var tmp = fields[idx];
            this.$set(fields, idx, fields[target]);
            this.$set(fields, target, tmp);
        },
        getPayload: function() {
            return {
                doctype_id: this.doctypeId,
                name: this.form.name,
                description: this.form.description || null,
                custom_instructions: this.form.custom_instructions || null,
                custom_input_data_description: this.form.custom_input_data_description || null,
                custom_output_data_description: this.form.custom_output_data_description || null,
                temperature: this.form.temperature,
                fields: this.form.fields.map(function(f, i) {
                    return {
                        key: f.key,
                        label: f.label || null,
                        field_type: f.field_type,
                        referenced_document_type_id: (f.field_type === 'doc' || f.field_type === 'list') ? f.referenced_document_type_id : null,
                        required: f.required,
                        description: f.description || null,
                        ordering: i,
                    };
                }),
            };
        },
        trial: function() {
            this.submitForm('trial');
        },
        save: function() {
            this.submitForm('save');
        },
        submitForm: function(mode) {
            var me = this;
            me.loading = true;
            me.saveSuccess = false;
            me.saveError = '';
            me.previewError = '';
            me.errors = {};
            me.fieldErrors = {};

            var payload = me.getPayload();
            payload.mode = mode;

            fetch("{% url 'django_kie:doctype_save' %}", {
                method: 'POST',
                body: JSON.stringify(payload),
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}',
                },
            }).then(function(response) {
                return response.json();
            }).then(function(data) {
                me.loading = false;
                if (data.ok) {
                    me.previewCode = data.code || '';
                    me.previewSchema = data.schema || null;
                    if (mode === 'save') {
                        me.saveSuccess = true;
                        me.doctypeId = data.doctype_id;
                        me.isNew = false;
                        // update URL without reload
                        if (data.doctype_id) {
                            history.replaceState(null, '', '{% url "django_kie:doctype_list" %}' + data.doctype_id + '/edit/');
                        }
                        // update allDocumentTypes if this is a new type
                        var found = false;
                        for (var i = 0; i < me.allDocumentTypes.length; i++) {
                            if (me.allDocumentTypes[i].id === data.doctype_id) {
                                me.allDocumentTypes[i].name = me.form.name;
                                found = true;
                                break;
                            }
                        }
                        if (!found) {
                            me.allDocumentTypes.push({id: data.doctype_id, name: me.form.name});
                        }
                    }
                } else {
                    if (data.errors) me.errors = data.errors;
                    if (data.field_errors) me.fieldErrors = data.field_errors;
                    me.previewError = data.message || 'Validation failed';
                    if (mode === 'save') me.saveError = data.message || 'Validation failed';
                }
            }).catch(function(error) {
                me.loading = false;
                me.previewError = String(error);
                if (mode === 'save') me.saveError = String(error);
            });
        },
    },
});
</script>
{% endblock %}