<!--
================================================================================
 構想図 / CONCEPT DIAGRAM  ---  "LINE再現プロジェクト" (Firebase + GitHub Pages版)
================================================================================

  [ブラウザ (iPad Safari など)]
        |
        |  静的ファイルとして読み込み
        v
  [GitHub Pages]  ---  index.html 1本を公開するだけ(ビルド不要)
        |
        |  ブラウザ上のJavaScriptからFirebase SDKを直接呼び出す
        v
  [Firebase (Google)]
        |-- Authentication   : 4方式のログインに対応
        |                      1. Googleログイン(signInWithPopup + GoogleAuthProvider)
        |                      2. メールアドレス+パスワード(実在メアドで直接登録)
        |                      3. 匿名ログイン(signInAnonymously)
        |                      4. ユーザー名+パスワード
        |                         (内部的には username@lineclone-users.app という
        |                          仮のメールアドレスに変換してFirebase Authに登録)
        |-- Firestore        : usernames  ... ユーザー名の重複チェック用
        |                       profiles   ... 表示名・アイコン色・匿名フラグなど
        |                       chats      ... チャットのメンバー・種別・既読状況
        |                       chats/{id}/messages ... メッセージ本体(リアルタイム購読)
        |                       chats/{id}/typing   ... 入力中の状態
        |-- Storage          : 送信された画像・ファイルの保存先

  画面構成 (LINE風UI・レスポンシブ、index.htmlのCSSで制御):
        PC幅  : [サイドバー(チャット一覧)] + [チャットルーム] を横並び表示
        スマホ幅: どちらか一方のみ表示し、ヘッダーの戻る操作で切替

  主な機能:
        4方式ログイン/新規登録, 匿名アカウントの本登録への昇格(アカウントリンク),
        チャット一覧, 個別チャット, グループチャット,
        リアルタイム送受信(Firestore onSnapshot),
        画像/ファイル送信(Firebase Storage), 既読表示, 入力中表示,
        未読バッジ, 日付区切り, ダークモード切替, チャット検索,
        新規チャット作成モーダル

  匿名アカウントの扱いについて:
        - 匿名ログイン(signInAnonymously)はブラウザのlocalStorageに認証情報を
          保持するだけなので、Cookie/サイトデータを消去したりデバイスを変えると
          二度とそのアカウントに戻れなくなる。
        - そのため、ヘッダーに常時「アカウントを保存」ボタンを表示し、かつ初回
          ログイン時にもモーダルで一度案内する。
        - リンク(linkWithCredential / linkWithPopup)はuidを変えずに認証方法を
          追加する仕組みなので、profiles/chats等のデータはそのまま引き継がれる。
          表示名も匿名時のものをそのまま使う(ユーザー名方式でリンクする場合も
          表示名はリンク前のものを維持し、ユーザー名だけ新規に選んでもらう)。

  セットアップに必要な作業 (すべてWebブラウザの管理画面のみで可能):
        1. Firebaseプロジェクトを作成し、Authentication
           (Google/メール-パスワード/匿名)、Firestore、Storageを有効化する
        2. Firebaseの設定値(FIREBASE_CONFIG)をこのファイル内の該当箇所に貼る
        3. Firestore/Storageのセキュリティルールを、別途渡すルール文言に置き換える
        4. GitHubリポジトリを作り、GitHub Pagesを有効化してこのファイルを置く

--------------------------------------------------------------------------------
 更新履歴 (このファイルを編集するたびに、この下へ1行追記すること)
   2026-07-27  Cloudflare Worker版から、Firebase + GitHub Pages版へ全面移行
   2026-07-27  認証をGoogle/メール/匿名/ユーザー名の4方式に拡張し、
               匿名アカウントのリンク(本登録への昇格)機能を追加
================================================================================
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
<title>LINE再現プロジェクト</title>
<style>
:root{
  --green:#06C755;
  --green-dark:#05a648;
  --bg:#ededed;
  --sidebar-bg:#ffffff;
  --border:#e2e2e2;
  --text:#222222;
  --sub:#8b8b8b;
  --bubble-mine:#8fe050;
  --bubble-other:#ffffff;
  --header-bg:#06C755;
  --header-text:#ffffff;
  --danger:#ff4b4b;
  --warn-bg:#fff6da;
  --warn-border:#f0d789;
  --radius:14px;
}
[data-theme="dark"]{
  --bg:#0f1115;
  --sidebar-bg:#181a1f;
  --border:#2a2d33;
  --text:#f0f0f0;
  --sub:#9a9a9a;
  --bubble-mine:#2f7a3d;
  --bubble-other:#242731;
  --header-bg:#0d3b22;
  --header-text:#f0f0f0;
  --warn-bg:#332b0f;
  --warn-border:#5c4b12;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overscroll-behavior:none;
}
#app-root{
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
}
button{font-family:inherit;cursor:pointer;}
input,textarea{font-family:inherit;}

#auth-screen{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,var(--green),var(--green-dark));
  padding:20px;
  overflow-y:auto;
}
.auth-box{
  background:#ffffff;
  border-radius:20px;
  width:100%;
  max-width:380px;
  padding:32px 28px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  margin:20px 0;
}
.auth-logo{
  text-align:center;
  font-size:26px;
  font-weight:700;
  color:var(--green);
  margin-bottom:6px;
}
.auth-sub{
  text-align:center;
  color:#888;
  font-size:13px;
  margin-bottom:22px;
}

.google-btn{
  width:100%;
  padding:11px 0;
  border:1px solid #dcdcdc;
  border-radius:10px;
  background:#fff;
  color:#333;
  font-size:14.5px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
}
.google-btn .g-icon{
  width:18px;height:18px;
  border-radius:50%;
  background:conic-gradient(from -45deg,#EA4335 0 25%,#4285F4 0 50%,#34A853 0 75%,#FBBC05 0 100%);
  flex-shrink:0;
}
.anon-btn{
  width:100%;
  padding:11px 0;
  border:1px dashed #c9c9c9;
  border-radius:10px;
  background:#f7f7f7;
  color:#666;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:18px;
}

.auth-divider{
  display:flex;align-items:center;gap:10px;
  color:#aaa;font-size:11.5px;
  margin:4px 0 16px;
}
.auth-divider::before,.auth-divider::after{
  content:"";flex:1;height:1px;background:#e3e3e3;
}

.auth-tabs{
  display:flex;
  margin-bottom:18px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #e0e0e0;
}
.auth-tab{
  flex:1;
  text-align:center;
  padding:9px 0;
  background:#f7f7f7;
  border:none;
  font-size:12.5px;
  color:#666;
}
.auth-tab.active{
  background:var(--green);
  color:#fff;
  font-weight:600;
}
.auth-field{margin-bottom:14px;}
.auth-field label{
  display:block;
  font-size:12px;
  color:#777;
  margin-bottom:5px;
}
.auth-field input{
  width:100%;
  padding:11px 13px;
  border:1px solid #dcdcdc;
  border-radius:10px;
  font-size:15px;
  outline:none;
}
.auth-field input:focus{border-color:var(--green);}
.auth-submit{
  width:100%;
  padding:12px 0;
  border:none;
  border-radius:10px;
  background:var(--green);
  color:#fff;
  font-size:15px;
  font-weight:700;
  margin-top:6px;
}
.auth-submit:disabled{opacity:0.5;}
.auth-error{
  color:var(--danger);
  font-size:12.5px;
  margin-top:10px;
  min-height:16px;
  text-align:center;
}
.auth-form-panel{display:none;}
.auth-form-panel.active{display:block;}

#main-screen{display:none;flex:1;overflow:hidden;}
#main-screen.active{display:flex;}

.save-account-banner{
  display:none;
  background:var(--warn-bg);
  border-bottom:1px solid var(--warn-border);
  padding:8px 14px;
  font-size:12.5px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.save-account-banner.show{display:flex;}
.save-account-banner button{
  background:var(--green);
  color:#fff;border:none;
  padding:6px 12px;border-radius:8px;
  font-size:12px;font-weight:700;
  flex-shrink:0;
}

.sidebar{
  width:340px;
  min-width:340px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
}
.sidebar-header{
  background:var(--header-bg);
  color:var(--header-text);
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.sidebar-header .title{font-size:17px;font-weight:700;}
.sidebar-header .icons{display:flex;gap:10px;}
.icon-btn{
  background:rgba(255,255,255,0.18);
  border:none;
  color:#fff;
  width:32px;height:32px;
  border-radius:50%;
  font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.search-bar{padding:8px 12px;border-bottom:1px solid var(--border);}
.search-bar input{
  width:100%;
  padding:8px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-size:13.5px;
  outline:none;
}
.chat-list{flex:1;overflow-y:auto;}
.chat-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.chat-item:hover{background:rgba(0,0,0,0.03);}
.chat-item.active{background:rgba(6,199,85,0.08);}
.avatar{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:17px;
  flex-shrink:0;
  position:relative;
}
.avatar .dot{
  position:absolute;bottom:-2px;right:-2px;
  width:12px;height:12px;border-radius:50%;
  background:#bbb;border:2px solid var(--sidebar-bg);
}
.avatar .dot.online{background:var(--green);}
.chat-item-body{flex:1;min-width:0;}
.chat-item-top{display:flex;justify-content:space-between;align-items:baseline;}
.chat-item-name{font-size:14.5px;font-weight:600;}
.chat-item-preview{
  font-size:12.5px;color:var(--sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:210px;
}
.unread-badge{
  background:var(--green);color:#fff;
  font-size:11px;font-weight:700;
  border-radius:10px;min-width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px;
}
.empty-list{padding:30px 16px;color:var(--sub);font-size:13px;text-align:center;}

.chat-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  min-width:0;
}
.chat-panel.empty-state{align-items:center;justify-content:center;color:var(--sub);font-size:14px;}
.chat-header{
  background:var(--header-bg);
  color:var(--header-text);
  padding:12px 16px;
  display:flex;align-items:center;gap:12px;
}
.back-btn{display:none;background:none;border:none;color:#fff;font-size:20px;padding:0 4px;}
.chat-header-name{font-size:16px;font-weight:700;}
.chat-header-sub{font-size:11.5px;opacity:0.85;}
.messages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:2px;}
.date-sep{text-align:center;font-size:11.5px;color:var(--sub);margin:14px 0 8px;}
.date-sep span{background:rgba(0,0,0,0.06);padding:3px 12px;border-radius:12px;}
.msg-row{display:flex;gap:8px;margin:3px 0;align-items:flex-end;}
.msg-row.mine{justify-content:flex-end;}
.msg-avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:13px;flex-shrink:0;
}
.msg-col{display:flex;flex-direction:column;max-width:62%;}
.msg-row.mine .msg-col{align-items:flex-end;}
.msg-sender{font-size:11px;color:var(--sub);margin-bottom:2px;}
.bubble{
  padding:9px 13px;
  border-radius:var(--radius);
  font-size:14.5px;
  line-height:1.45;
  word-break:break-word;
  white-space:pre-wrap;
}
.msg-row.mine .bubble{background:var(--bubble-mine);border-top-right-radius:4px;}
.msg-row:not(.mine) .bubble{background:var(--bubble-other);border-top-left-radius:4px;}
.bubble img{max-width:220px;max-height:220px;border-radius:10px;display:block;}
.file-chip{
  display:flex;align-items:center;gap:8px;
  background:rgba(0,0,0,0.05);
  padding:8px 12px;border-radius:10px;
  font-size:13px;text-decoration:none;color:var(--text);
}
.msg-meta{font-size:10.5px;color:var(--sub);margin-top:3px;display:flex;gap:6px;}
.typing-indicator{font-size:12px;color:var(--sub);padding:0 4px;height:18px;}
.composer{
  border-top:1px solid var(--border);
  background:var(--sidebar-bg);
  padding:10px 12px;
  display:flex;align-items:flex-end;gap:8px;
}
.composer textarea{
  flex:1;resize:none;
  border:1px solid var(--border);
  border-radius:20px;
  padding:10px 15px;
  font-size:14.5px;
  max-height:110px;
  outline:none;
  background:var(--bg);
  color:var(--text);
}
.composer button{
  border:none;background:none;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--green);font-size:20px;flex-shrink:0;
}
.send-btn{background:var(--green) !important;color:#fff !important;}
.send-btn:disabled{opacity:0.4;}

.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);
  display:none;align-items:center;justify-content:center;z-index:50;
  padding:20px;
}
.modal-overlay.active{display:flex;}
.modal-box{
  background:var(--sidebar-bg);
  border-radius:16px;
  width:100%;max-width:400px;
  max-height:85vh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.modal-head{padding:16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.modal-head h3{margin:0;font-size:16px;}
.modal-close{background:none;border:none;font-size:18px;color:var(--sub);}
.modal-body{padding:14px 16px;overflow-y:auto;flex:1;}
.modal-body p.hint{font-size:12.5px;color:var(--sub);margin:0 0 14px;line-height:1.6;}
.modal-body input[type=text],.modal-body input[type=email],.modal-body input[type=password]{
  width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;margin-bottom:12px;font-size:14px;
  background:var(--bg);color:var(--text);outline:none;
}
.user-pick{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border);}
.user-pick input{margin-left:auto;}
.modal-foot{padding:14px 16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}
.modal-foot button{
  width:100%;padding:11px 0;border:none;border-radius:10px;
  background:var(--green);color:#fff;font-weight:700;font-size:14.5px;
}
.modal-foot .secondary{
  background:none;color:var(--sub);font-weight:600;font-size:13px;padding:6px 0;
}
.link-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.link-tab{
  padding:7px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);font-size:12.5px;
}
.link-tab.active{background:var(--green);color:#fff;border-color:var(--green);}
.link-error{color:var(--danger);font-size:12.5px;min-height:16px;margin-top:2px;}

@media (max-width:820px){
  .sidebar{width:100%;min-width:0;}
  .sidebar,.chat-panel{width:100%;}
  #main-screen{position:relative;}
  #main-screen .sidebar,#main-screen .chat-panel{position:absolute;top:0;left:0;right:0;bottom:0;}
  #main-screen .chat-panel{transform:translateX(100%);transition:transform .18s ease;}
  #main-screen.show-chat .chat-panel{transform:translateX(0);}
  #main-screen.show-chat .sidebar{transform:translateX(-100%);transition:transform .18s ease;}
  .back-btn{display:block;}
  .msg-col{max-width:78%;}
}
@media (min-width:821px){.back-btn{display:none;}}
.hidden-input{display:none;}
</style>
</head>
<body>
<div id="app-root">

  <div id="auth-screen">
    <div class="auth-box">
      <div class="auth-logo">LINE再現プロジェクト</div>
      <div class="auth-sub">Firebase + GitHub Pagesで動くチャットアプリ</div>

      <button class="google-btn" id="google-login-btn">
        <span class="g-icon"></span> Googleでログイン
      </button>
      <button class="anon-btn" id="anon-login-btn">登録せずに試してみる(匿名)</button>

      <div class="auth-divider">またはメール/ユーザー名で</div>

      <div class="auth-tabs">
        <button class="auth-tab active" data-mode="mail-login">メールログイン</button>
        <button class="auth-tab" data-mode="mail-register">メール登録</button>
        <button class="auth-tab" data-mode="uname-login">ユーザー名</button>
        <button class="auth-tab" data-mode="uname-register">ユーザー名登録</button>
      </div>

      <form class="auth-form-panel active" id="mail-login-form" data-mode="mail-login">
        <div class="auth-field">
          <label>メールアドレス</label>
          <input type="email" id="mail-login-email" autocomplete="email" required>
        </div>
        <div class="auth-field">
          <label>パスワード</label>
          <input type="password" id="mail-login-password" autocomplete="current-password" required>
        </div>
        <button class="auth-submit" type="submit">ログイン</button>
        <div class="auth-error" id="mail-login-error"></div>
      </form>

      <form class="auth-form-panel" id="mail-register-form" data-mode="mail-register">
        <div class="auth-field">
          <label>表示名</label>
          <input type="text" id="mail-reg-displayname" required maxlength="30">
        </div>
        <div class="auth-field">
          <label>メールアドレス</label>
          <input type="email" id="mail-reg-email" autocomplete="email" required>
        </div>
        <div class="auth-field">
          <label>パスワード(6文字以上)</label>
          <input type="password" id="mail-reg-password" autocomplete="new-password" required minlength="6">
        </div>
        <button class="auth-submit" type="submit">登録する</button>
        <div class="auth-error" id="mail-register-error"></div>
      </form>

      <form class="auth-form-panel" id="login-form" data-mode="uname-login">
        <div class="auth-field">
          <label>ユーザー名</label>
          <input type="text" id="login-username" autocomplete="username" required>
        </div>
        <div class="auth-field">
          <label>パスワード</label>
          <input type="password" id="login-password" autocomplete="current-password" required>
        </div>
        <button class="auth-submit" type="submit">ログイン</button>
        <div class="auth-error" id="login-error"></div>
      </form>

      <form class="auth-form-panel" id="register-form" data-mode="uname-register">
        <div class="auth-field">
          <label>表示名</label>
          <input type="text" id="reg-displayname" required maxlength="30">
        </div>
        <div class="auth-field">
          <label>ユーザー名(半角英数字とアンダースコア 3〜20文字)</label>
          <input type="text" id="reg-username" required pattern="[a-z0-9_]{3,20}">
        </div>
        <div class="auth-field">
          <label>パスワード(6文字以上)</label>
          <input type="password" id="reg-password" required minlength="6">
        </div>
        <button class="auth-submit" type="submit">登録する</button>
        <div class="auth-error" id="register-error"></div>
      </form>
    </div>
  </div>

  <div id="main-screen">
    <div class="sidebar">
      <div class="sidebar-header">
        <div class="title" id="my-name">トーク</div>
        <div class="icons">
          <button class="icon-btn" id="save-account-btn" title="アカウントを保存" style="display:none;">保存</button>
          <button class="icon-btn" id="theme-btn" title="ダークモード切替">D</button>
          <button class="icon-btn" id="new-chat-btn" title="新規チャット">+</button>
          <button class="icon-btn" id="logout-btn" title="ログアウト">出</button>
        </div>
      </div>
      <div class="save-account-banner" id="save-account-banner">
        <span>匿名利用中です。データを消さないよう保存しませんか?</span>
        <button id="banner-save-btn">保存する</button>
      </div>
      <div class="search-bar">
        <input type="text" id="chat-search" placeholder="チャットを検索">
      </div>
      <div class="chat-list" id="chat-list"></div>
    </div>

    <div class="chat-panel empty-state" id="chat-panel">
      <div id="empty-hint">チャットを選択してください</div>
    </div>
  </div>

  <div class="modal-overlay" id="new-chat-modal">
    <div class="modal-box">
      <div class="modal-head">
        <h3>新規チャット</h3>
        <button class="modal-close" id="close-new-chat">×</button>
      </div>
      <div class="modal-body">
        <input type="text" id="user-search-input" placeholder="ユーザー名で検索">
        <input type="text" id="group-name-input" placeholder="グループ名(複数選択時のみ)" style="display:none;">
        <div id="user-search-results"></div>
      </div>
      <div class="modal-foot">
        <button id="create-chat-confirm">チャットを作成</button>
      </div>
    </div>
  </div>

  <!-- 匿名→本登録アカウントへのリンクモーダル -->
  <div class="modal-overlay" id="link-account-modal">
    <div class="modal-box">
      <div class="modal-head">
        <h3>アカウントを保存</h3>
        <button class="modal-close" id="close-link-modal">×</button>
      </div>
      <div class="modal-body">
        <p class="hint">
          今のトーク履歴やプロフィールはそのまま引き継がれます。
          ブラウザのデータを消しても、下記の方法でいつでもログインし直せるようになります。
        </p>
        <button class="google-btn" id="link-google-btn">
          <span class="g-icon"></span> Googleでリンクする
        </button>

        <div class="link-tabs">
          <button class="link-tab active" data-link-mode="mail">メールアドレス</button>
          <button class="link-tab" data-link-mode="uname">ユーザー名</button>
        </div>

        <div id="link-mail-panel">
          <input type="email" id="link-mail-email" placeholder="メールアドレス">
          <input type="password" id="link-mail-password" placeholder="パスワード(6文字以上)">
        </div>
        <div id="link-uname-panel" style="display:none;">
          <input type="text" id="link-uname-username" placeholder="ユーザー名(半角英数字とアンダースコア 3〜20文字)">
          <input type="password" id="link-uname-password" placeholder="パスワード(6文字以上)">
        </div>
        <div class="link-error" id="link-error"></div>
      </div>
      <div class="modal-foot">
        <button id="link-confirm-btn">この方法で保存する</button>
        <button class="secondary" id="link-later-btn">あとで(このまま匿名利用を続ける)</button>
      </div>
    </div>
  </div>

</div>

<input type="file" id="file-input" class="hidden-input">

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import {
  getAuth, GoogleAuthProvider, EmailAuthProvider,
  signInWithPopup, signInAnonymously,
  createUserWithEmailAndPassword, signInWithEmailAndPassword,
  linkWithPopup, linkWithCredential,
  onAuthStateChanged, signOut
} from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";
import {
  getFirestore, doc, getDoc, setDoc, updateDoc, collection, addDoc,
  query, where, orderBy, limit, onSnapshot, getDocs, serverTimestamp,
  Timestamp
} from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2";

const FIREBASE_CONFIG = {
  apiKey: "AIzaSyAwbwglqgM77hE5Dgp9J9C9PJfv6RnYhlI",
  authDomain: "webbrowserchat.firebaseapp.com",
  projectId: "webbrowserchat",
  storageBucket: "webbrowserchat.firebasestorage.app",
  messagingSenderId: "399840838120",
  appId: "1:399840838120:web:93c0276444e426d346e45d"
};

const EMAIL_DOMAIN = "lineclone-users.app";

const SUPABASE_URL = "https://jayjuqdwihgtwukhcshn.supabase.co";
const SUPABASE_ANON_KEY = "sb_publishable_OLzy4uaLMghRkhLxe2Wpjw_G60-twPG";
const SUPABASE_BUCKET = "data";

const app = initializeApp(FIREBASE_CONFIG);
const auth = getAuth(app);
const db = getFirestore(app);
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
const googleProvider = new GoogleAuthProvider();

var state = {
  me: null,
  isAnonymous: false,
  linkModalShownThisSession: false,
  chats: [],
  currentChatId: null,
  unsubMessages: null,
  unsubTyping: null,
  unsubChat: null,
  typingTimer: null,
  selectedUsers: {},
  lastRenderedDate: null
};

function el(id){ return document.getElementById(id); }

function escapeHtml(s){
  return String(s)
    .split("&").join("&amp;")
    .split("<").join("&lt;")
    .split(">").join("&gt;")
    .split(String.fromCharCode(34)).join("&quot;")
    .split("'").join("&#39;");
}

function fmtTime(ms){
  var d = new Date(ms);
  var h = d.getHours(); var m = d.getMinutes();
  return (h<10?"0"+h:h) + ":" + (m<10?"0"+m:m);
}

function fmtDate(ms){
  var d = new Date(ms);
  return d.getFullYear() + "年" + (d.getMonth()+1) + "月" + d.getDate() + "日";
}

function sameDay(a,b){
  var da = new Date(a); var db2 = new Date(b);
  return da.getFullYear()===db2.getFullYear() && da.getMonth()===db2.getMonth() && da.getDate()===db2.getDate();
}

function colorFromName(name){
  var hash = 0;
  for (var i=0;i<name.length;i++){ hash = name.charCodeAt(i) + ((hash<<5)-hash); }
  var hue = Math.abs(hash) % 360;
  return "hsl(" + hue + ",60%,45%)";
}

function toMillis(ts){
  if (!ts) return Date.now();
  if (ts.toMillis) return ts.toMillis();
  return Date.now();
}

function randomGuestName(){
  return "ゲスト" + Math.floor(1000 + Math.random()*9000);
}

function usernameToEmail(username){
  return username + "@" + EMAIL_DOMAIN;
}

function showAuth(){
  el("auth-screen").style.display = "flex";
  el("main-screen").classList.remove("active");
}
function showMain(){
  el("auth-screen").style.display = "none";
  el("main-screen").classList.add("active");
}

/* ---------- 認証タブ(4方式)切り替え ---------- */
var authTabs = document.querySelectorAll(".auth-tab");
authTabs.forEach(function(tab){
  tab.onclick = function(){
    authTabs.forEach(function(t){ t.classList.remove("active"); });
    document.querySelectorAll(".auth-form-panel").forEach(function(p){ p.classList.remove("active"); });
    tab.classList.add("active");
    document.querySelector(".auth-form-panel[data-mode=\"" + tab.getAttribute("data-mode") + "\"]").classList.add("active");
  };
});

/* ---------- Googleログイン ---------- */
el("google-login-btn").onclick = function(){
  signInWithPopup(auth, googleProvider).catch(function(err){
    if (err && err.code === "auth/popup-closed-by-user") return;
    alert("Googleログインに失敗しました");
  });
};

/* ---------- 匿名ログイン ---------- */
el("anon-login-btn").onclick = function(){
  signInAnonymously(auth).catch(function(){
    alert("匿名ログインに失敗しました");
  });
};

/* ---------- メールアドレス ログイン/登録 ---------- */
el("mail-login-form").onsubmit = function(e){
  e.preventDefault();
  el("mail-login-error").textContent = "";
  var email = el("mail-login-email").value.trim();
  var password = el("mail-login-password").value;
  signInWithEmailAndPassword(auth, email, password).catch(function(){
    el("mail-login-error").textContent = "ログインに失敗しました";
  });
};

el("mail-register-form").onsubmit = function(e){
  e.preventDefault();
  el("mail-register-error").textContent = "";
  var displayName = el("mail-reg-displayname").value.trim();
  var email = el("mail-reg-email").value.trim();
  var password = el("mail-reg-password").value;
  createUserWithEmailAndPassword(auth, email, password).then(function(cred){
    var uid = cred.user.uid;
    var color = colorFromName(displayName || email);
    return setDoc(doc(db,"profiles",uid), {
      displayName: displayName,
      color: color,
      createdAt: serverTimestamp()
    });
  }).catch(function(err){
    if (err && err.code === "auth/email-already-in-use"){
      el("mail-register-error").textContent = "このメールアドレスは既に使われています";
    } else {
      el("mail-register-error").textContent = "登録に失敗しました";
    }
  });
};

/* ---------- ユーザー名 ログイン/登録(既存の自動メアド変換方式) ---------- */
el("login-form").onsubmit = function(e){
  e.preventDefault();
  el("login-error").textContent = "";
  var username = el("login-username").value.trim().toLowerCase();
  var password = el("login-password").value;
  signInWithEmailAndPassword(auth, usernameToEmail(username), password).catch(function(){
    el("login-error").textContent = "ログインに失敗しました";
  });
};

el("register-form").onsubmit = function(e){
  e.preventDefault();
  el("register-error").textContent = "";
  var username = el("reg-username").value.trim().toLowerCase();
  var displayName = el("reg-displayname").value.trim();
  var password = el("reg-password").value;
  if (!/^[a-z0-9_]{3,20}$/.test(username)){
    el("register-error").textContent = "ユーザー名の形式が正しくありません";
    return;
  }
  getDoc(doc(db,"usernames",username)).then(function(snap){
    if (snap.exists()){
      el("register-error").textContent = "そのユーザー名は既に使われています";
      return;
    }
    return createUserWithEmailAndPassword(auth, usernameToEmail(username), password).then(function(cred){
      var uid = cred.user.uid;
      var color = colorFromName(username);
      return setDoc(doc(db,"usernames",username), {uid: uid}).then(function(){
        return setDoc(doc(db,"profiles",uid), {
          username: username,
          displayName: displayName,
          color: color,
          createdAt: serverTimestamp()
        });
      });
    });
  }).catch(function(){
    el("register-error").textContent = "登録に失敗しました";
  });
};

el("logout-btn").onclick = function(){
  cleanupChatListeners();
  signOut(auth);
};

el("theme-btn").onclick = function(){
  var current = document.body.getAttribute("data-theme");
  var next = current === "dark" ? "" : "dark";
  document.body.setAttribute("data-theme", next);
  localStorage.setItem("line_clone_theme", next);
};

var savedTheme = localStorage.getItem("line_clone_theme");
if (savedTheme){ document.body.setAttribute("data-theme", savedTheme); }

/* ---------- 認証状態の監視 ---------- */
onAuthStateChanged(auth, function(user){
  if (!user){
    state.me = null;
    showAuth();
    return;
  }
  state.isAnonymous = !!user.isAnonymous;

  getDoc(doc(db,"profiles",user.uid)).then(function(snap){
    if (!snap.exists()){
      if (user.isAnonymous){
        var guestName = randomGuestName();
        var color = colorFromName(guestName);
        return setDoc(doc(db,"profiles",user.uid), {
          displayName: guestName,
          color: color,
          isAnonymous: true,
          createdAt: serverTimestamp()
        }).then(function(){
          return getDoc(doc(db,"profiles",user.uid));
        });
      }
      return snap;
    }
    return snap;
  }).then(function(snap2){
    var data = snap2.exists() ? snap2.data() : {displayName:"?",color:"#888"};
    state.me = {
      uid: user.uid,
      username: data.username || null,
      displayName: data.displayName,
      color: data.color
    };
    el("my-name").textContent = state.me.displayName;
    updateSaveAccountUI();
    showMain();
    loadChats();

    if (state.isAnonymous && !state.linkModalShownThisSession){
      state.linkModalShownThisSession = true;
      setTimeout(function(){ openLinkModal(); }, 400);
    }
  });
});

function updateSaveAccountUI(){
  var show = !!state.isAnonymous;
  el("save-account-btn").style.display = show ? "flex" : "none";
  el("save-account-banner").classList.toggle("show", show);
}

el("save-account-btn").onclick = function(){ openLinkModal(); };
el("banner-save-btn").onclick = function(){ openLinkModal(); };

/* ---------- 匿名アカウントのリンク(本登録への昇格) ---------- */
function openLinkModal(){
  el("link-error").textContent = "";
  el("link-mail-email").value = "";
  el("link-mail-password").value = "";
  el("link-uname-username").value = "";
  el("link-uname-password").value = "";
  document.querySelectorAll(".link-tab").forEach(function(t){ t.classList.remove("active"); });
  document.querySelector(".link-tab[data-link-mode=\"mail\"]").classList.add("active");
  el("link-mail-panel").style.display = "block";
  el("link-uname-panel").style.display = "none";
  el("link-account-modal").classList.add("active");
}
el("close-link-modal").onclick = function(){ el("link-account-modal").classList.remove("active"); };
el("link-later-btn").onclick = function(){ el("link-account-modal").classList.remove("active"); };
el("link-account-modal").onclick = function(e){
  if (e.target === el("link-account-modal")){ el("link-account-modal").classList.remove("active"); }
};

document.querySelectorAll(".link-tab").forEach(function(tab){
  tab.onclick = function(){
    document.querySelectorAll(".link-tab").forEach(function(t){ t.classList.remove("active"); });
    tab.classList.add("active");
    var mode = tab.getAttribute("data-link-mode");
    el("link-mail-panel").style.display = mode === "mail" ? "block" : "none";
    el("link-uname-panel").style.display = mode === "uname" ? "block" : "none";
  };
});

el("link-google-btn").onclick = function(){
  el("link-error").textContent = "";
  linkWithPopup(auth.currentUser, googleProvider).then(function(){
    afterSuccessfulLink();
  }).catch(function(err){
    handleLinkError(err);
  });
};

el("link-confirm-btn").onclick = function(){
  el("link-error").textContent = "";
  var activeMode = document.querySelector(".link-tab.active").getAttribute("data-link-mode");

  if (activeMode === "mail"){
    var email = el("link-mail-email").value.trim();
    var password = el("link-mail-password").value;
    if (!email || password.length < 6){
      el("link-error").textContent = "メールアドレスと6文字以上のパスワードを入力してください";
      return;
    }
    var cred = EmailAuthProvider.credential(email, password);
    linkWithCredential(auth.currentUser, cred).then(function(){
      var uid = auth.currentUser.uid;
      return updateDoc(doc(db,"profiles",uid), {isAnonymous: false});
    }).then(function(){
      afterSuccessfulLink();
    }).catch(function(err){
      handleLinkError(err);
    });
    return;
  }

  if (activeMode === "uname"){
    var username = el("link-uname-username").value.trim().toLowerCase();
    var upass = el("link-uname-password").value;
    if (!/^[a-z0-9_]{3,20}$/.test(username)){
      el("link-error").textContent = "ユーザー名の形式が正しくありません";
      return;
    }
    if (upass.length < 6){
      el("link-error").textContent = "パスワードは6文字以上にしてください";
      return;
    }
    getDoc(doc(db,"usernames",username)).then(function(snap){
      if (snap.exists()){
        el("link-error").textContent = "そのユーザー名は既に使われています";
        return null;
      }
      var uid = auth.currentUser.uid;
      var ucred = EmailAuthProvider.credential(usernameToEmail(username), upass);
      return linkWithCredential(auth.currentUser, ucred).then(function(){
        return setDoc(doc(db,"usernames",username), {uid: uid});
      }).then(function(){
        return updateDoc(doc(db,"profiles",uid), {username: username, isAnonymous: false});
      });
    }).then(function(result){
      if (result === null) return;
      afterSuccessfulLink();
    }).catch(function(err){
      handleLinkError(err);
    });
    return;
  }
};

function afterSuccessfulLink(){
  state.isAnonymous = false;
  updateSaveAccountUI();
  el("link-account-modal").classList.remove("active");
}

function handleLinkError(err){
  if (err && err.code === "auth/popup-closed-by-user") return;
  if (err && err.code === "auth/credential-already-in-use"){
    el("link-error").textContent = "その方法は既に別のアカウントで使われています";
    return;
  }
  if (err && err.code === "auth/email-already-in-use"){
    el("link-error").textContent = "そのメールアドレスは既に使われています";
    return;
  }
  el("link-error").textContent = "保存に失敗しました";
}

function loadChats(){
  var q = query(collection(db,"chats"), where("members","array-contains",state.me.uid));
  onSnapshot(q, function(snapshot){
    var chats = [];
    snapshot.forEach(function(docSnap){
      var data = docSnap.data();
      chats.push({id: docSnap.id, isGroup: data.isGroup, name: data.name, members: data.members});
    });
    resolveChatNames(chats).then(function(resolved){
      state.chats = resolved;
      renderChatList(el("chat-search").value);
    });
  });
}

function resolveChatNames(chats){
  var promises = chats.map(function(c){
    if (c.isGroup){ return Promise.resolve(c); }
    var otherUid = c.members.filter(function(m){ return m !== state.me.uid; })[0];
    if (!otherUid){ return Promise.resolve(c); }
    return getDoc(doc(db,"profiles",otherUid)).then(function(snap){
      if (snap.exists()){
        var data = snap.data();
        c.name = data.displayName;
        c.color = data.color;
      }
      return c;
    });
  });
  return Promise.all(promises);
}

function renderChatList(filter){
  var list = el("chat-list");
  list.innerHTML = "";
  var chats = state.chats;
  if (filter){
    chats = chats.filter(function(c){ return c.name && c.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1; });
  }
  if (chats.length === 0){
    list.innerHTML = "<div class=\"empty-list\">チャットがありません。右上の+から作成してください。</div>";
    return;
  }
  chats.forEach(function(c){
    var item = document.createElement("div");
    item.className = "chat-item" + (c.id === state.currentChatId ? " active" : "");
    var color = c.color || colorFromName(c.name || c.id);
    var initial = (c.name || "?").slice(0,1);
    item.innerHTML =
      "<div class=\"avatar\" style=\"background:" + color + "\">" + escapeHtml(initial) + "</div>" +
      "<div class=\"chat-item-body\">" +
        "<div class=\"chat-item-top\">" +
          "<div class=\"chat-item-name\">" + escapeHtml(c.name || "無名チャット") + "</div>" +
        "</div>" +
        "<div class=\"chat-item-preview\">" + (c.isGroup ? "グループ" : "") + "</div>" +
      "</div>";
    item.onclick = function(){ openChat(c.id); };
    list.appendChild(item);
  });
}

el("chat-search").oninput = function(e){ renderChatList(e.target.value); };

function cleanupChatListeners(){
  if (state.unsubMessages){ state.unsubMessages(); state.unsubMessages = null; }
  if (state.unsubTyping){ state.unsubTyping(); state.unsubTyping = null; }
  if (state.unsubChat){ state.unsubChat(); state.unsubChat = null; }
}

function openChat(chatId){
  cleanupChatListeners();
  state.currentChatId = chatId;
  state.lastRenderedDate = null;
  if (window.innerWidth <= 820){
    el("main-screen").classList.add("show-chat");
  }
  renderChatList(el("chat-search").value);
  buildChatPanel(chatId);
  listenMessages(chatId);
  listenTyping(chatId);
  listenChatDoc(chatId);
}

function buildChatPanel(chatId){
  var chat = state.chats.filter(function(c){ return c.id === chatId; })[0];
  var panel = el("chat-panel");
  panel.classList.remove("empty-state");
  panel.innerHTML =
    "<div class=\"chat-header\">" +
      "<button class=\"back-btn\" id=\"back-btn\">←</button>" +
      "<div>" +
        "<div class=\"chat-header-name\">" + escapeHtml(chat ? chat.name || "無名チャット" : "") + "</div>" +
        "<div class=\"chat-header-sub\" id=\"chat-header-sub\"></div>" +
      "</div>" +
    "</div>" +
    "<div class=\"messages\" id=\"messages\"></div>" +
    "<div class=\"typing-indicator\" id=\"typing-indicator\"></div>" +
    "<div class=\"composer\">" +
      "<button id=\"attach-btn\" title=\"ファイル送信\">F</button>" +
      "<textarea id=\"msg-input\" rows=\"1\" placeholder=\"メッセージを入力\"></textarea>" +
      "<button class=\"send-btn\" id=\"send-btn\" title=\"送信\">S</button>" +
    "</div>";

  el("back-btn").onclick = function(){
    el("main-screen").classList.remove("show-chat");
  };
  el("attach-btn").onclick = function(){ el("file-input").click(); };
  el("send-btn").onclick = sendCurrentMessage;
  el("msg-input").addEventListener("keydown", function(e){
    if (e.key === "Enter" && !e.shiftKey){
      e.preventDefault();
      sendCurrentMessage();
    }
  });
  el("msg-input").addEventListener("input", function(){
    notifyTyping(chatId);
  });
}

function notifyTyping(chatId){
  setDoc(doc(db,"chats",chatId,"typing",state.me.uid), {
    displayName: state.me.displayName,
    updatedAt: serverTimestamp()
  });
}

function sendCurrentMessage(){
  var input = el("msg-input");
  var text = input.value.trim();
  if (!text || !state.currentChatId) return;
  addDoc(collection(db,"chats",state.currentChatId,"messages"), {
    from: state.me.uid,
    fromName: state.me.displayName,
    text: text,
    fileUrl: null,
    fileName: null,
    fileType: null,
    createdAt: serverTimestamp()
  });
  input.value = "";
}

el("file-input").onchange = function(){
  var file = el("file-input").files[0];
  if (!file || !state.currentChatId) return;
  var path = state.me.uid + "/" + Date.now() + "_" + file.name.replace(/[^a-zA-Z0-9._-]/g,"_");
  supabase.storage.from(SUPABASE_BUCKET).upload(path, file, {
    cacheControl: "3600",
    upsert: false
  }).then(function(result){
    if (result.error) throw result.error;
    var pub = supabase.storage.from(SUPABASE_BUCKET).getPublicUrl(path);
    var url = pub.data.publicUrl;
    return addDoc(collection(db,"chats",state.currentChatId,"messages"), {
      from: state.me.uid,
      fromName: state.me.displayName,
      text: "",
      fileUrl: url,
      fileName: file.name,
      fileType: file.type,
      createdAt: serverTimestamp()
    });
  }).catch(function(){
    alert("ファイルの送信に失敗しました");
  });
  el("file-input").value = "";
};

function listenMessages(chatId){
  var q = query(collection(db,"chats",chatId,"messages"), orderBy("createdAt"), limit(200));
  state.unsubMessages = onSnapshot(q, function(snapshot){
    var container = el("messages");
    if (!container) return;
    container.innerHTML = "";
    state.lastRenderedDate = null;
    snapshot.forEach(function(docSnap){
      var m = docSnap.data();
      appendMessage({
        id: docSnap.id,
        from: m.from,
        fromName: m.fromName,
        text: m.text,
        fileUrl: m.fileUrl,
        fileName: m.fileName,
        fileType: m.fileType,
        createdAt: toMillis(m.createdAt)
      });
    });
    container.scrollTop = container.scrollHeight;
    markRead(chatId);
  });
}

function listenTyping(chatId){
  state.unsubTyping = onSnapshot(collection(db,"chats",chatId,"typing"), function(snapshot){
    var indicator = el("typing-indicator");
    if (!indicator) return;
    var names = [];
    var now = Date.now();
    snapshot.forEach(function(docSnap){
      if (docSnap.id === state.me.uid) return;
      var data = docSnap.data();
      var updated = toMillis(data.updatedAt);
      if (now - updated < 4000){ names.push(data.displayName); }
    });
    indicator.textContent = names.length ? names.join("、") + " が入力中..." : "";
  });
}

function listenChatDoc(chatId){
  state.unsubChat = onSnapshot(doc(db,"chats",chatId), function(snap){
    if (!snap.exists()) return;
    var data = snap.data();
    var readBy = data.readBy || {};
    var container = el("messages");
    if (!container) return;
    Object.keys(readBy).forEach(function(uid){
      if (uid === state.me.uid) return;
      var upToMs = toMillis(readBy[uid]);
      var rows = container.querySelectorAll(".msg-row.mine");
      rows.forEach(function(row){
        var rowTime = Number(row.getAttribute("data-time") || 0);
        if (rowTime && rowTime <= upToMs){
          var mark = row.querySelector(".read-mark");
          if (mark) mark.textContent = "既読";
        }
      });
    });
  });
}

function markRead(chatId){
  var patch = {};
  patch["readBy." + state.me.uid] = serverTimestamp();
  updateDoc(doc(db,"chats",chatId), patch).catch(function(){});
}

function appendMessage(m){
  var container = el("messages");
  if (!container) return;
  if (state.lastRenderedDate === null || !sameDay(state.lastRenderedDate, m.createdAt)){
    var sep = document.createElement("div");
    sep.className = "date-sep";
    sep.innerHTML = "<span>" + fmtDate(m.createdAt) + "</span>";
    container.appendChild(sep);
    state.lastRenderedDate = m.createdAt;
  }
  var mine = m.from === state.me.uid;
  var row = document.createElement("div");
  row.className = "msg-row" + (mine ? " mine" : "");
  row.setAttribute("data-time", String(m.createdAt));

  var avatarHtml = "";
  if (!mine){
    avatarHtml = "<div class=\"msg-avatar\" style=\"background:" + colorFromName(m.fromName || "?") + "\">" + escapeHtml((m.fromName||"?").slice(0,1)) + "</div>";
  }

  var bodyHtml = "";
  if (m.fileUrl){
    if (m.fileType && m.fileType.indexOf("image/") === 0){
      bodyHtml = "<a href=\"" + m.fileUrl + "\" target=\"_blank\"><img src=\"" + m.fileUrl + "\"></a>";
    } else {
      bodyHtml = "<a class=\"file-chip\" href=\"" + m.fileUrl + "\" target=\"_blank\">" + escapeHtml(m.fileName || "ファイル") + "</a>";
    }
  } else {
    bodyHtml = escapeHtml(m.text);
  }

  var readMarkHtml = mine ? "<span class=\"read-mark\"></span>" : "";

  row.innerHTML =
    avatarHtml +
    "<div class=\"msg-col\">" +
      (!mine ? "<div class=\"msg-sender\">" + escapeHtml(m.fromName || "") + "</div>" : "") +
      "<div class=\"bubble\">" + bodyHtml + "</div>" +
      "<div class=\"msg-meta\">" + fmtTime(m.createdAt) + readMarkHtml + "</div>" +
    "</div>";
  container.appendChild(row);
}

el("new-chat-btn").onclick = function(){
  state.selectedUsers = {};
  el("user-search-input").value = "";
  el("user-search-results").innerHTML = "";
  el("group-name-input").style.display = "none";
  el("new-chat-modal").classList.add("active");
};
el("close-new-chat").onclick = function(){
  el("new-chat-modal").classList.remove("active");
};

var userSearchTimer = null;
el("user-search-input").oninput = function(){
  var q = el("user-search-input").value.trim().toLowerCase();
  if (userSearchTimer) clearTimeout(userSearchTimer);
  userSearchTimer = setTimeout(function(){
    getDocs(collection(db,"profiles")).then(function(snapshot){
      var results = [];
      snapshot.forEach(function(docSnap){
        var data = docSnap.data();
        if (docSnap.id === state.me.uid) return;
        var uname = data.username || "";
        var dname = (data.displayName || "").toLowerCase();
        if (q && uname.indexOf(q) === -1 && dname.indexOf(q) === -1) return;
        results.push({uid: docSnap.id, username: data.username, displayName: data.displayName, color: data.color});
      });
      renderUserSearchResults(results.slice(0,20));
    });
  }, 250);
};

function renderUserSearchResults(users){
  var container = el("user-search-results");
  container.innerHTML = "";
  users.forEach(function(u){
    var row = document.createElement("div");
    row.className = "user-pick";
    var checked = state.selectedUsers[u.uid] ? "checked" : "";
    row.innerHTML =
      "<div class=\"avatar\" style=\"width:34px;height:34px;font-size:13px;background:" + u.color + "\">" + escapeHtml((u.displayName||"?").slice(0,1)) + "</div>" +
      "<div>" + escapeHtml(u.displayName || "?") + "</div>" +
      "<input type=\"checkbox\" " + checked + " data-uid=\"" + u.uid + "\">";
    row.querySelector("input").onchange = function(e){
      if (e.target.checked){ state.selectedUsers[u.uid] = true; }
      else { delete state.selectedUsers[u.uid]; }
      var count = Object.keys(state.selectedUsers).length;
      el("group-name-input").style.display = count > 1 ? "block" : "none";
    };
    container.appendChild(row);
  });
}

function dmChatId(a,b){
  var pair = [a,b].sort();
  return "dm_" + pair[0] + "_" + pair[1];
}

el("create-chat-confirm").onclick = function(){
  var uids = Object.keys(state.selectedUsers);
  if (uids.length === 0) return;
  var members = Array.from(new Set([state.me.uid].concat(uids)));
  var isGroup = members.length > 2;
  var chatId = isGroup
    ? ("grp_" + Date.now().toString(36) + Math.random().toString(36).slice(2,8))
    : dmChatId(members[0], members[1]);
  var name = isGroup ? (el("group-name-input").value.trim() || "グループ") : null;
  getDoc(doc(db,"chats",chatId)).then(function(snap){
    if (snap.exists()){
      el("new-chat-modal").classList.remove("active");
      openChat(chatId);
      return;
    }
    return setDoc(doc(db,"chats",chatId), {
      members: members,
      isGroup: isGroup,
      name: name,
      readBy: {},
      createdAt: serverTimestamp()
    }).then(function(){
      el("new-chat-modal").classList.remove("active");
      openChat(chatId);
    });
  });
};

el("new-chat-modal").onclick = function(e){
  if (e.target === el("new-chat-modal")){ el("new-chat-modal").classList.remove("active"); }
};
</script>
</body>
</html>