function MainComponent() { const [currentSection, setCurrentSection] = useState(0); const [editMode, setEditMode] = useState(false); const [sectionContent, setSectionContent] = useState({}); const [transcribing, setTranscribing] = useState(false); const sections = [ { id: 'cover', title: '表紙', hasTranscription: false }, { id: 'spine', title: '背表紙', hasTranscription: false }, { id: 'front-endpaper', title: '前見返し', hasTranscription: false }, { id: 'front-endpaper-back', title: '前見返し裏', hasTranscription: false }, { id: 'frontispiece', title: '口絵', hasTranscription: false, pages: 8 }, { id: 'president-message', title: '会長挨拶文', hasTranscription: true }, { id: 'principal-message', title: '校長挨拶文', hasTranscription: true }, { id: 'history', title: '沿革', hasTranscription: true }, { id: 'rules', title: '会則', hasTranscription: true }, { id: 'officers', title: '役員名簿', hasTranscription: true }, { id: 'afterword', title: '編集後記', hasTranscription: true } ]; const handlePrevious = ()=>{ setCurrentSection((prev)=>prev > 0 ? prev - 1 : prev); }; const handleNext = ()=>{ setCurrentSection((prev)=>prev < sections.length - 1 ? prev + 1 : prev); }; const handleEdit = ()=>{ setEditMode(!editMode); }; const handleTextChange = (e, pageIndex = null)=>{ setSectionContent((prevContent)=>{ const section = sections[currentSection]; if (section.pages) { return { ...prevContent, [section.id]: { ...prevContent[section.id], text: { ...prevContent[section.id]?.text || {}, [pageIndex]: e.target.value } } }; } else { return { ...prevContent, [section.id]: { ...prevContent[section.id], text: e.target.value } }; } }); }; const handleFileUpload = (e, pageIndex = null)=>{ const files = Array.from(e.target.files); const section = sections[currentSection]; setSectionContent((prevContent)=>{ if (section.pages) { return { ...prevContent, [section.id]: { ...prevContent[section.id], files: { ...prevContent[section.id]?.files || {}, [pageIndex]: [ ...prevContent[section.id]?.files?.[pageIndex] || [], ...files ] } } }; } else { return { ...prevContent, [section.id]: { ...prevContent[section.id], files: [ ...prevContent[section.id]?.files || [], ...files ] } }; } }); if (section.hasTranscription) { handleTranscribe(0); } }; const handleRemoveFile = (fileIndex, pageIndex = null)=>{ setSectionContent((prevContent)=>{ const section = sections[currentSection]; if (section.pages) { const updatedFiles = { ...prevContent[section.id].files }; updatedFiles[pageIndex] = updatedFiles[pageIndex].filter((_, index)=>index !== fileIndex); return { ...prevContent, [section.id]: { ...prevContent[section.id], files: updatedFiles } }; } else { return { ...prevContent, [section.id]: { ...prevContent[section.id], files: prevContent[section.id].files.filter((_, index)=>index !== fileIndex) } }; } }); }; const handleTranscribe = useCallback((fileIndex)=>{ setTranscribing(true); setTimeout(()=>{ setSectionContent((prevContent)=>{ const section = sections[currentSection]; const currentText = prevContent[section.id]?.text || ''; const newText = currentText + `\n\n[ファイル${fileIndex + 1}の文字起こし結果]\nこれは文字起こしのシミュレーション結果です。実際の実装では、ここに本物の文字起こし結果が表示されます。`; return { ...prevContent, [section.id]: { ...prevContent[section.id], text: newText } }; }); setTranscribing(false); }, 2000); }, [ currentSection ]); const renderSectionContent = ()=>{ const section = sections[currentSection]; const content = sectionContent[section.id] || {}; if (section.pages) { const layoutStyles = [ 'flex flex-col md:flex-row-reverse', 'flex flex-col md:flex-row', 'grid grid-cols-2', 'grid grid-cols-3' ]; const randomLayout = layoutStyles[Math.floor(Math.random() * layoutStyles.length)]; return /*#__PURE__*/ React.createElement("div", { className: `${randomLayout} gap-4`, __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, Array.from({ length: section.pages }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, index + 1, "ページ目"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, content.files?.[index]?.map((file, fileIndex)=>/*#__PURE__*/ React.createElement("div", { key: fileIndex, className: "flex items-center justify-between bg-gray-100 p-2 rounded", __source: { fileName: "", lineNumber: 168, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm truncate", __source: { fileName: "", lineNumber: 172, columnNumber: 21 }, __self: this }, file.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 173, columnNumber: 21 }, __self: this }, section.hasTranscription && /*#__PURE__*/ React.createElement("button", { className: "text-[#3b82f6] hover:text-[#2563eb] py-1 px-2", onClick: ()=>handleTranscribe(fileIndex), __source: { fileName: "", lineNumber: 175, columnNumber: 25 }, __self: this }, "📄"), /*#__PURE__*/ React.createElement("button", { className: "text-[#e53e3e] hover:text-[#c53030] py-1 px-2", onClick: ()=>handleRemoveFile(fileIndex, index), __source: { fileName: "", lineNumber: 182, columnNumber: 23 }, __self: this }, "🗑")))), /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer flex items-center justify-center bg-gray-100 h-12 rounded", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", onChange: (e)=>handleFileUpload(e, index), className: "hidden", multiple: true, name: `fileUploader${index}`, __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 199, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 200, columnNumber: 21 }, __self: this }, "📤 ファイルをアップロード（複数可）"))))))); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 211, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: content.text || '', onChange: handleTextChange, className: "w-full h-64 mb-2 border p-2 rounded shadow-md", placeholder: `${section.title}のテキストを入力`, disabled: !editMode, name: "sectionText", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 220, columnNumber: 9 }, __self: this }, content.files && content.files.map((file, fileIndex)=>/*#__PURE__*/ React.createElement("div", { key: fileIndex, className: "flex items-center justify-between bg-gray-100 p-2 rounded", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm truncate", __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }, file.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, section.hasTranscription && /*#__PURE__*/ React.createElement("button", { className: "text-[#3b82f6] hover:text-[#2563eb] py-1 px-2", onClick: ()=>handleTranscribe(fileIndex), __source: { fileName: "", lineNumber: 230, columnNumber: 21 }, __self: this }, "📄"), /*#__PURE__*/ React.createElement("button", { className: "text-[#e53e3e] hover:text-[#c53030] py-1 px-2", onClick: ()=>handleRemoveFile(fileIndex), __source: { fileName: "", lineNumber: 237, columnNumber: 19 }, __self: this }, "🗑")))), /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer flex items-center justify-center bg-gray-100 h-12 rounded", __source: { fileName: "", lineNumber: 246, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handleFileUpload, className: "hidden", multiple: true, name: "fileUploader", __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, "📤 ファイルをアップロード（複数可）")))), transcribing && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-[#e53e3e] p-4 border-l-4 border-[#f56565] bg-[#fff5f5]", __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, "文字起こし処理中です。しばらくお待ちください...")); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-6 bg-white rounded shadow-lg", __source: { fileName: "", lineNumber: 269, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 270, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold", __source: { fileName: "", lineNumber: 271, columnNumber: 9 }, __self: this }, "名簿プレビュー"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 272, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrevious, className: "bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg transition", disabled: currentSection === 0, __source: { fileName: "", lineNumber: 273, columnNumber: 11 }, __self: this }, "前へ"), /*#__PURE__*/ React.createElement("button", { onClick: handleNext, className: "bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg transition", disabled: currentSection === sections.length - 1, __source: { fileName: "", lineNumber: 280, columnNumber: 11 }, __self: this }, "次へ"), /*#__PURE__*/ React.createElement("button", { onClick: handleEdit, className: "bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg transition", __source: { fileName: "", lineNumber: 287, columnNumber: 11 }, __self: this }, editMode ? '保存' : '編集'))), /*#__PURE__*/ React.createElement("div", { className: "border rounded-lg p-6 mb-6 shadow-lg", __source: { fileName: "", lineNumber: 295, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 296, columnNumber: 9 }, __self: this }, sections[currentSection].title), renderSectionContent()), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 299, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 300, columnNumber: 9 }, __self: this }, "📚"), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-lg", __source: { fileName: "", lineNumber: 301, columnNumber: 9 }, __self: this }, `${currentSection + 1} / ${sections.length}`))); }