function MovieCard({ title, description, posterUrl, streamingServices }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-lg bg-white max-w-sm", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: posterUrl, alt: `Movie poster for ${title}`, className: "w-full h-[400px] object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700 mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Watch on:"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 flex-wrap", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, streamingServices.map((service)=>/*#__PURE__*/ React.createElement("span", { key: service, className: "bg-gray-100 px-3 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, service)))))); } function MovieCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MovieCard, { title: "Inception", description: "A thief who steals corporate secrets through dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O.", posterUrl: "/inception-poster.jpg", streamingServices: [ "Netflix", "Amazon Prime", "HBO Max" ], __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); } function MainComponent() { const [movies, setMovies] = useState([]); const [loading, setLoading] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ try { const movieData = JSON.parse(message); setMovies(movieData.movies); setLoading(false); } catch (error) { setLoading(false); } } }); const [step, setStep] = useState(1); const [mood, setMood] = useState(""); const [genre, setGenre] = useState(""); const [decade, setDecade] = useState(""); const [language, setLanguage] = useState(""); const getMoodRecommendations = async ()=>{ setLoading(true); setMovies([]); const prompt = `As a movie wizard 🧙‍♂️, I'll help find the perfect movies for you! Based on these preferences: - Mood: ${mood} - Genre: ${genre} - Decade: ${decade} - Language: ${language} ${language === "Bollywood" ? "Please ONLY recommend Indian Hindi-language (Bollywood) movies." : ""} Please recommend 5 amazing movies that match these criteria. For each movie, provide a captivating description and streaming services where available.`; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], json_schema: { name: "movie_recommendations", schema: { type: "object", properties: { movies: { type: "array", items: { type: "object", properties: { title: { type: "string" }, description: { type: "string" }, posterUrl: { type: "string" }, streamingServices: { type: "array", items: { type: "string" } } }, required: [ "title", "description", "posterUrl", "streamingServices" ], additionalProperties: false } } }, required: [ "movies" ], additionalProperties: false } }, stream: true }) }); handleStreamResponse(response); const movieResults = await Promise.all(movies.map(async (movie)=>{ const searchQuery = language === "Bollywood" ? `${movie.title} Bollywood movie poster` : `${movie.title} movie poster`; const searchResponse = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(searchQuery)}`); const data = await searchResponse.json(); if (data.items?.[0]?.originalImageUrl) { return { ...movie, posterUrl: data.items[0].originalImageUrl }; } return movie; })); setMovies(movieResults); }; const moods = [ { emoji: "✨", name: "magical" }, { emoji: "😊", name: "happy" }, { emoji: "😢", name: "melancholic" }, { emoji: "🤔", name: "thoughtful" }, { emoji: "🥰", name: "romantic" }, { emoji: "😱", name: "thrilled" }, { emoji: "🌟", name: "inspiring" }, { emoji: "🎭", name: "dramatic" } ]; const renderStep = ()=>{ switch(step){ case 1: return /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-6 font-roboto", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "How are you feeling today? ✨"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 md:grid-cols-6 gap-4 mb-12", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, moods.map((m)=>/*#__PURE__*/ React.createElement("button", { key: m.name, onClick: ()=>{ setMood(m.name); setStep(2); }, className: `text-6xl p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer ${mood === m.name ? "ring-4 ring-purple-500" : ""}`, "aria-label": `Select ${m.name} mood`, __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, m.emoji)))); case 2: return /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-6 font-roboto", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, "What genre interests you? 🎬"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, [ "Action", "Comedy", "Drama", "Horror", "Romance", "Sci-Fi" ].map((g)=>/*#__PURE__*/ React.createElement("button", { key: g, onClick: ()=>{ setGenre(g); setStep(3); }, className: "px-6 py-3 bg-white rounded-full shadow hover:shadow-lg transition", __source: { fileName: "", lineNumber: 147, columnNumber: 19 }, __self: this }, g)))); case 3: return /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-6 font-roboto", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, "Which decade speaks to you? 📅"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, [ "2020s", "2010s", "2000s", "1990s", "1980s", "Classics" ].map((d)=>/*#__PURE__*/ React.createElement("button", { key: d, onClick: ()=>{ setDecade(d); setStep(4); }, className: "px-6 py-3 bg-white rounded-full shadow hover:shadow-lg transition", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }, d)))); case 4: return /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-6 font-roboto", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, "Preferred language? 🌍"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, [ "English", "Spanish", "Korean", "Japanese", "French", "Bollywood", "Any" ].map((l)=>/*#__PURE__*/ React.createElement("button", { key: l, onClick: ()=>{ setLanguage(l); getMoodRecommendations(); }, className: "px-6 py-3 bg-white rounded-full shadow hover:shadow-lg transition", __source: { fileName: "", lineNumber: 202, columnNumber: 17 }, __self: this }, l)))); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 p-8", __source: { fileName: "", lineNumber: 222, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 223, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 224, columnNumber: 9 }, __self: this }, "✨ Magical Movie Matcher ✨"), step < 5 && renderStep(), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 231, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this })), movies.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, "🎬 Your Magical Movie Selection 🎬"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setStep(1); setMovies([]); setMood(""); setGenre(""); setDecade(""); setLanguage(""); }, className: "mt-4 px-6 py-2 bg-purple-500 text-white rounded-full hover:bg-purple-600 transition", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, "Start Over ✨")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, movies.map((movie, index)=>/*#__PURE__*/ React.createElement(MovieCard, { key: index, title: movie.title, description: movie.description, posterUrl: movie.posterUrl, streamingServices: movie.streamingServices, __source: { fileName: "", lineNumber: 258, columnNumber: 17 }, __self: this })))))); }