<?php
echo "\nWizard Frontend Auto‑Installer\n";
echo "-------------------------------------\n";

$frontend = __DIR__ . "/frontend";
$stepsDir = "$frontend/steps";

// Ensure directories exist
$dirs = [
    $frontend,
    $stepsDir
];

foreach ($dirs as $d) {
    if (!is_dir($d)) {
        mkdir($d, 0777, true);
        echo "Created directory: $d\n";
    }
}

// Helper to write files
function put($path, $content) {
    file_put_contents($path, $content);
    echo "Installed: $path\n";
}

// ------------------------------------------------------------
// 1. Install index.html
// ------------------------------------------------------------
put("$frontend/index.html", <<<HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wizard</title>
    <link rel="stylesheet" href="wizard.css">
</head>
<body>

<div id="wizard"></div>

<script src="wizard.js"></script>
</body>
</html>
HTML);

// ------------------------------------------------------------
// 2. Install wizard.css
// ------------------------------------------------------------
put("$frontend/wizard.css", <<<CSS
body {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    margin: 0;
    padding: 0;
}
#wizard {
    width: 80%;
    margin: 40px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}
CSS);

// ------------------------------------------------------------
// 3. Install wizard.js (core engine)
// ------------------------------------------------------------
put("$frontend/wizard.js", <<<JS
// Wizard Core Engine
const wizState = {
    step: 1,
    autosaveData: {},
    finalizedFiles: [],
    projectName: ""
};

function loadStep(step) {
    import("./steps/step" + step + ".js")
        .then(module => module.default(wizState))
        .catch(err => console.error("Step load error:", err));
}

window.onload = () => loadStep(1);
JS);

// ------------------------------------------------------------
// 4. Install step files
// ------------------------------------------------------------
$steps = [
    1 => "export default function(wiz) { document.getElementById('wizard').innerHTML = '<h2>Step 1</h2>'; }",
    2 => "export default function(wiz) { document.getElementById('wizard').innerHTML = '<h2>Step 2</h2>'; }",
    3 => "export default function(wiz) { document.getElementById('wizard').innerHTML = '<h2>Step 3</h2>'; }",
    4 => "export default function(wiz) { document.getElementById('wizard').innerHTML = '<h2>Step 4</h2>'; }",
    5 => "export default function(wiz) { document.getElementById('wizard').innerHTML = '<h2>Step 5</h2>'; }",
];

foreach ($steps as $num => $content) {
    put("$stepsDir/step{$num}.js", $content);
}

// ------------------------------------------------------------
// 5. Install admin link bar
// ------------------------------------------------------------
put("$frontend/admin-bar.html", <<<HTML
<div style="background:#222;color:#fff;padding:10px;">
    <a href="/admin/logs.php" style="color:#fff;margin-right:10px;">Logs</a>
    <a href="/admin/autosave.php" style="color:#fff;margin-right:10px;">Autosave</a>
    <a href="/admin/install.php" style="color:#fff;margin-right:10px;">Installs</a>
    <a href="/admin/zips.php" style="color:#fff;margin-right:10px;">ZIPs</a>
    <a href="/admin/health.php" style="color:#fff;margin-right:10px;">Health</a>
    <a href="/admin/settings.php" style="color:#fff;margin-right:10px;">Settings</a>
    <a href="/admin/users.php" style="color:#fff;margin-right:10px;">Users</a>
    <a href="/admin/sessions.php" style="color:#fff;margin-right:10px;">Sessions</a>
</div>
HTML);

echo "\nFrontend installation complete.\n";
echo "All wizard frontend files installed and updated.\n";

