{% 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">
                    {{ form.hidden_tag() }}
                    {% set disabled_fields = ['type', 'type_version'] %}
                    {% set exclude_fields = [] %}

                    <!-- 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" data-bs-toggle="tab" href="#general-tab" role="tab">
                                            General
                                        </a>
                                    </li>
                                    <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="#components-tab" role="tab">
                                            Components
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <div class="tab-content tab-space">
                                <!-- General Tab -->
                                <div class="tab-pane fade" id="general-tab" role="tabpanel">
                                    <!-- 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>#}
                                </div>

                                <!-- 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>

                                <!-- Components Tab (Unified list view) -->
                                <div class="tab-pane fade" id="components-tab" role="tabpanel">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="container">
                                                <input type="hidden" id="{{ components_table_id }}-selected-row" name="selected_row" value="">
                                                <input type="hidden" id="{{ components_table_id }}-action" name="action" value="">
                                                <div id="{{ components_table_id }}" class="tabulator-list-view"></div>
                                                <div class="row mt-3">
                                                    <div class="col-12">
                                                        <button type="button"
                                                                data-table-id="{{ components_table_id }}"
                                                                onclick="handleListViewAction('edit_component', true, event)"
                                                                class="btn btn-primary requires-selection" disabled>
                                                            Edit
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

    <!-- Component Editor Modal (intentionally placed outside the main form to avoid nested forms) -->
    <div class="modal fade" id="componentModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="componentModalLabel">Edit Component</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="componentModalBody">
            <!-- Partial form will be injected here -->
          </div>
        </div>
      </div>
    </div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='assets/js/eveai-list-view.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const componentModalEl = document.getElementById('componentModal');
    const componentModalBody = document.getElementById('componentModalBody');
    const componentModalLabel = document.getElementById('componentModalLabel');
    let componentModal;

    // Initialize the combined components list using EveAI.ListView
    function initComponentsList() {
        function tryInit() {
            if (window.EveAI && window.EveAI.ListView && typeof window.EveAI.ListView.initialize === 'function') {
                const cfg = {
                    data: {{ components_data | tojson }},
                    columns: {{ components_columns | tojson }},
                    initialSort: {{ components_initial_sort | tojson }},
                    index: {{ components_index | tojson }},
                    actions: {{ components_actions | tojson }},
                    tableHeight: {{ components_table_height|default(600) }},
                    selectable: true
                };
                // Resolve string formatters (e.g., 'typeBadge') to functions before initializing Tabulator
                if (window.EveAI && window.EveAI.ListView && window.EveAI.ListView.formatters && Array.isArray(cfg.columns)) {
                    cfg.columns = cfg.columns.map(col => {
                        if (typeof col.formatter === 'string' && window.EveAI.ListView.formatters[col.formatter]) {
                            return { ...col, formatter: window.EveAI.ListView.formatters[col.formatter] };
                        }
                        return col;
                    });
                }
                const table = window.EveAI.ListView.initialize('{{ components_table_id }}', cfg);
                // Expose for quick debugging
                window.__componentsTable = table;

                // Fallback: ensure instance registry is populated even if the module didn't store it yet
                window.EveAI.ListView.instances = window.EveAI.ListView.instances || {};
                if (!window.EveAI.ListView.instances['{{ components_table_id }}'] && table) {
                    window.EveAI.ListView.instances['{{ components_table_id }}'] = {
                        table: table,
                        config: cfg,
                        selectedRow: null
                    };
                }
                // Ensure single-click selects exactly one row (defensive)
                if (table && typeof table.on === 'function') {
                    try {
                        table.on('rowClick', function(e, row){ row.getTable().deselectRow(); row.select(); });
                        table.on('cellClick', function(e, cell){ const r = cell.getRow(); r.getTable().deselectRow(); r.select(); });
                        table.on('rowSelectionChanged', function(data, rows){
                            const inst = window.EveAI.ListView.instances['{{ components_table_id }}'];
                            if (inst) { inst.selectedRow = rows.length ? rows[0].getData() : null; }
                            if (typeof window.EveAI.ListView.updateActionButtons === 'function') {
                                window.EveAI.ListView.updateActionButtons('{{ components_table_id }}');
                            }
                        });
                    } catch (err) { console.warn('Could not attach selection handlers:', err); }
                }

                // Register embedded action handler for this table
                window.EveAI.ListView.embeddedHandlers = window.EveAI.ListView.embeddedHandlers || {};
                window.EveAI.ListView.embeddedHandlers['{{ components_table_id }}'] = function(action, row, tableId){
                    if (action !== 'edit_component' || !row) return;
                    const id = row.id;
                    const type = row.type_name; // 'agent' | 'task' | 'tool'

                    // Build edit URL from server-side templates with placeholder 0
                    const editUrls = {
                        agent: "{{ prefixed_url_for('interaction_bp.edit_agent', agent_id=0) }}",
                        task:  "{{ prefixed_url_for('interaction_bp.edit_task',  task_id=0) }}",
                        tool:  "{{ prefixed_url_for('interaction_bp.edit_tool',  tool_id=0) }}",
                    };
                    const url = (editUrls[type] || '').replace('/0', `/${id}`);
                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                      .then(resp => { if (!resp.ok) throw new Error(`HTTP ${resp.status}`); return resp.text(); })
                      .then(html => {
                          componentModalBody.innerHTML = html;
                          componentModalLabel.textContent = `Edit ${type.charAt(0).toUpperCase()+type.slice(1)}`;
                          componentModalEl.dataset.componentType = type;
                          componentModalEl.dataset.componentId = id;

                          // Helper to open modal once Bootstrap is available
                          function openModal() {
                              try {
                                  if (!componentModal) componentModal = new bootstrap.Modal(componentModalEl);
                                  componentModal.show();
                              } catch (e) {
                                  console.error('Failed to open Bootstrap modal:', e);
                                  alert('Kan de editor niet openen (Bootstrap modal ontbreekt).');
                              }
                          }

                          if (window.bootstrap && typeof bootstrap.Modal === 'function') {
                              openModal();
                          } else {
                              // Fallback: laad Bootstrap bundle dynamisch en open daarna
                              const script = document.createElement('script');
                              script.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
                              script.onload = () => openModal();
                              script.onerror = () => {
                                  console.error('Kon Bootstrap bundle niet laden');
                                  alert('Kan de editor niet openen omdat Bootstrap JS ontbreekt.');
                              };
                              document.head.appendChild(script);
                          }
                      })
                      .catch(err => {
                          console.error('Error loading editor:', err);
                          alert('Error loading editor. Please try again.');
                      });
                };
            } else {
                setTimeout(tryInit, 100);
            }
        }
        tryInit();
    }

    initComponentsList();

    // Note: we removed the modal footer submit button. The partial provides its own buttons.
    // Submissions are intercepted via the submit listener on componentModalBody below.

    // Refresh the components list data after a successful save
    function refreshComponentsData() {
        const url = "{{ prefixed_url_for('interaction_bp.specialist_components_data', specialist_id=specialist_id) }}";
        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
          .then(resp => resp.json())
          .then(payload => {
              const instance = window.EveAI.ListView.instances['{{ components_table_id }}'];
              if (instance && instance.table && Array.isArray(payload.data)) {
                  instance.table.setData(payload.data);
              }
          })
          .catch(err => console.error('Failed to refresh components data', err));
    }

    // Intercept native form submit events within the modal (handles Enter key too)
    componentModalBody.addEventListener('submit', function(e) {
        const formEl = e.target.closest('#componentEditForm');
        if (!formEl) return; // Not our form
        e.preventDefault();

        const formData = new FormData(formEl);

        const componentType = componentModalEl.dataset.componentType;
        const componentId = componentModalEl.dataset.componentId;

        // Build robust, prefix-aware absolute save URL from server-side templates
        const saveUrls = {
            agent: "{{ prefixed_url_for('interaction_bp.save_agent', agent_id=0) }}",
            task:  "{{ prefixed_url_for('interaction_bp.save_task',  task_id=0) }}",
            tool:  "{{ prefixed_url_for('interaction_bp.save_tool',  tool_id=0) }}",
        };
        const urlTemplate = saveUrls[componentType];
        const saveUrl = urlTemplate.replace('/0', `/${componentId}`);

        fetch(saveUrl, {
            method: 'POST',
            body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(async resp => {
            const ct = resp.headers.get('Content-Type') || '';
            if (resp.ok) {
                // Expect JSON success
                let data = null;
                try { data = await resp.json(); } catch (_) {}
                if (data && data.success) {
                    componentModal.hide();
                    refreshComponentsData();
                    return;
                }
                throw new Error(data && data.message ? data.message : 'Save failed');
            }
            // For validation errors (400), server returns HTML partial -> replace modal body
            if (resp.status === 400 && ct.includes('text/html')) {
                const html = await resp.text();
                componentModalBody.innerHTML = html;
                return;
            }
            // Other errors
            let message = 'Save failed';
            if (ct.includes('application/json')) {
                try {
                    const data = await resp.json();
                    if (data && data.message) message = data.message;
                } catch (_) {}
            }
            throw new Error(message + ` (HTTP ${resp.status})`);
        })
        .catch(err => {
            console.error('Error saving component:', err);
            alert(err.message || 'Error saving component');
        });
    });
});
</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 active tabs */
.nav-link.active {
    background-color: #5e72e4 !important;  /* Primary blue color */
    color: white !important;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 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 %}