<script src="../backend.js"></script>
<script src="ui.js"></script>
<script src="dist/QR.js"></script>
<script src="qr.js"></script>

<style>

    .background {
        z-index: -1;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .poster {
        z-index: 1;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 50%;
        height: 50%;
        transform: translate(-50%, -50%);
        background: transparent;
    }
    .poster-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /*  */

    .my-button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: calc(1vh + 0.5vw) calc(2vw + 1vh); /* Scaled padding */
        background: rgba(0, 0, 0, 0.3); /* Semi-transparent black */
        /* backdrop-filter: blur(6px); */ /* Blur effect */
        border: 1px solid rgba(255, 255, 255, 0.3); /* Light border for definition */
        border-radius: 12px; /* Nicely curved border */
        color: white; /* White text */
        font-size: calc(1vw + 1vh); /* Scaled font size */
        font-weight: 400;
        font-family: Montserrat;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        cursor: pointer;
    }

    /*  */

    .qr-container {
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 256px;
        height: 256px;
        transform: translate(-50%, -50%);
        padding: 8px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        display: none;
    }
    .qr-img {
        width: 100%;
        height: 100%;
    }

    /*  */

    .hover-effect {
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
        transform: scale(1);
        transition: background-color 0.2s, color 0.3s, transform 0.2s;
    }

    .hover-effect:hover {
        background-color: rgba(255, 255, 255, 0.8);
        color: black;
        transform: scale(1.05); /* Slight zoom effect */
    }

    /*  */

    .dot{
        display: none;
    }

    .dim{
        background: #fff;
        border-radius: 4px;
        border: none;
        box-sizing: border-box;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        color: rgba(0, 0, 0, 0.8);
        display: block;
        font-family: Montserrat, Futura, Helvetica Neue, sans-serif;
        font-size: 0.75em;
        font-weight: 400;
        max-width: 128px;
        overflow-wrap: break-word;
        padding: 0.5em 1em;
        position: absolute;
        width: max-content;
        height: max-content;
        transform: translate3d(-50%, -50%, 0);
        pointer-events: none;
        --min-hotspot-opacity: 0;
    }
    
    .dimensionLineContainer{
        pointer-events: none;
        display: block;
    }
    .dimensionLine{
        stroke: #16a5e6;
        stroke-width: 2;
        stroke-dasharray: 2;
    }

    .hide{
        display: none;
    }
    :not(:defined) > * { /* This keeps child nodes hidden while the element loads */
        display: none;
    }

    /*  */

    .annotation-div {
        z-index: 999;
        background: rgba(255, 255, 255, 0.3); /* Semi-transparent black */
        /* backdrop-filter: blur(6px); */ /* Blur effect for glass-like appearance */
        padding: calc(1vh + 0.5vw) calc(2vw + 1vh); /* Scaled padding */
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        color: white;
        font-size: calc(1vw + 0.5vh); /* Scaled font size */
        font-family: Montserrat, sans-serif; /* Consistent font */
        max-width: 33%;
        max-height: 33%;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    } /* Custom scrollbar styles for Webkit (Chrome, Edge, Safari) */
    .annotation-div::-webkit-scrollbar {
        width: 8px;
    }
    .annotation-div::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 4px;
    }
    .annotation-div::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }
    .annotation-div::-webkit-scrollbar-track {
        background: transparent;
    }

    .annotation-list {
        z-index: 999;
        background: rgba(0, 0, 0, 0.3); /* Semi-transparent black */
        /* backdrop-filter: blur(6px); */ /* Blur effect for glass-like appearance */
        padding: calc(0.5vh + 0.25vw) calc(1vh + 0.5vw); /* Scaled padding */
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        text-align: right; /* Aligns all child items to the right */
        max-width: 33%;
        max-height: 45%;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }

    .annotation-item {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.42); /* Consistent border style */
        border-radius: 8px; /* Rounded for a modern look */
        padding: calc(1vh + 0.5vw) calc(2vw + 1vh); /* Scaled padding */
        margin: calc(0.5vh + 0.25vw) 0; /* Spacing between items */
        width: 100%;
        color: white;
        text-align: center;
        transition: transform 0.2s ease, background-color 0.3s ease;
        cursor: pointer;
    }

</style>

<!--  -->

<script>
    self.ModelViewerElement = self.ModelViewerElement || {}
    self.ModelViewerElement.meshoptDecoderLocation = 'https://cdn.jsdelivr.net/npm/meshoptimizer/meshopt_decoder.js'
</script>

<model-viewer
    id="model-viewer"
    alt="4D Viewer by RunFox"
    poster=""
    src=""
    ios-src=""
    loading="eager"
    reveal="manual"
    environment-image="neutral"
    exposure="1"
    shadow-softness="0.6"
    shadow-intensity="1"
    tone-mapping="Neutral"
    interaction-prompt="none"
    camera-controls
    camera-target="auto auto auto"
    camera-orbit="auto auto auto"
    min-camera-orbit="-Infinity 0deg auto"
    max-camera-orbit="Infinity 90deg auto"
    field-of-view="auto"
    min-field-of-view="0deg"
    max-field-of-view="90deg"
    ar
    ar-scale="fixed"
    ar-modes="scene-viewer webxr quick-look"
    ar-placement="floor"
    visibility="hidden"
>

<!-- 
    autoplay
    auto-rotate
    auto-rotate-delay="10000"
 -->

    <div class="progress-bar hide" slot="progress-bar">
        <div class="update-bar"></div>
    </div>

    <button slot="ar-button" style="display: none;">
    </button>

    <button slot="hotspot-dot+X-Y+Z" class="dot dimdot hide" data-position="1 -1 1" data-normal="1 0 0"></button>
    <button slot="hotspot-dim+X-Y" class="dim dimdot hide" data-position="1 -1 0" data-normal="1 0 0"></button>
    <button slot="hotspot-dot+X-Y-Z" class="dot dimdot hide" data-position="1 -1 -1" data-normal="1 0 0"></button>
    <button slot="hotspot-dim+X-Z" class="dim dimdot hide" data-position="1 0 -1" data-normal="1 0 0"></button>
    <button slot="hotspot-dot+X+Y-Z" class="dot dimdot hide" data-position="1 1 -1" data-normal="0 1 0"></button>
    <button slot="hotspot-dim+Y-Z" class="dim dimdot hide" data-position="0 -1 -1" data-normal="0 1 0"></button>
    <button slot="hotspot-dot-X+Y-Z" class="dot dimdot hide" data-position="-1 1 -1" data-normal="0 1 0"></button>
    <button slot="hotspot-dim-X-Z" class="dim dimdot hide" data-position="-1 0 -1" data-normal="-1 0 0"></button>
    <button slot="hotspot-dot-X-Y-Z" class="dot dimdot hide" data-position="-1 -1 -1" data-normal="-1 0 0"></button>
    <button slot="hotspot-dim-X-Y" class="dim dimdot hide" data-position="-1 -1 0" data-normal="-1 0 0"></button>
    <button slot="hotspot-dot-X-Y+Z" class="dot dimdot hide" data-position="-1 -1 1" data-normal="-1 0 0"></button>

    <svg id="dimLines" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="dimensionLineContainer hide">
        <defs>
            <filter id="glow">
                <feGaussianBlur stdDeviation="3" result="coloredBlur" />
                <feMerge>
                    <feMergeNode in="coloredBlur" />
                    <feMergeNode in="coloredBlur" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
            </filter>
            <filter id="shadow">
                <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" flood-opacity="0.5" />
            </filter>
        </defs>
        <line class="dimensionLine" filter="url(#glow)"></line>
        <line class="dimensionLine" filter="url(#glow)"></line>
        <line class="dimensionLine" filter="url(#glow)"></line>
        <line class="dimensionLine" filter="url(#glow)"></line>
        <line class="dimensionLine" filter="url(#glow)"></line>
    </svg>
    
    <!--  -->
    
    <div id="storyboard-display" class="annotation-list hide" style="position: absolute; top: calc(2vh + 1vw); right: calc(2vh + 1vw); border-radius: 12px;">
        <ul id="storyboard-list" style="list-style: none; padding: 0; margin: 0;">
        </ul>
    </div>
    
    <div id="annotation-display" class="annotation-div hide" style="position: absolute; bottom: calc(2vh + 1vw); left: 50%;"> <!-- transform: translate(-50%, 0%); -->
        <div id="annotation-div">
        </div>
    </div>

    <button id="next-button" class="my-button hover-effect hide" style="z-index: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%;">
        <span class="material-icons">arrow_forward_ios</span>
    </button>

</model-viewer>

<button id="dim-button" class="my-button hide hover-effect" style="position: absolute; bottom: calc(2vh + 1vw); left: calc(2vh + 1vw);">
    <span class="material-icons" style="margin-right: calc(1vh + 0.5vw);">design_services</span>Show Sizes
</button>

<button id="ar-button" class="my-button hide hover-effect" style="position: absolute; bottom: calc(2vh + 1vw); right: calc(2vh + 1vw);">
    See in Your Space<span class="material-icons" style="margin-left: calc(1vh + 1vw);">view_in_ar</span>
</button>

<div style="position:absolute; top: calc(2vh + 1vw); left: calc(2vh + 1vw); display: flex; flex-direction: column; justify-items: start; align-items: start; gap: calc(1vh + 0.5vw);">
    <button id="newchunk-button" class="my-button hide hover-effect">
        <span class="material-icons" style="margin-right: calc(1vh + 0.5vw);">auto_stories</span>New Page
    </button>
    <button id="addtochunk-button" class="my-button hide hover-effect">
        <span class="material-icons" style="margin-right: calc(1vh + 0.5vw);">add_a_photo</span>New Step
    </button>
    <button id="raycast-button" class="my-button hide hover-effect">
        <span class="material-icons" style="margin-right: calc(1vh + 0.5vw);"><span class="material-symbols-outlined">stylus_laser_pointer</span></span>Raycast
    </button>
    <button id="focus-button" class="my-button hide hover-effect">
        <span class="material-icons" style="margin-right: calc(1vh + 0.5vw);">camera</span>Focus
    </button>
    <button id="download-button" class="my-button hide hover-effect">
        <span class="material-icons" style="margin-right: calc(1vh + 0.5vw);">download</span>Save
    </button>
</div>

<div id="qr-container" class="qr-container">
    <img id="qr-img" class="qr-img"></img>
</div>

<div id="background" class="background"></div>

<div id="poster" class="poster">
    <img id="poster-img" class="poster-img" alt="Loading..." />
</div>