{% extends "base.html" %}

{% block content %}
<div class="debug-section">
    <div class="debug-card">
        <div class="card-header">
            <i class="fas fa-bug"></i>
            <h2>QuickBooks Connection Debug</h2>
            <p>Diagnosing connection issues with QuickBooks API</p>
        </div>

        <div class="debug-info">
            <div class="info-item">
                <strong>Realm ID:</strong> {{ realm_id }}
            </div>
            <div class="info-item">
                <strong>Access Token:</strong> {{ access_token_preview }}
            </div>
        </div>

        <div class="test-results">
            <h3>🔍 Test Results</h3>

            <div class="test-result {% if auth_success %}success{% else %}failed{% endif %}">
                <div class="test-icon">
                    {% if auth_success %}
                    <i class="fas fa-check-circle"></i>
                    {% else %}
                    <i class="fas fa-times-circle"></i>
                    {% endif %}
                </div>
                <div class="test-details">
                    <strong>Authentication Test</strong>
                    <p>{{ auth_message }}</p>
                </div>
            </div>

            <div class="test-result {% if token_valid %}success{% else %}failed{% endif %}">
                <div class="test-icon">
                    {% if token_valid %}
                    <i class="fas fa-check-circle"></i>
                    {% else %}
                    <i class="fas fa-times-circle"></i>
                    {% endif %}
                </div>
                <div class="test-details">
                    <strong>Token Validity</strong>
                    <p>{% if token_valid %}Token is valid and can make API calls{% else %}Token is invalid or expired{% endif %}</p>
                </div>
            </div>
        </div>

        <div class="troubleshooting">
            <h3>🔧 Common Solutions</h3>

            <div class="solution">
                <strong>Issue: Authentication Failed (401)</strong>
                <ul>
                    <li>✅ Check your Client ID and Client Secret in config.py</li>
                    <li>✅ Ensure you're using Sandbox credentials for testing</li>
                    <li>✅ Verify the redirect URI matches in Intuit Developer portal</li>
                    <li>✅ Make sure your app is published (not in development mode)</li>
                </ul>
            </div>

            <div class="solution">
                <strong>Issue: Token Expired</strong>
                <ul>
                    <li>✅ QuickBooks access tokens expire after 1 hour</li>
                    <li>✅ Use the reconnect button below to get a fresh token</li>
                    <li>✅ In production, implement token refresh logic</li>
                </ul>
            </div>

            <div class="solution">
                <strong>Issue: Wrong Environment</strong>
                <ul>
                    <li>✅ Use "sandbox" for testing with fake companies</li>
                    <li>✅ Use "production" for real company data</li>
                    <li>✅ Sandbox and Production have separate credentials</li>
                </ul>
            </div>
        </div>

        <div class="action-buttons">
            <a href="{{ url_for('quickbooks_reconnect') }}" class="reconnect-btn">
                <i class="fas fa-sync"></i>
                Reconnect to QuickBooks
            </a>
            <a href="{{ url_for('quickbooks_setup') }}" class="action-btn">
                <i class="fas fa-cog"></i>
                QuickBooks Settings
            </a>
            <a href="https://developer.intuit.com/app/developer/dashboard"
               target="_blank" class="developer-btn">
                <i class="fas fa-external-link-alt"></i>
                Intuit Developer Portal
            </a>
        </div>
    </div>
</div>

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

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

.debug-info {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    margin: 1.5rem 0;
}

.info-item {
    margin: 0.5rem 0;
    font-family: monospace;
}

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

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

.test-result {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border-left: 4px solid;
}

.test-result.success {
    background: #d1fae5;
    border-left-color: #10b981;
}

.test-result.failed {
    background: #fee2e2;
    border-left-color: #ef4444;
}

.test-icon {
    font-size: 2rem;
    margin-right: 1rem;
}

.test-result.success .test-icon {
    color: #10b981;
}

.test-result.failed .test-icon {
    color: #ef4444;
}

.test-details strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.troubleshooting {
    margin: 2rem 0;
}

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

.solution {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.solution strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #856404;
}

.solution ul {
    margin: 0.5rem 0 0 1.5rem;
    color: #856404;
}

.solution li {
    margin: 0.25rem 0;
}

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

.reconnect-btn, .action-btn, .developer-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;
}

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

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

.developer-btn {
    background: #2CA01C;
    color: white;
}

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