@titas_mallick/wedding-site-gen 1.1.0 → 2.0.0

package/app/sagun/page.tsx

@@ -1,23 +1,43 @@
 "use client";
 
 import Image from "next/image";
-import { Card, CardBody, Button, Snippet, Input, Textarea, Divider, Spinner, Avatar, addToast } from "@heroui/react";
+import {
+  Card,
+  CardBody,
+  Button,
+  Snippet,
+  Input,
+  Textarea,
+  Divider,
+  Spinner,
+  Avatar,
+  addToast,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  useDisclosure,
+} from "@heroui/react";
 import { useEffect, useState } from "react";
-import { 
-  getFirestore, 
-  collection, 
-  addDoc, 
-  onSnapshot, 
-  query, 
-  orderBy, 
+import {
+  getFirestore,
+  collection,
+  addDoc,
+  onSnapshot,
+  query,
+  orderBy,
   serverTimestamp,
-  limit 
+  limit,
+  deleteDoc,
+  doc,
 } from "firebase/firestore";
+import { getAuth, onAuthStateChanged, User } from "firebase/auth";
 import { motion, AnimatePresence } from "framer-motion";
 
 import firebaseApp from "@/config/firebase";
 import { fontCursive, fontSans, fontMono } from "@/config/fonts";
-import { HeartFilledIcon } from "@/components/icons";
+import { HeartFilledIcon, TrashIcon } from "@/components/icons";
 
 const db = getFirestore(firebaseApp());
 
@@ -25,26 +45,68 @@ export default function SagunPage() {
   const [wishes, setWishes] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
-  const [formData, setFormData] = useState({ name: "", message: "", captcha: "" });
+  const [user, setUser] = useState<User | null>(null);
+  const [formData, setFormData] = useState({
+    name: "",
+    message: "",
+    captcha: "",
+  });
   const [sentiment, setSentiment] = useState<string>("");
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const [wishToDelete, setWishToDelete] = useState<string | null>(null);
 
   useEffect(() => {
-    const q = query(collection(db, "wishes"), orderBy("createdAt", "desc"), limit(20));
-    const unsubscribe = onSnapshot(q, (snapshot) => {
-      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+    const auth = getAuth(firebaseApp());
+    const unsubscribeAuth = onAuthStateChanged(auth, (currentUser) => {
+      setUser(currentUser);
+    });
+
+    const q = query(
+      collection(db, "wishes"),
+      orderBy("createdAt", "desc"),
+      limit(20),
+    );
+    const unsubscribeFirestore = onSnapshot(q, (snapshot) => {
+      const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
+
       setWishes(data);
       setLoading(false);
-      
+
       if (data.length >= 3) {
         generateSentimentSummary(data.slice(0, 10));
       }
     });
 
-    return () => unsubscribe();
+    return () => {
+      unsubscribeAuth();
+      unsubscribeFirestore();
+    };
   }, []);
 
+  const handleDeleteWish = async () => {
+    if (!wishToDelete) return;
+    
+    try {
+      await deleteDoc(doc(db, "wishes", wishToDelete));
+      addToast({
+        title: "Wish Deleted",
+        description: "The blessing has been removed.",
+        color: "warning",
+      });
+      setWishToDelete(null);
+    } catch (err) {
+      console.error("Error deleting wish", err);
+    }
+  };
+
+  const confirmDelete = (id: string) => {
+    setWishToDelete(id);
+    onOpen();
+  };
+
   const generateSentimentSummary = async (recentWishes: any[]) => {
     const apiKey = process.env.NEXT_PUBLIC_GEMINI_API_KEY;
+
     if (!apiKey) return;
 
     try {
@@ -54,19 +116,25 @@ export default function SagunPage() {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
-            contents: [{
-              parts: [{
-                text: `You are a wedding storyteller. Summarize the following guest wishes into a single, beautiful, and poetic paragraph (max 250 characters) that captures the collective love and blessings for Titas and Sukanya. Output ONLY the paragraph in PLAIN TEXT.`
-              }, {
-                text: `Wishes: ${recentWishes.map(w => w.message).join(" | ")}`
-              }]
-            }],
-            generationConfig: { temperature: 0.7, maxOutputTokens: 150 }
-          })
-        }
+            contents: [
+              {
+                parts: [
+                  {
+                    text: `You are a wedding storyteller. Summarize the following guest wishes into a single, beautiful, and poetic paragraph (max 250 characters) that captures the collective love and blessings for the couple. Output ONLY the paragraph in PLAIN TEXT.`,
+                  },
+                  {
+                    text: `Wishes: ${recentWishes.map((w) => w.message).join(" | ")}`,
+                  },
+                ],
+              },
+            ],
+            generationConfig: { temperature: 0.7, maxOutputTokens: 150 },
+          }),
+        },
       );
       const result = await response.json();
       const text = result.candidates?.[0]?.content?.parts?.[0]?.text;
+
       if (text) setSentiment(text);
     } catch (err) {
       console.error("Sentiment error", err);
@@ -75,14 +143,16 @@ export default function SagunPage() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     // Simple Wedding-Themed Bot Protection
     if (formData.captcha.trim() !== "10") {
       addToast({
         title: "Security Check",
-        description: "Please answer the question correctly (Hint: It is a number!).",
+        description:
+          "Please answer the question correctly (Hint: It is a number!).",
         color: "warning",
       });
+
       return;
     }
 
@@ -129,7 +199,9 @@ export default function SagunPage() {
           <p
             className={`${fontSans.className} text-lg md:text-xl text-default-600 dark:text-gray-100 leading-relaxed`}
           >
-            Your love and presence are the greatest gifts we could ask for. Share your blessings and wishes with us as we begin our new journey together.
+            Your love and presence are the greatest gifts we could ask for.
+            Share your blessings and wishes with us as we begin our new journey
+            together.
           </p>
         </div>
       </section>
@@ -150,7 +222,9 @@ export default function SagunPage() {
                   />
                 </div>
                 <div className="mt-4 md:mt-6 text-center">
-                  <p className={`${fontMono.className} text-xs md:text-sm text-default-400 uppercase tracking-[0.3em]`}>
+                  <p
+                    className={`${fontMono.className} text-xs md:text-sm text-default-400 uppercase tracking-[0.3em]`}
+                  >
                     Scan to Bless
                   </p>
                 </div>
@@ -175,14 +249,16 @@ export default function SagunPage() {
                   className="bg-wedding-gold-50 dark:bg-wedding-gold-900/10 text-wedding-gold-700 dark:text-wedding-gold-400 font-mono text-base md:text-xl py-2 px-4 md:py-3 md:px-6 rounded-2xl border border-wedding-gold-100/50 max-w-full"
                   symbol=""
                 >
-                  eugenics@ybl
+                  your-upi-id@upi
                 </Snippet>
 
                 <Button
                   as="a"
                   className="bg-wedding-pink-500 text-white font-bold shadow-lg shadow-wedding-pink-500/30 hover:bg-wedding-pink-600 h-12 md:h-14 px-8 md:px-10 text-base md:text-lg rounded-full w-full md:w-auto"
-                  href="upi://pay?pa=eugenics@ybl&pn=Titas"
-                  startContent={<HeartFilledIcon className="w-5 h-5 md:w-6 md:h-6" />}
+                  href="upi://pay?pa=your-upi-id@upi&pn=Groom"
+                  startContent={
+                    <HeartFilledIcon className="w-5 h-5 md:w-6 md:h-6" />
+                  }
                 >
                   Open UPI App
                 </Button>
@@ -198,67 +274,80 @@ export default function SagunPage() {
           {/* Wish Form */}
           <div className="lg:col-span-2 space-y-8">
             <div className="space-y-4">
-              <h2 className={`${fontCursive.className} text-5xl text-wedding-pink-600 dark:text-wedding-pink-400`}>
+              <h2
+                className={`${fontCursive.className} text-5xl text-wedding-pink-600 dark:text-wedding-pink-400`}
+              >
                 Leave a Wish
               </h2>
               <p className="text-default-500 dark:text-default-400">
-                Your words will be cherished forever. Write a small message for the couple.
+                Your words will be cherished forever. Write a small message for
+                the couple.
               </p>
             </div>
 
             <Card className="p-6 bg-white dark:bg-zinc-900 border border-wedding-pink-100 dark:border-wedding-pink-900/30 shadow-xl">
-              <form onSubmit={handleSubmit} className="space-y-6">
+              <form className="space-y-6" onSubmit={handleSubmit}>
                 <Input
                   isRequired
+                  classNames={{
+                    label: "text-wedding-pink-600 font-semibold",
+                    inputWrapper:
+                      "border-wedding-pink-100 focus-within:!border-wedding-pink-500",
+                    input: "outline-none",
+                  }}
                   label="Your Name"
                   labelPlacement="outside-top"
                   placeholder="E.g. Rahul & Priya"
-                  variant="bordered"
                   value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  classNames={{
-                    label: "text-wedding-pink-600 font-semibold",
-                    inputWrapper: "border-wedding-pink-100 focus-within:!border-wedding-pink-500",
-                    input: "outline-none"
-                  }}
+                  variant="bordered"
+                  onChange={(e) =>
+                    setFormData({ ...formData, name: e.target.value })
+                  }
                 />
                 <Textarea
                   isRequired
-                  label="Message"
-                  labelPlacement="outside-top"
-                  placeholder="Share your love and blessings..."
-                  variant="bordered"
-                  value={formData.message}
-                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                   classNames={{
                     label: "text-wedding-pink-600 font-semibold",
                     input: "outline-none p-2",
-                    inputWrapper: "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-32"
+                    inputWrapper:
+                      "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-32",
                   }}
+                  label="Message"
+                  labelPlacement="outside-top"
+                  placeholder="Share your love and blessings..."
+                  value={formData.message}
+                  variant="bordered"
+                  onChange={(e) =>
+                    setFormData({ ...formData, message: e.target.value })
+                  }
                 />
-                
+
                 {/* Bot Protection */}
                 <div className="p-4 bg-wedding-pink-50 dark:bg-wedding-pink-900/10 rounded-xl border border-wedding-pink-100 dark:border-wedding-pink-800/30">
-                   <p className="text-xs font-bold text-wedding-pink-600 dark:text-wedding-pink-400 uppercase tracking-widest mb-2">Security Question</p>
-                   <Input
+                  <p className="text-xs font-bold text-wedding-pink-600 dark:text-wedding-pink-400 uppercase tracking-widest mb-2">
+                    Security Question
+                  </p>
+                  <Input
                     isRequired
-                    label="How many years have we been together?"
-                    labelPlacement="outside-top"
-                    placeholder="Enter the number"
-                    variant="underlined"
-                    value={formData.captcha}
-                    onChange={(e) => setFormData({ ...formData, captcha: e.target.value })}
                     classNames={{
                       label: "text-default-600 text-xs",
                       input: "text-center font-bold outline-none",
                     }}
+                    label="How many years have we been together?"
+                    labelPlacement="outside-top"
+                    placeholder="Enter the number"
+                    value={formData.captcha}
+                    variant="underlined"
+                    onChange={(e) =>
+                      setFormData({ ...formData, captcha: e.target.value })
+                    }
                   />
                 </div>
 
-                <Button 
-                  type="submit"
-                  isLoading={submitting}
+                <Button
                   className="w-full bg-gradient-to-r from-wedding-pink-500 to-wedding-gold-500 text-white font-bold h-12"
+                  isLoading={submitting}
+                  type="submit"
                 >
                   Send Blessing
                 </Button>
@@ -272,20 +361,26 @@ export default function SagunPage() {
             <AnimatePresence>
               {sentiment && (
                 <motion.div
-                  initial={{ opacity: 0, scale: 0.9 }}
                   animate={{ opacity: 1, scale: 1 }}
                   className="relative p-8 rounded-[32px] overflow-hidden group"
+                  initial={{ opacity: 0, scale: 0.9 }}
                 >
                   <div className="absolute inset-0 bg-gradient-to-br from-wedding-pink-50 to-wedding-gold-50 dark:from-wedding-pink-900/20 dark:to-wedding-gold-900/20" />
-                  
+
                   <div className="relative z-10 space-y-4 text-center md:text-left">
                     <div className="flex items-center justify-center md:justify-start gap-3">
-                      <span className="p-2 bg-white dark:bg-zinc-800 rounded-full shadow-sm">✨</span>
-                      <h3 className={`${fontMono.className} text-xs uppercase tracking-[0.4em] text-wedding-gold-600 font-black`}>
+                      <span className="p-2 bg-white dark:bg-zinc-800 rounded-full shadow-sm">
+                        ✨
+                      </span>
+                      <h3
+                        className={`${fontMono.className} text-xs uppercase tracking-[0.4em] text-wedding-gold-600 font-black`}
+                      >
                         A Collective Blessing
                       </h3>
                     </div>
-                    <p className={`${fontCursive.className} text-3xl md:text-4xl text-default-800 dark:text-white leading-snug`}>
+                    <p
+                      className={`${fontCursive.className} text-3xl md:text-4xl text-default-800 dark:text-white leading-snug`}
+                    >
                       {sentiment}
                     </p>
                   </div>
@@ -296,7 +391,9 @@ export default function SagunPage() {
             {/* Wishes Feed */}
             <div className="space-y-6">
               <div className="flex items-center justify-between px-2">
-                <h3 className={`${fontSans.className} text-xl font-bold text-default-800 dark:text-white`}>
+                <h3
+                  className={`${fontSans.className} text-xl font-bold text-default-800 dark:text-white`}
+                >
                   Recent Wishes
                 </h3>
                 <span className="text-xs font-mono text-default-400 bg-default-100 dark:bg-zinc-800 px-3 py-1 rounded-full">
@@ -312,26 +409,45 @@ export default function SagunPage() {
                     <Spinner color="danger" />
                   </div>
                 ) : wishes.length === 0 ? (
-                  <p className="text-center py-10 text-default-400 italic">No wishes yet. Be the first to bless the couple!</p>
+                  <p className="text-center py-10 text-default-400 italic">
+                    No wishes yet. Be the first to bless the couple!
+                  </p>
                 ) : (
                   wishes.map((wish, i) => (
                     <motion.div
                       key={wish.id}
-                      initial={{ opacity: 0, x: 20 }}
                       animate={{ opacity: 1, x: 0 }}
+                      initial={{ opacity: 0, x: 20 }}
                       transition={{ delay: i * 0.1 }}
                     >
-                      <Card className="bg-white/40 dark:bg-zinc-900/40 backdrop-blur-sm border border-default-100 dark:border-zinc-800/50 hover:border-wedding-pink-200 transition-colors">
+                      <Card className="bg-white/40 dark:bg-zinc-900/40 backdrop-blur-sm border border-default-100 dark:border-zinc-800/50 hover:border-wedding-pink-200 transition-colors group relative">
                         <CardBody className="p-6">
                           <div className="flex items-start gap-4">
-                            <Avatar 
-                              name={wish.name} 
+                            <Avatar
                               className="bg-wedding-pink-100 text-wedding-pink-600 font-bold flex-shrink-0"
+                              name={wish.name}
                             />
-                            <div className="space-y-1">
-                              <p className="font-bold text-default-900 dark:text-white">{wish.name}</p>
-                              <p className="text-default-600 dark:text-gray-100 italic">&quot;{wish.message}&quot;</p>
+                            <div className="space-y-1 flex-grow">
+                              <p className="font-bold text-default-900 dark:text-white">
+                                {wish.name}
+                              </p>
+                              <p className="text-default-600 dark:text-gray-100 italic">
+                                &quot;{wish.message}&quot;
+                              </p>
                             </div>
+                            
+                            {user?.email === process.env.NEXT_PUBLIC_ADMIN_EMAIL && (
+                              <Button
+                                isIconOnly
+                                size="sm"
+                                variant="light"
+                                color="danger"
+                                className="opacity-0 group-hover:opacity-100 transition-opacity"
+                                onClick={() => confirmDelete(wish.id)}
+                              >
+                                <TrashIcon size={18} />
+                              </Button>
+                            )}
                           </div>
                         </CardBody>
                       </Card>
@@ -343,6 +459,38 @@ export default function SagunPage() {
           </div>
         </div>
       </section>
+
+      {/* Delete Confirmation Modal */}
+      <Modal isOpen={isOpen} onOpenChange={onOpenChange} backdrop="blur">
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1 text-danger">
+                Delete Blessing?
+              </ModalHeader>
+              <ModalBody>
+                <p className="text-default-600">
+                  Are you sure you want to remove this beautiful blessing? This action cannot be undone.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button variant="light" onPress={onClose}>
+                  Keep it
+                </Button>
+                <Button 
+                  color="danger" 
+                  onPress={() => {
+                    handleDeleteWish();
+                    onClose();
+                  }}
+                >
+                  Delete Forever
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
     </div>
   );
 }