import React, { useState, useEffect, useRef } from 'react';
import { 
  MousePointer2, 
  Move, 
  Plus, 
  Save, 
  Upload, 
  Play, 
  Square, 
  Type, 
  Trash2, 
  Settings, 
  Grid3X3, 
  LayoutGrid,
  X,
  Database,
  Sliders,
  ArrowRight,
  Zap,
  ShoppingCart,
  CheckSquare,
  Clock,
  Timer,
  Calculator,
  HelpCircle,
  Hash,
  Download
} from 'lucide-react';

// --- DECIMAL CLASS ---
class Decimal {
  constructor(value) {
    if (value instanceof Decimal) {
      this.m = value.m; 
      this.e = value.e; 
    } else if (typeof value === 'string') {
      if (value.indexOf('e') !== -1) {
        const parts = value.split('e');
        this.m = parseFloat(parts[0]);
        this.e = parseFloat(parts[1]);
      } else {
        this.m = parseFloat(value);
        this.e = 0;
      }
    } else if (typeof value === 'number') {
      this.m = value;
      this.e = 0;
    } else {
      this.m = 0;
      this.e = 0;
    }
    this.normalize();
  }

  normalize() {
    if (this.m === 0) { this.e = 0; return; }
    if (Math.abs(this.m) >= 10) {
      const adjust = Math.floor(Math.log10(Math.abs(this.m)));
      this.m /= Math.pow(10, adjust);
      this.e += adjust;
    } else if (Math.abs(this.m) < 1 && this.m !== 0) {
      const adjust = Math.floor(Math.log10(Math.abs(this.m)));
      this.m /= Math.pow(10, adjust);
      this.e += adjust;
    }
  }

  add(other) {
    other = new Decimal(other);
    if (this.e - other.e > 15) return new Decimal(this);
    if (other.e - this.e > 15) return new Decimal(other);
    const maxE = Math.max(this.e, other.e);
    const m1 = this.m * Math.pow(10, this.e - maxE);
    const m2 = other.m * Math.pow(10, other.e - maxE);
    const res = new Decimal(0);
    res.m = m1 + m2;
    res.e = maxE;
    res.normalize();
    return res;
  }

  sub(other) {
    other = new Decimal(other);
    const negOther = new Decimal(other);
    negOther.m = -negOther.m;
    return this.add(negOther);
  }

  mul(other) {
    other = new Decimal(other);
    const res = new Decimal(0);
    res.m = this.m * other.m;
    res.e = this.e + other.e;
    res.normalize();
    return res;
  }

  div(other) {
    other = new Decimal(other);
    const res = new Decimal(0);
    res.m = this.m / other.m;
    res.e = this.e - other.e;
    res.normalize();
    return res;
  }

  floor() {
    if (this.e < 15) return new Decimal(Math.floor(this.toNumber()));
    return new Decimal(this);
  }

  toNumber() { return this.m * Math.pow(10, this.e); }

  pow(power) {
    const scalar = parseFloat(power);
    const res = new Decimal(0);
    res.m = Math.pow(this.m, scalar);
    res.e = this.e * scalar;
    res.normalize();
    return res;
  }

  log10() { return this.e + Math.log10(this.m); }

  sqrt() {
    if (this.m < 0) return new Decimal(0);
    return this.pow(0.5);
  }

  gte(other) {
    other = new Decimal(other);
    if (this.m === 0 && other.m === 0) return true;
    if (this.m === 0) return false; 
    if (other.m === 0) return true;
    if (this.e > other.e) return true;
    if (this.e < other.e) return false;
    return this.m >= other.m;
  }
  
  gt(other) { return this.gte(other) && !this.equals(other); }
  equals(other) { other = new Decimal(other); return this.m === other.m && this.e === other.e; }

  toString() {
    if (this.e < 6 && this.e > -6) return (this.m * Math.pow(10, this.e)).toFixed(2).replace(/\.00$/, '');
    return `${this.m.toFixed(2)}e${this.e}`;
  }

  static format(val) {
    const num = new Decimal(val);
    if (num.e < 4) {
      const plain = num.m * Math.pow(10, num.e);
      return Math.abs(plain) < 0.01 && plain !== 0 ? plain.toExponential(2) : plain.toFixed(1).replace(/\.0$/, '');
    } else if (num.e < 100000) {
      return `${num.m.toFixed(2)}e${num.e}`;
    } else {
      return `${num.m.toFixed(2)}e${num.e.toExponential(2).replace('+', '')}`;
    }
  }
}

// --- FORMULA PARSER ---
const evaluateFormula = (formula, gameState, contextVars = {}) => {
  if (!formula) return new Decimal(0);
  const substituted = formula.replace(/{(\w+)}|(\bx\b)/g, (match, id, xVar) => {
    if (xVar) return (contextVars.x !== undefined ? contextVars.x : 0).toString();
    const val = gameState[id] || new Decimal(0);
    return val.toString(); 
  });

  const tokens = substituted.match(/(\d+(\.\d+)?(e[+-]?\d+)?)|[\+\-\*\/\^\(\)]|sqrt|log|floor/g);
  if (!tokens) return new Decimal(0);

  const outputQueue = [];
  const operatorStack = [];
  const precedence = { '+': 1, '-': 1, '*': 2, '/': 2, '^': 3, 'sqrt': 4, 'log': 4, 'floor': 4 };

  tokens.forEach(token => {
    if (!isNaN(parseFloat(token)) && isFinite(token.split('e')[1] || 0)) {
      outputQueue.push(new Decimal(token));
    } else if (token in precedence) {
      while (operatorStack.length > 0 && operatorStack[operatorStack.length - 1] !== '(' && precedence[operatorStack[operatorStack.length - 1]] >= precedence[token]) {
        outputQueue.push(operatorStack.pop());
      }
      operatorStack.push(token);
    } else if (token === '(') {
      operatorStack.push(token);
    } else if (token === ')') {
      while (operatorStack.length > 0 && operatorStack[operatorStack.length - 1] !== '(') {
        outputQueue.push(operatorStack.pop());
      }
      operatorStack.pop();
    }
  });
  while (operatorStack.length > 0) outputQueue.push(operatorStack.pop());

  const evalStack = [];
  outputQueue.forEach(token => {
    if (token instanceof Decimal) {
      evalStack.push(token);
    } else {
      if (token === 'sqrt' || token === 'log' || token === 'floor') {
        const a = evalStack.pop();
        if (!a) return;
        if (token === 'sqrt') evalStack.push(a.sqrt());
        if (token === 'log') evalStack.push(new Decimal(a.log10()));
        if (token === 'floor') evalStack.push(a.floor());
      } else {
        const b = evalStack.pop();
        const a = evalStack.pop();
        if (!a || !b) return;
        if (token === '+') evalStack.push(a.add(b));
        if (token === '-') evalStack.push(a.sub(b));
        if (token === '*') evalStack.push(a.mul(b));
        if (token === '/') evalStack.push(a.div(b));
        if (token === '^') evalStack.push(a.pow(b.toNumber()));
      }
    }
  });
  return evalStack[0] || new Decimal(0);
};

// --- CONSTANTS ---
const ELEMENT_TYPES = { BUTTON: 'button', LABEL: 'label', PANEL: 'panel' };
const OPERATIONS = { ADD: 'add', SUBTRACT: 'subtract', MULTIPLY: 'multiply', POWER: 'exponent' };
const INTERACTION_TYPES = { GAIN_MULTIPLIER: 'gain_mult' };
const TICKER_SOURCE_TYPES = { FIXED: 'fixed', RESOURCE: 'resource' };
const snapToGrid = (value, gridSize) => Math.round(value / gridSize) * gridSize;

// --- MAIN COMPONENT ---
export default function IncrementalGameBuilder() {
  const [mode, setMode] = useState('edit');
  const [gridSize, setGridSize] = useState(20);
  const [showGrid, setShowGrid] = useState(true);
  const [selectedId, setSelectedId] = useState(null);
  const [activeTab, setActiveTab] = useState('properties');
  const [showMathHelp, setShowMathHelp] = useState(false);
  
  const [resources, setResources] = useState([
    { id: 'gold', name: 'Gold', initial: '0' },
    { id: 'wood', name: 'Wood', initial: '0' },
    { id: 'miners', name: 'Miners', initial: '0' },
  ]);

  const [interactions, setInteractions] = useState([]);
  const [tickers, setTickers] = useState([]);
  const [gameSettings, setGameSettings] = useState({ enableBuyAmount: false });

  const [elements, setElements] = useState([
    { id: 'lbl1', type: ELEMENT_TYPES.LABEL, x: 20, y: 20, w: 200, h: 40, text: 'Gold: {gold}', bgColor: 'transparent', textColor: '#ffffff', fontSize: 24 },
    { id: 'btn1', type: ELEMENT_TYPES.BUTTON, x: 20, y: 80, w: 140, h: 60, text: 'Mine Gold\nCost: {cost}', bgColor: '#3b82f6', textColor: '#ffffff', effects: [{ resourceId: 'gold', op: OPERATIONS.ADD, value: '1' }], costs: [], isShopButton: false, initialX: '0' }
  ]);

  const [gameState, setGameState] = useState({}); 
  const [buyAmount, setBuyAmount] = useState(1);
  
  const dragRef = useRef(null);
  const resizeRef = useRef(null);
  const canvasRef = useRef(null);
  const lastTimeRef = useRef(Date.now());
  const requestRef = useRef();
  const tickersRef = useRef(tickers);
  const interactionsRef = useRef(interactions);

  useEffect(() => { tickersRef.current = tickers; }, [tickers]);
  useEffect(() => { interactionsRef.current = interactions; }, [interactions]);

  useEffect(() => {
    if (mode === 'play') {
      const initialstate = {};
      resources.forEach(r => initialstate[r.id] = new Decimal(r.initial));
      elements.forEach(el => initialstate[`${el.id}_count`] = new Decimal(0));
      setGameState(initialstate);
      setSelectedId(null);
      setBuyAmount(1);
      lastTimeRef.current = Date.now();
      
      const loop = () => {
        const now = Date.now();
        const dt = Math.min((now - lastTimeRef.current) / 1000, 1.0);
        lastTimeRef.current = now;
        if (dt > 0) {
          setGameState(prevState => {
            const newState = {};
            Object.keys(prevState).forEach(k => newState[k] = new Decimal(prevState[k]));
            tickersRef.current.forEach(ticker => {
               if (!ticker.targetId) return;
               let baseAmount = new Decimal(0);
               if (ticker.sourceType === TICKER_SOURCE_TYPES.FIXED) baseAmount = new Decimal(ticker.value || 0);
               else if (ticker.sourceType === TICKER_SOURCE_TYPES.RESOURCE && ticker.sourceId) baseAmount = newState[ticker.sourceId] || new Decimal(0);
               
               let totalAmount = baseAmount.mul(new Decimal(ticker.multiplier || 1));
               let bonusMultiplier = new Decimal(0);
               interactionsRef.current.forEach(rule => {
                  if (rule.targetId === ticker.targetId && rule.type === INTERACTION_TYPES.GAIN_MULTIPLIER) {
                     const sourceAmount = newState[rule.sourceId] || new Decimal(0);
                     bonusMultiplier = bonusMultiplier.add(sourceAmount.mul(new Decimal(rule.value)));
                  }
               });
               totalAmount = totalAmount.mul(new Decimal(1).add(bonusMultiplier));
               const interval = Math.max(parseFloat(ticker.interval) || 1000, 10);
               const ratePerSec = totalAmount.mul(new Decimal(1000).div(new Decimal(interval)));
               const gain = ratePerSec.mul(new Decimal(dt));
               newState[ticker.targetId] = (newState[ticker.targetId] || new Decimal(0)).add(gain);
            });
            return newState;
          });
        }
        requestRef.current = requestAnimationFrame(loop);
      };
      requestRef.current = requestAnimationFrame(loop);
    } else {
      if (requestRef.current) cancelAnimationFrame(requestRef.current);
    }
    return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); };
  }, [mode, resources]);

  const handleExportHTML = () => {
    const gameData = { resources, elements, gridSize, interactions, tickers, gameSettings };
    
    // Use raw code strings to ensure variables are defined in the exported scope
    const decimalClassCode = `
      class Decimal {
        constructor(value) {
          if (value instanceof Decimal) { this.m = value.m; this.e = value.e; }
          else if (typeof value === 'string') {
            if (value.indexOf('e') !== -1) { const p = value.split('e'); this.m = parseFloat(p[0]); this.e = parseFloat(p[1]); }
            else { this.m = parseFloat(value); this.e = 0; }
          } else if (typeof value === 'number') { this.m = value; this.e = 0; }
          else { this.m = 0; this.e = 0; }
          this.normalize();
        }
        normalize() {
          if (this.m === 0) { this.e = 0; return; }
          if (Math.abs(this.m) >= 10) { const adj = Math.floor(Math.log10(Math.abs(this.m))); this.m /= Math.pow(10, adj); this.e += adj; }
          else if (Math.abs(this.m) < 1 && this.m !== 0) { const adj = Math.floor(Math.log10(Math.abs(this.m))); this.m /= Math.pow(10, adj); this.e += adj; }
        }
        add(o) { o = new Decimal(o); if(this.e - o.e > 15) return new Decimal(this); if(o.e - this.e > 15) return new Decimal(o); const max = Math.max(this.e, o.e); const m1 = this.m * Math.pow(10, this.e-max); const m2 = o.m * Math.pow(10, o.e-max); const r = new Decimal(0); r.m = m1+m2; r.e = max; r.normalize(); return r; }
        sub(o) { o = new Decimal(o); const n = new Decimal(o); n.m = -n.m; return this.add(n); }
        mul(o) { o = new Decimal(o); const r = new Decimal(0); r.m = this.m * o.m; r.e = this.e + o.e; r.normalize(); return r; }
        div(o) { o = new Decimal(o); const r = new Decimal(0); r.m = this.m / o.m; r.e = this.e - o.e; r.normalize(); return r; }
        floor() { if(this.e < 15) return new Decimal(Math.floor(this.toNumber())); return new Decimal(this); }
        toNumber() { return this.m * Math.pow(10, this.e); }
        pow(p) { const s = parseFloat(p); const r = new Decimal(0); r.m = Math.pow(this.m, s); r.e = this.e * s; r.normalize(); return r; }
        log10() { return this.e + Math.log10(this.m); }
        sqrt() { if(this.m < 0) return new Decimal(0); return this.pow(0.5); }
        gte(o) { o = new Decimal(o); if(this.m===0 && o.m===0) return true; if(this.m===0) return false; if(o.m===0) return true; if(this.e > o.e) return true; if(this.e < o.e) return false; return this.m >= o.m; }
        gt(o) { return this.gte(o) && !this.equals(o); }
        equals(o) { o = new Decimal(o); return this.m === o.m && this.e === o.e; }
        toString() { if(this.e < 6 && this.e > -6) return (this.m * Math.pow(10, this.e)).toFixed(2).replace(/\\.00$/, ''); return \`\${this.m.toFixed(2)}e\${this.e}\`; }
        static format(val) {
          const n = new Decimal(val);
          if (n.e < 4) { const p = n.m * Math.pow(10, n.e); return Math.abs(p) < 0.01 && p !== 0 ? p.toExponential(2) : p.toFixed(1).replace(/\\.0$/, ''); }
          else if (n.e < 100000) { return \`\${n.m.toFixed(2)}e\${n.e}\`; }
          else { return \`\${n.m.toFixed(2)}e\${n.e.toExponential(2).replace('+', '')}\`; }
        }
      }
    `;

    const evalFormulaCode = `
      const evaluateFormula = (formula, gameState, contextVars = {}) => {
        if (!formula) return new Decimal(0);
        const substituted = formula.replace(/{(\\w+)}|(\\bx\\b)/g, (match, id, xVar) => {
          if (xVar) return (contextVars.x !== undefined ? contextVars.x : 0).toString();
          const val = gameState[id] || new Decimal(0);
          return val.toString(); 
        });
        const tokens = substituted.match(/(\\d+(\\.\\d+)?(e[+-]?\\d+)?)|[\\+\\-\\*\\/\\^\\(\\)]|sqrt|log|floor/g);
        if (!tokens) return new Decimal(0);
        const outputQueue = []; const operatorStack = []; const precedence = { '+': 1, '-': 1, '*': 2, '/': 2, '^': 3, 'sqrt': 4, 'log': 4, 'floor': 4 };
        tokens.forEach(token => {
          if (!isNaN(parseFloat(token)) && isFinite(token.split('e')[1] || 0)) { outputQueue.push(new Decimal(token)); }
          else if (token in precedence) { while (operatorStack.length > 0 && operatorStack[operatorStack.length - 1] !== '(' && precedence[operatorStack[operatorStack.length - 1]] >= precedence[token]) { outputQueue.push(operatorStack.pop()); } operatorStack.push(token); }
          else if (token === '(') { operatorStack.push(token); }
          else if (token === ')') { while (operatorStack.length > 0 && operatorStack[operatorStack.length - 1] !== '(') { outputQueue.push(operatorStack.pop()); } operatorStack.pop(); }
        });
        while (operatorStack.length > 0) outputQueue.push(operatorStack.pop());
        const evalStack = [];
        outputQueue.forEach(token => {
          if (token instanceof Decimal) { evalStack.push(token); }
          else {
            if (token === 'sqrt' || token === 'log' || token === 'floor') { const a = evalStack.pop(); if (!a) return; if (token === 'sqrt') evalStack.push(a.sqrt()); if (token === 'log') evalStack.push(new Decimal(a.log10())); if (token === 'floor') evalStack.push(a.floor()); }
            else { const b = evalStack.pop(); const a = evalStack.pop(); if (!a || !b) return; if (token === '+') evalStack.push(a.add(b)); if (token === '-') evalStack.push(a.sub(b)); if (token === '*') evalStack.push(a.mul(b)); if (token === '/') evalStack.push(a.div(b)); if (token === '^') evalStack.push(a.pow(b.toNumber())); }
          }
        });
        return evalStack[0] || new Decimal(0);
      };
    `;

    const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Incremental Game</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>body { margin: 0; overflow: hidden; background-color: #020617; color: white; font-family: sans-serif; }</style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
      const { useState, useEffect, useRef } = React;
      const gameData = ${JSON.stringify(gameData)};
      
      ${decimalClassCode}
      ${evalFormulaCode}

      const ELEMENT_TYPES = { BUTTON: 'button', LABEL: 'label', PANEL: 'panel' };
      const OPERATIONS = { ADD: 'add', SUBTRACT: 'subtract', MULTIPLY: 'multiply', POWER: 'exponent' };
      const INTERACTION_TYPES = { GAIN_MULTIPLIER: 'gain_mult' };
      const TICKER_SOURCE_TYPES = { FIXED: 'fixed', RESOURCE: 'resource' };

      const GamePlayer = () => {
        const [gameState, setGameState] = useState({});
        const [buyAmount, setBuyAmount] = useState(1);
        const lastTimeRef = useRef(Date.now());
        const requestRef = useRef();
        const tickersRef = useRef(gameData.tickers);
        const interactionsRef = useRef(gameData.interactions);

        useEffect(() => {
          const initial = {};
          gameData.resources.forEach(r => initial[r.id] = new Decimal(r.initial));
          gameData.elements.forEach(el => initial[el.id + '_count'] = new Decimal(0));
          setGameState(initial);

          const loop = () => {
            const now = Date.now();
            const dt = Math.min((now - lastTimeRef.current) / 1000, 1.0);
            lastTimeRef.current = now;
            if (dt > 0) {
              setGameState(prev => {
                const next = {};
                Object.keys(prev).forEach(k => next[k] = new Decimal(prev[k]));
                tickersRef.current.forEach(ticker => {
                   if (!ticker.targetId) return;
                   let base = new Decimal(0);
                   if (ticker.sourceType === TICKER_SOURCE_TYPES.FIXED) base = new Decimal(ticker.value || 0);
                   else if (ticker.sourceType === TICKER_SOURCE_TYPES.RESOURCE && ticker.sourceId) base = next[ticker.sourceId] || new Decimal(0);
                   let total = base.mul(new Decimal(ticker.multiplier || 1));
                   let bonus = new Decimal(0);
                   interactionsRef.current.forEach(rule => { if (rule.targetId === ticker.targetId && rule.type === INTERACTION_TYPES.GAIN_MULTIPLIER) { const src = next[rule.sourceId] || new Decimal(0); bonus = bonus.add(src.mul(new Decimal(rule.value))); }});
                   total = total.mul(new Decimal(1).add(bonus));
                   const interval = Math.max(parseFloat(ticker.interval) || 1000, 10);
                   const rate = total.mul(new Decimal(1000).div(new Decimal(interval)));
                   next[ticker.targetId] = (next[ticker.targetId] || new Decimal(0)).add(rate.mul(new Decimal(dt)));
                });
                return next;
              });
            }
            requestRef.current = requestAnimationFrame(loop);
          };
          requestRef.current = requestAnimationFrame(loop);
          return () => cancelAnimationFrame(requestRef.current);
        }, []);

        const handleClick = (el) => {
           if (el.type !== ELEMENT_TYPES.BUTTON) return;
           const temp = {};
           Object.keys(gameState).forEach(k => temp[k] = new Decimal(gameState[k]));
           const currentCount = temp[el.id + '_count'] || new Decimal(0);
           let x = (new Decimal(el.initialX || 0)).add(currentCount);
           let bought = new Decimal(0);
           let max = 1;
           if (el.isShopButton && gameData.gameSettings.enableBuyAmount) { if (buyAmount === 'max') max = 1000; else max = buyAmount; }

           for(let i=0; i<max; i++) {
              const afford = el.costs.every(c => { const curr = temp[c.resourceId] || new Decimal(0); const cost = evaluateFormula(c.value, temp, {x}); return curr.gte(cost); });
              if (!afford) break;
              el.costs.forEach(c => { const cost = evaluateFormula(c.value, temp, {x}); temp[c.resourceId] = temp[c.resourceId].sub(cost); });
              bought = bought.add(1);
              x = x.add(1);
              temp[el.id + '_count'] = (temp[el.id + '_count'] || new Decimal(0)).add(1);
           }

           if (bought.equals(0)) return;
           el.effects.forEach(eff => {
              const curr = temp[eff.resourceId] || new Decimal(0);
              let base = new Decimal(eff.value);
              if (eff.op === OPERATIONS.ADD) { let bonus = new Decimal(0); interactionsRef.current.forEach(rule => { if (rule.targetId === eff.resourceId && rule.type === INTERACTION_TYPES.GAIN_MULTIPLIER) { const src = temp[rule.sourceId] || new Decimal(0); bonus = bonus.add(src.mul(new Decimal(rule.value))); }}); base = base.mul(new Decimal(1).add(bonus)); }
              let final = base;
              if (eff.op === OPERATIONS.ADD || eff.op === OPERATIONS.SUBTRACT) final = base.mul(bought);
              else if (eff.op === OPERATIONS.MULTIPLY) final = base.pow(bought.toNumber());
              if (eff.op === OPERATIONS.ADD) temp[eff.resourceId] = curr.add(final);
              else if (eff.op === OPERATIONS.SUBTRACT) temp[eff.resourceId] = curr.sub(final);
              else if (eff.op === OPERATIONS.MULTIPLY) temp[eff.resourceId] = curr.mul(final);
              else if (eff.op === OPERATIONS.POWER) temp[eff.resourceId] = curr.pow(final.m);
           });
           setGameState(temp);
        };

        const parseText = (text, el) => {
           return text.replace(/{([^}]+)}/g, (match, key) => {
              if (key === 'cost' && el && el.costs) {
                 const count = gameState[el.id + '_count'] || new Decimal(0);
                 const x = (new Decimal(el.initialX || 0)).add(count);
                 const costs = el.costs.map(c => { const val = evaluateFormula(c.value, gameState, {x}); const res = gameData.resources.find(r => r.id === c.resourceId); return \`\${Decimal.format(val)} \${res ? res.name : c.resourceId}\`; });
                 return costs.length ? costs.join(', ') : 'Free';
              }
              const val = gameState[key];
              return val ? Decimal.format(val) : match;
           });
        };

        return (
          <div className="w-screen h-screen bg-slate-950 relative overflow-hidden select-none">
             {gameData.gameSettings.enableBuyAmount && (
               <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-slate-900/90 backdrop-blur border border-slate-700 rounded-lg shadow-xl p-1 flex gap-1 z-50">
                  {[1, 10, 'max'].map(amt => ( <button key={amt} onClick={() => setBuyAmount(amt)} className={\`px-3 py-1 rounded text-xs font-bold transition-colors \${buyAmount === amt ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800'}\`}>{typeof amt === 'string' ? amt.toUpperCase() : amt + 'x'}</button> ))}
               </div>
             )}
             {gameData.elements.map(el => {
                let opacity = 1;
                if (el.type === ELEMENT_TYPES.BUTTON) {
                   let mult = new Decimal(1);
                   if (el.isShopButton && gameData.gameSettings.enableBuyAmount && buyAmount === 10) mult = new Decimal(10);
                   const afford = el.costs.every(c => { const curr = gameState[c.resourceId] || new Decimal(0); const count = gameState[el.id + '_count'] || new Decimal(0); const x = (new Decimal(el.initialX || 0)).add(count); const cost = evaluateFormula(c.value, gameState, {x}); return curr.gte(cost.mul(mult)); });
                   if (!afford) opacity = 0.5;
                }
                return ( <div key={el.id} style={{ position: 'absolute', left: el.x, top: el.y, width: el.w, height: el.h, backgroundColor: el.bgColor, color: el.textColor, fontSize: el.fontSize + 'px', opacity }} className="flex items-center justify-center rounded shadow-sm cursor-pointer hover:brightness-110 active:scale-95 transition-transform" onClick={(e) => { e.stopPropagation(); handleClick(el); }}> <span className="pointer-events-none px-2 text-center w-full truncate whitespace-pre-wrap">{parseText(el.text, el)}</span> </div> );
             })}
          </div>
        );
      };

      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<GamePlayer />);
    </script>
</body>
</html>
    `;
    const blob = new Blob([htmlContent], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'my-game.html';
    link.click();
  };

  const handleSave = () => {
    const data = { resources, elements, gridSize, interactions, gameSettings, tickers };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'my-incremental-game.json';
    link.click();
  };

  const handleLoad = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const data = JSON.parse(event.target.result);
        if (data.resources) setResources(data.resources);
        if (data.elements) setElements(data.elements);
        if (data.gridSize) setGridSize(data.gridSize);
        if (data.interactions) setInteractions(data.interactions);
        if (data.gameSettings) setGameSettings(data.gameSettings);
        if (data.tickers) setTickers(data.tickers);
      } catch (err) {
        alert("Invalid JSON file");
      }
    };
    reader.readAsText(file);
  };

  const addElement = (type) => {
    const id = Date.now().toString();
    const newEl = { id, type, x: 100, y: 100, w: type === ELEMENT_TYPES.LABEL ? 200 : 120, h: 60, text: type === ELEMENT_TYPES.LABEL ? 'Text' : 'Button', bgColor: type === ELEMENT_TYPES.BUTTON ? '#3b82f6' : 'transparent', textColor: '#ffffff', fontSize: 16, effects: [], costs: [], isShopButton: false, initialX: '0' };
    setElements([...elements, newEl]);
    setSelectedId(id);
    setActiveTab('properties');
  };

  const removeElement = (id) => {
    setElements(elements.filter(e => e.id !== id));
    if (selectedId === id) setSelectedId(null);
  };

  const handleMouseDown = (e, id, action) => {
    if (mode === 'play') return;
    e.stopPropagation();
    const el = elements.find(e => e.id === id);
    setSelectedId(id);
    setActiveTab('properties');
    const startX = e.clientX; const startY = e.clientY; const startLeft = el.x; const startTop = el.y; const startW = el.w; const startH = el.h;
    const handleMouseMove = (moveEvent) => {
      const deltaX = moveEvent.clientX - startX; const deltaY = moveEvent.clientY - startY;
      setElements(prev => prev.map(item => {
        if (item.id !== id) return item;
        if (action === 'move') { let newX = startLeft + deltaX; let newY = startTop + deltaY; if (showGrid) { newX = snapToGrid(newX, gridSize); newY = snapToGrid(newY, gridSize); } return { ...item, x: newX, y: newY }; }
        else if (action === 'resize') { let newW = Math.max(20, startW + deltaX); let newH = Math.max(20, startH + deltaY); if (showGrid) { newW = snapToGrid(newW, gridSize); newH = snapToGrid(newH, gridSize); } return { ...item, w: newW, h: newH }; }
        return item;
      }));
    };
    const handleMouseUp = () => { window.removeEventListener('mousemove', handleMouseMove); window.removeEventListener('mouseup', handleMouseUp); };
    window.addEventListener('mousemove', handleMouseMove); window.addEventListener('mouseup', handleMouseUp);
  };

  const handleGameClick = (element) => {
    if (mode !== 'play' || element.type !== ELEMENT_TYPES.BUTTON) return;
    const tempState = {};
    Object.keys(gameState).forEach(k => tempState[k] = new Decimal(gameState[k]));
    const currentCount = tempState[`${element.id}_count`] || new Decimal(0);
    let x = (new Decimal(element.initialX || 0)).add(currentCount);
    let actualAmountBought = new Decimal(0);
    let maxLoops = 1;
    if (element.isShopButton && gameSettings.enableBuyAmount) { if (buyAmount === 'max') maxLoops = 1000; else maxLoops = buyAmount; }
    for(let i = 0; i < maxLoops; i++) {
        const canAffordSingle = element.costs.every(cost => { const currentVal = tempState[cost.resourceId] || new Decimal(0); const costVal = evaluateFormula(cost.value, tempState, { x }); return currentVal.gte(costVal); });
        if (!canAffordSingle) break;
        element.costs.forEach(cost => { const costVal = evaluateFormula(cost.value, tempState, { x }); tempState[cost.resourceId] = tempState[cost.resourceId].sub(costVal); });
        actualAmountBought = actualAmountBought.add(1); x = x.add(1); tempState[`${element.id}_count`] = (tempState[`${element.id}_count`] || new Decimal(0)).add(1);
    }
    if (actualAmountBought.equals(0)) return;
    element.effects.forEach(eff => {
      const current = tempState[eff.resourceId] || new Decimal(0);
      let baseVal = new Decimal(eff.value);
      if (eff.op === OPERATIONS.ADD) { let bonusMultiplier = new Decimal(0); interactionsRef.current.forEach(rule => { if (rule.targetId === eff.resourceId && rule.type === INTERACTION_TYPES.GAIN_MULTIPLIER) { const sourceAmount = tempState[rule.sourceId] || new Decimal(0); bonusMultiplier = bonusMultiplier.add(sourceAmount.mul(new Decimal(rule.value))); }}); baseVal = baseVal.mul(new Decimal(1).add(bonusMultiplier)); }
      let finalVal = baseVal;
      if (eff.op === OPERATIONS.ADD || eff.op === OPERATIONS.SUBTRACT) finalVal = baseVal.mul(actualAmountBought);
      else if (eff.op === OPERATIONS.MULTIPLY) finalVal = baseVal.pow(actualAmountBought.toNumber());
      if (eff.op === OPERATIONS.ADD) tempState[eff.resourceId] = current.add(finalVal);
      else if (eff.op === OPERATIONS.SUBTRACT) tempState[eff.resourceId] = current.sub(finalVal);
      else if (eff.op === OPERATIONS.MULTIPLY) tempState[eff.resourceId] = current.mul(finalVal);
      else if (eff.op === OPERATIONS.POWER) tempState[eff.resourceId] = current.pow(finalVal.m);
    });
    setGameState(tempState);
  };

  const parseLabelText = (text, element) => {
    if (mode !== 'play') return text;
    return text.replace(/{([^}]+)}/g, (match, keyword) => {
      if (keyword === 'cost' && element && element.costs) {
        const currentCount = gameState[`${element.id}_count`] || new Decimal(0);
        const x = (new Decimal(element.initialX || 0)).add(currentCount);
        const costStrings = element.costs.map(c => { const val = evaluateFormula(c.value, gameState, { x }); const res = resources.find(r => r.id === c.resourceId); return `${Decimal.format(val)} ${res ? res.name : c.resourceId}`; });
        return costStrings.length > 0 ? costStrings.join(', ') : 'Free';
      }
      const val = gameState[keyword];
      return val ? Decimal.format(val) : match;
    });
  };

  // --- Render Sub-Components ---
  const renderSidebar = () => {
    const selected = elements.find(e => e.id === selectedId);

    return (
      <div className="w-80 bg-slate-900 border-l border-slate-700 flex flex-col h-full text-sm text-slate-300 shadow-2xl z-20">
        <div className="flex border-b border-slate-700">
          <button onClick={() => setActiveTab('properties')} className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors ${activeTab === 'properties' ? 'bg-slate-800 text-blue-400 border-b-2 border-blue-400' : 'hover:bg-slate-800'}`}>Element</button>
          <button onClick={() => setActiveTab('resources')} className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors ${activeTab === 'resources' ? 'bg-slate-800 text-green-400 border-b-2 border-green-400' : 'hover:bg-slate-800'}`}>Resources</button>
          <button onClick={() => setActiveTab('automation')} className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors ${activeTab === 'automation' ? 'bg-slate-800 text-cyan-400 border-b-2 border-cyan-400' : 'hover:bg-slate-800'}`}>Auto</button>
          <button onClick={() => setActiveTab('settings')} className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors ${activeTab === 'settings' ? 'bg-slate-800 text-orange-400 border-b-2 border-orange-400' : 'hover:bg-slate-800'}`}>Config</button>
        </div>

        <div className="flex-1 overflow-y-auto">
          {activeTab === 'properties' && (
            <>
              {!selected ? (
                <div className="p-8 text-center flex flex-col items-center text-slate-500">
                  <MousePointer2 size={48} className="mb-4 opacity-20" />
                  <p>Select an element on the canvas to edit its properties.</p>
                </div>
              ) : (
                <div className="p-4 space-y-4">
                  <div className="flex justify-between items-center border-b border-slate-700 pb-2">
                     <span className="font-bold text-white">Editing: {selected.type}</span>
                     <button onClick={() => removeElement(selected.id)} className="text-red-400 hover:text-red-300 p-1 hover:bg-red-900/20 rounded"><Trash2 size={16} /></button>
                  </div>
                  <div>
                    <label className="block mb-1 text-xs font-bold text-slate-400 uppercase">Text</label>
                    <textarea rows={2} className="w-full bg-slate-800 border border-slate-600 rounded px-2 py-1 resize-none" value={selected.text} onChange={(e) => setElements(elements.map(el => el.id === selected.id ? { ...el, text: e.target.value } : el))}/>
                  </div>
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <label className="block mb-1 text-xs font-bold text-slate-400 uppercase">Bg Color</label>
                      <div className="flex items-center bg-slate-800 rounded border border-slate-600 p-1"><input type="color" className="w-6 h-6 rounded cursor-pointer border-none bg-transparent p-0" value={selected.bgColor} onChange={(e) => setElements(elements.map(el => el.id === selected.id ? { ...el, bgColor: e.target.value } : el))}/></div>
                    </div>
                    <div>
                      <label className="block mb-1 text-xs font-bold text-slate-400 uppercase">Text Color</label>
                      <div className="flex items-center bg-slate-800 rounded border border-slate-600 p-1"><input type="color" className="w-6 h-6 rounded cursor-pointer border-none bg-transparent p-0" value={selected.textColor} onChange={(e) => setElements(elements.map(el => el.id === selected.id ? { ...el, textColor: e.target.value } : el))}/></div>
                    </div>
                  </div>
                  <div>
                    <label className="block mb-1 text-xs font-bold text-slate-400 uppercase">Font Size</label>
                    <div className="flex items-center gap-2"><input type="range" min="8" max="72" className="flex-1" value={selected.fontSize} onChange={(e) => setElements(elements.map(el => el.id === selected.id ? { ...el, fontSize: parseInt(e.target.value) } : el))}/><span className="w-8 text-right">{selected.fontSize}</span></div>
                  </div>

                  {selected.type === ELEMENT_TYPES.BUTTON && (
                    <>
                      <div className="border-t border-slate-700 pt-4 mt-4">
                        <div className="mb-4 p-2 bg-slate-800/50 rounded border border-slate-700/50 space-y-2">
                          <label className="flex items-center gap-2 cursor-pointer select-none">
                             <input type="checkbox" className="w-4 h-4 rounded border-slate-600 bg-slate-700 text-blue-600" checked={selected.isShopButton || false} onChange={(e) => setElements(elements.map(el => el.id === selected.id ? { ...el, isShopButton: e.target.checked } : el))}/>
                             <span className="text-xs font-bold text-slate-300 flex items-center gap-2"><ShoppingCart size={14} className={selected.isShopButton ? "text-orange-400" : "text-slate-500"} />Treat as Shop Item</span>
                          </label>
                          <div className="flex items-center gap-2 pt-1 border-t border-slate-700/50">
                             <span className="text-[10px] font-bold text-slate-400 flex items-center gap-1"><Hash size={10}/> Initial X:</span>
                             <input type="number" className="w-16 bg-slate-900 border border-slate-600 rounded px-1 py-0.5 text-xs text-white" placeholder="0" value={selected.initialX} onChange={(e) => setElements(elements.map(el => el.id === selected.id ? { ...el, initialX: e.target.value } : el))}/>
                             <p className="text-[10px] text-slate-500 italic flex-1">Starting 'count' for scaling.</p>
                          </div>
                        </div>
                        <div className="flex justify-between items-center mb-3">
                          <label className="font-bold text-slate-100 flex items-center gap-2"><Zap size={14} className="text-yellow-400"/> Costs</label>
                          <button className="text-[10px] bg-slate-700 px-2 py-1 rounded hover:bg-slate-600 uppercase font-bold tracking-wider" onClick={() => {
                              const newCost = { resourceId: resources[0]?.id, value: '10' };
                              setElements(elements.map(el => el.id === selected.id ? { ...el, costs: [...el.costs, newCost] } : el));
                            }}>+ Add</button>
                        </div>
                        {selected.costs.length > 0 && (
                           <div className="mb-2">
                             <button onClick={() => setShowMathHelp(!showMathHelp)} className="text-[10px] text-blue-400 flex items-center gap-1 hover:underline"><HelpCircle size={10} /> Math Help & Syntax</button>
                             {showMathHelp && (
                               <div className="mt-1 p-2 bg-slate-800 border border-blue-500/30 rounded text-[10px] text-slate-300">
                                 <p className="font-bold mb-1 text-blue-300">Scaling Formulas:</p>
                                 <ul className="space-y-1 list-disc list-inside">
                                   <li><code>x</code> = (Initial X + Times Bought)</li>
                                   <li>Example: <code>10 * 1.1 ^ x</code></li>
                                   <li><code>sqrt(x)</code>, <code>log(x)</code>, <code>floor(x)</code></li>
                                   <li>Use <code>{`{miners}`}</code> for other resource values.</li>
                                   <li>Use <code>{`{cost}`}</code> in text to show price.</li>
                                 </ul>
                               </div>
                             )}
                           </div>
                        )}
                        {selected.costs.map((cost, idx) => (
                          <div key={idx} className="flex gap-2 mb-2 items-center bg-slate-800 p-2 rounded border border-slate-700">
                            <div className="flex-1 flex flex-col gap-1">
                              <div className="flex items-center gap-1">
                                <input type="text" className="flex-1 bg-slate-900 rounded px-1 py-0.5 border border-slate-700 font-mono text-xs text-yellow-200" placeholder="10 * 1.1^x" value={cost.value} onChange={(e) => {
                                    const newCosts = [...selected.costs]; newCosts[idx].value = e.target.value; setElements(elements.map(el => el.id === selected.id ? { ...el, costs: newCosts } : el));
                                  }}/>
                                <Calculator size={12} className="text-slate-500" />
                              </div>
                            </div>
                            <select className="w-20 bg-slate-900 rounded px-1 py-0.5 border border-slate-700" value={cost.resourceId} onChange={(e) => {
                                const newCosts = [...selected.costs]; newCosts[idx].resourceId = e.target.value; setElements(elements.map(el => el.id === selected.id ? { ...el, costs: newCosts } : el));
                              }}>{resources.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}</select>
                            <button onClick={() => { const newCosts = selected.costs.filter((_, i) => i !== idx); setElements(elements.map(el => el.id === selected.id ? { ...el, costs: newCosts } : el)); }} className="text-slate-500 hover:text-red-400"><X size={14}/></button>
                          </div>
                        ))}
                      </div>
                      <div className="border-t border-slate-700 pt-4 mt-2">
                        <div className="flex justify-between items-center mb-3">
                          <label className="font-bold text-slate-100 flex items-center gap-2"><Plus size={14} className="text-green-400"/> Effects</label>
                          <button className="text-[10px] bg-green-900 text-green-100 px-2 py-1 rounded hover:bg-green-800 uppercase font-bold tracking-wider" onClick={() => {
                              const newEffect = { resourceId: resources[0]?.id, op: OPERATIONS.ADD, value: '1' };
                              setElements(elements.map(el => el.id === selected.id ? { ...el, effects: [...el.effects, newEffect] } : el));
                            }}>+ Add</button>
                        </div>
                        {selected.effects.map((eff, idx) => (
                          <div key={idx} className="flex flex-col gap-2 mb-2 bg-slate-800 p-2 rounded border border-slate-700 relative group">
                            <div className="flex gap-2">
                              <select className="w-20 bg-slate-900 rounded px-1 py-0.5 text-xs font-mono border border-slate-700" value={eff.op} onChange={(e) => {
                                   const newEff = [...selected.effects]; newEff[idx].op = e.target.value; setElements(elements.map(el => el.id === selected.id ? { ...el, effects: newEff } : el));
                                 }}><option value={OPERATIONS.ADD}>Add</option><option value={OPERATIONS.SUBTRACT}>Sub</option><option value={OPERATIONS.MULTIPLY}>Mult</option><option value={OPERATIONS.POWER}>Pow</option></select>
                              <input type="text" className="flex-1 bg-slate-900 rounded px-1 py-0.5 border border-slate-700 font-mono text-xs" placeholder="1e5" value={eff.value} onChange={(e) => {
                                  const newEff = [...selected.effects]; newEff[idx].value = e.target.value; setElements(elements.map(el => el.id === selected.id ? { ...el, effects: newEff } : el));
                                }}/>
                            </div>
                            <div className="flex items-center gap-2">
                              <ArrowRight size={12} className="text-slate-500" />
                              <select className="flex-1 bg-slate-900 rounded px-1 py-0.5 border border-slate-700" value={eff.resourceId} onChange={(e) => {
                                  const newEff = [...selected.effects]; newEff[idx].resourceId = e.target.value; setElements(elements.map(el => el.id === selected.id ? { ...el, effects: newEff } : el));
                                }}>{resources.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}</select>
                            </div>
                            <button onClick={() => { const newEff = selected.effects.filter((_, i) => i !== idx); setElements(elements.map(el => el.id === selected.id ? { ...el, effects: newEff } : el)); }} className="absolute top-1 right-1 text-slate-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"><X size={14}/></button>
                          </div>
                        ))}
                      </div>
                    </>
                  )}
                </div>
              )}
            </>
          )}
          {activeTab === 'resources' && (
             <div className="p-4">
                <h3 className="font-bold text-white mb-2 flex items-center gap-2"><Database size={16} className="text-green-400"/> Resources</h3>
                <div className="space-y-2 mb-6">
                   {resources.map((res, idx) => (
                     <div key={res.id} className="bg-slate-800 p-2 rounded border border-slate-700 flex flex-col gap-2 relative">
                       <button onClick={() => setResources(resources.filter(r => r.id !== res.id))} className="absolute top-2 right-2 text-slate-500 hover:text-red-400"><X size={14}/></button>
                       <div className="flex items-center gap-2">
                         <label className="w-10 text-[10px] text-slate-500 uppercase font-bold">Name</label>
                         <input className="flex-1 bg-slate-900 border border-slate-600 rounded px-2 py-1 text-xs text-white" value={res.name} onChange={(e) => {
                              const newRes = [...resources]; newRes[idx].name = e.target.value; setResources(newRes);
                            }}/>
                       </div>
                       <div className="flex items-center gap-2">
                         <label className="w-10 text-[10px] text-slate-500 uppercase font-bold">ID</label>
                         <input className="flex-1 bg-slate-950 border border-slate-700 rounded px-2 py-1 text-xs text-yellow-500 font-mono" value={res.id} onChange={(e) => {
                              const newRes = [...resources]; newRes[idx].id = e.target.value; setResources(newRes);
                            }}/>
                       </div>
                       <div className="flex items-center gap-2">
                         <label className="w-10 text-[10px] text-slate-500 uppercase font-bold">Start</label>
                         <input type="text" className="w-16 bg-slate-900 border border-slate-600 rounded px-2 py-1 text-xs text-white font-mono" value={res.initial} onChange={(e) => {
                              const newRes = [...resources]; newRes[idx].initial = e.target.value; setResources(newRes);
                            }}/>
                       </div>
                       <div className="text-[10px] text-slate-600 italic">Use <code>{`{${res.id}}`}</code> in labels/formulas.</div>
                     </div>
                   ))}
                   <button onClick={() => setResources([...resources, { id: `res_${Date.now()}`, name: 'New Res', initial: '0' }])} className="w-full text-xs bg-slate-700 hover:bg-slate-600 py-1 rounded text-slate-300">+ Add Resource</button>
                </div>
                <h3 className="font-bold text-white mb-2 flex items-center gap-2"><Sliders size={16} className="text-purple-400"/> Rules</h3>
                <div className="space-y-2">
                   {interactions.map((rule, idx) => (
                     <div key={rule.id} className="bg-slate-800 p-2 rounded border border-purple-900/30 relative text-xs">
                       <button onClick={() => setInteractions(interactions.filter(i => i.id !== rule.id))} className="absolute top-1 right-1 text-slate-500 hover:text-red-400"><X size={12} /></button>
                       <div className="flex gap-1 items-center mb-1">
                          <span className="text-slate-400">Per</span>
                          <select className="bg-slate-900 border-slate-700 rounded px-1" value={rule.sourceId} onChange={(e) => { const n = [...interactions]; n[idx].sourceId = e.target.value; setInteractions(n); }}>{resources.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}</select>
                       </div>
                       <div className="flex gap-1 items-center">
                          <span className="text-slate-400">Gain +</span>
                          <input className="w-12 bg-slate-900 border-slate-700 rounded px-1" value={rule.value} onChange={(e) => { const n = [...interactions]; n[idx].value = e.target.value; setInteractions(n); }}/>
                          <span className="text-slate-400">x to</span>
                          <select className="w-20 bg-slate-900 border-slate-700 rounded px-1" value={rule.targetId} onChange={(e) => { const n = [...interactions]; n[idx].targetId = e.target.value; setInteractions(n); }}>{resources.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}</select>
                       </div>
                     </div>
                   ))}
                   <button onClick={() => setInteractions([...interactions, { id: Date.now().toString(), sourceId: resources[0]?.id, targetId: resources[0]?.id, type: INTERACTION_TYPES.GAIN_MULTIPLIER, value: '0.1' }])} className="w-full text-xs bg-purple-900/50 hover:bg-purple-900/80 py-1 rounded text-purple-200">+ Add Interaction Rule</button>
                </div>
             </div>
          )}

          {activeTab === 'automation' && (
             <div className="p-4">
                <h3 className="font-bold text-white mb-4 flex items-center gap-2"><Clock size={16} className="text-cyan-400"/> Automation Tickers</h3>
                <div className="space-y-4">
                   {tickers.map((ticker, idx) => (
                      <div key={ticker.id} className="bg-slate-800 p-3 rounded border border-cyan-900/50 relative">
                         <button onClick={() => setTickers(tickers.filter(t => t.id !== ticker.id))} className="absolute top-2 right-2 text-slate-500 hover:text-red-400"><X size={14}/></button>
                         <div className="mb-2">
                           <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Target</label>
                           <select className="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-xs" value={ticker.targetId} onChange={(e) => {
                                const n = [...tickers]; n[idx].targetId = e.target.value; setTickers(n);
                              }}>
                             <option value="">Select Resource</option>
                             {resources.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
                           </select>
                         </div>
                         <div className="mb-2 bg-slate-900/50 p-2 rounded border border-slate-700/50">
                            <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Source Amount</label>
                            <div className="flex gap-2 mb-2">
                              <label className="flex items-center gap-1 text-[10px] cursor-pointer"><input type="radio" checked={ticker.sourceType === TICKER_SOURCE_TYPES.FIXED} onChange={() => { const n = [...tickers]; n[idx].sourceType = TICKER_SOURCE_TYPES.FIXED; setTickers(n); }} /> Fixed</label>
                              <label className="flex items-center gap-1 text-[10px] cursor-pointer"><input type="radio" checked={ticker.sourceType === TICKER_SOURCE_TYPES.RESOURCE} onChange={() => { const n = [...tickers]; n[idx].sourceType = TICKER_SOURCE_TYPES.RESOURCE; setTickers(n); }} /> Resource</label>
                            </div>
                            {ticker.sourceType === TICKER_SOURCE_TYPES.FIXED ? (
                              <input type="text" className="w-full bg-slate-800 border border-slate-600 rounded px-2 py-1 text-xs font-mono" placeholder="10" value={ticker.value} onChange={(e) => { const n = [...tickers]; n[idx].value = e.target.value; setTickers(n); }}/>
                            ) : (
                              <select className="w-full bg-slate-800 border border-slate-600 rounded px-2 py-1 text-xs" value={ticker.sourceId} onChange={(e) => { const n = [...tickers]; n[idx].sourceId = e.target.value; setTickers(n); }}>{resources.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}</select>
                            )}
                            <div className="mt-2 flex items-center gap-2">
                               <span className="text-[10px] text-slate-400">x Multiplier</span>
                               <input type="text" className="w-16 bg-slate-800 border border-slate-600 rounded px-1 py-0.5 text-xs font-mono" placeholder="1" value={ticker.multiplier} onChange={(e) => { const n = [...tickers]; n[idx].multiplier = e.target.value; setTickers(n); }}/>
                            </div>
                         </div>
                         <div className="flex items-center gap-2">
                           <div className="flex-1">
                             <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Every</label>
                             <input type="number" className="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-xs" value={ticker.interval} onChange={(e) => { const n = [...tickers]; n[idx].interval = e.target.value; setTickers(n); }}/>
                           </div>
                           <div className="text-[10px] text-slate-400 pt-4">ms</div>
                         </div>
                         <p className="text-[10px] text-slate-600 mt-1 italic">Adds {ticker.sourceType === TICKER_SOURCE_TYPES.RESOURCE ? `{${ticker.sourceId || '?'}}` : ticker.value} * {ticker.multiplier} every {ticker.interval}ms</p>
                      </div>
                   ))}
                   <button onClick={() => setTickers([...tickers, { id: Date.now().toString(), targetId: resources[0]?.id, sourceType: TICKER_SOURCE_TYPES.FIXED, value: '1', multiplier: '1', interval: '1000' }])} className="w-full text-xs bg-cyan-700 hover:bg-cyan-600 py-2 rounded text-white flex items-center justify-center gap-2"><Timer size={14} /> + Add Ticker</button>
                </div>
             </div>
          )}

          {activeTab === 'settings' && (
            <div className="p-4">
               <h3 className="font-bold text-white mb-4 flex items-center gap-2"><Settings size={16} className="text-orange-400"/> Game Settings</h3>
               <div className="bg-slate-800 p-3 rounded border border-slate-700 space-y-4">
                  <div className="flex items-start gap-3">
                     <div className={`mt-1 w-4 h-4 rounded border flex items-center justify-center cursor-pointer ${gameSettings.enableBuyAmount ? 'bg-orange-500 border-orange-500' : 'bg-slate-900 border-slate-600'}`} onClick={() => setGameSettings({ ...gameSettings, enableBuyAmount: !gameSettings.enableBuyAmount })}>
                        {gameSettings.enableBuyAmount && <CheckSquare size={12} className="text-white" />}
                     </div>
                     <div>
                        <label className="font-bold text-slate-200 cursor-pointer" onClick={() => setGameSettings({ ...gameSettings, enableBuyAmount: !gameSettings.enableBuyAmount })}>Enable Bulk Buying</label>
                        <p className="text-xs text-slate-400 mt-1">Shows "Buy 1 / 10 / Max" controls in play mode. Only affects buttons marked as "Shop Items".</p>
                     </div>
                  </div>
               </div>
            </div>
          )}
        </div>
      </div>
    );
  };

  return (
    <div className="flex flex-col h-screen bg-slate-950 text-white font-sans overflow-hidden">
      <div className="h-14 border-b border-slate-800 bg-slate-900 flex items-center px-4 justify-between shadow-md z-10">
        <div className="flex items-center gap-4">
          <h1 className="font-bold text-xl text-blue-400 flex items-center gap-2"><Settings className="animate-spin-slow" /> ClickerForge</h1>
          <div className="h-6 w-px bg-slate-700 mx-2" />
          {mode === 'edit' && (
            <>
              <div className="flex bg-slate-800 rounded p-1 gap-1">
                <button onClick={() => addElement(ELEMENT_TYPES.BUTTON)} className="flex items-center gap-2 px-3 py-1 hover:bg-slate-700 rounded text-sm transition-colors" title="Add Button"><Square size={16} /> Button</button>
                <button onClick={() => addElement(ELEMENT_TYPES.LABEL)} className="flex items-center gap-2 px-3 py-1 hover:bg-slate-700 rounded text-sm transition-colors" title="Add Label"><Type size={16} /> Label</button>
              </div>
              <div className="h-6 w-px bg-slate-700 mx-2" />
              <div className="flex items-center gap-2">
                 <button onClick={() => setShowGrid(!showGrid)} className={`p-1.5 rounded ${showGrid ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400'}`} title="Toggle Grid"><LayoutGrid size={18} /></button>
                 <input type="number" value={gridSize} onChange={(e) => setGridSize(Math.max(5, parseInt(e.target.value) || 20))} className="w-16 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm" title="Grid Size"/>
              </div>
            </>
          )}
        </div>
        <div className="flex items-center gap-3">
          <button onClick={handleSave} className="text-slate-400 hover:text-blue-400 transition-colors" title="Save JSON"><Save size={20} /></button>
          <button onClick={handleExportHTML} className="text-slate-400 hover:text-purple-400 transition-colors" title="Export HTML Game"><Download size={20} /></button>
          <label className="text-slate-400 hover:text-green-400 cursor-pointer transition-colors" title="Load JSON"><Upload size={20} /><input type="file" className="hidden" accept=".json" onChange={handleLoad} /></label>
          <div className="h-6 w-px bg-slate-700 mx-2" />
          <button onClick={() => setMode(mode === 'edit' ? 'play' : 'edit')} className={`flex items-center gap-2 px-4 py-1.5 rounded font-bold transition-all ${mode === 'edit' ? 'bg-green-600 hover:bg-green-500 text-white shadow-lg shadow-green-900/50' : 'bg-yellow-600 hover:bg-yellow-500 text-white shadow-lg shadow-yellow-900/50'}`}>
            {mode === 'edit' ? <><Play size={16} fill="currentColor" /> PLAY</> : <><Settings size={16} /> EDIT</>}
          </button>
        </div>
      </div>
      <div className="flex-1 flex overflow-hidden relative">
        {mode === 'play' && gameSettings.enableBuyAmount && (
           <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-slate-900/90 backdrop-blur border border-slate-700 rounded-lg shadow-xl p-1 flex gap-1 z-50">
              <button onClick={() => setBuyAmount(1)} className={`px-3 py-1 rounded text-xs font-bold transition-colors ${buyAmount === 1 ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800'}`}>1x</button>
              <button onClick={() => setBuyAmount(10)} className={`px-3 py-1 rounded text-xs font-bold transition-colors ${buyAmount === 10 ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800'}`}>10x</button>
              <button onClick={() => setBuyAmount('max')} className={`px-3 py-1 rounded text-xs font-bold transition-colors ${buyAmount === 'max' ? 'bg-blue-600 text-white' : 'text-slate-400 hover:bg-slate-800'}`}>MAX</button>
           </div>
        )}
        <div ref={canvasRef} className="flex-1 bg-slate-950 relative overflow-hidden select-none" onClick={() => mode === 'edit' && setSelectedId(null)} style={{ backgroundImage: mode === 'edit' && showGrid ? `radial-gradient(#334155 1px, transparent 1px)` : 'none', backgroundSize: `${gridSize}px ${gridSize}px` }}>
          {elements.map(el => {
             const isSelected = selectedId === el.id && mode === 'edit';
             let opacity = 1;
             if (mode === 'play' && el.type === ELEMENT_TYPES.BUTTON) {
                let multiplier = new Decimal(1);
                if (el.isShopButton && gameSettings.enableBuyAmount) { if (buyAmount === 10) multiplier = new Decimal(10); }
                const canAfford = el.costs.every(c => {
                  const currentVal = gameState[c.resourceId] || new Decimal(0);
                  let xVal = new Decimal(el.initialX || 0).add(gameState[`${el.id}_count`] || 0);
                  const baseCost = evaluateFormula(c.value, gameState, { x: xVal });
                  const totalCost = baseCost.mul(multiplier);
                  return currentVal.gte(totalCost);
                });
                if (!canAfford) opacity = 0.5;
             }
             return (
               <div key={el.id} style={{ position: 'absolute', left: el.x, top: el.y, width: el.w, height: el.h, backgroundColor: el.bgColor, color: el.textColor, fontSize: `${el.fontSize}px`, opacity }} className={`flex items-center justify-center rounded shadow-sm cursor-pointer transition-shadow ${isSelected ? 'ring-2 ring-blue-400 shadow-lg shadow-blue-900/20 z-50' : 'hover:brightness-110'} ${mode === 'play' && el.type === ELEMENT_TYPES.BUTTON ? 'active:scale-95 transition-transform' : ''}`} onClick={(e) => { e.stopPropagation(); if (mode === 'play') handleGameClick(el); }} onMouseDown={(e) => mode === 'edit' && handleMouseDown(e, el.id, 'move')}>
                 <span className="pointer-events-none px-2 text-center w-full truncate whitespace-pre-wrap">{parseLabelText(el.text, el)}</span>
                 {mode === 'edit' && el.isShopButton && (<div className="absolute -top-2 -right-2 bg-orange-500 rounded-full p-1 shadow-md z-50" title="Shop Item"><ShoppingCart size={10} className="text-white" /></div>)}
                 {isSelected && (<div className="absolute bottom-0 right-0 w-4 h-4 bg-blue-500 cursor-nwse-resize rounded-tl" onMouseDown={(e) => handleMouseDown(e, el.id, 'resize')}/>)}
               </div>
             );
          })}
        </div>
        {mode === 'edit' && renderSidebar()}
        {mode === 'play' && (<div className="absolute bottom-4 left-4 bg-black/50 backdrop-blur p-2 rounded text-xs text-slate-400 pointer-events-none">Running Mode • Click buttons to interact</div>)}
      </div>
    </div>
  );
}