<?php
// uix.php — Full HUD + Phone + Inventory + Events + Rotating Minimap
// Works with engine.php 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">

<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, sans-serif;
    }

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

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

    /* PLAYER ARROW */
    #player-arrow {
        position: absolute;
        width: 16px;
        height: 16px;
        top: calc(50% - 8px);
        left: calc(50% - 8px);
        z-index: 20;
        pointer-events: none;
        filter: drop-shadow(0 0 4px #00eaff) drop-shadow(0 0 6px #00eaff);
    }

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

    /* 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: 10;
        box-shadow: 0 0 10px rgba(0,255,255,0.3);
    }

    /* 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: 10;
        display: none;
    }

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

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

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

    .app-icon {
        width: 100%;
        height: 70px;
        background: #1a1a1d;
        border-radius: 12px;
        color: #00eaff;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 0 8px rgba(0,255,255,0.25);
        transition: 0.15s;
    }
    .app-icon:hover {
        background: #111;
        box-shadow: 0 0 12px rgba(0,255,255,0.4);
    }

    /* PHONE SUB-APPS */
    .phone-app {
        position: absolute;
        inset: 0;
        background: #0d0d0f;
        display: none;
        flex-direction: column;
        overflow-y: auto;
        padding: 14px;
        color: #fff;
    }

    /* FREEBIES */
    .freebie-card {
        background: #111;
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 14px;
        color: #fff;
        box-shadow: 0 0 8px rgba(0,255,255,0.25);
    }
    .freebie-title {
        font-size: 18px;
        margin-bottom: 6px;
        color: #00eaff;
    }
    .freebie-meta {
        font-size: 13px;
        opacity: 0.8;
        margin-bottom: 10px;
    }
    .freebie-btn {
        width: 100%;
        padding: 10px;
        background: #00eaff;
        border: none;
        border-radius: 8px;
        color: #000;
        font-size: 15px;
        cursor: pointer;
    }

    /* INVENTORY */
    #inventory-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.85);
        z-index: 30;
        display: none;
        flex-direction: column;
        padding: 20px;
        color: #fff;
    }

    #inventory-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 12px;
        margin-top: 20px;
    }

    .inv-slot {
        width: 100%;
        height: 70px;
        background: #111;
        border-radius: 8px;
        border: 1px solid #222;
        box-shadow: 0 0 6px rgba(0,255,255,0.2);
    }

    /* EVENTS / QUESTS */
    #events-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.85);
        z-index: 30;
        display: none;
        flex-direction: column;
        padding: 20px;
        color: #fff;
    }

    .event-card {
        background: #111;
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 14px;
        box-shadow: 0 0 8px rgba(255,51,102,0.4);
    }

    /* 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: 40;
        color: #fff;
    }

    .pause-btn {
        width: 240px;
        padding: 12px;
        margin: 8px 0;
        background: #111;
        border: none;
        border-radius: 8px;
        color: #00eaff;
        font-size: 16px;
        cursor: pointer;
        box-shadow: 0 0 8px rgba(0,255,255,0.25);
    }

    /* NOTIFICATIONS */
    #notifications {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 260px;
        z-index: 50;
    }
    .notif {
        background: rgba(0,0,0,0.75);
        color: #00eaff;
        padding: 10px 14px;
        margin-bottom: 10px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,255,255,0.3);
        font-size: 14px;
    }
</style>
</head>
<body>

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

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

    <!-- SVG ARROW -->
    <svg id="player-arrow" viewBox="0 0 24 24">
        <polygon points="12,2 20,22 12,17 4,22" fill="#ffffff" stroke="#000000" stroke-width="2"/>
    </svg>
</div>

<!-- DASH -->
<div id="dash">
    Speed: <span id="dash-speed">0</span> km/h |
    Fuel: <span id="dash-fuel">0</span>L |
    Veh HP: <span id="dash-vhp">100</span> |
    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" id="app-inventory">Inventory</div>
        <div class="app-icon" id="app-events">Events</div>
        <div class="app-icon" id="app-garage">Garage</div>
        <div class="app-icon" id="app-bank">Bank</div>
        <div class="app-icon" id="app-settings">Settings</div>
    </div>

    <!-- FREEBIES APP -->
    <div class="phone-app" 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>

    <!-- INVENTORY APP -->
    <div class="phone-app" id="inventory-app">
        <h2>Inventory</h2>
        <p>Tap to open full inventory.</p>
        <button class="freebie-btn" onclick="openInventory()">Open Inventory</button>
    </div>

    <!-- EVENTS APP -->
    <div class="phone-app" id="events-app">
        <h2>Events & Missions</h2>
        <div class="event-card">
            <strong>Daily Delivery</strong><br>
            Deliver a package across town.<br>
            Reward: $500
        </div>
        <div class="event-card">
            <strong>Fuel Run</strong><br>
            Refuel 3 vehicles.<br>
            Reward: $300
        </div>
    </div>

</div>

<!-- INVENTORY OVERLAY -->
<div id="inventory-overlay">
    <h2>Inventory</h2>
    <button class="freebie-btn" onclick="closeInventory()">Close</button>

    <div id="inventory-grid">
        <?php for ($i=0; $i<24; $i++): ?>
            <div class="inv-slot"></div>
        <?php endfor; ?>
    </div>
</div>

<!-- EVENTS OVERLAY -->
<div id="events-overlay">
    <h2>Events</h2>
    <button class="freebie-btn" onclick="closeEvents()">Close</button>

    <div class="event-card">
        <strong>Daily Delivery</strong><br>
        Deliver a package across town.<br>
        Reward: $500
    </div>
</div>

<!-- PAUSE MENU -->
<div id="pause-menu">
    <button class="pause-btn" onclick="sendZoom( minimap.getZoom() + 0.5 )">Zoom In</button>
    <button class="pause-btn" onclick="sendZoom( minimap.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>

<!-- NOTIFICATIONS -->
<div id="notifications"></div>

<script>
/* MINIMAP */
let minimap;

window.addEventListener('load', () => {
    minimap = new maplibregl.Map({
        container: 'minimap',
        style: './map-style.json',
        center: [173.283, -41.270],
        zoom: 15,
        interactive: false,
        pitch: 0,
        bearing: 0
    });
});

/* PHONE */
const phone = document.getElementById('phone');
document.getElementById('phone-close').onclick = () => phone.style.display = 'none';

function openPhone() {
    phone.style.display = 'flex';
    showPhoneHome();
}

function showPhoneHome() {
    document.querySelectorAll('.phone-app').forEach(a => a.style.display = 'none');
    document.getElementById('phone-home').style.display = 'grid';
}

document.getElementById('app-freebies').onclick = () => openApp('freebies-app');
document.getElementById('app-inventory').onclick = () => openApp('inventory-app');
document.getElementById('app-events').onclick = () => openApp('events-app');

function openApp(id) {
    document.getElementById('phone-home').style.display = 'none';
    document.querySelectorAll('.phone-app').forEach(a => a.style.display = 'none');
    document.getElementById(id).style.display = 'flex';
}

/* INVENTORY */
function openInventory() {
    document.getElementById('inventory-overlay').style.display = 'flex';
}
function closeInventory() {
    document.getElementById('inventory-overlay').style.display = 'none';
}

/* EVENTS */
function closeEvents() {
    document.getElementById('events-overlay').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 });
    notify("Starter vehicle claimed: " + type);
}

function requestRespawn() {
    postToEngine({ type: 'requestRespawn' });
    notify("Respawn requested");
}

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-vhp').textContent = p.shield || 100;
        document.getElementById('dash-fuel').textContent = p.fuel || 