<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import maplibregl from 'maplibre-gl';
  import 'maplibre-gl/dist/maplibre-gl.css';

  export let handle: string;
  export let base: string;
  export let embedded: boolean = false;

  interface Track { id: string; date: string; type: string; name: string; dist: number; coords: [number,number][]; }

  let mapEl: HTMLDivElement;
  let map: any;
  let mapReady = false;

  let tracks: Track[] = [];
  let loading = true;
  let error = '';

  // Filters
  let selectedTypes: Set<string> = new Set();
  let dateFrom = '';
  let dateTo = '';
  let selectedYear: string | null = null;
  let selectedMonth: number | null = null;

  // View
  let viewMode: 'lines' | 'heatmap' = 'heatmap';
  let heatmapMode: 'global' | 'bytype' = 'bytype';

  // Tile layers — same as planner
  const TILES: Record<string, { tiles: string[]; attribution: string; label: string }> = {
    grey:      { label: 'Grey',      attribution: '© CARTO | © OpenStreetMap contributors',     tiles: ['https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png','https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png','https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'] },
    cyclosm:   { label: 'Cycle',     attribution: '© CyclOSM | © OpenStreetMap contributors',   tiles: ['https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png','https://b.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png','https://c.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png'] },
    osm:       { label: 'OSM',       attribution: '© OpenStreetMap contributors',               tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'] },
    topo:      { label: 'Topo',      attribution: '© OpenTopoMap | © OpenStreetMap contributors', tiles: ['https://a.tile.opentopomap.org/{z}/{x}/{y}.png','https://b.tile.opentopomap.org/{z}/{x}/{y}.png','https://c.tile.opentopomap.org/{z}/{x}/{y}.png'] },
    satellite: { label: 'Sat',       attribution: '© Esri World Imagery',                       tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'] },
  };
  const TILE_ORDER = ['grey', 'cyclosm', 'osm', 'topo', 'satellite'];
  let tileKey = 'grey';

  const TYPE_COLORS: Record<string, string> = {
    cycling: '#e879a0',
    running: '#60a5fa',
    hiking:  '#4ade80',
    skiing:  '#93c5fd',
    other:   '#a78bfa',
  };
  const HEAT_TYPES = Object.keys(TYPE_COLORS);

  function typeColor(t: string): string { return TYPE_COLORS[t] ?? TYPE_COLORS.other; }

  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

  // ── Derived ────────────────────────────────────────────────────────────────

  $: allTypes = [...new Set(tracks.map(t => t.type))].sort();
  $: availableYears = [...new Set(tracks.map(t => t.date.slice(0,4)).filter(Boolean))].sort().reverse();

  let typesInitialized = false;
  $: if (allTypes.length > 0 && !typesInitialized) { selectedTypes = new Set(allTypes); typesInitialized = true; }

  $: filteredTracks = tracks.filter(t => {
    if (!selectedTypes.has(t.type)) return false;
    if (dateFrom && t.date < dateFrom) return false;
    if (dateTo && t.date > dateTo) return false;
    return true;
  });

  $: if (mapReady) _updateMap(filteredTracks, viewMode, heatmapMode);

  // ── Filters ────────────────────────────────────────────────────────────────

  function setTile(key: string) {
    tileKey = key;
    map?.getSource('base')?.setTiles(TILES[key].tiles);
  }

  function toggleType(t: string) {
    const s = new Set(selectedTypes);
    s.has(t) ? s.delete(t) : s.add(t);
    selectedTypes = s;
  }

  function selectAllTypes() { selectedTypes = new Set(allTypes); }
  function clearAllTypes()  { selectedTypes = new Set(); }

  function setYear(y: string) {
    if (selectedYear === y) { selectedYear = null; selectedMonth = null; dateFrom = ''; dateTo = ''; return; }
    selectedYear = y;
    selectedMonth = null;
    dateFrom = `${y}-01-01`;
    dateTo   = `${y}-12-31`;
  }

  function setMonth(m: number) { // m: 1-12
    if (!selectedYear) return;
    selectedMonth = m;
    const mm  = String(m).padStart(2, '0');
    const last = new Date(+selectedYear, m, 0).getDate();
    dateFrom = `${selectedYear}-${mm}-01`;
    dateTo   = `${selectedYear}-${mm}-${String(last).padStart(2,'0')}`;
  }

  function clearMonth() {
    if (!selectedYear) return;
    selectedMonth = null;
    dateFrom = `${selectedYear}-01-01`;
    dateTo   = `${selectedYear}-12-31`;
  }

  function clearDates() { dateFrom = ''; dateTo = ''; selectedYear = null; selectedMonth = null; }

  // ── Map ────────────────────────────────────────────────────────────────────

  let _bbox: { w: number; e: number; s: number; n: number } | null = null;

  function _getBbox() {
    if (!map) return null;
    const b = map.getBounds();
    return { w: b.getWest(), e: b.getEast(), s: b.getSouth(), n: b.getNorth() };
  }

  function _inBbox(lng: number, lat: number): boolean {
    if (!_bbox) return true;
    return lng >= _bbox.w && lng <= _bbox.e && lat >= _bbox.s && lat <= _bbox.n;
  }

  function _linesGeoJSON(ts: Track[]) {
    const visible = _bbox ? ts.filter(t => t.coords.some(([lng, lat]) => _inBbox(lng, lat))) : ts;
    return { type: 'FeatureCollection', features: visible.map(t => ({
      type: 'Feature',
      geometry: { type: 'LineString', coordinates: t.coords },
      properties: { type: t.type },
    }))};
  }

  function _empty() { return { type: 'FeatureCollection', features: [] }; }

  function _updateMap(filtered: Track[], view: string, heatMode: string) {
    const linesSrc = map.getSource('explore-lines');
    if (!linesSrc) return;

    linesSrc.setData(_linesGeoJSON(filtered));

    map.setLayoutProperty('explore-lines',       'visibility', view === 'lines'   ? 'visible' : 'none');
    map.setLayoutProperty('explore-heat-global', 'visibility', view === 'heatmap' && heatMode === 'global' ? 'visible' : 'none');
    for (const t of HEAT_TYPES)
      map.setLayoutProperty(`explore-heat-${t}`, 'visibility',
        view === 'heatmap' && heatMode === 'bytype' && selectedTypes.has(t) ? 'visible' : 'none');
  }

  function _fitBounds(ts: Track[]) {
    if (!ts.length) return;
    let w = Infinity, e = -Infinity, s = Infinity, n = -Infinity;
    for (const t of ts) for (const [lng, lat] of t.coords) {
      if (lng < w) w = lng; if (lng > e) e = lng;
      if (lat < s) s = lat; if (lat > n) n = lat;
    }
    if (w === Infinity) return;
    map.fitBounds([[w,s],[e,n]], { padding: 40, maxZoom: 14 });
  }

  onMount(async () => {
    try {
      const r = await fetch('/api/me/tracks', { credentials: 'include' });
      if (!r.ok) { error = r.status === 404 ? 'No tracks baked yet — upload activities first.' : `Error ${r.status}`; loading = false; return; }
      const d = await r.json();
      tracks = d.tracks ?? [];
    } catch (e: any) { error = e.message ?? 'Failed to load'; loading = false; return; }
    loading = false;

    map = new maplibregl.Map({
      container: mapEl,
      style: { version: 8,
        sources: { base: { type: 'raster', tiles: TILES.grey.tiles, tileSize: 256, attribution: TILES.grey.attribution } },
        layers: [{ id: 'base', type: 'raster', source: 'base' }],
      },
      center: [12, 42], zoom: 5,
    });
    map.addControl(new maplibregl.NavigationControl(), 'top-right');

    map.on('load', () => {
      map.addSource('explore-lines', { type: 'geojson', data: _empty() });

      // Normal lines — color by type, readable opacity
      map.addLayer({ id: 'explore-lines', type: 'line', source: 'explore-lines', layout: { visibility: 'none' },
        paint: { 'line-width': 2, 'line-opacity': 0.5,
          'line-color': ['match', ['get', 'type'],
            'cycling', TYPE_COLORS.cycling, 'running', TYPE_COLORS.running,
            'hiking',  TYPE_COLORS.hiking,  'skiing',  TYPE_COLORS.skiing,
            TYPE_COLORS.other],
        },
      });

      const heatWidth   = ['interpolate', ['linear'], ['zoom'],  5, 2,    10, 4,    14, 7,    18, 10];
      const heatOpacity = ['interpolate', ['linear'], ['zoom'],  5, 0.10, 10, 0.12, 14, 0.15, 18, 0.18];

      // Global heatmap — all lines in warm amber, very low opacity so overlapping routes stack up
      map.addLayer({ id: 'explore-heat-global', type: 'line', source: 'explore-lines', layout: { visibility: 'none' },
        paint: { 'line-width': heatWidth, 'line-opacity': heatOpacity, 'line-blur': 1, 'line-color': '#f97316' },
      });

      // Per-type heatmap layers — same accumulation trick, type-specific colour
      for (const [type, hex] of Object.entries(TYPE_COLORS)) {
        map.addLayer({ id: `explore-heat-${type}`, type: 'line', source: 'explore-lines',
          filter: ['==', ['get', 'type'], type], layout: { visibility: 'none' },
          paint: { 'line-width': heatWidth, 'line-opacity': heatOpacity, 'line-blur': 1, 'line-color': hex },
        });
      }

      mapReady = true;
      _bbox = _getBbox();
      _updateMap(tracks, viewMode, heatmapMode);
      _fitBounds(tracks);
    });

    map.on('moveend', () => {
      _bbox = _getBbox();
      if (mapReady) _updateMap(filteredTracks, viewMode, heatmapMode);
    });
  });

  onDestroy(() => { if (map) map.remove(); });
</script>

<div class="explore-layout">
  <!-- Sidebar -->
  <aside class="sidebar">
    {#if !embedded}
    <header class="sidebar-header">
      <span class="sidebar-title">Explore</span>
      <a href="{base}u/{handle}/athlete/" class="back-link">← Athlete</a>
    </header>
    {/if}

    <!-- Tile layer -->
    <section class="section">
      <p class="label">Map</p>
      <div class="pills">
        {#each TILE_ORDER as key}
          <button class="pill" class:active={tileKey === key} onclick={() => setTile(key)}>{TILES[key].label}</button>
        {/each}
      </div>
    </section>

    <!-- Type filter -->
    <section class="section">
      <div class="label-row">
        <p class="label">Type</p>
        <div class="label-actions">
          <button class="mini-btn" onclick={selectAllTypes}>all</button>
          <button class="mini-btn" onclick={clearAllTypes}>none</button>
        </div>
      </div>
      <div class="pills">
        {#each allTypes as t}
          <button class="pill type-pill" class:active={selectedTypes.has(t)} onclick={() => toggleType(t)}
            style:--type-color={typeColor(t)}>
            <span class="type-dot"></span>{t}
          </button>
        {/each}
      </div>
    </section>

    <!-- Date filter -->
    <section class="section">
      <p class="label">Date</p>
      <div class="pills year-pills">
        <button class="pill" class:active={!dateFrom && !dateTo} onclick={clearDates}>All</button>
        {#each availableYears as y}
          <button class="pill" class:active={selectedYear === y} onclick={() => setYear(y)}>{y}</button>
        {/each}
      </div>
      {#if selectedYear}
        <div class="pills month-pills">
          <button class="pill small" class:active={selectedMonth === null} onclick={clearMonth}>All</button>
          {#each MONTHS as m, i}
            <button class="pill small"
              class:active={selectedMonth === i + 1}
              onclick={() => setMonth(i + 1)}>{m}</button>
          {/each}
        </div>
      {/if}
      <div class="date-inputs">
        <input type="date" class="date-input" bind:value={dateFrom} placeholder="From" />
        <input type="date" class="date-input" bind:value={dateTo}   placeholder="To" />
      </div>
    </section>

    <!-- View toggle -->
    <section class="section">
      <p class="label">View</p>
      <div class="pills">
        <button class="pill" class:active={viewMode === 'lines'}   onclick={() => viewMode = 'lines'}>Lines</button>
        <button class="pill" class:active={viewMode === 'heatmap'} onclick={() => viewMode = 'heatmap'}>Heatmap</button>
      </div>
      {#if viewMode === 'heatmap'}
        <div class="pills" style="margin-top:0.375rem">
          <button class="pill small" class:active={heatmapMode === 'global'} onclick={() => heatmapMode = 'global'}>Global</button>
          <button class="pill small" class:active={heatmapMode === 'bytype'} onclick={() => heatmapMode = 'bytype'}>By type</button>
        </div>
      {/if}
    </section>

    <!-- Stats -->
    <section class="section">
      <p class="stat-line">
        <span class="stat-val">{filteredTracks.length}</span>
        <span class="muted"> / {tracks.length} tracks</span>
      </p>
      {#if filteredTracks.length > 0}
        <p class="stat-line muted small">
          {(filteredTracks.reduce((s,t) => s + t.dist, 0) / 1000).toFixed(0)} km total
        </p>
      {/if}
    </section>

    {#if loading}<p class="status">Loading tracks…</p>{/if}
    {#if error}<p class="status error">{error}</p>{/if}
  </aside>

  <!-- Map -->
  <div class="map-wrap" bind:this={mapEl}></div>
</div>

<style>
  .explore-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
  }

  .sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .sidebar-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .sidebar-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
  .back-link { font-size: 0.72rem; color: var(--text-5); text-decoration: none; }
  .back-link:hover { color: var(--text-4); }

  .section {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-sub, var(--border));
  }

  .label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-5);
    margin: 0 0 0.45rem;
  }

  .label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem; }
  .label-row .label { margin-bottom: 0; }
  .label-actions { display: flex; gap: 0.25rem; }
  .mini-btn { background: none; border: none; font-size: 0.65rem; color: var(--text-5); cursor: pointer; padding: 0 0.2rem; }
  .mini-btn:hover { color: var(--text-4); }

  .pills { display: flex; gap: 0.3rem; flex-wrap: wrap; }
  .pill {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-4);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.12s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }
  .pill:hover { border-color: var(--accent); color: var(--accent); }
  .pill.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
  .pill.small { padding: 0.15rem 0.45rem; font-size: 0.67rem; }

  .type-pill.active { background: color-mix(in srgb, var(--type-color) 15%, transparent); border-color: var(--type-color); color: var(--type-color); }
  .type-pill:hover  { border-color: var(--type-color); color: var(--type-color); }
  .type-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--type-color); flex-shrink: 0; }

  .year-pills { margin-bottom: 0.4rem; }
  .month-pills { margin-bottom: 0.4rem; }

  .date-inputs { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
  .date-input {
    width: 100%;
    padding: 0.25rem 0.4rem;
    border-radius: 0.3rem;
    border: 1px solid var(--border);
    background: var(--bg-elevated, var(--bg));
    color: var(--text-primary);
    font-size: 0.72rem;
    box-sizing: border-box;
  }
  .date-input:focus { outline: none; border-color: var(--accent); }

  .stat-line { margin: 0 0 0.2rem; font-size: 0.8rem; }
  .stat-val { font-weight: 600; color: var(--text-primary); }

  .status { font-size: 0.72rem; color: var(--text-5); padding: 0.5rem 1rem 0; margin: 0; }
  .status.error { color: #f87171; }

  .muted { color: var(--text-5); }
  .small { font-size: 0.72rem; margin: 0; }

  .map-wrap { flex: 1; height: 100%; }
</style>
