<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>

<?php include VLENS_PLUGIN_DIR . 'admin/views/partials/nav.php'; ?>

<div class="vsr-replay-shell" id="vsr-replay-shell" data-theme="light">

  <!-- TOP BAR -->
  <div class="topbar">
    <div class="topbar-logo"><span class="logo-pip"></span>Session Replay</div>
    <div class="topbar-sep"></div>
    <input class="topbar-search" type="text" id="uriFilter" placeholder="Filter by page URI…">
    <div class="topbar-right">
      <button class="theme-btn" id="vsrReplayThemeToggle">☾ Dark</button>
      <!-- 19a: Export dropdown -->
      <div class="export-wrap" id="exportWrap">
        <button class="export-btn" id="exportBtn">&#8595; Export</button>
        <div class="export-menu" id="exportMenu">
          <button class="export-menu-item" id="exportCsvBtn">Export CSV</button>
          <button class="export-menu-item" id="exportJsonBtn">Export JSON</button>
        </div>
      </div>
      <!-- 19c: Bulk delete -->
      <button class="bulk-del-btn" id="bulkDelBtn">&#128465; Delete Filtered</button>
      <button class="clear-btn" id="clearBtn">&#128465; Clear All</button>
    </div>
  </div>

  <div class="body">

    <!-- SESSION LIST -->
    <div class="list-panel">
      <div class="list-header">
        <div class="list-title">Recorded Sessions</div>
        <div class="list-count" id="listCount">Loading…</div>
      </div>
      <div class="list-filters" id="listFilters">
        <select class="filter-select" id="filterRange">
          <option value="">All time</option>
          <option value="today">Today</option>
          <option value="7" selected>Last 7 days</option>
          <option value="30">Last 30 days</option>
          <option value="90">Last 90 days</option>
        </select>
        <select class="filter-select" id="filterDevice">
          <option value="">All devices</option>
          <option value="desktop">Desktop</option>
          <option value="tablet">Tablet</option>
          <option value="mobile">Mobile</option>
        </select>
      </div>
      <div class="list-scroll" id="sessionList">
        <div style="padding:32px;text-align:center;color:var(--text3)">Loading sessions…</div>
      </div>
      <div class="list-pagination">
        <button class="pg-btn" id="pgPrev" disabled>&#8592; Prev</button>
        <span class="pg-info" id="pgInfo">Page 1</span>
        <button class="pg-btn" id="pgNext">Next &#8594;</button>
      </div>
    </div>

    <!-- REPLAY PANEL -->
    <div class="replay-panel" id="replayPanel">
      <div class="replay-empty" id="replayEmpty">
        <svg width="64" height="64" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>
        </svg>
        <p>Select a session to replay</p>
      </div>

      <!-- Hidden until session selected -->
      <div id="replayUI" style="display:none;flex:1;flex-direction:column;overflow:hidden">

        <!-- TOOLBAR -->
        <div class="replay-toolbar">
          <button class="play-btn" id="playBtn" title="Play/Pause">
            <svg id="playIcon" width="14" height="14" fill="currentColor" viewBox="0 0 24 24">
              <polygon points="5 3 19 12 5 21 5 3"/>
            </svg>
          </button>
          <select class="speed-select" id="speedSelect">
            <option value="0.5">0.5&times;</option>
            <option value="1">1&times;</option>
            <option value="2" selected>2&times;</option>
            <option value="4">4&times;</option>
            <option value="8">8&times;</option>
          </select>
          <div class="time-display" id="timeDisplay">0:00 / 0:00</div>
          <div class="progress-wrap" id="progressWrap">
            <div class="event-markers" id="eventMarkers"></div>
            <div class="progress-fill" id="progressFill" style="width:0%"></div>
            <div class="progress-thumb" id="progressThumb" style="left:0%"></div>
          </div>
          <button class="next-click-btn" id="nextClickBtn" title="Jump to next click (n)">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4m10-10h-4M6 12H2"/>
            </svg>
            Next Click
          </button>
          <button class="fullscreen-btn" id="fullscreenBtn" title="Toggle fullscreen">
            <svg id="fullscreenIcon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
            </svg>
          </button>
          <div class="replay-meta" id="replayMeta"></div>
        </div>

        <!-- VIEWPORT -->
        <div class="replay-view" id="replayView">
          <div class="vp-scaler" id="vpScaler">
            <div class="vp-frame" id="vpFrame">
              <div class="cursor" id="cursor" style="display:none">
                <div class="cursor-dot"></div>
              </div>
              <div class="scroll-indicator" id="scrollIndicator"></div>
            </div>
          </div>
          <!-- Session transition overlay -->
          <div class="session-transition" id="sessionTransition">
            <div class="st-label" id="stLabel">Next Session</div>
            <div class="st-sub" id="stSub"></div>
          </div>
          <!-- Event log -->
          <div class="event-log" id="eventLog">
            <div class="log-header" id="logToggle">
              <span class="log-title">Event Log</span>
              <span class="log-toggle" id="logToggleIcon">&#9660;</span>
            </div>
            <div class="log-body" id="logBody"></div>
          </div>
        </div>

      </div><!-- /replayUI -->
    </div><!-- /replay-panel -->

  </div><!-- /body -->
</div><!-- /vsr-replay-shell -->
