<!--
============================================================
Runner's Rings 開発メモ / 2026-08-27

【現在の状態】
・Strava OAuth連携：成功
・Strava → Supabase runs 保存：成功
・起動時のStrava自動同期：実装済み
・Run / TrailRun / VirtualRun のみ対象
・ルートがあるActivityのみ保存
・Strava同士の重複保存を防止済み

【Supabase runs の重要設定】
UNIQUE INDEX:
runs_user_strava_unique
(user_id, strava_id)

※ strava-sync の
onConflict: "user_id,strava_id"
とセットなので削除・変更しない。

【2026-08-27 動作確認】
起動時同期：
Strava取得 6件
対象ラン 6件
saved 0件
→ 既存データなので0件で正常。

【次回作業】
Garmin等の既存データとStravaデータの
「同一ラン重複判定」を実装する。
Strava同士の重複防止とは別問題。
【UI修正】
・クラウド保存ラン一覧ボタン：
  押下時にクラウド一覧の先頭へ自動スクロールするよう修正済み。

・ラン選択時の初期ズーム最適化：
  未対応。
・ラン選択時の初期ズーム最適化：
  maxZoom を 13 → 16 に変更し、短いランでも見やすい大きさで表示されるよう修正済み。
【2026-08-28】
・Strava起動時自動同期を30分間隔に変更。
・前回同期から30分以内は再同期をスキップ。
【2026-08-28】
・ログイン前画面をLP兼ログイン画面に刷新。
・Runner’s Ringsのコンセプト、サンプル実績表示、ログイン／新規登録、広告枠を追加。
・スマホ表示確認済み。
【2026-08-28】
・ログイン前画面にRunner’s Ringsブランドアイコンを追加。
・既存のicon.PNGを使用し、スマホ表示確認済み。
【2026-08-29】
・Strava同期と既存ランの重複統合を実データで動作確認。
・GPX / Garmin等の既存ランとStravaランが同一の場合、新規重複保存せず既存ランへStrava情報を紐付ける処理が正常動作。
・開始時刻があるデータは、同日・距離差・開始時刻を優先して同一ラン判定。
・開始時刻がない旧データは、ルート情報を使って重複判定。
・強制同期テストで linked: 1 を確認。
・既存GPXラン ID 2499 へのStrava情報統合をDBで確認。
・Strava同期＋既存データ重複統合の基本動作確認完了。

【2026-08-29 開発メモ】
・syncStrava に fullSync 引数を追加。
・通常同期は syncStrava(false)、
  開発用全期間同期は syncStrava(false, true) で実行可能にした。
・Edge Function へ full_sync を body で送信する処理を追加。
・全期間同期で Strava 1452件、Runner's Rings対象1368件を取得。
・古いStravaランの started_at 補完を実施。
・自分のStravaランについて started_at NULL 0件を確認。
・4/29のID90でも started_at 補完を確認。
・4/29の同一GPXをスマホ実機から追加し、重複として正常に拒否されることを確認。
・テストで作成された重複行 ID2530 を削除。

【2026-08-29 重複判定QA完了】
・GPX → 既存Stravaランの重複判定を追加検証。
・4/29の既存Stravaランで started_at 補完後、同一GPXの重複拒否を確認。
・8/23は同日に朝ラン・日中ランの2本がある実データで検証。
・日中ランGPXは、従来のルート判定だけでは既存Stravaランを重複として拾えず、一度追加される問題を確認。
・GPX側の findPossibleDuplicate に開始時刻判定を追加。
・同日＋距離許容内＋双方に startedAt がある場合、開始時刻5分以内を同一ランとするよう修正。
・修正後、8/23の日中ランGPX・朝ランGPXとも既存Stravaランとの重複を正常に拒否。
・同日の別ラン同士では開始時刻差190.45分、routeSimilarity=false を確認し、誤重複判定されないことを確認。
・GPX / Strava間の双方向重複判定について、主要実データQA完了。
【2026-08-30 開発メモ】
・クラウド保存ラン一覧の並び順を修正。
・従来は activity_date のみで並び替えていたため、
  同日複数ランでは時刻順にならない問題があった。
・started_at を優先して並び替えるよう変更。
・2026/08/30の朝ラン／午後ランで実機確認し、
  新しい順で午後ランが上に表示されることを確認。

・Strava Webhook の delete 対応を実装。
・Strava側でActivityが削除されても、
  Runner’s Ringsのラン本体は削除しない仕様に決定。
・delete受信時は該当ランの strava_id のみ null にして、
  Stravaとの紐付けだけ解除する。
・約0.84kmのテストラン
  strava_id=19943456461 で実データQA実施。
・Webhookで aspect_type:"delete" を受信。
・Webhook Strava link removed のログを確認。
・Runner’s Rings側ではラン本体が残ることを実機確認。
・delete対応の主要QA完了。

【2026-08-31 開発メモ】
・Strava deauthorization（連携解除）対応を実装。
・Strava側でRunner’s Ringsの「アクセスを取り消す」を実行し、
  Webhookで athlete / update イベントを実受信。
・連携解除時はRunner’s Ringsのラン本体を削除せず、
  strava_connections の接続情報のみ削除する仕様に決定。
・初回テストでは strava_connections のDELETE権限不足を確認。
・service_role にDELETE権限を付与して修正。
・Stravaを再連携後、再度アクセス取り消しを実施。
・Webhook Strava deauthorized のログを確認。
・Strava連携解除 → Webhook受信 → 接続情報削除まで実データQA完了。
・deauthorization対応の主要QA完了。

【次回】
・Strava Webhookまわりの残課題を整理し、
  次の実装フェーズへ進む。
## 2026-08-31 開発メモ

### Strava連携
- Strava OAuth連携：完了
- 初回同期：完了
- Garmin / GPX既存ランとの重複判定・統合：完了
- Strava Webhook主要QA：完了
  - create：確認済み
  - update：確認済み
  - delete：確認済み
  - deauthorization：確認済み
- deauthorization QAでは、
  Strava側でアクセス取消
  → Webhook受信
  → strava_connections削除
  まで正常動作を確認
- QA後、Strava再連携済み

### UI
- 個別ラン選択時のハイライト表示：完了
  - 選択ランを濃い青
  - 他ランより太い線
  - 最前面表示

### URL / ドメイン
- 現在は以下の開発URLを継続使用
  https://atsuoebara.github.io/tree-age-map/
- 開発途中では変更しない
- 正式公開前・AdSense申請前を目安に独自ドメインへ移行予定
- 移行時はSupabase Auth / Strava OAuth等のURL設定も合わせて変更する

### Version
- 次工程でVersion表示を実装
- Version番号は1か所の定数で管理する
- 現在の候補：Version 0.9 Beta

### 次にやること
1. Version管理・画面表示の実装
2. 広告枠の仕上げ
3. PWA / スマホQA
4. 軽量化・動作改善
5. 独自ドメイン取得・移行
6. 公開前総合QA
7. Version 1.0
【2026-08-31 開発メモ追記】

・アプリ画面に Version 表示を追加。
・現在の表示は「Version 0.9 Beta」。
・Version番号は APP_VERSION 定数で1か所管理する方式に変更。
・今後のVersion更新は APP_VERSION の値だけ変更すればよい。

・Version追加後の実機確認で、
  Strava連携表示・クラウドデータ・地図・集計が一時的に読み込まれない状態を確認。

・原因調査の結果、
  起動時の await syncStrava(true) が、
  Strava同期完了までアプリ本体の起動処理を待たせる構造になっていたことを確認。

・起動時Strava同期をバックグラウンド実行へ変更。
・Strava同期の遅延や失敗があっても、
  クラウドデータ・地図・集計の読み込みを止めない構造に修正。

【実機QA】
・クラウド 1371 RUNS 表示確認
・TOTAL 9491.7 km 表示確認
・CITIES 43 表示確認
・地図表示確認
・Strava「✓ 連携済み」表示確認
・Version 0.9 Beta 表示確認
・主要画面の正常起動を確認

【現在の状態】
・Version管理実装：完了
・起動時Strava同期のブロッキング回避：完了
・Version 0.9 Betaとして主要機能動作確認済み

【次回】
・広告枠の仕上げへ進む。
【広告配置方針】

・ログイン後の本体画面に広告を1枠配置する。
・配置位置は「地図の直下」で固定する。
・画面構成は以下の順とする。

  地図
  ↓
  広告
  ↓
  TOTAL / RUNS / CITIES
  ↓
  都道府県別 / 市町村別

・地図そのものや操作ボタンを邪魔しないことを優先する。
・今後、広告位置の候補を変更せず、この配置を前提に実装する。
【2026-08-31 開発メモ追記：広告枠】

・ログイン後の本体画面に広告枠を追加。
・配置位置は「地図の直下」で実装。
・画面構成は以下の順で確定。

  地図
  ↓
  広告
  ↓
  TOTAL / RUNS / CITIES
  ↓
  都道府県別 / 市町村別

・ログイン後広告枠は #appAdArea として実装。
・スマホ実機で表示確認済み。
・地図操作を邪魔せず、ダッシュボードとの間の区切りとして自然に表示されることを確認。
・現時点では「ADVERTISEMENT」の仮表示のみ。
・実際のAdSense広告ユニットは未実装。

【ログイン前広告】
・ログイン前画面の既存広告枠 #authAdArea は継続。
・ログイン前広告は補助的な位置づけ。
・メイン広告はログイン後の「地図直下」1枠とする。

【次回】
・#appAdArea に実際のAdSense広告ユニットを実装する。
・スマホ表示でサイズ、余白、はみ出しがないか確認する。
【2026-08-31 開発メモ追記：独自ドメイン・AdSense申請】

### 独自ドメイン
・Cloudflare Registrarで `runnersrings.com` を取得。
・取得費用：$10.46 / 年。
・更新料も $10.46 / 年。
・自動更新ON。

### Cloudflare DNS
GitHub Pages向けに以下を設定。

A
・185.199.108.153
・185.199.109.153
・185.199.110.153
・185.199.111.153

CNAME
・www → atsuoebara.github.io

・各レコードは「DNSのみ」で設定。

### GitHub Pages
・Custom domain に `runnersrings.com` を設定。
・DNS check successful を確認。
・HTTPS証明書発行後、Enforce HTTPSを有効化。
・`https://runnersrings.com` でRunner’s Rings表示確認。

### Supabase Auth
・Site URLを
  `https://atsuoebara.github.io/tree-age-map/`
  から
  `https://runnersrings.com`
  へ変更。

・Redirect URLsに
  `https://runnersrings.com`
  を追加。
・旧GitHub Pages URLは移行安全確保のため現時点では残す。

### 起動不具合修正
・独自ドメイン移行後、
  `ReferenceError: syncResult is not defined`
  が発生。
・起動時Strava同期をバックグラウンド化した際に残っていた
  古い `if (syncResult)` ブロックが原因。
・不要ブロックを削除し修正。
・強制再読み込み後、エラー解消。

### Strava / CORS
・新ドメインからEdge Functionsを呼ぶとCORSエラーが発生。
・原因：
  `Access-Control-Allow-Origin`
  が旧URL
  `https://atsuoebara.github.io`
  のままだった。

・以下のEdge Functionを新ドメインへ変更しDeploy。
  - strava-sync
  - strava-status

変更後：
`Access-Control-Allow-Origin: https://runnersrings.com`

### 独自ドメイン移行QA
・`https://runnersrings.com` でログイン成功。
・クラウド 1371 RUNS 読込確認。
・TOTAL 9491.7 km確認。
・CITIES 43確認。
・Strava同期成功。
・strava-status成功。
・Consoleの主要エラー解消。

### 残URL修正
・`backToMapButton` の遷移先を
  旧GitHub Pages URLから
  `https://runnersrings.com`
  へ変更。
・Commit済み。

### AdSense
・AdSenseへ `runnersrings.com` を新しいサイトとして追加。
・既存のAdSenseコードスニペットを使用。
・サイト所有権確認成功。
・Google CMPは3択
  「同意する / 同意しない / オプションを管理する」
  を選択。
・AdSenseサイト審査をリクエスト済み。
・現在ステータス：準備中 / 審査待ち。

### 広告方針
・自動広告で画面全体へ自動配置するのではなく、
  Runner’s Rings本体の地図直下に設置済みの
  `#appAdArea`
  をメイン広告枠として使用する方針。
・審査通過後、実際のAdSense広告ユニットをこの枠へ実装する。

【次回】
1. AdSense審査結果確認
2. 通過後、地図直下 `#appAdArea` に実広告ユニットを実装
3. スマホ表示・サイズ・余白確認
4. 独自ドメイン移行後の最終QA
【2026-08-31 開発メモ追記：Version 1.0までの工程表更新】

### 現在地
・Version 0.9 Beta
・主要機能は実動作確認済み
・独自ドメイン `runnersrings.com` へ移行済み
・AdSenseはサイト所有権確認・審査申請まで完了
・現在はAdSense審査待ち

### 完了済み
✅ Version管理・画面表示
✅ Strava OAuth連携
✅ Strava自動同期
✅ Garmin / GPX既存ランとの重複統合
✅ Strava Webhook主要QA
✅ ラン選択時のハイライト表示
✅ ラン選択時のズーム改善
✅ ログイン前LP刷新
✅ ブランドアイコン・地図プレビュー
✅ 広告枠の仮実装
✅ 独自ドメイン取得
✅ GitHub Pages独自ドメイン移行
✅ HTTPS対応
✅ Supabase認証URL移行
✅ Strava Edge Functionの新ドメイン対応
✅ 新ドメインで主要機能QA
✅ AdSenseサイト追加
✅ AdSense所有権確認
✅ AdSense審査リクエスト

### 現在進行中
⏳ AdSense審査待ち

### Version 1.0までの残工程

#### 1. アカウント / プロフィール機能
・ログイン後画面にプロフィール画像を表示
・プロフィール画像をタップするとアカウント画面を開く
・プロフィール画像の登録 / 変更
・表示名の設定 / 変更
・メールアドレスの確認 / 変更
・パスワード変更
・Strava連携状態の確認
・ログアウト
・将来的にリングサポーター等の課金状態もここへ集約する想定

※ アカウント機能はVersion 1.0前に実装する。

#### 2. AdSense実広告
・AdSense審査通過を確認
・地図直下の `#appAdArea` に実広告ユニットを実装
・広告サイズ、余白、スマホ表示を確認
・自動広告をむやみに配置せず、基本は地図直下1枠をメインとする

#### 3. PWA / スマホQA
・ホーム画面追加時の動作確認
・再アクセス時の最新版反映確認
・iPhone / Android相当のスマホ表示確認
・ログイン状態維持確認
・画面遷移、戻る操作確認

#### 4. 軽量化・動作改善
・初期表示速度改善
・不要処理、重複処理の整理
・地図描画負荷確認
・大量ランデータでも安定して動作するか確認
・起動時Strava同期が本体表示を妨げないことを再確認

#### 5. 独自ドメイン移行の最終確認
・Strava OAuth側のCallback / Domain設定を最終確認
・全Edge Functionに旧GitHub Pages URLが残っていないか監査
・`www.runnersrings.com` の動作確認
・旧Supabase Redirect URLをいつ削除するか判断
・コード内の旧URL残存確認

#### 6. 公開前総合QA
・新規登録
・ログイン
・ログアウト
・アカウント変更
・Strava新規連携
・Strava同期
・Webhook create / update / delete
・Strava連携解除
・既存ラン重複判定
・ラン一覧
・ラン選択
・地図表示
・都道府県 / 市町村集計
・広告表示
・スマホ表示
・エラー時表示
を一通り確認する。

#### 7. Version 1.0
・公開前総合QA完了後、
  `APP_VERSION` を
  `1.0`
  へ更新。

### 現在の開発順
1. AdSense審査待ちの間にアカウント / プロフィール機能
2. AdSense通過後に実広告
3. PWA / スマホQA
4. 軽量化・動作改善
5. 独自ドメイン移行最終確認
6. 公開前総合QA
7. Version 1.0

【重要】
・プロフィール画像は単なる装飾ではなく、
  「アカウント設定への入口」として使用する。
・Runner’s Ringsの基本思想である
  「シンプル」「スマホ完結」を崩さない。

============================================================
--><!DOCTYPE html>
<html lang="ja">
<head>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4990005561562459"
     crossorigin="anonymous"></script>
  <meta name="google-adsense-account" content="ca-pub-4990005561562459">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Runner's Rings</title>
<link rel="icon" type="image/png" href="icon.PNG">
<link rel="apple-touch-icon" href="icon.PNG">
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
  >

  <style>
    *{
      box-sizing:border-box;
    }

    html,
    body{
      margin:0;
      padding:0;
      font-family:-apple-system,BlinkMacSystemFont,sans-serif;
      background:#0b1422;
      color:white;
    }

    header{
      background:#0f1d2f;
      padding:14px 16px 12px;
    }

    header h1{
      margin:0;
      font-size:22px;
    }

    header p{
      margin:4px 0 0;
      font-size:13px;
      opacity:.75;
    }
#appVersion{
  margin-top:4px;
  font-size:10px;
  opacity:.45;
}
    #authArea{
      min-height:calc(100vh - 74px);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px 16px;
      background:#0b1422;
    }

    #authCard{
      width:100%;
      max-width:420px;
      background:#132237;
      border-radius:18px;
      padding:22px 18px;
    }

    #authCard h2{
      margin:0 0 6px;
      font-size:20px;
    }

    #authCard p{
      margin:0 0 18px;
      font-size:13px;
      opacity:.7;
      line-height:1.6;
    }

    .authInput{
      width:100%;
      border:1px solid rgba(255,255,255,.16);
      background:#0f1d2f;
      color:white;
      border-radius:12px;
      padding:13px 12px;
      font-size:16px;
      margin-bottom:10px;
      outline:none;
    }

    .authInput:focus{
      border-color:#ff2bd6;
    }

    #authButtons{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:9px;
      margin-top:4px;
    }

    .authButton{
      border:0;
      border-radius:12px;
      padding:12px 8px;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
    }

    #loginButton{
      background:#ff2bd6;
      color:white;
    }

    #signupButton{
      background:#17283d;
      color:white;
      border:1px solid rgba(255,255,255,.15);
    }

    #authMessage{
      min-height:20px;
      margin-top:13px;
      font-size:12px;
      line-height:1.5;
      color:#dce8f5;
    }

    #appRoot{
      display:none;
    }

    #accountBar{
      background:#0f1d2f;
      padding:7px 12px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-top:1px solid rgba(255,255,255,.06);
    }

    #accountEmail{
      min-width:0;
      font-size:11px;
      opacity:.68;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    #logoutButton{
      flex:0 0 auto;
      border:1px solid rgba(255,255,255,.15);
      background:#17283d;
      color:#dce8f5;
      border-radius:999px;
      padding:6px 11px;
      font-size:11px;
      font-weight:700;
      cursor:pointer;
    }

    #status{
      background:#17283d;
      color:#dce8f5;
      padding:8px 14px;
      font-size:13px;
      white-space:nowrap;
      overflow-x:auto;
    }

    #importArea{
      background:#0f1d2f;
      padding:10px 12px 5px;
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }

    #addRunButton,
    #savedRunsButton,
    #cloudRunsButton{
      border:0;
      border-radius:12px;
      color:white;
      font-size:14px;
      font-weight:700;
      padding:11px 14px;
      cursor:pointer;
    }

    #addRunButton{
      background:#ff2bd6;
      display:inline-block;
    }

    #savedRunsButton,
    #cloudRunsButton{
      background:#17283d;
      border:1px solid rgba(255,255,255,.15);
    }

    #syncInfo{
      width:100%;
      font-size:11px;
      opacity:.7;
      padding:1px 2px 4px;
    }

    #gpxInput{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }

    #savedRunsPanel,
    #cloudRunsPanel{
      display:none;
      background:#0f1d2f;
      padding:7px 12px 12px;
    }

    #savedRunsPanel.open,
    #cloudRunsPanel.open{
      display:block;
    }

    .savedRunsTitle{
      font-size:14px;
      font-weight:700;
      margin:4px 0 9px;
    }

    #historySortArea{
      display:flex;
      gap:7px;
      margin:0 0 10px;
    }

    .historySortButton{
      border:1px solid rgba(255,255,255,.14);
      background:#17283d;
      color:#dce8f5;
      border-radius:999px;
      padding:7px 12px;
      font-size:12px;
      font-weight:700;
      cursor:pointer;
    }

    .historySortButton.active{
      background:#ff2bd6;
      border-color:#ff2bd6;
      color:white;
    }

    #savedRunsList,
    #cloudRunsList{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .savedRunRow{
      background:#132237;
      border-radius:12px;
      padding:10px 11px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:8px 10px;
      align-items:center;
    }

    .cloudRunRow{
      cursor:pointer;
    }

    .savedRunMain{
      min-width:0;
    }

    .savedRunName{
      font-size:13px;
      font-weight:700;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .savedRunMeta{
      margin-top:4px;
      font-size:11px;
      opacity:.65;
    }

    .historyChevron{
      font-size:22px;
      line-height:1;
      opacity:.45;
    }

    .deleteRunButton{
      border:1px solid rgba(255,80,80,.45);
      background:rgba(255,80,80,.10);
      color:#ff7f7f;
      border-radius:9px;
      padding:8px 10px;
      font-size:12px;
      font-weight:700;
    }

    .savedEmpty{
      background:#132237;
      border-radius:12px;
      padding:12px;
      font-size:13px;
      opacity:.7;
    }

    #filters{
      background:#0f1d2f;
      padding:9px 10px;
      display:flex;
      gap:7px;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }

    .yearButton{
      flex:0 0 auto;
      border:1px solid rgba(255,255,255,.14);
      background:#17283d;
      color:#dce8f5;
      border-radius:999px;
      padding:7px 13px;
      font-size:13px;
      font-weight:600;
    }

    .yearButton.active{
      background:#ff2bd6;
      color:white;
      border-color:#ff2bd6;
    }

    #map{
      width:100%;
      height:44vh;
      min-height:320px;
    }

    #dashboard{
      padding:18px 16px 32px;
    }

    .summary{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
    }

    .card{
      background:#132237;
      border-radius:14px;
      padding:14px 8px;
      text-align:center;
    }

    .label{
      font-size:10px;
      letter-spacing:1px;
      opacity:.65;
      margin-bottom:6px;
    }

    .value{
      font-size:21px;
      font-weight:700;
    }

    .unit{
      font-size:12px;
      opacity:.65;
    }

    h2{
      font-size:16px;
      margin:22px 0 10px;
    }

    #prefectureList,
    #cityList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .prefectureCard,
    .cityCard{
      background:#132237;
      border-radius:14px;
      padding:12px 14px 14px;
      cursor:pointer;
    }

    .prefectureTop,
    .cityTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:9px;
    }

    .prefectureName,
    .cityName{
      font-size:14px;
      font-weight:700;
    }

    .prefectureDistance,
    .cityDistance{
      font-size:14px;
      opacity:.85;
    }

    .prefectureRuns,
    .cityRuns{
      margin-top:7px;
      font-size:11px;
      opacity:.6;
    }

    .barTrack{
      width:100%;
      height:9px;
      background:rgba(255,255,255,.08);
      border-radius:999px;
      overflow:hidden;
    }

    .barFill{
      height:100%;
      background:#ff2bd6;
      border-radius:999px;
      min-width:3px;
    }

    .emptyMessage{
      background:#132237;
      border-radius:14px;
      padding:14px;
      font-size:14px;
      opacity:.8;
    }

    .leaflet-popup-content-wrapper{
      border-radius:14px;
    }

    .popup-title{
      font-size:16px;
      font-weight:700;
      margin-bottom:8px;
    }

    .popup-row{
      margin-top:4px;
      font-size:13px;
    }
#siteFooter{
  border-top:1px solid rgba(255,255,255,.08);
  background:#0f1d2f;
  padding:22px 14px 28px;
  text-align:center;
  font-size:12px;
  color:#8f9bac;
}

#siteFooter .footerLinks{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-bottom:10px;
}

#siteFooter a{
  color:#cbd5e1;
  text-decoration:none;
}

#siteFooter a:hover{
  color:#ff2bd6;
}
    /* Strava連携ボタン */
#stravaConnectButton {
  background: #fc4c02;
  color: #ffffff;
  border: none;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
}

/* 地図に戻るボタン */
#backToMapButton {
  display: block;
  width: fit-content;
  margin: 14px 0 18px;
  padding: 10px 18px;
  background: #eaff00;
  color: #0b1728;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
}
/* ラン一覧へ戻るボタン */
#backToRunListButton {
  display: none;
  width: calc(100% - 24px);
  margin: 10px 12px;
  padding: 13px 16px;
  background: #ff2bd6;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

 /* =====================================
   Runner's Rings ログイン前トップ
   2026-08-28
   紹介ページ＋ログイン画面を一体化。
   スマホを基本に、本体と同じ濃紺＋ピンクで統一。
===================================== */

#authArea{
  display:block;
  min-height:calc(100vh - 74px);
  padding:0;
  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(255,43,214,.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 28%,
      rgba(49,132,255,.10),
      transparent 30%
    ),
    #0b1422;
}

#authLanding{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:32px 16px 40px;
}

#authHero{
  padding:18px 4px 28px;
}

.authHeroEyebrow{
  color:#ff2bd6;
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:12px;
}

#authHero h2{
  margin:0;
  font-size:32px;
  line-height:1.28;
  letter-spacing:-1px;
}

.authHeroText{
  margin:16px 0 0;
  max-width:560px;
  font-size:14px;
  line-height:1.85;
  color:#b9c6d6;
}

#authPreview{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:24px;
}

.authPreviewCard{
  min-width:0;
  padding:14px 8px;
  background:rgba(19,34,55,.88);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  text-align:center;
}

.authPreviewLabel{
  margin-bottom:6px;
  font-size:9px;
  letter-spacing:1.2px;
  color:#8494a8;
}

.authPreviewValue{
  font-size:20px;
  font-weight:800;
  white-space:nowrap;
}

.authPreviewValue span{
  font-size:10px;
  color:#8494a8;
}

.authConcept{
  margin-top:14px;
  padding:15px 16px;
  border-left:3px solid #ff2bd6;
  background:rgba(255,255,255,.035);
  border-radius:0 12px 12px 0;
}

.authConcept strong{
  display:block;
  font-size:14px;
  margin-bottom:5px;
}

.authConcept span{
  display:block;
  color:#91a0b3;
  font-size:12px;
  line-height:1.6;
}

#authCard{
  width:100%;
  max-width:none;
  margin:0;
  padding:20px 18px;
  background:#132237;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}

#authCard h2{
  margin:0 0 7px;
  font-size:18px;
}

#authCard p{
  margin:0 0 18px;
  color:#9cabbd;
  opacity:1;
}

#authAdArea{
  min-height:82px;
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

  
#appAdArea{
  min-height:82px;
  margin:14px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.authAdLabel{
  font-size:9px;
  letter-spacing:1.5px;
  color:#526176;
}  
    

@media (min-width:700px){

  #authLanding{
    padding-top:48px;
  }

  #authHero h2{
    font-size:42px;
  }

  #authPreview{
    gap:12px;
  }

  .authPreviewCard{
    padding:18px 10px;
  }

  .authPreviewValue{
    font-size:25px;
  }

}  
/* =====================================
   Runner's Rings ブランドアイコン
   2026-08-28
   ログイン前画面に既存アプリアイコンを表示。
===================================== */

/* =====================================
   Runner's Rings ブランド表示
   2026-08-28
   アイコンと地図プレビューを横並び表示。
   スマホでも崩れないサイズに調整。
===================================== */

.authBrandRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:18px;
}

.authBrandIcon{
  flex:0 0 auto;
}

.authBrandIcon img{
  display:block;
  width:82px;
  height:82px;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

.authMapPreview{
  flex:1;
  min-width:0;
}

.authMapPreview img{
  display:block;
  width:100%;
  max-width:180px;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(0,0,0,.20);
}
  </style>
</head>

<body>

<header>
  <h1>Runner's Rings</h1>
  <p>走った記録ではなく、走った人生を残す。</p>
  <div id="appVersion"></div>
</header>

<section id="authArea">

  <div id="authLanding">

    <!--
      Runner's Rings ログイン前トップ
      初めて来た人にもアプリの内容が伝わるよう、
      紹介ページとログイン画面を一体化している。
    -->
<!-- Runner's Rings ブランド表示 -->
<div class="authBrandRow">

  <div class="authBrandIcon">
    <img
      src="icon.PNG"
      alt="Runner's Rings"
    >
  </div>

  <div class="authMapPreview">
    <img
      src="runners-rings-map-preview.jpg"
      alt="Runner's Rings 地図プレビュー"
    >
  </div>

</div>
    <div id="authHero">
      <!-- Runner's Rings ブランドアイコン -->

      <div class="authHeroEyebrow">
        RUNNING × LIFE MAP
      </div>

      <h2>
        走った記録ではなく、<br>
        走った人生を残す。
      </h2>

      <p class="authHeroText">
        Runner's Ringsは、
        あなたが走った道や街を地図に積み重ねていく
        ランニング記録アプリです。
      </p>

      <div id="authPreview">

        <div class="authPreviewCard">
          <div class="authPreviewLabel">TOTAL</div>
          <div class="authPreviewValue">9,500<span> km</span></div>
        </div>

        <div class="authPreviewCard">
          <div class="authPreviewLabel">RUNS</div>
          <div class="authPreviewValue">1,300+</div>
        </div>

        <div class="authPreviewCard">
          <div class="authPreviewLabel">CITIES</div>
          <div class="authPreviewValue">43</div>
        </div>

      </div>

      <div class="authConcept">
        <strong>走るほど、地図が育つ。</strong>
        <span>
          Stravaと連携して、走った軌跡をRunner's Ringsへ。
        </span>
      </div>

    </div>


    <div id="authCard">

      <h2>Runner's Ringsをはじめる</h2>

      <p>
        ログインすると、あなたのランニングマップを表示します。<br>
        初めて使う場合は「新規登録」から。
      </p>

      <input
        id="emailInput"
        class="authInput"
        type="email"
        autocomplete="email"
        placeholder="メールアドレス"
      >

      <input
        id="passwordInput"
        class="authInput"
        type="password"
        autocomplete="current-password"
        placeholder="パスワード"
      >

      <div id="authButtons">

        <button
          id="loginButton"
          class="authButton"
        >
          ログイン
        </button>

        <button
          id="signupButton"
          class="authButton"
        >
          新規登録
        </button>

      </div>

      <div id="authMessage"></div>

    </div>


    <!--
      広告枠
      ログイン済みユーザーはこの画面を見る機会が少ないため、
      将来はアプリ本体側にも広告を配置する。
    -->
    <div id="authAdArea">
      <div class="authAdLabel">ADVERTISEMENT</div>
    </div>

  </div>

</section>
<main id="appRoot">

  <div id="accountBar">
  <div id="accountEmail"></div>

  <button id="logoutButton">
    ログアウト
  </button>

  <button id="stravaConnectButton" type="button">
    Stravaと連携
  </button>
</div>
<div id="status">
  データを読み込み中…
</div>
  <div id="importArea">

    <label id="addRunButton" for="gpxInput">
      ＋ ランを追加
    </label>

    <button id="savedRunsButton">
      端末保存 0
    </button>

    <button id="cloudRunsButton">
      クラウド 0
    </button>

    <div id="syncInfo">
      ☁️ クラウド確認中…
    </div>

    <input
      id="gpxInput"
      type="file"
      accept=".gpx,application/gpx+xml,application/xml,text/xml"
      multiple
    >

  </div>

  <div id="savedRunsPanel">
    <div class="savedRunsTitle">
      端末に保存したラン
    </div>

    <div id="savedRunsList">
      <div class="savedEmpty">
        読み込み中…
      </div>
    </div>
  </div>

  
  <div id="filters">
    <button class="yearButton active">
      ALL
    </button>
  </div>

  <div id="map"></div>
  
  <div id="appAdArea">
  <div class="authAdLabel">ADVERTISEMENT</div>
</div>
  
  <button
  id="backToRunListButton"
  type="button"
  style="display:none;"
>
  ← ラン一覧へ戻る
</button>
<div id="cloudRunsPanel">

    <div class="savedRunsTitle">
      クラウドに保存したラン
    </div>

<button id="backToMapButton" type="button">
  ← 地図に戻る
</button>
    
    <div id="historySortArea">
      <button
        class="historySortButton active"
        data-order="desc"
      >
        新しい順
      </button>

      <button
        class="historySortButton"
        data-order="asc"
      >
        古い順
      </button>
    </div>

    <div id="cloudRunsList">
      <div class="savedEmpty">
        読み込み中…
      </div>
    </div>

  </div>
  <section id="dashboard">

    <div class="summary">

      <div class="card">
        <div class="label">TOTAL</div>
        <span id="totalDistance" class="value">--</span>
        <span class="unit">km</span>
      </div>

      <div class="card">
        <div class="label">RUNS</div>
        <div id="runCount" class="value">--</div>
      </div>

      <div class="card">
        <div class="label">CITIES</div>
        <div id="cityCount" class="value">--</div>
      </div>

    </div>

    <h2 id="prefectureHeading">
      都道府県別
    </h2>

    <div id="prefectureList">
      <div class="emptyMessage">
        読み込み中…
      </div>
    </div>

    <h2 id="cityHeading">
      市町村別
    </h2>

    <div id="cityList">
      <div class="emptyMessage">
        読み込み中…
      </div>
    </div>

  </section>

</main>
  <footer id="siteFooter">
  <div class="footerLinks">
    <a href="./about.html">Runner's Ringsについて</a>
    <a href="./terms.html">利用規約</a>
    <a href="./privacy.html">プライバシーポリシー</a>
    <a href="./contact.html">お問い合わせ</a>
  </div>

  <div>
    © 2026 Runner's Rings
  </div>
</footer>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="./runner_rings_archive.js"></script>

<script>

/* =====================================
   基本設定
===================================== */

const OWNER = 'atsuoebara';
const REPO = 'tree-age-map';
const BRANCH = 'main';

const APP_VERSION = '0.9 Beta';
  document.getElementById('appVersion').textContent =
  `Version ${APP_VERSION}`;

const CELL_SIZE = 0.0009;

const AREA_COLOR = '#ff2bd6';
const BORDER_COLOR = '#707580';
const ROUTE_COLOR = '#ff3b30';


/* =====================================
   Supabase
===================================== */

const SUPABASE_URL =
  'https://fhwvntpzwyenendhcgbw.supabase.co';

const SUPABASE_KEY =
  'sb_publishable_8ZhwV5lVHGbud8v6AS3YBQ_C78JbXyM';

const SUPABASE_RUNS_URL =
  SUPABASE_URL +
  '/rest/v1/runs';

const supabaseClient =
  window.supabase.createClient(
    SUPABASE_URL,
    SUPABASE_KEY,
    {
      auth:{
        persistSession:true,
        autoRefreshToken:true,
        detectSessionInUrl:true
      }
    }
  );

let currentSession =
  null;

let currentUser =
  null;


/* =====================================
   AUTH UI
===================================== */

const authArea =
  document.getElementById(
    'authArea'
  );

const appRoot =
  document.getElementById(
    'appRoot'
  );

const emailInput =
  document.getElementById(
    'emailInput'
  );

const passwordInput =
  document.getElementById(
    'passwordInput'
  );

const loginButton =
  document.getElementById(
    'loginButton'
  );

const signupButton =
  document.getElementById(
    'signupButton'
  );

const logoutButton =
  document.getElementById(
    'logoutButton'
  );
const stravaConnectButton =
  document.getElementById(
    'stravaConnectButton'
  );
const authMessage =
  document.getElementById(
    'authMessage'
  );

const accountEmail =
  document.getElementById(
    'accountEmail'
  );


function setAuthMessage(
  text
) {

  authMessage.textContent =
    text;

}


function setAuthBusy(
  busy
) {

  loginButton.disabled =
    busy;

  signupButton.disabled =
    busy;

  loginButton.style.opacity =
    busy
      ? '.55'
      : '1';

  signupButton.style.opacity =
    busy
      ? '.55'
      : '1';

}


async function login() {

  const email =
    emailInput.value.trim();

  const password =
    passwordInput.value;


  if (
    !email ||
    !password
  ) {

    setAuthMessage(
      'メールアドレスとパスワードを入力してください。'
    );

    return;

  }


  setAuthBusy(
    true
  );

  setAuthMessage(
    'ログイン中…'
  );


  try {

    const {
      data,
      error
    } =
      await supabaseClient
        .auth
        .signInWithPassword(
          {
            email,
            password
          }
        );


    if (
      error
    ) {

      throw error;

    }


    currentSession =
      data.session;

    currentUser =
      data.user;


    location.reload();

  }
  catch(error) {

    console.error(
      error
    );


    setAuthMessage(
      'ログインできませんでした。メールアドレスまたはパスワードを確認してください。'
    );

  }
  finally {

    setAuthBusy(
      false
    );

  }

}


async function signup() {

  const email =
    emailInput.value.trim();

  const password =
    passwordInput.value;


  if (
    !email ||
    !password
  ) {

    setAuthMessage(
      'メールアドレスとパスワードを入力してください。'
    );

    return;

  }


  if (
    password.length <
    6
  ) {

    setAuthMessage(
      'パスワードは6文字以上にしてください。'
    );

    return;

  }


  setAuthBusy(
    true
  );

  setAuthMessage(
    '新規登録中…'
  );


  try {

    const redirectTo =
      location.origin +
      location.pathname;


    const {
      data,
      error
    } =
      await supabaseClient
        .auth
        .signUp(
          {
            email,
            password,
            options:{
              emailRedirectTo:
                redirectTo
            }
          }
        );


    if (
      error
    ) {

      throw error;

    }


    if (
      data.session
    ) {

      currentSession =
        data.session;

      currentUser =
        data.user;


      location.reload();

      return;

    }


    setAuthMessage(
      '登録メールを送信しました。メール内の確認リンクを開いてからログインしてください。'
    );

  }
  catch(error) {

    console.error(
      error
    );


    setAuthMessage(
      '新規登録できませんでした。入力内容を確認してください。'
    );

  }
  finally {

    setAuthBusy(
      false
    );

  }

}


async function logout() {

  try {

    await supabaseClient
      .auth
      .signOut();

  }
  catch(error) {

    console.error(
      error
    );

  }


  location.reload();

}
async function connectStrava() {
  const {
    data: { session }
  } = await supabaseClient.auth.getSession();

  if (!session) {
    alert('先にRunner’s Ringsへログインしてください。');
    return;
  }

  const { data, error } =
    await supabaseClient.functions.invoke(
      'strava-oauth',
      {
        headers: {
          Authorization: `Bearer ${session.access_token}`
        }
      }
    );

  if (error) {
    console.error(error);
    alert('Strava連携の開始に失敗しました。');
    return;
  }

  if (!data?.url) {
    alert('Strava認証URLを取得できませんでした。');
    return;
  }

  location.href = data.url;
}
async function syncStrava(
  silent = false,
  fullSync = false
) {  const {
    data: { session }
  } = await supabaseClient.auth.getSession();

  if (!session) {
    if (!silent) {
      alert('先にRunner’s Ringsへログインしてください。');
    }
    return null;
  }

  const { data, error } =
    await supabaseClient.functions.invoke(
  'strava-sync',
  {
    headers: {
      Authorization: `Bearer ${session.access_token}`
    },
    body: {
      full_sync: fullSync
    }
  }
);

  if (error) {
    console.error(error);

    if (!silent) {
      alert('Stravaのラン取得に失敗しました。');
    }

    return null;
  }

  console.log('Strava activities:', data);

  if (!silent) {
    alert(
      'Stravaから ' +
      (data?.count ?? 0) +
      ' 件取得しました。'
    );
  }

  return data;
}

window.syncStrava = syncStrava;
  
loginButton.onclick =
  login;

signupButton.onclick =
  signup;

logoutButton.onclick =
  logout;
stravaConnectButton.onclick =
  connectStrava;

async function updateStravaConnectionStatus() {
  const {
    data: { session }
  } = await supabaseClient.auth.getSession();

  if (!session) {
    return;
  }

  const { data, error } =
    await supabaseClient.functions.invoke(
      'strava-status',
      {
        headers: {
          Authorization: `Bearer ${session.access_token}`
        }
      }
    );

  if (error) {
    console.error(
      'Strava status error:',
      error
    );
    return;
  }

  if (data?.connected) {
    stravaConnectButton.textContent =
      '✓ Strava連携済み';

    stravaConnectButton.disabled =
      true;
  } else {
    stravaConnectButton.textContent =
      'Stravaと連携';

    stravaConnectButton.disabled =
      false;
  }
}
  
passwordInput.addEventListener(
  'keydown',
  event => {

    if (
      event.key ===
      'Enter'
    ) {

      login();

    }

  }
);


/* =====================================
   AUTH HELPERS
===================================== */

function cloudEnabled() {

  return !!(
    currentUser &&
    currentSession &&
    typeof SUPABASE_KEY ===
      'string' &&
    SUPABASE_KEY.startsWith(
      'sb_publishable_'
    )
  );

}


async function refreshCurrentSession() {

  const {
    data,
    error
  } =
    await supabaseClient
      .auth
      .getSession();


  if (
    error
  ) {

    throw error;

  }


  currentSession =
    data.session;

  currentUser =
    data.session
      ?.user ||
    null;


  return currentSession;

}


async function getCloudHeaders(
  extra = {}
) {

  const session =
    await refreshCurrentSession();


  if (
    !session
  ) {

    throw new Error(
      'ログイン情報がありません'
    );

  }


  return {
    apikey:
      SUPABASE_KEY,

    Authorization:
      'Bearer ' +
      session.access_token,

    ...extra
  };

}


/* =====================================
   MAP
===================================== */

const map =
  L.map(
    'map'
  )
  .setView(
    [
      36.39,
      139.06
    ],
    9
  );


L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  {
    maxZoom:19,
    attribution:
      '&copy; OpenStreetMap contributors'
  }
)
.addTo(
  map
);


L.control.scale(
  {
    position:'bottomleft',
    metric:true,
    imperial:false,
    maxWidth:120
  }
)
.addTo(
  map
);


/* =====================================
   データ
===================================== */

let geojsonData =
  null;

const municipalityFeatures =
  [];

const activities =
  [];

const activitySignatures =
  new Set();

const cloudSignatures =
  new Set();
  
const cloudRouteSignatures =
  new Set();
  
let selectedYear =
  'ALL';

let cloudRunCount =
  0;

let cloudRows =
  [];

let historySortOrder =
  'desc';
let lastCloudRowsView =
  null;

/* =====================================
   Layer
===================================== */

let municipalityLayer =
  null;
let selectedRunLine =
  null;
  
const routeGroup =
  L.layerGroup();

const ringGroup =
  L.layerGroup();

const municipalityLayers =
  {};


/* =====================================
   IndexedDB
===================================== */

const DB_NAME =
  'RunnersRingsDB';

const DB_VERSION =
  1;

const STORE_NAME =
  'importedGPX';

const LEGACY_OWNER_KEY =
  'RunnersRingsLegacyOwnerUserId';


function openDatabase() {

  return new Promise(
    (
      resolve,
      reject
    ) => {

      const request =
        indexedDB.open(
          DB_NAME,
          DB_VERSION
        );


      request.onupgradeneeded =
        event => {

          const db =
            event.target.result;


          if (
            !db
              .objectStoreNames
              .contains(
                STORE_NAME
              )
          ) {

            db.createObjectStore(
              STORE_NAME,
              {
                keyPath:'id',
                autoIncrement:true
              }
            );

          }

        };


      request.onsuccess =
        () =>
          resolve(
            request.result
          );


      request.onerror =
        () =>
          reject(
            request.error
          );

    }
  );

}


async function getAllSavedGPXRaw() {

  const db =
    await openDatabase();


  return new Promise(
    (
      resolve,
      reject
    ) => {

      const request =
        db
          .transaction(
            STORE_NAME,
            'readonly'
          )
          .objectStore(
            STORE_NAME
          )
          .getAll();


      request.onsuccess =
        () =>
          resolve(
            request.result ||
            []
          );


      request.onerror =
        () =>
          reject(
            request.error
          );

    }
  );

}


async function claimLegacyLocalGPX() {

  if (
    !currentUser
  ) {

    return;

  }


  const all =
    await getAllSavedGPXRaw();


  const legacy =
    all.filter(
      item =>
        !item.userId
    );


  let legacyOwnerId =
    localStorage.getItem(
      LEGACY_OWNER_KEY
    );


  const forceLegacy =
    new URLSearchParams(
      location.search
    )
    .get(
      'legacy'
    ) ===
    '1';


  if (
    forceLegacy &&
    !legacyOwnerId
  ) {

    legacyOwnerId =
      currentUser.id;


    localStorage.setItem(
      LEGACY_OWNER_KEY,
      currentUser.id
    );

  }


  if (
    legacy.length &&
    !legacyOwnerId
  ) {

    legacyOwnerId =
      currentUser.id;


    localStorage.setItem(
      LEGACY_OWNER_KEY,
      currentUser.id
    );

  }


  if (
    legacyOwnerId !==
    currentUser.id
  ) {

    return;

  }


  if (
    !legacy.length
  ) {

    return;

  }


  const db =
    await openDatabase();


  await new Promise(
    (
      resolve,
      reject
    ) => {

      const transaction =
        db.transaction(
          STORE_NAME,
          'readwrite'
        );


      const store =
        transaction.objectStore(
          STORE_NAME
        );


      legacy.forEach(
        item => {

          store.put(
            {
              ...item,
              userId:
                currentUser.id
            }
          );

        }
      );


      transaction.oncomplete =
        () =>
          resolve();


      transaction.onerror =
        () =>
          reject(
            transaction.error
          );

    }
  );

}


function isLegacyOwner() {

  if (
    !currentUser
  ) {

    return false;

  }


  return (
    localStorage.getItem(
      LEGACY_OWNER_KEY
    ) ===
    currentUser.id
  );

}


async function saveGPXToDevice(
  name,
  text
) {

  const db =
    await openDatabase();


  return new Promise(
    (
      resolve,
      reject
    ) => {

      const request =
        db
          .transaction(
            STORE_NAME,
            'readwrite'
          )
          .objectStore(
            STORE_NAME
          )
          .add(
            {
              name,
              text,

              userId:
                currentUser
                  ?.id ||
                null,

              importedAt:
                new Date()
                  .toISOString()
            }
          );


      request.onsuccess =
        () =>
          resolve(
            request.result
          );


      request.onerror =
        () =>
          reject(
            request.error
          );

    }
  );

}


async function getSavedGPX() {

  const all =
    await getAllSavedGPXRaw();


  if (
    !currentUser
  ) {

    return [];

  }


  return all.filter(
    item =>
      item.userId ===
      currentUser.id
  );

}


async function deleteSavedGPX(
  id
) {

  const db =
    await openDatabase();


  return new Promise(
    (
      resolve,
      reject
    ) => {

      const request =
        db
          .transaction(
            STORE_NAME,
            'readwrite'
          )
          .objectStore(
            STORE_NAME
          )
          .delete(
            id
          );


      request.onsuccess =
        () =>
          resolve();


      request.onerror =
        () =>
          reject(
            request.error
          );

    }
  );

}


/* =====================================
   STATUS
===================================== */

function setStatus(
  text
) {

  document
    .getElementById(
      'status'
    )
    .textContent =
      text;

}


async function updateStorageInfo() {

  let localCount =
    0;


  try {

    const saved =
      await getSavedGPX();


    localCount =
      saved.length;

  }
  catch(error) {

    console.error(
      error
    );

  }


  document
    .getElementById(
      'savedRunsButton'
    )
    .textContent =
      '端末保存 ' +
      localCount;


  document
    .getElementById(
      'cloudRunsButton'
    )
    .textContent =
      'クラウド ' +
      cloudRunCount;


  document
    .getElementById(
      'syncInfo'
    )
    .textContent =
      cloudEnabled()

        ? (
            '☁️ クラウド ' +
            cloudRunCount +
            ' RUNS ・ 端末 ' +
            localCount +
            ' RUNS'
          )

        : (
            '⚠️ クラウド未接続 ・ 端末 ' +
            localCount +
            ' RUNS'
          );

}


/* =====================================
   距離
===================================== */

function distanceKm(
  lat1,
  lon1,
  lat2,
  lon2
) {

  const R =
    6371;

  const toRad =
    deg =>
      deg *
      Math.PI /
      180;


  const dLat =
    toRad(
      lat2 -
      lat1
    );


  const dLon =
    toRad(
      lon2 -
      lon1
    );


  const a =
    Math.sin(
      dLat /
      2
    ) ** 2 +

    Math.cos(
      toRad(
        lat1
      )
    ) *

    Math.cos(
      toRad(
        lat2
      )
    ) *

    Math.sin(
      dLon /
      2
    ) ** 2;


  return (
    R *
    2 *
    Math.atan2(
      Math.sqrt(
        a
      ),
      Math.sqrt(
        1 -
        a
      )
    )
  );

}


/* =====================================
   市町村判定
===================================== */

function pointInRing(
  point,
  ring
) {

  const x =
    point[0];

  const y =
    point[1];

  let inside =
    false;


  for (
    let i = 0,
        j = ring.length - 1;

    i < ring.length;

    j = i++
  ) {

    const xi =
      ring[i][0];

    const yi =
      ring[i][1];

    const xj =
      ring[j][0];

    const yj =
      ring[j][1];


    const intersect =
      ((yi > y) !==
       (yj > y)) &&
      (
        x <
        (
          (xj - xi) *
          (y - yi) /
          (yj - yi)
        ) +
        xi
      );


    if (
      intersect
    ) {

      inside =
        !inside;

    }

  }


  return inside;

}


function pointInPolygon(
  point,
  polygon
) {

  if (
    !pointInRing(
      point,
      polygon[0]
    )
  ) {

    return false;

  }


  for (
    let i = 1;
    i < polygon.length;
    i++
  ) {

    if (
      pointInRing(
        point,
        polygon[i]
      )
    ) {

      return false;

    }

  }


  return true;

}


function pointInFeature(
  point,
  feature
) {

  const geometry =
    feature.geometry;


  if (
    !geometry
  ) {

    return false;

  }


  if (
    geometry.type ===
    'Polygon'
  ) {

    return pointInPolygon(
      point,
      geometry.coordinates
    );

  }


  if (
    geometry.type ===
    'MultiPolygon'
  ) {

    return geometry
      .coordinates
      .some(
        polygon =>
          pointInPolygon(
            point,
            polygon
          )
      );

  }


  return false;

}


/* =====================================
   BBOX
===================================== */

function collectCoordinates(
  coords,
  output
) {

  if (
    typeof coords[0] ===
    'number'
  ) {

    output.push(
      coords
    );

    return;

  }


  coords.forEach(
    child =>
      collectCoordinates(
        child,
        output
      )
  );

}


function getFeatureBBox(
  feature
) {

  const points =
    [];


  collectCoordinates(
    feature.geometry.coordinates,
    points
  );


  let minLon =
    Infinity;

  let minLat =
    Infinity;

  let maxLon =
    -Infinity;

  let maxLat =
    -Infinity;


  points.forEach(
    (
      [
        lon,
        lat
      ]
    ) => {

      minLon =
        Math.min(
          minLon,
          lon
        );

      minLat =
        Math.min(
          minLat,
          lat
        );

      maxLon =
        Math.max(
          maxLon,
          lon
        );

      maxLat =
        Math.max(
          maxLat,
          lat
        );

    }
  );


  return {
    minLon,
    minLat,
    maxLon,
    maxLat
  };

}


/* =====================================
   都道府県・市町村
===================================== */

function getPrefecture(
  feature
) {

  return (
    feature
      ?.properties
      ?.N03_001 ||
    '都道府県不明'
  );

}


function getCity(
  feature
) {

  return (
    feature
      ?.properties
      ?.N03_004 ||
    '名称不明'
  );

}


function getCityKey(
  feature
) {

  return (
    getPrefecture(
      feature
    ) +
    '|' +
    getCity(
      feature
    )
  );

}


function splitCityKey(
  key
) {

  const i =
    key.indexOf(
      '|'
    );


  if (
    i ===
    -1
  ) {

    return {
      prefecture:'',
      city:key
    };

  }


  return {
    prefecture:
      key.slice(
        0,
        i
      ),

    city:
      key.slice(
        i + 1
      )
  };

}


function findMunicipalityFeature(
  lat,
  lon
) {

  const point =
    [
      lon,
      lat
    ];


  for (
    const item of
    municipalityFeatures
  ) {

    const b =
      item.bbox;


    if (
      lon < b.minLon ||
      lon > b.maxLon ||
      lat < b.minLat ||
      lat > b.maxLat
    ) {

      continue;

    }


    if (
      pointInFeature(
        point,
        item.feature
      )
    ) {

      return item.feature;

    }

  }


  return null;

}


/* =====================================
   100mセル
===================================== */

function getCellKey(
  lat,
  lon
) {

  return (
    Math.floor(
      lat /
      CELL_SIZE
    ) +
    ',' +
    Math.floor(
      lon /
      CELL_SIZE
    )
  );

}


function getCellBounds(
  key
) {

  const [
    a,
    b
  ] =
    key
      .split(',')
      .map(
        Number
      );


  const south =
    a *
    CELL_SIZE;

  const west =
    b *
    CELL_SIZE;


  return [
    [
      south,
      west
    ],
    [
      south +
      CELL_SIZE,
      west +
      CELL_SIZE
    ]
  ];

}


function getRingOpacity(
  count
) {

  if(count <= 1) return 0.10;
  if(count === 2) return 0.16;
  if(count <= 4) return 0.24;
  if(count <= 7) return 0.34;
  if(count <= 15) return 0.46;

  return 0.58;

}


function buildCellsFromRoute(
  latlngs
) {

  const cells =
    new Set();


  if (
    !latlngs.length
  ) {

    return cells;

  }


  cells.add(
    getCellKey(
      latlngs[0][0],
      latlngs[0][1]
    )
  );


  for (
    let i = 1;
    i < latlngs.length;
    i++
  ) {

    const a =
      latlngs[
        i - 1
      ];

    const b =
      latlngs[i];


    const km =
      distanceKm(
        a[0],
        a[1],
        b[0],
        b[1]
      );


    const steps =
      Math.max(
        1,
        Math.ceil(
          km /
          0.04
        )
      );


    for (
      let s = 0;
      s <= steps;
      s++
    ) {

      const t =
        s /
        steps;


      const lat =
        a[0] +
        (
          b[0] -
          a[0]
        ) *
        t;


      const lon =
        a[1] +
        (
          b[1] -
          a[1]
        ) *
        t;


      cells.add(
        getCellKey(
          lat,
          lon
        )
      );

    }

  }


  return cells;

}


/* =====================================
   市町村濃度
===================================== */

function getMunicipalityOpacity(
  km
) {

  if(km <= 0) return 0;
  if(km < 5) return 0.04;
  if(km < 10) return 0.08;
  if(km < 20) return 0.14;
  if(km < 30) return 0.22;
  if(km < 50) return 0.30;
  if(km < 100) return 0.40;
  if(km < 200) return 0.50;
  if(km < 400) return 0.60;

  return 0.70;

}


/* =====================================
   行政境界
===================================== */

async function loadMunicipalities() {

  setStatus(
    '全国の行政境界を読み込み中…'
  );


  const response =
    await fetch(
      './runners-rings-japan-web.geojson'
    );


  if (
    !response.ok
  ) {

    throw new Error(
      '全国行政境界データ取得失敗'
    );

  }


  geojsonData =
    await response.json();


  municipalityFeatures.length =
    0;


  geojsonData
    .features
    .forEach(
      feature => {

        municipalityFeatures.push(
          {
            feature,

            bbox:
              getFeatureBBox(
                feature
              )
          }
        );

      }
    );

}


/* =====================================
   ルート解析
===================================== */

function analyseRoute(
  latlngs,
  targetDistanceKm = null
) {

  const cityDistances =
    {};

  const cities =
    new Set();

  const prefectures =
    new Set();

  let calculatedKm =
    0;


  for (
    let i = 1;
    i < latlngs.length;
    i++
  ) {

    const prev =
      latlngs[
        i - 1
      ];

    const current =
      latlngs[i];


    const segmentKm =
      distanceKm(
        prev[0],
        prev[1],
        current[0],
        current[1]
      );


    calculatedKm +=
      segmentKm;


    const feature =
      findMunicipalityFeature(
        (
          prev[0] +
          current[0]
        ) /
        2,

        (
          prev[1] +
          current[1]
        ) /
        2
      );


    if (
      feature
    ) {

      const cityKey =
        getCityKey(
          feature
        );


      const prefecture =
        getPrefecture(
          feature
        );


      cityDistances[
        cityKey
      ] =
        (
          cityDistances[
            cityKey
          ] ||
          0
        ) +
        segmentKm;


      cities.add(
        cityKey
      );


      prefectures.add(
        prefecture
      );

    }

  }


  if (
    targetDistanceKm &&
    calculatedKm >
    0
  ) {

    const scale =
      targetDistanceKm /
      calculatedKm;


    Object.keys(
      cityDistances
    )
    .forEach(
      key => {

        cityDistances[
          key
        ] *=
          scale;

      }
    );

  }


  return {
    cityDistances,

    cities:
      Array.from(
        cities
      ),

    prefectures:
      Array.from(
        prefectures
      ),

    calculatedKm
  };

}


/* =====================================
   活動シグネチャ
===================================== */

function createActivitySignature(
  activity
) {

  // Strava由来はStrava固有IDを最優先
  if (
    activity.stravaId
  ) {
    return (
      'strava|' +
      String(
        activity.stravaId
      )
    );
  }

  // Strava IDがないランは従来方式で重複判定
  const first =
    activity.latlngs[0];

  const last =
    activity.latlngs[
      activity.latlngs.length -
      1
    ];

  const round4 =
    value =>
      Number(
        value
      )
      .toFixed(
        4
      );

  const datePart =
    activity.date &&
    !Number.isNaN(
      activity.date.getTime()
    )

      ? [
          activity.date.getFullYear(),

          String(
            activity.date.getMonth() +
            1
          )
          .padStart(
            2,
            '0'
          ),

          String(
            activity.date.getDate()
          )
          .padStart(
            2,
            '0'
          )
        ]
        .join(
          '-'
        )

      : 'nodate';

  return [
    datePart,

    activity.distance
      .toFixed(
        2
      ),

    activity.latlngs.length,

    round4(
      first[0]
    ),

    round4(
      first[1]
    ),

    round4(
      last[0]
    ),

    round4(
      last[1]
    )
  ]
  .join(
    '|'
  );

}


function registerActivity(
  activity
) {

  const signature =
    createActivitySignature(
      activity
    );


  if (
    activitySignatures.has(
      signature
    )
  ) {

    return false;

  }


  activity.signature =
    signature;


  activitySignatures.add(
    signature
  );


  activities.push(
    activity
  );


  return true;

}


/* =====================================
   重複チェック
===================================== */

function sameCalendarDate(
  a,
  b
) {

  return !!(
    a &&
    b &&
    !Number.isNaN(
      a.getTime()
    ) &&
    !Number.isNaN(
      b.getTime()
    ) &&
    a.getFullYear() ===
      b.getFullYear() &&
    a.getMonth() ===
      b.getMonth() &&
    a.getDate() ===
      b.getDate()
  );

}


function getRouteSamples(
  latlngs,
  count = 7
) {

  const result = [];

  if (
    !Array.isArray(latlngs) ||
    latlngs.length < 2
  ) {

    return result;

  }

  // 各点までの累積走行距離を作る。
  // GarminとStravaで記録点数が違っても、
  // 「走行距離の何％地点か」で比較できるようにする。
  const cumulative = [0];

  let totalDistance = 0;

  for (
    let i = 1;
    i < latlngs.length;
    i++
  ) {

    totalDistance +=
      distanceKm(
        latlngs[i - 1][0],
        latlngs[i - 1][1],
        latlngs[i][0],
        latlngs[i][1]
      );

    cumulative.push(
      totalDistance
    );

  }

  if (
    totalDistance <= 0
  ) {

    return result;

  }

  for (
    let i = 0;
    i < count;
    i++
  ) {

    const targetDistance =
      totalDistance *
      (
        i /
        (count - 1)
      );

    let nearestIndex = 0;
    let nearestDifference = Infinity;

    for (
      let j = 0;
      j < cumulative.length;
      j++
    ) {

      const difference =
        Math.abs(
          cumulative[j] -
          targetDistance
        );

      if (
        difference <
        nearestDifference
      ) {

        nearestDifference =
          difference;

        nearestIndex =
          j;

      }

    }

    result.push(
      latlngs[
        nearestIndex
      ]
    );

  }

  return result;

}

function routeSimilarity(
  a,
  b
) {

  const samplesA =
    getRouteSamples(
      a.latlngs
    );

  const samplesB =
    getRouteSamples(
      b.latlngs
    );


  if (
    samplesA.length !==
      samplesB.length ||
    !samplesA.length
  ) {

    return false;

  }


  let total =
    0;

  let max =
    0;


  for (
    let i = 0;
    i < samplesA.length;
    i++
  ) {

    const d =
      distanceKm(
        samplesA[i][0],
        samplesA[i][1],
        samplesB[i][0],
        samplesB[i][1]
      );


    total +=
      d;


    max =
      Math.max(
        max,
        d
      );

  }


  return (
    total /
    samplesA.length <=
      0.12 &&
    max <=
      0.30
  );

}


function findPossibleDuplicate(
  newActivity
) {

  if (
    !newActivity ||
    !Array.isArray(
      newActivity.latlngs
    ) ||
    newActivity.latlngs.length <
      2
  ) {

    return null;

  }


  const newStart =
    newActivity.latlngs[0];

  const newEnd =
    newActivity.latlngs[
      newActivity.latlngs.length -
      1
    ];


  for (
    const oldActivity of
    activities
  ) {

    if (
      !Array.isArray(
        oldActivity.latlngs
      ) ||
      oldActivity.latlngs.length <
        2 ||
      !sameCalendarDate(
        newActivity.date,
        oldActivity.date
      )
    ) {

      continue;

    }


    const difference =
      Math.abs(
        newActivity.distance -
        oldActivity.distance
      );


    const allowed =
      Math.max(
        0.5,
        oldActivity.distance *
        0.08
      );


    if (
      difference >
      allowed
    ) {

      continue;

    }
    // =====================================
// 開始時刻が双方にある場合は、
// 5分以内なら同一ランとして扱う。
// 同日・距離許容内を通過した後に判定する。
// =====================================

const newStartedAt =
  newActivity.startedAt
    ? new Date(
        newActivity.startedAt
      )
    : null;

const oldStartedAt =
  oldActivity.startedAt
    ? new Date(
        oldActivity.startedAt
      )
    : null;

if (
  newStartedAt &&
  oldStartedAt &&
  !Number.isNaN(
    newStartedAt.getTime()
  ) &&
  !Number.isNaN(
    oldStartedAt.getTime()
  )
) {

  const startTimeDifference =
    Math.abs(
      newStartedAt.getTime() -
      oldStartedAt.getTime()
    );

  if (
    startTimeDifference <=
    5 * 60 * 1000
  ) {

    return oldActivity;

  }

}


    const oldStart =
      oldActivity.latlngs[0];

    const oldEnd =
      oldActivity.latlngs[
        oldActivity.latlngs.length -
        1
      ];


    if (
      distanceKm(
        newStart[0],
        newStart[1],
        oldStart[0],
        oldStart[1]
      ) >
      0.4
    ) {

      continue;

    }


    if (
      distanceKm(
        newEnd[0],
        newEnd[1],
        oldEnd[0],
        oldEnd[1]
      ) >
      0.6
    ) {

      continue;

    }


    // =====================================
// Garmin GPX と Strava は
// ルート点数や配置が異なることがある。
// そのため、ルート類似に加えて
// 距離・開始地点・終了地点が非常に近い場合も
// 同一ランとして扱う。
// =====================================

const startDistance =
  distanceKm(
    newStart[0],
    newStart[1],
    oldStart[0],
    oldStart[1]
  );

const endDistance =
  distanceKm(
    newEnd[0],
    newEnd[1],
    oldEnd[0],
    oldEnd[1]
  );

const routeIsSimilar =
  routeSimilarity(
    newActivity,
    oldActivity
  );

const veryLikelySameRun =
  difference <=
    Math.max(
      0.20,
      oldActivity.distance *
      0.03
    ) &&
  startDistance <=
    0.15 &&
  endDistance <=
    0.20;

if (
  !routeIsSimilar &&
  !veryLikelySameRun
) {

  continue;

}

    return oldActivity;

  }


  return null;

}


/* =====================================
   GPX → Activity
===================================== */

function buildActivityFromGPXText(
  text,
  name,
  source
) {

  const xml =
    new DOMParser()
      .parseFromString(
        text,
        'application/xml'
      );


  if (
    xml.querySelector(
      'parsererror'
    )
  ) {

    throw new Error(
      'GPXを読み込めません'
    );

  }


  const timeElement =
    xml.querySelector(
      'metadata > time'
    ) ||
    xml.querySelector(
      'trkpt > time'
    );


  let date =
    null;


  if (
    timeElement
  ) {

    const d =
      new Date(
        timeElement.textContent
      );


    if (
      !Number.isNaN(
        d.getTime()
      )
    ) {

      date =
        d;

    }

  }


  const latlngs =
    Array.from(
      xml.getElementsByTagName(
        'trkpt'
      )
    )
    .map(
      point => [
        parseFloat(
          point.getAttribute(
            'lat'
          )
        ),

        parseFloat(
          point.getAttribute(
            'lon'
          )
        )
      ]
    )
    .filter(
      point =>
        Number.isFinite(
          point[0]
        ) &&
        Number.isFinite(
          point[1]
        )
    );


  if (
    latlngs.length <
    2
  ) {

    throw new Error(
      'GPS座標が不足しています'
    );

  }


  const analysis =
    analyseRoute(
      latlngs
    );


  return {
    source,
    name,
    date,

    startedAt:
    date,
    
    year:
      date
        ? date.getFullYear()
        : null,

    distance:
      analysis.calculatedKm,

    latlngs,

    cityDistances:
      analysis.cityDistances,

    cities:
      analysis.cities,

    prefectures:
      analysis.prefectures,

    cells:
      Array.from(
        buildCellsFromRoute(
          latlngs
        )
      )
  };

}


/* =====================================
   Supabase RUNS
===================================== */

function formatDateForCloud(
  date
) {

  if (
    !date ||
    Number.isNaN(
      date.getTime()
    )
  ) {

    return null;

  }


  return [
    date.getFullYear(),

    String(
      date.getMonth() +
      1
    )
    .padStart(
      2,
      '0'
    ),

    String(
      date.getDate()
    )
    .padStart(
      2,
      '0'
    )
  ]
  .join(
    '-'
  );

}


async function fetchCloudRuns() {

  if (
    !cloudEnabled()
  ) {
    return [];
  }

  const headers =
    await getCloudHeaders();

  const allRuns = [];
  const pageSize = 1000;
  let offset = 0;

  while (true) {

    const url =
      SUPABASE_RUNS_URL +
      '?select=id,created_at,activity_date,name,distance_km,route,user_id,strava_id,source,started_at' +
      '&user_id=eq.' +
      encodeURIComponent(
        currentUser.id
      ) +
      '&order=activity_date.asc' +
      '&limit=' +
      pageSize +
      '&offset=' +
      offset;

    const response =
      await fetch(
        url,
        {
          headers
        }
      );

    if (
      !response.ok
    ) {

      const message =
        await response.text();

      throw new Error(
        'クラウド読込失敗 HTTP ' +
        response.status +
        ' ' +
        message
      );
    }

    const pageRuns =
      await response.json();

    allRuns.push(
      ...pageRuns
    );

    if (
      pageRuns.length < pageSize
    ) {
      break;
    }

    offset += pageSize;
  }

  return allRuns;
}


function buildActivityFromCloudRow(
  row
) {

  if (
    !Array.isArray(
      row.route
    ) ||
    row.route.length <
      2
  ) {

    return null;

  }


  const latlngs =
    row.route
      .map(
        point => [
          Number(
            point[0]
          ),
          Number(
            point[1]
          )
        ]
      )
      .filter(
        point =>
          Number.isFinite(
            point[0]
          ) &&
          Number.isFinite(
            point[1]
          )
      );


  if (
    latlngs.length <
    2
  ) {

    return null;

  }


  const distance =
    Number(
      row.distance_km
    );


  const analysis =
    analyseRoute(
      latlngs,

      Number.isFinite(
        distance
      )
        ? distance
        : null
    );


  const date =
    row.activity_date

      ? new Date(
          row.activity_date +
          'T12:00:00'
        )

      : null;


  return {
    source:
      'cloud',

    cloudId:
      row.id,
    stravaId:
      row.strava_id
        ? String(row.strava_id)
        : null,

    originalSource:
      row.source || null,
    startedAt:
  row.started_at || null,
    name:
      row.name ||
      'クラウドラン',

    date,

    year:
      date &&
      !Number.isNaN(
        date.getTime()
      )

        ? date.getFullYear()

        : null,

    distance:
      Number.isFinite(
        distance
      )

        ? distance

        : analysis.calculatedKm,

    latlngs,

    cityDistances:
      analysis.cityDistances,

    cities:
      analysis.cities,

    prefectures:
      analysis.prefectures,

    cells:
      Array.from(
        buildCellsFromRoute(
          latlngs
        )
      )
  };

}


async function loadCloudActivities() {

  if (
    !cloudEnabled()
  ) {

    cloudRunCount =
      0;

    cloudRows =
      [];

    return 0;

  }


  try {

    setStatus(
      '☁️ クラウドRUNを読み込み中…'
    );


    const rows =
      await fetchCloudRuns();


    cloudRows =
      rows;


    cloudRunCount =
      rows.length;


    let loaded =
      0;


    rows.forEach(
      row => {

        const activity =
          buildActivityFromCloudRow(
            row
          );


        if (
          !activity
        ) {

          return;

        }

                const routeSignature =
          createActivitySignature(
            {
              ...activity,
              stravaId: null
            }
          );

        cloudRouteSignatures.add(
          routeSignature
        );

        const signature =
          createActivitySignature(
            activity
          );


        cloudSignatures.add(
          signature
        );


        if (
          registerActivity(
            activity
          )
        ) {

          loaded++;

        }

      }
    );


    return loaded;

  }
  catch(error) {

    console.error(
      error
    );


    document
      .getElementById(
        'syncInfo'
      )
      .textContent =
        '⚠️ クラウド読込失敗・端末データで表示';


    return 0;

  }

}


async function saveActivityToCloud(
  activity
) {

  if (
    !cloudEnabled()
  ) {

    throw new Error(
      'ログインしていません'
    );

  }


  const payload =
    {
      user_id:
        currentUser.id,

      activity_date:
        formatDateForCloud(
          activity.date
        ),

      name:
        activity.name

          ? activity.name.replace(
              /\.gpx$/i,
              ''
            )

          : 'ラン',

      distance_km:
        Number(
          activity.distance
            .toFixed(
              6
            )
        ),

      route:
  activity.latlngs,

started_at:
  activity.startedAt || null
    };


  const headers =
    await getCloudHeaders(
      {
        'Content-Type':
          'application/json',

        Prefer:
          'return=representation'
      }
    );


  const response =
    await fetch(
      SUPABASE_RUNS_URL,
      {
        method:'POST',

        headers,

        body:
          JSON.stringify(
            payload
          )
      }
    );


  if (
    !response.ok
  ) {

    const message =
      await response.text();


    throw new Error(
      'クラウド保存失敗 HTTP ' +
      response.status +
      ' ' +
      message
    );

  }


  const rows =
    await response.json();


  if (
    rows &&
    rows[0]
  ) {

    cloudRows.push(
      rows[0]
    );

  }


  cloudRunCount =
    cloudRows.length;


  cloudSignatures.add(
    createActivitySignature(
      activity
    )
  );


  return (
    rows &&
    rows[0]
  )

    ? rows[0]

    : null;

}


/* =====================================
   クラウドラン → 地図へ移動
===================================== */

function focusCloudRun(
  row
) {
backToRunListButton.style.display = 'block';
  const activity =
    buildActivityFromCloudRow(
      row
    );


  if (
    !activity ||
    !activity.latlngs.length
  ) {

    alert(
      'このランの地図データを表示できません。'
    );

    return;

  }


  const bounds =
    L.latLngBounds(
      activity.latlngs
    );

if (
  selectedRunLine
) {
  map.removeLayer(
    selectedRunLine
  );
}

selectedRunLine =
  L.polyline(
    activity.latlngs,
    {
      color: '#0057ff',
      weight: 6,
      opacity: 1
    }
  ).addTo(map);

selectedRunLine.bringToFront(); 
  
  
  cloudRunsPanel
    .classList
    .remove(
      'open'
    );


  map.fitBounds(
    bounds,
    {
      padding:[
        25,
        25
      ],

      maxZoom:16
    }
  );


  document
    .getElementById(
      'map'
    )
    .scrollIntoView(
      {
        behavior:'smooth',
        block:'start'
      }
    );


  setTimeout(
    () => {

      if (
        map.getZoom() <
        12
      ) {

        map.setView(
          bounds.getCenter(),
          12
        );

      }
      else {

        updateDisplay();

      }

    },
    450
  );

}


/* =====================================
   クラウド一覧描画
===================================== */

function renderCloudRowsList(
  rowsToShow = cloudRows
) {
  lastCloudRowsView =
    [
      ...rowsToShow
    ];
  const list =
    document.getElementById(
      'cloudRunsList'
    );


  list.innerHTML =
    '';


  if (
    !rowsToShow.length
  ) {

    list.innerHTML =
      '<div class="savedEmpty">' +
      'クラウドに保存したランはありません' +
      '</div>';

    return;

  }


const sorted =
  [
    ...rowsToShow
  ]
  .sort(
    (
      a,
      b
    ) => {

      const aDateTime =
        String(
          a.started_at ||
          a.activity_date ||
          ''
        );

      const bDateTime =
        String(
          b.started_at ||
          b.activity_date ||
          ''
        );

      return (
        historySortOrder ===
        'asc'

          ? aDateTime.localeCompare(
              bDateTime
            )

          : bDateTime.localeCompare(
              aDateTime
            )
      );

    }
  );


  sorted.forEach(
    row => {

      const item =
        document.createElement(
          'div'
        );


      item.className =
        'savedRunRow cloudRunRow';


      const main =
        document.createElement(
          'div'
        );


      main.className =
        'savedRunMain';


      const name =
        document.createElement(
          'div'
        );


      name.className =
        'savedRunName';


      name.textContent =
        row.name ||
        'ラン';


      const meta =
        document.createElement(
          'div'
        );


      meta.className =
        'savedRunMeta';


      const dateText =
        row.activity_date

          ? row.activity_date
              .replaceAll(
                '-',
                '/'
              )

          : '日付不明';


      const distance =
        Number(
          row.distance_km
        );


      meta.textContent =
        dateText +
        ' ・ ' +
        (
          Number.isFinite(
            distance
          )

            ? distance.toFixed(
                2
              ) +
              ' km'

            : '距離不明'
        );


      main.append(
        name,
        meta
      );


      const chevron =
        document.createElement(
          'div'
        );


      chevron.className =
        'historyChevron';


      chevron.textContent =
        '›';


      item.append(
        main,
        chevron
      );


      item.onclick =
        () =>
          focusCloudRun(
            row
          );


      list.appendChild(
        item
      );

    }
  );

}


async function renderCloudRuns() {

  const list =
    document.getElementById(
      'cloudRunsList'
    );


  list.innerHTML =
    '<div class="savedEmpty">読み込み中…</div>';


  try {

    const rows =
      await fetchCloudRuns();


    cloudRows =
      rows;


    cloudRunCount =
      rows.length;


    await updateStorageInfo();


    renderCloudRowsList();

  }
  catch(error) {

    console.error(
      error
    );


    list.innerHTML =
      '<div class="savedEmpty">' +
      'クラウド保存ランを読み込めませんでした' +
      '</div>';

  }

}


/* =====================================
   過去ラン
===================================== */

function loadArchiveActivities() {

  if (
    !isLegacyOwner()
  ) {

    return 0;

  }


  const archive =
    window.RUNNERS_RINGS_ARCHIVE;


  if (
    !Array.isArray(
      archive
    )
  ) {

    return 0;

  }


  let loaded =
    0;


  archive.forEach(
    run => {

      if (
        !Array.isArray(
          run.route
        ) ||
        run.route.length <
          2
      ) {

        return;

      }


      const latlngs =
        run.route
          .map(
            point => [
              Number(
                point[0]
              ),
              Number(
                point[1]
              )
            ]
          )
          .filter(
            point =>
              Number.isFinite(
                point[0]
              ) &&
              Number.isFinite(
                point[1]
              )
          );


      if (
        latlngs.length <
        2
      ) {

        return;

      }


      const storedDistance =
        Number(
          run.distance_km
        );


      const analysis =
        analyseRoute(
          latlngs,

          Number.isFinite(
            storedDistance
          )
            ? storedDistance
            : null
        );


      const date =
        run.date

          ? new Date(
              run.date +
              'T12:00:00'
            )

          : null;


      const activity =
        {
          source:
            'archive',

          id:
            run.id,

          name:
            run.name ||
            '過去ラン',

          date,

          year:
            Number(
              run.year
            ) ||
            (
              date &&
              !Number.isNaN(
                date.getTime()
              )

                ? date.getFullYear()

                : null
            ),

          distance:
            Number.isFinite(
              storedDistance
            )

              ? storedDistance

              : analysis.calculatedKm,

          latlngs,

          cityDistances:
            analysis.cityDistances,

          cities:
            analysis.cities,

          prefectures:
            analysis.prefectures,

          cells:
            Array.from(
              buildCellsFromRoute(
                latlngs
              )
            )
        };


      if (
        registerActivity(
          activity
        )
      ) {

        loaded++;

      }

    }
  );


  return loaded;

}


/* =====================================
   GitHub GPX
===================================== */

async function getGPXFiles() {

  if (
    !isLegacyOwner()
  ) {

    return [];

  }


  setStatus(
    '現在のGPXを探しています…'
  );


  const response =
    await fetch(
      'https://api.github.com/repos/' +
      OWNER +
      '/' +
      REPO +
      '/contents?ref=' +
      BRANCH,
      {
        headers:{
          Accept:
            'application/vnd.github+json'
        }
      }
    );


  if (
    !response.ok
  ) {

    throw new Error(
      'GPX一覧取得失敗 HTTP ' +
      response.status
    );

  }


  return (
    await response.json()
  )
  .filter(
    file =>
      file.type ===
        'file' &&
      file.name
        .toLowerCase()
        .endsWith(
          '.gpx'
        )
  )
  .map(
    file => ({
      name:
        file.name,

      url:
        file.download_url
    })
  );

}


async function loadOneGPX(
  file
) {

  const response =
    await fetch(
      file.url
    );


  if (
    !response.ok
  ) {

    throw new Error(
      file.name +
      ' 取得失敗 HTTP ' +
      response.status
    );

  }


  return registerActivity(
    buildActivityFromGPXText(
      await response.text(),
      file.name,
      'github'
    )
  );

}


async function loadAllGPX(
  files
) {

  let loaded =
    0;


  for (
    let i = 0;
    i < files.length;
    i++
  ) {

    setStatus(
      '現在GPX ' +
      (i + 1) +
      '/' +
      files.length +
      ' 読み込み中…'
    );


    if (
      await loadOneGPX(
        files[i]
      )
    ) {

      loaded++;

    }

  }


  return loaded;

}


/* =====================================
   端末保存GPX
===================================== */

async function loadSavedActivities() {

  let saved;


  try {

    saved =
      await getSavedGPX();

  }
  catch(error) {

    console.error(
      error
    );


    return {
      loaded:0,
      synced:0
    };

  }


  let loaded =
    0;

  let synced =
    0;


  for (
    const item of
    saved
  ) {

    try {

      const activity =
        buildActivityFromGPXText(
          item.text,
          item.name,
          'local'
        );


      activity.localId =
        item.id;


      const signature =
        createActivitySignature(
          activity
        );


const possibleDuplicate =
  findPossibleDuplicate(
    activity
  );

const alreadyKnown =
  activitySignatures.has(
    signature
  ) ||
  cloudRouteSignatures.has(
    signature
  ) ||
  !!possibleDuplicate;

if (!alreadyKnown) {
  if (
    registerActivity(
      activity
    )
  ) {
    loaded++;
  }
}      

if (
  cloudEnabled() &&
  !cloudRouteSignatures.has(
    signature
  ) &&
  !possibleDuplicate
) {

        try {

          await saveActivityToCloud(
            activity
          );


          synced++;

        }
        catch(syncError) {

          console.warn(
            '端末→クラウド同期失敗',
            item.name,
            syncError
          );

        }

      }

    }
    catch(error) {

      console.warn(
        '保存GPX復元失敗',
        item.name,
        error
      );

    }

  }


  return {
    loaded,
    synced
  };

}


/* =====================================
   保存済みラン一覧
===================================== */

function formatRunDate(
  date
) {

  if (
    !date ||
    Number.isNaN(
      date.getTime()
    )
  ) {

    return '日付不明';

  }


  return (
    date.getFullYear() +
    '/' +
    String(
      date.getMonth() +
      1
    )
    .padStart(
      2,
      '0'
    ) +
    '/' +
    String(
      date.getDate()
    )
    .padStart(
      2,
      '0'
    )
  );

}


async function renderSavedRuns() {

  const list =
    document.getElementById(
      'savedRunsList'
    );


  list.innerHTML =
    '';


  let saved;


  try {

    saved =
      await getSavedGPX();

  }
  catch(error) {

    console.error(
      error
    );


    list.innerHTML =
      '<div class="savedEmpty">' +
      '保存済みランを読み込めませんでした' +
      '</div>';


    return;

  }


  if (
    !saved.length
  ) {

    list.innerHTML =
      '<div class="savedEmpty">' +
      '端末に保存したランはありません' +
      '</div>';


    return;

  }


  const rows =
    [];


  for (
    const item of
    saved
  ) {

    try {

      rows.push(
        {
          item,

          activity:
            buildActivityFromGPXText(
              item.text,
              item.name,
              'local'
            )
        }
      );

    }
    catch(error) {

      rows.push(
        {
          item,
          activity:null
        }
      );

    }

  }


  rows.sort(
    (
      a,
      b
    ) =>
      (
        b.activity
          ?.date
          ?.getTime() ||
        0
      ) -
      (
        a.activity
          ?.date
          ?.getTime() ||
        0
      )
  );


  rows.forEach(
    (
      {
        item,
        activity
      }
    ) => {

      const row =
        document.createElement(
          'div'
        );


      row.className =
        'savedRunRow';


      const main =
        document.createElement(
          'div'
        );


      main.className =
        'savedRunMain';


      const name =
        document.createElement(
          'div'
        );


      name.className =
        'savedRunName';


      name.textContent =
        item.name.replace(
          /\.gpx$/i,
          ''
        );


      const meta =
        document.createElement(
          'div'
        );


      meta.className =
        'savedRunMeta';


      meta.textContent =
        activity

          ? (
              formatRunDate(
                activity.date
              ) +
              ' ・ ' +
              activity.distance
                .toFixed(
                  2
                ) +
              ' km'
            )

          : 'GPX解析エラー';


      main.append(
        name,
        meta
      );


      const deleteButton =
        document.createElement(
          'button'
        );


      deleteButton.className =
        'deleteRunButton';


      deleteButton.textContent =
        '端末から削除';


      deleteButton.onclick =
        async () => {

          const ok =
            confirm(
              'この端末に保存しているGPXを削除しますか？\n\n' +
              item.name +
              '\n\n' +
              '※クラウドに同期済みのRUNはクラウドには残ります。'
            );


          if (
            !ok
          ) {

            return;

          }


          try {

            await deleteSavedGPX(
              item.id
            );


            await updateStorageInfo();


            await renderSavedRuns();


            setStatus(
              '✅ 端末保存のみ削除しました'
            );

          }
          catch(error) {

            console.error(
              error
            );


            alert(
              '削除に失敗しました。'
            );

          }

        };


      row.append(
        main,
        deleteButton
      );


      list.appendChild(
        row
      );

    }
  );

}


/* =====================================
   ボタン
===================================== */

const savedRunsButton =
  document.getElementById(
    'savedRunsButton'
  );

const cloudRunsButton =
  document.getElementById(
    'cloudRunsButton'
  );

const savedRunsPanel =
  document.getElementById(
    'savedRunsPanel'
  );

const cloudRunsPanel =
  document.getElementById(
    'cloudRunsPanel'
  );
const backToRunListButton =
  document.getElementById(
    'backToRunListButton'
  );
const gpxInput =
  document.getElementById(
    'gpxInput'
  );


savedRunsButton.onclick =
  async () => {

    cloudRunsPanel
      .classList
      .remove(
        'open'
      );


    if (
      savedRunsPanel
        .classList
        .toggle(
          'open'
        )
    ) {

      await renderSavedRuns();

    }

  };
backToRunListButton.onclick =
  () => {
    if (selectedRunLine) {
      map.removeLayer(selectedRunLine);
      selectedRunLine = null;
    }
    if (
      lastCloudRowsView
    ) {
      renderCloudRowsList(
        lastCloudRowsView
      );
    }

    savedRunsPanel
      .classList
      .remove(
        'open'
      );
cloudRunsPanel
  .classList
  .add(
    'open'
  );
    const panelTop =
  cloudRunsPanel.getBoundingClientRect().top +
  window.scrollY -
  12;

window.scrollTo({
  top: panelTop,
  behavior: 'smooth'
});

    backToRunListButton
      .style
      .display =
        'none';

      };

// =====================================
// クラウド保存ラン一覧を開く
// 一覧を開いた時は、地図ではなく
// クラウド一覧の先頭まで自動スクロールする。
// 端末保存ラン側の動作は変更しない。
// =====================================

cloudRunsButton.onclick =
  async () => {

    savedRunsPanel
      .classList
      .remove(
        'open'
      );

    if (
      cloudRunsPanel
        .classList
        .toggle(
          'open'
        )
    ) {

      await renderCloudRuns();

      const panelTop =
        cloudRunsPanel
          .getBoundingClientRect()
          .top +
        window.scrollY -
        12;

      window.scrollTo({
        top: panelTop,
        behavior: 'smooth'
      });

    }

  };

document
  .querySelectorAll(
    '.historySortButton'
  )
  .forEach(
    button => {

      button.onclick =
        () => {

          historySortOrder =
            button.dataset.order;


          document
            .querySelectorAll(
              '.historySortButton'
            )
            .forEach(
              btn =>
                btn.classList.remove(
                  'active'
                )
            );


          button.classList.add(
            'active'
          );


          renderCloudRowsList();

        };

    }
  );


/* =====================================
   一括インポート
===================================== */

async function importSelectedGPXFiles(
  files
) {

  const isBatch =
    files.length >
    1;


  let added =
    0;

  let duplicates =
    0;

  let invalidFormat =
    0;

  let failed =
    0;

  let cloudSaved =
    0;

  let cloudFailed =
    0;

  let lastAddedActivity =
    null;


  for (
    let i = 0;
    i < files.length;
    i++
  ) {

    const file =
      files[i];


    setStatus(
      'GPX ' +
      (i + 1) +
      '/' +
      files.length +
      ' を処理中…'
    );


    if (
      !file.name
        .toLowerCase()
        .endsWith(
          '.gpx'
        )
    ) {

      invalidFormat++;

      continue;

    }


    try {

      const text =
        await file.text();


      const activity =
        buildActivityFromGPXText(
          text,
          file.name,
          'local'
        );


      const exact =
        createActivitySignature(
          activity
        );


      if (
        activitySignatures.has(
          exact
        )
      ) {

        duplicates++;

        continue;

      }


      const duplicate =
        findPossibleDuplicate(
          activity
        );


      if (
        duplicate
      ) {

        if (
          isBatch
        ) {

          duplicates++;

          continue;

        }


        // 重複候補は安全のため自動スキップ。
// 同一ランを端末・クラウドへ二重保存しない。
duplicates++;

continue;
        }

      activity.localId =
        await saveGPXToDevice(
          file.name,
          text
        );


      registerActivity(
        activity
      );


      added++;

      lastAddedActivity =
        activity;


      try {

        setStatus(
          '☁️ ' +
          (i + 1) +
          '/' +
          files.length +
          ' クラウド保存中…'
        );


        await saveActivityToCloud(
          activity
        );


        cloudSaved++;

      }
      catch(error) {

        console.error(
          'クラウド保存失敗:',
          file.name,
          error
        );


        cloudFailed++;

      }

    }
    catch(error) {

      console.error(
        'GPX処理失敗:',
        file.name,
        error
      );


      failed++;

    }

  }


  selectedYear =
    'ALL';


  createYearFilters();


  renderSelectedData();


  await updateStorageInfo();


  if (
    savedRunsPanel
      .classList
      .contains(
        'open'
      )
  ) {

    await renderSavedRuns();

  }


  if (
    cloudRunsPanel
      .classList
      .contains(
        'open'
      )
  ) {

    await renderCloudRuns();

  }


  if (
    isBatch
  ) {

    const home =
      getHomePrefectureBounds();


    if (
      home
    ) {

      map.fitBounds(
        home.bounds,
        {
          padding:[
            20,
            20
          ]
        }
      );

    }


    setStatus(
      '✅ 一括インポート完了'
    );


    let message =
      files.length +
      '件を処理しました。\n\n' +
      '✅ 新規追加 ' +
      added +
      '件\n' +
      '⏭️ 重複スキップ ' +
      duplicates +
      '件\n';


    if (
      invalidFormat >
      0
    ) {

      message +=
        '⚠️ GPX以外 ' +
        invalidFormat +
        '件\n';

    }


    if (
      failed >
      0
    ) {

      message +=
        '❌ 読み込み失敗 ' +
        failed +
        '件\n';

    }


    message +=
      '☁️ クラウド保存 ' +
      cloudSaved +
      '件';


    if (
      cloudFailed >
      0
    ) {

      message +=
        '\n⚠️ クラウド未同期 ' +
        cloudFailed +
        '件';

    }


    alert(
      message
    );

  }
  else {

    if (
      added ===
      1 &&
      lastAddedActivity
    ) {

      map.fitBounds(
        L.latLngBounds(
          lastAddedActivity.latlngs
        ),
        {
          padding:[
            25,
            25
          ]
        }
      );


      if (
        cloudFailed ===
        0
      ) {

        setStatus(
          '✅ クラウド＋端末に保存しました'
        );


        alert(
          'ランを追加しました！\n\n☁️ クラウド保存完了'
        );

      }
      else {

        setStatus(
          '⚠️ 端末には保存済み・クラウド同期は次回再試行'
        );


        alert(
          'ランを追加しました。\n\n' +
          '端末には保存できましたが、' +
          'クラウド保存は完了していません。\n' +
          '次回起動時に再同期します。'
        );

      }

    }
    else if (
      duplicates ===
      1
    ) {

      setStatus(
        '⚠️ 登録済みのランです'
      );


      alert(
        '⚠️ このランはすでに登録されています。\n\n' +
        '同じランのため追加しませんでした。'
      );

    }
    else if (
      invalidFormat ===
      1
    ) {

      setStatus(
        '⚠️ GPX形式ではありません'
      );


      alert(
        'このファイルはGPX形式ではありません。\n\n' +
        '「.gpx」のファイルを選択してください。'
      );

    }
    else if (
      failed ===
      1
    ) {

      setStatus(
        '❌ GPX追加失敗'
      );


      alert(
        'GPXの読み込みに失敗しました。'
      );

    }

  }

}


gpxInput.onchange =
  async event => {

    const files =
      Array.from(
        event.target.files ||
        []
      );


    if (
      !files.length
    ) {

      return;

    }


    try {

      await importSelectedGPXFiles(
        files
      );

    }
    catch(error) {

      console.error(
        error
      );


      setStatus(
        '❌ インポート失敗'
      );


      alert(
        'ランの取り込み中にエラーが発生しました。\n' +
        error.message
      );

    }
    finally {

      gpxInput.value =
        '';

    }

  };


/* =====================================
   年フィルター
===================================== */

function createYearFilters() {

  const area =
    document.getElementById(
      'filters'
    );


  area.innerHTML =
    '';


  const years =
    Array.from(
      new Set(
        activities
          .map(
            activity =>
              activity.year
          )
          .filter(
            Number.isFinite
          )
      )
    )
    .sort(
      (
        a,
        b
      ) =>
        b - a
    );


  [
    'ALL',
    ...years
  ]
  .forEach(
    option => {

      const button =
        document.createElement(
          'button'
        );


      button.className =
        'yearButton';


      button.textContent =
        option;


      if (
        String(
          option
        ) ===
        String(
          selectedYear
        )
      ) {

        button.classList.add(
          'active'
        );

      }


      button.onclick =
        () => {

          selectedYear =
            option;


          document
            .querySelectorAll(
              '.yearButton'
            )
            .forEach(
              btn =>
                btn.classList.remove(
                  'active'
                )
            );


          button.classList.add(
            'active'
          );


          renderSelectedData();

        };


      area.appendChild(
        button
      );

    }
  );

}


/* =====================================
   選択活動
===================================== */

function getSelectedActivities() {

  return (
    selectedYear ===
    'ALL'

      ? activities

      : activities.filter(
          activity =>
            activity.year ===
            Number(
              selectedYear
            )
        )
  );

}


/* =====================================
   集計
===================================== */

function buildSelectedStats() {

  const selected =
    getSelectedActivities();


  const municipalityDistance =
    {};

  const municipalityRunCount =
    {};

  const prefectureDistance =
    {};

  const prefectureRunCount =
    {};

  const ringCells =
    {};


  let totalDistanceKm =
    0;


  selected.forEach(
    activity => {

      totalDistanceKm +=
        activity.distance;


      const prefecturesInRun =
        new Set();


      Object.entries(
        activity.cityDistances
      )
      .forEach(
        (
          [
            cityKey,
            km
          ]
        ) => {

          municipalityDistance[
            cityKey
          ] =
            (
              municipalityDistance[
                cityKey
              ] ||
              0
            ) +
            km;


          const {
            prefecture
          } =
            splitCityKey(
              cityKey
            );


          if (
            prefecture
          ) {

            prefectureDistance[
              prefecture
            ] =
              (
                prefectureDistance[
                  prefecture
                ] ||
                0
              ) +
              km;


            prefecturesInRun.add(
              prefecture
            );

          }

        }
      );


      activity.cities
        .forEach(
          cityKey => {

            municipalityRunCount[
              cityKey
            ] =
              (
                municipalityRunCount[
                  cityKey
                ] ||
                0
              ) +
              1;

          }
        );


      prefecturesInRun
        .forEach(
          prefecture => {

            prefectureRunCount[
              prefecture
            ] =
              (
                prefectureRunCount[
                  prefecture
                ] ||
                0
              ) +
              1;

          }
        );


      activity.cells
        .forEach(
          key => {

            ringCells[
              key
            ] =
              (
                ringCells[
                  key
                ] ||
                0
              ) +
              1;

          }
        );

    }
  );


  return {
    activities:
      selected,

    municipalityDistance,

    municipalityRunCount,

    prefectureDistance,

    prefectureRunCount,

    ringCells,

    totalDistanceKm
  };

}


/* =====================================
   Layer Clear
===================================== */

function clearMapLayers() {

  routeGroup.clearLayers();

  ringGroup.clearLayers();


  if (
    municipalityLayer &&
    map.hasLayer(
      municipalityLayer
    )
  ) {

    map.removeLayer(
      municipalityLayer
    );

  }


  municipalityLayer =
    null;


  Object.keys(
    municipalityLayers
  )
  .forEach(
    key =>
      delete municipalityLayers[
        key
      ]
  );

}


/* =====================================
   実走線
===================================== */

function drawRoutes(
  selectedActivities
) {

  const drawn =
    new Set();


  const round =
    value =>
      Math.round(
        value *
        10000
      ) /
      10000;


  selectedActivities
    .forEach(
      activity => {

        for (
          let i = 1;
          i < activity.latlngs.length;
          i++
        ) {

          const a =
            activity.latlngs[
              i - 1
            ];

          const b =
            activity.latlngs[i];


          const aKey =
            round(
              a[0]
            ) +
            ',' +
            round(
              a[1]
            );


          const bKey =
            round(
              b[0]
            ) +
            ',' +
            round(
              b[1]
            );


          const key =
            aKey < bKey

              ? aKey +
                '|' +
                bKey

              : bKey +
                '|' +
                aKey;


          if (
            drawn.has(
              key
            )
          ) {

            continue;

          }


          drawn.add(
            key
          );


          routeGroup.addLayer(
            L.polyline(
              [
                a,
                b
              ],
              {
                color:
                  ROUTE_COLOR,

                weight:
                  1.5,

                opacity:
                  0.30,

                lineCap:
                  'round',

                lineJoin:
                  'round',

                interactive:
                  false
              }
            )
          );

        }

      }
    );

}


/* =====================================
   Rings
===================================== */

function drawRingCells(
  ringCells
) {

  Object.entries(
    ringCells
  )
  .forEach(
    (
      [
        key,
        count
      ]
    ) => {

      const rectangle =
        L.rectangle(
          getCellBounds(
            key
          ),
          {
            stroke:false,

            fillColor:
              AREA_COLOR,

            fillOpacity:
              getRingOpacity(
                count
              ),

            interactive:true
          }
        );


      rectangle.bindPopup(
        '<div class="popup-title">' +
        'Runner\'s Ring' +
        '</div>' +
        '<div class="popup-row">' +
        'このエリアを走ったラン：' +
        '<strong>' +
        count +
        ' 回</strong>' +
        '</div>'
      );


      ringGroup.addLayer(
        rectangle
      );

    }
  );

}


/* =====================================
   市町村面
===================================== */

function drawMunicipalities(
  municipalityDistance,
  municipalityRunCount
) {

  municipalityLayer =
    L.geoJSON(
      geojsonData,
      {
        style:
          feature => {

            const cityKey =
              getCityKey(
                feature
              );


            const km =
              municipalityDistance[
                cityKey
              ] ||
              0;


            return {
              color:
                BORDER_COLOR,

              weight:
                km > 0
                  ? 0.7
                  : 0.35,

              opacity:
                km > 0
                  ? 0.45
                  : 0.10,

              fillColor:
                AREA_COLOR,

              fillOpacity:
                getMunicipalityOpacity(
                  km
                )
            };

          },


        onEachFeature:
          (
            feature,
            layer
          ) => {

            const prefecture =
              getPrefecture(
                feature
              );


            const city =
              getCity(
                feature
              );


            const cityKey =
              getCityKey(
                feature
              );


            const km =
              municipalityDistance[
                cityKey
              ] ||
              0;


            const runs =
              municipalityRunCount[
                cityKey
              ] ||
              0;


            municipalityLayers[
              cityKey
            ] =
              layer;


            layer.bindPopup(
              '<div class="popup-title">' +
              city +
              '</div>' +
              '<div class="popup-row">' +
              prefecture +
              '</div>' +
              '<div class="popup-row">' +
              '累積走行距離：' +
              '<strong>' +
              km.toFixed(
                2
              ) +
              ' km</strong>' +
              '</div>' +
              '<div class="popup-row">' +
              '走ったラン：' +
              '<strong>' +
              runs +
              ' 回</strong>' +
              '</div>'
            );

          }
      }
    );

}


/* =====================================
   市町村へ移動
===================================== */

function focusMunicipality(
  cityKey
) {
  const municipalityRows =
    cloudRows.filter(
      row => {
        const activity =
          buildActivityFromCloudRow(
            row
          );

        return (
          activity &&
          Array.isArray(
            activity.cities
          ) &&
          activity.cities.includes(
            cityKey
          )
        );
      }
    );

  renderCloudRowsList(
    municipalityRows
  );

  savedRunsPanel
    .classList
    .remove(
      'open'
    );

  cloudRunsPanel
    .classList
    .add(
      'open'
    );
  const layer =
    municipalityLayers[
      cityKey
    ];


  if (
    !layer
  ) {

    return;

  }


  if (
    municipalityLayer &&
    !map.hasLayer(
      municipalityLayer
    )
  ) {

    municipalityLayer.addTo(
      map
    );

  }


  if (
    map.hasLayer(
      routeGroup
    )
  ) {

    map.removeLayer(
      routeGroup
    );

  }


  if (
    map.hasLayer(
      ringGroup
    )
  ) {

    map.removeLayer(
      ringGroup
    );

  }


  map.fitBounds(
    layer.getBounds(),
    {
      padding:[
        25,
        25
      ],

      maxZoom:11
    }
  );


  cloudRunsPanel
  .scrollIntoView(
    {
      behavior:'smooth',
      block:'start'
    }
  );


  setTimeout(
    () =>
      layer.openPopup(),
    500
  );

}


/* =====================================
   都道府県へ移動
===================================== */

function getPrefectureBounds(
  prefecture
) {

  const bounds =
    L.latLngBounds(
      []
    );


  municipalityFeatures
    .forEach(
      item => {

        if (
          getPrefecture(
            item.feature
          ) ===
          prefecture
        ) {

          bounds.extend(
            [
              item.bbox.minLat,
              item.bbox.minLon
            ]
          );


          bounds.extend(
            [
              item.bbox.maxLat,
              item.bbox.maxLon
            ]
          );

        }

      }
    );


  return bounds.isValid()
    ? bounds
    : null;

}


function focusPrefecture(
  prefecture
) {
  const prefectureRows =
  cloudRows.filter(
    row => {
      const activity =
        buildActivityFromCloudRow(
          row
        );

      return (
        activity &&
        Array.isArray(
          activity.prefectures
        ) &&
        activity.prefectures.includes(
          prefecture
        )
      );
    }
  );
renderCloudRowsList(
  prefectureRows
);

savedRunsPanel
  .classList
  .remove(
    'open'
  );

cloudRunsPanel
  .classList
  .add(
    'open'
  );
  
  const bounds =
    getPrefectureBounds(
      prefecture
    );


  if (
    !bounds
  ) {

    return;

  }


  if (
    municipalityLayer &&
    !map.hasLayer(
      municipalityLayer
    )
  ) {

    municipalityLayer.addTo(
      map
    );

  }


  if (
    map.hasLayer(
      routeGroup
    )
  ) {

    map.removeLayer(
      routeGroup
    );

  }


  if (
    map.hasLayer(
      ringGroup
    )
  ) {

    map.removeLayer(
      ringGroup
    );

  }


  map.fitBounds(
    bounds,
    {
      padding:[
        20,
        20
      ]
    }
  );


  cloudRunsPanel
  .scrollIntoView(
    {
      behavior:'smooth',
      block:'start'
    }
  );


  setStatus(
    prefecture +
    'を表示'
  );

}


/* =====================================
   都道府県 Dashboard
===================================== */

function updatePrefectureDashboard(
  stats
) {

  document
    .getElementById(
      'prefectureHeading'
    )
    .textContent =
      selectedYear ===
      'ALL'

        ? '都道府県別'

        : selectedYear +
          '年 都道府県別';


  const list =
    document.getElementById(
      'prefectureList'
    );


  const entries =
    Object.entries(
      stats.prefectureDistance
    )
    .filter(
      (
        [
          ,
          km
        ]
      ) =>
        km >
        0.01
    )
    .sort(
      (
        a,
        b
      ) =>
        b[1] -
        a[1]
    );


  list.innerHTML =
    '';


  if (
    !entries.length
  ) {

    list.innerHTML =
      '<div class="emptyMessage">' +
      'この期間の都道府県データがありません' +
      '</div>';

    return;

  }


  const maxKm =
    entries[0][1];


  entries.forEach(
    (
      [
        prefecture,
        km
      ]
    ) => {

      const percent =
        Math.max(
          3,
          km /
          maxKm *
          100
        );


      const runs =
        stats
          .prefectureRunCount[
            prefecture
          ] ||
        0;


      const card =
        document.createElement(
          'div'
        );


      card.className =
        'prefectureCard';


      card.innerHTML =
        '<div class="prefectureTop">' +
          '<div class="prefectureName">' +
            prefecture +
          '</div>' +
          '<div class="prefectureDistance">' +
            km.toFixed(
              2
            ) +
            ' km' +
          '</div>' +
        '</div>' +
        '<div class="barTrack">' +
          '<div class="barFill" style="width:' +
            percent +
            '%"></div>' +
        '</div>' +
        '<div class="prefectureRuns">' +
          'RUNS ' +
          runs +
        '</div>';


      card.onclick =
        () =>
          focusPrefecture(
            prefecture
          );


      list.appendChild(
        card
      );

    }
  );

}


/* =====================================
   市町村 Dashboard
===================================== */

function updateDashboard(
  stats
) {

  const entries =
    Object.entries(
      stats.municipalityDistance
    )
    .filter(
      (
        [
          ,
          km
        ]
      ) =>
        km >
        0.01
    )
    .sort(
      (
        a,
        b
      ) =>
        b[1] -
        a[1]
    );


  document
    .getElementById(
      'totalDistance'
    )
    .textContent =
      stats
        .totalDistanceKm
        .toFixed(
          1
        );


  document
    .getElementById(
      'runCount'
    )
    .textContent =
      stats.activities.length;


  document
    .getElementById(
      'cityCount'
    )
    .textContent =
      entries.length;


  updatePrefectureDashboard(
    stats
  );


  document
    .getElementById(
      'cityHeading'
    )
    .textContent =
      selectedYear ===
      'ALL'

        ? '市町村別'

        : selectedYear +
          '年 市町村別';


  const cityList =
    document.getElementById(
      'cityList'
    );


  cityList.innerHTML =
    '';


  if (
    !entries.length
  ) {

    cityList.innerHTML =
      '<div class="emptyMessage">' +
      'この期間の市町村データがありません' +
      '</div>';

    return;

  }


  const maxKm =
    entries[0][1];


  entries.forEach(
    (
      [
        cityKey,
        km
      ]
    ) => {

      const {
        prefecture,
        city
      } =
        splitCityKey(
          cityKey
        );


      const percent =
        Math.max(
          3,
          km /
          maxKm *
          100
        );


      const runs =
        stats
          .municipalityRunCount[
            cityKey
          ] ||
        0;


      const card =
        document.createElement(
          'div'
        );


      card.className =
        'cityCard';


      card.innerHTML =
        '<div class="cityTop">' +
          '<div class="cityName">' +
            city +
          '</div>' +
          '<div class="cityDistance">' +
            km.toFixed(
              2
            ) +
            ' km' +
          '</div>' +
        '</div>' +
        '<div class="barTrack">' +
          '<div class="barFill" style="width:' +
            percent +
            '%"></div>' +
        '</div>' +
        '<div class="cityRuns">' +
          prefecture +
          ' ・ RUNS ' +
          runs +
        '</div>';


      card.onclick =
        () =>
          focusMunicipality(
            cityKey
          );


      cityList.appendChild(
        card
      );

    }
  );

}


/* =====================================
   表示切替
===================================== */

function updateDisplay() {

  const zoom =
    map.getZoom();


  if (
    zoom >=
    14
  ) {

    if (
      municipalityLayer &&
      map.hasLayer(
        municipalityLayer
      )
    ) {

      map.removeLayer(
        municipalityLayer
      );

    }


    if (
      !map.hasLayer(
        ringGroup
      )
    ) {

      ringGroup.addTo(
        map
      );

    }


    if (
      !map.hasLayer(
        routeGroup
      )
    ) {

      routeGroup.addTo(
        map
      );

    }


    setStatus(
      selectedYear ===
      'ALL'

        ? '詳細表示：実走コース＋100m Runner\'s Rings'

        : selectedYear +
          '年：実走コース＋100m Runner\'s Rings'
    );

  }
  else if (
    zoom >=
    12
  ) {

    if (
      municipalityLayer &&
      map.hasLayer(
        municipalityLayer
      )
    ) {

      map.removeLayer(
        municipalityLayer
      );

    }


    if (
      map.hasLayer(
        ringGroup
      )
    ) {

      map.removeLayer(
        ringGroup
      );

    }


    if (
      !map.hasLayer(
        routeGroup
      )
    ) {

      routeGroup.addTo(
        map
      );

    }


    setStatus(
      selectedYear ===
      'ALL'

        ? '路線表示：実際に走ったコース'

        : selectedYear +
          '年：実際に走ったコース'
    );

  }
  else {

    if (
      municipalityLayer &&
      !map.hasLayer(
        municipalityLayer
      )
    ) {

      municipalityLayer.addTo(
        map
      );

    }


    if (
      map.hasLayer(
        routeGroup
      )
    ) {

      map.removeLayer(
        routeGroup
      );

    }


    if (
      map.hasLayer(
        ringGroup
      )
    ) {

      map.removeLayer(
        ringGroup
      );

    }


    setStatus(
      selectedYear ===
      'ALL'

        ? '広域表示：累積走行距離を市町村面で表示'

        : selectedYear +
          '年：走行距離を市町村面で表示'
    );

  }

}


/* =====================================
   再描画
===================================== */

function renderSelectedData() {

  const stats =
    buildSelectedStats();


  clearMapLayers();


  drawRoutes(
    stats.activities
  );


  drawRingCells(
    stats.ringCells
  );


  drawMunicipalities(
    stats.municipalityDistance,
    stats.municipalityRunCount
  );


  updateDashboard(
    stats
  );


  updateDisplay();

}


/* =====================================
   初期表示
===================================== */

function getHomePrefectureBounds() {

  const stats =
    buildSelectedStats();


  const ranking =
    Object.entries(
      stats.prefectureDistance
    )
    .sort(
      (
        a,
        b
      ) =>
        b[1] -
        a[1]
    );


  if (
    !ranking.length
  ) {

    return null;

  }


  const prefecture =
    ranking[0][0];


  const bounds =
    getPrefectureBounds(
      prefecture
    );


  return bounds

    ? {
        prefecture,
        bounds
      }

    : null;

}


/* =====================================
   アプリ起動
===================================== */

async function start() {
// =====================================
// Strava起動時自動同期
// 前回同期から30分以内は再同期しない。
// アプリを開くたびにStrava APIを呼ぶのを防ぐ。
// =====================================

const STRAVA_SYNC_INTERVAL =
  30 * 60 * 1000;

const lastStravaSync =
  Number(
    localStorage.getItem(
      'RunnerRingsLastStravaSync'
    ) || 0
  );

const now =
  Date.now();

if (
  now - lastStravaSync >=
  STRAVA_SYNC_INTERVAL
) {

  syncStrava(true)
  .then(syncResult => {
    if (syncResult) {
      localStorage.setItem(
        'RunnerRingsLastStravaSync',
        String(now)
      );
    }
  })
  .catch(error => {
    console.error(
      'Strava background sync error:',
      error
    );
  });

 
}
  try {

    await claimLegacyLocalGPX();


    await loadMunicipalities();


    await updateStravaConnectionStatus();
// =====================================
// 起動時データ読込
// クラウドを正本とする。
// 過去データとGitHub GPXは、クラウドが空の時だけ復旧用に読む。
// PC・スマホで件数が変わるのを防ぐ。
// =====================================

let archiveCount = 0;
let githubCount = 0;

const cloudCount =
  await loadCloudActivities();

if (
  cloudCount === 0 &&
  isLegacyOwner()
) {

  setStatus(
    '過去ランを復元中…'
  );

  archiveCount =
    loadArchiveActivities();

  const gpxFiles =
    await getGPXFiles();

  githubCount =
    await loadAllGPX(
      gpxFiles
    );
}
    setStatus(
      '端末保存ランを復元中…'
    );


    const localResult =
      await loadSavedActivities();

    createYearFilters();


    renderSelectedData();


    await updateStorageInfo();


    await renderSavedRuns();


    const home =
      getHomePrefectureBounds();


    if (
      home
    ) {

      map.fitBounds(
        home.bounds,
        {
          padding:[
            20,
            20
          ]
        }
      );

    }
    else if (
      municipalityLayer
    ) {

      map.fitBounds(
        municipalityLayer
          .getBounds()
      );

    }


    setTimeout(
      () =>
        map.invalidateSize(),
      200
    );


    console.log(
      '過去:',
      archiveCount
    );


    console.log(
      'GitHub:',
      githubCount
    );


    console.log(
      'クラウド:',
      cloudCount
    );


    console.log(
      '端末追加:',
      localResult.loaded
    );


    console.log(
      '今回クラウド同期:',
      localResult.synced
    );


    console.log(
      '合計:',
      activities.length
    );


    if (
      localResult.synced >
      0
    ) {

      setStatus(
        '✅ ' +
        localResult.synced +
        ' RUNSをクラウドへ同期しました'
      );

    }

  }
  catch(error) {

    console.error(
      error
    );


    setStatus(
      '❌ ' +
      error.message
    );

  }

}


map.on(
  'zoomend',
  updateDisplay
);


/* =====================================
   認証状態 → 起動
===================================== */

async function init() {

  try {

    const {
      data,
      error
    } =
      await supabaseClient
        .auth
        .getSession();


    if (
      error
    ) {

      throw error;

    }


    currentSession =
      data.session;

    currentUser =
      data.session
        ?.user ||
      null;


    if (
      !currentSession ||
      !currentUser
    ) {

      authArea.style.display =
        'flex';

      appRoot.style.display =
        'none';

      return;

    }


    accountEmail.textContent =
  'アカウント';

    authArea.style.display =
      'none';

    appRoot.style.display =
      'block';


    setTimeout(
      () =>
        map.invalidateSize(),
      100
    );


    await start();

  }
  catch(error) {

    console.error(
      error
    );


    authArea.style.display =
      'flex';

    appRoot.style.display =
      'none';


    setAuthMessage(
      '認証情報を確認できませんでした。'
    );

  }

}


init();

const backToMapButton = document.getElementById("backToMapButton");

backToMapButton.onclick = () => {
  location.href = "https://runnersrings.com";
};

</script>

</body>
</html>