function MainComponent() { const [isRecording, setIsRecording] = useState(false); const [emergencyContacts, setEmergencyContacts] = useState([]); const [newContact, setNewContact] = useState({ name: "", phone: "", relationship: "" }); const [showWarning, setShowWarning] = useState(false); const [acknowledged, setAcknowledged] = useState(false); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [language, setLanguage] = useState("ru"); const { data: user } = useUser(); useEffect(()=>{ loadEmergencyContacts(); }, []); // Load language preference on component mount useEffect(()=>{ const urlParams = new URLSearchParams(window.location.search); const langParam = urlParams.get("lang"); const savedLanguage = langParam || localStorage.getItem("language") || "ru"; setLanguage(savedLanguage); localStorage.setItem("language", savedLanguage); }, []); // Handle language change const changeLanguage = (lang)=>{ setLanguage(lang); localStorage.setItem("language", lang); const urlParams = new URLSearchParams(window.location.search); urlParams.set("lang", lang); window.history.replaceState({}, "", `${window.location.pathname}?${urlParams}`); }; // Translations const translations = { ru: { title: "SOS", recordingAudio: "Запись аудио...", myCloseOnes: "Мои близкие", name: "Имя", namePlaceholder: "Введите имя", phone: "Телефон", relationship: "Кем приходится", relationshipPlaceholder: "Например: Мама, Папа, Сестра", addContact: "Добавить контакт", adding: "Добавление...", warningTitle: "Внимание!", warningText: "После нажатия кнопки SOS к вашей локации будет отправлена группа быстрого реагирования. В случае ложного или ошибочного вызова услуга оплачивается по стандартному тарифу.", acknowledged: "Ознакомлен", errorLoadContacts: "Не удалось загрузить контакты", errorAddContact: "Не удалось добавить контакт", errorSOS: "Произошла ошибка при отправке SOS" }, kz: { title: "SOS", recordingAudio: "Аудио жазылуда...", myCloseOnes: "Менің жақындарым", name: "Аты", namePlaceholder: "Атын енгізіңіз", phone: "Телефон", relationship: "Туыстығы", relationshipPlaceholder: "Мысалы: Ана, Әке, Қарындас", addContact: "Контакт қосу", adding: "Қосылуда...", warningTitle: "Назар аударыңыз!", warningText: "SOS батырмасын басқаннан кейін сіздің орныңызға жедел жауап беру тобы жіберіледі. Жалған немесе қате шақырту жағдайында қызмет стандартты тариф бойынша төленеді.", acknowledged: "Танысып шықтым", errorLoadContacts: "Контактарды жүктеу мүмкін болмады", errorAddContact: "Контактты қосу мүмкін болмады", errorSOS: "SOS жіберу кезінде қате орын алды" } }; const t = translations[language]; const loadEmergencyContacts = async ()=>{ try { const response = await fetch("/api/emergency-contacts"); if (!response.ok) { throw new Error("Failed to load emergency contacts"); } const data = await response.json(); setEmergencyContacts(Array.isArray(data) ? data : []); } catch (error) { console.error("Error loading contacts:", error); setError(t.errorLoadContacts); } }; const handleAddContact = async (e)=>{ e.preventDefault(); setLoading(true); try { const response = await fetch("/api/emergency-contacts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(newContact) }); if (!response.ok) { throw new Error("Failed to add contact"); } setNewContact({ name: "", phone: "", relationship: "" }); await loadEmergencyContacts(); } catch (error) { console.error("Error adding contact:", error); setError(t.errorAddContact); } finally{ setLoading(false); } }; const handleSOS = async ()=>{ if (!acknowledged) { setShowWarning(true); return; } try { const position = await new Promise((resolve, reject)=>{ navigator.geolocation.getCurrentPosition(resolve, reject); }); setIsRecording(true); const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mediaRecorder = new MediaRecorder(audioStream); const audioChunks = []; mediaRecorder.ondataavailable = (event)=>{ audioChunks.push(event.data); }; const sosResponse = await fetch("/api/sos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ latitude: position.coords.latitude, longitude: position.coords.longitude, acknowledged: true }) }); if (!sosResponse.ok) { throw new Error("Failed to send SOS"); } mediaRecorder.start(); setTimeout(()=>{ mediaRecorder.stop(); setIsRecording(false); }, 180000); mediaRecorder.onstop = async ()=>{ const audioBlob = new Blob(audioChunks); const formData = new FormData(); formData.append("audio", audioBlob); const audioResponse = await fetch("/api/sos/audio", { method: "POST", body: formData }); if (!audioResponse.ok) { throw new Error("Failed to send audio"); } }; } catch (error) { console.error("Error in SOS:", error); setError(t.errorSOS); setIsRecording(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] font-sf-pro text-white", __source: { fileName: "", lineNumber: 188, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 right-0 bg-[#1A1A1A] shadow-lg z-50", __source: { fileName: "", lineNumber: 190, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-6 py-4", __source: { fileName: "", lineNumber: 191, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/?lang=${language}`, className: "text-white", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-arrow-left text-xl", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "ml-4 text-xl font-medium", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, t.title)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>changeLanguage("kz"), className: `text-2xl transition-opacity ${language === "kz" ? "ring-2 ring-[#FFB74B] rounded-lg opacity-100 px-1" : "opacity-60 hover:opacity-100"}`, __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, "🇰🇿"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>changeLanguage("ru"), className: `text-2xl transition-opacity ${language === "ru" ? "ring-2 ring-[#FFB74B] rounded-lg opacity-100 px-1" : "opacity-60 hover:opacity-100"}`, __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, "🇷🇺")))), /*#__PURE__*/ React.createElement("main", { className: "pt-20 px-6 pb-24", __source: { fileName: "", lineNumber: 223, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSOS, disabled: isRecording, className: `w-full h-48 rounded-xl relative overflow-hidden transition-all duration-300 ${isRecording ? "bg-gray-800 cursor-not-allowed" : "bg-gradient-to-br from-red-600 to-red-700 hover:scale-[1.02]"}`, __source: { fileName: "", lineNumber: 225, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-4", __source: { fileName: "", lineNumber: 234, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-6xl ${isRecording ? "animate-pulse" : ""}`, __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, isRecording ? /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-microphone text-red-400", __source: { fileName: "", lineNumber: 237, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-bell", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold tracking-wider", __source: { fileName: "", lineNumber: 242, columnNumber: 13 }, __self: this }, isRecording ? t.recordingAudio : "SOS"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 249, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium mb-4", __source: { fileName: "", lineNumber: 250, columnNumber: 11 }, __self: this }, t.myCloseOnes), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 mb-6", __source: { fileName: "", lineNumber: 252, columnNumber: 11 }, __self: this }, emergencyContacts.map((contact)=>/*#__PURE__*/ React.createElement("div", { key: contact.id, className: "bg-[#1A1A1A] rounded-xl p-4 border border-gray-800", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 258, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-[#FFB74B]/20 flex items-center justify-center", __source: { fileName: "", lineNumber: 259, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-user text-[#FFB74B]", __source: { fileName: "", lineNumber: 260, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 262, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 263, columnNumber: 21 }, __self: this }, contact.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 264, columnNumber: 21 }, __self: this }, contact.phone_number), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 267, columnNumber: 21 }, __self: this }, contact.relationship)))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAddContact, className: "space-y-4", __source: { fileName: "", lineNumber: 276, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 277, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-3", __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }, t.name), /*#__PURE__*/ React.createElement("input", { type: "text", value: newContact.name, onChange: (e)=>setNewContact({ ...newContact, name: e.target.value }), className: "w-full px-5 py-4 rounded-xl bg-[#2A2A2A] text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#FFB74B]", placeholder: t.namePlaceholder, __source: { fileName: "", lineNumber: 279, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 289, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-3", __source: { fileName: "", lineNumber: 290, columnNumber: 15 }, __self: this }, t.phone), /*#__PURE__*/ React.createElement("input", { type: "tel", value: newContact.phone, onChange: (e)=>setNewContact({ ...newContact, phone: e.target.value }), className: "w-full px-5 py-4 rounded-xl bg-[#2A2A2A] text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#FFB74B]", placeholder: "+7 (XXX) XXX-XX-XX", __source: { fileName: "", lineNumber: 293, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 303, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-3", __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this }, t.relationship), /*#__PURE__*/ React.createElement("input", { type: "text", value: newContact.relationship, onChange: (e)=>setNewContact({ ...newContact, relationship: e.target.value }), className: "w-full px-5 py-4 rounded-xl bg-[#2A2A2A] text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#FFB74B]", placeholder: t.relationshipPlaceholder, __source: { fileName: "", lineNumber: 307, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: `w-full bg-gradient-to-r from-[#FFB74B] to-[#FFA000] text-white font-medium py-4 rounded-xl ${loading ? "opacity-50 cursor-not-allowed" : "hover:from-[#FFA73B] hover:to-[#FF9100] transform transition-all duration-300 hover:scale-[1.02]"}`, __source: { fileName: "", lineNumber: 317, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 327, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-circle-notch animate-spin", __source: { fileName: "", lineNumber: 328, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 329, columnNumber: 19 }, __self: this }, t.adding)) : t.addContact))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-red-900/50 text-red-400 p-4 rounded-xl border border-red-800", __source: { fileName: "", lineNumber: 339, columnNumber: 11 }, __self: this }, error), showWarning && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/80 flex items-center justify-center z-50 px-6", __source: { fileName: "", lineNumber: 345, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A1A] rounded-xl p-6 w-full max-w-md border border-gray-800", __source: { fileName: "", lineNumber: 346, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 mb-4", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center", __source: { fileName: "", lineNumber: 348, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-triangle-exclamation text-red-500 text-xl", __source: { fileName: "", lineNumber: 349, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium", __source: { fileName: "", lineNumber: 351, columnNumber: 17 }, __self: this }, t.warningTitle)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mb-6", __source: { fileName: "", lineNumber: 353, columnNumber: 15 }, __self: this }, t.warningText), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setAcknowledged(true); setShowWarning(false); }, className: "w-full bg-gradient-to-r from-[#FFB74B] to-[#FFA000] text-white font-medium py-4 rounded-xl hover:from-[#FFA73B] hover:to-[#FF9100] transform transition-all duration-300 hover:scale-[1.02]", __source: { fileName: "", lineNumber: 354, columnNumber: 15 }, __self: this }, t.acknowledged)))), /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 w-full bg-[#1A1A1A] border-t border-gray-800", __source: { fileName: "", lineNumber: 369, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around px-6 py-4", __source: { fileName: "", lineNumber: 370, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/?lang=${language}`, className: "text-gray-400", __source: { fileName: "", lineNumber: 371, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-house-chimney-window text-3xl", __source: { fileName: "", lineNumber: 372, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: `/profile?lang=${language}`, className: "text-gray-400", __source: { fileName: "", lineNumber: 374, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-circle-user text-3xl", __source: { fileName: "", lineNumber: 375, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: `/bookings?lang=${language}`, className: "text-gray-400", __source: { fileName: "", lineNumber: 377, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-calendar-check text-3xl", __source: { fileName: "", lineNumber: 378, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: `/support?lang=${language}`, className: "text-gray-400", __source: { fileName: "", lineNumber: 380, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-headset text-3xl", __source: { fileName: "", lineNumber: 381, columnNumber: 13 }, __self: this }))))); }