<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Credo SDK - Debug Interface</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        // Terracotta/Earthy color palette
                        terra: {
                            50: '#fdf8f6',
                            100: '#f9ebe5',
                            200: '#f3d5c8',
                            300: '#e9b8a3',
                            400: '#dc9275',
                            500: '#c97553',
                            600: '#b85e3f',
                            700: '#994c34',
                            800: '#7d4030',
                            900: '#67382c',
                            950: '#381b15',
                        },
                        sage: {
                            50: '#f6f7f4',
                            100: '#e3e7dc',
                            200: '#c8d1ba',
                            300: '#a5b491',
                            400: '#839770',
                            500: '#657a54',
                            600: '#4f6141',
                            700: '#3f4d35',
                            800: '#353f2e',
                            900: '#2e3628',
                            950: '#181d14',
                        },
                        clay: {
                            50: '#faf8f7',
                            100: '#f3efec',
                            200: '#e5ddd6',
                            300: '#d3c5b9',
                            400: '#bda697',
                            500: '#a98b79',
                            600: '#9a7768',
                            700: '#806257',
                            800: '#6a524a',
                            900: '#59453f',
                            950: '#2f2320',
                        }
                    }
                }
            }
        }
    </script>
    
    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    
    <style>
        .htmx-indicator {
            display: none;
        }
        .htmx-request .htmx-indicator {
            display: inline-flex;
        }
        .htmx-request.htmx-indicator {
            display: inline-flex;
        }
        
        /* Spinner animation */
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .animate-spin {
            animation: spin 1s linear infinite;
        }
        
        /* Fade in animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in {
            animation: fadeIn 0.3s ease-out;
        }
        
        /* Code block styling */
        pre {
            background: #1e1e1e;
            border-radius: 0.5rem;
            padding: 1rem;
            overflow-x: auto;
        }
        code {
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.875rem;
            color: #d4d4d4;
        }
    </style>
</head>

<body class="bg-terra-50 min-h-screen">
    <!-- Header -->
    <header class="bg-terra-800 text-terra-50 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 py-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold">Credo SDK Debug Interface</h1>
                    <p class="text-terra-200 text-sm mt-1">Test and debug your payment integration</p>
                </div>
                <div class="flex items-center gap-4">
                    {% if is_sandbox %}
                    <span class="px-3 py-1 bg-sage-600 text-sage-50 rounded-full text-sm font-medium">
                        Sandbox Mode
                    </span>
                    {% else %}
                    <span class="px-3 py-1 bg-terra-600 text-terra-50 rounded-full text-sm font-medium">
                        Production Mode
                    </span>
                    {% endif %}
                </div>
            </div>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 py-8">
        <!-- Environment Banner -->
        {% if is_sandbox %}
        <div class="mb-6 bg-sage-100 border border-sage-300 rounded-lg p-4">
            <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-sage-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <div>
                    <h3 class="font-medium text-sage-800">Sandbox Environment</h3>
                    <p class="text-sage-700 text-sm">You're using test credentials. No real transactions will be processed.</p>
                </div>
            </div>
        </div>
        {% else %}
        <div class="mb-6 bg-terra-100 border border-terra-300 rounded-lg p-4">
            <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-terra-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                <div>
                    <h3 class="font-medium text-terra-800">Production Environment</h3>
                    <p class="text-terra-700 text-sm">You're using live credentials. Real transactions will be processed!</p>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Configuration Check Section -->
        <section class="mb-8 bg-white rounded-xl shadow-sm border border-clay-200 overflow-hidden">
            <div class="bg-clay-100 px-6 py-4 border-b border-clay-200">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-clay-900">Configuration Status</h2>
                    <button 
                        hx-get="{% url 'credo_pay:debug-config-check' %}"
                        hx-target="#config-check-result"
                        hx-indicator="#config-spinner"
                        class="px-4 py-2 bg-terra-600 text-white rounded-lg hover:bg-terra-700 transition-colors flex items-center gap-2"
                    >
                        <span id="config-spinner" class="htmx-indicator">
                            <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </span>
                        Check Configuration
                    </button>
                </div>
            </div>
            <div id="config-check-result" class="p-6">
                <p class="text-clay-600 text-center">Click "Check Configuration" to verify your settings</p>
            </div>
        </section>

        <div class="grid lg:grid-cols-2 gap-8">
            <!-- Initialize Payment Section -->
            <section class="bg-white rounded-xl shadow-sm border border-clay-200 overflow-hidden">
                <div class="bg-sage-100 px-6 py-4 border-b border-sage-200">
                    <h2 class="text-lg font-semibold text-sage-900">Initialize Payment</h2>
                    <p class="text-sage-700 text-sm mt-1">Test the payment initialization flow</p>
                </div>
                
                <form 
                    hx-post="{% url 'credo_pay:debug-initialize' %}"
                    hx-target="#payment-result"
                    hx-indicator="#payment-spinner"
                    class="p-6 space-y-4"
                >
                    {% csrf_token %}
                    
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-clay-700 mb-1">Amount (Kobo)</label>
                            <input 
                                type="number" 
                                name="amount" 
                                value="100000"
                                class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                                placeholder="e.g., 100000 for N1,000"
                            >
                            <p class="text-xs text-clay-500 mt-1">100000 = N1,000.00</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-clay-700 mb-1">Currency</label>
                            <select 
                                name="currency"
                                class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                            >
                                <option value="NGN" selected>NGN - Nigerian Naira</option>
                                <option value="USD">USD - US Dollar</option>
                                <option value="GHS">GHS - Ghanaian Cedi</option>
                            </select>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-clay-700 mb-1">Email *</label>
                        <input 
                            type="email" 
                            name="email" 
                            value="test@example.com"
                            required
                            class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                            placeholder="customer@example.com"
                        >
                    </div>
                    
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-clay-700 mb-1">First Name</label>
                            <input 
                                type="text" 
                                name="first_name"
                                class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                                placeholder="John"
                            >
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-clay-700 mb-1">Last Name</label>
                            <input 
                                type="text" 
                                name="last_name"
                                class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                                placeholder="Doe"
                            >
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-clay-700 mb-1">Phone Number</label>
                        <input 
                            type="tel" 
                            name="phone_number"
                            class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                            placeholder="2348012345678"
                        >
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-clay-700 mb-1">Callback URL</label>
                        <input 
                            type="url" 
                            name="callback_url"
                            value="{{ callback_url }}"
                            class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                            placeholder="https://yoursite.com/callback/"
                        >
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-clay-700 mb-2">Payment Channels</label>
                        <div class="flex gap-4">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="checkbox" name="channels" value="card" checked class="w-4 h-4 text-terra-600 border-clay-300 rounded focus:ring-terra-500">
                                <span class="text-sm text-clay-700">Card</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="checkbox" name="channels" value="bank" checked class="w-4 h-4 text-terra-600 border-clay-300 rounded focus:ring-terra-500">
                                <span class="text-sm text-clay-700">Bank</span>
                            </label>
                        </div>
                    </div>
                    
                    <button 
                        type="submit"
                        class="w-full py-3 bg-sage-600 text-white rounded-lg hover:bg-sage-700 transition-colors font-medium flex items-center justify-center gap-2"
                    >
                        <span id="payment-spinner" class="htmx-indicator">
                            <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </span>
                        Initialize Payment
                    </button>
                </form>
                
                <div id="payment-result" class="border-t border-clay-200"></div>
            </section>

            <!-- Verify Payment Section -->
            <section class="bg-white rounded-xl shadow-sm border border-clay-200 overflow-hidden">
                <div class="bg-terra-100 px-6 py-4 border-b border-terra-200">
                    <h2 class="text-lg font-semibold text-terra-900">Verify Payment</h2>
                    <p class="text-terra-700 text-sm mt-1">Check the status of a transaction</p>
                </div>
                
                <form 
                    hx-post="{% url 'credo_pay:debug-verify' %}"
                    hx-target="#verify-result"
                    hx-indicator="#verify-spinner"
                    class="p-6 space-y-4"
                >
                    {% csrf_token %}
                    
                    <div>
                        <label class="block text-sm font-medium text-clay-700 mb-1">Transaction Reference *</label>
                        <input 
                            type="text" 
                            name="reference"
                            required
                            class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                            placeholder="e.g., JunW00GkHm01vo0N96pk"
                        >
                        <p class="text-xs text-clay-500 mt-1">Enter the transRef from initialization response</p>
                    </div>
                    
                    <button 
                        type="submit"
                        class="w-full py-3 bg-terra-600 text-white rounded-lg hover:bg-terra-700 transition-colors font-medium flex items-center justify-center gap-2"
                    >
                        <span id="verify-spinner" class="htmx-indicator">
                            <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </span>
                        Verify Payment
                    </button>
                </form>
                
                <div id="verify-result" class="border-t border-clay-200"></div>
            </section>
        </div>

        <!-- Webhook Simulator Section -->
        <section class="mt-8 bg-white rounded-xl shadow-sm border border-clay-200 overflow-hidden">
            <div class="bg-clay-700 px-6 py-4 border-b border-clay-600">
                <h2 class="text-lg font-semibold text-white">Webhook Simulator</h2>
                <p class="text-clay-300 text-sm mt-1">Generate sample webhook payloads for testing</p>
            </div>
            
            <div class="p-6">
                <form 
                    hx-post="{% url 'credo_pay:debug-webhook' %}"
                    hx-target="#webhook-result"
                    hx-indicator="#webhook-spinner"
                    class="space-y-4"
                >
                    {% csrf_token %}
                    
                    <div class="grid sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-clay-700 mb-1">Event Type</label>
                            <select 
                                name="event_type"
                                class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                            >
                                <option value="transaction.successful">transaction.successful</option>
                                <option value="transaction.failed">transaction.failed</option>
                                <option value="transaction.settlement.success">transaction.settlement.success</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-clay-700 mb-1">Transaction Ref</label>
                            <input 
                                type="text" 
                                name="trans_ref"
                                value="TEST123456"
                                class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                            >
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-clay-700 mb-1">Amount (Kobo)</label>
                            <input 
                                type="number" 
                                name="amount"
                                value="100000"
                                class="w-full px-4 py-2 border border-clay-300 rounded-lg focus:ring-2 focus:ring-terra-500 focus:border-terra-500 bg-white"
                            >
                        </div>
                    </div>
                    
                    <button 
                        type="submit"
                        class="px-6 py-2 bg-clay-700 text-white rounded-lg hover:bg-clay-800 transition-colors font-medium flex items-center gap-2"
                    >
                        <span id="webhook-spinner" class="htmx-indicator">
                            <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </span>
                        Generate Webhook Payload
                    </button>
                </form>
                
                <div id="webhook-result" class="mt-4"></div>
            </div>
        </section>

        <!-- API Reference Section -->
        <section class="mt-8 bg-white rounded-xl shadow-sm border border-clay-200 overflow-hidden">
            <div class="bg-sage-800 px-6 py-4 border-b border-sage-700">
                <h2 class="text-lg font-semibold text-white">Quick API Reference</h2>
                <p class="text-sage-300 text-sm mt-1">Copy-paste code examples</p>
            </div>
            
            <div class="p-6 space-y-6">
                <!-- Python Example -->
                <div>
                    <h3 class="text-sm font-medium text-clay-700 mb-2 flex items-center gap-2">
                        <svg class="w-5 h-5 text-sage-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-.5 4.5h1c.828 0 1.5.672 1.5 1.5v1h-4V6c0-.828.672-1.5 1.5-1.5zM8 10h8v2H8v-2zm0 4h8v2H8v-2zm2 4h4v1.5c0 .828-.672 1.5-1.5 1.5h-1c-.828 0-1.5-.672-1.5-1.5V18z"/>
                        </svg>
                        Python - Initialize Payment
                    </h3>
                    <pre><code>from credo_pay import CredoClient

client = CredoClient()

response = client.initialize_payment(
    amount=100000,  # N1,000 in kobo
    email="customer@example.com",
    callback_url="https://yoursite.com/callback/",
    first_name="John",
    last_name="Doe"
)

# Redirect user to payment page
redirect_url = response.authorization_url</code></pre>
                </div>
                
                <!-- Verify Example -->
                <div>
                    <h3 class="text-sm font-medium text-clay-700 mb-2 flex items-center gap-2">
                        <svg class="w-5 h-5 text-terra-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                        </svg>
                        Python - Verify Payment
                    </h3>
                    <pre><code>response = client.verify_payment("JunW00GkHm01vo0N96pk")

if response.is_successful:
    print(f"Payment successful! Amount: {response.trans_amount}")
elif response.is_pending:
    print("Payment is still pending")
else:
    print(f"Payment failed: {response.status_description}")</code></pre>
                </div>
                
                <!-- Webhook Example -->
                <div>
                    <h3 class="text-sm font-medium text-clay-700 mb-2 flex items-center gap-2">
                        <svg class="w-5 h-5 text-clay-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </svg>
                        Python - Handle Webhook
                    </h3>
                    <pre><code>from credo_pay.views import WebhookView

class MyWebhookView(WebhookView):
    def handle_webhook_event(self, event):
        if event.is_successful:
            # Update order status
            Order.objects.filter(
                reference=event.business_ref
            ).update(status="paid")
            
        elif event.is_failed:
            # Handle failed payment
            Order.objects.filter(
                reference=event.business_ref
            ).update(status="failed")</code></pre>
                </div>
            </div>
        </section>

        <!-- Status Codes Reference -->
        <section class="mt-8 bg-white rounded-xl shadow-sm border border-clay-200 overflow-hidden">
            <div class="bg-terra-700 px-6 py-4 border-b border-terra-600">
                <h2 class="text-lg font-semibold text-white">Status Codes Reference</h2>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-clay-100">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-clay-600 uppercase tracking-wider">Code</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-clay-600 uppercase tracking-wider">Status</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-clay-600 uppercase tracking-wider">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-clay-200">
                        <tr>
                            <td class="px-4 py-3"><span class="px-2 py-1 bg-sage-100 text-sage-800 rounded text-sm font-mono">0</span></td>
                            <td class="px-4 py-3 font-medium text-sage-700">Successful</td>
                            <td class="px-4 py-3 text-clay-600 text-sm">Transaction completed successfully</td>
                        </tr>
                        <tr class="bg-clay-50">
                            <td class="px-4 py-3"><span class="px-2 py-1 bg-terra-100 text-terra-800 rounded text-sm font-mono">3</span></td>
                            <td class="px-4 py-3 font-medium text-terra-700">Failed</td>
                            <td class="px-4 py-3 text-clay-600 text-sm">Transaction failed</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3"><span class="px-2 py-1 bg-clay-100 text-clay-800 rounded text-sm font-mono">4</span></td>
                            <td class="px-4 py-3 font-medium text-clay-700">Settle</td>
                            <td class="px-4 py-3 text-clay-600 text-sm">Successful, queued for settlement</td>
                        </tr>
                        <tr class="bg-clay-50">
                            <td class="px-4 py-3"><span class="px-2 py-1 bg-sage-100 text-sage-800 rounded text-sm font-mono">5</span></td>
                            <td class="px-4 py-3 font-medium text-sage-700">Settled</td>
                            <td class="px-4 py-3 text-clay-600 text-sm">Successfully settled</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3"><span class="px-2 py-1 bg-terra-100 text-terra-800 rounded text-sm font-mono">7</span></td>
                            <td class="px-4 py-3 font-medium text-terra-700">Declined</td>
                            <td class="px-4 py-3 text-clay-600 text-sm">Failed fraud check</td>
                        </tr>
                        <tr class="bg-clay-50">
                            <td class="px-4 py-3"><span class="px-2 py-1 bg-clay-100 text-clay-800 rounded text-sm font-mono">9</span></td>
                            <td class="px-4 py-3 font-medium text-clay-700">Abandoned</td>
                            <td class="px-4 py-3 text-clay-600 text-sm">Transaction abandoned after 24 hours</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3"><span class="px-2 py-1 bg-clay-100 text-clay-800 rounded text-sm font-mono">13</span></td>
                            <td class="px-4 py-3 font-medium text-clay-700">Attempted</td>
                            <td class="px-4 py-3 text-clay-600 text-sm">Customer attempted payment</td>
                        </tr>
                        <tr class="bg-clay-50">
                            <td class="px-4 py-3"><span class="px-2 py-1 bg-clay-100 text-clay-800 rounded text-sm font-mono">14/15</span></td>
                            <td class="px-4 py-3 font-medium text-clay-700">Initializing</td>
                            <td class="px-4 py-3 text-clay-600 text-sm">Payment URL loaded/returned</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="mt-12 bg-clay-800 text-clay-300 py-6">
        <div class="max-w-7xl mx-auto px-4 text-center text-sm">
            <p>Credo SDK Debug Interface - For development and testing purposes only</p>
            <p class="mt-2 text-clay-500">
                API Base URL: <code class="bg-clay-700 px-2 py-0.5 rounded">{{ base_url }}</code>
            </p>
        </div>
    </footer>
</body>
</html>
