function MainComponent() { const [step, setStep] = useState("initial"); // 'initial', 'create', 'join', 'chat' const [roomCode, setRoomCode] = useState(""); const [roomId, setRoomId] = useState(null); const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [error, setError] = useState(""); const [username, setUsername] = useState(""); const [isRecording, setIsRecording] = useState(false); const [mediaRecorder, setMediaRecorder] = useState(null); const messagesEndRef = useRef(null); const fileInputRef = useRef(null); const [selectedImage, setSelectedImage] = useState(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages ]); // Polling for new messages useEffect(()=>{ if (!roomId) return; const interval = setInterval(async ()=>{ try { const response = await fetch("/api/get-messages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ roomId }) }); if (!response.ok) { throw new Error("Failed to fetch messages"); } const data = await response.json(); setMessages(data.messages); } catch (err) { console.error("Error fetching messages:", err); } }, 1000); return ()=>clearInterval(interval); }, [ roomId ]); const createRoom = async ()=>{ if (!username.trim()) { setError("Lütfen bir kullanıcı adı girin"); return; } try { const response = await fetch("/api/create-room", { method: "POST" }); if (!response.ok) { throw new Error("Failed to create room"); } const room = await response.json(); setRoomCode(room.code); setRoomId(room.id); setStep("chat"); } catch (err) { setError("Failed to create room. Please try again."); } }; const joinRoom = async ()=>{ if (!username.trim()) { setError("Lütfen bir kullanıcı adı girin"); return; } try { const response = await fetch("/api/join-room", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ code: roomCode }) }); if (!response.ok) { throw new Error("Failed to join room"); } const room = await response.json(); if (room.error) { setError(room.error); return; } setRoomId(room.id); setStep("chat"); } catch (err) { setError("Failed to join room. Please check the code and try again."); } }; const sendMessage = async (mediaType = null, mediaContent = null)=>{ if (!newMessage.trim() && !mediaContent) return; try { const response = await fetch("/api/send-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ roomId, content: newMessage, username, mediaType, mediaContent }) }); if (!response.ok) { throw new Error("Failed to send message"); } setNewMessage(""); } catch (err) { console.error("Error sending message:", err); } }; const handleImageUpload = async (e)=>{ const file = e.target.files[0]; if (!file) return; try { // Resmi base64'e çevir ve sıkıştır const img = new Image(); img.src = URL.createObjectURL(file); await new Promise((resolve)=>img.onload = resolve); const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); // Orijinal çözünürlüğü koru canvas.width = img.width; canvas.height = img.height; // Resmi çiz ve sadece kalitesini düşür ctx.drawImage(img, 0, 0, img.width, img.height); const compressedImage = canvas.toDataURL("image/jpeg", 0.4); // Kaliteyi 0.4'e düşürdük sendMessage("image", compressedImage); URL.revokeObjectURL(img.src); // Belleği temizle } catch (err) { console.error("Error uploading image:", err); } }; const startRecording = async ()=>{ try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const recorder = new MediaRecorder(stream); const audioChunks = []; recorder.ondataavailable = (e)=>{ audioChunks.push(e.data); }; recorder.onstop = async ()=>{ const audioBlob = new Blob(audioChunks, { type: "audio/wav" }); const reader = new FileReader(); reader.onloadend = ()=>{ sendMessage("audio", reader.result); }; reader.readAsDataURL(audioBlob); }; recorder.start(); setMediaRecorder(recorder); setIsRecording(true); } catch (err) { console.error("Error starting recording:", err); } }; const stopRecording = ()=>{ if (mediaRecorder) { mediaRecorder.stop(); setIsRecording(false); mediaRecorder.stream.getTracks().forEach((track)=>track.stop()); } }; const destroyChat = async ()=>{ if (!confirm("Tüm sohbet geçmişi silinecek. Emin misiniz?")) return; try { const response = await fetch("/api/destroy-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ roomId }) }); if (!response.ok) { throw new Error("Failed to destroy chat"); } setMessages([]); } catch (err) { console.error("Error destroying chat:", err); } }; if (step === "initial") { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-purple-600 to-indigo-800 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 213, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-8 rounded-2xl shadow-2xl w-full max-w-md border border-white/20", __source: { fileName: "", lineNumber: 214, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 215, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-2 flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, "👀 Uçarı"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, "Gizli ve Güvenli Sohbet")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: username, onChange: (e)=>setUsername(e.target.value), placeholder: "Kullanıcı adınız", className: "w-full px-4 py-4 rounded-xl bg-white/5 border border-white/10 text-white placeholder-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500", maxLength: 20, __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep("create"), className: "w-full bg-white/20 hover:bg-white/30 text-white py-4 rounded-xl transition-all transform hover:scale-105 backdrop-blur-sm border border-white/10 font-medium", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, "✨ Yeni Sohbet Oluştur"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep("join"), className: "w-full bg-purple-500/40 hover:bg-purple-500/50 text-white py-4 rounded-xl transition-all transform hover:scale-105 backdrop-blur-sm border border-purple-500/30 font-medium", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, "🔑 Sohbete Katıl")), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-300 text-center mt-4", __source: { fileName: "", lineNumber: 243, columnNumber: 21 }, __self: this }, error))); } if (step === "create") { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-purple-600 to-indigo-800 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 251, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-8 rounded-2xl shadow-2xl w-full max-w-md border border-white/20", __source: { fileName: "", lineNumber: 252, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-white text-center mb-6", __source: { fileName: "", lineNumber: 253, columnNumber: 11 }, __self: this }, "✨ Yeni Sohbet Oluştur"), /*#__PURE__*/ React.createElement("button", { onClick: createRoom, className: "w-full bg-white/20 hover:bg-white/30 text-white py-4 rounded-xl transition-all transform hover:scale-105 backdrop-blur-sm border border-white/10 font-medium mb-4", __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }, "Oluştur"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep("initial"), className: "w-full text-purple-200 py-2 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 262, columnNumber: 11 }, __self: this }, "← Geri"), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-300 text-center mt-4", __source: { fileName: "", lineNumber: 268, columnNumber: 21 }, __self: this }, error))); } if (step === "join") { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-purple-600 to-indigo-800 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 276, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg p-8 rounded-2xl shadow-2xl w-full max-w-md border border-white/20", __source: { fileName: "", lineNumber: 277, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-white text-center mb-6", __source: { fileName: "", lineNumber: 278, columnNumber: 11 }, __self: this }, "🔑 Sohbete Katıl"), /*#__PURE__*/ React.createElement("input", { type: "text", value: roomCode, onChange: (e)=>setRoomCode(e.target.value.toUpperCase()), placeholder: "Sohbet kodunu girin", className: "w-full px-4 py-4 rounded-xl mb-4 bg-white/5 border border-white/10 text-white placeholder-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500", maxLength: 6, __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: joinRoom, className: "w-full bg-purple-500/40 hover:bg-purple-500/50 text-white py-4 rounded-xl transition-all transform hover:scale-105 backdrop-blur-sm border border-purple-500/30 font-medium mb-4", __source: { fileName: "", lineNumber: 289, columnNumber: 11 }, __self: this }, "Katıl"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep("initial"), className: "w-full text-purple-200 py-2 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 295, columnNumber: 11 }, __self: this }, "← Geri"), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-300 text-center mt-4", __source: { fileName: "", lineNumber: 301, columnNumber: 21 }, __self: this }, error))); } return /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-gradient-to-b from-purple-600 to-indigo-800 flex flex-col", __source: { fileName: "", lineNumber: 308, columnNumber: 5 }, __self: this }, selectedImage && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4", onClick: ()=>setSelectedImage(null), __source: { fileName: "", lineNumber: 310, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedImage, alt: "Full size image", className: "max-w-full max-h-[90vh] rounded-lg", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 314, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg px-4 py-3 flex justify-between items-center border-b border-white/10", __source: { fileName: "", lineNumber: 323, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 324, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-white", __source: { fileName: "", lineNumber: 325, columnNumber: 11 }, __self: this }, "👀 Uçarı"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-purple-200", __source: { fileName: "", lineNumber: 326, columnNumber: 11 }, __self: this }, "Kod: ", roomCode)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 328, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: destroyChat, className: "text-red-300 hover:text-red-400 transition-colors", __source: { fileName: "", lineNumber: 329, columnNumber: 11 }, __self: this }, "💥 İmha Et"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setStep("initial"); setRoomId(null); setMessages([]); setRoomCode(""); }, className: "text-purple-200 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 335, columnNumber: 11 }, __self: this }, "Çıkış"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-2 space-y-2", __source: { fileName: "", lineNumber: 349, columnNumber: 7 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: "bg-white/10 backdrop-blur-sm rounded-xl p-3 shadow-lg border border-white/10", __source: { fileName: "", lineNumber: 351, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-1", __source: { fileName: "", lineNumber: 355, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-purple-200 text-sm font-medium", __source: { fileName: "", lineNumber: 356, columnNumber: 15 }, __self: this }, message.username || "Anonim"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-purple-300", __source: { fileName: "", lineNumber: 359, columnNumber: 15 }, __self: this }, new Date(message.created_at).toLocaleTimeString())), message.content && /*#__PURE__*/ React.createElement("p", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 364, columnNumber: 15 }, __self: this }, message.content), message.media_type === "image" && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedImage(message.media_content), className: "text-purple-200 hover:text-white transition-colors underline", __source: { fileName: "", lineNumber: 367, columnNumber: 15 }, __self: this }, "📷 Fotoğraf"), message.media_type === "audio" && /*#__PURE__*/ React.createElement("audio", { controls: true, className: "w-full mt-2", __source: { fileName: "", lineNumber: 375, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: message.media_content, type: "audio/wav", __source: { fileName: "", lineNumber: 376, columnNumber: 17 }, __self: this }), "Tarayıcınız ses oynatmayı desteklemiyor."))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 382, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg border-t border-white/10 p-2", __source: { fileName: "", lineNumber: 385, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 386, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center bg-white/5 rounded-xl border border-white/10", __source: { fileName: "", lineNumber: 387, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && sendMessage(), placeholder: "Mesajınızı yazın...", className: "flex-1 px-3 py-2 bg-transparent text-white placeholder-purple-200 focus:outline-none", __source: { fileName: "", lineNumber: 388, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageUpload, className: "hidden", ref: fileInputRef, __source: { fileName: "", lineNumber: 397, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>fileInputRef.current.click(), className: "p-2 text-purple-200 hover:text-white transition-colors", title: "Fotoğraf Gönder", __source: { fileName: "", lineNumber: 405, columnNumber: 13 }, __self: this }, "📷"), /*#__PURE__*/ React.createElement("button", { onClick: isRecording ? stopRecording : startRecording, className: `p-2 ${isRecording ? "text-red-400" : "text-purple-200"} hover:text-white transition-colors`, title: isRecording ? "Kaydı Durdur" : "Ses Kaydet", __source: { fileName: "", lineNumber: 413, columnNumber: 13 }, __self: this }, isRecording ? "⏹️" : "🎤"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>sendMessage(), className: "p-2 text-purple-200 hover:text-white transition-colors", title: "Gönder", __source: { fileName: "", lineNumber: 423, columnNumber: 13 }, __self: this }, "➤"))))); }