<?php
/**
 * APIX.php - Smart API Proxy, Masking & Endpoint Management Engine
 * 
 * Features:
 * - Secure Server-Side PIN Authentication (Never exposed in client JS/Inspect Element)
 * - Proxy Engine: Converts third-party APIs into your own custom endpoints
 * - Word Masking / Censorship: Automatically strips or replaces specified words from responses
 * - Masked Target URLs: Third-party URLs protected from plain view
 * - Integrated Live API Tester & Management Dashboard
 */

session_start();

// --- CONFIGURATION ---
// SHA-256 Hash of PIN '110011' (Double Zero Double One)
// Never stored in plain text or exposed to HTML/JS
define('APIX_PIN_HASH', '1875e9921945f51e3f39d59b252c6b741597333583ecab95adcdbc431f2c79a6'); // sha256('110011')
$data_file = __DIR__ . '/apix_data.json';

// Initialize data storage
if (!file_exists($data_file)) {
    file_put_contents($data_file, json_encode(['apis' => []], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES), LOCK_EX);
}

function get_apix_data() {
    global $data_file;
    if (!file_exists($data_file)) {
        return ['apis' => []];
    }
    $content = @file_get_contents($data_file);
    $json = json_decode($content, true);
    return is_array($json) ? $json : ['apis' => []];
}

function save_apix_data($data) {
    global $data_file;
    return @file_put_contents($data_file, json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES), LOCK_EX) !== false;
}

// Helper: Determine Current Base URL
function get_current_base_url() {
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || (isset($_SERVER['SERVER_PORT']) && $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
    $host = $_SERVER['HTTP_HOST'] ?? 'localhost';
    $script = $_SERVER['SCRIPT_NAME'] ?? '/APIX.php';
    return $protocol . $host . $script;
}

// =========================================================================
// 1. PUBLIC PROXY ENDPOINT HANDLER (Runs when 'api' or 'endpoint' is passed)
// =========================================================================
$requested_api = $_GET['api'] ?? $_GET['endpoint'] ?? $_POST['api'] ?? $_POST['endpoint'] ?? null;
if (!empty($requested_api)) {
    $query = $_GET['q'] ?? $_GET['query'] ?? $_GET['num'] ?? $_POST['q'] ?? $_POST['query'] ?? '';
    $data = get_apix_data();
    $slug = strtolower(trim($requested_api));

    if (!isset($data['apis'][$slug])) {
        header('Content-Type: application/json; charset=UTF-8');
        http_response_code(404);
        echo json_encode(['status' => false, 'error' => 'API endpoint not found.'], JSON_PRETTY_PRINT);
        exit;
    }

    $api_info = $data['apis'][$slug];
    if (empty($api_info['is_active'])) {
        header('Content-Type: application/json; charset=UTF-8');
        http_response_code(403);
        echo json_encode(['status' => false, 'error' => 'API endpoint is currently disabled.'], JSON_PRETTY_PRINT);
        exit;
    }

    $target_template = trim($api_info['target_url']);
    if (empty($target_template)) {
        header('Content-Type: application/json; charset=UTF-8');
        http_response_code(500);
        echo json_encode(['status' => false, 'error' => 'Target API URL is not configured.'], JSON_PRETTY_PRINT);
        exit;
    }

    // Build the target URL
    if (strpos($target_template, '{query}') !== false) {
        $final_url = str_replace('{query}', urlencode($query), $target_template);
    } elseif (strpos($target_template, '{value}') !== false) {
        $final_url = str_replace('{value}', urlencode($query), $target_template);
    } elseif (strpos($target_template, '{q}') !== false) {
        $final_url = str_replace('{q}', urlencode($query), $target_template);
    } else {
        // Append query parameter if template ends with = or ?
        if (substr($target_template, -1) === '=' || substr($target_template, -1) === '?') {
            $final_url = $target_template . urlencode($query);
        } else {
            $sep = (strpos($target_template, '?') !== false) ? '&' : '?';
            $final_url = $target_template . $sep . 'q=' . urlencode($query);
        }
    }

    // Perform Server-Side cURL Request (Hides third-party IP/domain completely)
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $final_url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 20);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 APIX/1.0');
    
    // Forward custom headers if needed
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        'Accept: application/json, text/plain, */*'
    ]);

    $raw_response = curl_exec($ch);
    $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    $content_type = curl_getinfo($ch, CURLINFO_CONTENT_TYPE);
    $curl_error = curl_error($ch);
    curl_close($ch);

    if ($raw_response === false) {
        // Fallback attempt with stream context
        $opts = [
            'http' => [
                'method' => 'GET',
                'timeout' => 20,
                'header' => "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)\r\nAccept: */*\r\n"
            ]
        ];
        $context = stream_context_create($opts);
        $stream_resp = @file_get_contents($final_url, false, $context);
        if ($stream_resp !== false) {
            $raw_response = $stream_resp;
        } else {
            $last_err = error_get_last();
            header('Content-Type: application/json; charset=UTF-8');
            http_response_code(502);
            echo json_encode([
                'status' => false, 
                'error' => 'Gateway error: Target server connection refused/blocked.',
                'curl_msg' => $curl_error,
                'stream_msg' => $last_err['message'] ?? 'Connection failed',
                'note' => 'Hosting server firewall may be blocking outgoing port 3000, or 56.124.98.201 is blocking hosting server IP (54.39.160.85).'
            ], JSON_PRETTY_PRINT);
            exit;
        }
    }

    // Apply "Hide Word" Filter / Masking
    $clean_response = $raw_response;
    $hide_words = $api_info['hide_words'] ?? [];
    $replace_with = $api_info['replace_with'] ?? '';

    if (!empty($hide_words) && is_array($hide_words)) {
        foreach ($hide_words as $word) {
            $word = trim($word);
            if ($word !== '') {
                // Case-insensitive word/pattern replacement
                $clean_response = str_ireplace($word, $replace_with, $clean_response);
            }
        }
    }

    // Track hit counter
    $data['apis'][$slug]['hits'] = ($data['apis'][$slug]['hits'] ?? 0) + 1;
    save_apix_data($data);

    // Set Response Headers
    if ($content_type) {
        header('Content-Type: ' . $content_type);
    } else {
        header('Content-Type: application/json; charset=UTF-8');
    }
    header('Access-Control-Allow-Origin: *');
    header('X-Powered-By: APIX-Engine');

    echo $clean_response;
    exit;
}

// =========================================================================
// 2. AUTHENTICATION & SESSION MANAGEMENT (PIN Verification)
// =========================================================================
$auth_error = '';

// Handle PIN Login
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'login') {
    $entered_pin = trim($_POST['pin'] ?? '');
    
    // Server-Side Hash Verification
    if (hash_equals(APIX_PIN_HASH, hash('sha256', $entered_pin))) {
        $_SESSION['apix_auth'] = true;
        $_SESSION['apix_login_time'] = time();
        header('Location: ' . $_SERVER['PHP_SELF']);
        exit;
    } else {
        $auth_error = 'गलत PIN (Incorrect PIN). कृपया पुनः प्रयास करें।';
    }
}

// Handle Logout
if (isset($_GET['action']) && $_GET['action'] === 'logout') {
    unset($_SESSION['apix_auth']);
    session_destroy();
    header('Location: ' . $_SERVER['PHP_SELF']);
    exit;
}

$is_authenticated = !empty($_SESSION['apix_auth']);

// =========================================================================
// 3. ADMIN ACTIONS (Only accessible when authenticated)
// =========================================================================
if ($is_authenticated && $_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';
    $data = get_apix_data();

    // Add New API
    if ($action === 'add_api') {
        $name = trim($_POST['api_name'] ?? '');
        $slug = strtolower(preg_replace('/[^a-zA-Z0-9_\-]/', '', trim($_POST['api_slug'] ?? '')));
        $target_url = trim($_POST['target_url'] ?? '');
        $hide_words_raw = trim($_POST['hide_words'] ?? '');
        $replace_with = trim($_POST['replace_with'] ?? '');

        if (empty($slug)) {
            $slug = 'api_' . substr(md5(time() . rand(100, 999)), 0, 6);
        }

        if (!empty($name) && !empty($target_url)) {
            $hide_words_array = [];
            if (!empty($hide_words_raw)) {
                $lines = preg_split('/[\r\n,]+/', $hide_words_raw);
                foreach ($lines as $l) {
                    $l = trim($l);
                    if ($l !== '') {
                        $hide_words_array[] = $l;
                    }
                }
            }

            $data['apis'][$slug] = [
                'id' => $slug,
                'name' => $name,
                'slug' => $slug,
                'target_url' => $target_url,
                'hide_words' => array_values(array_unique($hide_words_array)),
                'replace_with' => $replace_with,
                'is_active' => true,
                'hits' => 0,
                'created_at' => time()
            ];

            save_apix_data($data);
            $_SESSION['apix_flash'] = ['type' => 'success', 'msg' => "API '{$name}' सफलतापूर्वक जोड़ दी गई!"];
        } else {
            $_SESSION['apix_flash'] = ['type' => 'danger', 'msg' => 'API Name और Target URL दोनों अनिवार्य हैं।'];
        }
        header('Location: ' . $_SERVER['PHP_SELF']);
        exit;
    }

    // Edit Existing API
    if ($action === 'edit_api') {
        $slug = trim($_POST['api_slug'] ?? '');
        if (isset($data['apis'][$slug])) {
            $name = trim($_POST['api_name'] ?? '');
            $target_url = trim($_POST['target_url'] ?? '');
            $hide_words_raw = trim($_POST['hide_words'] ?? '');
            $replace_with = trim($_POST['replace_with'] ?? '');

            if (!empty($name) && !empty($target_url)) {
                $hide_words_array = [];
                if (!empty($hide_words_raw)) {
                    $lines = preg_split('/[\r\n,]+/', $hide_words_raw);
                    foreach ($lines as $l) {
                        $l = trim($l);
                        if ($l !== '') {
                            $hide_words_array[] = $l;
                        }
                    }
                }

                $data['apis'][$slug]['name'] = $name;
                $data['apis'][$slug]['target_url'] = $target_url;
                $data['apis'][$slug]['hide_words'] = array_values(array_unique($hide_words_array));
                $data['apis'][$slug]['replace_with'] = $replace_with;

                save_apix_data($data);
                $_SESSION['apix_flash'] = ['type' => 'success', 'msg' => "API '{$name}' सफलतापूर्वक अपडेट हो गई!"];
            }
        }
        header('Location: ' . $_SERVER['PHP_SELF']);
        exit;
    }

    // Delete API
    if ($action === 'delete_api') {
        $slug = trim($_POST['api_slug'] ?? '');
        if (isset($data['apis'][$slug])) {
            $name = $data['apis'][$slug]['name'];
            unset($data['apis'][$slug]);
            save_apix_data($data);
            $_SESSION['apix_flash'] = ['type' => 'success', 'msg' => "API '{$name}' डिलीट कर दी गई।"];
        }
        header('Location: ' . $_SERVER['PHP_SELF']);
        exit;
    }

    // Toggle Status
    if ($action === 'toggle_api') {
        $slug = trim($_POST['api_slug'] ?? '');
        if (isset($data['apis'][$slug])) {
            $data['apis'][$slug]['is_active'] = empty($data['apis'][$slug]['is_active']);
            save_apix_data($data);
            $status_txt = $data['apis'][$slug]['is_active'] ? 'सक्रिय (Active)' : 'निष्क्रिय (Disabled)';
            $_SESSION['apix_flash'] = ['type' => 'info', 'msg' => "API '{$data['apis'][$slug]['name']}' अब {$status_txt} है।"];
        }
        header('Location: ' . $_SERVER['PHP_SELF']);
        exit;
    }

    // AJAX Endpoint to safely fetch raw target URL for edit modal (Session protected)
    if ($action === 'get_api_details') {
        header('Content-Type: application/json; charset=UTF-8');
        $slug = trim($_POST['api_slug'] ?? '');
        if (isset($data['apis'][$slug])) {
            echo json_encode(['status' => true, 'api' => $data['apis'][$slug]]);
        } else {
            echo json_encode(['status' => false, 'error' => 'Not found']);
        }
        exit;
    }
}

// Flash messages
$flash = $_SESSION['apix_flash'] ?? null;
unset($_SESSION['apix_flash']);

$base_endpoint_url = get_current_base_url();
$data = get_apix_data();
$api_list = $data['apis'] ?? [];
$total_apis = count($api_list);
$active_apis = count(array_filter($api_list, function($item) { return !empty($item['is_active']); }));
$total_hits = array_sum(array_column($api_list, 'hits'));
?>
<!DOCTYPE html>
<html lang="hi">
<head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"6a9c024847b6ff1ddc188930"}};</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APIX Engine - Smart API Proxy & Masking Manager</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --bg-body: #090c10;
            --bg-card: rgba(16, 21, 30, 0.85);
            --bg-card-hover: rgba(22, 29, 41, 0.95);
            --border-color: rgba(56, 75, 102, 0.25);
            --border-glow: rgba(99, 102, 241, 0.4);
            --primary: #6366f1;
            --primary-light: #818cf8;
            --primary-glow: rgba(99, 102, 241, 0.35);
            --accent-cyan: #06b6d4;
            --accent-emerald: #10b981;
            --accent-rose: #f43f5e;
            --accent-amber: #f59e0b;
            --text-main: #f1f5f9;
            --text-muted: #94a3b8;
            --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: var(--bg-body);
            background-image: 
                radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.12) 0%, transparent 40%),
                radial-gradient(circle at 85% 85%, rgba(6, 182, 212, 0.1) 0%, transparent 40%),
                linear-gradient(180deg, #090c10 0%, #0d1117 100%);
            background-attachment: fixed;
            color: var(--text-main);
            font-family: var(--font-main);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* --- LOGIN WRAPPER --- */
        .login-wrap {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .login-card {
            background: var(--bg-card);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            width: 100%;
            max-width: 440px;
            padding: 40px 32px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 35px var(--primary-glow);
            text-align: center;
            position: relative;
            overflow: hidden;
            animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .login-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--accent-cyan), var(--primary-light));
        }

        .brand-icon {
            width: 72px;
            height: 72px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.2));
            border: 1px solid var(--border-glow);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: var(--primary-light);
            box-shadow: 0 10px 25px var(--primary-glow);
        }

        .brand-title {
            font-size: 26px;
            font-weight: 800;
            letter-spacing: -0.5px;
            background: linear-gradient(135deg, #ffffff 40%, var(--primary-light) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
        }

        .brand-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 28px;
        }

        .pin-input-wrap {
            position: relative;
            margin-bottom: 24px;
        }

        .pin-field {
            width: 100%;
            background: rgba(13, 17, 23, 0.9);
            border: 2px solid var(--border-color);
            border-radius: 14px;
            padding: 16px 20px;
            font-size: 28px;
            font-family: var(--font-mono);
            letter-spacing: 12px;
            text-align: center;
            color: #fff;
            transition: all 0.2s ease;
        }

        .pin-field:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px var(--primary-glow);
        }

        .btn-submit {
            width: 100%;
            padding: 16px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.2s ease;
            box-shadow: 0 10px 20px var(--primary-glow);
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 28px var(--primary-glow);
        }

        .btn-submit:active {
            transform: translateY(0);
        }

        /* --- DASHBOARD WRAPPER --- */
        .app-container {
            max-width: 1240px;
            margin: 0 auto;
            padding: 32px 20px 60px;
            width: 100%;
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 24px;
            background: var(--bg-card);
            backdrop-filter: blur(20px);
            border: 1px solid var(--border-color);
            border-radius: 18px;
            margin-bottom: 28px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        }

        .nav-brand {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .nav-logo {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            font-weight: 800;
            box-shadow: 0 6px 16px var(--primary-glow);
        }

        .nav-title {
            font-size: 20px;
            font-weight: 800;
            color: #fff;
            letter-spacing: -0.3px;
        }

        .nav-tag {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 3px 8px;
            border-radius: 6px;
            background: rgba(99, 102, 241, 0.2);
            border: 1px solid var(--border-glow);
            color: var(--primary-light);
            font-weight: 700;
            margin-left: 6px;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .btn-nav {
            padding: 10px 18px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
            cursor: pointer;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-main);
        }

        .btn-nav:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .btn-logout {
            color: var(--accent-rose);
            border-color: rgba(244, 63, 94, 0.3);
            background: rgba(244, 63, 94, 0.08);
        }

        .btn-logout:hover {
            background: rgba(244, 63, 94, 0.2);
            color: #fff;
        }

        /* --- STATS GRID --- */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 28px;
        }

        .stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 18px;
            padding: 22px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.2s;
        }

        .stat-card:hover {
            border-color: var(--border-glow);
            transform: translateY(-2px);
        }

        .stat-info h4 {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 6px;
        }

        .stat-info .stat-num {
            font-size: 28px;
            font-weight: 800;
            color: #fff;
            font-family: var(--font-mono);
        }

        .stat-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }

        .stat-icon.primary { background: rgba(99, 102, 241, 0.15); color: var(--primary-light); }
        .stat-icon.emerald { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); }
        .stat-icon.cyan { background: rgba(6, 182, 212, 0.15); color: var(--accent-cyan); }

        /* --- ACTION BAR --- */
        .action-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 22px;
            flex-wrap: wrap;
            gap: 14px;
        }

        .section-title {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
            color: #fff;
            border: none;
            padding: 12px 22px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
            box-shadow: 0 6px 18px var(--primary-glow);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px var(--primary-glow);
        }

        /* --- ALERT BANNER --- */
        .alert {
            padding: 14px 18px;
            border-radius: 12px;
            margin-bottom: 24px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .alert-success { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); color: #34d399; }
        .alert-danger { background: rgba(244, 63, 94, 0.12); border: 1px solid rgba(244, 63, 94, 0.3); color: #fb7185; }
        .alert-info { background: rgba(6, 182, 212, 0.12); border: 1px solid rgba(6, 182, 212, 0.3); color: #38bdf8; }

        /* --- APIS TABLE & CARDS --- */
        .api-card-grid {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .api-item {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 18px;
            padding: 24px;
            transition: all 0.2s ease;
            position: relative;
            backdrop-filter: blur(16px);
        }

        .api-item:hover {
            border-color: var(--border-glow);
            background: var(--bg-card-hover);
        }

        .api-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .api-title-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .api-title {
            font-size: 18px;
            font-weight: 700;
            color: #fff;
        }

        .badge-slug {
            font-family: var(--font-mono);
            font-size: 12px;
            padding: 4px 10px;
            background: rgba(99, 102, 241, 0.15);
            border: 1px solid var(--border-glow);
            border-radius: 8px;
            color: var(--primary-light);
            font-weight: 600;
        }

        .badge-status {
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .badge-status.active { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
        .badge-status.disabled { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }

        .api-content-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
            margin-bottom: 18px;
        }

        .url-box {
            background: rgba(10, 14, 20, 0.8);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
        }

        .url-label {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            min-width: 120px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .url-text {
            font-family: var(--font-mono);
            font-size: 13px;
            color: var(--accent-cyan);
            word-break: break-all;
            flex: 1;
        }

        .url-text.masked {
            letter-spacing: 2px;
            color: var(--text-muted);
        }

        .btn-copy {
            background: rgba(99, 102, 241, 0.15);
            border: 1px solid var(--border-glow);
            color: var(--primary-light);
            padding: 6px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .btn-copy:hover {
            background: var(--primary);
            color: #fff;
        }

        .tags-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .tag-hide {
            background: rgba(244, 63, 94, 0.12);
            border: 1px solid rgba(244, 63, 94, 0.3);
            color: #fb7185;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-family: var(--font-mono);
        }

        .api-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
            flex-wrap: wrap;
            gap: 12px;
        }

        .api-meta {
            font-size: 13px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .api-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-action {
            padding: 8px 14px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-main);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .btn-action:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
        }

        .btn-action.test {
            background: rgba(6, 182, 212, 0.15);
            border-color: rgba(6, 182, 212, 0.3);
            color: var(--accent-cyan);
        }

        .btn-action.test:hover {
            background: var(--accent-cyan);
            color: #000;
        }

        .btn-action.edit {
            background: rgba(245, 158, 11, 0.12);
            border-color: rgba(245, 158, 11, 0.3);
            color: var(--accent-amber);
        }

        .btn-action.edit:hover {
            background: var(--accent-amber);
            color: #000;
        }

        .btn-action.delete {
            background: rgba(244, 63, 94, 0.12);
            border-color: rgba(244, 63, 94, 0.3);
            color: var(--accent-rose);
        }

        .btn-action.delete:hover {
            background: var(--accent-rose);
            color: #fff;
        }

        /* --- MODALS --- */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal-card {
            background: #111722;
            border: 1px solid var(--border-glow);
            border-radius: 24px;
            width: 100%;
            max-width: 600px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
            overflow: hidden;
            animation: modalPop 0.25s ease-out;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }

        .modal-header {
            padding: 20px 26px;
            background: rgba(18, 25, 38, 0.95);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .modal-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 20px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .modal-close:hover {
            color: #fff;
        }

        .modal-body {
            padding: 26px;
            overflow-y: auto;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-main);
            margin-bottom: 8px;
        }

        .form-label span.opt {
            color: var(--text-muted);
            font-weight: 400;
            font-size: 12px;
            margin-left: 6px;
        }

        .form-control {
            width: 100%;
            background: rgba(9, 12, 16, 0.9);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 14px;
            color: #fff;
            font-family: var(--font-main);
            transition: all 0.2s;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-glow);
        }

        .form-control.mono {
            font-family: var(--font-mono);
            font-size: 13px;
        }

        .form-help {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 6px;
            line-height: 1.4;
        }

        .modal-footer {
            padding: 18px 26px;
            background: rgba(18, 25, 38, 0.95);
            border-top: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
        }

        /* Test Box */
        .test-output {
            background: #090c10;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 16px;
            font-family: var(--font-mono);
            font-size: 12px;
            color: #38bdf8;
            max-height: 250px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-all;
            margin-top: 16px;
        }

        /* Keypad Styles */
        .keypad-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            max-width: 280px;
            margin: 20px auto 0;
        }

        .btn-key {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 14px 0;
            font-size: 20px;
            font-weight: 700;
            font-family: var(--font-mono);
            color: #fff;
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-key:hover {
            background: rgba(99, 102, 241, 0.2);
            border-color: var(--primary-glow);
            transform: scale(1.05);
        }

        .btn-key:active {
            transform: scale(0.95);
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            background: var(--bg-card);
            border: 1px dashed var(--border-color);
            border-radius: 20px;
        }

        .empty-icon {
            font-size: 48px;
            color: var(--text-muted);
            margin-bottom: 16px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes modalPop {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
    </style>
<meta property="og:title" content="Api"><meta property="og:image" content="https://cdn-thumbnails.huggingface.co/social-thumbnails/spaces/ronak7450/api.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://cdn-thumbnails.huggingface.co/social-thumbnails/spaces/ronak7450/api.png"></head>
<body>

<?php if (!$is_authenticated): ?>
    <!-- ================= LOGIN VIEW ================= -->
    <div class="login-wrap">
        <div class="login-card">
            <div class="brand-icon">
                <i class="fa-solid fa-shield-halved"></i>
            </div>
            <h1 class="brand-title">APIX Engine</h1>
            <p class="brand-subtitle">सुरक्षित API प्रॉक्सी & मास्किंग पोर्टल</p>

            <?php if (!empty($auth_error)): ?>
                <div class="alert alert-danger" style="text-align: left;">
                    <i class="fa-solid fa-circle-exclamation"></i>
                    <div><?= htmlspecialchars($auth_error) ?></div>
                </div>
            <?php endif; ?>

            <form method="POST" id="loginForm" autocomplete="off">
                <input type="hidden" name="action" value="login">
                
                <div class="pin-input-wrap">
                    <input type="password" 
                           name="pin" 
                           id="pinInput" 
                           class="pin-field" 
                           maxlength="6" 
                           placeholder="••••••" 
                           required 
                           autofocus
                           pattern="[0-9]*" 
                           inputmode="numeric">
                </div>

                <div class="keypad-grid">
                    <?php for ($i = 1; $i <= 9; $i++): ?>
                        <button type="button" class="btn-key" onclick="pressPin('<?= $i ?>')"><?= $i ?></button>
                    <?php endfor; ?>
                    <button type="button" class="btn-key" style="color: var(--accent-rose);" onclick="clearPin()"><i class="fa-solid fa-delete-left"></i></button>
                    <button type="button" class="btn-key" onclick="pressPin('0')">0</button>
                    <button type="submit" class="btn-key" style="color: var(--accent-emerald);"><i class="fa-solid fa-check"></i></button>
                </div>

                <div style="margin-top: 24px;">
                    <button type="submit" class="btn-submit">
                        <i class="fa-solid fa-lock-open"></i> एक्सेस अनलॉक करें
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function pressPin(digit) {
            const el = document.getElementById('pinInput');
            if (el.value.length < 6) {
                el.value += digit;
            }
        }
        function clearPin() {
            const el = document.getElementById('pinInput');
            el.value = el.value.slice(0, -1);
        }
    </script>

<?php else: ?>
    <!-- ================= DASHBOARD VIEW ================= -->
    <div class="app-container">
        <!-- Navbar -->
        <div class="navbar">
            <div class="nav-brand">
                <div class="nav-logo">X</div>
                <div>
                    <div style="display: flex; align-items: center;">
                        <span class="nav-title">APIX Management</span>
                        <span class="nav-tag">PRO</span>
                    </div>
                    <div style="font-size: 12px; color: var(--text-muted);">Smart API Masking & Proxy Switchboard</div>
                </div>
            </div>
            <div class="nav-actions">
                <button class="btn-primary" onclick="openAddModal()">
                    <i class="fa-solid fa-plus"></i> Add New API
                </button>
                <a href="?action=logout" class="btn-nav btn-logout">
                    <i class="fa-solid fa-power-off"></i> लॉगआउट
                </a>
            </div>
        </div>

        <!-- Flash message -->
        <?php if ($flash): ?>
            <div class="alert alert-<?= htmlspecialchars($flash['type']) ?>">
                <i class="fa-solid fa-circle-check"></i>
                <div><?= htmlspecialchars($flash['msg']) ?></div>
            </div>
        <?php endif; ?>

        <!-- Stats Grid -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-info">
                    <h4>कुल API एंडपॉइंट्स</h4>
                    <div class="stat-num"><?= $total_apis ?></div>
                </div>
                <div class="stat-icon primary">
                    <i class="fa-solid fa-network-wired"></i>
                </div>
            </div>

            <div class="stat-card">
                <div class="stat-info">
                    <h4>सक्रिय (Active) APIs</h4>
                    <div class="stat-num"><?= $active_apis ?></div>
                </div>
                <div class="stat-icon emerald">
                    <i class="fa-solid fa-bolt"></i>
                </div>
            </div>

            <div class="stat-card">
                <div class="stat-info">
                    <h4>कुल प्रॉक्सी रिक्वेस्ट्स</h4>
                    <div class="stat-num"><?= number_format($total_hits) ?></div>
                </div>
                <div class="stat-icon cyan">
                    <i class="fa-solid fa-chart-line"></i>
                </div>
            </div>
        </div>

        <!-- Action Header -->
        <div class="action-bar">
            <div class="section-title">
                <i class="fa-solid fa-sliders" style="color: var(--primary-light);"></i>
                आपकी प्रबंधित APIs (Configured Endpoints)
            </div>
        </div>

        <!-- API List -->
        <?php if (empty($api_list)): ?>
            <div class="empty-state">
                <div class="empty-icon"><i class="fa-solid fa-cube"></i></div>
                <h3 style="color: #fff; margin-bottom: 8px;">कोई API अभी तक नहीं जोड़ी गई है</h3>
                <p style="color: var(--text-muted); margin-bottom: 24px;">ऊपर दिए गए 'Add New API' बटन पर क्लिक करके किसी भी API को अपना बनायें।</p>
                <button class="btn-primary" onclick="openAddModal()">
                    <i class="fa-solid fa-plus"></i> पहली API जोड़ें
                </button>
            </div>
        <?php else: ?>
            <div class="api-card-grid">
                <?php foreach ($api_list as $slug => $api): ?>
                    <?php 
                        $own_url = $base_endpoint_url . '?api=' . urlencode($slug) . '&q=';
                    ?>
                    <div class="api-item">
                        <div class="api-header">
                            <div class="api-title-wrap">
                                <span class="api-title"><?= htmlspecialchars($api['name']) ?></span>
                                <span class="badge-slug">/<?= htmlspecialchars($slug) ?></span>
                                <?php if (!empty($api['is_active'])): ?>
                                    <span class="badge-status active"><i class="fa-solid fa-circle" style="font-size: 8px;"></i> Active</span>
                                <?php else: ?>
                                    <span class="badge-status disabled"><i class="fa-solid fa-circle" style="font-size: 8px;"></i> Disabled</span>
                                <?php endif; ?>
                            </div>

                            <div class="api-actions">
                                <button class="btn-action test" onclick="openTestModal('<?= htmlspecialchars($slug, ENT_QUOTES) ?>', '<?= htmlspecialchars($api['name'], ENT_QUOTES) ?>')">
                                    <i class="fa-solid fa-play"></i> Test
                                </button>
                                <button class="btn-action edit" onclick="openEditModal('<?= htmlspecialchars($slug, ENT_QUOTES) ?>')">
                                    <i class="fa-solid fa-pen"></i> Edit
                                </button>
                                <form method="POST" style="display:inline;" onsubmit="return confirm('क्या आप इस API की स्थिति बदलना चाहते हैं?');">
                                    <input type="hidden" name="action" value="toggle_api">
                                    <input type="hidden" name="api_slug" value="<?= htmlspecialchars($slug) ?>">
                                    <button type="submit" class="btn-action">
                                        <i class="fa-solid fa-toggle-on"></i> <?= !empty($api['is_active']) ? 'Disable' : 'Enable' ?>
                                    </button>
                                </form>
                                <form method="POST" style="display:inline;" onsubmit="return confirm('क्या आप वाकई इस API को हमेशा के लिए डिलीट करना चाहते हैं?');">
                                    <input type="hidden" name="action" value="delete_api">
                                    <input type="hidden" name="api_slug" value="<?= htmlspecialchars($slug) ?>">
                                    <button type="submit" class="btn-action delete">
                                        <i class="fa-solid fa-trash-can"></i>
                                    </button>
                                </form>
                            </div>
                        </div>

                        <div class="api-content-grid">
                            <!-- Your Own Generated URL -->
                            <div class="url-box">
                                <div class="url-label"><i class="fa-solid fa-link" style="color: var(--primary-light);"></i> Your Own URL:</div>
                                <div class="url-text"><?= htmlspecialchars($own_url) ?><span style="color: var(--text-muted);">{QUERY}</span></div>
                                <button class="btn-copy" onclick="copyText('<?= htmlspecialchars($own_url) ?>')">
                                    <i class="fa-regular fa-copy"></i> Copy
                                </button>
                            </div>

                            <!-- Target URL (Masked in HTML for anti-inspect protection) -->
                            <div class="url-box">
                                <div class="url-label"><i class="fa-solid fa-shield-cat" style="color: var(--accent-amber);"></i> Target URL:</div>
                                <div class="url-text masked" id="masked_target_<?= htmlspecialchars($slug) ?>">
                                    ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
                                </div>
                                <button class="btn-copy" style="background: rgba(255,255,255,0.05); border-color: var(--border-color); color: var(--text-muted);" onclick="toggleRevealTarget('<?= htmlspecialchars($slug) ?>')">
                                    <i class="fa-regular fa-eye" id="eye_icon_<?= htmlspecialchars($slug) ?>"></i> Reveal
                                </button>
                            </div>

                            <!-- Hide Words -->
                            <?php if (!empty($api['hide_words'])): ?>
                                <div class="url-box" style="background: rgba(244, 63, 94, 0.04); border-color: rgba(244, 63, 94, 0.2);">
                                    <div class="url-label" style="color: #fb7185;"><i class="fa-solid fa-eye-slash"></i> Hiding Words:</div>
                                    <div class="tags-wrap">
                                        <?php foreach ($api['hide_words'] as $hw): ?>
                                            <span class="tag-hide"><?= htmlspecialchars($hw) ?></span>
                                        <?php endforeach; ?>
                                        <?php if (!empty($api['replace_with'])): ?>
                                            <span style="font-size: 12px; color: var(--text-muted);">➔ Replaced with: "<?= htmlspecialchars($api['replace_with']) ?>"</span>
                                        <?php else: ?>
                                            <span style="font-size: 12px; color: var(--text-muted);">➔ (Word Completely Removed)</span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>

                        <div class="api-footer">
                            <div class="api-meta">
                                <span><i class="fa-regular fa-clock"></i> जोड़ा गया: <?= date('d M Y, h:i A', $api['created_at'] ?? time()) ?></span>
                                <span><i class="fa-solid fa-fire"></i> हिट्स: <?= number_format($api['hits'] ?? 0) ?></span>
                            </div>
                            <div style="font-size: 12px; color: var(--text-muted);">
                                🛡️ Server-to-Server Masked Proxy Enabled
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>

    <!-- ================= MODAL: ADD API ================= -->
    <div class="modal-overlay" id="addModal">
        <div class="modal-card">
            <div class="modal-header">
                <div class="modal-title"><i class="fa-solid fa-plus-circle" style="color: var(--primary-light);"></i> Add New API Proxy</div>
                <button class="modal-close" onclick="closeModal('addModal')">&times;</button>
            </div>
            <form method="POST">
                <input type="hidden" name="action" value="add_api">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">API Name / Title</label>
                        <input type="text" name="api_name" class="form-control" placeholder="उदा: Aadhar To Number / Vehicle RC" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">API Command / Endpoint Slug <span class="opt">(Optional - Auto-generated if blank)</span></label>
                        <input type="text" name="api_slug" class="form-control mono" placeholder="उदा: aadhar या rc">
                        <div class="form-help">आपका नया URL बनेगा: <code>APIX.php?api=<b>slug</b>&q=VALUE</code></div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Target / 3rd-Party API URL</label>
                        <input type="text" name="target_url" class="form-control mono" placeholder="http://56.124.98.201:3000/api/proxy/aadhar-to-number?q={query}" required>
                        <div class="form-help">किसी और का API URL यहाँ डालें। आप <code>{query}</code> लिख सकते हैं या URL के अंत में <code>?q=</code> या <code>&num=</code> छोड़ सकते हैं।</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Hide Word(s) <span class="opt">(Optional - शब्द छिपाने के लिए)</span></label>
                        <textarea name="hide_words" class="form-control mono" rows="3" placeholder="उदा: t.me/example, Ansh, Powered By, 9876543210 (अल्पविराम ',' या नई लाइन में लिखें)"></textarea>
                        <div class="form-help">जो शब्द आप response में से हटाना चाहते हैं, उन्हें यहाँ लिखें। यह API के जवाब में कभी दिखाई नहीं देगा।</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Replace Hidden Word With <span class="opt">(Optional - खाली छोड़ें तो शब्द पूरी तरह हट जाएगा)</span></label>
                        <input type="text" name="replace_with" class="form-control mono" placeholder="[HIDDEN] या खाली छोड़ें">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-nav" onclick="closeModal('addModal')">Cancel</button>
                    <button type="submit" class="btn-primary"><i class="fa-solid fa-check"></i> Save & Generate My URL</button>
                </div>
            </form>
        </div>
    </div>

    <!-- ================= MODAL: EDIT API ================= -->
    <div class="modal-overlay" id="editModal">
        <div class="modal-card">
            <div class="modal-header">
                <div class="modal-title"><i class="fa-solid fa-pen-to-square" style="color: var(--accent-amber);"></i> Edit API Endpoint</div>
                <button class="modal-close" onclick="closeModal('editModal')">&times;</button>
            </div>
            <form method="POST">
                <input type="hidden" name="action" value="edit_api">
                <input type="hidden" name="api_slug" id="edit_slug">
                
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">API Name / Title</label>
                        <input type="text" name="api_name" id="edit_name" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Target / 3rd-Party API URL</label>
                        <input type="text" name="target_url" id="edit_target" class="form-control mono" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Hide Word(s) <span class="opt">(Optional)</span></label>
                        <textarea name="hide_words" id="edit_hide_words" class="form-control mono" rows="3"></textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Replace Hidden Word With <span class="opt">(Optional)</span></label>
                        <input type="text" name="replace_with" id="edit_replace_with" class="form-control mono">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn-nav" onclick="closeModal('editModal')">Cancel</button>
                    <button type="submit" class="btn-primary"><i class="fa-solid fa-floppy-disk"></i> Update API</button>
                </div>
            </form>
        </div>
    </div>

    <!-- ================= MODAL: TEST API ================= -->
    <div class="modal-overlay" id="testModal">
        <div class="modal-card">
            <div class="modal-header">
                <div class="modal-title"><i class="fa-solid fa-play" style="color: var(--accent-cyan);"></i> Test API: <span id="test_api_name"></span></div>
                <button class="modal-close" onclick="closeModal('testModal')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Test Query / Value (e.g. Mobile, Aadhar, RC)</label>
                    <div style="display: flex; gap: 10px;">
                        <input type="text" id="test_query_input" class="form-control mono" placeholder="593161057913">
                        <button type="button" class="btn-primary" onclick="runLiveTest()">
                            <i class="fa-solid fa-bolt"></i> Send
                        </button>
                    </div>
                </div>

                <label class="form-label">Masked Response Output:</label>
                <div id="test_output_box" class="test-output">क्वेरी दर्ज करें और 'Send' पर क्लिक करें...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-nav" onclick="closeModal('testModal')">Close</button>
            </div>
        </div>
    </div>

    <script>
        let currentTestSlug = '';

        function openAddModal() {
            document.getElementById('addModal').classList.add('active');
        }

        function closeModal(id) {
            document.getElementById(id).classList.remove('active');
        }

        function copyText(text) {
            navigator.clipboard.writeText(text).then(() => {
                alert('URL सफलतापूर्वक क्लिपबोर्ड पर कॉपी हो गया!');
            }).catch(() => {
                prompt('कॉपी करने के लिए Ctrl+C दबाएँ:', text);
            });
        }

        // Safe reveal toggle using server session
        function toggleRevealTarget(slug) {
            const el = document.getElementById('masked_target_' + slug);
            const icon = document.getElementById('eye_icon_' + slug);
            
            if (el.dataset.revealed === 'true') {
                el.innerText = '●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●';
                el.dataset.revealed = 'false';
                icon.className = 'fa-regular fa-eye';
            } else {
                // Fetch dynamically via session POST to avoid leaving raw URL in unauthenticated HTML
                const fd = new FormData();
                fd.append('action', 'get_api_details');
                fd.append('api_slug', slug);

                fetch('APIX.php', { method: 'POST', body: fd })
                    .then(res => res.json())
                    .then(data => {
                        if (data.status && data.api) {
                            el.innerText = data.api.target_url;
                            el.dataset.revealed = 'true';
                            icon.className = 'fa-regular fa-eye-slash';
                        } else {
                            alert('त्रुटि: URL लोड नहीं हो सका।');
                        }
                    })
                    .catch(() => alert('सर्वर से कनेक्ट करने में त्रुटि।'));
            }
        }

        function openEditModal(slug) {
            const fd = new FormData();
            fd.append('action', 'get_api_details');
            fd.append('api_slug', slug);

            fetch('APIX.php', { method: 'POST', body: fd })
                .then(res => res.json())
                .then(data => {
                    if (data.status && data.api) {
                        const a = data.api;
                        document.getElementById('edit_slug').value = a.slug;
                        document.getElementById('edit_name').value = a.name;
                        document.getElementById('edit_target').value = a.target_url;
                        document.getElementById('edit_hide_words').value = (a.hide_words || []).join(', ');
                        document.getElementById('edit_replace_with').value = a.replace_with || '';
                        document.getElementById('editModal').classList.add('active');
                    } else {
                        alert('API डेटा नहीं मिला।');
                    }
                })
                .catch(() => alert('कनेक्शन त्रुटि।'));
        }

        function openTestModal(slug, name) {
            currentTestSlug = slug;
            document.getElementById('test_api_name').innerText = name;
            document.getElementById('test_output_box').innerText = 'क्वेरी दर्ज करें और \'Send\' पर क्लिक करें...';
            document.getElementById('test_query_input').value = '';
            document.getElementById('testModal').classList.add('active');
        }

        function runLiveTest() {
            const q = document.getElementById('test_query_input').value.trim();
            const out = document.getElementById('test_output_box');
            out.innerText = 'अनुरोध भेजा जा रहा है (Connecting to Proxy)...';

            const testUrl = 'APIX.php?api=' + encodeURIComponent(currentTestSlug) + '&q=' + encodeURIComponent(q);

            fetch(testUrl)
                .then(res => res.text())
                .then(txt => {
                    try {
                        const parsed = JSON.parse(txt);
                        out.innerText = JSON.stringify(parsed, null, 2);
                    } catch (e) {
                        out.innerText = txt;
                    }
                })
                .catch(err => {
                    out.innerText = 'त्रुटि: ' + err.message;
                });
        }
    </script>
<?php endif; ?>

</body>
</html>