{% extends "base.html" %}

{% block title %}Configuration - Axion HDL{% endblock %}

{% block head %}
<link rel="stylesheet"
    href="{{ url_for('static', filename='css/modules/config.css') }}?v={{ range(1, 10000) | random }}">
{% endblock %}

{% block content %}
<div class="config-container fade-in">
    <!-- Header / Toolbar -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1 fw-bold">Configuration</h2>
            <p class="text-muted mb-0">Manage source paths and project settings</p>
        </div>
        <div class="action-buttons gap-2 d-flex">
            <button id="saveBtn" class="btn btn-primary" onclick="saveConfig()">
                <i class="bi bi-save"></i> Save Changes
            </button>
            <button id="refreshBtn" class="btn btn-secondary" onclick="refreshConfig()">
                <i class="bi bi-arrow-clockwise"></i> Refresh Analysis
            </button>
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="bi bi-three-dots-vertical"></i> More
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#" onclick="exportConfig()"><i class="bi bi-download me-2"></i>
                            Export Config (JSON)</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Main Grid -->
    <div class="row g-4">
        <!-- Left Column: Settings -->
        <div class="col-lg-7">

            <!-- Sources Card -->
            <div class="card config-card mb-4" style="animation-delay: 0.1s">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-folder-fill me-2 text-primary"></i>Source Directories</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">Add folders containing your HDL source files. The tool will
                        recursively scan these directories.</p>

                    <ul class="path-list" id="srcDirsList"></ul>

                    <div class="add-path-form mt-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="newSrcDir" placeholder="/path/to/hdl/source">
                            <button class="btn btn-outline-secondary" type="button" onclick="browseFolder()"
                                title="Browse Folder">
                                <i class="bi bi-folder2-open"></i>
                            </button>
                            <button class="btn btn-primary" type="button" onclick="addSource('dir')">
                                <i class="bi bi-plus-lg"></i> Add
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Individual Files Card -->
            <div class="card config-card mb-4" style="animation-delay: 0.2s">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-file-earmark-code-fill me-2 text-info"></i>Individual Source Files
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">Add specific files if they are outside your source directories.</p>

                    <ul class="path-list" id="srcFilesList"></ul>

                    <div class="add-path-form mt-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="newSrcFile" placeholder="/path/to/file.vhd">
                            <button class="btn btn-outline-secondary" type="button" onclick="browseFile()"
                                title="Browse File">
                                <i class="bi bi-file-earmark"></i>
                            </button>
                            <button class="btn btn-primary" type="button" onclick="addSource('file')">
                                <i class="bi bi-plus-lg"></i> Add
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Exclude Patterns Card -->
            <div class="card config-card mb-4" style="animation-delay: 0.3s">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-slash-circle-fill me-2 text-danger"></i>Exclude Patterns</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">Files matching these patterns (glob format) will be ignored.</p>

                    <ul class="path-list" id="excludeList"></ul>

                    <div class="add-path-form mt-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="newExclude"
                                placeholder="e.g. *_testcap.vhd, temp/*">
                            <button class="btn btn-primary" type="button" onclick="addExclude()">
                                <i class="bi bi-plus-lg"></i> Add Pattern
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Output Directory Card -->
            <div class="card config-card mb-4" style="animation-delay: 0.4s">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-box-arrow-right me-2 text-success"></i>Output Settings</h5>
                </div>
                <div class="card-body">
                    <div
                        class="d-flex align-items-center justify-content-between p-3 rounded bg-tertiary border border-subtle">
                        <div>
                            <span class="d-block text-muted text-uppercase fw-bold"
                                style="font-size: 0.7rem; letter-spacing: 1px;">Current Output Directory</span>
                            <code id="currentOutputDir" class="fs-6 text-break">-</code>
                        </div>
                        <i class="bi bi-check-circle-fill text-success fs-4"></i>
                    </div>
                </div>
            </div>

        </div>

        <!-- Right Column: Status & Logs -->
        <div class="col-lg-5">

            <!-- Detected Files Panel -->
            <div class="card config-card h-100" style="min-height: 500px; animation-delay: 0.5s">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-search me-2 text-warning"></i>Detected Files</h5>
                    <span class="badge bg-primary rounded-pill" id="detectedCount">0</span>
                </div>
                <div class="card-body d-flex flex-column h-100">
                    <div class="mb-3">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-transparent border-end-0"><i
                                    class="bi bi-filter"></i></span>
                            <input type="text" class="form-control border-start-0 ps-0" id="filterFiles"
                                placeholder="Filter files..." onkeyup="filterDetectedFiles()">
                        </div>
                    </div>

                    <div class="detected-files-container flex-grow-1 border rounded bg-tertiary">
                        <ul class="path-list list-group list-group-flush" id="detectedFilesList">
                            <li class="list-group-item bg-transparent text-center text-muted py-4">
                                <div class="spinner-border spinner-border-sm mb-2" role="status"></div>
                                <div>Scanning sources...</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Logs Area (Collapsible) -->
    <div class="mt-4">
        <button class="btn btn-sm btn-link text-decoration-none text-muted p-0 mb-2" type="button"
            data-bs-toggle="collapse" data-bs-target="#logsCollapse">
            <i class="bi bi-terminal me-1"></i> Show/Hide Operation Logs
        </button>
        <div class="collapse" id="logsCollapse">
            <div class="card card-body bg-dark text-light font-monospace p-3" id="refreshLog"
                style="max-height: 200px; overflow-y: auto; font-size: 0.85rem;">
                <!-- Logs go here -->
            </div>
        </div>
    </div>

</div>

<!-- Unsaved Changes Badge (Fixed) -->
<div id="unsavedBadge" class="position-fixed bottom-0 end-0 m-4 p-3 bg-warning text-dark rounded shadow"
    style="display: none; z-index: 1050;">
    <i class="bi bi-exclamation-triangle-fill me-2"></i> You have unsaved changes!
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/modules/config.js') }}?v={{ range(1, 10000) | random }}"></script>
{% endblock %}