import React, { useState, useCallback, useRef, useEffect } from 'react';
import { Play, Pause, FastForward, RotateCcw, Shuffle, Trash2, Info } from 'lucide-react';

// 初始网格大小
const numRows = 30;
const numCols = 30;

// 邻居的坐标偏移量 (上、下、左、右、左上、右上、左下、右下)
const operations = [
  [0, 1],
  [0, -1],
  [1, -1],
  [-1, 1],
  [1, 1],
  [-1, -1],
  [1, 0],
  [-1, 0]
];

const generateEmptyGrid = () => {
  const rows = [];
  for (let i = 0; i < numRows; i++) {
    rows.push(Array.from(Array(numCols), () => 0));
  }
  return rows;
};

const App = () => {
  const [grid, setGrid] = useState(() => generateEmptyGrid());
  const [running, setRunning] = useState(false);
  const [generation, setGeneration] = useState(0);
  const [speed, setSpeed] = useState(100); // 毫秒
  
  const runningRef = useRef(running);
  runningRef.current = running;

  // 核心逻辑：计算下一代
  const runSimulation = useCallback(() => {
    if (!runningRef.current) {
      return;
    }

    setGrid((g) => {
      // 深拷贝当前网格 (类似于我们之前的 Python 练习，不能直接修改原图)
      const gridCopy = JSON.parse(JSON.stringify(g));

      for (let i = 0; i < numRows; i++) {
        for (let j = 0; j < numCols; j++) {
          let neighbors = 0;
          
          // 检查8个邻居
          operations.forEach(([x, y]) => {
            const newI = i + x;
            const newJ = j + y;
            // 边界检查：确保没有越界 (类似于 x >= 0 and x < n)
            if (newI >= 0 && newI < numRows && newJ >= 0 && newJ < numCols) {
              neighbors += g[newI][newJ];
            }
          });

          // 康威生命游戏规则
          if (neighbors < 2 || neighbors > 3) {
            gridCopy[i][j] = 0; // 死亡 (人口过少或过多)
          } else if (g[i][j] === 0 && neighbors === 3) {
            gridCopy[i][j] = 1; // 复活 (繁殖)
          }
          // neighbors === 2 || neighbors === 3 时，活细胞保持存活，无需改变
        }
      }
      return gridCopy;
    });

    setGeneration((gen) => gen + 1);
    setTimeout(runSimulation, speed);
  }, [speed]);

  // 开始/暂停 处理
  const toggleRunning = () => {
    setRunning(!running);
    if (!running) {
      runningRef.current = true;
      runSimulation();
    }
  };

  // 单步执行
  const stepForward = () => {
    setRunning(false);
    runningRef.current = true; // 临时开启以便执行一次逻辑
    
    setGrid((g) => {
      const gridCopy = JSON.parse(JSON.stringify(g));
      for (let i = 0; i < numRows; i++) {
        for (let j = 0; j < numCols; j++) {
          let neighbors = 0;
          operations.forEach(([x, y]) => {
            const newI = i + x;
            const newJ = j + y;
            if (newI >= 0 && newI < numRows && newJ >= 0 && newJ < numCols) {
              neighbors += g[newI][newJ];
            }
          });
          if (neighbors < 2 || neighbors > 3) {
            gridCopy[i][j] = 0;
          } else if (g[i][j] === 0 && neighbors === 3) {
            gridCopy[i][j] = 1;
          }
        }
      }
      return gridCopy;
    });
    setGeneration((gen) => gen + 1);
    runningRef.current = false; // 执行完立刻关闭
  };

  // 随机生成
  const randomize = () => {
    const rows = [];
    for (let i = 0; i < numRows; i++) {
      rows.push(Array.from(Array(numCols), () => (Math.random() > 0.7 ? 1 : 0)));
    }
    setGrid(rows);
    setGeneration(0);
  };

  // 清空
  const clearGrid = () => {
    setGrid(generateEmptyGrid());
    setGeneration(0);
    setRunning(false);
  };

  return (
    <div className="min-h-screen bg-slate-900 text-slate-100 p-4 font-sans flex flex-col items-center">
      <header className="mb-6 text-center">
        <h1 className="text-3xl font-bold text-green-400 mb-2">康威生命游戏</h1>
        <p className="text-slate-400 text-sm">Interactive Game of Life</p>
      </header>

      {/* 控制面板 */}
      <div className="flex flex-wrap gap-4 justify-center mb-6 bg-slate-800 p-4 rounded-xl shadow-lg border border-slate-700 w-full max-w-2xl">
        <button
          onClick={toggleRunning}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg font-semibold transition-all ${
            running 
              ? 'bg-red-500 hover:bg-red-600 text-white' 
              : 'bg-green-500 hover:bg-green-600 text-white'
          }`}
        >
          {running ? <Pause size={20} /> : <Play size={20} />}
          {running ? '暂停' : '开始'}
        </button>

        <button
          onClick={stepForward}
          className="flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-all"
          title="单步执行"
        >
          <FastForward size={20} />
          <span className="hidden sm:inline">下一步</span>
        </button>

        <button
          onClick={randomize}
          className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-all"
          title="随机生成"
        >
          <Shuffle size={20} />
          <span className="hidden sm:inline">随机</span>
        </button>

        <button
          onClick={clearGrid}
          className="flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-red-900/50 rounded-lg transition-all text-slate-300 hover:text-red-400"
          title="清空"
        >
          <Trash2 size={20} />
          <span className="hidden sm:inline">清空</span>
        </button>

        <div className="flex items-center gap-2 ml-auto">
          <span className="text-xs text-slate-400">速度</span>
          <input
            type="range"
            min="10"
            max="1000"
            step="10"
            value={1000 - speed} // 反转逻辑，让右边更快
            onChange={(e) => setSpeed(1000 - Number(e.target.value))}
            className="w-24 h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer accent-green-500"
          />
        </div>
      </div>

      {/* 统计信息 */}
      <div className="mb-4 font-mono text-green-400 text-lg">
        第 <span className="font-bold text-2xl text-white">{generation}</span> 代
      </div>

      {/* 游戏网格 */}
      <div 
        className="grid gap-[1px] bg-slate-700 border border-slate-700 shadow-2xl overflow-hidden rounded-lg touch-none"
        style={{
          gridTemplateColumns: `repeat(${numCols}, minmax(0, 1fr))`,
          width: 'min(95vw, 600px)', // 响应式宽度
          aspectRatio: '1/1'
        }}
      >
        {grid.map((rows, i) =>
          rows.map((col, j) => (
            <div
              key={`${i}-${j}`}
              onClick={() => {
                const newGrid = JSON.parse(JSON.stringify(grid));
                newGrid[i][j] = grid[i][j] ? 0 : 1;
                setGrid(newGrid);
              }}
              // 鼠标拖动绘制逻辑可以更复杂，这里仅支持点击
              className={`
                transition-colors duration-100 ease-in-out cursor-pointer
                ${grid[i][j] ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-slate-900 hover:bg-slate-800'}
              `}
            />
          ))
        )}
      </div>

      {/* 规则说明 */}
      <div className="mt-8 max-w-2xl w-full bg-slate-800/50 p-6 rounded-xl border border-slate-700/50 text-sm text-slate-300">
        <h3 className="flex items-center gap-2 text-lg font-bold text-white mb-4">
          <Info size={20} className="text-blue-400" />
          演化规则 (Rules)
        </h3>
        <ul className="space-y-2">
          <li className="flex gap-3">
            <span className="bg-red-500/20 text-red-400 px-2 py-0.5 rounded text-xs font-bold h-fit mt-0.5">死亡</span>
            <span>如果周围活细胞少于 2 个（孤独）或多于 3 个（拥挤），当前细胞死亡。</span>
          </li>
          <li className="flex gap-3">
            <span className="bg-green-500/20 text-green-400 px-2 py-0.5 rounded text-xs font-bold h-fit mt-0.5">存活</span>
            <span>如果周围活细胞正好是 2 个或 3 个，当前活细胞继续存活。</span>
          </li>
          <li className="flex gap-3">
            <span className="bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded text-xs font-bold h-fit mt-0.5">繁殖</span>
            <span>如果一个死细胞周围正好有 3 个活细胞，它会变成活细胞。</span>
          </li>
        </ul>
        <div className="mt-4 pt-4 border-t border-slate-700/50 text-xs text-slate-500">
          编程提示：这正是你刚刚练习的“遍历二维数组”和“检查周围邻居”算法的可视化表现。
        </div>
      </div>
    </div>
  );
};

export default App;