'use client';

import { useState } from 'react';
import { runCode } from '@/actions'; // 导入 Server Action

import './styles.css'; // 引入样式

const root = document.getElementById('root');
if (root) {
    root.innerHTML = 'Hello, world!';
}

/// <reference types="webpack-env" />

if (module.hot) {
    module.hot.accept(() => {
        console.log('HMR is working!');
    });
}

// 启用 HMR
if (module.hot) {
    module.hot.accept('./styles.css', () => {
        console.log('CSS updated!');
    });
}


const CodeRunner = () => {
    const [code, setCode] = useState('');
    const [language, setLanguage] = useState('c'); // 默认语言为 C
    const [output, setOutput] = useState('');
    const [error, setError] = useState('');

    const runCodeHandler = async () => {
        try {
            // 调用 Server Action 执行代码
            const result = await runCode({ code, language });

            setOutput(result.output || ''); // 如果没有输出，设置为空字符串
            setError(result.error || '');  // 如果没有错误，设置为空字符串
        } catch (err) {
            setError((err as Error).message);
            setOutput('');
        }
    };

    return (
        <div>
            <h1>Code Runner</h1>
            <textarea
                value={code}
                onChange={(e) => setCode(e.target.value)}
                placeholder="Write your code here"
                rows={10}
                cols={50}
            />
            <div>
                <label>
                    Language:
                    <select value={language} onChange={(e) => setLanguage(e.target.value)}>
                        <option value="c">C</option>
                        <option value="java">Java</option>
                        <option value="python">Python</option> {/* 添加 Python */}
                    </select>
                </label>
            </div>
            <button onClick={runCodeHandler}>Run Code</button>

            {output && (
                <div>
                    <h3>Output:</h3>
                    <pre>{output}</pre>
                </div>
            )}
            {error && (
                <div>
                    <h3>Error:</h3>
                    <pre>{error}</pre>
                </div>
            )}
        </div>
    );
};

export default CodeRunner;