function MainComponent() { const [language, setLanguage] = React.useState('en'); const [form, setForm] = React.useState({ name: '', age: '', height: '', bust: '', waist: '', hips: '', celebrity: '', remarks: '' }); const [characters, setCharacters] = React.useState([]); const [isEditMode, setIsEditMode] = React.useState(false); const [editId, setEditId] = React.useState(null); const [loading, setLoading] = React.useState(false); const [modalVisible, setModalVisible] = React.useState(false); const [imageData, setImageData] = React.useState(null); const fetchCharacters = async ()=>{ const response = await fetch('/api/db/fps', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `fuckmeat`', values: [] }) }); const data = await response.json(); setCharacters(data); }; React.useEffect(()=>{ fetchCharacters(); }, []); const handleChange = (e)=>{ const { name, value } = e.target; setForm({ ...form, [name]: value }); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const existenceCheckResponse = await fetch('/api/celebrity-existence-checker', { method: 'POST', body: JSON.stringify({ name: form.celebrity }) }); const exists = await existenceCheckResponse.json(); if (!exists) { alert('Celebrity not validated as real'); setLoading(false); return; } const imageSearchResponse = await fetch('/api/celebrity-image-search', { method: 'POST', body: JSON.stringify({ celebrityName: form.celebrity }) }); const imageSearchData = await imageSearchResponse.json(); if (!imageSearchData) { alert('No images found for this celebrity'); setLoading(false); return; } setImageData(imageSearchData.image); setModalVisible(true); }; const handleModalApprove = async ()=>{ if (isEditMode) { await fetch('/api/db/fps', { method: 'POST', body: JSON.stringify({ query: "UPDATE `fuckmeat` SET `name` = ?, `age` = ?, `height` = ?, `bust` = ?, `waist` = ?, `hips` = ?, `celebrity` = ?, `remarks` = ? WHERE `id` = ?", values: [ form.name, form.age, form.height, form.bust, form.waist, form.hips, form.celebrity, form.remarks, editId ] }) }); setIsEditMode(false); setEditId(null); } else { await fetch('/api/db/fps', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `fuckmeat` (`name`, `age`, `height`, `bust`, `waist`, `hips`, `celebrity`, `remarks`) VALUES (?, ?, ?, ?, ?, ?, ?, ?)", values: [ form.name, form.age, form.height, form.bust, form.waist, form.hips, form.celebrity, form.remarks ] }) }); } setForm({ name: '', age: '', height: '', bust: '', waist: '', hips: '', celebrity: '', remarks: '' }); setModalVisible(false); fetchCharacters(); setLoading(false); }; const handleModalCancel = ()=>{ setModalVisible(false); setLoading(false); }; const handleEdit = (character)=>{ setForm(character); setEditId(character.id); setIsEditMode(true); }; const handleDelete = async (id)=>{ await fetch('/api/db/fps', { method: 'POST', body: JSON.stringify({ query: "DELETE FROM `fuckmeat` WHERE `id` = ?", values: [ id ] }) }); fetchCharacters(); }; const en = { title: "Fuckmeat Registration", name: "Name", age: "Age", height: "Height (cm)", body: "Body", bust: "Bust (cm)", waist: "Waist (cm)", hips: "Hips (cm)", face: "Face (Real Female Celebrity)", remarks: "Remarks", save: "Save", create_new: "Create New", registered_characters: "Registered Characters", edit: "Edit", delete: "Delete" }; const jp = { title: "Fuckmeat Registration", name: "名前", age: "年齢", height: "身長 (cm)", body: "体型", bust: "バスト (cm)", waist: "ウエスト (cm)", hips: "ヒップ (cm)", face: "顔 (実在の女性有名人)", remarks: "備考", save: "保存", create_new: "新規作成", registered_characters: "登録済みのキャラクター", edit: "編集", delete: "削除" }; const labels = language === 'en' ? en : jp; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mx-auto p-4", __source: { fileName: "", lineNumber: 168, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage('en'), className: "mr-2 p-1 border rounded", __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, "EN"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage('jp'), className: "p-1 border rounded", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, "JP")), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center mb-4 font-sans", __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, labels.title, " ", isEditMode && "(Editing)"), isEditMode && /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsEditMode(false); setForm({ name: '', age: '', height: '', bust: '', waist: '', hips: '', celebrity: '', remarks: '' }); setEditId(null); }, className: "p-2 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, labels.create_new)), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 199, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 200, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2 font-sans", htmlFor: "name", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }, labels.name), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "w-full border border-gray-300 p-2 rounded-md", value: form.name, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 204, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 214, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2 font-sans", htmlFor: "age", __source: { fileName: "", lineNumber: 215, columnNumber: 11 }, __self: this }, labels.age), /*#__PURE__*/ React.createElement("input", { type: "number", id: "age", name: "age", min: "0", className: "w-full border border-gray-300 p-2 rounded-md", value: form.age, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 229, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2 font-sans", htmlFor: "height", __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, labels.height), /*#__PURE__*/ React.createElement("input", { type: "number", id: "height", name: "height", min: "0", className: "w-full border border-gray-300 p-2 rounded-md", value: form.height, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 233, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 244, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2 font-sans", htmlFor: "bust", __source: { fileName: "", lineNumber: 245, columnNumber: 11 }, __self: this }, labels.bust), /*#__PURE__*/ React.createElement("input", { type: "number", id: "bust", name: "bust", min: "0", className: "w-full border border-gray-300 p-2 rounded-md", value: form.bust, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 248, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 259, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2 font-sans", htmlFor: "waist", __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, labels.waist), /*#__PURE__*/ React.createElement("input", { type: "number", id: "waist", name: "waist", min: "0", className: "w-full border border-gray-300 p-2 rounded-md", value: form.waist, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 263, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2 font-sans", htmlFor: "hips", __source: { fileName: "", lineNumber: 275, columnNumber: 11 }, __self: this }, labels.hips), /*#__PURE__*/ React.createElement("input", { type: "number", id: "hips", name: "hips", min: "0", className: "w-full border border-gray-300 p-2 rounded-md", value: form.hips, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 278, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 289, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2 font-sans", htmlFor: "celebrity", __source: { fileName: "", lineNumber: 290, columnNumber: 11 }, __self: this }, labels.face), /*#__PURE__*/ React.createElement("input", { type: "text", id: "celebrity", name: "celebrity", className: "w-full border border-gray-300 p-2 rounded-md", value: form.celebrity, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 293, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 303, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2 font-sans", htmlFor: "remarks", __source: { fileName: "", lineNumber: 304, columnNumber: 11 }, __self: this }, labels.remarks), /*#__PURE__*/ React.createElement("textarea", { id: "remarks", name: "remarks", rows: "4", className: "w-full border border-gray-300 p-2 rounded-md", value: form.remarks, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 307, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 317, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, labels.save, " ", loading && /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin ml-2", __source: { fileName: "", lineNumber: 319, columnNumber: 39 }, __self: this })))), modalVisible && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gray-700 bg-opacity-75 flex justify-center items-center z-50", __source: { fileName: "", lineNumber: 324, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg", __source: { fileName: "", lineNumber: 325, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 326, columnNumber: 13 }, __self: this }, form.celebrity), /*#__PURE__*/ React.createElement("img", { src: imageData.thumbnailImageUrl, alt: `Image of ${form.celebrity}`, className: "mb-4 w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 327, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleModalApprove, className: "p-2 bg-green-500 text-white rounded mr-2", __source: { fileName: "", lineNumber: 328, columnNumber: 13 }, __self: this }, "Approve"), /*#__PURE__*/ React.createElement("button", { onClick: handleModalCancel, className: "p-2 bg-red-500 text-white rounded", __source: { fileName: "", lineNumber: 329, columnNumber: 13 }, __self: this }, "Cancel"))), /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 bg-gray-800 bg-opacity-50 ${loading ? 'block' : 'hidden'}`, __source: { fileName: "", lineNumber: 333, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 334, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-2 font-sans", __source: { fileName: "", lineNumber: 335, columnNumber: 9 }, __self: this }, labels.registered_characters), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 336, columnNumber: 9 }, __self: this }, characters.map((character)=>/*#__PURE__*/ React.createElement("li", { key: character.id, className: "border px-4 py-2 rounded-md", __source: { fileName: "", lineNumber: 338, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 339, columnNumber: 15 }, __self: this }, labels.name, ": ", character.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 340, columnNumber: 15 }, __self: this }, labels.age, ": ", character.age), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 341, columnNumber: 15 }, __self: this }, labels.height, ": ", character.height, " cm"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 342, columnNumber: 15 }, __self: this }, labels.bust, ": ", character.bust, " cm"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 343, columnNumber: 15 }, __self: this }, labels.waist, ": ", character.waist, " cm"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 344, columnNumber: 15 }, __self: this }, labels.hips, ": ", character.hips, " cm"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 345, columnNumber: 15 }, __self: this }, labels.face, ": ", character.celebrity), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 346, columnNumber: 15 }, __self: this }, labels.remarks, ": ", character.remarks), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-2", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEdit(character), className: "p-1 bg-yellow-500 text-white rounded", __source: { fileName: "", lineNumber: 348, columnNumber: 17 }, __self: this }, labels.edit), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDelete(character.id), className: "p-1 bg-red-500 text-white rounded", __source: { fileName: "", lineNumber: 349, columnNumber: 17 }, __self: this }, labels.delete))))))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 361, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 362, columnNumber: 7 }, __self: this })); }