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

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

<?php
// Theme is configured on the Settings screen (General → Appearance).
$vlens_theme = get_option( 'vlens_dashboard_theme', 'light' ) === 'dark' ? 'dark' : 'light';
?>

<div class="vsr-stats-shell" id="vsr-stats-shell" data-theme="<?php echo esc_attr( $vlens_theme ); ?>">
  <div class="shell">

    <!-- ── SIDEBAR ─────────────────────────────────────────── -->
    <aside class="sidebar">
      <div class="logo">
        <span class="logo-dot"></span>VisitorLens
      </div>

      <nav class="nav">
        <button class="nav-item active" data-section="overview">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <rect x="3" y="3" width="7" height="7" rx="1"/>
            <rect x="14" y="3" width="7" height="7" rx="1"/>
            <rect x="3" y="14" width="7" height="7" rx="1"/>
            <rect x="14" y="14" width="7" height="7" rx="1"/>
          </svg>
          Overview
        </button>

        <button class="nav-item" data-section="pages">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14 2 14 8 20 8"/>
          </svg>
          Pages
        </button>

        <button class="nav-item" data-section="audience">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>
          Audience
        </button>

        <button class="nav-item" data-section="traffic">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"/>
            <line x1="2" y1="12" x2="22" y2="12"/>
            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
          </svg>
          Traffic
        </button>

        <button class="nav-item" data-section="realtime">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"/>
            <polyline points="12 6 12 12 16 14"/>
          </svg>
          Real-time
        </button>
      </nav>

    </aside><!-- /sidebar -->

    <!-- ── MAIN ────────────────────────────────────────────── -->
    <div class="main">

      <!-- Topbar -->
      <header class="topbar">
        <div class="topbar-left">
          <div class="topbar-title" id="vsrSectionTitle">Overview</div>
          <button class="vsr-refresh-btn vsr-refresh-btn--global" id="vsrGlobalRefresh" title="<?php esc_attr_e( 'Refresh all data', 'visitor-lens' ); ?>" aria-label="<?php esc_attr_e( 'Refresh all data', 'visitor-lens' ); ?>">
            <svg class="vsr-spin-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M23 4v6h-6"/><path d="M1 20v-6h6"/>
              <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
            </svg>
          </button>
        </div>
        <div class="topbar-right">
          <div class="range-tabs">
            <button class="range-tab"        data-range="7">7d</button>
            <button class="range-tab active" data-range="30">30d</button>
            <button class="range-tab"        data-range="90">90d</button>
            <button class="range-tab"        data-range="365">1y</button>
          </div>
          <div class="online-badge">
            <span class="online-dot"></span>
            <span id="vsrOnlineCount">—</span> online
          </div>
        </div>
      </header>

      <div class="content">

        <!-- ── OVERVIEW ──────────────────────────────────── -->
        <div class="section active" id="sec-overview">
          <div class="ov-layout">

            <!-- ── LEFT COLUMN (narrow — compact widgets) ─── -->
            <div class="ov-left">

              <!-- Card 1: Traffic Summary -->
              <div class="ov-card" id="ov-card-traffic-summary">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-live-dot" title="Updates every 30s"></span>
                    <span class="ov-card-title">Traffic Summary</span>
                    <span class="ov-info" title="Visitors &amp; page views across all time periods">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-traffic-summary">&#9650;</button>
                </div>
                <div class="ov-card-body">
                  <table class="ov-summary-table">
                    <thead><tr><th>Period</th><th>Visitors</th><th>Views</th></tr></thead>
                    <tbody id="ov-traffic-summary-body">
                      <tr><td colspan="3"><span class="ov-skel"></span></td></tr>
                    </tbody>
                  </table>
                </div>
              </div>

              <!-- Card 4: Browser Usage -->
              <div class="ov-card" id="ov-card-browsers">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Browser Usage</span>
                    <span class="ov-info" title="Browser distribution of your visitors">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-browsers">&#9650;</button>
                </div>
                <div class="ov-card-body" id="ov-browsers-body"><span class="ov-skel"></span></div>
              </div>

              <!-- Card 5: Operating Systems -->
              <div class="ov-card" id="ov-card-os">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Operating Systems</span>
                    <span class="ov-info" title="OS distribution of your visitors">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-os">&#9650;</button>
                </div>
                <div class="ov-card-body" id="ov-os-body"><span class="ov-skel"></span></div>
              </div>

              <!-- Card 6: Device Usage -->
              <div class="ov-card" id="ov-card-devices">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Device Usage</span>
                    <span class="ov-info" title="Desktop, mobile and tablet breakdown">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-devices">&#9650;</button>
                </div>
                <div class="ov-card-body" id="ov-devices-body"><span class="ov-skel"></span></div>
              </div>

              <!-- Card 7: Top Device Models -->
              <div class="ov-card" id="ov-card-device-models">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Top Device Models</span>
                    <span class="ov-info" title="Device category and browser family breakdown">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-device-models">&#9650;</button>
                </div>
                <div class="ov-card-body" id="ov-device-models-body"><span class="ov-skel"></span></div>
              </div>

              <!-- Card 8: Top Countries -->
              <div class="ov-card" id="ov-card-countries">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Top Countries</span>
                    <span class="ov-info" title="Countries sending most traffic">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-countries">&#9650;</button>
                </div>
                <div class="ov-card-body" id="ov-countries-body"><span class="ov-skel"></span></div>
              </div>

              <!-- Card 9: Top Referring Domains -->
              <div class="ov-card" id="ov-card-referrers">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Top Referring Domains</span>
                    <span class="ov-info" title="External sites sending you visitors">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-referrers">&#9650;</button>
                </div>
                <div class="ov-card-body" id="ov-referrers-body"><span class="ov-skel"></span></div>
              </div>

            </div><!-- /ov-left -->

            <!-- ── RIGHT COLUMN (wide — charts + tables) ──── -->
            <div class="ov-right">

              <!-- Card 2: Traffic Trend -->
              <div class="ov-card" id="ov-card-trend">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Traffic Trend</span>
                    <span class="ov-info" title="Visitors &amp; page views over time">&#9432;</span>
                  </div>
                  <div class="ov-head-actions">
                    <div class="ov-mini-tabs" id="ov-trend-gran">
                      <button class="ov-mini-tab active" data-gran="daily">Daily</button>
                      <button class="ov-mini-tab" data-gran="weekly">Weekly</button>
                    </div>
                    <label class="ov-compare-label">
                      <input type="checkbox" id="ov-trend-compare"> Compare
                    </label>
                    <button class="ov-collapse-btn" data-target="ov-card-trend">&#9650;</button>
                  </div>
                </div>
                <div class="ov-card-body">
                  <div class="ov-chart-wrap"><canvas id="ov-trend-chart"></canvas></div>
                </div>
              </div>

              <!-- Card 3: Search Engine Referrals -->
               <div class="ov-card" id="ov-card-online-now">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-live-dot"></span>
                    <span class="ov-card-title">Currently Online</span>
                    <span class="ov-info" title="Visitors active in the last 5 minutes">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-online-now">&#9650;</button>
                </div>
                <div class="ov-card-body" id="ov-online-now-body">
                  <div class="ov-online-empty">
                    <svg width="38" height="38" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    <p>No activity right now</p>
                  </div>
                </div>
              </div>



              <!-- Card 10: Top Pages -->
              <div class="ov-card" id="ov-card-pages">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Top Pages</span>
                    <span class="ov-info" title="Most viewed pages in the selected period">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-pages">&#9650;</button>
                </div>
                <div class="ov-card-body">
                  <div class="ov-tbl-wrap">
                    <table class="ov-table">
                      <thead><tr><th>#</th><th>Page</th><th>Views</th><th></th></tr></thead>
                      <tbody id="ov-pages-body"><tr><td colspan="4"><span class="ov-skel"></span></td></tr></tbody>
                    </table>
                  </div>
                </div>
              </div>

              <!-- Card 11: Most Active Visitors -->
               
              <div class="ov-card" id="ov-card-latest">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-live-dot" title="Updates every 30s"></span>
                    <span class="ov-card-title">Latest Visitors</span>
                    <span class="ov-info" title="Most recently seen visitors (last 24h)">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-latest">&#9650;</button>
                </div>
                <div class="ov-card-body">
                  <div class="ov-tbl-wrap">
                    <table class="ov-table">
                      <thead><tr><th>Time</th><th>Visitor</th><th>Source</th><th>Page</th><th>Views</th></tr></thead>
                      <tbody id="ov-latest-body"><tr><td colspan="5"><span class="ov-skel"></span></td></tr></tbody>
                    </table>
                  </div>
                </div>
              </div>
              <!-- Card 12: Latest Visitors -->
              <div class="ov-card" id="ov-card-most-active">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Most Active Visitors</span>
                    <span class="ov-info" title="Visitors with highest page view count in the period">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-most-active">&#9650;</button>
                </div>
                <div class="ov-card-body">
                  <div class="ov-tbl-wrap">
                    <table class="ov-table">
                      <thead><tr><th>Views</th><th>Visitor</th><th>Referrer</th><th>Entry</th><th>Exit</th><th>Last Seen</th></tr></thead>
                      <tbody id="ov-most-active-body"><tr><td colspan="6"><span class="ov-skel"></span></td></tr></tbody>
                    </table>
                  </div>
                </div>
              </div>

              <!-- Card 13: Currently Online -->
              <div class="ov-card" id="ov-card-search">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Search Engine Referrals</span>
                    <span class="ov-info" title="Traffic arriving from search engines">&#9432;</span>
                  </div>
                  <button class="ov-collapse-btn" data-target="ov-card-search">&#9650;</button>
                </div>
                <div class="ov-card-body">
                  <div class="ov-search-summary" id="ov-search-kpi"></div>
                  <div class="ov-chart-wrap ov-chart-sm"><canvas id="ov-search-chart"></canvas></div>
                  <div id="ov-search-bars"></div>
                </div>
              </div>

              <!-- Card 14: Global Visitor Distribution -->
              <div class="ov-card" id="ov-card-map">
                <div class="ov-card-head">
                  <div class="ov-title-group">
                    <span class="ov-card-title">Global Visitor Distribution</span>
                    <span class="ov-info" title="Geographic spread of your audience">&#9432;</span>
                  </div>
                  <div class="ov-head-actions">
                    <span class="ov-badge">Last 30 days</span>
                    <button class="ov-collapse-btn" data-target="ov-card-map">&#9650;</button>
                  </div>
                </div>
                <div class="ov-card-body">
                  <div id="ov-map-countries"></div>
                </div>
              </div>

            </div><!-- /ov-right -->

          </div><!-- /ov-layout -->
        </div><!-- /sec-overview -->

        <!-- ── PAGES ─────────────────────────────────────── -->
        <div class="section" id="sec-pages">
          <div class="card" data-refresh-section="pages">
            <div class="card-header">
              <div class="card-title">Top Pages</div>
              <span class="card-badge" id="vsrPagesBadge">30 days</span>
            </div>
            <div class="tbl-wrap">
              <table>
                <thead>
                  <tr><th>#</th><th>Page URL</th><th>Title</th><th>Views</th></tr>
                </thead>
                <tbody id="vsrPagesBody">
                  <tr><td colspan="4">Loading…</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div><!-- /sec-pages -->

        <!-- ── AUDIENCE ───────────────────────────────────── -->
        <div class="section" id="sec-audience">
          <div class="grid-2">
            <div class="card" data-refresh-section="audience">
              <div class="card-header"><div class="card-title">Countries</div></div>
              <div id="vsrCountriesBody">Loading…</div>
            </div>
            <div class="card" data-refresh-section="audience">
              <div class="card-header"><div class="card-title">Devices</div></div>
              <div class="donut-wrap">
                <canvas class="donut-canvas" id="vsrDeviceChart"></canvas>
                <div class="donut-legend" id="vsrDeviceLegend">Loading…</div>
              </div>
            </div>
          </div>
          <div class="grid-2">
            <div class="card" data-refresh-section="audience">
              <div class="card-header"><div class="card-title">Browsers</div></div>
              <div id="vsrBrowsersBody">Loading…</div>
            </div>
            <div class="card" data-refresh-section="audience">
              <div class="card-header"><div class="card-title">Operating Systems</div></div>
              <div id="vsrPlatformsBody">Loading…</div>
            </div>
          </div>
        </div><!-- /sec-audience -->

        <!-- ── TRAFFIC ────────────────────────────────────── -->
        <div class="section" id="sec-traffic">
          <div class="grid-2">
            <div class="card" data-refresh-section="traffic">
              <div class="card-header"><div class="card-title">Referrers</div></div>
              <div id="vsrReferrersBody">Loading…</div>
            </div>
            <div class="card" data-refresh-section="traffic">
              <div class="card-header"><div class="card-title">Search Engines</div></div>
              <div id="vsrSearchBody">Loading…</div>
            </div>
          </div>
        </div><!-- /sec-traffic -->

        <!-- ── REAL-TIME ───────────────────────────────────── -->
        <div class="section" id="sec-realtime">
          <div class="kpi-grid">
            <div class="kpi green">
              <div class="kpi-label">Currently Online</div>
              <div class="kpi-value" id="vsrRtOnline">—</div>
              <div class="kpi-sub">Active last 5 minutes</div>
            </div>
          </div>
          <div class="card" data-refresh-section="realtime">
            <div class="card-header">
              <div class="card-title">Recent Visitors</div>
              <span class="card-badge">Last 24h — auto-refreshes every 15s</span>
            </div>
            <div class="tbl-wrap">
              <table>
                <thead>
                  <tr>
                    <th>Status</th><th>Time</th><th>IP</th><th>User</th><th>Page</th>
                    <th>Country</th><th>Browser</th><th>Platform</th><th>Device</th><th>Source</th><th>Replay</th>
                  </tr>
                </thead>
                <tbody id="vsrRecentBody">
                  <tr><td colspan="11">Loading…</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div><!-- /sec-realtime -->

      </div><!-- /content -->
    </div><!-- /main -->

  </div><!-- /shell -->
</div><!-- /vsr-stats-shell -->
