import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
type Mood = string;
type Feedback = "Liked" | "Disliked" | "Not Watched";
interface Movie {
title: string;
description: string;
}
interface RecommendationHistory {
movie: string;
feedback: Feedback;
}
function App() {
const [selectedMood, setSelectedMood] = useState<Mood | null>(null);
const [recommendation, setRecommendation] = useState<Movie | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [history, setHistory] = useState<RecommendationHistory[]>([]);
const [moods, setMoods] = useState<Mood[]>(["Happy", "Sad", "Excited", "Relaxed", "Thoughtful"]);
const getRecommendation = async (mood: Mood, feedback?: Feedback) => {
setLoading(true);
setError(null);
try {
const response = await fetch("/recommend", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ mood, history, feedback }),
});
if (!response.ok) {
throw new Error("Failed to get recommendation");
}
const data = await response.json();
setRecommendation(data);
} catch (err) {
setError("Failed to get recommendation. Please try again.");
console.error(err);
} finally {
setLoading(false);
}
};
const handleMoodSelect = (mood: Mood) => {
setSelectedMood(mood);
setHistory([]);
getRecommendation(mood);
};
const handleFeedback = (feedback: Feedback) => {
if (recommendation) {
const newHistory = [...history, { movie: recommendation.title, feedback }];
setHistory(newHistory);
getRecommendation(selectedMood!, feedback);
}
};
const handleMoreMoods = async () => {
setLoading(true);
try {
const response = await fetch("/more-moods");
if (!response.ok) {
throw new Error("Failed to get more moods");
}
const newMoods = await response.json();
setMoods([...newMoods]);
} catch (err) {
setError("Failed to get more moods. Please try again.");
console.error(err);
} finally {
setLoading(false);
}
};
return (
<div className="container">
<h1>π¬ AI Movie Mood Recommender</h1>
<div className="mood-selector">
<h2>Select your mood:</h2>
{moods.map((mood) => (
<button
key={mood}
onClick={() => handleMoodSelect(mood)}
className={selectedMood === mood ? "selected" : ""}
disabled={loading}
>
{mood} {getMoodEmoji(mood)}
</button>