<?php
// uix.php
// HUD + Phone + Minimap + Freebies UI layer.
// Loads engine.php in an iframe and communicates via postMessage.

$playerId = isset($_GET['pid']) ? htmlspecialchars($_GET['pid']) : 'guest_' . rand(1000, 9999);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UIX</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- MapLibre for minimap -->
<link href="https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@3.6.1/dist/maplibre-gl.js"></script>

<style>
    html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: #000;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* ENGINE IFRAME */
    #engine-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        z-index: 1;
    }

    /* MINIMAP */
    #minimap {
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: 180px;
        height: 180px;
        border-radius: 12px;
        overflow: hidden;
        border: 3px solid rgba(255,255,255,0.25);
        box-shadow: 0 0 12px rgba(0,0,0,0.6);
        z-index: 5;
    }

    /* DASH */
    #dash {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 320px;
        padding: 10px 14px;
        background: rgba(0,0,0,0.55);
        border-radius: 10px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        z-index: 5;
        box-shadow: 0 0 10px rgba(0,0,0,0.6);
    }

    /* TOP BAR */
    #top-bar {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 14px;
        background: rgba(0,0,0,0.55);
        border-radius: 8px;
        color: #fff;
        font-size: 14px;
        z-index: 5;
        box-shadow: 0 0 10px rgba(0,0,0,0.6);
    }

    /* PHONE */
    #phone {
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 260px;
        height: 480px;
        background: #111;
        border-radius: 22px;
        border: 3px solid #333;
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        overflow: hidden;
        z-index: 10;
        display: none;
        flex-direction: column;
    }

    #phone-header {
        height: 40px;
        background: #222;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        font-size: 14px;
    }

    #phone-home {
        flex: 1;
        background: #111;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 12px;
        padding: 20px;
    }

    .app-icon {
        width: 100%;
        height: 70px;
        background: #444;
        border-radius: 12px;
        color: #fff;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 0 6px rgba(0,0,0,0.4);
    }

    /* FREEBIES APP */
    #freebies-app {
        position: absolute;
        inset: 0;
        background: #111;
        display: none;
        flex-direction: column;
        overflow-y: auto;
        padding: 14px;
    }

    .freebie-card {
        background: #222;
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 14px;
        color: #fff;
        box-shadow: 0 0 8px rgba(0,0,0,0.5);
    }

    .freebie-title {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .freebie-meta {
        font-size: 13px;
        opacity: 0.8;
        margin-bottom: 10px;
    }

    .freebie-btn {
        width: 100%;
        padding: 10px;
        background: #00aa55;
        border: none;
        border-radius: 8px;
        color: #fff;
        font-size: 15px;
        cursor: pointer;
    }

    /* PAUSE MENU */
    #pause-menu {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.75);
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 20;
        color: #fff;
    }

    .pause-btn {
        width: 240px;
        padding: 12px;
        margin: 8px 0;
        background: #333;
        border: none;
        border-radius: 8px;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
    }

    /* EXCLUDED TIMER */
    #excluded-timer {
        position: absolute;
        top: 60px;
        right: 20px;
        padding: 8px 12px;
        background: rgba(255,255,255,0.15);
        border-radius: 8px;
        color: #fff;
        font-size: 14px;
        z-index: 5;
        display: none;
    }
</style>
</head>
<body>

<!-- ENGINE -->
<iframe id="engine-frame" src="engine.php?pid=<?php echo $playerId; ?>"></iframe>

<!-- MINIMAP -->
<div id="minimap"></div>

<!-- DASH -->
<div id="dash">
    Speed: <span id="dash-speed">0</span> km/h |
    Fuel: <span id="dash-fuel">0</span>L |
    HP: <span id="dash-hp">100</span>
</div>

<!-- TOP BAR -->
<div id="top-bar">
    $<span id="top-money">0</span> | <span id="top-time">00:00</span> | <span id="top-weather">Clear</span>
</div>

<!-- EXCLUDED TIMER -->
<div id="excluded-timer">Excluded: <span id="excluded-time">10:00</span></div>

<!-- PHONE -->
<div id="phone">
    <div id="phone-header">
        <span id="phone-time">00:00</span>
        <span id="phone-close" style="cursor:pointer;">✕</span>
    </div>

    <div id="phone-home">
        <div class="app-icon" id="app-freebies">Freebies</div>
        <div class="app-icon">Missions</div>
        <div class="app-icon">Garage</div>
        <div class="app-icon">Inventory</div>
        <div class="app-icon">Bank</div>
        <div class="app-icon">Events</div>
    </div>

    <div id="freebies-app">
        <div class="freebie-card">
            <div class="freebie-title">Moped</div>
            <div class="freebie-meta">Fast 0–25 km/h • No armor • 20L fuel • Session‑only</div>
            <button class="freebie-btn" onclick="claimStarter('moped')">Claim</button>
        </div>

        <div class="freebie-card">
            <div class="freebie-title">Sedan</div>
            <div class="freebie-meta">Slower 0–25 km/h • 5 armor • 50L fuel • Session‑only</div>
            <button class="freebie-btn" onclick="claimStarter('sedan')">Claim</button>
        </div>
    </div>
</div>

<!-- PAUSE MENU -->
<div id="pause-menu">
    <button class="pause-btn" onclick="sendZoom( map.getZoom() + 0.5 )">Zoom In</button>
    <button class="pause-btn" onclick="sendZoom( map.getZoom() - 0.5 )">Zoom Out</button>
    <button class="pause-btn" onclick="requestRespawn()">Respawn (Random 500m)</button>
    <button class="pause-btn" onclick="togglePause()">Close</button>
</div>

<script>
/* MINIMAP */
let map;
window.addEventListener('load', () => {
    map = new maplibregl.Map({
        container: 'minimap',
        style: 'https://api.maptiler.com/maps/019d3452-4395-7ecd-bbf0-c64a3d5060cd/style.json?key=uHmPABwBFcVhiPJcdCzb',
        center: [173.283, -41.270],
        zoom: 15,
        interactive: false
    });
});

/* PHONE */
const phone = document.getElementById('phone');
document.getElementById('phone-close').onclick = () => phone.style.display = 'none';
document.getElementById('app-freebies').onclick = () => {
    document.getElementById('phone-home').style.display = 'none';
    document.getElementById('freebies-app').style.display = 'flex';
};
function openPhone() {
    phone.style.display = 'flex';
    document.getElementById('phone-home').style.display = 'grid';
    document.getElementById('freebies-app').style.display = 'none';
}

/* PAUSE MENU */
function togglePause() {
    const p = document.getElementById('pause-menu');
    p.style.display = p.style.display === 'flex' ? 'none' : 'flex';
}

/* ENGINE COMMUNICATION */
function postToEngine(payload) {
    const frame = document.getElementById('engine-frame').contentWindow;
    frame.postMessage({ source: 'uix', payload }, '*');
}

function claimStarter(type) {
    postToEngine({ type: 'spawnStarterVehicle', vehicleType: type });
}

function requestRespawn() {
    postToEngine({ type: 'requestRespawn' });
}

function sendZoom(z) {
    postToEngine({ type: 'setWorldZoom', zoom: z });
}

/* RECEIVE FROM ENGINE */
window.addEventListener('message', (event) => {
    const data = event.data;
    if (!data || data.source !== 'engine') return;

    const p = data.payload;
    if (!p) return;

    if (p.type === 'hudUpdate') {
        document.getElementById('dash-speed').textContent = Math.round(p.speedKmh);
        document.getElementById('dash-hp').textContent = p.hp;
        document.getElementById('dash-fuel').textContent = p.fuel || 0;

        map.setCenter([p.position.x, p.position.y]);

        if (p.excluded) {
            document.getElementById('excluded-timer').style.display = 'block';
        } else {
            document.getElementById('excluded-timer').style.display = 'none';
        }
    }
});

/* KEYBINDS */
window.addEventListener('keydown', (e) => {
    if (e.code === 'KeyP') togglePause();
    if (e.code === 'KeyM') openPhone();
});
</script>

</body>
</html>