"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, buttonTap } from "@/lib/animations" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { Tag, Plus, CheckCircle2, XCircle, Percent, Trash2 } from "lucide-react" interface AppliedCoupon { code: string discount: string type: "percentage" | "fixed" expires: string } const appliedCoupons: AppliedCoupon[] = [ { code: "WELCOME20", discount: "20%", type: "percentage", expires: "2026-08-01" }, { code: "SAVE10", discount: "$10.00", type: "fixed", expires: "2026-07-15" }, ] export default function Coupons() { const [couponInput, setCouponInput] = useState("") const [applied, setApplied] = useState(appliedCoupons) const [feedback, setFeedback] = useState<{ type: "success" | "error"; message: string } | null>(null) const [adminMode, setAdminMode] = useState(false) const [newCode, setNewCode] = useState("") const [newDiscount, setNewDiscount] = useState("") const handleApplyCoupon = () => { if (!couponInput.trim()) return if (couponInput === "INVALID") { setFeedback({ type: "error", message: "Invalid or expired coupon code." }) return } if (applied.some((c) => c.code === couponInput.toUpperCase())) { setFeedback({ type: "error", message: "Coupon already applied." }) return } setApplied([...applied, { code: couponInput.toUpperCase(), discount: "10%", type: "percentage", expires: "2026-09-01" }]) setFeedback({ type: "success", message: "Coupon applied successfully!" }) setCouponInput("") setTimeout(() => setFeedback(null), 3000) } const handleRemoveCoupon = (code: string) => { setApplied(applied.filter((c) => c.code !== code)) } const handleAddCoupon = () => { if (!newCode.trim() || !newDiscount.trim()) return setApplied([...applied, { code: newCode.toUpperCase(), discount: newDiscount, type: "percentage", expires: "2026-12-31" }]) setNewCode("") setNewDiscount("") } return (

Coupons Apply discount codes to your account

setCouponInput(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleApplyCoupon()} />

{feedback && ( {feedback.type === "success" ? : } {feedback.message} )} {applied.length > 0 ? (

Applied Coupons

{applied.map((coupon) => (

{coupon.code}

{coupon.discount} · Expires {coupon.expires}

{coupon.discount} handleRemoveCoupon(coupon.code)} className="text-muted-foreground hover:text-destructive" >

))}

) : (

No coupons applied.

)} {adminMode && ( Manage Coupons Create new discount codes

Code setNewCode(e.target.value)} />

Discount setNewDiscount(e.target.value)} />

)}

) }