index.php

<?php

declare(strict_types=1);

/**
 * Main application dashboard and controller.
 * Coordinates route parsing, API request dispatching, session state caching,
 * and renders the frontend HTML view with timing charts.
 *
 * @author Shubham Upadhyay
 * @since 26/07/2026
 */

// Start session to store GitHub Auth token and cache last results for CSV exports
session_start();

// Generate a cryptographically secure CSRF token if one does not exist
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// Autoload Composer dependencies (PSR-4 class mappings)
require_once __DIR__ . '/vendor/autoload.php';

use App\Client\GitHubClient;
use App\Fetcher\SequentialFetcher;
use App\Fetcher\ParallelFetcher;
use App\Util\UsernameCleaner;
use App\Exporter\CsvExporter;

/**
 * Route: AJAX Proxy Endpoint for fetching a user's repositories.
 * Serves repo lists client-side without CORS blocks, while forwarding the user's
 * Personal Access Token (PAT) session credential if defined.
 */
if (isset($_GET['action']) && $_GET['action'] === 'repos' && isset($_GET['username'])) {
    header('Content-Type: application/json');
    $username = trim($_GET['username']);
    $token = $_SESSION['github_token'] ?? null;
    
    // Request first 30 repositories for the specified user
    $url = "https://api.github.com/users/" . urlencode($username) . "/repos?per_page=30";
    $client = new GitHubClient($token);
    $ch = $client->createHandle($url);
    
    if (!$ch) {
        echo json_encode(['error' => 'Failed to initialize request handle']);
        exit;
    }
    
    $response = curl_exec($ch);
    $headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);
    
    if ($httpCode !== 200) {
        echo json_encode(['error' => "GitHub API returned status {$httpCode}"]);
        exit;
    }
    
    // Extract body and echo back the raw JSON string from GitHub API
    $body = substr($response, $headerSize);
    echo $body;
    exit;
}

/**
 * Route: CSV Export download.
 * Generates and downloads a CSV report of the developer metrics from the last query.
 */
if (isset($_GET['action']) && $_GET['action'] === 'export') {
    $data = $_SESSION['last_results'] ?? [];
    if (empty($data)) {
        header('Location: index.php');
        exit;
    }
    
    $exporter = new CsvExporter();
    $exporter->export($data);
    exit;
}

// Initialize input variables and view states
$usernamesInput = '';
$githubToken = $_SESSION['github_token'] ?? '';
$results = null;
$timing = null;
$topFollower = null;

/**
 * Action: Handle form submissions.
 * Cleans the input usernames list, runs sequential baseline queries, runs parallel queries,
 * calculates performance differences, and identifies the developer spotlight.
 */
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $csrfToken = $_POST['csrf_token'] ?? '';
    if (empty($csrfToken) || !hash_equals($_SESSION['csrf_token'] ?? '', $csrfToken)) {
        http_response_code(403);
        die('Invalid CSRF token. Please refresh the page and try again.');
    }

    $usernamesInput = $_POST['usernames'] ?? '';
    $githubToken = $_POST['github_token'] ?? '';
    $_SESSION['github_token'] = $githubToken; // Cache token in session for subsequent requests
    
    // Parse raw input string into clean array of usernames
    $cleanedUsernames = UsernameCleaner::clean($usernamesInput);
    
    if (!empty($cleanedUsernames)) {
        $client = new GitHubClient($githubToken);

        // 1. Run sequential cURL requests as baseline reference
        $seqFetcher = new SequentialFetcher($client);
        $seqResult = $seqFetcher->fetch($cleanedUsernames);
        
        // 2. Run concurrent Multi-cURL requests to compare speed difference
        $parallelFetcher = new ParallelFetcher($client);
        $multiResult = $parallelFetcher->fetch($cleanedUsernames);
        
        $results = $multiResult['results'];
        $_SESSION['last_results'] = $results; // Save query results in session for export
        
        // 3. Compute relative execution times and speed multiplier
        $timing = [
            'sequential' => $seqResult['time'],
            'multi' => $multiResult['time'],
            'speedup' => $multiResult['time'] > 0 ? $seqResult['time'] / $multiResult['time'] : 0
        ];
        
        // 4. Identify developer with the largest audience for spotlight banner
        $maxFollowers = -1;
        foreach ($results as $user) {
            if ($user['success'] && $user['followers'] > $maxFollowers) {
                $maxFollowers = $user['followers'];
                $topFollower = $user;
            }
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub User Viewer - PHP Multi-cURL</title>
    <link rel="stylesheet" href="assets/style.css">
</head>
<body>
    <div class="container">
        <!-- Application Header -->
        <header>
            <div class="brand">
                <div class="brand-icon">⌘</div>
                <div class="brand-text">
                    <h1>GitHub User Viewer</h1>
                    <p>Performance-driven parallel API integration using PHP Multi-cURL</p>
                </div>
            </div>
            <div>
                <a href="https://github.com" target="_blank" class="github-link">
                    <svg height="16" viewBox="0 0 16 16" width="16" fill="currentColor">
                        <path d="M8 0c4.42 0 8 3.58 8 8 0 3.54-2.29 6.53-5.47 7.59-.4.07-.55-.17-.55-.38 0-.19.01-.82.01-1.49 2.01.37 2.53-.49 2.69-.94.09-.23.48-.94.82-1.13.28-.15.68-.52.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
                    </svg>
                    <span>GitHub API</span>
                </a>
            </div>
        </header>

        <!-- Search Input Card -->
        <section class="card">
            <h2 class="form-title">Retrieve GitHub Profiles</h2>
            <p class="form-subtitle">Enter multiple usernames to query GitHub concurrently and analyze speed comparison metrics.</p>
            
            <form action="index.php" method="POST" id="search-form">
                <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token'] ?? '') ?>">
                <div class="input-group">
                    <div class="textarea-wrapper">
                        <textarea 
                            name="usernames" 
                            placeholder="Enter usernames separated by commas, spaces, or new lines... (e.g. octocat, torvalds, gaearon, tj)" 
                            required><?= htmlspecialchars($usernamesInput) ?></textarea>
                    </div>
                    
                    <div class="token-row">
                        <div class="input-field">
                            <label for="github_token">GitHub Personal Access Token (Optional)</label>
                            <input 
                                type="password" 
                                id="github_token" 
                                name="github_token" 
                                value="<?= htmlspecialchars($githubToken) ?>" 
                                placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxx">
                            <p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem;">
                                Increases unauthenticated rate limit (60 req/hr) up to 5,000 req/hr.
                            </p>
                        </div>
                    </div>

                    <div class="btn-container">
                        <?php if ($results): ?>
                            <a href="index.php" class="btn btn-secondary">Clear Results</a>
                        <?php endif; ?>
                        <button type="submit" class="btn btn-primary" id="btn-submit">
                            ⚡ Fetch & Compare
                        </button>
                    </div>
                </div>
            </form>
        </section>

        <!-- Results & Metrics -->
        <?php if ($results && $timing): ?>
            <!-- Timing metrics section -->
            <section class="metrics-grid">
                <!-- Sequential Timing Card -->
                <div class="metric-card seq">
                    <div>
                        <div class="metric-label">Sequential cURL</div>
                        <div class="metric-value"><?= number_format($timing['sequential'], 3) ?>s</div>
                    </div>
                    <div class="metric-desc">Fetched profiles one by one sequentially.</div>
                </div>

                <!-- Multi-cURL Timing Card -->
                <div class="metric-card multi">
                    <div>
                        <div class="metric-label">PHP Multi-cURL</div>
                        <div class="metric-value"><?= number_format($timing['multi'], 3) ?>s</div>
                    </div>
                    <div class="metric-desc">Fetched profiles in parallel concurrently.</div>
                </div>

                <!-- Speed Comparison Card -->
                <div class="metric-card compare">
                    <div>
                        <div class="metric-label">Performance Speedup</div>
                        <div class="metric-value">
                            <?= $timing['speedup'] > 0 ? number_format($timing['speedup'], 2) . 'x' : '0x' ?>
                        </div>
                    </div>
                    <div>
                        <div class="metric-desc">Multi-cURL executed <?= number_format($timing['speedup'], 1) ?> times faster!</div>
                        
                        <!-- Visual Horizontal Chart -->
                        <div class="viz-container">
                            <?php 
                                $maxVal = max($timing['sequential'], $timing['multi']);
                                $seqPercent = $maxVal > 0 ? ($timing['sequential'] / $maxVal) * 100 : 0;
                                $multiPercent = $maxVal > 0 ? ($timing['multi'] / $maxVal) * 100 : 0;
                            ?>
                            <div class="viz-row">
                                <span class="viz-name">Sequential</span>
                                <div class="viz-track">
                                    <div class="viz-bar seq" style="width: <?= $seqPercent ?>%"></div>
                                </div>
                                <span class="viz-time"><?= number_format($timing['sequential'], 2) ?>s</span>
                            </div>
                            <div class="viz-row">
                                <span class="viz-name">Multi-cURL</span>
                                <div class="viz-track">
                                    <div class="viz-bar multi" style="width: <?= $multiPercent ?>%"></div>
                                </div>
                                <span class="viz-time"><?= number_format($timing['multi'], 2) ?>s</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Top Follower Spotlight Banner -->
            <?php if ($topFollower): ?>
                <div class="top-follower-banner">
                    <div class="tf-info">
                        <span class="tf-badge">Top Followed</span>
                        <div class="tf-user">
                            <img src="<?= htmlspecialchars($topFollower['avatar_url']) ?>" class="tf-avatar" alt="">
                            <span class="tf-name"><?= htmlspecialchars($topFollower['name']) ?></span>
                        </div>
                    </div>
                    <div class="tf-stats">
                        Developer has <strong><?= number_format($topFollower['followers']) ?></strong> followers and <strong><?= number_format($topFollower['public_repos']) ?></strong> public repositories.
                    </div>
                </div>
            <?php endif; ?>

            <!-- Dashboard Data Table Card -->
            <section class="card" style="padding-top: 1.5rem;">
                <div class="table-header-row">
                    <h2 class="table-title">Developer Directory</h2>
                    <div class="table-actions">
                        <a href="index.php?action=export" class="btn btn-secondary" style="padding: 0.5rem 1rem; font-size: 0.85rem;">
                            📥 Export CSV Report
                        </a>
                    </div>
                </div>

                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>Developer Info</th>
                                <th>Followers</th>
                                <th>Following</th>
                                <th>Repositories</th>
                                <th>Bio & Location</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($results as $username => $user): ?>
                                <tr data-username="<?= htmlspecialchars($username) ?>">
                                    <?php if ($user['success']): ?>
                                        <td>
                                            <div class="td-user">
                                                <img src="<?= htmlspecialchars($user['avatar_url']) ?>" class="user-avatar" alt="">
                                                <div class="user-names">
                                                    <span class="user-realname"><?= htmlspecialchars($user['name']) ?></span>
                                                    <a href="<?= htmlspecialchars($user['html_url']) ?>" target="_blank" class="user-username">
                                                        @<?= htmlspecialchars($user['username']) ?>
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge followers"><?= number_format($user['followers']) ?></span>
                                        </td>
                                        <td>
                                            <span class="badge following"><?= number_format($user['following']) ?></span>
                                        </td>
                                        <td>
                                            <span class="badge repos"><?= number_format($user['public_repos']) ?></span>
                                        </td>
                                        <td>
                                            <div class="td-bio" title="<?= htmlspecialchars($user['bio']) ?>">
                                                <?= htmlspecialchars($user['bio']) ?>
                                            </div>
                                            <span style="font-size: 0.75rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">
                                                📍 <?= htmlspecialchars($user['location']) ?> | 🏢 <?= htmlspecialchars($user['company']) ?>
                                            </span>
                                        </td>
                                        <td>
                                            <div class="action-buttons">
                                                <button class="btn-icon btn-compare-add" onclick="initiateCompare('<?= htmlspecialchars($username) ?>')" title="Compare User">
                                                    ⚖️
                                                </button>
                                                <button class="btn-icon" onclick="viewRepositories('<?= htmlspecialchars($username) ?>')" title="View Repositories">
                                                    📂
                                                </button>
                                            </div>
                                        </td>
                                    <?php else: ?>
                                        <td>
                                            <div class="td-user">
                                                <div class="user-avatar" style="display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: bold; color: var(--text-muted);">
                                                    ?
                                                </div>
                                                <div class="user-names">
                                                    <span class="user-realname"><?= htmlspecialchars($username) ?></span>
                                                    <span class="user-username">@<?= htmlspecialchars($username) ?></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td colspan="4">
                                            <span class="badge error-tag">Error: <?= htmlspecialchars($user['error']) ?></span>
                                        </td>
                                        <td>-</td>
                                    <?php endif; ?>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </section>

            <!-- Inject fetched user data for client-side comparison features -->
            <script>
                const githubUsersData = <?= json_encode($results) ?>;
            </script>

        <?php elseif ($_SERVER['REQUEST_METHOD'] === 'POST'): ?>
            <!-- Error / Empty State for empty usernames -->
            <section class="card">
                <div class="empty-state">
                    <div class="empty-state-icon">⚠️</div>
                    <h3>No Usernames Found</h3>
                    <p>Please enter one or more valid GitHub usernames to run the comparison.</p>
                </div>
            </section>
        <?php else: ?>
            <!-- Default Welcome State -->
            <section class="card">
                <div class="empty-state">
                    <div class="empty-state-icon">⚡</div>
                    <h3>Ready to Compare</h3>
                    <p>Enter developer usernames above to fetch their profile details in parallel and compare timings.</p>
                </div>
            </section>
        <?php endif; ?>
    </div>

    <!-- Repository Listing Modal -->
    <div class="overlay" id="repo-modal">
        <div class="modal-card">
            <div class="modal-header">
                <h3 id="repo-modal-title" style="font-family: 'Outfit', sans-serif;">Repositories</h3>
                <button class="modal-close" onclick="closeModal('repo-modal')">&times;</button>
            </div>
            <div id="repo-list-container">
                <!-- Dynamically populated -->
            </div>
        </div>
    </div>

    <!-- Developer Comparison Modal -->
    <div class="overlay" id="compare-modal">
        <div class="modal-card" style="max-width: 750px;">
            <div class="modal-header">
                <h3 style="font-family: 'Outfit', sans-serif;">Developer Comparison</h3>
                <button class="modal-close" onclick="closeModal('compare-modal')">&times;</button>
            </div>
            <div id="compare-content">
                <!-- Dynamically populated -->
            </div>
        </div>
    </div>

    <script src="assets/script.js"></script>
</body>
</html>