MECHA BUlLDER レギュレーション1.0版

　

　import React, { useState, useEffect, useMemo } from 'react';
// 🚨 修正: URL参照ではなく、モジュール名によるインポートに変更
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, doc, setDoc, addDoc, deleteDoc, onSnapshot, collection, query, where, getDocs } from 'firebase/firestore';
import { Settings, Sword, User, Loader2, Save, Trash2, Zap, Heart, Shield, MessageSquare, Mic, FastForward } from 'lucide-react';

// --- FirebaseとTailwind CSSを使ったロボットアセンブリ＆バトルアリーナ ---

// --- 1. ゲーム設定とパーツデータ ---
const ROBOT_PARTS = {
  head: [
    { name: 'センサーヘッド', stats: { hp: 10, atk: 5, spd: 8 }, icon: '👁️', color: 'bg-yellow-500' },
    { name: '重装バイザー', stats: { hp: 20, atk: 2, spd: 3 }, icon: '🛡️', color: 'bg-gray-400' }, 
    { name: 'キャノンヘルメット', stats: { hp: 5, atk: 18, spd: 5 }, icon: '💣', color: 'bg-red-600' }, 
  ],
  body: [
    { name: 'コアフレーム', stats: { hp: 30, def: 5, spd: 10 }, icon: '⚙️', color: 'bg-blue-500' },
    { name: 'ヘビーシャーシ', stats: { hp: 40, def: 8, spd: 2 }, icon: '🏋️', color: 'bg-slate-700' }, 
    { name: 'スピードシェル', stats: { hp: 10, def: 2, spd: 15 }, icon: '💨', color: 'bg-green-500' }, 
  ],
  arms: [
    { name: 'ブラスターアーム', stats: { atk: 18, spd: 5 }, icon: '💥', color: 'bg-red-500' },
    { name: 'シールドフィスト', stats: { atk: 5, spd: 8 }, icon: '⚔️', color: 'bg-gray-500' },
    { name: 'グリップクロー', stats: { atk: 10, spd: 12 }, icon: '🦾', color: 'bg-orange-500' }, 
  ],
  legs: [
    { name: 'トラックベース', stats: { def: 10, spd: 1 }, icon: '🛞', color: 'bg-yellow-700' }, 
    { name: 'ジェットブースター', stats: { def: 5, spd: 15 }, icon: '🚀', color: 'bg-cyan-500' }, 
    { name: '標準脚', stats: { def: 2, spd: 8 }, icon: '👟', color: 'bg-gray-300' },
  ]
};

const DEFAULT_BATTLE_MESSAGES = {
  onHit: "くっ、この程度！△まだまだやれる！△想定内だ。",
  onAttack: "いっくぞー！△狙い撃つ！△一撃で仕留める！",
  onWin: "勝利！これがオレたちの力だ！△悪く思うなよ！△戦いの続きはまた今度だ！",
  onLose: "ちくしょう...次は勝つ！△まさか負けるなんて...△データが足りなかったか。",
};

const MESSAGE_LABELS = {
    onHit: "被ダメージ時",
    onAttack: "攻撃時",
    onWin: "勝利時",
    onLose: "敗北時",
};

const MESSAGE_DELIMITER = '△';
const ACTION_THRESHOLD = 30; // 攻撃に必要なカウント

// 共通して使用するFirebase/Firestoreの変数
let dbInstance = null;
let authInstance = null;

// --- 2. 乱数ステータス計算ヘルパー ---
const calculateRandomStat = (baseStat) => {
    if (baseStat <= 0) return 0;
    // 半分を確定値
    const fixedPart = Math.floor(baseStat / 2); 
    // 残りの半分を乱数で決定 (0からrandomMaxまでの乱数)
    const randomMax = baseStat - fixedPart; 
    const randomPart = Math.floor(Math.random() * (randomMax + 1));
    return fixedPart + randomPart;
};

// --- 3. データ正規化ヘルパー (強化): 全てのネストされた構造を保証し、レンダリングエラーを防ぐ ---
const normalizeRobotData = (data) => {
    // 1. Stats safety (totalStatsが存在し、hp/atk/def/spdが0以上であることを保証)
    const safeStats = data.totalStats || {};
    const normalizedStats = {
        hp: safeStats.hp || 0,
        atk: safeStats.atk || 0,
        def: safeStats.def || 0,
        spd: safeStats.spd || 0, 
    };

    // 2. Messages safety (battleMessagesが存在することを保証)
    const safeMessages = data.battleMessages || DEFAULT_BATTLE_MESSAGES;
    
    // 3. Parts safety (partsオブジェクトとその子供が全てオブジェクトであることを保証)
    const rawParts = data.parts || {};
    const normalizedParts = {
        // head, body, arms, legs が null/undefined の場合、空のオブジェクト {} を割り当てる
        head: rawParts.head || {},
        body: rawParts.body || {},
        arms: rawParts.arms || {},
        legs: rawParts.legs || {},
    };

    return {
        ...data,
        totalStats: normalizedStats,
        battleMessages: safeMessages,
        parts: normalizedParts,
        pilotName: data.pilotName || '名無しのパイロット',
    };
};


const App = () => {
  // --- 状態管理 ---
  const [mode, setMode] = useState('BUILD'); 
  const [userId, setUserId] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // ロボット構築用
  const [robotName, setRobotName] = useState('マイロボット-01');
  const [pilotName, setPilotName] = useState('ルーキー・エース');
  const [selectedParts, setSelectedParts] = useState({
    head: ROBOT_PARTS.head[0],
    body: ROBOT_PARTS.body[0],
    arms: ROBOT_PARTS.arms[0],
    legs: ROBOT_PARTS.legs[0],
  });
  const [customMessages, setCustomMessages] = useState(DEFAULT_BATTLE_MESSAGES);
  
  // 対戦用データ
  const [myRobots, setMyRobots] = useState([]);
  const [opponentRobots, setOpponentRobots] = useState([]); 
  const [selectedMyRobot, setSelectedMyRobot] = useState(null);
  const [selectedOpponent, setSelectedOpponent] = useState(null);

  // バトルシミュレーション結果
  const [battleLog, setBattleLog] = useState([]);
  const [battleResult, setBattleResult] = useState(null); 
  const [battleResultId, setBattleResultId] = useState(null); 
  const [isSimulating, setIsSimulating] = useState(false);
  const [isAuthReady, setIsAuthReady] = useState(false); // 認証準備完了フラグ

  const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-robot-app';
  const collectionPath = `artifacts/${appId}/public/data/robots`;

  // --- 4. Firebase初期化と認証 ---
  useEffect(() => {
    let app;
    let authUnsubscribe;

    try {
      // 🚨 防御的強化: Firebase Configの安全なパース
      let firebaseConfig = {};
      const configString = typeof __firebase_config !== 'undefined' ? __firebase_config : null;
      if (configString) {
          try {
              firebaseConfig = JSON.parse(configString);
          } catch (e) {
              console.error("Firebase Config JSON Parse Error:", e);
              setError("Firebase設定ファイルの解析に失敗しました。");
              setLoading(false);
              return; 
          }
      }

      // Firebase初期化
      app = initializeApp(firebaseConfig);
      dbInstance = getFirestore(app);
      authInstance = getAuth(app);

      authUnsubscribe = onAuthStateChanged(authInstance, async (user) => {
        if (user) {
          setUserId(user.uid);
        } else {
          try {
            if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                await signInWithCustomToken(authInstance, __initial_auth_token);
            } else {
                await signInAnonymously(authInstance);
            }
          } catch (e) {
            // 認証に失敗してもアプリは動かすためにエラーはセットしない（匿名認証がブロックされた場合など）
            console.warn("Firebase Auth Failed (falling back to unauth state):", e);
          }
        }
        // 認証状態の確認が完了
        setIsAuthReady(true);
        setLoading(false);
      });
      
    } catch (e) {
      console.error("Firebase Initialization Error:", e);
      setError(`Firebaseの初期化に失敗しました。エラー: ${e.message}`);
      setLoading(false);
    }

    return () => {
        if (authUnsubscribe) authUnsubscribe();
    };
  }, []);

  // --- 5. ロボットデータのロード（Firestore） ---
  useEffect(() => {
    // 🚨 厳格なチェック: DBインスタンスと認証が完了するまで処理をスキップ
    if (!isAuthReady || !dbInstance || !userId) return; 

    const loadMyRobots = () => {
      try {
        const q = query(collection(dbInstance, collectionPath), where("userId", "==", userId));
        const unsubscribe = onSnapshot(q, (snapshot) => {
          // 強化された正規化処理を実行
          const bots = snapshot.docs.map(doc => normalizeRobotData({ id: doc.id, ...doc.data() }));
          setMyRobots(bots);
          
          // 現在選択中のロボットのデータ更新
          if (selectedMyRobot) {
              const updatedBot = bots.find(b => b.id === selectedMyRobot.id);
              if (updatedBot) setSelectedMyRobot(updatedBot);
          }
        }, (err) => {
            console.error("My Robot Snapshot Error:", err);
            setError(`Firestoreデータ取得エラー: ${err.message}`);
        });
        return unsubscribe; 
      } catch (e) {
        console.error("My Robot Load Error:", e);
        // このエラーは認証後でDBインスタンスがあるはずなので、より深刻なエラー
        setError(`自分のロボットの読み込みに失敗しました。エラー: ${e.message}`);
      }
    };
    
    return loadMyRobots();
  }, [isAuthReady, userId]); 

  
  const loadAllPublicRobots = async () => {
    if (!isAuthReady || !dbInstance) return; 
    setLoading(true);
    try {
      const q = query(collection(dbInstance, collectionPath));
      const snapshot = await getDocs(q);
      
      // 強化された正規化処理を実行
      const bots = snapshot.docs.map(doc => normalizeRobotData({ id: doc.id, ...doc.data() }));
      
      setOpponentRobots(bots); 
      setSelectedOpponent(null); 
      setLoading(false);
    } catch (e) {
      console.error("All Public Robot Load Error:", e);
      setError(`公開ロボットの読み込みに失敗しました。エラー: ${e.message}`);
      setLoading(false);
    }
  };


  // --- 6. ステータス計算 (SPDを追加) ---
  const calculateStats = useMemo(() => {
    const stats = { hp: 0, atk: 0, def: 0, spd: 0 };
    Object.values(selectedParts).forEach(part => {
      // 安全性のために part.stats が存在することをチェック
      const partStats = part.stats || {};
      stats.hp += partStats.hp || 0;
      stats.atk += partStats.atk || 0;
      stats.def += partStats.def || 0;
      stats.spd += partStats.spd || 0; 
    });
    return stats;
  }, [selectedParts]);

  // --- 7. ロボット保存（Firestoreへの書き込み） ---
  const handleSaveRobot = async () => {
    if (!dbInstance || !userId || !isAuthReady) {
      setError("Firebase接続またはユーザーIDが取得できていません。認証の完了を待ってください。");
      return;
    }
    if (!robotName.trim() || !pilotName.trim()) {
      setError("ロボット名とパイロット名を入力してください。");
      return;
    }
    setLoading(true);
    setError(null);

    // 保存時に最新のパーツデータ構造をFirestoreに送る
    const newRobot = {
      userId: userId,
      name: robotName,
      pilotName: pilotName,
      parts: {
        head: selectedParts.head,
        body: selectedParts.body,
        arms: selectedParts.arms,
        legs: selectedParts.legs,
      },
      totalStats: calculateStats, 
      battleMessages: customMessages, 
      createdAt: Date.now(),
    };

    try {
      const existingBot = myRobots.find(b => b.name === robotName);
      if (existingBot) {
        await setDoc(doc(dbInstance, collectionPath, existingBot.id), newRobot);
      } else {
        await addDoc(collection(dbInstance, collectionPath), newRobot);
      }
      setLoading(false);
    } catch (e) {
      console.error("Save Robot Error:", e);
      setError(`ロボットの保存に失敗しました。エラー: ${e.message}`);
      setLoading(false);
    }
  };
  
  // --- 8. ロボットの削除 ---
  const handleDeleteRobot = async (botId) => {
    if (!dbInstance || !isAuthReady) return;
    try {
      await deleteDoc(doc(dbInstance, collectionPath, botId));
      if (selectedMyRobot && selectedMyRobot.id === botId) {
          setSelectedMyRobot(null); 
      }
      if (selectedOpponent && selectedOpponent.id === botId) {
          setSelectedOpponent(null); 
      }
    } catch (e) {
      console.error("Delete Robot Error:", e);
      setError(`ロボットの削除に失敗しました。エラー: ${e.message}`);
    }
  };

  // --- 9. 機体の特徴を評価するヘルパー関数 (ナレーション用) ---
  const generateRobotDescription = (bot) => {
    const stats = bot.totalStats;
    const { hp, atk, def, spd } = stats;
    let features = [];
    let assessment = "";

    // 評価ロジック (暫定的な基準値: HP=50, ATK=20, DEF=15, SPD=30)
    const isHighHP = hp >= 50;
    const isHighATK = atk >= 20;
    const isHighDEF = def >= 15;
    const isHighSPD = spd >= 35;
    const isLowSPD = spd <= 20;
    
    if (isHighSPD && isHighATK) {
        assessment = "電光石火のヒット＆アウェイ型";
    } else if (isHighHP && isHighDEF && isLowSPD) {
        assessment = "難攻不落の要塞型（機動力難あり）";
    } else if (isHighATK) {
        assessment = "攻撃力に特化した高火力アタッカー";
    } else if (isHighSPD) {
        assessment = "スピード重視の高速戦闘機";
    } else if (isHighDEF) {
        assessment = "防御力に特化した重装甲型";
    } else {
        assessment = "標準的な性能を持つバランス型";
    }

    features.push(`【特徴評価】${assessment}`);

    const partDetails = [];
    // partsのネストされた構造が保証されているため、安全にアクセス可能
    if (bot.parts?.body?.name === 'スピードシェル' || bot.parts?.legs?.name === 'ジェットブースター') partDetails.push("高速移動を可能にするブースター装備");
    if (bot.parts?.head?.name === '重装バイザー' && bot.parts?.legs?.name === 'トラックベース') partDetails.push("徹底的な防御と引き換えに機動力を犠牲");
    
    if (partDetails.length > 0) {
        features.push(`【パーツ】${partDetails.join('、')}`);
    }
    
    return features.join(" / ");
  };


  // --- 10. バトルシミュレーションロジック (乱数ダメージとタイムスライシングを導入) ---
  const simulateBattle = (botA, botB) => {
    const log = [];
    
    // totalStatsは正規化で存在が保証されているため安全にアクセス可能
    const getStat = (bot, stat) => bot.totalStats?.[stat] || 0;
    
    const getMessage = (bot, type) => {
        const messageString = bot.battleMessages[type] || DEFAULT_BATTLE_MESSAGES[type];
        const messages = messageString.split(MESSAGE_DELIMITER)
                            .map(m => m.trim())
                            .filter(m => m.length > 0);
        
        if (messages.length === 0) {
            return DEFAULT_BATTLE_MESSAGES[type].split(MESSAGE_DELIMITER)[0].trim() || "（メッセージなし）";
        }
        
        const randomIndex = Math.floor(Math.random() * messages.length);
        return messages[randomIndex];
    };
    
    const getPilotName = (bot) => bot.pilotName || '名無しのパイロット';
    
    let hpA = getStat(botA, 'hp') || 10;
    let hpB = getStat(botB, 'hp') || 10;
    
    const spdA = getStat(botA, 'spd');
    const spdB = getStat(botB, 'spd');
    
    let step = 1;
    const MAX_STEPS = 50; 
    let countA = 0; 
    let countB = 0; 


    const performAttack = (attacker, defender, hpDefender, isA, currentStep) => {
        const atkerName = attacker.name;
        const defrName = defender.name;
        const atkerPilot = getPilotName(attacker);
        const defrPilot = getPilotName(defender);
        
        const calculatedAtk = calculateRandomStat(getStat(attacker, 'atk'));
        const calculatedDef = calculateRandomStat(getStat(defender, 'def'));
        
        const rawDamage = calculatedAtk - Math.floor(calculatedDef / 2);
        const damage = Math.max(1, rawDamage); 
        
        log.push({ type: 'message', name: atkerPilot, text: getMessage(attacker, 'onAttack'), isA: isA });
        
        const prevHp = hpDefender;
        const newHp = Math.max(0, hpDefender - damage);
        
        log.push({ 
            step: currentStep, 
            attacker: atkerName, 
            defender: defrName, 
            damage: damage, 
            atk: calculatedAtk,
            def: calculatedDef,
            hpA: isA ? hpA : newHp, 
            hpB: isA ? newHp : hpB, 
            isA: isA 
        });
        
        if (damage > 0 && newHp < prevHp) {
            log.push({ type: 'message', name: defrPilot, text: getMessage(defender, 'onHit'), isA: !isA });
        }
        
        return newHp;
    };
    
    // --- ナレーション (戦闘前) ---
    log.push({ message: `--- バトルアナウンス ---` });
    log.push({ 
        type: 'narration', 
        text: `青コーナー！機体名 <span class="font-extrabold text-indigo-300">${botA.name}</span>、パイロットは <span class="font-extrabold text-indigo-300">${getPilotName(botA)}</span>！`
    });
    log.push({ 
        type: 'narration', 
        text: `機体特徴: ${generateRobotDescription(botA)} (HP:${getStat(botA, 'hp')} / ATK:${getStat(botA, 'atk')} / DEF:${getStat(botA, 'def')} / <span class="text-green-400">SPD:${spdA}</span>)`
    });
    
    log.push({ 
        type: 'narration', 
        text: `赤コーナー！機体名 <span class="font-extrabold text-red-300">${botB.name}</span>、パイロットは <span class="font-extrabold text-red-300">${getPilotName(botB)}</span>！`
    });
    log.push({ 
        type: 'narration', 
        text: `機体特徴: ${generateRobotDescription(botB)} (HP:${getStat(botB, 'hp')} / ATK:${getStat(botB, 'atk')} / DEF:${getStat(botB, 'def')} / <span class="text-green-400">SPD:${spdB}</span>)`
    });

    log.push({ message: `--- 戦闘開始！ (30カウントでアクション) ---` });

    // --- メインバトルループ ---
    while (hpA > 0 && hpB > 0 && step <= MAX_STEPS) {
        
        countA += spdA;
        countB += spdB;

        let attacksInStep = 0;
        
        while ((countA >= ACTION_THRESHOLD || countB >= ACTION_THRESHOLD) && attacksInStep < 5) {
            attacksInStep++;
            
            const canA = countA >= ACTION_THRESHOLD;
            const canB = countB >= ACTION_THRESHOLD;
            
            let attacker = null;
            let isAAttacking = false;

            if (!canA && !canB) break; 
            
            // 優先順位決定ロジック
            if (canA && canB) {
                if (countA > countB) {
                    attacker = botA; isAAttacking = true;
                } else if (countB > countA) {
                    attacker = botB; isAAttacking = false;
                } else {
                    if (spdA > spdB) {
                        attacker = botA; isAAttacking = true;
                    } else if (spdB > spdA) {
                        attacker = botB; isAAttacking = false;
                    } else {
                        attacker = Math.random() < 0.5 ? botA : botB;
                        isAAttacking = attacker === botA;
                    }
                }
            } else if (canA) {
                attacker = botA; isAAttacking = true;
            } else if (canB) {
                attacker = botB; isAAttacking = false;
            }

            // 攻撃の実行とカウントのリセット
            if (isAAttacking) {
                log.push({ type: 'narration', text: `[ステップ ${step} - ${attacksInStep}] <span class="text-indigo-300">${attacker.name}</span> がアクション！ (カウント:${Math.floor(countA)})` });
                hpB = performAttack(botA, botB, hpB, true, step);
                countA -= ACTION_THRESHOLD;
            } else {
                log.push({ type: 'narration', text: `[ステップ ${step} - ${attacksInStep}] <span class="text-red-300">${attacker.name}</span> がアクション！ (カウント:${Math.floor(countB)})` });
                hpA = performAttack(botB, botA, hpA, false, step);
                countB -= ACTION_THRESHOLD;
            }
            
            if (hpA <= 0 || hpB <= 0) {
                 log.push({ 
                    type: 'narration', 
                    text: `一撃必殺！ 勝負あり！`
                });
                break;
            } 
        }

        if (hpA <= 0 || hpB <= 0) break;
        step++;
    }
    
    // 勝利判定
    let winnerName = '引き分け';
    let winnerId = null;

    if (hpA > 0 && hpB <= 0) {
        winnerName = botA.name;
        winnerId = botA.id;
        log.push({ type: 'message', name: getPilotName(botA), text: getMessage(botA, 'onWin'), isA: true });
        log.push({ type: 'message', name: getPilotName(botB), text: getMessage(botB, 'onLose'), isA: false });
    } else if (hpB > 0 && hpA <= 0) {
        winnerName = botB.name;
        winnerId = botB.id;
        log.push({ type: 'message', name: getPilotName(botB), text: getMessage(botB, 'onWin'), isA: false });
        log.push({ type: 'message', name: getPilotName(botA), text: getMessage(botA, 'onLose'), isA: true });
    } else if (step > MAX_STEPS) {
        log.push({ message: `--- 時間切れ (${MAX_STEPS}ステップ到達) ---` });
        if (hpA > hpB) {
            winnerName = botA.name;
            winnerId = botA.id;
            log.push({ type: 'message', name: getPilotName(botA), text: getMessage(botA, 'onWin'), isA: true });
        } else if (hpB > hpA) {
            winnerName = botB.name;
            winnerId = botB.id;
            log.push({ type: 'message', name: getPilotName(botB), text: getMessage(botB, 'onWin'), isA: false });
        } else {
            winnerName = '時間切れ/引き分け (HP同値)';
            winnerId = null; 
        }
    }

    log.push({ message: `--- 決着！ 勝者: ${winnerName} (残HP A:${hpA}, B:${hpB}) ---` });
    return { log, winnerName, winnerId }; 
  };

  const startBattle = () => {
    if (!selectedMyRobot || !selectedOpponent) return; 

    setIsSimulating(true);
    setBattleLog([]);
    setBattleResult(null);
    setBattleResultId(null); 

    const result = simulateBattle(selectedMyRobot, selectedOpponent);
    
    let logIndex = 0;
    const interval = setInterval(() => {
      if (logIndex < result.log.length) {
        setBattleLog(prev => [...prev, result.log[logIndex]]);
        logIndex++;
      } else {
        clearInterval(interval);
        setBattleResult(result.winnerName); 
        setBattleResultId(result.winnerId);
        setIsSimulating(false);
      }
    }, 100); 
  };

  // --- 共通UIコンポーネント (App内に定義し直しました) ---
  const StatDisplay = ({ Icon, label, value, color }) => (
    <div className="text-center">
      <Icon size={24} className={`mx-auto ${color}`} />
      <p className="text-xs text-slate-400">{label}</p>
      <p className="text-lg font-extrabold text-white">{value}</p>
    </div>
  );

  // --- UI部品: ロボット表示コンポーネント (変更なし) ---
  const RobotCard = ({ robot, isSelected = false, onClick, type = 'my' }) => {
    // totalStatsは正規化により存在が保証されている
    const stats = robot.totalStats; 
    const pilotNameDisplay = robot.pilotName || '名無しのパイロット';
    
    const StatIcon = ({ Icon, value, color }) => (
      <span className={`flex items-center text-xs ${color} font-bold`}>
        <Icon size={12} className="mr-1"/> {value}
      </span>
    );
    
    const RobotVisual = () => (
      <div className="flex flex-col items-center justify-center p-2">
        {/* robot.parts.head は正規化により {} のいずれかが保証されている */}
        <div className={`text-xl ${robot.parts?.head?.color || 'text-white'}`}>{robot.parts?.head?.icon || '❓'}</div>
        <div className={`text-3xl ${robot.parts?.arms?.color || 'text-white'} flex items-center`}>
          {robot.parts?.arms?.icon || '❓'}
          <span className={`text-xl mx-2 ${robot.parts?.body?.color || 'text-white'}`}>{robot.parts?.body?.icon || '❓'}</span>
          {robot.parts?.arms?.icon || '❓'}
        </div>
        <div className={`text-xl ${robot.parts?.legs?.color || 'text-white'}`}>{robot.parts?.legs?.icon || '❓'}</div>
      </div>
    );

    return (
      <div 
        className={`p-4 rounded-xl shadow-lg transition duration-200 cursor-pointer 
        ${isSelected ? 'bg-indigo-700 ring-4 ring-indigo-400 scale-[1.02]' : 'bg-slate-700 hover:bg-slate-600'}
        ${onClick ? 'hover:scale-[1.02]' : ''}`}
        onClick={onClick}
      >
        <h3 className="text-lg font-extrabold mb-1 truncate" title={robot.name}>{robot.name}</h3>
        <p className="text-sm font-semibold text-yellow-300 mb-2 truncate">
            <User size={12} className="inline mr-1"/> {pilotNameDisplay}
        </p>
        <p className={`text-xs mb-2 ${robot.userId === userId ? 'text-indigo-300' : 'text-red-300'}`}>
            {robot.userId === userId ? '作成者: あなた' : `作成者: ${robot.userId?.slice(0, 8)}...`}
        </p>
        <RobotVisual />
        <div className="flex justify-between items-center mt-3 border-t border-slate-600 pt-2">
          <StatIcon Icon={Heart} value={stats.hp} color="text-red-400"/>
          <StatIcon Icon={Zap} value={stats.atk} color="text-yellow-400"/>
          <StatIcon Icon={Shield} value={stats.def} color="text-cyan-400"/>
          <StatIcon Icon={FastForward} value={stats.spd} color="text-green-400"/> 
        </div>
        {type === 'my' && robot.userId === userId && (
          <div className="mt-3 border-t border-slate-600 pt-3 text-right">
            <button 
                onClick={(e) => { e.stopPropagation(); handleDeleteRobot(robot.id); }}
                className="text-red-400 hover:text-red-300 transition text-sm flex items-center ml-auto"
            >
                <Trash2 size={14} className="mr-1" /> 削除
            </button>
          </div>
        )}
      </div>
    );
  };

  // --- UI: 各モードのレンダリング関数 (変更なし) ---

  const renderBuildMode = () => (
    <div className="p-4 md:p-8 space-y-8 max-w-xl mx-auto">
      <h2 className="text-3xl font-extrabold text-indigo-400 flex items-center gap-2">
        <Settings size={28} /> ロボット構築アリーナ
      </h2>
      <p className="text-slate-400">パーツを選び、ステータス（特に**SPD**）を確認して、ロボットとパイロットを登録しましょう。</p>

      {/* ロボット名 & パイロット名 */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="space-y-2">
            <label className="block text-slate-300 font-bold">機体名</label>
            <input
              type="text"
              value={robotName}
              onChange={(e) => setRobotName(e.target.value)}
              placeholder="ロボット名を入力"
              className="w-full p-3 bg-slate-700 border border-slate-600 rounded-lg text-white focus:ring-indigo-500 focus:border-indigo-500"
            />
        </div>
        {/* パイロット名入力 */}
        <div className="space-y-2">
            <label className="block text-slate-300 font-bold">パイロット名</label>
            <input
              type="text"
              value={pilotName}
              onChange={(e) => setPilotName(e.target.value)}
              placeholder="パイロット名を入力"
              className="w-full p-3 bg-slate-700 border border-slate-600 rounded-lg text-white focus:ring-yellow-500 focus:border-yellow-500"
            />
        </div>
      </div>

      {/* パーツ選択 */}
      <div className="grid grid-cols-2 gap-4">
        {Object.keys(ROBOT_PARTS).map(partKey => (
          <div key={partKey} className="space-y-1 p-3 bg-slate-800 rounded-lg">
            <label className="block text-indigo-300 font-semibold capitalize">{partKey} ({selectedParts[partKey].icon})</label>
            <select
              value={selectedParts[partKey].name}
              onChange={(e) => {
                const newPart = ROBOT_PARTS[partKey].find(p => p.name === e.target.value);
                setSelectedParts(prev => ({ ...prev, [partKey]: newPart }));
              }}
              className="w-full p-2 bg-slate-600 border border-slate-500 rounded-md text-white"
            >
              {ROBOT_PARTS[partKey].map(part => (
                <option key={part.name} value={part.name}>
                  {part.name} (HP:{part.stats.hp || 0}, ATK:{part.stats.atk || 0}, DEF:{part.stats.def || 0}, SPD:{part.stats.spd || 0})
                </option>
              ))}
            </select>
          </div>
        ))}
      </div>

      {/* カスタムメッセージ設定 */}
      <div className="bg-slate-700 p-4 rounded-xl shadow-inner space-y-3">
        <h3 className="text-xl font-bold text-white border-b border-yellow-500 pb-2 flex items-center gap-2">
            <MessageSquare size={20} className="text-yellow-400"/> パイロットセリフ設定
        </h3>
        <p className="text-sm text-yellow-300">💡 複数のセリフ候補を <span className="font-extrabold text-lg bg-slate-800 p-1 rounded-md">△</span> で区切って入力すると、戦闘時にランダムに選ばれます。</p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {Object.keys(DEFAULT_BATTLE_MESSAGES).map(key => (
                <div key={key} className="space-y-1">
                    <label className="block text-sm text-slate-400 font-medium">{MESSAGE_LABELS[key]}</label>
                    <input
                        type="text"
                        value={customMessages[key]}
                        onChange={(e) => setCustomMessages(prev => ({ ...prev, [key]: e.target.value }))}
                        placeholder={DEFAULT_BATTLE_MESSAGES[key]}
                        maxLength={100} 
                        className="w-full p-2 bg-slate-600 border border-slate-500 rounded-md text-white text-sm"
                    />
                </div>
            ))}
        </div>
      </div>


      {/* ステータスと保存ボタン */}
      <div className="bg-slate-700 p-4 rounded-xl shadow-inner space-y-3">
        <h3 className="text-xl font-bold text-white border-b border-indigo-500 pb-2">総合ステータス</h3>
        <div className="flex justify-between">
          <StatDisplay Icon={Heart} label="HP" value={calculateStats.hp} color="text-red-400"/>
          <StatDisplay Icon={Zap} label="ATK" value={calculateStats.atk} color="text-yellow-400"/>
          <StatDisplay Icon={Shield} label="DEF" value={calculateStats.def} color="text-cyan-400"/>
          <StatDisplay Icon={FastForward} label="SPD" value={calculateStats.spd} color="text-green-400"/> 
        </div>
        <button
          onClick={handleSaveRobot}
          disabled={loading || !userId}
          className="w-full p-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-bold flex items-center justify-center gap-2 transition disabled:bg-indigo-900/50 mt-4"
        >
          {loading ? <Loader2 size={20} className="animate-spin" /> : <Save size={20} />}
          ロボットを保存
        </button>
      </div>
      
      {/* 自分のロボットリスト */}
      <h3 className="text-2xl font-bold text-slate-300 mt-6 border-b border-slate-600 pb-2">あなたの登録ロボット ({myRobots.length})</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {myRobots.map(robot => (
          <RobotCard 
            key={robot.id} 
            robot={robot} 
            type="my"
            onClick={() => {
                setRobotName(robot.name);
                setPilotName(robot.pilotName || '名無しのパイロット'); 
                // 既存のデータを元に、ROBOT_PARTSから対応するパーツを見つける
                setSelectedParts({
                    // parts.headなどが空オブジェクトであっても、nameアクセスは安全になる
                    head: ROBOT_PARTS.head.find(p => p.name === (robot.parts?.head?.name || ROBOT_PARTS.head[0].name)) || ROBOT_PARTS.head[0],
                    body: ROBOT_PARTS.body.find(p => p.name === (robot.parts?.body?.name || ROBOT_PARTS.body[0].name)) || ROBOT_PARTS.body[0],
                    arms: ROBOT_PARTS.arms.find(p => p.name === (robot.parts?.arms?.name || ROBOT_PARTS.arms[0].name)) || ROBOT_PARTS.arms[0],
                    legs: ROBOT_PARTS.legs.find(p => p.name === (robot.parts?.legs?.name || ROBOT_PARTS.legs[0].name)) || ROBOT_PARTS.legs[0],
                });
                setCustomMessages(robot.battleMessages || DEFAULT_BATTLE_MESSAGES);
            }}
          />
        ))}
      </div>

    </div>
  );

  const renderOpponentSelectMode = () => {
    const availableOpponents = opponentRobots.filter(bot => 
        !selectedMyRobot || bot.id !== selectedMyRobot.id
    );

    return (
        <div className="p-4 md:p-8 space-y-6 max-w-3xl mx-auto">
            <h2 className="text-3xl font-extrabold text-red-400 flex items-center gap-2">
                <Sword size={28} /> 対戦相手選択
            </h2>
            <p className="text-slate-400">対戦相手をデータベースから選択し、あなたのロボットと勝負させましょう！</p>
            
            {/* 自分のロボット選択 */}
            <div className="border-2 border-indigo-500 rounded-xl p-4 bg-slate-800">
                <h3 className="text-xl font-bold text-indigo-300 mb-3">対戦に使用するあなたのロボット</h3>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                    {myRobots.length > 0 ? myRobots.map(robot => (
                        <RobotCard 
                            key={robot.id} 
                            robot={robot} 
                            type="my"
                            isSelected={selectedMyRobot && selectedMyRobot.id === robot.id}
                            onClick={() => {
                                setSelectedMyRobot(robot);
                                setSelectedOpponent(null);
                            }}
                        />
                    )) : (
                        <p className="col-span-3 text-slate-500">構築モードでロボットを作成・保存してください。</p>
                    )}
                </div>
            </div>

            {/* 相手ロボットリスト */}
            <div className="border-2 border-red-500 rounded-xl p-4 bg-slate-800">
                <h3 className="text-xl font-bold text-red-300 mb-3 flex justify-between items-center">
                    対戦相手リスト ({availableOpponents.length})
                    <button onClick={loadAllPublicRobots} disabled={loading} className="text-sm px-3 py-1 bg-red-600/50 hover:bg-red-600 rounded-full transition flex items-center gap-1">
                        {loading ? <Loader2 size={16} className="animate-spin" /> : '更新'}
                    </button>
                </h3>
                {!selectedMyRobot && <p className="text-yellow-400 mb-3">先に上部の「対戦に使用するあなたのロボット」を選択してください。</p>}

                {availableOpponents.length === 0 ? (
                    <p className="text-slate-500">対戦相手がいません。（自分のロボットが１体のみの場合は、構築モードで２体目を作成してください）</p>
                ) : (
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                        {availableOpponents.map(robot => (
                            <RobotCard 
                                key={robot.id} 
                                robot={robot} 
                                type="opponent"
                                isSelected={selectedOpponent && selectedOpponent.id === robot.id}
                                onClick={() => setSelectedOpponent(robot)}
                            />
                        ))}
                    </div>
                )}
            </div>

            {/* バトル開始ボタン */}
            <button
                onClick={() => { setMode('BATTLE'); startBattle(); }}
                disabled={!selectedMyRobot || !selectedOpponent || selectedMyRobot.id === selectedOpponent.id}
                className="w-full p-4 text-xl font-extrabold bg-green-600 hover:bg-green-700 rounded-lg flex items-center justify-center gap-2 transition disabled:bg-green-900/50"
            >
                <Sword size={24}/> バトル開始！
            </button>
        </div>
    );
  };
  
  const renderBattleMode = () => {
    if (!selectedMyRobot || !selectedOpponent) {
        // 対戦相手が選択されていない場合は選択画面に戻る
        setMode('SELECT_OPPONENT'); 
        return (
            <div className="p-10 text-center text-red-400 mt-10">
                <h2 className="text-2xl font-bold">⚠️ 対戦エラー</h2>
                <p className="mt-2">対戦に必要なロボットデータが見つかりませんでした。対戦相手選択画面に戻ります。</p>
            </div>
        );
    }
    
    const isMyRobotWinner = !isSimulating && selectedMyRobot.id && battleResultId === selectedMyRobot.id;
    const isOpponentWinner = !isSimulating && selectedOpponent.id && battleResultId === selectedOpponent.id;

    return (
        <div className="p-4 md:p-8 space-y-6 max-w-4xl mx-auto">
            <h2 className="text-3xl font-extrabold text-green-400 flex items-center gap-2">
                <Zap size={28} /> バトルシミュレーション
            </h2>
            <p className="text-slate-400">ダメージに乱数要素が加わりました。同じ組み合わせでも結果が変わる可能性があります！</p>

            {/* ロボット対戦表示 */}
            <div className="flex justify-around items-start p-4 bg-slate-800 rounded-xl shadow-2xl">
                <div className={`p-4 rounded-lg transition duration-500 
                    ${isMyRobotWinner ? 'ring-4 ring-indigo-400' : ''}`}>
                    <RobotVisualDisplay robot={selectedMyRobot} />
                    <p className="text-xl font-bold text-center text-indigo-300 mt-2">{selectedMyRobot.name}</p>
                    <p className="text-sm font-semibold text-center text-yellow-300">({selectedMyRobot.pilotName || '名無しのパイロット'})</p>
                </div>
                <div className="text-4xl font-black text-red-500 p-4">VS</div>
                <div className={`p-4 rounded-lg transition duration-500 
                    ${isOpponentWinner ? 'ring-4 ring-red-400' : ''}`}>
                    <RobotVisualDisplay robot={selectedOpponent} />
                    <p className="text-xl font-bold text-center text-red-300 mt-2">{selectedOpponent.name}</p>
                    <p className="text-sm font-semibold text-center text-yellow-300">({selectedOpponent.pilotName || '名無しのパイロット'})</p>
                </div>
            </div>

            {/* バトルログ */}
            <div className="bg-slate-700 h-80 overflow-y-auto p-4 rounded-xl font-mono text-sm space-y-1 shadow-inner">
                <h3 className="text-lg font-bold text-white sticky top-0 bg-slate-700/90 py-1">戦闘ログ</h3>
                {battleLog.map((entry, index) => {
                    if (!entry || typeof entry !== 'object') {
                        return null; 
                    }
                    
                    // ナレーションのレンダリング
                    if (entry.type === 'narration') {
                        return (
                            <p key={index} 
                                className="text-yellow-400 font-medium italic bg-slate-600/50 p-1 rounded-md mb-1"
                                dangerouslySetInnerHTML={{ __html: `📢 ${entry.text}` }}
                            />
                        );
                    }

                    // カスタムメッセージのレンダリング
                    if (entry.type === 'message') {
                        const speakerColor = entry.isA ? 'text-indigo-300' : 'text-red-300';
                        const textAlignment = entry.isA ? 'text-left' : 'text-right'; 
                        const bgColor = entry.isA ? 'bg-indigo-900/30' : 'bg-red-900/30';
                        const nameDisplay = entry.isA ? `[${entry.name}]` : `[${entry.name}]`;
                        
                        return (
                            <p key={index} className={`font-bold italic ${speakerColor} ${textAlignment} px-2 py-1 rounded-md ${bgColor} animate-pulse-once`}>
                                {nameDisplay}: "{entry.text}"
                            </p>
                        );
                    }
                    
                    if (entry.message) {
                        // システムメッセージの表示
                        return <p key={index} className="text-green-400 font-bold border-t border-slate-600 pt-1">{entry.message}</p>;
                    }
                    
                    // ターンログの場合
                    if (entry.damage === undefined || entry.atk === undefined || entry.def === undefined) {
                        return null;
                    }

                    const isMyAttack = entry.isA; 
                    const textColor = isMyAttack ? 'text-indigo-200' : 'text-red-200';
                    return (
                        <div key={index} className={`flex justify-between ${textColor} border-b border-slate-700/50 py-1`}>
                            <span>ステップ {entry.step}: {entry.attacker} の攻撃! </span>
                            <span className="text-xs text-slate-400"> (ATK:{entry.atk}/DEF:{entry.def})</span>
                            <span>{entry.defender} に <span className="text-lg font-extrabold text-yellow-300">{entry.damage}</span> ダメージ!</span>
                            <span className="text-slate-400"> (HP A:{entry.hpA}, B:{entry.hpB})</span>
                        </div>
                    );
                })}
                {isSimulating && <Loader2 size={24} className="animate-spin text-green-400 mt-4 mx-auto" />}
            </div>
            
            {/* 結果表示 */}
            {battleResult && (
                <div className="text-center p-4 bg-green-800/50 rounded-lg">
                    <p className="text-3xl font-extrabold text-green-300">
                        {battleResult === '時間切れ/引き分け' ? battleResult : `WINNER: ${battleResult}`}
                    </p>
                </div>
            )}

            {/* 戻るボタン */}
            <button
                onClick={() => { setMode('SELECT_OPPONENT'); setBattleResult(null); setBattleResultId(null); setBattleLog([]); loadAllPublicRobots(); }}
                className="w-full p-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-bold transition"
            >
                対戦相手選択に戻る
            </button>
        </div>
    );
  };
  
  const RobotVisualDisplay = ({ robot }) => (
    <div className="flex flex-col items-center justify-center p-4">
      <div className={`text-4xl ${robot.parts?.head?.color || 'text-white'}`}>{robot.parts?.head?.icon || '❓'}</div>
      <div className={`text-5xl ${robot.parts?.arms?.color || 'text-white'} flex items-center`}>
        {robot.parts?.arms?.icon || '❓'}
        <span className={`text-3xl mx-3 ${robot.parts?.body?.color || 'text-white'}`}>{robot.parts?.body?.icon || '❓'}</span>
        {robot.parts?.arms?.icon || '❓'}
      </div>
      <div className={`text-4xl ${robot.parts?.legs?.color || 'text-white'}`}>{robot.parts?.legs?.icon || '❓'}</div>
      <p className="text-sm text-slate-500 mt-2">
         {robot.userId === userId ? 'あなた' : `ID: ${robot.userId?.slice(0, 8)}...`}
      </p>
    </div>
  );


  // --- メインレンダリング (変更なし) ---
  if (loading && !isAuthReady) {
    return (
      <div className="flex flex-col items-center justify-center h-screen bg-slate-900 text-white">
        <Loader2 size={48} className="animate-spin text-indigo-400" />
        <p className="mt-4 text-xl">システム起動中（認証待機）...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex flex-col items-center justify-center h-screen bg-slate-900 text-red-400 p-8">
        <h1 className="text-2xl font-bold">致命的なエラーが発生しました</h1>
        <p className="mt-4 text-center text-lg">{error}</p>
        <p className="mt-8 text-sm text-slate-400 border-t border-slate-600 pt-4">
            上記のメッセージが、起動時にブラウザの**コンソール**に表示されるエラー内容と一致しない場合、<br/>
            お手数ですが、コンソールに表示された**赤いエラーメッセージ**をそのままコピー＆ペーストでお知らせください。<br/>
            それが問題解決の鍵になります。
        </p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-900 text-white font-sans p-2">
      <header className="flex justify-between items-center p-4 bg-slate-800 shadow-xl rounded-b-xl sticky top-0 z-10">
        <h1 className="text-2xl font-black text-white flex items-center gap-2">
          <Zap size={28} className="text-yellow-400"/> MECHA BUILDER
        </h1>
        <div className="flex items-center gap-4">
          <p className="text-sm text-slate-400 flex items-center">
            <User size={16} className="mr-1"/> ユーザーID: {userId ? userId.slice(0, 8) + '...' : '未認証'}
          </p>
          <button
            onClick={() => setMode('BUILD')}
            className={`p-2 rounded-full transition ${mode === 'BUILD' ? 'bg-indigo-600' : 'bg-slate-700 hover:bg-slate-600'}`}
            title="ロボット構築"
          >
            <Settings size={20} />
          </button>
          <button
            onClick={() => { setMode('SELECT_OPPONENT'); loadAllPublicRobots(); }}
            disabled={myRobots.length === 0}
            className={`p-2 rounded-full transition ${mode === 'SELECT_OPPONENT' ? 'bg-red-600' : 'bg-slate-700 hover:bg-slate-600'} disabled:opacity-50`}
            title="対戦相手選択"
          >
            <Sword size={20} />
          </button>
        </div>
      </header>
      
      <main>
        {mode === 'BUILD' && renderBuildMode()}
        {mode === 'SELECT_OPPONENT' && renderOpponentSelectMode()}
        {mode === 'BATTLE' && renderBattleMode()}
      </main>
    </div>
  );
};

export default App;