Add AI party planner recommendations to drinks page

Author: fuzziecoder

pages/DrinksPage.tsx

@@ -7,9 +7,10 @@ import Modal from "../components/common/Modal";
 import Input from "../components/common/Input";
 import { spotService, paymentService, drinkService, cigaretteService, foodService, drinkBrandService, userDrinkSelectionService, sponsorService } from "../services/database";
 import { supabase } from "../services/supabase";
-import { Plus, ThumbsUp, Trash2, Loader2, Image as ImageIcon, X, Camera, ShoppingCart, Minus, Check, Wine, Search, Menu, ArrowLeft, Star, Edit, Utensils, Download } from "lucide-react";
+import { Plus, ThumbsUp, Trash2, Loader2, Image as ImageIcon, X, Camera, ShoppingCart, Minus, Check, Wine, Search, Menu, ArrowLeft, Star, Edit, Utensils, Download, Sparkles } from "lucide-react";
 import ShinyText from "../components/common/ShinyText";
 import SponsorBadge from "../components/common/SponsorBadge";
+import { getPartyAssistantSuggestions, PartyAssistantSuggestion } from "../services/partyAssistant";
 
 const DrinksPage: React.FC = () => {
   const { profile } = useAuth();
@@ -56,6 +57,9 @@ const DrinksPage: React.FC = () => {
   const [priceInput, setPriceInput] = useState("");
   const [currentUserUUID, setCurrentUserUUID] = useState<string | null>(null);
   const [isExportMenuOpen, setIsExportMenuOpen] = useState(false);
+  const [aiPrompt, setAiPrompt] = useState("Plan for a chill Friday night with balanced drinks and snacks");
+  const [aiSuggestions, setAiSuggestions] = useState<PartyAssistantSuggestion[]>([]);
+  const [isAiLoading, setIsAiLoading] = useState(false);
 
   const isAdmin = profile?.role === UserRole.ADMIN;
 
@@ -652,6 +656,25 @@ const DrinksPage: React.FC = () => {
     return userVotedDrinks.has(drink.id);
   };
 
+  const handleGenerateAiSuggestions = async () => {
+    setIsAiLoading(true);
+    try {
+      const suggestions = await getPartyAssistantSuggestions({
+        prompt: aiPrompt,
+        budget: spot?.budget,
+        drinks,
+        foods,
+        cigarettes,
+      });
+      setAiSuggestions(suggestions);
+    } catch (error) {
+      console.error("Failed to generate AI suggestions", error);
+      setAiSuggestions([]);
+    } finally {
+      setIsAiLoading(false);
+    }
+  };
+
   // Export data to Excel (CSV format)
   const exportToExcel = () => {
     if (!isAdmin) return;
@@ -877,6 +900,43 @@ const DrinksPage: React.FC = () => {
             />
           </div>
 
+          <Card className="p-4 bg-gradient-to-br from-indigo-500/15 to-fuchsia-500/10 border border-indigo-500/30">
+            <div className="flex items-start justify-between gap-3 mb-3">
+              <div>
+                <p className="text-sm text-indigo-200 font-semibold flex items-center gap-2">
+                  <Sparkles size={16} />
+                  AI Party Planner
+                </p>
+                <p className="text-xs text-zinc-300 mt-1">Uses Gemini when <code>VITE_GEMINI_API_KEY</code> is configured; otherwise falls back to smart local recommendations.</p>
+              </div>
+              <button
+                onClick={handleGenerateAiSuggestions}
+                disabled={isAiLoading}
+                className="px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium disabled:opacity-60"
+              >
+                {isAiLoading ? "Thinking..." : "Generate"}
+              </button>
+            </div>
+            <Input
+              value={aiPrompt}
+              onChange={(e) => setAiPrompt(e.target.value)}
+              placeholder="Example: Build a premium menu for 8 people under ₹3500"
+            />
+
+            {aiSuggestions.length > 0 && (
+              <div className="grid md:grid-cols-3 gap-3 mt-4">
+                {aiSuggestions.map((suggestion) => (
+                  <div key={suggestion.title} className="rounded-xl border border-zinc-700/60 bg-black/30 p-3">
+                    <p className="font-semibold text-white text-sm">{suggestion.title}</p>
+                    <p className="text-xs text-zinc-300 mt-1">{suggestion.reason}</p>
+                    <p className="text-xs text-emerald-300 mt-2">Estimated: ₹{suggestion.estimatedCost}</p>
+                    <p className="text-xs text-zinc-400 mt-2">{suggestion.picks.join(" • ")}</p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </Card>
+
           {/* Type Toggle Pills */}
           <div className="flex gap-2">
             {(['drinks', 'food', 'cigarette'] as const).map((type) => (
@@ -2312,4 +2372,3 @@ const DrinksPage: React.FC = () => {
 };
 
 export default DrinksPage;
-

services/partyAssistant.ts

@@ -0,0 +1,112 @@
+import { Cigarette, Drink, Food } from "../types";
+
+interface PartyAssistantInput {
+  prompt: string;
+  budget?: number;
+  drinks: Drink[];
+  foods: Food[];
+  cigarettes: Cigarette[];
+}
+
+export interface PartyAssistantSuggestion {
+  title: string;
+  reason: string;
+  estimatedCost: number;
+  picks: string[];
+}
+
+const parseCurrency = (value: unknown): number => {
+  const num = Number(value);
+  return Number.isFinite(num) ? Math.max(0, num) : 0;
+};
+
+const buildFallbackSuggestions = ({ prompt, drinks, foods, cigarettes, budget }: PartyAssistantInput): PartyAssistantSuggestion[] => {
+  const lowerPrompt = prompt.toLowerCase();
+  const targetBudget = budget ?? 2000;
+
+  const drinkPick = [...drinks]
+    .sort((a, b) => parseCurrency(a.price) - parseCurrency(b.price))
+    .slice(0, 2)
+    .map((item) => item.name);
+
+  const foodPick = [...foods]
+    .sort((a, b) => parseCurrency(a.price) - parseCurrency(b.price))
+    .slice(0, 2)
+    .map((item) => item.name);
+
+  const cigarettePick = [...cigarettes]
+    .sort((a, b) => parseCurrency(a.price) - parseCurrency(b.price))
+    .slice(0, 1)
+    .map((item) => item.name);
+
+  const chillMode = lowerPrompt.includes("chill") || lowerPrompt.includes("casual");
+
+  return [
+    {
+      title: chillMode ? "Chill Starter Combo" : "Balanced Party Combo",
+      reason: "Generated locally using price-optimized item ranking because AI key is unavailable.",
+      estimatedCost: Math.min(targetBudget * 0.5, 1200),
+      picks: [...drinkPick, ...foodPick],
+    },
+    {
+      title: "Night-Long Upgrade",
+      reason: "Keeps energy balanced with one snack + one premium beverage + optional smoke pick.",
+      estimatedCost: Math.min(targetBudget * 0.8, 2200),
+      picks: [...drinkPick.slice(0, 1), ...foodPick.slice(0, 1), ...cigarettePick],
+    },
+  ];
+};
+
+export const getPartyAssistantSuggestions = async (
+  input: PartyAssistantInput
+): Promise<PartyAssistantSuggestion[]> => {
+  const apiKey = import.meta.env.VITE_GEMINI_API_KEY;
+
+  if (!apiKey) {
+    return buildFallbackSuggestions(input);
+  }
+
+  const payload = {
+    prompt: `You are a party planning AI. Return JSON only with format: {"suggestions":[{"title":"","reason":"","estimatedCost":0,"picks":["item"]}]}. Keep max 3 suggestions.\nPrompt:${input.prompt}\nBudget:${input.budget ?? "unknown"}\nDrinks:${JSON.stringify(input.drinks.slice(0, 12))}\nFoods:${JSON.stringify(input.foods.slice(0, 12))}\nCigarettes:${JSON.stringify(input.cigarettes.slice(0, 8))}`,
+  };
+
+  const response = await fetch(
+    `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${apiKey}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        contents: [{ parts: [{ text: payload.prompt }] }],
+      }),
+    }
+  );
+
+  if (!response.ok) {
+    return buildFallbackSuggestions(input);
+  }
+
+  const data = await response.json();
+  const text = data?.candidates?.[0]?.content?.parts?.[0]?.text;
+
+  if (!text) {
+    return buildFallbackSuggestions(input);
+  }
+
+  try {
+    const jsonBlock = text.match(/\{[\s\S]*\}/)?.[0] || text;
+    const parsed = JSON.parse(jsonBlock);
+    const suggestions = parsed?.suggestions;
+    if (!Array.isArray(suggestions)) {
+      return buildFallbackSuggestions(input);
+    }
+
+    return suggestions.slice(0, 3).map((item: any) => ({
+      title: String(item.title || "AI Suggestion"),
+      reason: String(item.reason || "AI-generated recommendation"),
+      estimatedCost: parseCurrency(item.estimatedCost),
+      picks: Array.isArray(item.picks) ? item.picks.map((pick: unknown) => String(pick)).slice(0, 6) : [],
+    }));
+  } catch {
+    return buildFallbackSuggestions(input);
+  }
+};

vite-env.d.ts

@@ -3,7 +3,7 @@
 interface ImportMetaEnv {
   readonly VITE_SUPABASE_URL: string;
   readonly VITE_SUPABASE_ANON_KEY: string;
-  readonly GEMINI_API_KEY?: string;
+  readonly VITE_GEMINI_API_KEY?: string;
 }
 
 interface ImportMeta {