{% extends 'ssh_manager/base.html' %}
{% load static %}

{% block content %}
<style>
    .log-table tbody td {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
    .log-table .log-type-backup {
        color: #ffc107;
        font-size: 0.8rem;
    }
    .log-table .log-type-command {
        color: #17a2b8;
        font-size: 0.8rem;
    }
</style>
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3>İşlem Geçmişi</h3>
        <small class="text-muted">Tüm sistem işlemleri ve logları</small>
    </div>
    <div class="d-flex gap-2">
        <input type="text" id="logSearch" class="form-control" style="max-width: 250px;" placeholder="Proje adına göre ara...">
        <button class="btn btn-danger btn-sm" onclick="clearAllLogs()" title="Tüm Logları Temizle">
            <i class="bi bi-trash"></i>
        </button>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-dark table-bordered table-striped log-table">
        <thead>
            <tr>
                <th style="width: 40px;">#</th>
                <th style="width: 130px;">Tarih</th>
                <th style="width: 120px;">Tip</th>
                <th style="width: 150px;">Proje</th>
                <th>İşlem</th>
            </tr>
        </thead>
        <tbody>
            {% for log in logs %}
            <tr class="log-row" data-project="{{ log.command|lower }}">
                <td>{{ forloop.counter }}</td>
                <td>{{ log.created_at|date:"d.m.Y H:i" }}</td>
                <td>
                    {% if log.log_type == 'backup' %}
                        <span class="log-type-backup">💾 Yedekleme</span>
                    {% else %}
                        <span class="log-type-command">⚙️ Komut</span>
                    {% endif %}
                </td>
                <td>
                    {% if 'Proje:' in log.output %}
                        {% with project_name=log.output|cut:'Proje: ' %}
                            {{ project_name|truncatechars:25 }}
                        {% endwith %}
                    {% elif 'Proje:' in log.command %}
                        {% if ')' in log.command %}
                            {% with project_part=log.command|cut:'(Proje: '|cut:')' %}
                                {{ project_part|truncatechars:25 }}
                            {% endwith %}
                        {% else %}
                            {% with project_part=log.command|cut:'Proje: ' %}
                                {{ project_part|truncatechars:25 }}
                            {% endwith %}
                        {% endif %}
                    {% elif log.log_type == 'backup' and 'Backup:' in log.command %}
                        {% with folder_name=log.command|cut:'Backup: ' %}
                            {{ folder_name|truncatechars:25 }}
                        {% endwith %}
                    {% else %}
                        Sistem
                    {% endif %}
                </td>
                <td title="{{ log.output }}">{{ log.command|default:log.output|truncatechars:100 }}</td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="5" class="text-center text-muted">
                    <i class="bi bi-inbox" style="font-size: 3rem; opacity: 0.3;"></i>
                    <p class="mt-2">Henüz işlem geçmişi bulunmuyor</p>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
// Log arama işlevselliği
document.getElementById('logSearch').addEventListener('keyup', function() {
    const searchTerm = this.value.toLowerCase().trim();
    const logRows = document.querySelectorAll('.log-row');

    logRows.forEach(row => {
        const projectName = row.getAttribute('data-project') || '';
        const command = row.cells[4].textContent.toLowerCase(); // İşlem kolonu artık 4. indekste
        
        if (searchTerm === '' || 
            projectName.includes(searchTerm) || 
            command.includes(searchTerm)) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
});

// Tüm logları temizle
function clearAllLogs() {
    if (!confirm('Tüm işlem geçmişini silmek istediğinizden emin misiniz?\nBu işlem geri alınamaz.')) {
        return;
    }
    
    fetch('/logs/clear/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast(`✅ ${data.deleted_count} log kaydı silindi`, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast(`❌ ${data.message || 'Log silme işlemi başarısız!'}`, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('❌ Log silme sırasında bir hata oluştu!', 'error');
    });
}
</script>
{% endblock %}