<?php
/**
 * dashboard.php — Route Tracker v3
 * Session-authenticated dashboard.
 */

$baseDir = dirname(__DIR__);
require_once $baseDir . '/src/Config.php';
require_once $baseDir . '/src/auth.php';

Auth::requireLogin();

try {
    $config = Config::load($baseDir);
} catch (Exception $e) {
    error_log('Route Tracker dashboard.php: ' . $e->getMessage());
    die('<pre>Configuration error — check the server error log for details.</pre>');
}

if (isset($_GET['logout'])) {
    Auth::logout($config);
    header('Location: login.php');
    exit;
}

$apiBase = 'api.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="<?= htmlspecialchars(Auth::getCsrfToken()) ?>">
<title>🗺️ Route Tracker</title>
<link rel="stylesheet" href="css/dashboard.css">
</head>
<body>

<!-- ─── HEADER ──────────────────────────────────────────────────────────── -->

<div class="header">
  <h1>🗺️ Route <span>Tracker</span></h1>
  <div class="header-controls">
    <select id="selYear"><option value="">All Years</option></select>
    <select id="selMonth">
      <option value="">All Months</option>
      <option value="1">January</option><option value="2">February</option>
      <option value="3">March</option><option value="4">April</option>
      <option value="5">May</option><option value="6">June</option>
      <option value="7">July</option><option value="8">August</option>
      <option value="9">September</option><option value="10">October</option>
      <option value="11">November</option><option value="12">December</option>
    </select>
    <button class="primary" onclick="refresh()">↺ Refresh</button>
    <span id="filterBadge" style="display:none;background:#5b7cf6;color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;"></span>

    <!-- Quick Trip split button -->
    <div class="qt-split" id="qtSplit">
      <button class="quick-trip-btn" id="btnQuickTrip">⚡ Quick Trip</button>
      <button class="qt-split-arrow" id="btnQtMenu" aria-label="More options" title="More options">▾</button>
      <div class="qt-menu" id="qtMenu" style="display:none">
        <button class="qt-menu-item" id="btnCleanupTrips">🗑 Clean up expired</button>
      </div>
    </div>

    <a href="settings.php" style="font-size:12px;color:var(--muted);text-decoration:none;padding:6px 10px;">⚙️ Settings</a>
    <a href="?logout=1" style="font-size:12px;color:var(--muted);text-decoration:none;padding:6px 10px;">Sign out</a>
    <span id="statusWrap">
      <span class="status-dot" id="statusDot"></span>
      <span id="statusText">–</span>
    </span>
  </div>
</div>

<!-- ─── TAB BAR ────────────────────────────────────────────────────────── -->

<div class="tab-bar">
  <button class="tab active" data-tab="advisor">Advisor</button>
  <button class="tab" data-tab="overview">Overview</button>
  <button class="tab" data-tab="best">Best Routes</button>
  <button class="tab" data-tab="byday">By Day</button>
  <button class="tab" data-tab="trends">Trends</button>
  <button class="tab" data-tab="history">History</button>
</div>

<!-- ─── FILTER BAR ─────────────────────────────────────────────────────── -->

<div class="route-bar" id="filterBar">
  <div id="routeBar" class="filter-group">
    <div class="chip active" data-id="">All Routes</div>
  </div>
  <div class="filter-sep" id="timeSep" style="display:none"></div>
  <div id="timeBar" class="filter-group" style="display:none">
    <div class="chip time-chip active" data-tw="all">All</div>
    <div class="chip time-chip" data-tw="today">Today</div>
    <div class="chip time-chip" data-tw="upcoming">Upcoming</div>
    <div class="chip time-chip" data-tw="next3h">Next 3 h</div>
    <div class="chip time-chip" data-tw="next">Next</div>
  </div>
</div>

<!-- ─── QUICK TRIP MODAL ──────────────────────────────────────────────────── -->
<div id="quickTripModal" class="modal-backdrop" style="display:none" role="dialog" aria-modal="true">
  <div class="modal-box">
    <div class="modal-header">
      <span class="modal-title">⚡ New Quick Trip</span>
      <button class="modal-close" id="btnCloseModal" aria-label="Close">✕</button>
    </div>
    <div class="modal-body">
      <div class="modal-field">
        <label for="qtOrigin">Origin</label>
        <div class="addr-wrap">
          <input type="text" id="qtOrigin" autocomplete="off" placeholder="Start address (optional)">
          <button type="button" class="addr-pick-btn" title="Pick from previous addresses" onclick="toggleQtAddrPicker('qtOrigin', this)">▾</button>
          <div class="addr-dropdown" id="dp_qtOrigin"></div>
        </div>
      </div>
      <div class="modal-field">
        <label for="qtDestination">Destination <span class="modal-req">*</span></label>
        <div class="addr-wrap">
          <input type="text" id="qtDestination" autocomplete="off" placeholder="Where are you going?">
          <button type="button" class="addr-pick-btn" title="Pick from previous addresses" onclick="toggleQtAddrPicker('qtDestination', this)">▾</button>
          <div class="addr-dropdown" id="dp_qtDestination"></div>
        </div>
      </div>
      <div class="modal-field">
        <label for="qtArrive">Arrive by <span class="modal-req">*</span></label>
        <input type="text" id="qtArrive" pattern="[0-2][0-9]:[0-5][0-9]" placeholder="HH:MM" maxlength="5" inputmode="numeric">
      </div>
      <div class="modal-field">
        <label for="qtLabel">Label</label>
        <input type="text" id="qtLabel" placeholder="Quick Trip — 14:30">
      </div>
      <div class="modal-field">
        <label for="qtAlertProfile">Alert Profile</label>
        <select id="qtAlertProfile">
          <option value="">None</option>
        </select>
      </div>
    </div>
    <div class="modal-footer">
      <div id="qtError" class="modal-error" style="display:none"></div>
      <button id="btnCancelModal">Cancel</button>
      <button class="primary" id="btnSubmitModal">Create Trip</button>
    </div>
  </div>
</div>

<!-- ─── CONTENT ────────────────────────────────────────────────────────── -->

<div class="content" id="content">
  <div class="loading"><div class="spinner"></div>Loading…</div>
</div>

<script>
  const API_BASE  = <?= json_encode($apiBase) ?>;
  const API_TOKEN = '';
</script>

<script src="js/dashboard.js"></script>

</body>
</html>
