{% extends "base.html" %}

{% block title %}Tool Config - Axion HDL{% endblock %}

{% block head %}
<style>
    .config-section {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        margin-bottom: 1.5rem;
    }

    .config-section h4 {
        margin: 0 0 1rem 0;
        color: #1e293b;
        font-size: 1.1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .config-section h4 i {
        color: #2563eb;
    }

    .path-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .path-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: #f8fafc;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 0.85rem;
    }

    .path-item code {
        background: transparent;
        padding: 0;
        flex: 1;
        word-break: break-all;
    }

    .path-item .remove-btn {
        background: #fee2e2;
        color: #dc2626;
        border: none;
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 0.75rem;
        cursor: pointer;
        margin-left: 0.5rem;
    }

    .path-item .remove-btn:hover {
        background: #fecaca;
    }

    .add-path-form {
        display: flex;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .add-path-form input {
        flex: 1;
        padding: 0.5rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 0.85rem;
    }

    .add-path-form button {
        background: #2563eb;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 0.5rem 1rem;
        font-weight: 500;
        cursor: pointer;
    }

    .add-path-form button:hover {
        background: #1d4ed8;
    }

    .btn-browse {
        background: #6366f1;
    }

    .btn-browse:hover {
        background: #4f46e5;
    }

    .empty-list {
        color: #64748b;
        font-style: italic;
        padding: 1rem;
        text-align: center;
        background: #f8fafc;
        border-radius: 8px;
    }

    .config-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .summary-card {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: white;
        padding: 1.25rem;
        border-radius: 12px;
        text-align: center;
    }

    .summary-card.warning {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .summary-card h2 {
        margin: 0;
        font-size: 2rem;
        font-weight: 700;
    }

    .summary-card p {
        margin: 0.25rem 0 0 0;
        opacity: 0.9;
        font-size: 0.85rem;
    }

    .action-bar {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .btn-refresh {
        background: #10b981;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-refresh:hover {
        background: #059669;
    }

    .type-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
        margin-right: 0.5rem;
    }

    .type-badge.vhdl {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .type-badge.json {
        background: #fef3c7;
        color: #d97706;
    }

    .type-badge.yaml {
        background: #d1fae5;
        color: #059669;
    }

    .type-badge.xml {
        background: #fce7f3;
        color: #be185d;
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
    <div>
        <h2 class="mb-0 fw-bold text-dark">
            <i class="bi bi-gear-fill me-2"></i>Tool Configuration
            <span id="unsavedBadge" class="badge bg-warning text-dark ms-2"
                style="display: none; font-size: 0.5em; vertical-align: middle;">Unsaved Changes</span>
        </h2>
        <small class="text-muted">View and modify CLI attributes</small>
    </div>
    <div>
        <button onclick="saveConfigDefault()" class="btn-refresh me-2" style="background: #10b981;">
            <i class="bi bi-floppy"></i> Save
        </button>
        <button onclick="applyAndRefresh()" class="btn-refresh">
            <i class="bi bi-arrow-clockwise"></i> Apply & Refresh
        </button>
    </div>
</div>

<!-- Activity Log (Hidden by default) -->
<div id="configActivityLog" class="card shadow-sm border-0 bg-dark text-white mb-4" style="display: none;">
    <div
        class="card-header border-secondary border-opacity-25 pt-2 pb-1 px-3 d-flex justify-content-between align-items-center">
        <small class="fw-bold mb-0 text-white"><i class="bi bi-terminal me-2"></i>Activity Log</small>
        <button onclick="document.getElementById('configActivityLog').style.display='none'"
            class="btn btn-sm text-muted p-0"><i class="bi bi-x-lg"></i></button>
    </div>
    <div class="card-body p-0">
        <div id="configLogContent" class="p-3 font-monospace small"
            style="height: 150px; overflow-y: auto; color: #a0a0a0; background-color: #1e1e1e;">
        </div>
    </div>
</div>

<!-- Summary Cards -->
<div class="config-summary">
    <div class="summary-card">
        <i class="bi bi-folder2-open mb-2" style="font-size: 1.5rem; opacity: 0.8;"></i>
        <h2 id="srcCount" class="text-white">0</h2>
        <p>Source Paths</p>
    </div>
    <div class="summary-card info">
        <i class="bi bi-files mb-2" style="font-size: 1.5rem; opacity: 0.8;"></i>
        <h2 id="totalFilesCount" class="text-white">0</h2>
        <p>Detected Files</p>
    </div>
    <div class="summary-card warning">
        <i class="bi bi-slash-circle mb-2" style="font-size: 1.5rem; opacity: 0.8;"></i>
        <h2 id="excludeCount" class="text-white">0</h2>
        <p>Exclude Patterns</p>
    </div>
</div>

<style>
    .summary-card.info {
        background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    }
</style>

<!-- Source Directories -->
<div class="config-section">
    <h4><i class="bi bi-folder-fill"></i> Source Directories</h4>
    <ul class="path-list" id="srcDirsList"></ul>
    <div class="add-path-form">
        <input type="text" id="newSrcDir" placeholder="Select or enter directory path">
        <button onclick="browseFolder()" class="btn-browse"><i class="bi bi-folder2-open"></i> Browse</button>
        <button onclick="addSource('dir')"><i class="bi bi-plus-lg"></i> Add</button>
    </div>
</div>

<!-- Source Files -->
<div class="config-section">
    <h4><i class="bi bi-file-earmark-code-fill"></i> Source Files</h4>
    <ul class="path-list" id="srcFilesList"></ul>
    <div class="add-path-form">
        <input type="text" id="newSrcFile" placeholder="Select or enter file path">
        <button onclick="browseFile()" class="btn-browse"><i class="bi bi-file-earmark"></i> Browse</button>
        <button onclick="addSource('file')"><i class="bi bi-plus-lg"></i> Add</button>
    </div>
</div>

<!-- Exclude Patterns -->
<div class="config-section">
    <h4><i class="bi bi-x-circle-fill"></i> Exclude Patterns</h4>
    <ul class="path-list" id="excludeList"></ul>
    <div class="add-path-form">
        <input type="text" id="newExclude" placeholder="*_backup*">
        <button onclick="addExclude()"><i class="bi bi-plus-lg"></i> Add Pattern</button>
    </div>
</div>

<!-- Output Directory -->
<div class="config-section">
    <h4><i class="bi bi-folder2-open"></i> Output Directory</h4>
    <div class="path-item">
        <code id="outputDir">-</code>
    </div>
</div>

<!-- Detected Files -->
<div class="config-section">
    <h4><i class="bi bi-search"></i> Detected Source Files</h4>
    <p class="text-muted small mb-2">List of all files found in source directories and manually added files.</p>
    <div style="max-height: 300px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 4px;">
        <ul class="path-list" id="detectedFilesList" style="margin-bottom: 0;">
            <li class="empty-list">Scanning...</li>
        </ul>
    </div>
</div>

<script>
    let config = {};

    function loadConfig() {
        fetch('/api/config')
            .then(r => r.json())
            .then(data => {
                config = data;

                const badge = document.getElementById('unsavedBadge');
                if (badge) {
                    badge.style.display = data.unsaved_changes ? 'inline-block' : 'none';
                }

                if (typeof renderConfig === 'function') renderConfig();
                loadDetectedFiles();
            })
            .catch(err => console.error('Failed to load config:', err));
    }

    function loadDetectedFiles() {
        const list = document.getElementById('detectedFilesList');
        list.innerHTML = '<li class="empty-list"><div class="spinner-border spinner-border-sm" role="status"></div> Scanning...</li>';

        fetch('/api/config/files')
            .then(r => r.json())
            .then(files => {
                if (document.getElementById('totalFilesCount')) {
                    document.getElementById('totalFilesCount').textContent = files.length;
                }
                list.innerHTML = '';
                if (files.length === 0) {
                    list.innerHTML = '<li class="empty-list">No files found</li>';
                    return;
                }

                files.forEach(f => {
                    const li = document.createElement('li');
                    li.className = 'path-item';

                    const typeBadge = document.createElement('span');
                    typeBadge.className = 'badge bg-secondary me-2';
                    typeBadge.textContent = f.category || 'FILE';

                    const pathSpan = document.createElement('span');
                    pathSpan.className = 'path-text';
                    pathSpan.textContent = f.path;
                    pathSpan.title = f.path;
                    pathSpan.style.flex = '1';
                    pathSpan.style.overflow = 'hidden';
                    pathSpan.style.textOverflow = 'ellipsis';
                    pathSpan.style.whiteSpace = 'nowrap';
                    pathSpan.style.marginRight = '10px';

                    const sourceBadge = document.createElement('span');
                    sourceBadge.className = f.type === 'Manual' ? 'badge bg-primary' : 'badge bg-light text-dark border';
                    sourceBadge.textContent = f.type;

                    li.appendChild(typeBadge);
                    li.appendChild(pathSpan);
                    li.appendChild(sourceBadge);
                    list.appendChild(li);
                });
            })
            .catch(err => {
                list.innerHTML = '<li class="empty-list text-danger">Error loading files</li>';
                console.error(err);
            });
    }

    function renderConfig() {
        // Summary counts
        const srcCount = (
            (config.src_dirs || []).length +
            (config.src_files || []).length +
            (config.xml_src_dirs || []).length +
            (config.xml_src_files || []).length +
            (config.yaml_src_dirs || []).length +
            (config.yaml_src_files || []).length +
            (config.json_src_dirs || []).length +
            (config.json_src_files || []).length
        );
        document.getElementById('srcCount').textContent = srcCount;
        document.getElementById('excludeCount').textContent = (config.exclude_patterns || []).length;
        document.getElementById('outputDir').textContent = config.output_dir || 'Not set';

        // Render source directories
        const dirsList = document.getElementById('srcDirsList');
        const allDirs = [
            ...(config.src_dirs || []).map(p => ({ path: p, type: 'vhdl' })),
            ...(config.xml_src_dirs || []).map(p => ({ path: p, type: 'xml' })),
            ...(config.yaml_src_dirs || []).map(p => ({ path: p, type: 'yaml' })),
            ...(config.json_src_dirs || []).map(p => ({ path: p, type: 'json' }))
        ];

        if (allDirs.length === 0) {
            dirsList.innerHTML = '<li class="empty-list">No source directories configured</li>';
        } else {
            dirsList.innerHTML = allDirs.map(item => `
                <li class="path-item">
                    <span class="type-badge ${item.type}">${item.type.toUpperCase()}</span>
                    <code>${item.path}</code>
                    <button class="remove-btn" onclick="removeSource('dir', '${item.path}', '${item.type}')">
                        <i class="bi bi-trash"></i>
                    </button>
                </li>
            `).join('');
        }

        // Render source files
        const filesList = document.getElementById('srcFilesList');
        const allFiles = [
            ...(config.src_files || []).map(p => ({ path: p, type: 'vhdl' })),
            ...(config.xml_src_files || []).map(p => ({ path: p, type: 'xml' })),
            ...(config.yaml_src_files || []).map(p => ({ path: p, type: 'yaml' })),
            ...(config.json_src_files || []).map(p => ({ path: p, type: 'json' }))
        ];

        if (allFiles.length === 0) {
            filesList.innerHTML = '<li class="empty-list">No source files configured</li>';
        } else {
            filesList.innerHTML = allFiles.map(item => `
                <li class="path-item">
                    <span class="type-badge ${item.type}">${item.type.toUpperCase()}</span>
                    <code>${item.path}</code>
                    <button class="remove-btn" onclick="removeSource('file', '${item.path}', '${item.type}')">
                        <i class="bi bi-trash"></i>
                    </button>
                </li>
            `).join('');
        }

        // Render exclude patterns
        const excludeList = document.getElementById('excludeList');
        const patterns = config.exclude_patterns || [];

        if (patterns.length === 0) {
            excludeList.innerHTML = '<li class="empty-list">No exclude patterns</li>';
        } else {
            excludeList.innerHTML = patterns.map(p => `
                <li class="path-item">
                    <code>${p}</code>
                    <button class="remove-btn" onclick="removeExclude('${p}')">
                        <i class="bi bi-trash"></i>
                    </button>
                </li>
            `).join('');
        }
    }

    function addSource(type) {
        const input = type === 'dir' ? document.getElementById('newSrcDir') : document.getElementById('newSrcFile');
        const path = input.value.trim();
        if (!path) {
            alert('Please enter a path');
            return;
        }

        fetch('/api/config/add_source', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ path: path, type: type })
        })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    input.value = '';
                    loadConfig();
                } else {
                    alert(data.error || 'Failed to add source');
                }
            });
    }

    function browseFolder() {
        fetch('/api/select_folder')
            .then(r => r.json())
            .then(data => {
                if (data.path) {
                    document.getElementById('newSrcDir').value = data.path;
                } else if (data.error && data.error !== 'User cancelled') {
                    alert(data.error);
                }
            })
            .catch(err => {
                console.error('Browse folder error:', err);
            });
    }

    function browseFile() {
        fetch('/api/select_file')
            .then(r => r.json())
            .then(data => {
                if (data.path) {
                    document.getElementById('newSrcFile').value = data.path;
                } else if (data.error && data.error !== 'User cancelled') {
                    alert(data.error);
                }
            })
            .catch(err => {
                console.error('Browse file error:', err);
            });
    }

    function removeSource(type, path, fileType) {
        fetch('/api/config/remove_source', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ path: path, type: type, file_type: fileType })
        })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    loadConfig();
                } else {
                    alert(data.error || 'Failed to remove source');
                }
            });
    }

    function addExclude() {
        const input = document.getElementById('newExclude');
        const pattern = input.value.trim();
        if (!pattern) return;

        fetch('/api/config/add_exclude', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ pattern: pattern })
        })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    input.value = '';
                    loadConfig();
                } else {
                    alert(data.error || 'Failed to add pattern');
                }
            });
    }

    function removeExclude(pattern) {
        fetch('/api/config/remove_exclude', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ pattern: pattern })
        })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    loadConfig();
                } else {
                    alert(data.error || 'Failed to remove pattern');
                }
            });
    }

    function saveConfigDefault() {
        fetch('/api/config/save', { method: 'POST' })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    alert('Configuration saved to ' + data.path);
                    loadConfig();
                } else {
                    alert('Error saving configuration: ' + data.error);
                }
            })
            .catch(err => {
                console.error(err);
                alert('Network error saving configuration');
            });
    }

    function applyAndRefresh() {
        const logSection = document.getElementById('configActivityLog');
        const logContent = document.getElementById('configLogContent');
        logSection.style.display = 'block';
        logContent.innerHTML = '<div class="text-info">Refreshing...</div>';

        fetch('/api/config/refresh', { method: 'POST' })
            .then(r => r.json())
            .then(data => {
                logContent.innerHTML = data.logs.map(l => `<div>${l}</div>`).join('');
                if (data.success) {
                    logContent.innerHTML += '<div class="text-success mt-2">Refresh completed successfully.</div>';
                    loadConfig(); // Update UI stats
                } else {
                    logContent.innerHTML += '<div class="text-danger mt-2">Refresh failed.</div>';
                }
                // Auto-scroll to bottom
                logContent.scrollTop = logContent.scrollHeight;
            })
            .catch(err => {
                logContent.innerHTML += `<div class="text-danger">Network error: ${err}</div>`;
            });
    }

    // Load config on page load
    loadConfig();
</script>
{% endblock %}