<?php
$apiKey = "PkTgjOzy5qbZXDm4eLdBMfRiAhZ0NwrGW7gK9WUdOqM4tDJEVQhvqFtzRnQcK2atJz0HAuUx3CSXTmTb113jelroHGNj0agwdanGMpwIxukN76Q9AJ8W9Ymos66nDBE3";
$account = "10015028";
$url = "https://www.hablame.co/api/utilities/v5/auth"; // endpoint de prueba

function performTest($url, $headers, $name)
{
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_TIMEOUT, 10);

    $response = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    $error = curl_error($ch);
    curl_close($ch);

    return [
        'name' => $name,
        'httpCode' => $httpCode,
        'response' => $response,
        'error' => $error,
        'headers' => $headers
    ];
}

$results = [];

// Intento 1: Headers 'account' y 'token'
$results[] = performTest($url, [
    'account: ' . $account,
    'token: ' . $apiKey,
    'Accept: application/json'
], "Intento 1: Cabeceras 'account' y 'token'");

// Intento 2: Headers 'account' y 'apiKey'
$results[] = performTest($url, [
    'account: ' . $account,
    'apiKey: ' . $apiKey,
    'Accept: application/json'
], "Intento 2: Cabeceras 'account' y 'apiKey'");

// Intento 3: Todo en minúscula (Suele ser case-insensitive pero por descartar)
$results[] = performTest($url, [
    'account: ' . $account,
    'apikey: ' . $apiKey,
    'Accept: application/json'
], "Intento 3: Cabeceras en minúscula ('account' y 'apikey')");

?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pruebas de Autenticación de Hablame API</title>
    <style>
        :root {
            --primary: #8E44AD;
            --success: #2ECC71;
            --error: #E74C3C;
            --dark: #34495E;
            --bg: #F4F6F7;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--bg);
            color: #333;
            margin: 0;
            padding: 40px 20px;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        .header {
            background-color: var(--primary);
            color: white;
            padding: 20px 30px;
            border-radius: 10px 10px 0 0;
            display: flex;
            align-items: center;
        }

        .header h1 {
            margin: 0;
            font-size: 1.4rem;
        }

        .test-card {
            background: white;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 25px;
            overflow: hidden;
            border-top: 1px solid #eee;
        }

        .test-header {
            padding: 15px 25px;
            background-color: #fcfcfc;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
        }

        .status-badge {
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .status-200 {
            background-color: rgba(46, 204, 113, 0.15);
            color: #27ae60;
        }

        .status-401 {
            background-color: rgba(231, 76, 60, 0.15);
            color: #c0392b;
        }

        .status-other {
            background-color: rgba(241, 196, 15, 0.2);
            color: #d35400;
        }

        .test-body {
            padding: 20px 25px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        @media (max-width: 768px) {
            .test-body {
                grid-template-columns: 1fr;
            }
        }

        .section-title {
            font-size: 0.85rem;
            text-transform: uppercase;
            color: #7f8c8d;
            margin-bottom: 8px;
            font-weight: bold;
            display: block;
        }

        .code-box {
            background-color: #2b2b2b;
            color: #a9b7c6;
            padding: 15px;
            border-radius: 6px;
            font-family: monospace;
            font-size: 0.9rem;
            margin: 0;
            white-space: pre-wrap;
            word-break: break-all;
        }

        .error-msg {
            color: var(--error);
            font-weight: bold;
        }

        .hint {
            background: #e8f4fd;
            border-left: 4px solid #3498db;
            padding: 15px;
            margin-bottom: 25px;
            border-radius: 4px;
            font-size: 0.95rem;
            line-height: 1.5;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="header">
            <h1>🔍 Pruebas de Diagnóstico - Autenticación API Hablame</h1>
        </div>

        <div style="background: white; padding: 20px; border-left: 1px solid #eee; border-right: 1px solid #eee;">
            <div class="hint">
                <strong>Analizando el Error 401</strong><br>
                La API requiere cabeceras específicas. Se han realizado diferentes combinaciones de peticiones usando el
                Token <code><?php echo substr($apiKey, 0, 10) . '...'; ?></code> y Account
                <code><?php echo $account; ?></code> para intentar identificar el formato correcto.
            </div>
        </div>

        <?php foreach ($results as $result): ?>
        <?php
    $statusClass = 'status-other';
    if ($result['httpCode'] == 200)
        $statusClass = 'status-200';
    elseif ($result['httpCode'] == 401)
        $statusClass = 'status-401';
?>
        <div class="test-card">
            <div class="test-header">
                <span>
                    <?php echo htmlspecialchars($result['name']); ?>
                </span>
                <span class="status-badge <?php echo $statusClass; ?>">
                    HTTP
                    <?php echo $result['httpCode'] ?: 'ERROR CLI'; ?>
                </span>
            </div>
            <div class="test-body">
                <div>
                    <span class="section-title">Cabeceras Enviadas (Request Headers)</span>
                    <pre class="code-box"><?php echo htmlspecialchars(implode("\n", $result['headers'])); ?></pre>
                </div>
                <div>
                    <span class="section-title">Respuesta de la API (Response Body)</span>
                    <?php if ($result['error']): ?>
                    <div class="error-msg">Error cURL:
                        <?php echo htmlspecialchars($result['error']); ?>
                    </div>
                    <?php
    else: ?>
                    <?php
        $decoded = json_decode($result['response'], true);
        $formattedResponse = $decoded ? json_encode($decoded, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) : $result['response'];
?>
                    <pre class="code-box"><?php echo htmlspecialchars($formattedResponse); ?></pre>
                    <?php
    endif; ?>
                </div>
            </div>
        </div>
        <?php
endforeach; ?>
    </div>

</body>

</html>