<?php
// ============================================================
//  BACKEND - Proses permintaan POST (uji koneksi database)
// ============================================================

// Hanya tangani permintaan POST dengan header khusus
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_SERVER['HTTP_X_REQUESTED_BY'])) {
    // Set response JSON
    header('Content-Type: application/json; charset=utf-8');

    // Baca input JSON
    $raw = file_get_contents('php://input');
    $data = json_decode($raw, true);

    if (!is_array($data)) {
        echo json_encode(['success' => false, 'error' => 'Payload JSON tidak valid.']);
        exit;
    }

    // Ambil parameter
    $dbType   = trim($data['dbType'] ?? 'mysql');
    $host     = trim($data['dbHost'] ?? 'localhost');
    $port     = trim($data['dbPort'] ?? '');
    $dbName   = trim($data['dbName'] ?? '');
    $user     = trim($data['dbUser'] ?? '');
    $pass     = $data['dbPass'] ?? '';
    $sqlitePath = trim($data['dbSqlitePath'] ?? 'database.sqlite');

    // Validasi dasar
    if ($dbType !== 'sqlite' && empty($dbName)) {
        echo json_encode(['success' => false, 'error' => 'Nama database wajib diisi.']);
        exit;
    }

    if ($dbType === 'sqlite' && empty($sqlitePath)) {
        echo json_encode(['success' => false, 'error' => 'Path file SQLite wajib diisi.']);
        exit;
    }

    if ($dbType !== 'sqlite' && empty($user)) {
        echo json_encode(['success' => false, 'error' => 'Username wajib diisi.']);
        exit;
    }

    // Cek ekstensi PDO
    if (!extension_loaded('pdo')) {
        echo json_encode(['success' => false, 'error' => 'Ekstensi PDO tidak tersedia di server.']);
        exit;
    }

    $dsn = '';
    $driver = '';

    try {
        switch ($dbType) {
            case 'mysql':
                if (!extension_loaded('pdo_mysql')) {
                    throw new Exception('Driver PDO MySQL tidak tersedia.');
                }
                $driver = 'MySQL';
                $port   = $port ?: '3306';
                $dsn    = "mysql:host={$host};port={$port};dbname={$dbName};charset=utf8mb4";
                break;

            case 'pgsql':
                if (!extension_loaded('pdo_pgsql')) {
                    throw new Exception('Driver PDO PostgreSQL tidak tersedia.');
                }
                $driver = 'PostgreSQL';
                $port   = $port ?: '5432';
                $dsn    = "pgsql:host={$host};port={$port};dbname={$dbName};options='--client_encoding=UTF8'";
                break;

            case 'sqlite':
                if (!extension_loaded('pdo_sqlite')) {
                    throw new Exception('Driver PDO SQLite tidak tersedia.');
                }
                $driver = 'SQLite';
                $dir = dirname($sqlitePath);
                if (!is_dir($dir) && $dir !== '.') {
                    mkdir($dir, 0755, true);
                }
                $dsn = "sqlite:{$sqlitePath}";
                break;

            default:
                echo json_encode(['success' => false, 'error' => 'Jenis database tidak didukung.']);
                exit;
        }

        // Buat koneksi PDO
        $options = [
            PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
            PDO::ATTR_TIMEOUT            => 5,
        ];

        if ($dbType === 'sqlite') {
            $pdo = new PDO($dsn, null, null, $options);
        } else {
            $pdo = new PDO($dsn, $user, $pass, $options);
        }

        // Ambil versi
        $version = 'unknown';
        if ($dbType === 'mysql') {
            $stmt = $pdo->query('SELECT VERSION() AS ver');
            $row = $stmt->fetch();
            $version = $row['ver'] ?? 'unknown';
        } elseif ($dbType === 'pgsql') {
            $stmt = $pdo->query('SELECT VERSION() AS ver');
            $row = $stmt->fetch();
            $version = $row['ver'] ?? 'unknown';
        } elseif ($dbType === 'sqlite') {
            $stmt = $pdo->query('SELECT sqlite_version() AS ver');
            $row = $stmt->fetch();
            $version = $row['ver'] ?? 'unknown';
        }

        $serverInfo = $pdo->getAttribute(PDO::ATTR_SERVER_INFO) ?: 'N/A';
        if ($dbType === 'sqlite') {
            $serverInfo = 'SQLite ' . $version;
        }

        echo json_encode([
            'success'    => true,
            'driver'     => $driver,
            'version'    => $version,
            'serverInfo' => $serverInfo,
            'dsn'        => $dsn,
            'database'   => $dbType === 'sqlite' ? $sqlitePath : $dbName,
            'host'       => $dbType === 'sqlite' ? '—' : $host,
            'port'       => $dbType === 'sqlite' ? '—' : $port,
            'user'       => $dbType === 'sqlite' ? '—' : $user,
        ]);
        exit;

    } catch (PDOException $e) {
        $errorMsg = $e->getMessage();
        $safeDsn = preg_replace('/password=[^;]+/i', 'password=****', $dsn);
        echo json_encode([
            'success' => false,
            'error'   => $errorMsg,
            'dsn'     => $safeDsn,
            'driver'  => $driver ?? 'unknown',
        ]);
        exit;
    } catch (Exception $e) {
        echo json_encode([
            'success' => false,
            'error'   => $e->getMessage(),
        ]);
        exit;
    }
}

// ============================================================
//  FRONTEND - Tampilkan HTML jika bukan POST
// ============================================================
?><!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Database Connection Tester</title>
    <style>
        /* ----- Reset & Base ----- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);
            padding: 40px 45px;
            max-width: 720px;
            width: 100%;
            transition: all 0.2s;
        }

        h1 {
            font-size: 26px;
            font-weight: 700;
            color: #1a2634;
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 6px;
        }

        h1 small {
            font-size: 14px;
            font-weight: 400;
            color: #6b7a8a;
            margin-left: auto;
        }

        .subtitle {
            color: #6b7a8a;
            font-size: 15px;
            border-left: 4px solid #3b82f6;
            padding-left: 14px;
            margin-bottom: 28px;
            line-height: 1.5;
        }

        /* ----- Form ----- */
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .form-group.full {
            grid-column: 1 / -1;
        }

        .form-group label {
            font-size: 13px;
            font-weight: 600;
            color: #2d3a4a;
            letter-spacing: 0.3px;
        }

        .form-group label .required {
            color: #ef4444;
            margin-left: 2px;
        }

        .form-group input,
        .form-group select {
            padding: 10px 14px;
            border: 1.5px solid #dce3ec;
            border-radius: 10px;
            font-size: 14px;
            background: #fafcfe;
            transition: border 0.2s, box-shadow 0.2s;
            outline: none;
            width: 100%;
        }

        .form-group input:focus,
        .form-group select:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
            background: #ffffff;
        }

        .form-group input::placeholder {
            color: #b0bec5;
        }

        /* ----- Actions ----- */
        .actions {
            display: flex;
            gap: 14px;
            margin-top: 24px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 12px 32px;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: #3b82f6;
            color: #fff;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.30);
        }

        .btn-primary:hover {
            background: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-secondary {
            background: #e8edf4;
            color: #2d3a4a;
        }

        .btn-secondary:hover {
            background: #d5dde8;
        }

        .btn-success {
            background: #10b981;
            color: #fff;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30);
        }

        .btn-danger {
            background: #ef4444;
            color: #fff;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }

        /* ----- Result Card ----- */
        .result {
            margin-top: 28px;
            padding: 20px 24px;
            border-radius: 14px;
            display: none;
            animation: fadeSlide 0.35s ease;
        }

        .result.show {
            display: block;
        }

        .result.success {
            background: #ecfdf5;
            border: 1.5px solid #6ee7b7;
        }

        .result.error {
            background: #fef2f2;
            border: 1.5px solid #fca5a5;
        }

        .result .icon {
            font-size: 28px;
            margin-right: 10px;
        }

        .result .title {
            font-weight: 700;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .result .title .badge {
            font-size: 12px;
            font-weight: 600;
            padding: 2px 12px;
            border-radius: 20px;
            background: rgba(0, 0, 0, 0.06);
            color: #1a2634;
        }

        .result .detail {
            margin-top: 10px;
            font-size: 14px;
            line-height: 1.7;
            color: #1e293b;
        }

        .result .detail code {
            background: rgba(0, 0, 0, 0.05);
            padding: 2px 10px;
            border-radius: 6px;
            font-size: 13px;
            font-family: 'Fira Code', monospace;
        }

        .result .meta {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px dashed rgba(0, 0, 0, 0.08);
            font-size: 13px;
            color: #475569;
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

        .result .meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* ----- Spinner ----- */
        .spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(59, 130, 246, 0.15);
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            vertical-align: middle;
            margin-right: 6px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes fadeSlide {
            0% {
                opacity: 0;
                transform: translateY(8px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ----- Responsive ----- */
        @media (max-width: 600px) {
            .container {
                padding: 24px 18px;
            }
            .form-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .form-group.full {
                grid-column: 1;
            }
            .actions {
                flex-direction: column;
            }
            .btn {
                justify-content: center;
            }
            h1 {
                font-size: 20px;
                flex-wrap: wrap;
            }
            h1 small {
                margin-left: 0;
                width: 100%;
            }
        }

        /* ----- Footer ----- */
        .footer {
            margin-top: 28px;
            text-align: center;
            font-size: 13px;
            color: #94a3b8;
            border-top: 1px solid #eef2f6;
            padding-top: 18px;
        }

        .footer a {
            color: #3b82f6;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        .db-hint {
            font-size: 12px;
            color: #94a3b8;
            margin-top: 2px;
        }
    </style>
</head>
<body>

    <div class="container" id="app">

        <h1>
            🗄️ DB Tester
            <small>v1.0</small>
        </h1>
        <div class="subtitle">
            Masukkan kredensial database untuk menguji koneksi.
        </div>

        <!-- ====== FORM ====== -->
        <form id="testForm" autocomplete="off">
            <div class="form-grid">

                <!-- Jenis Database -->
                <div class="form-group">
                    <label for="dbType">Jenis Database <span class="required">*</span></label>
                    <select id="dbType" name="dbType">
                        <option value="mysql">MySQL / MariaDB</option>
                        <option value="pgsql">PostgreSQL</option>
                        <option value="sqlite">SQLite</option>
                    </select>
                </div>

                <!-- Host (untuk MySQL / PgSQL) -->
                <div class="form-group" id="hostGroup">
                    <label for="dbHost">Host</label>
                    <input type="text" id="dbHost" name="dbHost" placeholder="localhost" value="localhost" />
                </div>

                <!-- Port (untuk MySQL / PgSQL) -->
                <div class="form-group" id="portGroup">
                    <label for="dbPort">Port</label>
                    <input type="text" id="dbPort" name="dbPort" placeholder="3306" value="3306" />
                </div>

                <!-- Nama Database -->
                <div class="form-group">
                    <label for="dbName">Nama Database <span class="required">*</span></label>
                    <input type="text" id="dbName" name="dbName" placeholder="nama_database" value="test_db" />
                </div>

                <!-- Username -->
                <div class="form-group">
                    <label for="dbUser">Username <span class="required">*</span></label>
                    <input type="text" id="dbUser" name="dbUser" placeholder="root" value="root" />
                </div>

                <!-- Password -->
                <div class="form-group">
                    <label for="dbPass">Password</label>
                    <input type="password" id="dbPass" name="dbPass" placeholder="••••••••" />
                </div>

                <!-- SQLite path (hidden by default) -->
                <div class="form-group full" id="sqliteGroup" style="display:none;">
                    <label for="dbSqlitePath">Path File SQLite <span class="required">*</span></label>
                    <input type="text" id="dbSqlitePath" name="dbSqlitePath" placeholder="/path/to/database.sqlite" value="database.sqlite" />
                    <div class="db-hint">Gunakan path absolut atau relatif. File akan dibuat jika belum ada.</div>
                </div>

            </div>

            <!-- Actions -->
            <div class="actions">
                <button type="submit" class="btn btn-primary" id="testBtn">
                    🔌 Uji Koneksi
                </button>
                <button type="button" class="btn btn-secondary" id="resetBtn">
                    ↺ Reset Form
                </button>
            </div>
        </form>

        <!-- ====== RESULT ====== -->
        <div class="result" id="result">
            <div class="title" id="resultTitle"></div>
            <div class="detail" id="resultDetail"></div>
            <div class="meta" id="resultMeta"></div>
        </div>

        <div class="footer">
            Dibuat dengan ❤️ &bull; PHP + PDO &bull;
            <a href="#" onclick="location.reload();">Refresh</a>
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- JAVASCRIPT                                                   -->
    <!-- ============================================================ -->
    <script>
        (function() {
            'use strict';

            // ----- DOM refs -----
            const form = document.getElementById('testForm');
            const testBtn = document.getElementById('testBtn');
            const resetBtn = document.getElementById('resetBtn');
            const resultDiv = document.getElementById('result');
            const resultTitle = document.getElementById('resultTitle');
            const resultDetail = document.getElementById('resultDetail');
            const resultMeta = document.getElementById('resultMeta');

            const dbType = document.getElementById('dbType');
            const dbHost = document.getElementById('dbHost');
            const dbPort = document.getElementById('dbPort');
            const dbName = document.getElementById('dbName');
            const dbUser = document.getElementById('dbUser');
            const dbPass = document.getElementById('dbPass');
            const dbSqlitePath = document.getElementById('dbSqlitePath');
            const hostGroup = document.getElementById('hostGroup');
            const portGroup = document.getElementById('portGroup');
            const sqliteGroup = document.getElementById('sqliteGroup');

            // ----- Toggle SQLite fields -----
            function toggleDbFields() {
                const isSqlite = dbType.value === 'sqlite';
                hostGroup.style.display = isSqlite ? 'none' : '';
                portGroup.style.display = isSqlite ? 'none' : '';
                sqliteGroup.style.display = isSqlite ? '' : 'none';

                if (isSqlite) {
                    dbHost.removeAttribute('required');
                    dbPort.removeAttribute('required');
                    dbUser.removeAttribute('required');
                    dbName.removeAttribute('required');
                    dbSqlitePath.setAttribute('required', 'required');
                } else {
                    dbHost.setAttribute('required', 'required');
                    dbPort.setAttribute('required', 'required');
                    dbUser.setAttribute('required', 'required');
                    dbName.setAttribute('required', 'required');
                    dbSqlitePath.removeAttribute('required');
                }

                if (dbType.value === 'mysql') {
                    dbPort.placeholder = '3306';
                    if (!dbPort.value || dbPort.value === '5432') dbPort.value = '3306';
                } else if (dbType.value === 'pgsql') {
                    dbPort.placeholder = '5432';
                    if (!dbPort.value || dbPort.value === '3306') dbPort.value = '5432';
                }
            }

            dbType.addEventListener('change', toggleDbFields);
            toggleDbFields();

            // ----- Reset form -----
            resetBtn.addEventListener('click', function() {
                form.reset();
                dbHost.value = 'localhost';
                dbPort.value = '3306';
                dbName.value = 'test_db';
                dbUser.value = 'root';
                dbPass.value = '';
                dbSqlitePath.value = 'database.sqlite';
                toggleDbFields();
                resultDiv.classList.remove('show', 'success', 'error');
                resultDiv.style.display = 'none';
                testBtn.disabled = false;
                testBtn.innerHTML = '🔌 Uji Koneksi';
            });

            // ----- Submit handler -----
            form.addEventListener('submit', async function(e) {
                e.preventDefault();

                testBtn.disabled = true;
                testBtn.innerHTML = '<span class="spinner"></span> Menguji...';

                resultDiv.classList.remove('show', 'success', 'error');
                resultDiv.style.display = 'none';

                const payload = {
                    dbType: dbType.value,
                    dbHost: dbHost.value.trim() || 'localhost',
                    dbPort: dbPort.value.trim(),
                    dbName: dbName.value.trim(),
                    dbUser: dbUser.value.trim(),
                    dbPass: dbPass.value,
                    dbSqlitePath: dbSqlitePath.value.trim() || 'database.sqlite',
                };

                try {
                    const response = await fetch(window.location.href, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-By': 'DB-Tester',
                        },
                        body: JSON.stringify(payload),
                    });

                    // Cek apakah response berupa JSON
                    const text = await response.text();
                    let data;
                    try {
                        data = JSON.parse(text);
                    } catch (parseError) {
                        // Jika bukan JSON, tampilkan error dengan potongan response
                        resultDiv.style.display = 'block';
                        resultDiv.className = 'result show error';
                        resultTitle.innerHTML = '❌ Respons Server Tidak Valid';
                        resultDetail.innerHTML = `
                            <strong>⚠️ Server mengembalikan data bukan JSON.</strong>
                            <br />Kemungkinan besar terjadi error pada PHP. Periksa log server.
                            <br /><strong>Potongan response:</strong>
                            <pre style="background:#f1f5f9; padding:10px; border-radius:6px; font-size:13px; overflow-x:auto; max-height:150px;">${text.substring(0, 500)}</pre>
                        `;
                        resultMeta.innerHTML = '';
                        testBtn.disabled = false;
                        testBtn.innerHTML = '🔌 Uji Koneksi';
                        return;
                    }

                    // Tampilkan hasil
                    resultDiv.style.display = 'block';

                    if (data.success) {
                        resultDiv.className = 'result show success';
                        resultTitle.innerHTML = `
                            ✅ Koneksi Berhasil!
                            <span class="badge">${data.driver || 'Database'}</span>
                        `;
                        resultDetail.innerHTML = `
                            <strong>✅</strong> Terhubung ke database <code>${data.database || '—'}</code>
                            dengan driver <strong>${data.driver || '—'}</strong>.
                            <br />
                            <strong>Versi:</strong> ${data.version || 'unknown'}
                            <br />
                            <strong>Info Server:</strong> ${data.serverInfo || 'N/A'}
                        `;
                        resultMeta.innerHTML = `
                            <span>🖥️ Host: ${data.host || '—'}</span>
                            <span>🔌 Port: ${data.port || '—'}</span>
                            <span>👤 User: ${data.user || '—'}</span>
                            <span>📁 Database: ${data.database || '—'}</span>
                            <span>🔗 DSN: <code>${data.dsn || '—'}</code></span>
                        `;
                    } else {
                        resultDiv.className = 'result show error';
                        resultTitle.innerHTML = '❌ Koneksi Gagal';
                        resultDetail.innerHTML = `
                            <strong>⚠️ Error:</strong> ${data.error || 'Terjadi kesalahan yang tidak diketahui.'}
                            ${data.dsn ? `<br /><strong>DSN:</strong> <code>${data.dsn}</code>` : ''}
                        `;
                        resultMeta.innerHTML = `
                            <span>Driver: ${data.driver || '—'}</span>
                            <span>Database: ${payload.dbName || payload.dbSqlitePath || '—'}</span>
                        `;
                    }

                } catch (err) {
                    resultDiv.style.display = 'block';
                    resultDiv.className = 'result show error';
                    resultTitle.innerHTML = '❌ Error Jaringan';
                    resultDetail.innerHTML = `
                        <strong>⚠️ Gagal menghubungi server:</strong> ${err.message}
                        <br />Pastikan server PHP berjalan dan file ini dapat diakses.
                    `;
                    resultMeta.innerHTML = '';
                } finally {
                    testBtn.disabled = false;
                    testBtn.innerHTML = '🔌 Uji Koneksi';
                    resultDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            });

            // ----- Pre-fill from URL params (opsional) -----
            (function loadFromParams() {
                const params = new URLSearchParams(window.location.search);
                if (params.has('host')) dbHost.value = params.get('host');
                if (params.has('port')) dbPort.value = params.get('port');
                if (params.has('db')) dbName.value = params.get('db');
                if (params.has('user')) dbUser.value = params.get('user');
                if (params.has('type')) {
                    const t = params.get('type');
                    if (['mysql', 'pgsql', 'sqlite'].includes(t)) {
                        dbType.value = t;
                        toggleDbFields();
                    }
                }
                if (params.has('sqlite')) dbSqlitePath.value = params.get('sqlite');
            })();

        })();
    </script>

</body>
</html>