function MainComponent() { const [posts, setPosts] = React.useState([]); const [currentPage, setCurrentPage] = React.useState(1); const [totalPages, setTotalPages] = React.useState(1); const [selectedPost, setSelectedPost] = React.useState(null); const [comments, setComments] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [language, setLanguage] = React.useState("nl"); const [showNewPostModal, setShowNewPostModal] = React.useState(false); const [showReportModal, setShowReportModal] = React.useState(false); const [reportTarget, setReportTarget] = React.useState(null); const [newComment, setNewComment] = React.useState(""); const postsPerPage = 10; const translations = { nl: { forum: "Forum", newPost: "Nieuwe Post", guidelines: "Richtlijnen", comments: "Reacties", report: "Rapporteer", reply: "Reageer", loading: "Laden...", error: "Er is een fout opgetreden", title: "Titel", content: "Inhoud", category: "Categorie", submit: "Verstuur", cancel: "Annuleer", reportReason: "Reden voor rapportage", inappropriate: "Ongepaste inhoud", spam: "Spam", offensive: "Beledigend", other: "Anders", guidelinesTitle: "Forum Richtlijnen", guideline1: "Wees respectvol naar andere gebruikers", guideline2: "Geen spam of reclame", guideline3: "Blijf bij het onderwerp", guideline4: "Geen ongepaste inhoud", previous: "Vorige", next: "Volgende", commentPlaceholder: "Schrijf een reactie...", categories: { general: "Algemeen", technical: "Technisch", news: "Nieuws", discussion: "Discussie" } }, en: { forum: "Forum", newPost: "New Post", guidelines: "Guidelines", comments: "Comments", report: "Report", reply: "Reply", loading: "Loading...", error: "An error occurred", title: "Title", content: "Content", category: "Category", submit: "Submit", cancel: "Cancel", reportReason: "Reason for report", inappropriate: "Inappropriate content", spam: "Spam", offensive: "Offensive", other: "Other", guidelinesTitle: "Forum Guidelines", guideline1: "Be respectful to other users", guideline2: "No spam or advertising", guideline3: "Stay on topic", guideline4: "No inappropriate content", previous: "Previous", next: "Next", commentPlaceholder: "Write a comment...", categories: { general: "General", technical: "Technical", news: "News", discussion: "Discussion" } } }; const t = (key)=>{ const keys = key.split('.'); return keys.reduce((obj, key)=>obj?.[key], translations[language]) || key; }; React.useEffect(()=>{ fetchPosts(); }, [ currentPage, language ]); const fetchPosts = async ()=>{ setLoading(true); setError(null); try { const response = await fetch(`/api/forum?page=${currentPage}&limit=${postsPerPage}&language=${language}`); if (!response.ok) throw new Error('Failed to fetch posts'); const data = await response.json(); setPosts(data.posts || []); setTotalPages(Math.ceil((data.total || 0) / postsPerPage)); } catch (err) { setError(err.message); } finally{ setLoading(false); } }; const fetchComments = async (postId)=>{ try { const response = await fetch(`/api/forum/comments?post_id=${postId}`); if (!response.ok) throw new Error('Failed to fetch comments'); const data = await response.json(); setComments(data.comments || []); } catch (err) { setError(err.message); } }; const handleNewPost = async (formData)=>{ try { const response = await fetch('/api/forum', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...formData, language }) }); if (!response.ok) throw new Error('Failed to create post'); setShowNewPostModal(false); fetchPosts(); } catch (err) { setError(err.message); } }; const handleNewComment = async (postId)=>{ try { const response = await fetch('/api/forum/comments', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ post_id: postId, content: newComment, author: 'Anonymous' // Replace with actual user when auth is implemented }) }); if (!response.ok) throw new Error('Failed to post comment'); setNewComment(''); fetchComments(postId); } catch (err) { setError(err.message); } }; const handleReport = async (formData)=>{ try { const response = await fetch('/api/forum/reports', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...formData, reporter: 'Anonymous' // Replace with actual user when auth is implemented }) }); if (!response.ok) throw new Error('Failed to submit report'); setShowReportModal(false); setReportTarget(null); } catch (err) { setError(err.message); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 176, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white border-b border-gray-200", __source: { fileName: "", lineNumber: 177, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#DA020E]", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, t('forum')), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage(language === 'nl' ? 'en' : 'nl'), className: "text-gray-600 hover:text-[#DA020E]", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, language === 'nl' ? '🇬🇧 EN' : '🇳🇱 NL'), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowNewPostModal(true), className: "bg-[#DA020E] text-white px-4 py-2 rounded hover:bg-red-700 transition-colors", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, t('newPost')))))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 199, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-8", __source: { fileName: "", lineNumber: 200, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-8", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, t('loading')) : error ? /*#__PURE__*/ React.createElement("div", { className: "text-red-600 text-center py-8", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, error) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("article", { key: post.id, className: "bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden", __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 210, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 211, columnNumber: 23 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 212, columnNumber: 23 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 213, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 214, columnNumber: 25 }, __self: this }, post.author, " • ", new Date(post.created_at).toLocaleDateString()), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 217, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedPost(post); fetchComments(post.id); }, className: "text-[#DA020E] hover:text-red-700", __source: { fileName: "", lineNumber: 218, columnNumber: 27 }, __self: this }, t('comments')), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setReportTarget({ type: 'post', id: post.id }); setShowReportModal(true); }, className: "text-gray-600 hover:text-red-700", __source: { fileName: "", lineNumber: 227, columnNumber: 27 }, __self: this }, t('report'))))), selectedPost?.id === post.id && /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200 bg-gray-50 p-6", __source: { fileName: "", lineNumber: 241, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 242, columnNumber: 25 }, __self: this }, comments.map((comment)=>/*#__PURE__*/ React.createElement("div", { key: comment.id, className: "bg-white p-4 rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 244, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-800 mb-2", __source: { fileName: "", lineNumber: 245, columnNumber: 31 }, __self: this }, comment.content), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 246, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 247, columnNumber: 33 }, __self: this }, comment.author, " • ", new Date(comment.created_at).toLocaleDateString()), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setReportTarget({ type: 'comment', id: comment.id }); setShowReportModal(true); }, className: "text-gray-600 hover:text-red-700", __source: { fileName: "", lineNumber: 248, columnNumber: 33 }, __self: this }, t('report')))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 262, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: newComment, onChange: (e)=>setNewComment(e.target.value), placeholder: t('commentPlaceholder'), className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#DA020E] focus:border-transparent", rows: "3", __source: { fileName: "", lineNumber: 263, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleNewComment(post.id), className: "mt-2 bg-[#DA020E] text-white px-4 py-2 rounded hover:bg-red-700 transition-colors", __source: { fileName: "", lineNumber: 270, columnNumber: 27 }, __self: this }, t('reply')))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mt-8", __source: { fileName: "", lineNumber: 282, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage((prev)=>Math.max(1, prev - 1)), disabled: currentPage === 1, className: "px-4 py-2 border border-gray-300 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 283, columnNumber: 19 }, __self: this }, t('previous')), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage((prev)=>Math.min(totalPages, prev + 1)), disabled: currentPage === totalPages, className: "px-4 py-2 border border-gray-300 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 290, columnNumber: 19 }, __self: this }, t('next'))))), /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-4", __source: { fileName: "", lineNumber: 302, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6", __source: { fileName: "", lineNumber: 303, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this }, t('guidelinesTitle')), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4 text-gray-600", __source: { fileName: "", lineNumber: 305, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 306, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 307, columnNumber: 19 }, __self: this }, "1."), t('guideline1')), /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 310, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 311, columnNumber: 19 }, __self: this }, "2."), t('guideline2')), /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 314, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this }, "3."), t('guideline3')), /*#__PURE__*/ React.createElement("li", { className: "flex items-start", __source: { fileName: "", lineNumber: 318, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 319, columnNumber: 19 }, __self: this }, "4."), t('guideline4'))))))), showNewPostModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 329, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg max-w-lg w-full p-6", __source: { fileName: "", lineNumber: 330, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 331, columnNumber: 13 }, __self: this }, t('newPost')), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); const formData = { title: e.target.title.value, content: e.target.content.value, category: e.target.category.value, author: 'Anonymous' // Replace with actual user when auth is implemented }; handleNewPost(formData); }, __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 342, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 343, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 344, columnNumber: 19 }, __self: this }, t('title')), /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", required: true, className: "mt-1 w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#DA020E] focus:border-transparent", __source: { fileName: "", lineNumber: 345, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 352, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 353, columnNumber: 19 }, __self: this }, t('content')), /*#__PURE__*/ React.createElement("textarea", { name: "content", required: true, rows: "4", className: "mt-1 w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#DA020E] focus:border-transparent", __source: { fileName: "", lineNumber: 354, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 361, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 362, columnNumber: 19 }, __self: this }, t('category')), /*#__PURE__*/ React.createElement("select", { name: "category", required: true, className: "mt-1 w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#DA020E] focus:border-transparent", __source: { fileName: "", lineNumber: 363, columnNumber: 19 }, __self: this }, Object.entries(t('categories')).map(([value, label])=>/*#__PURE__*/ React.createElement("option", { key: value, value: value, __source: { fileName: "", lineNumber: 369, columnNumber: 23 }, __self: this }, label))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex justify-end space-x-4", __source: { fileName: "", lineNumber: 374, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowNewPostModal(false), className: "px-4 py-2 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 375, columnNumber: 17 }, __self: this }, t('cancel')), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#DA020E] text-white rounded-lg hover:bg-red-700", __source: { fileName: "", lineNumber: 382, columnNumber: 17 }, __self: this }, t('submit')))))), showReportModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 395, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg max-w-lg w-full p-6", __source: { fileName: "", lineNumber: 396, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 397, columnNumber: 13 }, __self: this }, t('reportReason')), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); const formData = { reason: e.target.reason.value, [reportTarget.type === 'post' ? 'post_id' : 'comment_id']: reportTarget.id }; handleReport(formData); }, __source: { fileName: "", lineNumber: 398, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 406, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "reason", required: true, className: "w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#DA020E] focus:border-transparent", __source: { fileName: "", lineNumber: 407, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "inappropriate", __source: { fileName: "", lineNumber: 412, columnNumber: 19 }, __self: this }, t('inappropriate')), /*#__PURE__*/ React.createElement("option", { value: "spam", __source: { fileName: "", lineNumber: 413, columnNumber: 19 }, __self: this }, t('spam')), /*#__PURE__*/ React.createElement("option", { value: "offensive", __source: { fileName: "", lineNumber: 414, columnNumber: 19 }, __self: this }, t('offensive')), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 415, columnNumber: 19 }, __self: this }, t('other')))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex justify-end space-x-4", __source: { fileName: "", lineNumber: 418, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>{ setShowReportModal(false); setReportTarget(null); }, className: "px-4 py-2 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 419, columnNumber: 17 }, __self: this }, t('cancel')), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#DA020E] text-white rounded-lg hover:bg-red-700", __source: { fileName: "", lineNumber: 429, columnNumber: 17 }, __self: this }, t('submit'))))))); }