<?php
require __DIR__ . '/config.php';
require __DIR__ . '/partials.php';

$connected = bb_is_connected();
$conn      = bb_get_connection();

// Is the demo actually configured? (Helps first-time users.)
$needsSetup = (BB_CLIENT_ID === 'YOUR_API_KEY' || BB_COOKIE_KEY === '');

bb_head('Overview', 'A working example of connecting a user account over OAuth and uploading a video through the API.');
?>

<?php if ($needsSetup): ?>
<div class="card" style="border-color:#fcd34d;background:#fffbeb;">
    <h2>⚙️ Finish setup first</h2>
    <p class="hint" style="margin-bottom:12px;">Open <code>config.php</code> and set these before the demo will run:</p>
    <ul class="steps">
        <li>Your <strong>API key &amp; secret</strong> (<code>BB_CLIENT_ID</code> / <code>BB_CLIENT_SECRET</code>).</li>
        <li>Your <strong>redirect URI</strong> (<code>BB_REDIRECT_URI</code>) — and register that exact URL with BentBox.</li>
        <li>A <strong>cookie key</strong> (<code>BB_COOKIE_KEY</code>): <code>php -r "echo base64_encode(random_bytes(32)).PHP_EOL;"</code></li>
    </ul>
    <p class="hint" style="margin:12px 0 0;">See <code>README.md</code> for the full walkthrough.</p>
</div>
<?php endif; ?>

<div class="card">
    <h2>How the integration works</h2>
    <p class="hint">Four steps. Your server holds the credentials; the browser never sees a token.</p>
    <ul class="steps">
        <li><strong>Connect</strong> — you send the user to BentBox's consent screen with your <code>client_id</code>, requested scopes, and a CSRF <code>state</code>.</li>
        <li><strong>Approve</strong> — the user signs in to BentBox and approves. BentBox redirects back to your <code>redirect_uri</code> with a short-lived <code>code</code>.</li>
        <li><strong>Exchange</strong> — your server swaps that <code>code</code> (plus your <code>client_secret</code>) for an <code>access_token</code> + <code>connection_id</code>, and stores them.</li>
        <li><strong>Upload</strong> — with the stored token you create video metadata, request a presigned URL, and upload the file.</li>
    </ul>
</div>

<div class="card">
    <h2>Connection</h2>
    <?php if ($connected): ?>
        <div class="status"><span class="dot on"></span> Connected to a BentBox account.</div>
        <div class="kv">
            <div class="k">User ID</div>      <div class="v"><?= htmlspecialchars($conn['user_id'] ?? '—') ?></div>
            <div class="k">Scopes</div>       <div class="v"><?= htmlspecialchars(implode(', ', $conn['scopes'] ?? [])) ?></div>
            <div class="k">Token expires</div><div class="v"><?php
                $left = ($conn['expires_at'] ?? 0) - time();
                echo $left > 0 ? 'in ' . round($left/3600, 1) . ' h' : 'expired (will auto-refresh)';
            ?></div>
        </div>
        <p class="hint" style="margin:18px 0 0;">The <code>access_token</code> and <code>connection_id</code> are stored encrypted in a cookie — not shown here on purpose.</p>
        <div style="margin-top:18px;display:flex;gap:10px;">
            <a class="btn" href="upload.php">Go to upload</a>
            <a class="btn ghost" href="#" id="disconnect">Disconnect</a>
        </div>
    <?php else: ?>
        <div class="status"><span class="dot off"></span> Not connected yet.</div>
        <p class="hint" style="margin:14px 0 18px;">Click below to run the OAuth flow. You'll be asked to approve access, then brought back here.</p>
        <a class="btn block" href="connect.php">Connect a BentBox account</a>
    <?php endif; ?>
</div>

<script>
document.getElementById('disconnect')?.addEventListener('click', async e => {
    e.preventDefault();
    await fetch('upload.php?action=disconnect');
    location.href = 'index.php';
});
</script>

<?php bb_foot();
