<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setup — SmartForm Builder</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        * { font-family:'Plus Jakarta Sans',sans-serif; }
        body { background:linear-gradient(135deg,#0f1117 0%,#1a1f35 100%); min-height:100vh; }
        .form-input { background:#0f1117; border:1px solid #2d3748; border-radius:10px; padding:.65rem 1rem; color:#e2e8f0; font-size:.9rem; width:100%; outline:none; transition:all .2s; }
        .form-input:focus { border-color:#3b6ff1; box-shadow:0 0 0 3px rgba(59,111,241,.12); }
        .form-label { display:block; font-size:.75rem; font-weight:700; color:#64748b; margin-bottom:.4rem; text-transform:uppercase; letter-spacing:.05em; }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen p-4">
<div class="w-full max-w-md">
    <!-- Logo -->
    <div class="text-center mb-8">
        <div class="w-16 h-16 rounded-2xl flex items-center justify-center text-white text-2xl font-black mx-auto mb-4" style="background:linear-gradient(135deg,#3b6ff1,#6047ea)">
            <i class="fas fa-bolt"></i>
        </div>
        <h1 class="text-2xl font-extrabold text-white">SmartForm Builder</h1>
        <p class="text-slate-500 text-sm mt-1">Setup your database connection</p>
    </div>

    <div style="background:#161b27;border:1px solid #1e2536;border-radius:16px;padding:2rem">
        <div id="setupResult" class="hidden mb-4 p-4 rounded-lg text-sm font-medium"></div>

        <form id="setupForm" class="space-y-4">
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="form-label">DB Host</label>
                    <input type="text" name="db_host" class="form-input" value="localhost" required>
                </div>
                <div>
                    <label class="form-label">DB Port</label>
                    <input type="text" name="db_port" class="form-input" value="3306" required>
                </div>
            </div>
            <div>
                <label class="form-label">Database Name</label>
                <input type="text" name="db_name" class="form-input" value="smartform_db" required>
            </div>
            <div>
                <label class="form-label">Username</label>
                <input type="text" name="db_user" class="form-input" value="root" required>
            </div>
            <div>
                <label class="form-label">Password</label>
                <input type="password" name="db_pass" class="form-input" placeholder="Leave empty if no password">
            </div>
            <button type="submit" id="setupBtn" class="w-full py-3 rounded-xl font-bold text-white" style="background:linear-gradient(135deg,#3b6ff1,#6047ea);box-shadow:0 8px 20px rgba(59,111,241,.3)">
                <i class="fas fa-database mr-2"></i>Create Database & Install
            </button>
        </form>

        <div class="mt-5 p-4 rounded-xl" style="background:#0f1117;border:1px solid #1e2536">
            <p class="text-xs font-bold text-slate-500 mb-2 uppercase">This setup will:</p>
            <ul class="text-xs text-slate-500 space-y-1">
                <li><i class="fas fa-check text-green-500 mr-2"></i>Create the database if not exists</li>
                <li><i class="fas fa-check text-green-500 mr-2"></i>Create all required tables</li>
                <li><i class="fas fa-check text-green-500 mr-2"></i>Update .env configuration</li>
            </ul>
        </div>
    </div>
</div>

<script>
document.getElementById('setupForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('setupBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Installing...';

    const formData = new FormData(this);
    const resultEl = document.getElementById('setupResult');

    try {
        const resp = await fetch(window.location.origin + '/smartform/setup/run', {
            method: 'POST', body: formData
        });
        const data = await resp.json();
        resultEl.classList.remove('hidden');
        if (data.success) {
            resultEl.style.background = 'rgba(16,185,129,.1)';
            resultEl.style.border = '1px solid rgba(16,185,129,.3)';
            resultEl.style.color = '#4ade80';
            resultEl.textContent = '✅ ' + data.message;
            setTimeout(() => { window.location = data.redirect || '/smartform/'; }, 1500);
        } else {
            resultEl.style.background = 'rgba(239,68,68,.1)';
            resultEl.style.border = '1px solid rgba(239,68,68,.3)';
            resultEl.style.color = '#f87171';
            resultEl.textContent = '❌ ' + data.message;
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-database mr-2"></i>Create Database & Install';
        }
    } catch (err) {
        resultEl.classList.remove('hidden');
        resultEl.style.background = 'rgba(239,68,68,.1)';
        resultEl.style.color = '#f87171';
        resultEl.textContent = '❌ Connection error. Check your PHP server.';
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-database mr-2"></i>Create Database & Install';
    }
});
</script>
</body>
</html>
