{% extends 'base.html' %}
{% from "macros.html" import render_field, render_selectable_table %}

{% block title %}Edit Specialist{% endblock %}

{% block content_title %}Edit Specialist{% endblock %}
{% block content_description %}Edit a Specialist and its components{% endblock %}

{% block content %}
    <div class="container-fluid px-0">
        <div class="row">
            <!-- Main Specialist Editor -->
            <div class="col-12" id="mainEditorSection">
                <form method="post" id="specialistForm"  action="{{ url_for('interaction_bp.edit_specialist', specialist_id=specialist_id) }}">
                    {{ form.hidden_tag() }}
                    {% set disabled_fields = ['type', 'type_version'] %}
                    {% set exclude_fields = [] %}
                    <!-- Render Static Fields -->
                    {% for field in form.get_static_fields() %}
                        {{ render_field(field, disabled_fields, exclude_fields) }}
                    {% endfor %}

                    <!-- Overview Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="specialist-overview" id="specialist-svg">
                                        <img src="{{ svg_path }}" alt="Specialist Overview" class="w-100">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Nav Tabs -->
                    <div class="row mt-5">
                        <div class="col-lg-12">
                            <div class="nav-wrapper position-relative end-0">
                                <ul class="nav nav-pills nav-fill p-1" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#configuration-tab" role="tab">
                                            Configuration
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#agents-tab" role="tab">
                                            Agents
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#tasks-tab" role="tab">
                                            Tasks
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#tools-tab" role="tab">
                                            Tools
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1 d-none" id="editor-tab-link" data-bs-toggle="tab" href="#editor-tab" role="tab">
                                            Editor
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <div class="tab-content tab-space">
                                <!-- Configuration Tab -->
                                <div class="tab-pane fade show active" id="configuration-tab" role="tabpanel">
                                    {% for collection_name, fields in form.get_dynamic_fields().items() %}
                                        {% if fields|length > 0 %}
                                            <h4 class="mt-4">{{ collection_name }}</h4>
                                        {% endif %}
                                        {% for field in fields %}
                                            {{ render_field(field, disabled_fields, exclude_fields) }}
                                        {% endfor %}
                                    {% endfor %}
                                </div>

                                <!-- Agents Tab -->
                                <div class="tab-pane fade" id="agents-tab" role="tabpanel">
                                    <div class="card">
                                        <div class="card-body">
                                            {{ render_selectable_table(
                                                headers=["Agent ID", "Name", "Type", "Type Version"],
                                                rows=agent_rows if agent_rows else [],
                                                selectable=True,
                                                id="agentsTable",
                                                is_component_selector=True
                                            ) }}
                                            <div class="form-group mt-3">
                                                <button type="button" class="btn btn-primary edit-component"
                                                        data-component-type="agent"
                                                        data-edit-url="{{ prefixed_url_for('interaction_bp.edit_agent', agent_id=0) }}">Edit Agent
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Tasks Tab -->
                                <div class="tab-pane fade" id="tasks-tab" role="tabpanel">
                                    <div class="card">
                                        <div class="card-body">
                                            {{ render_selectable_table(
                                                headers=["Task ID", "Name", "Type", "Type Version"],
                                                rows=task_rows if task_rows else [],
                                                selectable=True,
                                                id="tasksTable",
                                                is_component_selector=True
                                            ) }}
                                            <div class="form-group mt-3">
                                                <button type="button" class="btn btn-primary edit-component"
                                                        data-component-type="task"
                                                        data-edit-url="{{ prefixed_url_for('interaction_bp.edit_task', task_id=0) }}">Edit Task
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Tools Tab -->
                                <div class="tab-pane fade" id="tools-tab" role="tabpanel">
                                    <div class="card">
                                        <div class="card-body">
                                            {{ render_selectable_table(
                                                headers=["Tool ID", "Name", "Type", "Type Version"],
                                                rows=tool_rows if tool_rows else [],
                                                selectable=True,
                                                id="toolsTable",
                                                is_component_selector=True
                                            ) }}
                                            <div class="form-group mt-3">
                                                <button type="button" class="btn btn-primary edit-component"
                                                        data-component-type="tool"
                                                        data-edit-url="{{ prefixed_url_for('interaction_bp.edit_tool', tool_id=0) }}">Edit Tool
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Editor Tab -->
                                <div class="tab-pane fade" id="editor-tab" role="tabpanel">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="mb-0" id="editorTitle"></h5>
                                        </div>
                                        <div class="card-body" id="editorContent">
                                            <!-- Component editor will be loaded here -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary mt-4">Save Specialist</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const editorTab = document.getElementById('editor-tab');
    const editorTabLink = document.getElementById('editor-tab-link');
    const editorTitle = document.getElementById('editorTitle');
    const editorContent = document.getElementById('editorContent');
    let previousTab = null;

    // Add color classes to the tabs
    const agentsTabLink = document.querySelector('[href="#agents-tab"]');
    const tasksTabLink = document.querySelector('[href="#tasks-tab"]');
    const toolsTabLink = document.querySelector('[href="#tools-tab"]');

    agentsTabLink.classList.add('component-agent');
    tasksTabLink.classList.add('component-task');
    toolsTabLink.classList.add('component-tool');

    // Add background colors to the tab panes
    const agentsTab = document.getElementById('agents-tab');
    const tasksTab = document.getElementById('tasks-tab');
    const toolsTab = document.getElementById('tools-tab');

    agentsTab.classList.add('component-agent-bg');
    tasksTab.classList.add('component-task-bg');
    toolsTab.classList.add('component-tool-bg');

    // Ensure component selectors don't interfere with form submission
    const form = document.getElementById('specialistForm');

    form.addEventListener('submit', function(e) {
        // Remove component selectors from form validation
        const componentSelectors = form.querySelectorAll('input[data-component-selector]');
        componentSelectors.forEach(selector => {
            selector.removeAttribute('required');
        });
    });

    // Get all tab links except the editor tab
    const tabLinks = Array.from(document.querySelectorAll('.nav-link')).filter(link => link.id !== 'editor-tab-link');

    // Function to toggle other tabs' disabled state
    function toggleOtherTabs(disable) {
        tabLinks.forEach(link => {
            if (disable) {
                link.classList.add('disabled');
            } else {
                link.classList.remove('disabled');
            }
        });
    }

    // Function to toggle main form elements
    const mainSubmitButton = document.querySelector('#specialistForm > .btn-primary');

    function toggleMainFormElements(disable) {
        // Toggle tabs
        document.querySelectorAll('.nav-link').forEach(link => {
            if (link.id !== 'editor-tab-link') {
                if (disable) {
                    link.classList.add('disabled');
                } else {
                    link.classList.remove('disabled');
                }
            }
        });

        // Toggle main submit button
        if (mainSubmitButton) {
            mainSubmitButton.disabled = disable;
        }
    }

    // Handle edit buttons
    document.querySelectorAll('.edit-component').forEach(button => {
        button.addEventListener('click', function() {
            const componentType = this.dataset.componentType;
            const form = this.closest('form');
            const selectedRow = form.querySelector('input[type="radio"]:checked');

            console.log("I'm in the custom click event listener!")

            if (!selectedRow) {
                alert('Please select a component to edit');
                return;
            }

            const valueMatch = selectedRow.value.match(/'value':\s*(\d+)/);
            const selectedId = valueMatch ? valueMatch[1] : null;

            if (!selectedId) {
                console.error('Could not extract ID from value:', selectedRow.value);
                alert('Error: Could not determine component ID');
                return;
            }

            // Make AJAX call to get component editor
            const urlTemplate = this.dataset.editUrl.replace('/0', `/${selectedId}`);
            fetch(urlTemplate, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.text();
            })
            .then(html => {
                // Store the current active tab
                previousTab = document.querySelector('.nav-link.active');

                // Update editor content
                editorTitle.textContent = `Edit ${componentType.charAt(0).toUpperCase() + componentType.slice(1)}`;
                editorContent.innerHTML = html;

                // Apply the appropriate color class to the editor tab
                editorTabLink.classList.remove('component-agent', 'component-task', 'component-tool');
                editorTab.classList.remove('component-agent-bg', 'component-task-bg', 'component-tool-bg');

                editorTabLink.classList.add(`component-${componentType}`);
                editorTab.classList.add(`component-${componentType}-bg`);

                // Disable other tabs & main form elements
                toggleOtherTabs(true);
                toggleMainFormElements(true)

                // Show editor tab and switch to it
                editorTabLink.classList.remove('d-none');
                editorTabLink.click();
            })
            .catch(error => {
                console.error('Error fetching editor:', error);
                alert('Error loading editor. Please try again.');
            });
        });

        // Clean up color classes when returning from editor
        editorTabLink.addEventListener('hide.bs.tab', function() {
            editorTabLink.classList.remove('component-agent', 'component-task', 'component-tool');
            editorTab.classList.remove('component-agent-bg', 'component-task-bg', 'component-tool-bg');
        });
    });

    // Handle component editor form submissions
    editorContent.addEventListener('click', function(e) {
        if (e.target && e.target.classList.contains('component-submit')) {
            e.preventDefault();
            console.log('Submit button clicked');

            // Get all form fields from the editor content
            const formData = new FormData();
            editorContent.querySelectorAll('input, textarea, select').forEach(field => {
                if (field.type === 'checkbox') {
                    formData.append(field.name, field.checked ? 'y' : 'n');
                } else {
                    formData.append(field.name, field.value);
                }
            });

            // Add CSRF token
            const csrfToken = document.querySelector('input[name="csrf_token"]').value;
            formData.append('csrf_token', csrfToken);

            // Get the component ID from the current state
            const selectedRow = document.querySelector('input[name="selected_row"]:checked');
            const componentData = JSON.parse(selectedRow.value.replace(/'/g, '"'));
            const componentId = componentData.value;

            // Determine the component type (agent, task, or tool)
            const componentType = editorTabLink.classList.contains('component-agent') ? 'agent' :
                                editorTabLink.classList.contains('component-task') ? 'task' : 'tool';

            // Submit the data
            fetch(`/admin/interaction/${componentType}/${componentId}/save`, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Handle success - reload the page
                    location.reload();
                } else {
                    // Handle error
                    alert(data.message || 'Error saving component');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error saving component');
            });
        }
    });

    // Handle case when editor tab is hidden
    editorTabLink.addEventListener('hide.bs.tab', function() {
        // Re-enable all tabs & main form elements
        toggleOtherTabs(false);
        toggleMainFormElements(false)

        // Remove color classes
        editorTabLink.classList.remove('component-agent', 'component-task', 'component-tool');
        editorTab.classList.remove('component-agent-bg', 'component-task-bg', 'component-tool-bg');
    });

    // Function to handle canceling edit
    function cancelEdit() {
        // Re-enable all tabs & main form elements
        toggleOtherTabs(false);
        toggleMainFormElements()

        // Return to previous tab
        if (previousTab) {
            previousTab.click();
        }

        // Hide the editor tab
        editorTabLink.classList.add('d-none');
    }

    // Handle cancel button in editor
    document.addEventListener('click', function(e) {
        if (e.target && e.target.id === 'cancelEdit') {
            // Get the previously active tab (stored before switching to editor)
            const previousTab = document.querySelector('[href="#configuration-tab"]'); // default to configuration tab

            cancelEdit()

            // Hide the editor tab
            document.getElementById('editor-tab-link').classList.add('d-none');
        }
    });
});
</script>

<style>
.tab-pane .card {
    margin-bottom: 1rem;
}

.nav-link.component-agent,
.nav-link.component-task,
.nav-link.component-tool {
    color: white !important;
}

/* Add new CSS for normal tabs */
.nav-link {
    color: #344767 !important;  /* Default dark color */
}

/* Style for disabled tabs */
.nav-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.component-agent {
    background-color: #9c27b0 !important;  /* Purple */
    color: white !important;
}

.component-task {
    background-color: #ff9800 !important;  /* Orange */
    color: white !important;
}

.component-tool {
    background-color: #009688 !important;  /* Teal */
    color: white !important;
}

/* Lighter background versions for the tab content */
.tab-pane.component-agent-bg {
    background-color: rgba(156, 39, 176, 0.2);  /* Light purple */
}

.tab-pane.component-task-bg {
    background-color: rgba(255, 152, 0, 0.2);   /* Light orange */
}

.tab-pane.component-tool-bg {
    background-color: rgba(0, 150, 136, 0.2);   /* Light teal */
}

/* Add some padding to the tab content */
.tab-pane {
    padding: 15px;
    border-radius: 0.5rem;
}
.specialist-overview {
    width: 100%;
    height: auto;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.specialist-overview svg {
    width: 100%;
    height: auto;
    max-height: 400px; /* Adjust as needed */
}
</style>
{% endblock %}