function MainComponent() { const [text, setText] = useState(''); const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [tone, setTone] = useState('casual'); const [progress, setProgress] = useState(0); const [currentChunk, setCurrentChunk] = useState(0); const [totalChunks, setTotalChunks] = useState(0); const [retryCount, setRetryCount] = useState(0); const [savedTransforms, setSavedTransforms] = useState(()=>{ if (typeof window !== 'undefined') { return JSON.parse(localStorage.getItem('savedTransforms') || '[]'); } return []; }); useEffect(()=>{ if (typeof window !== 'undefined') { localStorage.setItem('savedTransforms', JSON.stringify(savedTransforms)); } }, [ savedTransforms ]); const handleHumanize = async ()=>{ if (!text.trim()) return; setLoading(true); setError(null); setProgress(0); setRetryCount((prev)=>prev + 1); if (text.length > 5000) { setError("Looks like this is a big piece of content! Give me a sec to work my magic..."); } try { const controller = new AbortController(); const timeoutId = setTimeout(()=>controller.abort(), 120000); const response = await fetch('/api/humanize', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text, tone }), signal: controller.signal }); clearTimeout(timeoutId); if (!response.ok) { if (response.status === 429) { throw new Error("Whoa, slow down! Give me a sec to catch my breath."); } if (response.status === 413) { throw new Error("That's too much text at once. Break it into smaller chunks."); } throw new Error("Looks like this is taking longer than expected. Want to try again?"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } if (data.metadata?.progress) { setProgress(data.metadata.progress); if (data.metadata.currentChunk) { setCurrentChunk(data.metadata.currentChunk); setTotalChunks(data.metadata.totalChunks || 1); } } setResult({ original: data.original, humanized: data.humanized, metadata: data.metadata }); setRetryCount(0); } catch (err) { if (err.name === 'AbortError') { setError("This is taking longer than usual. Want to try again?"); } else { setError(err.message || "Something's not right. Hit that button again."); } console.error(err); } finally{ setLoading(false); setProgress(0); setCurrentChunk(0); setTotalChunks(0); } }; const saveTransformation = ()=>{ if (!result) return; setSavedTransforms((prev)=>[ { id: Date.now(), original: result.original, humanized: result.humanized, tone, timestamp: new Date().toISOString() }, ...prev ]); }; const deleteTransformation = (id)=>{ setSavedTransforms((prev)=>prev.filter((t)=>t.id !== id)); }; const copyToClipboard = (text)=>{ navigator.clipboard.writeText(text); }; const getCharacterStatus = ()=>{ const count = text.length; if (count > 5000) { return { message: `${count} characters (this might take a minute)`, color: 'text-orange-500' }; } return { message: `${count} characters`, color: 'text-[#666]' }; }; const characterStatus = getCharacterStatus(); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] text-white p-6 md:p-12", __source: { fileName: "", lineNumber: 127, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-orange-500 to-red-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, "Turn Robot Speak Into Pure Fire 🔥"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] text-lg md:text-xl mb-8", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, "Watch your boring AI content transform into content that hits different"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#111] rounded-xl p-6 mb-8 border border-[#333]", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, [ 'Professional Swagger', 'Casual Beast Mode', 'Straight Fire 🔥' ].map((toneOption)=>/*#__PURE__*/ React.createElement("button", { key: toneOption, onClick: ()=>setTone(toneOption.toLowerCase()), className: `px-4 py-2 rounded-lg font-bold transition-all ${tone === toneOption.toLowerCase() ? 'bg-gradient-to-r from-orange-500 to-red-600 text-white' : 'bg-[#1a1a1a] text-[#666] hover:bg-[#222]'}`, __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, toneOption))), /*#__PURE__*/ React.createElement("textarea", { value: text, onChange: (e)=>setText(e.target.value), placeholder: "Paste your AI-generated content here...", className: "w-full h-40 bg-[#0a0a0a] text-white p-4 rounded-lg border border-[#333] focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none resize-none", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-2", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `text-sm ${characterStatus.color}`, __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, characterStatus.message), /*#__PURE__*/ React.createElement("button", { onClick: handleHumanize, disabled: loading || !text.trim(), className: "bg-gradient-to-r from-orange-500 to-red-600 text-white px-8 py-3 rounded-lg font-bold hover:from-orange-600 hover:to-red-700 transform hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, loading ? 'Transforming your content into pure fire...' : 'Humanize This 🚀'))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-4 flex items-center gap-2", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, error), retryCount > 0 && /*#__PURE__*/ React.createElement("button", { onClick: handleHumanize, className: "text-orange-500 underline", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, "Try again")), (loading || progress > 0) && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-[#222] rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-orange-500 to-red-600 transition-all duration-300", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] text-sm mt-2", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, progress < 100 ? `Processing part ${currentChunk} of ${totalChunks}...` : 'Almost done...')), result && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#111] rounded-xl p-6 border border-[#333]", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#666] font-bold mb-2", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, "BEFORE:"), /*#__PURE__*/ React.createElement("p", { className: "text-[#999]", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, result.original)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#111] rounded-xl p-6 border border-orange-500/30", __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-orange-500 font-bold", __source: { fileName: "", lineNumber: 210, columnNumber: 17 }, __self: this }, "AFTER:"), /*#__PURE__*/ React.createElement("button", { onClick: saveTransformation, className: "bg-[#1a1a1a] text-orange-500 px-4 py-2 rounded-lg font-bold hover:bg-[#222] transition-all", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, "Save This Heat 🔥")), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, result.humanized))), savedTransforms.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-12", __source: { fileName: "", lineNumber: 224, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 bg-gradient-to-r from-orange-500 to-red-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, "Your Saved Transformations 🗂️"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, savedTransforms.map((transform)=>/*#__PURE__*/ React.createElement("div", { key: transform.id, className: "bg-[#111] rounded-xl p-6 border border-[#333]", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 231, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#666]", __source: { fileName: "", lineNumber: 232, columnNumber: 21 }, __self: this }, new Date(transform.timestamp).toLocaleDateString()), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(transform.humanized), className: "bg-[#1a1a1a] text-[#666] px-3 py-1 rounded-lg hover:bg-[#222] transition-all", __source: { fileName: "", lineNumber: 236, columnNumber: 23 }, __self: this }, "Copy 📋"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteTransformation(transform.id), className: "bg-[#1a1a1a] text-red-500 px-3 py-1 rounded-lg hover:bg-[#222] transition-all", __source: { fileName: "", lineNumber: 242, columnNumber: 23 }, __self: this }, "Delete 🗑️"))), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this }, transform.humanized))))))); }