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

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

<?php
/**
 * Recording-disabled banner.
 * Session Replay only captures new sessions while "Enable Session Recording"
 * is turned on. If it is off, no new recordings are being saved — so we surface
 * a prominent, plain-language notice with a one-click way to turn it back on.
 */
$vlens_recording_on = ( get_option( 'vlens_recording_enabled', '1' ) === '1' );
if ( ! $vlens_recording_on ) : ?>
<div class="vsr-rec-notice" id="vsrRecNotice" role="alert">
  <div class="vsr-rec-notice-icon" aria-hidden="true">
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
    </svg>
  </div>
  <div class="vsr-rec-notice-body">
    <div class="vsr-rec-notice-title">Session recording is turned off</div>
    <p class="vsr-rec-notice-text">
      New visitor sessions are <strong>not being recorded</strong> right now, so this page won't
      collect any new replays until you turn recording back on. Your existing recordings are safe.
    </p>
  </div>
  <div class="vsr-rec-notice-actions">
    <button type="button" class="vsr-rec-notice-btn" id="vsrEnableRecordingBtn">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg>
      <span class="vsr-rec-notice-btn-label">Turn on recording</span>
    </button>
    <a class="vsr-rec-notice-link" href="<?php echo esc_url( admin_url( 'admin.php?page=visitorlens-settings' ) ); ?>">Open settings</a>
    <span class="vsr-rec-notice-status" id="vsrEnableRecordingStatus" role="status" aria-live="polite"></span>
  </div>
</div>
<?php endif; ?>

<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="topbar-icon-btn" id="newTabBtn" title="Open in new tab" style="display:none">
        <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
          <polyline points="15 3 21 3 21 9"/>
          <line x1="10" y1="14" x2="21" y2="3"/>
        </svg>
      </button>
      <!-- More actions: gear opens a narrow floating popup with the buttons below -->
      <div class="gear-wrap" id="gearWrap">
        <button class="topbar-icon-btn" id="gearBtn" title="More actions" aria-label="More actions">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        </button>
        <div class="gear-menu" id="gearMenu">
          <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>
  </div>

  <div class="body">

    <!-- SESSION LIST -->
    <div class="list-panel">
      <div class="list-header">
        <div class="list-title">Recorded Sessions</div>
        <div class="list-header-right">
          <div class="list-count" id="listCount">Loading…</div>
          <button type="button" class="list-filter-toggle" id="listFilterToggle" title="Filters" aria-expanded="false" aria-controls="listFilters">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
          </button>
        </div>
      </div>
      <div class="list-filters" id="listFilters">
        <select class="filter-select" id="filterRange">
          <option value="">All time</option>
          <option value="today" selected>Today</option>
          <option value="yesterday">Yesterday</option>
          <option value="7">Last 7 days</option>
          <option value="30">Last 30 days</option>
          <option value="90">Last 90 days</option>
          <option value="custom">Custom range…</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="custom-date-row" id="customDateRow" style="display:none">
        <label class="cdr-label">From</label>
        <input type="date" class="cdr-input" id="customFrom">
        <label class="cdr-label">To</label>
        <input type="date" class="cdr-input" id="customTo">
      </div>
      <div class="bot-banner" id="botBanner" style="display:none"></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">

        <!-- STAGE: framed device viewport on a soft canvas -->
        <div class="replay-view" id="replayView">
          <button class="vsr-mob-close-btn" id="vsrMobCloseBtn" title="Close replay" aria-label="Close replay">
            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
          <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>
          <div class="replay-meta" id="replayMeta"></div>
          <!-- Event log -->
          <div class="event-log hidden" id="eventLog">
            <div class="log-header">
              <span class="log-title">Event Log</span>
              <button class="log-close-btn" id="logCloseBtn" title="Hide event log" aria-label="Hide event log">&times;</button>
            </div>
            <div class="log-body" id="logBody"></div>
          </div>
        </div>

        <!-- CONTROL BAR -->
        <div class="replay-toolbar">
          <button class="play-btn" id="playBtn" title="Play/Pause">
            <svg id="playIcon" width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
              <polygon points="5 3 19 12 5 21 5 3"/>
            </svg>
          </button>
          <button class="skip-btn" id="skipBackBtn" title="Back 10 seconds">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="1 4 1 10 7 10"/>
              <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
              <text x="12" y="16.3" font-size="7" font-family="Arial,sans-serif" font-weight="700" fill="currentColor" stroke="none" text-anchor="middle">10</text>
            </svg>
          </button>
          <button class="skip-btn" id="skipFwdBtn" title="Forward 30 seconds">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="23 4 23 10 17 10"/>
              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
              <text x="12" y="16.3" font-size="7" font-family="Arial,sans-serif" font-weight="700" fill="currentColor" stroke="none" text-anchor="middle">30</text>
            </svg>
          </button>
          <button class="jump-btn" id="jumpStartBtn" title="Jump to start">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
              <rect x="4" y="5" width="2.2" height="14" rx="1"/>
              <path d="M19 5v14l-11-7z"/>
            </svg>
          </button>
          <button class="jump-btn" id="jumpEndBtn" title="Jump to end">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
              <rect x="17.8" y="5" width="2.2" height="14" rx="1"/>
              <path d="M5 5v14l11-7z"/>
            </svg>
          </button>
          <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>
          <div class="speed-wrap" id="speedWrap">
            <button class="speed-btn" id="speedBtn" title="Playback speed" type="button">
              <span id="speedBtnLabel">2&times;</span>
              <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div class="speed-menu" id="speedMenu">
              <button class="speed-menu-item" data-speed="0.5">0.5&times;</button>
              <button class="speed-menu-item" data-speed="1">1&times;</button>
              <button class="speed-menu-item active" data-speed="2">2&times;</button>
              <button class="speed-menu-item" data-speed="4">4&times;</button>
              <button class="speed-menu-item" data-speed="8">8&times;</button>
            </div>
          </div>
          <div class="toolbar-sep" aria-hidden="true"></div>
          <div class="toolbar-actions" id="toolbarActions">
            <button class="next-click-btn" id="nextClickBtn" title="Jump to next click (n)">
              <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4m10-10h-4M6 12H2"/>
              </svg>
            </button>
            <button class="fullscreen-btn" id="fullscreenBtn" title="Toggle fullscreen">
              <svg id="fullscreenIcon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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>
            <button class="fullscreen-btn" id="logOpenBtn" title="Show event log">
              <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
                <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
              </svg>
            </button>
          </div>
        </div>

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

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