<div class="sa-page-header">
    <div>
        <h1 class="sa-page-title">Paystack Settings</h1>
        <div class="sa-page-subtitle">Configure payment gateway settings for the platform</div>
    </div>
</div>

<div class="sa-grid" style="grid-template-columns: 1fr 1fr; gap: 1.5rem;">
    <!-- Test Environment Settings -->
    <div class="sa-card">
        <div class="sa-card-header">
            <h3 class="sa-card-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px; color: var(--sa-info);">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="12" y1="8" x2="12" y2="12"></line>
                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
                Test Environment
            </h3>
            <span class="badge-sa badge-info" style="font-size: 0.7rem;">Sandbox Mode</span>
        </div>
        <form method="POST" action="<?= APP_URL ?>/superadmin/paystack/update" class="sa-form">
            <?= Security::csrfField() ?>
            <input type="hidden" name="environment" value="test">
            
            <div class="sa-form-group">
                <label class="sa-form-label">Test Public Key</label>
                <div class="sa-input-group">
                    <span class="sa-input-prefix">pk_test_</span>
                    <input type="text" name="test_public_key" class="sa-input" 
                           value="<?= e($paystackSettings['test']['public_key'] ?? '') ?>" 
                           placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                </div>
                <div class="sa-form-hint">Starts with pk_test_ from Paystack dashboard</div>
            </div>

            <div class="sa-form-group">
                <label class="sa-form-label">Test Secret Key</label>
                <div class="sa-input-group">
                    <span class="sa-input-prefix">sk_test_</span>
                    <input type="password" name="test_secret_key" class="sa-input" 
                           value="<?= e($paystackSettings['test']['secret_key'] ?? '') ?>" 
                           placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                </div>
                <div class="sa-form-hint">Starts with sk_test_ from Paystack dashboard</div>
            </div>

            <div class="sa-form-group">
                <label class="sa-form-label">Test Callback URL</label>
                <input type="text" name="test_callback_url" class="sa-input" readonly
                       value="<?= APP_URL ?>/billing/callback">
                <div class="sa-form-hint">Automatically generated - use this in Paystack dashboard</div>
            </div>

            <div class="sa-form-group">
                <label class="sa-form-label">Test Webhook URL</label>
                <input type="text" name="test_webhook_url" class="sa-input" readonly
                       value="<?= APP_URL ?>/billing/webhook">
                <div class="sa-form-hint">Automatically generated - use this in Paystack dashboard</div>
            </div>

            <div class="sa-form-actions">
                <button type="submit" class="btn btn-primary">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                    </svg>
                    Save Test Settings
                </button>
            </div>
        </form>
    </div>

    <!-- Live Environment Settings -->
    <div class="sa-card">
        <div class="sa-card-header">
            <h3 class="sa-card-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px; color: var(--sa-success);">
                    <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Live Environment
            </h3>
            <span class="badge-sa badge-success" style="font-size: 0.7rem;">Production</span>
        </div>
        <form method="POST" action="<?= APP_URL ?>/superadmin/paystack/update" class="sa-form">
            <?= Security::csrfField() ?>
            <input type="hidden" name="environment" value="live">
            
            <div class="sa-form-group">
                <label class="sa-form-label">Live Public Key</label>
                <div class="sa-input-group">
                    <span class="sa-input-prefix">pk_live_</span>
                    <input type="text" name="live_public_key" class="sa-input" 
                           value="<?= e($paystackSettings['live']['public_key'] ?? '') ?>" 
                           placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                </div>
                <div class="sa-form-hint">Starts with pk_live_ from Paystack dashboard</div>
            </div>

            <div class="sa-form-group">
                <label class="sa-form-label">Live Secret Key</label>
                <div class="sa-input-group">
                    <span class="sa-input-prefix">sk_live_</span>
                    <input type="password" name="live_secret_key" class="sa-input" 
                           value="<?= e($paystackSettings['live']['secret_key'] ?? '') ?>" 
                           placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                </div>
                <div class="sa-form-hint">Starts with sk_live_ from Paystack dashboard</div>
            </div>

            <div class="sa-form-group">
                <label class="sa-form-label">Live Callback URL</label>
                <input type="text" name="live_callback_url" class="sa-input" readonly
                       value="<?= APP_URL ?>/billing/callback">
                <div class="sa-form-hint">Automatically generated - use this in Paystack dashboard</div>
            </div>

            <div class="sa-form-group">
                <label class="sa-form-label">Live Webhook URL</label>
                <input type="text" name="live_webhook_url" class="sa-input" readonly
                       value="<?= APP_URL ?>/billing/webhook">
                <div class="sa-form-hint">Automatically generated - use this in Paystack dashboard</div>
            </div>

            <div class="sa-form-actions">
                <button type="submit" class="btn btn-success">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    Save Live Settings
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Global Settings -->
<div class="sa-card" style="margin-top: 1.5rem;">
    <div class="sa-card-header">
        <h3 class="sa-card-title">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px;">
                <circle cx="12" cy="12" r="3"></circle>
                <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"></path>
            </svg>
            Global Settings
        </h3>
    </div>
    <form method="POST" action="<?= APP_URL ?>/superadmin/paystack/update-global" class="sa-form">
        <?= Security::csrfField() ?>
        
        <div class="sa-grid" style="grid-template-columns: 1fr 1fr; gap: 1.5rem;">
            <div class="sa-form-group">
                <label class="sa-form-label">Active Environment</label>
                <select name="environment" class="sa-select">
                    <option value="test" <?= ($paystackSettings['environment'] ?? 'test') === 'test' ? 'selected' : '' ?>>
                        Test Mode (Sandbox)
                    </option>
                    <option value="live" <?= ($paystackSettings['environment'] ?? 'test') === 'live' ? 'selected' : '' ?>>
                        Live Mode (Production)
                    </option>
                </select>
                <div class="sa-form-hint">Choose which environment to use for payments</div>
            </div>

            <div class="sa-form-group">
                <label class="sa-form-label">Default Currency</label>
                <select name="currency" class="sa-select">
                    <option value="NGN" <?= ($paystackSettings['currency'] ?? 'NGN') === 'NGN' ? 'selected' : '' ?>>
                        Nigerian Naira (NGN)
                    </option>
                    <option value="USD" <?= ($paystackSettings['currency'] ?? 'NGN') === 'USD' ? 'selected' : '' ?>>
                        US Dollar (USD)
                    </option>
                    <option value="GHS" <?= ($paystackSettings['currency'] ?? 'NGN') === 'GHS' ? 'selected' : '' ?>>
                        Ghana Cedi (GHS)
                    </option>
                </select>
                <div class="sa-form-hint">Currency for all transactions</div>
            </div>
        </div>

        <div class="sa-form-actions">
            <button type="submit" class="btn btn-primary">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                    <path d="M5 13l4 4L19 7"></path>
                </svg>
                Update Global Settings
            </button>
        </div>
    </form>
</div>

<!-- Connection Status -->
<div class="sa-grid" style="grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem;">
    <div class="sa-card">
        <div class="sa-card-header">
            <h3 class="sa-card-title">Test Connection Status</h3>
        </div>
        <div class="sa-connection-status">
            <div class="sa-status-item">
                <div class="sa-status-indicator <?= !empty($paystackSettings['test']['public_key']) ? 'status-success' : 'status-danger' ?>"></div>
                <div>
                    <div class="sa-status-title">API Keys Configured</div>
                    <div class="sa-status-desc"><?= !empty($paystackSettings['test']['public_key']) ? 'Test keys are properly set' : 'Test keys not configured' ?></div>
                </div>
            </div>
            <div class="sa-status-item">
                <div class="sa-status-indicator status-info"></div>
                <div>
                    <div class="sa-status-title">Webhook URL</div>
                    <div class="sa-status-desc"><?= APP_URL ?>/billing/webhook</div>
                </div>
            </div>
        </div>
    </div>

    <div class="sa-card">
        <div class="sa-card-header">
            <h3 class="sa-card-title">Live Connection Status</h3>
        </div>
        <div class="sa-connection-status">
            <div class="sa-status-item">
                <div class="sa-status-indicator <?= !empty($paystackSettings['live']['public_key']) ? 'status-success' : 'status-danger' ?>"></div>
                <div>
                    <div class="sa-status-title">API Keys Configured</div>
                    <div class="sa-status-desc"><?= !empty($paystackSettings['live']['public_key']) ? 'Live keys are properly set' : 'Live keys not configured' ?></div>
                </div>
            </div>
            <div class="sa-status-item">
                <div class="sa-status-indicator <?= ($paystackSettings['environment'] ?? 'test') === 'live' ? 'status-success' : 'status-warning' ?>"></div>
                <div>
                    <div class="sa-status-title">Current Mode</div>
                    <div class="sa-status-desc"><?= ucfirst($paystackSettings['environment'] ?? 'test') ?> mode active</div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.sa-input-group {
    display: flex;
    align-items: center;
}

.sa-input-prefix {
    background: var(--sa-bg-surface);
    border: 1px solid var(--sa-border);
    padding: 0.75rem;
    border-right: none;
    border-radius: 0.375rem 0 0 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sa-text-muted);
}

.sa-input-group .sa-input {
    border-radius: 0 0.375rem 0.375rem 0;
    flex: 1;
}

.sa-connection-status {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sa-status-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--sa-bg-surface);
    border-radius: 0.5rem;
}

.sa-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-success {
    background: #10b981;
}

.status-danger {
    background: #ef4444;
}

.status-warning {
    background: #f59e0b;
}

.status-info {
    background: #3b82f6;
}

.sa-status-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--sa-text);
}

.sa-status-desc {
    font-size: 0.75rem;
    color: var(--sa-text-muted);
}
</style>
