<layout name="admin" />

<div class="section">
    <h2>{{ title }}</h2>

    <div class="stats-grid">
        <div class="stat-card">
            <h3>Migration Status</h3>
            <p><strong>Total Migrations:</strong> {{ total_migrations }}</p>
            <p><strong>Applied:</strong> <span style="color: var(--success);">{{ applied_count }}</span></p>
            <p><strong>Pending:</strong> <span style="color: var(--warning);">{{ pending_count }}</span></p>
        </div>

        <div class="stat-card">
            <h3>Database State</h3>
            <p><strong>Pending Count:</strong> {{ pending_count }}</p>
            <p><strong>Status:</strong>
                <if condition="{{ has_pending }}">
                    <span style="color: var(--warning);">⚠️ {{ pending_count }} Migration(s) pending</span>
                <else/>
                    <span style="color: var(--success);">✅ Database is up to date</span>
                </if>
            </p>
            <if condition="{{ has_pending }}">
                <p><strong>Action Required:</strong> <span style="color: var(--error);">Run migrations to update database</span></p>
            </if>
        </div>
    </div>

    <div class="admin-tools" style="margin: 1rem 0;">
        <input type="text" id="migrationFilter" placeholder="Migrationen filtern..." class="search-input">
    </div>

    <table-data source="migrations_table" id="migrationsTable" striped="true" hover="true" />
</div>

<style>
/* Status badge styles for migrations table */
.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-block;
}

.status-badge.success {
    background-color: rgba(34, 197, 94, 0.1);
    color: rgb(34, 197, 94);
}

.status-badge.warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
}

.status-badge.error {
    background-color: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
}

.status-badge.secondary {
    background-color: rgba(107, 114, 128, 0.1);
    color: rgb(107, 114, 128);
}

/* Boolean badges for applied column */
.badge-success {
    background-color: rgba(34, 197, 94, 0.1);
    color: rgb(34, 197, 94);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-secondary {
    background-color: rgba(107, 114, 128, 0.1);
    color: rgb(107, 114, 128);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Column specific styles */
.version-col {
    font-family: monospace;
    font-size: 0.875rem;
    width: 120px;
}

.description-col {
    max-width: 300px;
    word-wrap: break-word;
}

.status-col {
    width: 120px;
}

.applied-col {
    width: 80px;
    text-align: center;
}

.search-input {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.875rem;
    min-width: 300px;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
</style>

<script>
// Filter functionality - works with the new table structure
document.addEventListener('DOMContentLoaded', function() {
    const filterInput = document.getElementById('migrationFilter');
    if (filterInput) {
        filterInput.addEventListener('input', function() {
            const filterValue = this.value.toLowerCase();
            const table = document.getElementById('migrationsTable');
            if (table) {
                const rows = table.querySelectorAll('tbody tr');
                rows.forEach(row => {
                    const text = row.textContent.toLowerCase();
                    row.style.display = text.includes(filterValue) ? '' : 'none';
                });
            }
        });
    }

    // Sort functionality - enhanced for new table structure
    const table = document.getElementById('migrationsTable');
    if (table) {
        const headers = table.querySelectorAll('th .header-content');
        headers.forEach((header, index) => {
            header.style.cursor = 'pointer';
            header.addEventListener('click', () => {
                const tbody = table.querySelector('tbody');
                if (!tbody) return;

                const rows = Array.from(tbody.querySelectorAll('tr'));
                const isAscending = header.classList.contains('sort-asc');

                // Remove sort classes from all headers
                headers.forEach(h => {
                    h.classList.remove('sort-asc', 'sort-desc');
                });

                // Add appropriate sort class
                header.classList.add(isAscending ? 'sort-desc' : 'sort-asc');

                rows.sort((a, b) => {
                    const aVal = a.cells[index].textContent.trim();
                    const bVal = b.cells[index].textContent.trim();

                    const comparison = aVal.localeCompare(bVal);
                    return isAscending ? -comparison : comparison;
                });

                rows.forEach(row => tbody.appendChild(row));
            });
        });
    }
});
</script>