{% extends "base.html" %}
{% block title %}Edit Form - Admin Dashboard{% endblock %}
{% block extra_css %}
<style>
    /* Styling for the visual form builder */
    .field-card { border-left: 4px solid #0d6efd; transition: all 0.2s; }
    .field-card:hover { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
    .drag-handle { cursor: grab; color: #adb5bd; }
</style>
<!-- Include SortableJS for drag-and-drop support -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
{% endblock %}
{% block content %}
<div class="mb-4">
    <a href="{{ url_for('admin.list_forms') }}" class="btn btn-outline-secondary btn-sm mb-3">
        <i class="bi bi-arrow-left"></i> Back to Forms
    </a>
    <div class="d-flex justify-content-between align-items-center">
        <h2><i class="bi bi-pencil-square me-2"></i> Edit Form: {{ form.name }}</h2>
        <span class="badge {{ 'bg-success' if form.is_active else 'bg-secondary' }}">
            {{ 'Active' if form.is_active else 'Inactive' }}
        </span>
    </div>
</div>

<div class="row">
    <div class="col-lg-8 mb-4">
        <div class="card shadow-sm h-100">
            <div class="card-body">
                <form action="{{ url_for('admin.view_form', form_id=form.id) }}" method="POST" id="edit-form-form">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}">
                    <input type="hidden" name="form_structure" id="hidden_form_structure">
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Form Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ form.name }}" required>
                        </div>
                        <div class="col-md-6 mb-3 d-flex align-items-end">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="true" {% if form.is_active %}checked{% endif %}>
                                <label class="form-check-label" for="is_active">Active (accepting submissions)</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="2">{{ form.description or '' }}</textarea>
                    </div>

                    <hr class="my-4">
                    
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Form Builder</h5>
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-secondary me-2" id="toggle-json-view">
                                <i class="bi bi-code-slash"></i> Toggle JSON View
                            </button>
                            <button type="button" class="btn btn-sm btn-success" id="add-field-btn">
                                <i class="bi bi-plus"></i> Add Field
                            </button>
                        </div>
                    </div>

                    <!-- Visual Builder Area -->
                    <div id="visual-builder" class="mb-4 bg-light p-3 rounded border">
                        <div id="fields-container">
                            <!-- Fields will be dynamically injected here by JS -->
                        </div>
                        
                        <!-- Submit Button Config -->
                        <div class="card mt-4 border-success">
                            <div class="card-header bg-success text-white py-2">
                                <i class="bi bi-hand-index-thumb me-1"></i> Submit Button Configuration
                            </div>
                            <div class="card-body row">
                                <div class="col-md-6 mb-2">
                                    <label class="form-label small">Button Text</label>
                                    <input type="text" class="form-control form-control-sm" id="submit-btn-text" value="{{ form.form_structure.submit_button.text if form.form_structure.submit_button else 'Submit' }}">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label class="form-label small">Custom CSS Classes</label>
                                    <input type="text" class="form-control form-control-sm" id="submit-btn-css" value="{{ form.form_structure.submit_button.css_classes if form.form_structure.submit_button and form.form_structure.submit_button.css_classes else '' }}" placeholder="e.g. btn btn-primary">
                                </div>
                            </div>
                        </div>
                        
                        <!-- Notifications & Email Settings -->
                        <div class="card mt-4 border-info">
                            <div class="card-header bg-info text-dark py-2">
                                <i class="bi bi-envelope-paper me-1"></i> Notifications & Autoresponder
                            </div>
                            <div class="card-body">
                                <input type="hidden" name="settings" id="hidden_settings">
                                
                                <div class="row mb-4">
                                    <div class="col-12 border-bottom pb-3">
                                        <h6><i class="bi bi-bell text-primary me-2"></i>Admin Notification</h6>
                                        <p class="small text-muted mb-2">Send an email alert to specific addresses when a new submission arrives.</p>
                                        
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input" type="checkbox" id="notify_enabled" {% if form.settings and form.settings.notifications and form.settings.notifications.enabled %}checked{% endif %}>
                                            <label class="form-check-label small fw-bold" for="notify_enabled">Enable Admin Notification</label>
                                        </div>
                                        
                                        <div id="notify_options" style="display:{% if form.settings and form.settings.notifications and form.settings.notifications.enabled %}block{% else %}none{% endif %};" class="ps-4 mt-2 border-start border-2 border-primary">
                                            <label class="form-label small">Recipient Email(s)</label>
                                            <input type="text" class="form-control form-control-sm mb-1" id="notify_emails" placeholder="admin@domain.com, sales@domain.com" value="{{ form.settings.notifications.send_to|join(', ') if form.settings and form.settings.notifications and form.settings.notifications.send_to else '' }}">
                                            <small class="text-muted d-block" style="font-size: 0.75rem;">Comma separated list of email addresses.</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        <h6><i class="bi bi-reply-all text-success me-2"></i>Submitter Autoresponder</h6>
                                        <p class="small text-muted mb-2">Send an automated "Thank You" email to the person who submitted the form.</p>
                                        
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input" type="checkbox" id="autorespond_enabled" {% if form.settings and form.settings.autoresponder and form.settings.autoresponder.enabled %}checked{% endif %}>
                                            <label class="form-check-label small fw-bold" for="autorespond_enabled">Enable Autoresponder</label>
                                        </div>
                                        
                                        <div id="autorespond_options" style="display:{% if form.settings and form.settings.autoresponder and form.settings.autoresponder.enabled %}block{% else %}none{% endif %};" class="ps-4 mt-2 border-start border-2 border-success">
                                            <div class="mb-2">
                                                <label class="form-label small">Target Email Field</label>
                                                <select class="form-select form-select-sm" id="autorespond_target_field" data-selected="{{ form.settings.autoresponder.email_field_name if form.settings and form.settings.autoresponder else '' }}">
                                                    <option value="">-- Select an email field from your form --</option>
                                                </select>
                                                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">Select which form field contains the submitter's email address.</small>
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label small">Email Subject</label>
                                                <input type="text" class="form-control form-control-sm" id="autorespond_subject" value="{{ form.settings.autoresponder.subject if form.settings and form.settings.autoresponder and form.settings.autoresponder.subject else 'Thank you for your submission!' }}">
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label small">Email Body Template</label>
                                                <textarea class="form-control form-control-sm" id="autorespond_body" rows="4">{{ form.settings.autoresponder.body_template if form.settings and form.settings.autoresponder and form.settings.autoresponder.body_template else 'Hello,\n\nThank you for contacting us. We have received your submission and will get back to you shortly.\n\nBest regards,\nThe Team' }}</textarea>
                                                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">You can use field variables like <code>{{'{{'}} field_name {{'}}'}}</code> in the body.</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- JSON Editor Area -->
                    <div id="json-editor-container" class="mb-4" style="display:none;">
                        <div class="alert alert-warning py-2 small">
                            <i class="bi bi-exclamation-triangle"></i> Editing JSON directly will override the visual builder.
                        </div>
                        <textarea class="form-control font-monospace" id="json_textarea" rows="15">{{ form.form_structure | tojson(indent=4) }}</textarea>
                        <div class="form-text text-danger" id="json-error" style="display:none;">Invalid JSON format.</div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" class="btn btn-primary" id="save-btn"><i class="bi bi-save"></i> Update Configuration</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4 mb-4">
        <!-- Embed Snippet Card -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">Embed Snippet</h5>
            </div>
            <div class="card-body">
                <p class="small text-muted mb-2">Copy this HTML code to embed the form on the tenant's website:</p>
                <div class="position-relative">
                    <pre class="bg-dark text-light p-3 rounded small" style="white-space: pre-wrap;" id="embed-code">
&lt;!-- Formeleon Embed --&gt;
&lt;script src="{{ request.url_root }}static/js/embed.js" 
        data-form-id="{{ form.id }}" 
        data-public-key="{{ tenant.public_key }}"&gt;&lt;/script&gt;
&lt;div id="formeleon-form"&gt;&lt;/div&gt;</pre>
                    <button class="btn btn-sm btn-outline-light position-absolute top-0 end-0 m-2" onclick="navigator.clipboard.writeText(document.getElementById('embed-code').innerText); alert('Copied!');">
                        <i class="bi bi-clipboard"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Recent Submissions Card -->
        <div class="card shadow-sm">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Recent Submissions</h5>
                <a href="{{ url_for('admin.list_submissions') }}" class="btn btn-sm btn-outline-secondary">View All</a>
            </div>
            <ul class="list-group list-group-flush">
                {% for sub in submissions %}
                <a href="{{ url_for('admin.view_submission', submission_id=sub.id) }}" class="list-group-item list-group-item-action">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <small>{{ sub.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
                        {% if sub.status.value == 'pending' %}
                            <span class="badge bg-warning text-dark">Pending</span>
                        {% elif sub.status.value == 'processed' %}
                            <span class="badge bg-success">Processed</span>
                        {% else %}
                            <span class="badge bg-secondary">{{ sub.status.value }}</span>
                        {% endif %}
                    </div>
                </a>
                {% else %}
                <li class="list-group-item text-center text-muted py-4">No submissions yet.</li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

<!-- Template for a new field -->
<template id="field-template">
    <div class="card field-card mb-3 shadow-sm">
        <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0 text-primary"><i class="bi bi-grip-vertical drag-handle me-2"></i> Form Field</h6>
                <button type="button" class="btn btn-sm btn-outline-danger remove-field-btn"><i class="bi bi-trash"></i></button>
            </div>
            <div class="row g-2">
                <div class="col-md-4">
                    <label class="form-label small mb-1">Field Type</label>
                    <select class="form-select form-select-sm field-type">
                        <option value="text">Text Input</option>
                        <option value="email">Email</option>
                        <option value="textarea">Textarea (Multiline)</option>
                        <option value="select">Dropdown (Select)</option>
                        <option value="checkbox">Checkbox</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label small mb-1">Field Name (ID) *</label>
                    <input type="text" class="form-control form-control-sm field-name" required placeholder="e.g. first_name">
                </div>
                <div class="col-md-4">
                    <label class="form-label small mb-1">Display Label</label>
                    <input type="text" class="form-control form-control-sm field-label" placeholder="e.g. First Name">
                </div>
                
                <div class="col-md-4 mt-2">
                    <label class="form-label small mb-1">Placeholder</label>
                    <input type="text" class="form-control form-control-sm field-placeholder" placeholder="Optional text inside field">
                </div>
                <div class="col-md-4 mt-2">
                    <label class="form-label small mb-1">Custom CSS Classes</label>
                    <input type="text" class="form-control form-control-sm field-css" placeholder="e.g. form-control my-custom-input">
                </div>
                <div class="col-md-4 mt-2 d-flex align-items-end">
                    <div class="form-check form-switch mb-1">
                        <input class="form-check-input field-required" type="checkbox">
                        <label class="form-check-label small">Required Field</label>
                    </div>
                </div>

                <div class="col-12 mt-2 options-container" style="display:none;">
                    <label class="form-label small mb-1">Options (Comma separated)</label>
                    <input type="text" class="form-control form-control-sm field-options" placeholder="Option 1, Option 2, Option 3">
                </div>
            </div>
        </div>
    </div>
</template>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // Core Elements
    const fieldsContainer = document.getElementById('fields-container');
    const addFieldBtn = document.getElementById('add-field-btn');
    const toggleJsonBtn = document.getElementById('toggle-json-view');
    const visualBuilder = document.getElementById('visual-builder');
    const jsonEditor = document.getElementById('json-editor-container');
    const jsonTextarea = document.getElementById('json_textarea');
    const hiddenFormStructure = document.getElementById('hidden_form_structure');
    const formEl = document.getElementById('edit-form-form');
    
    // Initialize Drag & Drop Sortable
    if (typeof Sortable !== 'undefined') {
        new Sortable(fieldsContainer, {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'bg-light',
            dragClass: 'shadow-lg'
        });
    }

    let isJsonView = false;
    let fieldCounter = 0;

    // Load existing form structure into visual builder
    try {
        const existingStructure = JSON.parse(jsonTextarea.value);
        if (existingStructure && existingStructure.fields && Array.isArray(existingStructure.fields)) {
            existingStructure.fields.forEach(field => {
                const options = field.options ? field.options.join(', ') : '';
                addField(field.type, field.name, field.label, field.placeholder, field.css_classes, field.required, options);
            });
        }
    } catch (e) {
        console.error("Could not parse initial form structure for visual builder:", e);
        // Fallback to JSON view if it's too broken
        isJsonView = true;
        visualBuilder.style.display = 'none';
        jsonEditor.style.display = 'block';
        toggleJsonBtn.innerHTML = '<i class="bi bi-palette"></i> Back to Builder';
        addFieldBtn.style.display = 'none';
    }

    // Add Field Button
    addFieldBtn.addEventListener('click', () => {
        addField();
    });

    // Toggle JSON / Visual View
    toggleJsonBtn.addEventListener('click', () => {
        isJsonView = !isJsonView;
        if (isJsonView) {
            jsonTextarea.value = JSON.stringify(buildJsonFromVisual(), null, 4);
            visualBuilder.style.display = 'none';
            jsonEditor.style.display = 'block';
            toggleJsonBtn.innerHTML = '<i class="bi bi-palette"></i> Back to Builder';
            addFieldBtn.style.display = 'none';
        } else {
            // Here in edit mode, if a user switches BACK from JSON to visual, 
            // we should technically re-render the visual builder from the JSON they just edited!
            try {
                const updatedStruct = JSON.parse(jsonTextarea.value);
                // Clear existing cards
                fieldsContainer.innerHTML = '';
                fieldCounter = 0;
                // Rebuild from JSON
                if (updatedStruct.fields) {
                    updatedStruct.fields.forEach(field => {
                        const options = field.options ? field.options.join(', ') : '';
                        addField(field.type, field.name, field.label, field.placeholder, field.css_classes, field.required, options);
                    });
                }
                if (updatedStruct.submit_button) {
                    document.getElementById('submit-btn-text').value = updatedStruct.submit_button.text || '';
                    document.getElementById('submit-btn-css').value = updatedStruct.submit_button.css_classes || '';
                }
                document.getElementById('json-error').style.display = 'none';
                document.getElementById('save-btn').disabled = false;
                
                visualBuilder.style.display = 'block';
                jsonEditor.style.display = 'none';
                toggleJsonBtn.innerHTML = '<i class="bi bi-code-slash"></i> Toggle JSON View';
                addFieldBtn.style.display = 'inline-block';
            } catch (err) {
                document.getElementById('json-error').style.display = 'block';
                alert("Cannot switch to visual builder: JSON is invalid.");
                isJsonView = true; // revert state
            }
        }
    });

    // Toggle Settings UI
    const notifyEnabled = document.getElementById('notify_enabled');
    const notifyOptions = document.getElementById('notify_options');
    notifyEnabled.addEventListener('change', (e) => { notifyOptions.style.display = e.target.checked ? 'block' : 'none'; });

    const autorespondEnabled = document.getElementById('autorespond_enabled');
    const autorespondOptions = document.getElementById('autorespond_options');
    autorespondEnabled.addEventListener('change', (e) => { 
        autorespondOptions.style.display = e.target.checked ? 'block' : 'none'; 
        if(e.target.checked) updateEmailFieldDropdown();
    });

    // Helper to extract email fields for the dropdown
    function updateEmailFieldDropdown() {
        const select = document.getElementById('autorespond_target_field');
        const currentVal = select.value || select.getAttribute('data-selected');
        select.innerHTML = '<option value="">-- Select an email field from your form --</option>';
        
        const cards = fieldsContainer.querySelectorAll('.field-card');
        cards.forEach(card => {
            const type = card.querySelector('.field-type').value;
            if(type === 'email' || type === 'text') {
                const name = card.querySelector('.field-name').value;
                const label = card.querySelector('.field-label').value || name;
                if(name) {
                    const opt = document.createElement('option');
                    opt.value = name;
                    opt.text = `${label} (${name})`;
                    select.appendChild(opt);
                }
            }
        });
        if(currentVal) select.value = currentVal;
    }

    // Trigger initial dropdown population if needed
    setTimeout(updateEmailFieldDropdown, 100);

    // Handle Form Submit
    formEl.addEventListener('submit', function(e) {

        // Build settings JSON
        const settingsJson = {
            notifications: {
                enabled: notifyEnabled.checked,
                send_to: document.getElementById('notify_emails').value.split(',').map(s => s.trim()).filter(s => s)
            },
            autoresponder: {
                enabled: autorespondEnabled.checked,
                email_field_name: document.getElementById('autorespond_target_field').value,
                subject: document.getElementById('autorespond_subject').value,
                body_template: document.getElementById('autorespond_body').value
            }
        };
        document.getElementById('hidden_settings').value = JSON.stringify(settingsJson);

        if (!isJsonView) {
            hiddenFormStructure.value = JSON.stringify(buildJsonFromVisual());
        } else {
            try {
                JSON.parse(jsonTextarea.value); 
                hiddenFormStructure.value = jsonTextarea.value;
            } catch (err) {
                e.preventDefault();
                alert("Invalid JSON configuration. Please fix errors before saving.");
                return false;
            }
        }
    });

    // Function to add a new visual field
    function addField(type = 'text', name = '', label = '', placeholder = '', css_classes = '', required = false, options = '') {
        fieldCounter++;
        const template = document.getElementById('field-template');
        const clone = template.content.cloneNode(true);
        const card = clone.querySelector('.field-card');
        
        card.querySelector('.field-type').value = type || 'text';
        card.querySelector('.field-name').value = name || `field_${fieldCounter}`;
        card.querySelector('.field-label').value = label || '';
        card.querySelector('.field-placeholder').value = placeholder || '';
        card.querySelector('.field-css').value = css_classes || '';
        card.querySelector('.field-required').checked = required;
        card.querySelector('.field-options').value = options || '';

        setupCardEvents(card);
        fieldsContainer.appendChild(clone);
    }

    function setupCardEvents(card) {
        card.querySelector('.remove-field-btn').addEventListener('click', function() {
            card.remove();
            updateEmailFieldDropdown();
        });

        const typeSelect = card.querySelector('.field-type');
        const optionsContainer = card.querySelector('.options-container');
        
        typeSelect.addEventListener('change', function() {
            const val = this.value;
            if (val === 'select' || val === 'radio') {
                optionsContainer.style.display = 'block';
            } else {
                optionsContainer.style.display = 'none';
            }
            updateEmailFieldDropdown();
        });
        
        card.querySelector('.field-name').addEventListener('change', updateEmailFieldDropdown);
        
        typeSelect.dispatchEvent(new Event('change'));
    }

    function buildJsonFromVisual() {
        const json = {
            version: "1.0",
            fields: [],
            submit_button: {
                text: document.getElementById('submit-btn-text').value || "Submit",
                css_classes: document.getElementById('submit-btn-css').value || ""
            }
        };

        const cards = fieldsContainer.querySelectorAll('.field-card');
        cards.forEach(card => {
            const type = card.querySelector('.field-type').value;
            const fieldDef = {
                name: card.querySelector('.field-name').value,
                type: type,
                label: card.querySelector('.field-label').value,
                placeholder: card.querySelector('.field-placeholder').value,
                required: card.querySelector('.field-required').checked,
                css_classes: card.querySelector('.field-css').value
            };

            if (type === 'select' || type === 'radio') {
                const optsString = card.querySelector('.field-options').value;
                if (optsString) {
                    fieldDef.options = optsString.split(',').map(s => s.trim()).filter(s => s);
                }
            }
            json.fields.push(fieldDef);
        });

        return json;
    }
    
    // Live JSON Validation (only active when in JSON mode)
    jsonTextarea.addEventListener('input', function() {
        if (!isJsonView) return;
        try {
            JSON.parse(this.value);
            document.getElementById('json-error').style.display = 'none';
            document.getElementById('save-btn').disabled = false;
        } catch (e) {
            document.getElementById('json-error').style.display = 'block';
            document.getElementById('save-btn').disabled = true;
        }
    });
});
</script>
{% endblock %}