{% extends "base.html" %}

{% block content %}
<div class="results-section">
    <div class="results-card">
        <div class="card-header">
            <i class="fas fa-list-check"></i>
            <h2>QuickBooks Import Results</h2>
            <p>Transaction import completed</p>
        </div>

        <div class="results-summary">
            <div class="summary-item total">
                <i class="fas fa-list"></i>
                <span>Total Processed: {{ total_processed }}</span>
            </div>
            <div class="summary-item success">
                <i class="fas fa-check-circle"></i>
                <span>Successful: {{ success_count }}</span>
            </div>
            <div class="summary-item failed">
                <i class="fas fa-times-circle"></i>
                <span>Failed: {{ failed_count }}</span>
            </div>
        </div>

        <div class="results-details">
            <h3>Transaction Details:</h3>
            <div class="results-list">
                {% for result in results %}
                <div class="result-item">
                    {{ result }}
                </div>
                {% else %}
                <div class="no-results">
                    No transactions were processed.
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="action-buttons">
            <a href="{{ url_for('index') }}" class="action-btn">
                <i class="fas fa-arrow-left"></i>
                Convert Another File
            </a>
            <a href="{{ url_for('quickbooks_setup') }}" class="quickbooks-btn">
                <i class="fas fa-cog"></i>
                QuickBooks Settings
            </a>
        </div>
    </div>
</div>

<style>
.results-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem 0;
}

.results-card {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 100%;
}

.results-summary {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    min-width: 150px;
    justify-content: center;
}

.summary-item.total {
    background: #e0f2fe;
    color: #0369a1;
}

.summary-item.success {
    background: #d1fae5;
    color: #065f46;
}

.summary-item.failed {
    background: #fee2e2;
    color: #dc2626;
}

.results-details {
    margin: 2rem 0;
}

.results-details h3 {
    margin-bottom: 1rem;
    color: #333;
}

.results-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem;
    background: #f9fafb;
}

.result-item {
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    background: white;
    margin-bottom: 0.5rem;
    border-radius: 5px;
}

.result-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.no-results {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 2rem;
}

.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.action-btn, .quickbooks-btn {
    padding: 1rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.action-btn {
    background: #4f46e5;
    color: white;
}

.quickbooks-btn {
    background: linear-gradient(135deg, #2CA01C, #1F7B15);
    color: white;
}

.action-btn:hover, .quickbooks-btn:hover {
    transform: translateY(-2px);
}
</style>
{% endblock %}