{% extends "base.html" %}

{% block content %}
<div class="quickbooks-section">
    <div class="setup-card">
        <div class="card-header">
            <i class="fas fa-exchange-alt"></i>
            <h2>QuickBooks Integration</h2>
            <p>Connect your QuickBooks account to automatically send transactions</p>
        </div>

        <div class="connection-status">
            {% if qb_connected %}
            <div class="status-connected">
                <i class="fas fa-check-circle"></i>
                <span>Connected to QuickBooks</span>
                {% if company_info.CompanyName %}
                <small>Company: {{ company_info.CompanyName }}</small>
                {% endif %}
                <small>Realm ID: {{ session.qb_realm_id }}</small>
            </div>
            {% else %}
            <div class="status-disconnected">
                <i class="fas fa-times-circle"></i>
                <span>Not connected to QuickBooks</span>
            </div>
            {% endif %}
        </div>

        <div class="setup-actions">
            {% if not qb_connected %}
            <a href="{{ url_for('quickbooks_connect') }}" class="connect-btn">
                <i class="fas fa-plug"></i>
                Connect QuickBooks
            </a>
            {% else %}
            <div class="connected-actions">
                <a href="{{ url_for('quickbooks_test_connection') }}" class="test-btn">
                    <i class="fas fa-bolt"></i>
                    Test Connection
                </a>
                <a href="{{ url_for('index') }}" class="action-btn">
                    <i class="fas fa-arrow-left"></i>
                    Back to Converter
                </a>
                <a href="{{ url_for('quickbooks_disconnect') }}" class="disconnect-btn">
                    <i class="fas fa-unlink"></i>
                    Disconnect
                </a>
            </div>
            {% endif %}
        </div>

        <div class="quickbooks-info">
            <h3>📊 How it works:</h3>
            <ul>
                <li>Click "Connect QuickBooks" to authorize this app</li>
                <li>You'll be redirected to Intuit for authentication</li>
                <li>After connecting, convert PDFs to Excel as usual</li>
                <li>Use "Send to QuickBooks" button to import transactions</li>
                <li>Currently supports expense transactions (debits)</li>
                <li>Vendors are automatically created if they don't exist</li>
            </ul>

            <div class="note">
                <strong>Important:</strong> You need to register this app with Intuit Developer
                and get your own Client ID and Client Secret. Update them in config.py.
            </div>
        </div>
    </div>
</div>

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

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

.connection-status {
    margin: 2rem 0;
    text-align: center;
    padding: 1.5rem;
    border-radius: 10px;
    background: #f8f9fa;
}

.status-connected {
    color: #10b981;
}

.status-disconnected {
    color: #ef4444;
}

.connection-status small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.8;
}

.setup-actions {
    text-align: center;
    margin: 2rem 0;
}

.connect-btn {
    background: linear-gradient(135deg, #2CA01C, #1F7B15);
    color: white;
    padding: 1.2rem 2rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.connect-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(44, 160, 28, 0.3);
}

.connected-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.test-btn {
    background: #f59e0b;
    color: white;
}

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

.disconnect-btn {
    background: #ef4444;
    color: white;
}

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

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

.quickbooks-info h3 {
    margin-bottom: 1rem;
    color: #333;
}

.quickbooks-info ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.quickbooks-info li {
    padding: 0.5rem 0;
    color: #666;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.quickbooks-info li:before {
    content: "•";
    color: #4f46e5;
    font-weight: bold;
}

.note {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 1rem;
    color: #856404;
    font-size: 0.9rem;
}
</style>
{% endblock %}