{% extends "base.html" %}

{% block title %}EM Node Configuration{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-0">
                <i class="fas fa-palette me-2"></i>
                Extended Matrix Node Configuration
            </h1>
            <p class="text-muted mt-2">
                Manage node types for GraphML export. Built-in types are read-only, custom types can be added/edited/deleted.
            </p>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="row mb-4">
        <div class="col-12">
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addNodeTypeModal">
                <i class="fas fa-plus me-2"></i>Add Custom Node Type
            </button>
            <a href="{{ url_for('em_node_config.reload_config') }}" class="btn btn-outline-secondary"
               onclick="return confirm('Reload configuration from file? Any unsaved changes in memory will be lost.');">
                <i class="fas fa-sync me-2"></i>Reload Config
            </a>
        </div>
    </div>

    <!-- Tabs for node categories -->
    <ul class="nav nav-tabs mb-4" id="nodeTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="strat-tab" data-bs-toggle="tab" data-bs-target="#stratigraphic"
                    type="button" role="tab">
                <i class="fas fa-layer-group me-2"></i>Stratigraphic Units ({{ stratigraphic_types|length }})
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="non-strat-tab" data-bs-toggle="tab" data-bs-target="#non-stratigraphic"
                    type="button" role="tab">
                <i class="fas fa-file-alt me-2"></i>Non-Stratigraphic Units ({{ non_stratigraphic_types|length }})
            </button>
        </li>
    </ul>

    <div class="tab-content" id="nodeTabContent">
        <!-- Stratigraphic Types -->
        <div class="tab-pane fade show active" id="stratigraphic" role="tabpanel">
            <div class="row">
                {% for node_type in stratigraphic_types %}
                <div class="col-md-6 col-lg-4 mb-3">
                    <div class="card h-100 {% if node_type.custom %}border-primary{% endif %}">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <strong>{{ node_type.id }}</strong>
                            {% if node_type.custom %}
                            <span class="badge bg-primary">Custom</span>
                            {% else %}
                            <span class="badge bg-secondary">Built-in</span>
                            {% endif %}
                        </div>
                        <div class="card-body">
                            <h6 class="card-title">{{ node_type.name }}</h6>
                            {% if node_type.description %}
                            <p class="card-text small text-muted">{{ node_type.description }}</p>
                            {% endif %}
                            <dl class="row small mb-0">
                                <dt class="col-sm-5">Label Format:</dt>
                                <dd class="col-sm-7"><code>{{ node_type.label_format }}</code></dd>

                                <dt class="col-sm-5">Symbol Type:</dt>
                                <dd class="col-sm-7">
                                    {% if node_type.symbol_type == 'single_arrow' %}
                                    <code>&gt; / &lt;</code>
                                    {% else %}
                                    <code>&gt;&gt; / &lt;&lt;</code>
                                    {% endif %}
                                </dd>

                                <dt class="col-sm-5">Shape:</dt>
                                <dd class="col-sm-7">{{ node_type.visual.shape }}</dd>

                                <dt class="col-sm-5">Colors:</dt>
                                <dd class="col-sm-7">
                                    <span class="d-inline-block me-1" style="width: 16px; height: 16px; background-color: {{ node_type.visual.fill_color }}; border: 1px solid #000;"></span>
                                    <span class="d-inline-block" style="width: 16px; height: 16px; background-color: {{ node_type.visual.border_color }}; border: 1px solid #000;"></span>
                                </dd>
                            </dl>
                        </div>
                        {% if node_type.custom %}
                        <div class="card-footer bg-transparent">
                            <button class="btn btn-sm btn-warning edit-node-type"
                                    data-id="{{ node_type.id }}"
                                    data-name="{{ node_type.name }}"
                                    data-description="{{ node_type.description }}"
                                    data-category="{{ 'stratigraphic' }}"
                                    data-symbol_type="{{ node_type.symbol_type }}"
                                    data-label_format="{{ node_type.label_format }}"
                                    data-visual="{{ node_type.visual|tojson }}">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                            <button class="btn btn-sm btn-danger delete-node-type" data-id="{{ node_type.id }}">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Non-Stratigraphic Types -->
        <div class="tab-pane fade" id="non-stratigraphic" role="tabpanel">
            <div class="row">
                {% for node_type in non_stratigraphic_types %}
                <div class="col-md-6 col-lg-4 mb-3">
                    <div class="card h-100 {% if node_type.custom %}border-primary{% endif %}">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <strong>{{ node_type.id }}</strong>
                            {% if node_type.custom %}
                            <span class="badge bg-primary">Custom</span>
                            {% else %}
                            <span class="badge bg-secondary">Built-in</span>
                            {% endif %}
                        </div>
                        <div class="card-body">
                            <h6 class="card-title">{{ node_type.name }}</h6>
                            {% if node_type.description %}
                            <p class="card-text small text-muted">{{ node_type.description }}</p>
                            {% endif %}
                            <dl class="row small mb-0">
                                <dt class="col-sm-5">Label Format:</dt>
                                <dd class="col-sm-7"><code>{{ node_type.label_format }}</code></dd>

                                <dt class="col-sm-5">Symbol Type:</dt>
                                <dd class="col-sm-7">
                                    {% if node_type.symbol_type == 'single_arrow' %}
                                    <code>&gt; / &lt;</code>
                                    {% else %}
                                    <code>&gt;&gt; / &lt;&lt;</code>
                                    {% endif %}
                                </dd>

                                <dt class="col-sm-5">Shape:</dt>
                                <dd class="col-sm-7">{{ node_type.visual.shape }}</dd>

                                <dt class="col-sm-5">Colors:</dt>
                                <dd class="col-sm-7">
                                    <span class="d-inline-block me-1" style="width: 16px; height: 16px; background-color: {{ node_type.visual.fill_color }}; border: 1px solid #000;"></span>
                                    <span class="d-inline-block" style="width: 16px; height: 16px; background-color: {{ node_type.visual.border_color }}; border: 1px solid #000;"></span>
                                </dd>
                            </dl>
                        </div>
                        {% if node_type.custom %}
                        <div class="card-footer bg-transparent">
                            <button class="btn btn-sm btn-warning edit-node-type"
                                    data-id="{{ node_type.id }}"
                                    data-name="{{ node_type.name }}"
                                    data-description="{{ node_type.description }}"
                                    data-category="{{ 'non_stratigraphic' }}"
                                    data-symbol_type="{{ node_type.symbol_type }}"
                                    data-label_format="{{ node_type.label_format }}"
                                    data-visual="{{ node_type.visual|tojson }}">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                            <button class="btn btn-sm btn-danger delete-node-type" data-id="{{ node_type.id }}">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Add/Edit Node Type Modal -->
<div class="modal fade" id="addNodeTypeModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Add Custom Node Type</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="nodeTypeForm">
                    <input type="hidden" id="editMode" value="false">
                    <input type="hidden" id="originalId" value="">

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="tipoId" class="form-label">Type ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="tipoId" required placeholder="e.g., USX">
                            <div class="form-text">Unique identifier for this type</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" rows="2"></textarea>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="category" class="form-label">Category <span class="text-danger">*</span></label>
                            <select class="form-select" id="category" required>
                                <option value="stratigraphic">Stratigraphic</option>
                                <option value="non_stratigraphic">Non-Stratigraphic</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="symbolType" class="form-label">Symbol Type <span class="text-danger">*</span></label>
                            <select class="form-select" id="symbolType" required>
                                <option value="single_arrow">Single Arrow (&gt; / &lt;)</option>
                                <option value="double_arrow">Double Arrow (&gt;&gt; / &lt;&lt;)</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="labelFormat" class="form-label">Label Format <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="labelFormat" required placeholder="e.g., USX{number}">
                        <div class="form-text">Use {number} for US number, {first_word} for first word from description</div>
                    </div>

                    <hr>
                    <h6>Visual Style</h6>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="shape" class="form-label">Shape <span class="text-danger">*</span></label>
                            <select class="form-select" id="shape" required>
                                {% for shape_key, shape_value in shapes.items() %}
                                <option value="{{ shape_key }}">{{ shape_key }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="borderWidth" class="form-label">Border Width</label>
                            <input type="number" class="form-control" id="borderWidth" value="1.0" step="0.1" min="0.1" max="10">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="fillColor" class="form-label">Fill Color</label>
                            <input type="color" class="form-control form-control-color" id="fillColor" value="#FFFFFF">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="borderColor" class="form-label">Border Color</label>
                            <input type="color" class="form-control form-control-color" id="borderColor" value="#000000">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="textColor" class="form-label">Text Color</label>
                            <input type="color" class="form-control form-control-color" id="textColor" value="#000000">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="fontFamily" class="form-label">Font Family</label>
                            <select class="form-select" id="fontFamily">
                                <option value="DialogInput">DialogInput</option>
                                <option value="Dialog">Dialog</option>
                                <option value="Arial">Arial</option>
                                <option value="Helvetica">Helvetica</option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="fontSize" class="form-label">Font Size</label>
                            <input type="number" class="form-control" id="fontSize" value="12" min="6" max="48">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="fontStyle" class="form-label">Font Style</label>
                            <select class="form-select" id="fontStyle">
                                <option value="plain">Plain</option>
                                <option value="bold">Bold</option>
                                <option value="italic">Italic</option>
                                <option value="bolditalic">Bold Italic</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveNodeType">Save Node Type</button>
            </div>
        </div>
    </div>
</div>

<script>
// Add Node Type
document.getElementById('saveNodeType').addEventListener('click', function() {
    const editMode = document.getElementById('editMode').value === 'true';
    const tipoId = document.getElementById('tipoId').value.trim();

    if (!tipoId) {
        alert('Type ID is required');
        return;
    }

    const data = {
        tipo_id: tipoId,
        name: document.getElementById('name').value,
        description: document.getElementById('description').value,
        category: document.getElementById('category').value,
        symbol_type: document.getElementById('symbolType').value,
        label_format: document.getElementById('labelFormat').value,
        visual: {
            shape: document.getElementById('shape').value,
            fill_color: document.getElementById('fillColor').value,
            border_color: document.getElementById('borderColor').value,
            border_width: parseFloat(document.getElementById('borderWidth').value),
            text_color: document.getElementById('textColor').value,
            font_family: document.getElementById('fontFamily').value,
            font_size: parseInt(document.getElementById('fontSize').value),
            font_style: document.getElementById('fontStyle').value
        }
    };

    const url = editMode ? `/em-node-config/api/node-types/${tipoId}` : '/em-node-config/api/node-types';
    const method = editMode ? 'PUT' : 'POST';

    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success || result.message) {
            alert(result.message || 'Node type saved successfully');
            location.reload();
        } else if (result.error) {
            alert('Error: ' + result.error);
        }
    })
    .catch(error => {
        alert('Error saving node type: ' + error);
    });
});

// Edit Node Type
document.querySelectorAll('.edit-node-type').forEach(btn => {
    btn.addEventListener('click', function() {
        const data = this.dataset;

        document.getElementById('editMode').value = 'true';
        document.getElementById('originalId').value = data.id;
        document.getElementById('modalTitle').textContent = 'Edit Node Type';

        document.getElementById('tipoId').value = data.id;
        document.getElementById('tipoId').disabled = true;
        document.getElementById('name').value = data.name;
        document.getElementById('description').value = data.description;
        document.getElementById('category').value = data.category;
        document.getElementById('symbolType').value = data.symbol_type;
        document.getElementById('labelFormat').value = data.label_format;

        const visual = JSON.parse(data.visual);
        document.getElementById('shape').value = visual.shape || 'rectangle';
        document.getElementById('fillColor').value = visual.fill_color || '#FFFFFF';
        document.getElementById('borderColor').value = visual.border_color || '#000000';
        document.getElementById('borderWidth').value = visual.border_width || 1.0;
        document.getElementById('textColor').value = visual.text_color || '#000000';
        document.getElementById('fontFamily').value = visual.font_family || 'DialogInput';
        document.getElementById('fontSize').value = visual.font_size || 12;
        document.getElementById('fontStyle').value = visual.font_style || 'plain';

        new bootstrap.Modal(document.getElementById('addNodeTypeModal')).show();
    });
});

// Reset modal on close
document.getElementById('addNodeTypeModal').addEventListener('hidden.bs.modal', function() {
    document.getElementById('editMode').value = 'false';
    document.getElementById('originalId').value = '';
    document.getElementById('modalTitle').textContent = 'Add Custom Node Type';
    document.getElementById('tipoId').disabled = false;
    document.getElementById('nodeTypeForm').reset();
});

// Delete Node Type
document.querySelectorAll('.delete-node-type').forEach(btn => {
    btn.addEventListener('click', function() {
        const tipoId = this.dataset.id;

        if (!confirm(`Delete node type "${tipoId}"? This action cannot be undone.`)) {
            return;
        }

        fetch(`/em-node-config/api/node-types/${tipoId}`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(result => {
            if (result.success || result.message) {
                alert(result.message || 'Node type deleted successfully');
                location.reload();
            } else if (result.error) {
                alert('Error: ' + result.error);
            }
        })
        .catch(error => {
            alert('Error deleting node type: ' + error);
        });
    });
});
</script>

{% endblock %}