frontend/src/App.js

// frontend/src/App.js
import React, { useState, useEffect } from 'react';

function App() {
  // 用于存储 puzzle index 及其 puzzle 数据
  const [puzzleIndex, setPuzzleIndex] = useState(0);
  const [puzzleText, setPuzzleText] = useState("");
  const [expectedSolution, setExpectedSolution] = useState(null);

  // sysContent 如果用户不改，就用默认 Example.txt
  const [sysContent, setSysContent] = useState("");

  // 交互结果
  const [modelResponse, setModelResponse] = useState("");
  const [generatedCode, setGeneratedCode] = useState("");
  const [executionSuccess, setExecutionSuccess] = useState(null);
  const [attempts, setAttempts] = useState(0);

  // 前端先获取默认 sysContent
  useEffect(() => {
    fetch("http://localhost:5000/default_sys_content")
      .then(res => res.json())
      .then(data => {
        if(data.success) {
          setSysContent(data.sysContent);
        }
      })
      .catch(e => console.error(e));
  }, []);

  // 当 puzzleIndex 改变时，自动获取对应 puzzle
  useEffect(() => {
    fetch(`http://localhost:5000/get_puzzle?index=${puzzleIndex}`)
      .then(res => res.json())
      .then(data => {
        if(data.success) {
          setPuzzleText(data.puzzle);
          setExpectedSolution(data.expected_solution);
        } else {
          console.error("获取 puzzle 失败", data.error);
          setPuzzleText("");
          setExpectedSolution(null);
        }
      })
      .catch(e => console.error(e));
  }, [puzzleIndex]);

  const handleSolve = () => {
    if(!puzzleText || !expectedSolution) {
      alert("puzzle 或 expectedSolution 不完整");
      return;
    }
    const payload = {
      index: puzzleIndex,
      puzzle: puzzleText,
      expected_solution: expectedSolution,
      sys_content: sysContent
    };

    fetch("http://localhost:5000/solve", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    })
    .then(res => res.json())
    .then(data => {
      if(!data.success) {
        alert("后端处理错误: " + data.error);
        return;
      }
      const result = data.result;
      setModelResponse(result.modelResponse || "");
      setGeneratedCode(result.generatedCode || "");
      setExecutionSuccess(result.success);
      setAttempts(result.attempts || 0);
    })
    .catch(e => console.error(e));
  };

  return (
    <div style={{ margin: 20 }}>
      <h1>Zebra Puzzle Demo</h1>

      <div style={{ marginBottom: 20 }}>
        <label>选择 puzzle index (0 - 999): </label>
        <input
          type="number"
          value={puzzleIndex}
          onChange={(e) => setPuzzleIndex(Number(e.target.value))}
          min={0}
          max={999}
        />
        <button onClick={() => setPuzzleIndex(puzzleIndex)}>Load Puzzle</button>
      </div>

      <div style={{ marginBottom: 20 }}>
        <h3>Puzzle Text</h3>
        <pre>{puzzleText}</pre>
        <h3>Expected Solution</h3>
        <pre>{JSON.stringify(expectedSolution, null, 2)}</pre>
      </div>

      <div style={{ marginBottom: 20 }}>
        <h3>sys_content (可编辑)</h3>
        <textarea
          rows={10}
          cols={80}
          value={sysContent}
          onChange={(e) => setSysContent(e.target.value)}
        />
      </div>

      <div style={{ marginBottom: 20 }}>
        <button onClick={handleSolve}>Solve Puzzle with LLM</button>
      </div>

      <div>
        <h2>Result</h2>
        <p>Success: {executionSuccess === null ? "N/A" : executionSuccess ? "✅" : "❌"}</p>
        <p>Attempts: {attempts}</p>
        <h3>Generated Code</h3>
        <pre>{generatedCode}</pre>
        <h3>Model Response</h3>
        <pre>{modelResponse}</pre>
      </div>
    </div>
  );
}

export default App;