import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
import { getFirestore, doc, onSnapshot } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js";

// Firebaseの設定（既存の設定をそのまま維持）
const firebaseConfig = {
  apiKey: "AIzaSyDBQzSTQUPh9p7EebhKiIkJNYcqULGoAO0",
  authDomain: "densha-dokokana.firebaseapp.com",
  projectId: "densha-dokokana",
  storageBucket: "densha-dokokana.firebasestorage.app",
  messagingSenderId: "279868183096",
  appId: "1:279868183096:web:69ecb06d28aa1af1204ccd"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

console.log("📡 Firebase (レインボー列車専用リアルタイム受信モード) 接続開始...");

// 🚉 吉祥寺(0%) から 渋谷(100%) までの垂直マップ上の比率マッピング
const STATION_PERCENTAGES = {
  "吉祥寺": 0,
  "三鷹台": 6.66,
  "久我山": 13.33,
  "富士見ヶ丘": 20.0,
  "高井戸": 26.66,
  "浜田山": 33.33,
  "西永福": 40.0,
  "永福町": 46.66,
  "明大前": 53.33,
  "東松原": 60.0,
  "新代田": 66.66,
  "下北沢": 73.33,
  "池ノ上": 80.0,
  "駒場東大前": 86.66,
  "神泉": 93.33,
  "渋谷": 100.0
};

// 🚂 列車アイコンを描画・更新する関数
function updateTrainUI(data, container) {
  const trainId = "rainbow_train";
  let trainEl = document.getElementById(`train-${trainId}`);
  
  // アイコンがまだ画面になければ新規作成
  if (!trainEl) {
    trainEl = document.createElement("div");
    trainEl.id = `train-${trainId}`;
    trainEl.className = "train-icon";
    trainEl.innerHTML = `
      <span class="train-badge" id="badge-${trainId}">各停</span>
      <div class="train-face color-rainbow" id="face-${trainId}"></div>
    `;
    
    // クリックイベント（お遊び要素）
    trainEl.addEventListener("click", () => {
      alert(`【3D俯瞰カメラモード起動シミュレーション】\nレインボー列車を斜め上から追従する3D空間へジャンプします。\n(数回に一度、動画広告が流れます)`);
    });

    container.appendChild(trainEl);
  }

  // 1. 運行時間外（車庫でお昼寝中）の場合の処理
  if (!data.in_service) {
    // 富士見ヶ丘車庫の位置にアイコンをピタッと格納する
    trainEl.style.top = `${STATION_PERCENTAGES["富士見ヶ丘"]}%`;
    const badgeEl = document.getElementById(`badge-${trainId}`);
    if (badgeEl) {
      badgeEl.textContent = "回送";
      badgeEl.className = "train-badge badge-local";
    }
    return;
  }

  // 2. 運行中の場合のマップ位置比率計算
  let topPercent = 0;
  const currentStation = data.current_station;
  const nextStation = data.next_station;
  
  // 新シミュレーターから送られてくる 0.0〜100.0 の進捗率を 0.0〜1.0 の比率に変換
  const ratio = (data.progress || 0) / 100;

  if (currentStation && nextStation) {
    const startPct = STATION_PERCENTAGES[currentStation];
    const endPct = STATION_PERCENTAGES[nextStation];
    // 上り・下りに関係なく、現在の駅間の中での絶対位置（％）をシームレスにブレンド
    topPercent = startPct + (endPct - startPct) * ratio;
  } else if (currentStation) {
    topPercent = STATION_PERCENTAGES[currentStation];
  }

  // 垂直レール上へ滑らかにスライド移動（CSSのtransitionでアニメーションします）
  trainEl.style.top = `${topPercent}%`;

  // 3. 種別バッジ（急行 / 各停）のリアルタイム書き換え
  const badgeEl = document.getElementById(`badge-${trainId}`);
  if (badgeEl) {
    const isExpress = data.train_type === "express";
    badgeEl.textContent = isExpress ? "急行" : "各停";
    badgeEl.className = `train-badge ${isExpress ? "badge-express" : "badge-local"}`;
  }
}

// ==============================================================================
// 🌟 コア変更：不特定多数のループをやめ、新設ドキュメントをピンポイントで超高速リッスン
// ==============================================================================
const docRef = doc(db, "rainbow_train_location", "current");

onSnapshot(docRef, (docSnap) => {
  const container = document.getElementById("trains-layer");
  const textStatusEl = document.getElementById("rainbow-text-status");
  if (!container) return;

  // すべての駅の赤ポチ（アクティブ発光）を一旦リセット
  document.querySelectorAll(".station-node").forEach(node => node.classList.remove("active"));

  if (!docSnap.exists()) {
    if (textStatusEl) textStatusEl.textContent = "💤 現在は運行していません（車庫でお昼寝中）";
    return;
  }

  const data = docSnap.data();

  // 画面上部の「テキスト最速確認エリア」の文字を実況風に更新
  if (textStatusEl) {
    if (data.in_service) {
      const typeStr = data.train_type === "express" ? "急行" : "各停";
      textStatusEl.innerHTML = `🌈 <strong>レインボー実況：</strong>本日【${data.unyo_number}運用】(${data.trip_id}) ${typeStr}として <strong>${data.current_station} ➔ ${data.next_station}</strong> を走行中 (${Math.round(data.progress)}%)`;
    } else {
      textStatusEl.innerHTML = `💤 <strong>レインボー実況：</strong>本日の運行スケジュールはすべて終了、または出庫前です（富士見ヶ丘車庫に留置中）`;
    }
  }

  // マップ上の列車アイコンの位置を更新
  updateTrainUI(data, container);

  // いま走っている、または停車している駅の「●ポチ」と「駅名」を赤く発光させる
  if (data.in_service) {
    if (data.current_station) {
      document.getElementById(`node-${data.current_station}`)?.classList.add("active");
    }
    if (data.next_station) {
      document.getElementById(`node-${data.next_station}`)?.classList.add("active");
    }
  } else {
    // 車庫にいるときは富士見ヶ丘駅を発光させる
    document.getElementById("node-富士見ヶ丘")?.classList.add("active");
  }

}, (error) => {
  console.error("Firestoreリアルタイム同期エラー:", error);
});

export { db };