'use client'; import React, { useState, useEffect } from 'react'; import { Star, Plus, Minus, ShoppingCart, Loader2, Send, MessageSquare } from 'lucide-react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { useFoodMartStore, type CartItem } from '@/store/foodmart'; import { toast } from '@/hooks/use-toast'; import type { FoodItem } from './food-card'; import { motion, AnimatePresence } from 'framer-motion'; interface FoodModalProps { food: FoodItem | null; open: boolean; onOpenChange: (open: boolean) => void; } interface ReviewData { id: string; name: string; rating: number; comment: string; createdAt: string; } interface ReviewsResponse { reviews: ReviewData[]; averageRating: number; totalCount: number; distribution: Record; } function formatPrice(price: number): string { return new Intl.NumberFormat('id-ID').format(price); } function sanitizeHTML(html: string): string { let clean = html.replace(/)<[^<]*)*<\/script>/gi, ''); clean = clean.replace(/\bon\w+="[^"]*"/gi, ''); clean = clean.replace(/\bon\w+='[^']*'/gi, ''); clean = clean.replace(/\bon\w+=\S+/gi, ''); return clean; } function formatDate(dateStr: string): string { const date = new Date(dateStr); const now = new Date(); const diffMs = now.getTime() - date.getTime(); const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); if (diffDays === 0) return 'Hari ini'; if (diffDays === 1) return 'Kemarin'; if (diffDays < 7) return `${diffDays} hari lalu`; if (diffDays < 30) return `${Math.floor(diffDays / 7)} minggu lalu`; return date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' }); } const SPICY_LEVELS = [ { level: 0, emoji: '❌', label: 'Tidak Pedas' }, { level: 1, emoji: '🌶️', label: 'Sedikit Pedas' }, { level: 2, emoji: '🌶️🌶️', label: 'Pedas' }, { level: 3, emoji: '🔥', label: 'Sangat Pedas' }, ]; const SWEETNESS_LEVELS = [ { level: 0, emoji: '🚫', label: 'Less Sugar' }, { level: 1, emoji: '🍬', label: 'Normal' }, { level: 2, emoji: '🍯', label: 'Extra Sweet' }, ]; const VARIANTS = ['Regular', 'Large']; export default function FoodModal({ food, open, onOpenChange }: FoodModalProps) { const [quantity, setQuantity] = useState(1); const [note, setNote] = useState(''); const [variant, setVariant] = useState('Regular'); const [optionLevel, setOptionLevel] = useState(0); const addToCart = useFoodMartStore((s) => s.addToCart); const [reviewsData, setReviewsData] = useState(null); const [reviewsLoading, setReviewsLoading] = useState(false); const [showReviewForm, setShowReviewForm] = useState(false); const [reviewName, setReviewName] = useState(''); const [reviewRating, setReviewRating] = useState(5); const [reviewComment, setReviewComment] = useState(''); const [reviewSubmitting, setReviewSubmitting] = useState(false); const prevOpen = React.useRef(false); const prevFoodId = React.useRef(null); React.useEffect(() => { if (open && !prevOpen.current) { setQuantity(1); setNote(''); setVariant('Regular'); setOptionLevel(0); setShowReviewForm(false); setReviewName(''); setReviewRating(5); setReviewComment(''); } prevOpen.current = open; }, [open]); useEffect(() => { if (food && open && food.id !== prevFoodId.current) { prevFoodId.current = food.id; fetchReviews(food.id); } }, [food, open]); const fetchReviews = async (foodId: string) => { setReviewsLoading(true); try { const res = await fetch(`/api/reviews?foodId=${foodId}&limit=10`); const data = await res.json(); if (data.success) { setReviewsData(data.data); } } catch { // silent } finally { setReviewsLoading(false); } }; const handleSubmitReview = async () => { if (!food) return; if (!reviewName.trim()) { toast({ title: 'Nama wajib diisi', description: 'Masukkan nama Anda untuk mengirim ulasan', variant: 'destructive' }); return; } setReviewSubmitting(true); try { const res = await fetch('/api/reviews', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ foodId: food.id, name: reviewName.trim(), rating: reviewRating, comment: reviewComment.trim() }), }); const data = await res.json(); if (!data.success) throw new Error(data.error || 'Gagal mengirim ulasan'); toast({ title: 'Ulasan Terkirim! 🎉', description: 'Terima kasih atas ulasan Anda' }); setShowReviewForm(false); setReviewName(''); setReviewRating(5); setReviewComment(''); fetchReviews(food.id); } catch (error) { toast({ title: 'Gagal Mengirim', description: error instanceof Error ? error.message : 'Terjadi kesalahan', variant: 'destructive' }); } finally { setReviewSubmitting(false); } }; if (!food) return null; const isDrink = food.category?.slug === 'minuman'; const currentPrice = food.discountPrice || food.price; const variantMultiplier = variant === 'Large' ? 1.4 : 1; const totalPrice = Math.round(currentPrice * variantMultiplier * quantity); const displayRating = reviewsData?.averageRating || food.rating; const displayReviewCount = reviewsData?.totalCount || food.reviews; const recentReviews = reviewsData?.reviews?.slice(0, 3) || []; const distribution = reviewsData?.distribution || { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 }; const maxDistCount = Math.max(...Object.values(distribution), 1); const handleAddToCart = () => { const item: CartItem = { id: food.id, name: `${food.name}${variant !== 'Regular' ? ` (${variant})` : ''}`, price: Math.round(currentPrice * variantMultiplier), thumbnail: food.thumbnail, quantity, variant, note: optionLevel > 0 ? `${isDrink ? SWEETNESS_LEVELS[optionLevel].label : SPICY_LEVELS[optionLevel].label}${note ? ', ' + note : ''}` : note, }; addToCart(item); toast({ title: 'Ditambahkan ke Keranjang! 🎉', description: `${item.name} x${quantity}` }); onOpenChange(false); }; return (