import React, { useState, useEffect, useRef } from 'react';
import { Castle, Wheat, Trees, Hammer, Coins, Shield, Sword, Crown, Users, Map, Zap, Star, X, ChevronUp, Flame, Skull, Home } from 'lucide-react';

const TotalBattlePrototype = () => {
  // ============ GAME STATE ============
  const [resources, setResources] = useState({
    food: 500,
    wood: 500,
    stone: 200,
    gold: 100,
  });

  const [power, setPower] = useState(0);
  const [view, setView] = useState('castle'); // castle, world, troops, hero
  const [selectedBuilding, setSelectedBuilding] = useState(null);
  const [selectedMonster, setSelectedMonster] = useState(null);
  const [notification, setNotification] = useState(null);
  const [marches, setMarches] = useState([]); // active army marches
  const [battleResult, setBattleResult] = useState(null);

  // Buildings — each has a level. Production buildings generate resources/hour.
  const [buildings, setBuildings] = useState({
    castle: { level: 1, name: 'Castle', icon: 'castle', upgrading: null },
    farm: { level: 1, name: 'Farm', icon: 'wheat', upgrading: null },
    lumbermill: { level: 1, name: 'Lumber Mill', icon: 'trees', upgrading: null },
    quarry: { level: 1, name: 'Quarry', icon: 'hammer', upgrading: null },
    treasury: { level: 1, name: 'Treasury', icon: 'coins', upgrading: null },
    barracks: { level: 1, name: 'Barracks', icon: 'sword', upgrading: null },
    wall: { level: 1, name: 'Wall', icon: 'shield', upgrading: null },
    academy: { level: 0, name: 'Academy', icon: 'star', upgrading: null },
  });

  // Troops in your barracks
  const [troops, setTroops] = useState({
    swordsmen: 10,
    archers: 5,
    cavalry: 0,
  });

  const [training, setTraining] = useState(null); // {type, count, finishesAt}

  // Hero
  const [hero, setHero] = useState({
    name: 'Aydae',
    level: 1,
    xp: 0,
    attack: 10,
    defense: 8,
  });

  // World map monsters — randomly generated
  const [monsters, setMonsters] = useState(() => generateMonsters());

  function generateMonsters() {
    const types = [
      { name: 'Goblin Camp', level: 1, hp: 50, attack: 8, defense: 5, reward: { food: 100, wood: 50, gold: 20, xp: 20 } },
      { name: 'Bandit Hideout', level: 2, hp: 120, attack: 15, defense: 10, reward: { food: 200, wood: 100, stone: 50, gold: 50, xp: 50 } },
      { name: 'Orc Warband', level: 3, hp: 250, attack: 25, defense: 18, reward: { food: 400, wood: 200, stone: 100, gold: 100, xp: 100 } },
      { name: 'Troll Lair', level: 4, hp: 500, attack: 40, defense: 30, reward: { food: 800, wood: 400, stone: 250, gold: 200, xp: 200 } },
      { name: 'Dragon Roost', level: 5, hp: 1000, attack: 70, defense: 50, reward: { food: 1500, wood: 800, stone: 500, gold: 500, xp: 500 } },
    ];
    const out = [];
    for (let i = 0; i < 12; i++) {
      const t = types[Math.floor(Math.random() * types.length)];
      out.push({
        id: i,
        ...t,
        currentHp: t.hp,
        x: 10 + Math.random() * 80,
        y: 10 + Math.random() * 80,
      });
    }
    return out;
  }

  // ============ TROOP DEFINITIONS ============
  const troopTypes = {
    swordsmen: { name: 'Swordsmen', cost: { food: 20, gold: 5 }, time: 5, attack: 5, defense: 4, hp: 10, icon: '⚔️' },
    archers: { name: 'Archers', cost: { food: 15, wood: 15, gold: 10 }, time: 8, attack: 8, defense: 2, hp: 7, icon: '🏹' },
    cavalry: { name: 'Cavalry', cost: { food: 40, wood: 10, gold: 25 }, time: 15, attack: 12, defense: 8, hp: 20, icon: '🐎' },
  };

  // ============ BUILDING DEFINITIONS ============
  function buildingCost(key, level) {
    const targetLevel = level + 1;
    const base = {
      castle: { wood: 200, stone: 150, gold: 50 },
      farm: { wood: 60, stone: 20 },
      lumbermill: { wood: 30, stone: 50 },
      quarry: { wood: 80, stone: 30 },
      treasury: { wood: 100, stone: 100, gold: 20 },
      barracks: { wood: 120, stone: 80, gold: 30 },
      wall: { wood: 50, stone: 200 },
      academy: { wood: 150, stone: 150, gold: 100 },
    }[key];
    const cost = {};
    Object.entries(base).forEach(([k, v]) => {
      cost[k] = Math.floor(v * Math.pow(1.5, targetLevel - 1));
    });
    return cost;
  }

  function buildingTime(level) {
    return 5 + level * 5; // seconds for prototype speed
  }

  function buildingProduction(key, level) {
    if (level === 0) return 0;
    const base = { farm: 60, lumbermill: 50, quarry: 30, treasury: 20 };
    return Math.floor((base[key] || 0) * Math.pow(1.3, level - 1));
  }

  function getResourceType(buildingKey) {
    return { farm: 'food', lumbermill: 'wood', quarry: 'stone', treasury: 'gold' }[buildingKey];
  }

  // ============ POWER CALCULATION ============
  useEffect(() => {
    let p = 0;
    Object.values(buildings).forEach(b => { p += b.level * 100; });
    Object.entries(troops).forEach(([k, v]) => {
      const t = troopTypes[k];
      p += v * (t.attack + t.defense + t.hp);
    });
    p += hero.level * 50 + hero.attack * 5 + hero.defense * 5;
    setPower(p);
  }, [buildings, troops, hero]);

  // ============ RESOURCE GENERATION TICK ============
  useEffect(() => {
    const interval = setInterval(() => {
      setResources(prev => {
        const next = { ...prev };
        Object.entries(buildings).forEach(([key, b]) => {
          const r = getResourceType(key);
          if (r) {
            const perSecond = buildingProduction(key, b.level) / 60;
            next[r] = Math.floor(next[r] + perSecond);
          }
        });
        return next;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, [buildings]);

  // ============ BUILDING UPGRADE TICK ============
  useEffect(() => {
    const interval = setInterval(() => {
      setBuildings(prev => {
        let changed = false;
        const next = { ...prev };
        Object.entries(prev).forEach(([key, b]) => {
          if (b.upgrading && Date.now() >= b.upgrading) {
            next[key] = { ...b, level: b.level + 1, upgrading: null };
            changed = true;
            showNotification(`${b.name} upgraded to level ${b.level + 1}!`, 'success');
          }
        });
        return changed ? next : prev;
      });
    }, 500);
    return () => clearInterval(interval);
  }, []);

  // ============ TRAINING TICK ============
  useEffect(() => {
    if (!training) return;
    const interval = setInterval(() => {
      if (Date.now() >= training.finishesAt) {
        setTroops(prev => ({ ...prev, [training.type]: prev[training.type] + training.count }));
        showNotification(`${training.count} ${troopTypes[training.type].name} trained!`, 'success');
        setTraining(null);
      }
    }, 500);
    return () => clearInterval(interval);
  }, [training]);

  // ============ MARCH/BATTLE TICK ============
  useEffect(() => {
    const interval = setInterval(() => {
      setMarches(prev => {
        const remaining = [];
        const now = Date.now();
        prev.forEach(m => {
          if (now >= m.returnAt) {
            // Battle complete
            applyBattleResult(m);
          } else {
            remaining.push(m);
          }
        });
        return remaining;
      });
    }, 500);
    return () => clearInterval(interval);
  }, []);

  function applyBattleResult(march) {
    const monster = monsters.find(m => m.id === march.monsterId);
    if (!monster) return;

    // Calculate army stats
    let totalAttack = 0, totalDefense = 0, totalHp = 0;
    Object.entries(march.army).forEach(([k, v]) => {
      const t = troopTypes[k];
      totalAttack += v * t.attack;
      totalDefense += v * t.defense;
      totalHp += v * t.hp;
    });
    totalAttack += hero.attack * 10;
    totalDefense += hero.defense * 10;

    // Simple battle: if your attack vs monster defense
    const yourPower = totalAttack + totalHp / 2;
    const monsterPower = monster.attack * 5 + monster.hp + monster.defense * 3;

    const won = yourPower > monsterPower;

    // Losses scale based on how close the battle was
    const ratio = monsterPower / yourPower;
    const lossRate = won ? Math.min(0.4, ratio * 0.3) : Math.min(0.95, ratio * 0.7);

    const survivingArmy = {};
    let lostCount = 0;
    Object.entries(march.army).forEach(([k, v]) => {
      const survived = Math.floor(v * (1 - lossRate));
      survivingArmy[k] = survived;
      lostCount += v - survived;
    });

    setTroops(prev => {
      const next = { ...prev };
      Object.entries(survivingArmy).forEach(([k, v]) => {
        next[k] += v;
      });
      return next;
    });

    if (won) {
      setResources(prev => ({
        food: prev.food + monster.reward.food,
        wood: prev.wood + monster.reward.wood,
        stone: prev.stone + (monster.reward.stone || 0),
        gold: prev.gold + monster.reward.gold,
      }));
      // Hero XP
      setHero(prev => {
        let newXp = prev.xp + monster.reward.xp;
        let newLevel = prev.level;
        let newAtk = prev.attack;
        let newDef = prev.defense;
        const xpNeeded = newLevel * 100;
        if (newXp >= xpNeeded) {
          newXp -= xpNeeded;
          newLevel++;
          newAtk += 3;
          newDef += 2;
          showNotification(`${prev.name} reached level ${newLevel}!`, 'levelup');
        }
        return { ...prev, xp: newXp, level: newLevel, attack: newAtk, defense: newDef };
      });
      // Remove monster, spawn a new one
      setMonsters(prev => {
        const filtered = prev.filter(m => m.id !== monster.id);
        const types = [
          { name: 'Goblin Camp', level: 1, hp: 50, attack: 8, defense: 5, reward: { food: 100, wood: 50, gold: 20, xp: 20 } },
          { name: 'Bandit Hideout', level: 2, hp: 120, attack: 15, defense: 10, reward: { food: 200, wood: 100, stone: 50, gold: 50, xp: 50 } },
          { name: 'Orc Warband', level: 3, hp: 250, attack: 25, defense: 18, reward: { food: 400, wood: 200, stone: 100, gold: 100, xp: 100 } },
          { name: 'Troll Lair', level: 4, hp: 500, attack: 40, defense: 30, reward: { food: 800, wood: 400, stone: 250, gold: 200, xp: 200 } },
          { name: 'Dragon Roost', level: 5, hp: 1000, attack: 70, defense: 50, reward: { food: 1500, wood: 800, stone: 500, gold: 500, xp: 500 } },
        ];
        const t = types[Math.floor(Math.random() * types.length)];
        return [...filtered, {
          id: Date.now(),
          ...t,
          currentHp: t.hp,
          x: 10 + Math.random() * 80,
          y: 10 + Math.random() * 80,
        }];
      });
    }

    setBattleResult({
      won,
      monsterName: monster.name,
      reward: won ? monster.reward : null,
      lostCount,
      survivingArmy,
    });
  }

  // ============ ACTIONS ============
  function showNotification(text, type = 'info') {
    setNotification({ text, type });
    setTimeout(() => setNotification(null), 3000);
  }

  function canAfford(cost) {
    return Object.entries(cost).every(([k, v]) => resources[k] >= v);
  }

  function payCost(cost) {
    setResources(prev => {
      const next = { ...prev };
      Object.entries(cost).forEach(([k, v]) => { next[k] -= v; });
      return next;
    });
  }

  function upgradeBuilding(key) {
    const b = buildings[key];
    if (b.upgrading) return;
    if (key !== 'castle' && b.level >= buildings.castle.level) {
      showNotification('Upgrade your Castle first!', 'error');
      return;
    }
    const cost = buildingCost(key, b.level);
    if (!canAfford(cost)) {
      showNotification('Not enough resources!', 'error');
      return;
    }
    payCost(cost);
    setBuildings(prev => ({
      ...prev,
      [key]: { ...prev[key], upgrading: Date.now() + buildingTime(b.level) * 1000 },
    }));
    showNotification(`Started upgrading ${b.name}...`, 'info');
  }

  function trainTroops(type, count) {
    if (training) {
      showNotification('Already training troops!', 'error');
      return;
    }
    const t = troopTypes[type];
    const totalCost = {};
    Object.entries(t.cost).forEach(([k, v]) => { totalCost[k] = v * count; });
    if (!canAfford(totalCost)) {
      showNotification('Not enough resources!', 'error');
      return;
    }
    payCost(totalCost);
    setTraining({ type, count, finishesAt: Date.now() + t.time * count * 1000 });
    showNotification(`Training ${count} ${t.name}...`, 'info');
  }

  function attackMonster(monster, armyComposition) {
    // Check totals
    const total = Object.values(armyComposition).reduce((a, b) => a + b, 0);
    if (total === 0) {
      showNotification('Send at least one troop!', 'error');
      return;
    }
    // Verify we have the troops
    for (const [k, v] of Object.entries(armyComposition)) {
      if (troops[k] < v) {
        showNotification('Not enough troops!', 'error');
        return;
      }
    }
    // Deduct troops (they're now marching)
    setTroops(prev => {
      const next = { ...prev };
      Object.entries(armyComposition).forEach(([k, v]) => { next[k] -= v; });
      return next;
    });
    // Travel time based on monster level
    const travelTime = (5 + monster.level * 3) * 1000;
    setMarches(prev => [...prev, {
      id: Date.now(),
      monsterId: monster.id,
      monsterName: monster.name,
      army: armyComposition,
      returnAt: Date.now() + travelTime,
      totalTime: travelTime,
      startedAt: Date.now(),
    }]);
    setSelectedMonster(null);
    showNotification(`Army marching to ${monster.name}...`, 'info');
  }

  // ============ UI HELPERS ============
  function ResourceBar() {
    return (
      <div className="flex gap-2 flex-wrap items-center text-sm">
        <div className="flex items-center gap-1 bg-amber-900/60 px-2 py-1 rounded-md border border-amber-700">
          <Wheat size={14} className="text-yellow-400" /> <span>{resources.food}</span>
        </div>
        <div className="flex items-center gap-1 bg-amber-900/60 px-2 py-1 rounded-md border border-amber-700">
          <Trees size={14} className="text-green-400" /> <span>{resources.wood}</span>
        </div>
        <div className="flex items-center gap-1 bg-amber-900/60 px-2 py-1 rounded-md border border-amber-700">
          <Hammer size={14} className="text-gray-300" /> <span>{resources.stone}</span>
        </div>
        <div className="flex items-center gap-1 bg-amber-900/60 px-2 py-1 rounded-md border border-amber-700">
          <Coins size={14} className="text-yellow-300" /> <span>{resources.gold}</span>
        </div>
        <div className="flex items-center gap-1 bg-red-900/60 px-2 py-1 rounded-md border border-red-700">
          <Crown size={14} className="text-yellow-200" /> <span className="font-bold">{power.toLocaleString()}</span>
        </div>
      </div>
    );
  }

  function getBuildingIcon(iconName, size = 28) {
    const map = {
      castle: <Castle size={size} />,
      wheat: <Wheat size={size} />,
      trees: <Trees size={size} />,
      hammer: <Hammer size={size} />,
      coins: <Coins size={size} />,
      sword: <Sword size={size} />,
      shield: <Shield size={size} />,
      star: <Star size={size} />,
    };
    return map[iconName] || <Castle size={size} />;
  }

  // ============ VIEW: CASTLE ============
  function CastleView() {
    const buildingOrder = ['castle', 'farm', 'lumbermill', 'quarry', 'treasury', 'barracks', 'wall', 'academy'];
    return (
      <div className="relative w-full h-full bg-gradient-to-b from-sky-700 via-sky-500 to-green-700 overflow-hidden">
        {/* Sky / Clouds */}
        <div className="absolute top-4 left-10 w-16 h-6 bg-white/40 rounded-full blur-sm"></div>
        <div className="absolute top-12 right-20 w-20 h-8 bg-white/30 rounded-full blur-sm"></div>
        <div className="absolute top-20 left-1/3 w-12 h-5 bg-white/40 rounded-full blur-sm"></div>

        {/* Ground */}
        <div className="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-b from-green-600 to-green-800"></div>

        {/* Buildings grid */}
        <div className="absolute inset-0 grid grid-cols-3 gap-3 p-4 pt-8">
          {buildingOrder.map(key => {
            const b = buildings[key];
            const isUpgrading = b.upgrading !== null;
            const timeLeft = isUpgrading ? Math.max(0, b.upgrading - Date.now()) / 1000 : 0;
            const isLocked = key === 'academy' && b.level === 0 && buildings.castle.level < 3;
            return (
              <button
                key={key}
                onClick={() => !isLocked && setSelectedBuilding(key)}
                disabled={isLocked}
                className={`relative flex flex-col items-center justify-center p-2 rounded-lg border-2 transition-all
                  ${isLocked
                    ? 'bg-gray-800/60 border-gray-700 opacity-50 cursor-not-allowed'
                    : 'bg-amber-100/90 border-amber-700 hover:bg-amber-200 hover:scale-105 cursor-pointer shadow-lg'}`}
              >
                <div className="text-amber-900">
                  {getBuildingIcon(b.icon, 36)}
                </div>
                <div className="text-xs font-bold text-amber-950 mt-1 text-center leading-tight">
                  {b.name}
                </div>
                {!isLocked && (
                  <div className="text-[10px] bg-amber-800 text-white px-2 py-0.5 rounded-full mt-0.5">
                    Lvl {b.level}
                  </div>
                )}
                {isLocked && (
                  <div className="text-[10px] text-gray-300 mt-1">Locked</div>
                )}
                {isUpgrading && (
                  <div className="absolute inset-0 bg-black/60 rounded-lg flex flex-col items-center justify-center">
                    <ChevronUp className="text-yellow-300 animate-bounce" size={24} />
                    <div className="text-white text-xs font-bold">{Math.ceil(timeLeft)}s</div>
                  </div>
                )}
              </button>
            );
          })}
        </div>
      </div>
    );
  }

  // ============ VIEW: WORLD MAP ============
  function WorldView() {
    return (
      <div className="relative w-full h-full bg-gradient-to-br from-emerald-900 via-emerald-800 to-amber-900 overflow-hidden">
        {/* Map texture */}
        <div className="absolute inset-0 opacity-30"
          style={{
            backgroundImage: 'radial-gradient(circle at 30% 40%, #2d5a2d 0%, transparent 40%), radial-gradient(circle at 70% 60%, #4a3a1a 0%, transparent 50%)'
          }}></div>

        {/* Your castle in the center */}
        <div
          className="absolute -translate-x-1/2 -translate-y-1/2 cursor-pointer"
          style={{ left: '50%', top: '50%' }}
          onClick={() => setView('castle')}
        >
          <div className="flex flex-col items-center">
            <div className="bg-blue-600 p-2 rounded-full border-2 border-yellow-300 shadow-xl">
              <Home className="text-white" size={28} />
            </div>
            <div className="text-xs text-white font-bold mt-1 bg-black/60 px-2 rounded">Your Castle</div>
          </div>
        </div>

        {/* Monsters */}
        {monsters.map(m => (
          <button
            key={m.id}
            onClick={() => setSelectedMonster(m)}
            className="absolute -translate-x-1/2 -translate-y-1/2 hover:scale-110 transition-transform"
            style={{ left: `${m.x}%`, top: `${m.y}%` }}
          >
            <div className="flex flex-col items-center">
              <div className={`p-1.5 rounded-full border-2 shadow-lg ${
                m.level === 1 ? 'bg-green-700 border-green-300' :
                m.level === 2 ? 'bg-yellow-700 border-yellow-300' :
                m.level === 3 ? 'bg-orange-700 border-orange-300' :
                m.level === 4 ? 'bg-red-700 border-red-300' :
                'bg-purple-800 border-purple-300'
              }`}>
                <Skull className="text-white" size={20} />
              </div>
              <div className="text-[10px] text-white font-bold mt-0.5 bg-black/70 px-1.5 rounded whitespace-nowrap">
                Lvl {m.level} {m.name.split(' ')[0]}
              </div>
            </div>
          </button>
        ))}

        {/* Active marches */}
        {marches.map(m => {
          const monster = monsters.find(mo => mo.id === m.monsterId);
          if (!monster) return null;
          const progress = (Date.now() - m.startedAt) / m.totalTime;
          const half = progress < 0.5;
          const t = half ? progress * 2 : (1 - progress) * 2;
          const cx = 50 + (monster.x - 50) * t;
          const cy = 50 + (monster.y - 50) * t;
          return (
            <div
              key={m.id}
              className="absolute -translate-x-1/2 -translate-y-1/2 pointer-events-none"
              style={{ left: `${cx}%`, top: `${cy}%` }}
            >
              <div className="bg-blue-500 p-1 rounded-full border border-yellow-200 animate-pulse">
                <Sword className="text-white" size={14} />
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  // ============ MODALS ============
  function BuildingModal() {
    if (!selectedBuilding) return null;
    const b = buildings[selectedBuilding];
    const cost = buildingCost(selectedBuilding, b.level);
    const time = buildingTime(b.level);
    const resourceType = getResourceType(selectedBuilding);
    const currentProd = buildingProduction(selectedBuilding, b.level);
    const nextProd = buildingProduction(selectedBuilding, b.level + 1);
    const canUpgrade = !b.upgrading && canAfford(cost) && (selectedBuilding === 'castle' || b.level < buildings.castle.level);

    return (
      <div className="absolute inset-0 bg-black/70 flex items-center justify-center z-30 p-4" onClick={() => setSelectedBuilding(null)}>
        <div className="bg-gradient-to-b from-amber-100 to-amber-200 border-4 border-amber-800 rounded-lg p-4 max-w-sm w-full shadow-2xl" onClick={e => e.stopPropagation()}>
          <div className="flex justify-between items-start mb-3">
            <div>
              <h3 className="text-xl font-bold text-amber-950">{b.name}</h3>
              <p className="text-amber-800 text-sm">Level {b.level}</p>
            </div>
            <button onClick={() => setSelectedBuilding(null)} className="text-amber-900 hover:text-red-700">
              <X size={20} />
            </button>
          </div>

          {resourceType && (
            <div className="bg-amber-50 border border-amber-400 rounded p-2 mb-3 text-sm text-amber-900">
              <div>Produces: <b>{currentProd}/min</b> {resourceType}</div>
              <div className="text-green-700">Next level: <b>{nextProd}/min</b></div>
            </div>
          )}

          {selectedBuilding === 'castle' && (
            <div className="bg-amber-50 border border-amber-400 rounded p-2 mb-3 text-sm text-amber-900">
              Increases the max level of all other buildings.
            </div>
          )}

          {selectedBuilding === 'barracks' && (
            <div className="bg-amber-50 border border-amber-400 rounded p-2 mb-3 text-sm text-amber-900">
              Higher level allows training more powerful troops faster.
            </div>
          )}

          {selectedBuilding === 'wall' && (
            <div className="bg-amber-50 border border-amber-400 rounded p-2 mb-3 text-sm text-amber-900">
              Defends your castle from attacks.
            </div>
          )}

          {selectedBuilding === 'academy' && (
            <div className="bg-amber-50 border border-amber-400 rounded p-2 mb-3 text-sm text-amber-900">
              Research technologies to boost your army and economy.
            </div>
          )}

          <div className="bg-amber-900 text-white rounded p-3 mb-3">
            <div className="text-sm font-bold mb-2">Upgrade to Lvl {b.level + 1}</div>
            <div className="grid grid-cols-2 gap-1 text-xs">
              {Object.entries(cost).map(([k, v]) => (
                <div key={k} className={`flex justify-between ${resources[k] >= v ? 'text-green-300' : 'text-red-300'}`}>
                  <span className="capitalize">{k}:</span>
                  <span>{v}</span>
                </div>
              ))}
            </div>
            <div className="text-xs mt-2 text-amber-200">Time: {time}s</div>
          </div>

          <button
            onClick={() => { upgradeBuilding(selectedBuilding); setSelectedBuilding(null); }}
            disabled={!canUpgrade}
            className={`w-full py-2 rounded font-bold ${canUpgrade ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-gray-400 text-gray-600 cursor-not-allowed'}`}
          >
            {b.upgrading ? 'Upgrading...' : canUpgrade ? 'Upgrade' : selectedBuilding !== 'castle' && b.level >= buildings.castle.level ? 'Castle too low' : 'Not enough resources'}
          </button>
        </div>
      </div>
    );
  }

  function MonsterModal() {
    const [army, setArmy] = useState({ swordsmen: 0, archers: 0, cavalry: 0 });
    if (!selectedMonster) return null;
    const m = selectedMonster;

    function adjust(k, delta) {
      setArmy(prev => ({ ...prev, [k]: Math.max(0, Math.min(troops[k], prev[k] + delta)) }));
    }

    function allIn() {
      setArmy({ swordsmen: troops.swordsmen, archers: troops.archers, cavalry: troops.cavalry });
    }

    // Estimate
    let attack = 0, defense = 0, hp = 0;
    Object.entries(army).forEach(([k, v]) => {
      const t = troopTypes[k];
      attack += v * t.attack;
      defense += v * t.defense;
      hp += v * t.hp;
    });
    attack += hero.attack * 10;
    defense += hero.defense * 10;
    const yourPower = attack + hp / 2;
    const monsterPower = m.attack * 5 + m.hp + m.defense * 3;
    const winChance = yourPower > monsterPower ? Math.min(99, 50 + (yourPower / monsterPower - 1) * 50) : Math.max(1, 50 - (1 - yourPower / monsterPower) * 50);

    return (
      <div className="absolute inset-0 bg-black/70 flex items-center justify-center z-30 p-4" onClick={() => setSelectedMonster(null)}>
        <div className="bg-gradient-to-b from-red-900 to-red-950 border-4 border-red-700 rounded-lg p-4 max-w-sm w-full shadow-2xl text-white" onClick={e => e.stopPropagation()}>
          <div className="flex justify-between items-start mb-3">
            <div>
              <h3 className="text-xl font-bold flex items-center gap-2"><Skull /> {m.name}</h3>
              <p className="text-red-300 text-sm">Level {m.level}</p>
            </div>
            <button onClick={() => setSelectedMonster(null)} className="text-red-300 hover:text-white">
              <X size={20} />
            </button>
          </div>

          <div className="grid grid-cols-3 gap-2 text-sm mb-3 bg-red-950/50 p-2 rounded">
            <div>HP: <b>{m.hp}</b></div>
            <div>ATK: <b>{m.attack}</b></div>
            <div>DEF: <b>{m.defense}</b></div>
          </div>

          <div className="text-xs mb-2 text-amber-200">Rewards:</div>
          <div className="grid grid-cols-4 gap-1 text-xs mb-3 bg-amber-900/40 p-2 rounded">
            <div>🌾 {m.reward.food}</div>
            <div>🌲 {m.reward.wood}</div>
            <div>⛏️ {m.reward.stone || 0}</div>
            <div>💰 {m.reward.gold}</div>
          </div>

          <div className="text-sm font-bold mb-2">Send army:</div>
          {Object.entries(troopTypes).map(([k, t]) => (
            <div key={k} className="flex items-center justify-between bg-red-950/50 rounded p-2 mb-1 text-sm">
              <div className="flex-1">
                <span>{t.icon} {t.name}</span>
                <span className="text-xs text-red-300 ml-2">(have {troops[k]})</span>
              </div>
              <div className="flex items-center gap-1">
                <button onClick={() => adjust(k, -10)} className="bg-red-700 hover:bg-red-600 w-7 h-7 rounded">-10</button>
                <button onClick={() => adjust(k, -1)} className="bg-red-700 hover:bg-red-600 w-7 h-7 rounded">-</button>
                <span className="w-8 text-center font-bold">{army[k]}</span>
                <button onClick={() => adjust(k, 1)} className="bg-green-700 hover:bg-green-600 w-7 h-7 rounded">+</button>
                <button onClick={() => adjust(k, 10)} className="bg-green-700 hover:bg-green-600 w-8 h-7 rounded text-xs">+10</button>
              </div>
            </div>
          ))}

          <button onClick={allIn} className="w-full bg-amber-700 hover:bg-amber-600 text-white py-1 rounded text-xs mb-2">Send All</button>

          <div className="bg-black/40 rounded p-2 mb-3 text-xs">
            <div>Your power: {Math.floor(yourPower)}</div>
            <div>Enemy power: {Math.floor(monsterPower)}</div>
            <div className={winChance > 50 ? 'text-green-400 font-bold' : 'text-red-400 font-bold'}>
              Win chance: ~{Math.floor(winChance)}%
            </div>
          </div>

          <button
            onClick={() => attackMonster(m, army)}
            className="w-full py-2 rounded font-bold bg-red-600 hover:bg-red-500 text-white flex items-center justify-center gap-2"
          >
            <Sword size={18} /> Attack!
          </button>
        </div>
      </div>
    );
  }

  function BattleResultModal() {
    if (!battleResult) return null;
    const r = battleResult;
    return (
      <div className="absolute inset-0 bg-black/80 flex items-center justify-center z-40 p-4" onClick={() => setBattleResult(null)}>
        <div className={`border-4 rounded-lg p-5 max-w-sm w-full shadow-2xl text-white ${r.won ? 'bg-gradient-to-b from-green-800 to-green-950 border-green-500' : 'bg-gradient-to-b from-red-900 to-red-950 border-red-500'}`} onClick={e => e.stopPropagation()}>
          <h3 className="text-2xl font-bold mb-2 text-center">
            {r.won ? '⚔️ Victory!' : '💀 Defeat!'}
          </h3>
          <p className="text-center text-sm mb-3">vs {r.monsterName}</p>

          {r.won && r.reward && (
            <div className="bg-black/30 rounded p-2 mb-3">
              <div className="text-sm font-bold mb-1">Loot:</div>
              <div className="grid grid-cols-2 gap-1 text-sm">
                <div>🌾 +{r.reward.food}</div>
                <div>🌲 +{r.reward.wood}</div>
                <div>⛏️ +{r.reward.stone || 0}</div>
                <div>💰 +{r.reward.gold}</div>
                <div className="col-span-2 text-yellow-300">⭐ Hero +{r.reward.xp} XP</div>
              </div>
            </div>
          )}

          <div className="bg-black/30 rounded p-2 mb-3 text-sm">
            <div className="font-bold mb-1">Casualties: {r.lostCount}</div>
            <div className="text-xs">
              Returning: ⚔️{r.survivingArmy.swordsmen || 0} 🏹{r.survivingArmy.archers || 0} 🐎{r.survivingArmy.cavalry || 0}
            </div>
          </div>

          <button onClick={() => setBattleResult(null)} className="w-full bg-white/20 hover:bg-white/30 text-white py-2 rounded font-bold">
            Continue
          </button>
        </div>
      </div>
    );
  }

  // ============ TROOP/HERO PANELS ============
  function TroopsPanel() {
    const [counts, setCounts] = useState({ swordsmen: 5, archers: 5, cavalry: 1 });
    return (
      <div className="absolute inset-x-0 bottom-16 mx-2 bg-gradient-to-b from-amber-100 to-amber-200 border-4 border-amber-800 rounded-lg p-3 z-20 shadow-2xl max-h-[60vh] overflow-y-auto">
        <div className="flex justify-between items-center mb-2">
          <h3 className="font-bold text-amber-950">Barracks (Lvl {buildings.barracks.level})</h3>
          <button onClick={() => setView('castle')} className="text-amber-900 hover:text-red-700"><X size={18} /></button>
        </div>

        {training && (
          <div className="bg-amber-800 text-white rounded p-2 text-xs mb-2">
            Training {training.count} {troopTypes[training.type].name}... ({Math.ceil((training.finishesAt - Date.now()) / 1000)}s)
          </div>
        )}

        <div className="text-xs text-amber-900 mb-2">Current army:</div>
        <div className="grid grid-cols-3 gap-2 mb-3 text-center text-sm">
          {Object.entries(troopTypes).map(([k, t]) => (
            <div key={k} className="bg-amber-50 border border-amber-400 rounded p-2">
              <div className="text-xl">{t.icon}</div>
              <div className="font-bold text-amber-950">{troops[k]}</div>
              <div className="text-xs text-amber-800">{t.name}</div>
            </div>
          ))}
        </div>

        <div className="text-xs text-amber-900 mb-2">Train new troops:</div>
        {Object.entries(troopTypes).map(([k, t]) => {
          const total = {};
          Object.entries(t.cost).forEach(([rk, rv]) => { total[rk] = rv * counts[k]; });
          return (
            <div key={k} className="bg-amber-50 border border-amber-400 rounded p-2 mb-2">
              <div className="flex items-center justify-between mb-1">
                <div className="text-sm font-bold text-amber-950">{t.icon} {t.name}</div>
                <div className="flex items-center gap-1">
                  <button onClick={() => setCounts(p => ({ ...p, [k]: Math.max(1, p[k] - 5) }))} className="bg-amber-700 text-white w-6 h-6 rounded text-xs">-5</button>
                  <button onClick={() => setCounts(p => ({ ...p, [k]: Math.max(1, p[k] - 1) }))} className="bg-amber-700 text-white w-6 h-6 rounded">-</button>
                  <span className="w-8 text-center text-sm">{counts[k]}</span>
                  <button onClick={() => setCounts(p => ({ ...p, [k]: p[k] + 1 }))} className="bg-amber-700 text-white w-6 h-6 rounded">+</button>
                  <button onClick={() => setCounts(p => ({ ...p, [k]: p[k] + 5 }))} className="bg-amber-700 text-white w-6 h-6 rounded text-xs">+5</button>
                </div>
              </div>
              <div className="flex justify-between text-xs text-amber-900 mb-1">
                <span>ATK {t.attack} · DEF {t.defense} · HP {t.hp}</span>
                <span>{t.time}s each</span>
              </div>
              <div className="flex justify-between items-center">
                <div className="flex gap-2 text-xs text-amber-900">
                  {Object.entries(total).map(([rk, rv]) => (
                    <span key={rk} className={resources[rk] >= rv ? 'text-green-700' : 'text-red-700'}>
                      {rk}: {rv}
                    </span>
                  ))}
                </div>
                <button
                  onClick={() => trainTroops(k, counts[k])}
                  disabled={!!training}
                  className="bg-green-700 hover:bg-green-600 disabled:bg-gray-400 text-white px-3 py-1 rounded text-xs font-bold"
                >
                  Train
                </button>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  function HeroPanel() {
    const xpNeeded = hero.level * 100;
    return (
      <div className="absolute inset-x-0 bottom-16 mx-2 bg-gradient-to-b from-purple-100 to-purple-200 border-4 border-purple-800 rounded-lg p-4 z-20 shadow-2xl">
        <div className="flex justify-between items-center mb-3">
          <h3 className="font-bold text-purple-950">Hero</h3>
          <button onClick={() => setView('castle')} className="text-purple-900 hover:text-red-700"><X size={18} /></button>
        </div>

        <div className="flex items-center gap-3 mb-3">
          <div className="bg-purple-700 text-white rounded-full w-16 h-16 flex items-center justify-center text-3xl border-4 border-yellow-400">
            🛡️
          </div>
          <div className="flex-1">
            <div className="text-lg font-bold text-purple-950">{hero.name}</div>
            <div className="text-sm text-purple-800">Level {hero.level}</div>
            <div className="w-full bg-purple-300 rounded-full h-2 mt-1">
              <div className="bg-yellow-500 h-2 rounded-full" style={{ width: `${(hero.xp / xpNeeded) * 100}%` }}></div>
            </div>
            <div className="text-xs text-purple-800 mt-0.5">{hero.xp} / {xpNeeded} XP</div>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-2 text-sm">
          <div className="bg-purple-50 border border-purple-400 rounded p-2">
            <div className="text-purple-900 text-xs">Attack</div>
            <div className="text-xl font-bold text-red-700">{hero.attack}</div>
          </div>
          <div className="bg-purple-50 border border-purple-400 rounded p-2">
            <div className="text-purple-900 text-xs">Defense</div>
            <div className="text-xl font-bold text-blue-700">{hero.defense}</div>
          </div>
        </div>

        <div className="mt-3 text-xs text-purple-800 italic">
          Your hero joins every march and adds power to your army. Defeat monsters to gain XP.
        </div>
      </div>
    );
  }

  // ============ MAIN RENDER ============
  return (
    <div className="w-full h-screen max-h-screen bg-gray-900 text-white flex flex-col overflow-hidden font-sans" style={{ fontFamily: 'system-ui, -apple-system, sans-serif' }}>
      {/* Top bar */}
      <div className="bg-gradient-to-b from-amber-950 to-amber-900 border-b-4 border-amber-700 p-2 flex items-center justify-between flex-wrap gap-2">
        <div className="text-sm font-bold text-yellow-300 flex items-center gap-2">
          <Crown size={18} /> Kingdom of Aetheria
        </div>
        <ResourceBar />
      </div>

      {/* Main game area */}
      <div className="relative flex-1 overflow-hidden">
        {view === 'castle' && <CastleView />}
        {view === 'world' && <WorldView />}
        {view === 'troops' && (
          <>
            <CastleView />
            <TroopsPanel />
          </>
        )}
        {view === 'hero' && (
          <>
            <CastleView />
            <HeroPanel />
          </>
        )}

        <BuildingModal />
        <MonsterModal />
        <BattleResultModal />

        {/* Active marches indicator */}
        {marches.length > 0 && view !== 'world' && (
          <div className="absolute top-2 right-2 bg-blue-900/90 border border-blue-500 rounded-lg p-2 text-xs">
            <div className="font-bold mb-1 flex items-center gap-1"><Sword size={12} /> Marching ({marches.length})</div>
            {marches.map(m => {
              const timeLeft = Math.max(0, (m.returnAt - Date.now()) / 1000);
              return <div key={m.id}>→ {m.monsterName} ({Math.ceil(timeLeft)}s)</div>;
            })}
          </div>
        )}

        {/* Notification */}
        {notification && (
          <div className={`absolute top-2 left-1/2 -translate-x-1/2 px-4 py-2 rounded-lg shadow-lg z-50 text-sm font-bold
            ${notification.type === 'success' ? 'bg-green-600' :
              notification.type === 'error' ? 'bg-red-600' :
              notification.type === 'levelup' ? 'bg-purple-600' : 'bg-blue-600'}`}>
            {notification.text}
          </div>
        )}
      </div>

      {/* Bottom nav */}
      <div className="bg-gradient-to-b from-amber-900 to-amber-950 border-t-4 border-amber-700 p-1 flex justify-around">
        <button onClick={() => setView('castle')} className={`flex flex-col items-center px-3 py-1 rounded ${view === 'castle' ? 'bg-amber-700' : 'hover:bg-amber-800'}`}>
          <Castle size={20} />
          <span className="text-[10px] mt-0.5">Castle</span>
        </button>
        <button onClick={() => setView('world')} className={`flex flex-col items-center px-3 py-1 rounded ${view === 'world' ? 'bg-amber-700' : 'hover:bg-amber-800'}`}>
          <Map size={20} />
          <span className="text-[10px] mt-0.5">World</span>
        </button>
        <button onClick={() => setView('troops')} className={`flex flex-col items-center px-3 py-1 rounded ${view === 'troops' ? 'bg-amber-700' : 'hover:bg-amber-800'}`}>
          <Sword size={20} />
          <span className="text-[10px] mt-0.5">Troops</span>
        </button>
        <button onClick={() => setView('hero')} className={`flex flex-col items-center px-3 py-1 rounded ${view === 'hero' ? 'bg-amber-700' : 'hover:bg-amber-800'}`}>
          <Users size={20} />
          <span className="text-[10px] mt-0.5">Hero</span>
        </button>
      </div>
    </div>
  );
};

export default TotalBattlePrototype;