{% extends "base.html" %}

{% block content %}
<div class="transactions-section">
    <div class="transactions-card">
        <div class="card-header">
            <i class="fas fa-search"></i>
            <h2>QuickBooks Transactions</h2>
            <p>Recently imported transactions from your PDF conversions</p>
        </div>

        {% if error %}
            <div class="error-message">
                <i class="fas fa-exclamation-triangle"></i>
                <div class="error-details">
                    <strong>Error loading transactions:</strong>
                    <span>{{ error }}</span>
                </div>
                <div class="error-solutions">
                    <p><strong>Possible solutions:</strong></p>
                    <ul>
                        <li>Reconnect to QuickBooks using the button below</li>
                        <li>Check your internet connection</li>
                        <li>Verify your QuickBooks subscription is active</li>
                    </ul>
                </div>
            </div>
            {% endif %}

        <div class="transactions-list">
            <h3>Recent Transactions</h3>

            {% if transactions %}
            <div class="transaction-table">
                <div class="table-header">
                    <div class="col-date">Date</div>
                    <div class="col-vendor">Vendor</div>
                    <div class="col-amount">Amount</div>
                    <div class="col-type">Type</div>
                </div>

                {% for transaction in transactions %}
                <div class="table-row">
                    <div class="col-date">{{ transaction.date }}</div>
                    <div class="col-vendor">{{ transaction.vendor }}</div>
                    <div class="col-amount">${{ "%.2f"|format(transaction.amount) }}</div>
                    <div class="col-type">{{ transaction.type }}</div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="no-transactions">
                <i class="fas fa-inbox"></i>
                <h4>No transactions found</h4>
                <p>No transactions were found in your QuickBooks account for the last 30 days.</p>
                <p>This could be because:</p>
                <ul>
                    <li>You haven't created any transactions yet</li>
                    <li>Your QuickBooks company is new</li>
                    <li>The transactions are older than 30 days</li>
                </ul>
            </div>
            {% endif %}
        </div>

        <div class="action-buttons">
            <a href="{{ url_for('quickbooks_setup') }}" class="action-btn">
                <i class="fas fa-cog"></i>
                QuickBooks Settings
            </a>
            <a href="{{ url_for('index') }}" class="convert-btn">
                <i class="fas fa-file-import"></i>
                Convert New PDF
            </a>
            <a href="https://sandbox.qbo.intuit.com/redirect/rp/{{ session.qb_realm_id }}"
               target="_blank" class="quickbooks-btn">
                <i class="fas fa-external-link-alt"></i>
                Open QuickBooks
            </a>
        </div>

        <div class="quickbooks-tips">
            <h4>💡 Where to find transactions in QuickBooks:</h4>
            <div class="tips-grid">
                <div class="tip">
                    <strong>Expenses Tab</strong>
                    <p>Go to Expenses → Vendors to see all purchase transactions</p>
                </div>
                <div class="tip">
                    <strong>Banking Tab</strong>
                    <p>Check Banking → Reconcile for bank transactions</p>
                </div>
                <div class="tip">
                    <strong>Reports</strong>
                    <p>View Reports → Transaction List for all transactions</p>
                </div>
                <div class="tip">
                    <strong>Chart of Accounts</strong>
                    <p>Check Accounting → Chart of Accounts → Bank Account</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.transactions-section {
    padding: 2rem 0;
}

.transactions-card {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
    margin: 0 auto;
}

.error-message {
    background: #fee2e2;
    color: #dc2626;
    padding: 1rem;
    border-radius: 10px;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.transactions-list h3 {
    margin-bottom: 1.5rem;
    color: #333;
    font-size: 1.5rem;
}

.transaction-table {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.table-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    background: #4f46e5;
    color: white;
    font-weight: 600;
    padding: 1rem;
}

.table-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
}

.table-row:last-child {
    border-bottom: none;
}

.table-row:nth-child(even) {
    background: #f9fafb;
}

.col-amount {
    font-weight: 600;
    color: #059669;
}

.no-transactions {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
}

.no-transactions i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #d1d5db;
}

.no-transactions h4 {
    margin-bottom: 1rem;
    color: #374151;
}

.no-transactions ul {
    text-align: left;
    display: inline-block;
    margin-top: 1rem;
}

.no-transactions li {
    margin: 0.5rem 0;
}

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

.action-btn, .convert-btn, .quickbooks-btn {
    padding: 1rem 1.5rem;
    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;
}

.convert-btn {
    background: #8b5cf6;
    color: white;
}

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

.action-btn:hover, .convert-btn:hover, .quickbooks-btn:hover {
    transform: translateY(-2px);
}

.quickbooks-tips {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.quickbooks-tips h4 {
    margin-bottom: 1.5rem;
    color: #333;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.tip {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #4f46e5;
}

.tip strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #1f2937;
}

.tip p {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}
</style>
{% endblock %}