function MainComponent() { const [roles, setRoles] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [searchTerm, setSearchTerm] = useState(""); const [filters, setFilters] = useState({ category: "all", type: "all", location: "all", paymentType: "all" }); const [savedRoles, setSavedRoles] = useState([]); const [applications, setApplications] = useState([]); const { data: user } = useUser(); useEffect(()=>{ const fetchData = async ()=>{ try { const response = await fetch("/api/list-roles", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ search: searchTerm, filters }) }); if (!response.ok) { throw new Error("Failed to fetch roles"); } const data = await response.json(); setRoles(data.roles); if (user) { const applicationsResponse = await fetch("/api/applications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "list" }) }); if (!applicationsResponse.ok) { throw new Error("Failed to fetch applications"); } const applicationsData = await applicationsResponse.json(); setApplications(applicationsData.applications); setSavedRoles(data.savedRoles || []); } } catch (err) { console.error(err); setError("Failed to load roles"); } finally{ setLoading(false); } }; fetchData(); }, [ searchTerm, filters, user ]); const handleApply = async (roleId)=>{ try { const response = await fetch("/api/applications", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "create", applicationData: { role_id: roleId, user_id: user.id } }) }); if (!response.ok) { throw new Error("Failed to submit application"); } const data = await response.json(); setApplications([ ...applications, data.application ]); } catch (err) { console.error(err); setError("Failed to submit application"); } }; const toggleSaveRole = async (roleId)=>{ try { const response = await fetch("/api/list-roles", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: savedRoles.includes(roleId) ? "unsave" : "save", roleId, userId: user.id }) }); if (!response.ok) { throw new Error("Failed to save role"); } if (savedRoles.includes(roleId)) { setSavedRoles(savedRoles.filter((id)=>id !== roleId)); } else { setSavedRoles([ ...savedRoles, roleId ]); } } catch (err) { console.error(err); setError("Failed to save role"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#001428] to-[#003366] text-white", __source: { fileName: "", lineNumber: 104, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-8", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-64 space-y-6", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#002B59] rounded-xl p-6", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Filters"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-300 mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, "Category"), /*#__PURE__*/ React.createElement("select", { value: filters.category, onChange: (e)=>setFilters({ ...filters, category: e.target.value }), className: "w-full bg-[#001F3F] border border-[#1A3A5F] rounded-lg px-4 py-2", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 122, columnNumber: 21 }, __self: this }, "All Categories"), /*#__PURE__*/ React.createElement("option", { value: "acting", __source: { fileName: "", lineNumber: 123, columnNumber: 21 }, __self: this }, "Acting"), /*#__PURE__*/ React.createElement("option", { value: "modeling", __source: { fileName: "", lineNumber: 124, columnNumber: 21 }, __self: this }, "Modeling"), /*#__PURE__*/ React.createElement("option", { value: "music", __source: { fileName: "", lineNumber: 125, columnNumber: 21 }, __self: this }, "Music"), /*#__PURE__*/ React.createElement("option", { value: "dance", __source: { fileName: "", lineNumber: 126, columnNumber: 21 }, __self: this }, "Dance"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-300 mb-2", __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }, "Type"), /*#__PURE__*/ React.createElement("select", { value: filters.type, onChange: (e)=>setFilters({ ...filters, type: e.target.value }), className: "w-full bg-[#001F3F] border border-[#1A3A5F] rounded-lg px-4 py-2", __source: { fileName: "", lineNumber: 133, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 140, columnNumber: 21 }, __self: this }, "All Types"), /*#__PURE__*/ React.createElement("option", { value: "film", __source: { fileName: "", lineNumber: 141, columnNumber: 21 }, __self: this }, "Film"), /*#__PURE__*/ React.createElement("option", { value: "tv", __source: { fileName: "", lineNumber: 142, columnNumber: 21 }, __self: this }, "TV"), /*#__PURE__*/ React.createElement("option", { value: "theater", __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }, "Theater"), /*#__PURE__*/ React.createElement("option", { value: "commercial", __source: { fileName: "", lineNumber: 144, columnNumber: 21 }, __self: this }, "Commercial"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-300 mb-2", __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("select", { value: filters.location, onChange: (e)=>setFilters({ ...filters, location: e.target.value }), className: "w-full bg-[#001F3F] border border-[#1A3A5F] rounded-lg px-4 py-2", __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 158, columnNumber: 21 }, __self: this }, "All Locations"), /*#__PURE__*/ React.createElement("option", { value: "los_angeles", __source: { fileName: "", lineNumber: 159, columnNumber: 21 }, __self: this }, "Los Angeles"), /*#__PURE__*/ React.createElement("option", { value: "new_york", __source: { fileName: "", lineNumber: 160, columnNumber: 21 }, __self: this }, "New York"), /*#__PURE__*/ React.createElement("option", { value: "london", __source: { fileName: "", lineNumber: 161, columnNumber: 21 }, __self: this }, "London"), /*#__PURE__*/ React.createElement("option", { value: "remote", __source: { fileName: "", lineNumber: 162, columnNumber: 21 }, __self: this }, "Remote"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-300 mb-2", __source: { fileName: "", lineNumber: 166, columnNumber: 19 }, __self: this }, "Payment"), /*#__PURE__*/ React.createElement("select", { value: filters.paymentType, onChange: (e)=>setFilters({ ...filters, paymentType: e.target.value }), className: "w-full bg-[#001F3F] border border-[#1A3A5F] rounded-lg px-4 py-2", __source: { fileName: "", lineNumber: 169, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 176, columnNumber: 21 }, __self: this }, "All Payment Types"), /*#__PURE__*/ React.createElement("option", { value: "paid", __source: { fileName: "", lineNumber: 177, columnNumber: 21 }, __self: this }, "Paid"), /*#__PURE__*/ React.createElement("option", { value: "unpaid", __source: { fileName: "", lineNumber: 178, columnNumber: 21 }, __self: this }, "Unpaid"), /*#__PURE__*/ React.createElement("option", { value: "profit_share", __source: { fileName: "", lineNumber: 179, columnNumber: 21 }, __self: this }, "Profit Share"))))), user && applications.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-[#002B59] rounded-xl p-6", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, "My Applications"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, applications.map((application)=>/*#__PURE__*/ React.createElement("div", { key: application.id, className: "bg-[#001F3F] rounded-lg p-3", __source: { fileName: "", lineNumber: 190, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 194, columnNumber: 23 }, __self: this }, application.role_title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 195, columnNumber: 23 }, __self: this }, "Status:", " ", /*#__PURE__*/ React.createElement("span", { className: `${application.status === "pending" ? "text-yellow-400" : application.status === "accepted" ? "text-green-400" : "text-red-400"}`, __source: { fileName: "", lineNumber: 197, columnNumber: 25 }, __self: this }, application.status))))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#002B59] rounded-xl p-6 mb-6", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 items-center", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search roles...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "w-full bg-[#001F3F] border border-[#1A3A5F] rounded-lg px-4 py-2 text-white placeholder-gray-400", __source: { fileName: "", lineNumber: 220, columnNumber: 19 }, __self: this })), !user && /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "bg-[#2563EB] hover:bg-[#1D4ED8] px-6 py-2 rounded-lg whitespace-nowrap", __source: { fileName: "", lineNumber: 229, columnNumber: 19 }, __self: this }, "Sign in to Apply"))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-900/50 border border-red-500/50 p-4 rounded-lg mb-6", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, roles.map((role)=>/*#__PURE__*/ React.createElement("div", { key: role.id, className: "bg-[#002B59] rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-video bg-[#001F3F] relative", __source: { fileName: "", lineNumber: 251, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: role.image_url || "https://placehold.co/600x400", alt: role.title, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 252, columnNumber: 21 }, __self: this }), user && /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleSaveRole(role.id), className: "absolute top-4 right-4 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75", __source: { fileName: "", lineNumber: 258, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${savedRoles.includes(role.id) ? "fas" : "far"} fa-bookmark`, __source: { fileName: "", lineNumber: 262, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 272, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start justify-between mb-4", __source: { fileName: "", lineNumber: 273, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 274, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#2563EB] text-sm px-3 py-1 rounded-full", __source: { fileName: "", lineNumber: 275, columnNumber: 25 }, __self: this }, role.payment_type), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mt-2", __source: { fileName: "", lineNumber: 278, columnNumber: 25 }, __self: this }, role.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 279, columnNumber: 25 }, __self: this }, role.company_name))), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-4", __source: { fileName: "", lineNumber: 282, columnNumber: 21 }, __self: this }, role.description), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 283, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#1A3A5F] px-3 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 284, columnNumber: 23 }, __self: this }, role.category), /*#__PURE__*/ React.createElement("span", { className: "bg-[#1A3A5F] px-3 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 287, columnNumber: 23 }, __self: this }, role.type), /*#__PURE__*/ React.createElement("span", { className: "bg-[#1A3A5F] px-3 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 290, columnNumber: 23 }, __self: this }, role.location)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between pt-4 border-t border-[#1A3A5F]", __source: { fileName: "", lineNumber: 294, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 295, columnNumber: 23 }, __self: this }, "Deadline:", " ", new Date(role.submission_deadline).toLocaleDateString()), user ? /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleApply(role.id), disabled: applications.some((app)=>app.role_id === role.id), className: "bg-[#2563EB] hover:bg-[#1D4ED8] px-6 py-2 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 300, columnNumber: 25 }, __self: this }, applications.some((app)=>app.role_id === role.id) ? "Applied" : "Apply Now") : /*#__PURE__*/ React.createElement("a", { href: `/account/signin?callbackUrl=/roles`, className: "bg-[#2563EB] hover:bg-[#1D4ED8] px-6 py-2 rounded-lg", __source: { fileName: "", lineNumber: 312, columnNumber: 25 }, __self: this }, "Sign in to Apply")))))))))); }