import { APP_STYLES } from "./app-assets.js";

export function htmlPage(): string {
  return `<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>mapix</title>
    <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
    <link rel="stylesheet" href="/vendor/leaflet/leaflet.css" />
    <style>
${APP_STYLES}
    </style>
  </head>
  <body data-theme="light">
    <div class="top-right-controls">
      <button class="secondary theme-toggle" id="theme-toggle" type="button" aria-label="Switch to dark mode">
        <span class="button-icon" id="theme-toggle-icon" aria-hidden="true">
          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 1.8V3.1M8 12.9v1.3M3.1 3.1l.9.9M12 12l.9.9M1.8 8H3.1M12.9 8h1.3M3.1 12.9l.9-.9M12 4l.9-.9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
            <circle cx="8" cy="8" r="3.2" stroke="currentColor" stroke-width="1.4"/>
          </svg>
        </span>
      </button>
      <button class="secondary route-toggle" id="route-toggle" type="button" aria-label="Hide route line" aria-pressed="true">
        <span class="button-icon" id="route-toggle-icon" aria-hidden="true">
          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 11.5 6.2 8.2c.4-.4 1-.5 1.5-.2l1.1.7c.5.3 1.1.2 1.5-.2L13 5.8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="3" cy="11.5" r="1" fill="currentColor"/>
            <circle cx="13" cy="5.8" r="1" fill="currentColor"/>
          </svg>
        </span>
      </button>
    </div>
    <main>
      <section class="map-panel">
        <div id="map"></div>
      </section>
    </main>

    <aside>
      <section class="card panel-stack">
        <div class="panel-toolbar">
          <button class="secondary panel-collapse" id="sidebar-collapse" type="button" aria-label="Collapse left panel">
            <span class="button-icon" id="sidebar-collapse-icon" aria-hidden="true">
              <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.5 4 5.5 8l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          </button>
          <img
            class="panel-logo"
            id="panel-logo"
            src="/assets/logo-light.png"
            alt="mapix"
            width="156"
            height="66"
          />
        </div>
        <label>
          Share URL
          <input
            id="share-url"
            placeholder="https://cloud.example.com/index.php/s/..."
            spellcheck="false"
            autocomplete="off"
          />
        </label>
        <div class="button-row">
          <button class="primary" id="load-share" type="button">
            <span class="button-icon" aria-hidden="true">
              <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 2v7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                <path d="M5 6.5 8 9.5 11 6.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M3 12.5h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
              </svg>
            </span>
            <span>Import</span>
          </button>
          <button class="danger" id="cancel-share" type="button" disabled>
            <span class="button-icon" aria-hidden="true">
              <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
              </svg>
            </span>
            <span>Stop</span>
          </button>
        </div>
        <div class="status-row">
          <span class="spinner" id="activity-spinner" aria-hidden="true"></span>
          <div class="status" id="share-status">Ready to import.</div>
        </div>
        <div class="progress" aria-label="Loading progress">
          <div class="progress-bar" aria-hidden="true">
            <div class="progress-fill" id="progress-fill"></div>
          </div>
          <div class="progress-meta">
            <span id="progress-text">0 / 0</span>
            <span id="progress-detail">ready</span>
          </div>
        </div>
      </section>

      <section class="card photo-card">
        <h2>Photos</h2>
        <small id="photo-count" class="muted">0 photos</small>
        <div id="photo-list" class="list">
          <div class="empty-state" id="empty-state">No images imported yet.</div>
        </div>
      </section>
    </aside>

    <section class="card timeline" aria-label="Photo timeline">
      <div class="timeline-summary" id="timeline-summary">No photos imported yet.</div>
      <div class="timeline-body">
        <div class="timeline-chart" id="timeline-chart">
          <div class="timeline-bars" id="timeline-bars"></div>
          <div class="timeline-selection" id="timeline-selection"></div>
          <div class="timeline-brush" id="timeline-brush"></div>
        </div>
      </div>
      <div class="timeline-actions">
        <button class="secondary panel-collapse" id="timeline-clear" type="button" aria-label="Reset range" disabled>
          <span class="button-icon" aria-hidden="true">
            <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 8a5 5 0 1 1-1.5-3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M11.8 2.9v3.2H8.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </span>
        </button>
        <button class="secondary panel-collapse" id="timeline-collapse" type="button" aria-label="Collapse timeline">
          <span class="button-icon" id="timeline-collapse-icon" aria-hidden="true">
            <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 6.5 8 10.5l4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </span>
        </button>
      </div>
    </section>

    <div class="overlay" id="overlay" aria-hidden="true">
      <button class="overlay-nav overlay-prev" id="overlay-prev" type="button" aria-label="Previous photo">
        <span class="button-icon" aria-hidden="true">
          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 4 5.5 8l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
      </button>
      <a class="overlay-action overlay-download" id="overlay-download" href="#" download aria-label="Download photo">
        <span class="button-icon" aria-hidden="true">
          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 2v7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
            <path d="M5 6.5 8 9.5 11 6.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3 12.5h10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
          </svg>
        </span>
      </a>
      <button class="close overlay-close" id="close-overlay" type="button" aria-label="Close photo">x</button>
      <div class="overlay-card" id="overlay-card">
        <div class="overlay-media" id="overlay-media">
          <div class="overlay-loading" id="overlay-loading" aria-live="polite" aria-atomic="true">
            <span class="spinner active" aria-hidden="true"></span>
            <strong id="overlay-loading-text">Loading full-size image...</strong>
          </div>
          <img id="overlay-image" alt="" />
        </div>
        <footer class="overlay-caption" id="overlay-caption">
          <strong id="overlay-title">Photo</strong>
        </footer>
      </div>
      <button class="overlay-nav overlay-next" id="overlay-next" type="button" aria-label="Next photo">
        <span class="button-icon" aria-hidden="true">
          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.5 4 10.5 8l-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
      </button>
    </div>

    <script src="/vendor/leaflet/leaflet.js"></script>
    <script type="module" src="/client/app.js"></script>
  </body>
</html>`;
}
