function MainComponent() { const [workTime, setWorkTime] = React.useState(25); const [restTime, setRestTime] = React.useState(5); const [isRunning, setIsRunning] = React.useState(false); const [timeLeft, setTimeLeft] = React.useState(workTime * 60); const [totalConcentrationTime, setTotalConcentrationTime] = React.useState(0); const [youtubeIntegration, setYoutubeIntegration] = React.useState(false); const timerRef = React.useRef(null); const playYouTubeVideo = ()=>{}; const stopYouTubeVideo = ()=>{}; const startTimer = ()=>{ if (youtubeIntegration) { playYouTubeVideo(); } setIsRunning(true); timerRef.current = setInterval(()=>{ setTimeLeft((prev)=>prev - 1); }, 1000); }; const stopTimer = ()=>{ setIsRunning(false); clearInterval(timerRef.current); if (youtubeIntegration) { stopYouTubeVideo(); } }; const resetTimer = ()=>{ setIsRunning(false); clearInterval(timerRef.current); setTimeLeft(workTime * 60); }; React.useEffect(()=>{ if (timeLeft === 0 && isRunning) { if (youtubeIntegration) { stopYouTubeVideo(); } setTotalConcentrationTime((prev)=>prev + workTime); setTimeLeft(restTime * 60); setIsRunning(false); fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `Completed ${workTime} minutes of work. Starting ${restTime} minutes of rest.` } ] }) }).then((response)=>response.json()).then((data)=>{ const responseContent = data.choices[0].message.content; }); } }, [ timeLeft, isRunning, workTime, restTime, youtubeIntegration ]); const handleWorkTimeChange = (e)=>{ setWorkTime(parseInt(e.target.value, 10)); setTimeLeft(parseInt(e.target.value, 10) * 60); }; const handleRestTimeChange = (e)=>{ setRestTime(parseInt(e.target.value, 10)); }; const handleYouTubeIntegrationChange = (e)=>{ setYoutubeIntegration(e.target.checked); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] p-4 bg-white rounded-lg shadow-md text-center", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "ポモドーロタイマー"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "作業時間 (分)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "workTime", className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md", value: workTime, onChange: handleWorkTimeChange, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "休憩時間 (分)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "restTime", className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md", value: restTime, onChange: handleRestTimeChange, __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full px-3 py-2 bg-green-500 text-white rounded-md font-roboto", onClick: startTimer, disabled: isRunning, __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "スタート"), /*#__PURE__*/ React.createElement("button", { className: "w-full px-3 py-2 bg-red-500 text-white rounded-md font-roboto", onClick: stopTimer, __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "ストップ"), /*#__PURE__*/ React.createElement("button", { className: "w-full px-3 py-2 bg-yellow-500 text-white rounded-md font-roboto", onClick: resetTimer, __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, "リセット")), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, "今日の総集中時間: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 124, columnNumber: 21 }, __self: this }, totalConcentrationTime), " 分"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-roboto mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, "残り時間: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, Math.floor(timeLeft / 60), ":", ('0' + timeLeft % 60).slice(-2))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "youtubeIntegration", className: "form-checkbox h-5 w-5", checked: youtubeIntegration, onChange: handleYouTubeIntegrationChange, __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-lg font-roboto", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, "YouTube連携")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this })); }