[V0_FILE]typescriptreact:file="app/login/page.tsx" "use client" import type React from "react" import { useState } from "react" import { useRouter, useSearchParams } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Alert, AlertDescription } from "@/components/ui/alert" import { Droplets, Mail, Lock, Eye, EyeOff } from "lucide-react" import { useAuth } from "@/hooks/use-auth" export default function LoginPage() { const [formData, setFormData] = useState({ email: "", password: "", rememberMe: false, }) const [showPassword, setShowPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const { login } = useAuth() const router = useRouter() const searchParams = useSearchParams() const redirectTo = searchParams.get("redirect") || "/" const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { await login(formData.email, formData.password, formData.rememberMe) router.push(redirectTo) } catch (err) { setError("Invalid email or password. Please try again.") } finally { setIsLoading(false) } } const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } return (

{/* Header */}

clothesDesign

Welcome back

{error && ( {error} )}

Email address

Password

setFormData((prev) => ({ ...prev, rememberMe: checked as boolean })) } /> Remember me

Forgot password?

Or continue with

Don't have an account?{" "} Sign up

) } [V0_FILE]typescriptreact:file="app/login/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/shop/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/providers/auth-provider.tsx" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" interface User { id: string name: string email: string avatar?: string role: "user" | "admin" } interface AuthContextType { user: User | null login: (email: string, password: string, rememberMe?: boolean) => Promise logout: () => void register: (userData: any) => Promise isLoading: boolean isAdmin: boolean } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Check for stored auth token and validate const token = localStorage.getItem("auth_token") if (token) { // Mock user data - in real app, validate token with API setUser({ id: "1", name: "John Doe", email: "john@example.com", role: "user", }) } setIsLoading(false) }, []) const login = async (email: string, password: string, rememberMe = false) => { // Mock login - replace with actual API call if (email === "admin@example.com") { const userData = { id: "1", name: "Admin User", email: "admin@example.com", role: "admin" as const, } setUser(userData) localStorage.setItem("auth_token", "mock_token") } else { const userData = { id: "2", name: "John Doe", email: email, role: "user" as const, } setUser(userData) localStorage.setItem("auth_token", "mock_token") } } const logout = () => { setUser(null) localStorage.removeItem("auth_token") } const register = async (userData: any) => { // Mock registration - replace with actual API call const newUser = { id: Date.now().toString(), name: userData.username, email: userData.email, role: "user" as const, } setUser(newUser) localStorage.setItem("auth_token", "mock_token") } const isAdmin = user?.role === "admin" return ( {children} ) } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } export { AuthContext } [V0_FILE]typescriptreact:file="components/providers/cart-provider.tsx" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" interface CartItem { id: string productId: number name: string price: number quantity: number size: string color: string image: string } interface CartContextType { items: CartItem[] itemCount: number totalAmount: number addItem: (item: Omit) => void removeItem: (id: string) => void updateQuantity: (id: string, quantity: number) => void updateItemOptions: (id: string, size: string, color: string) => void clearCart: () => void } const CartContext = createContext(undefined) export function CartProvider({ children }: { children: ReactNode }) { const [items, setItems] = useState([]) useEffect(() => { // Load cart from localStorage const savedCart = localStorage.getItem("cart_items") if (savedCart) { setItems(JSON.parse(savedCart)) } }, []) useEffect(() => { // Save cart to localStorage localStorage.setItem("cart_items", JSON.stringify(items)) }, [items]) const addItem = (newItem: Omit) => { const id = Date.now().toString() setItems((prev) => [...prev, { ...newItem, id }]) } const removeItem = (id: string) => { setItems((prev) => prev.filter((item) => item.id !== id)) } const updateQuantity = (id: string, quantity: number) => { if (quantity <= 0) { removeItem(id) } else { setItems((prev) => prev.map((item) => (item.id === id ? { ...item, quantity } : item))) } } const updateItemOptions = (id: string, size: string, color: string) => { setItems((prev) => prev.map((item) => (item.id === id ? { ...item, size, color } : item))) } const clearCart = () => { setItems([]) } const itemCount = items.reduce((total, item) => total + item.quantity, 0) const totalAmount = items.reduce((total, item) => total + item.price * item.quantity, 0) return ( sum + item.quantity, 0), totalAmount, addItem, removeItem, updateQuantity, updateItemOptions, clearCart, }} > {children} ) } export function useCart() { const context = useContext(CartContext) if (context === undefined) { throw new Error("useCart must be used within a CartProvider") } return context } export { CartContext } [V0_FILE]typescriptreact:file="hooks/use-auth.ts" "use client" import { useContext } from "react" import { AuthContext } from "@/components/providers/auth-provider" export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="hooks/use-cart.ts" "use client" import { useContext } from "react" import { CartContext } from "@/components/providers/cart-provider" export function useCart() { const context = useContext(CartContext) if (context === undefined) { throw new Error("useCart must be used within a CartProvider") } return context } [V0_FILE]typescriptreact:file="app/register/page.tsx" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Progress } from "@/components/ui/progress" import { Droplets, User, Mail, Lock, Eye, EyeOff, Check, X } from "lucide-react" import { useAuth } from "@/hooks/use-auth" export default function RegisterPage() { const [formData, setFormData] = useState({ username: "", email: "", password: "", confirmPassword: "", agreeToTerms: false, }) const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [passwordStrength, setPasswordStrength] = useState(0) const { register } = useAuth() const router = useRouter() const calculatePasswordStrength = (password: string) => { let strength = 0 if (password.length >= 8) strength += 25 if (/[A-Z]/.test(password)) strength += 25 if (/[a-z]/.test(password)) strength += 25 if (/[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password)) strength += 25 return strength } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") // Validation if (formData.password !== formData.confirmPassword) { setError("Passwords do not match") setIsLoading(false) return } if (!formData.agreeToTerms) { setError("Please agree to the terms and conditions") setIsLoading(false) return } try { await register(formData) router.push("/verify?email=" + encodeURIComponent(formData.email)) } catch (err) { setError("Registration failed. Please try again.") } finally { setIsLoading(false) } } const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) if (name === "password") { setPasswordStrength(calculatePasswordStrength(value)) } } const passwordRequirements = [ { text: "At least 8 characters", met: formData.password.length >= 8 }, { text: "One uppercase letter", met: /[A-Z]/.test(formData.password) }, { text: "One lowercase letter", met: /[a-z]/.test(formData.password) }, { text: "One number and special character", met: /[0-9]/.test(formData.password) && /[^A-Za-z0-9]/.test(formData.password), }, ] return (

{/* Header */}

clothesDesign

Create your account

Join thousands of designers and creators

{error && ( {error} )}

Username

Email address

Password

{formData.password && (

Password strength {passwordStrength < 50 ? "Weak" : passwordStrength < 75 ? "Medium" : "Strong"}

{passwordRequirements.map((req, index) => (

{req.met ? ( ) : ( )} {req.text}

))}

)}

Confirm Password

{formData.confirmPassword && formData.password !== formData.confirmPassword && (

Passwords do not match

)}

setFormData((prev) => ({ ...prev, agreeToTerms: checked as boolean })) } /> I agree to the{" "} Terms & Conditions {" "} and{" "} Privacy Policy

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/cart/page.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription } from "@/components/ui/alert" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Minus, Plus, Trash2, ShoppingBag, ArrowLeft, Tag } from "lucide-react" import Image from "next/image" import Link from "next/link" import { useCart } from "@/hooks/use-cart" export default function CartPage() { const { items, updateQuantity, removeItem, updateItemOptions, totalAmount } = useCart() const [couponCode, setCouponCode] = useState("") const [appliedCoupon, setAppliedCoupon] = useState<{ code: string; discount: number } | null>(null) const [couponError, setCouponError] = useState("") const applyCoupon = () => { setCouponError("") // Mock coupon validation const validCoupons = { SAVE10: 10, WELCOME20: 20, STUDENT15: 15, } if (validCoupons[couponCode as keyof typeof validCoupons]) { setAppliedCoupon({ code: couponCode, discount: validCoupons[couponCode as keyof typeof validCoupons], }) setCouponCode("") } else { setCouponError("Invalid coupon code") } } const removeCoupon = () => { setAppliedCoupon(null) } const subtotal = totalAmount const discountAmount = appliedCoupon ? (subtotal * appliedCoupon.discount) / 100 : 0 const taxRate = 0.1 // 10% const taxAmount = (subtotal - discountAmount) * taxRate const finalTotal = subtotal - discountAmount + taxAmount if (items.length === 0) { return (

Your cart is empty

Looks like you haven't added any items to your cart yet.

) } return (

Shopping Cart

{items.length} item{items.length !== 1 ? "s" : ""} in your cart

{/* Cart Items */}

{items.map((item) => (

{item.name}

Size:

Color:

${item.price.toFixed(2)}

{item.quantity}

))}

{/* Order Summary */}

Order Summary {/* Coupon Section */}

setCouponCode(e.target.value.toUpperCase())} />

{couponError && ( {couponError} )} {appliedCoupon && (

{appliedCoupon.code} - {appliedCoupon.discount}% off

)}

{/* Price Breakdown */}

Subtotal ${subtotal.toFixed(2)}

{appliedCoupon && (

Discount ({appliedCoupon.discount}%) -${discountAmount.toFixed(2)}

)}

Tax (10%) ${taxAmount.toFixed(2)}

Shipping Calculated at checkout

Total ${finalTotal.toFixed(2)}

{/* Savings Display */} {appliedCoupon && (

You're saving ${discountAmount.toFixed(2)}!

)}

) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 238 75% 65%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222.2 84% 4.9%; --muted: 210 40% 96%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96%; --accent-foreground: 222.2 84% 4.9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 238 75% 65%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 238 75% 65%; --primary-foreground: 222.2 84% 4.9%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 238 75% 65%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } } [V0_FILE]typescriptreact:file="app/verify/page.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Droplets, Mail, CheckCircle } from "lucide-react" export default function VerifyPage() { const [code, setCode] = useState(["", "", "", "", "", ""]) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [success, setSuccess] = useState(false) const [resendTimer, setResendTimer] = useState(60) const [canResend, setCanResend] = useState(false) const router = useRouter() const searchParams = useSearchParams() const email = searchParams.get("email") || "" useEffect(() => { if (resendTimer > 0) { const timer = setTimeout(() => setResendTimer(resendTimer - 1), 1000) return () => clearTimeout(timer) } else { setCanResend(true) } }, [resendTimer]) const handleCodeChange = (index: number, value: string) => { if (value.length > 1) return const newCode = [...code] newCode[index] = value setCode(newCode) // Auto-focus next input if (value && index < 5) { const nextInput = document.getElementById(`code-${index + 1}`) nextInput?.focus() } } const handleKeyDown = (index: number, e: React.KeyboardEvent) => { if (e.key === "Backspace" && !code[index] && index > 0) { const prevInput = document.getElementById(`code-${index - 1}`) prevInput?.focus() } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const verificationCode = code.join("") if (verificationCode.length !== 6) { setError("Please enter the complete 6-digit code") return } setIsLoading(true) setError("") try { // Mock verification - replace with actual API call await new Promise((resolve) => setTimeout(resolve, 1000)) if (verificationCode === "123456") { setSuccess(true) setTimeout(() => { router.push("/login?verified=true") }, 2000) } else { setError("Invalid verification code. Please try again.") } } catch (err) { setError("Verification failed. Please try again.") } finally { setIsLoading(false) } } const handleResend = async () => { setCanResend(false) setResendTimer(60) setError("") try { // Mock resend - replace with actual API call await new Promise((resolve) => setTimeout(resolve, 500)) // Show success message or toast } catch (err) { setError("Failed to resend code. Please try again.") } } if (success) { return (

Email Verified!

Your email has been successfully verified.

Redirecting to login...

) } return (

clothesDesign

Verify your email

We've sent a 6-digit code to {email}

Enter Verification Code Enter the 6-digit code sent to your email

{error && ( {error} )}

{code.map((digit, index) => ( handleCodeChange(index, e.target.value)} onKeyDown={(e) => handleKeyDown(index, e)} className="w-12 h-12 text-center text-lg font-bold" /> ))}

Didn't receive the code?{" "} {canResend ? ( ) : ( Resend in {resendTimer}s )}

) } [V0_FILE]typescriptreact:file="app/verify/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/forgot-password/page.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Droplets, Mail, ArrowLeft, CheckCircle } from "lucide-react" export default function ForgotPasswordPage() { const [email, setEmail] = useState("") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [success, setSuccess] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { // Mock API call - replace with actual implementation await new Promise((resolve) => setTimeout(resolve, 1000)) setSuccess(true) } catch (err) { setError("Failed to send reset email. Please try again.") } finally { setIsLoading(false) } } if (success) { return (

clothesDesign

Check your email

We've sent a password reset link to {email}

Didn't receive the email? Check your spam folder or{" "}

) } return (

clothesDesign

Forgot your password?

Enter your email address and we'll send you a link to reset your password

Reset Password Enter your email to receive a reset link

) } [V0_FILE]typescriptreact:file="app/reset-password/page.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Progress } from "@/components/ui/progress" import { Droplets, Lock, Eye, EyeOff, Check, X, CheckCircle } from "lucide-react" export default function ResetPasswordPage() { const [formData, setFormData] = useState({ password: "", confirmPassword: "", }) const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [success, setSuccess] = useState(false) const [tokenValid, setTokenValid] = useState(true) const [passwordStrength, setPasswordStrength] = useState(0) const router = useRouter() const searchParams = useSearchParams() const token = searchParams.get("token") useEffect(() => { // Validate token on component mount if (!token) { setTokenValid(false) return } // Mock token validation - replace with actual API call const validateToken = async () => { try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) // For demo, consider token valid if it exists setTokenValid(true) } catch (err) { setTokenValid(false) } } validateToken() }, [token]) const calculatePasswordStrength = (password: string) => { let strength = 0 if (password.length >= 8) strength += 25 if (/[A-Z]/.test(password)) strength += 25 if (/[a-z]/.test(password)) strength += 25 if (/[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password)) strength += 25 return strength } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") if (formData.password !== formData.confirmPassword) { setError("Passwords do not match") setIsLoading(false) return } if (passwordStrength < 75) { setError("Password is too weak. Please choose a stronger password.") setIsLoading(false) return } try { // Mock API call - replace with actual implementation await new Promise((resolve) => setTimeout(resolve, 1000)) setSuccess(true) setTimeout(() => { router.push("/login?reset=success") }, 2000) } catch (err) { setError("Failed to reset password. Please try again.") } finally { setIsLoading(false) } } const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) if (name === "password") { setPasswordStrength(calculatePasswordStrength(value)) } } const passwordRequirements = [ { text: "At least 8 characters", met: formData.password.length >= 8 }, { text: "One uppercase letter", met: /[A-Z]/.test(formData.password) }, { text: "One lowercase letter", met: /[a-z]/.test(formData.password) }, { text: "One number and special character", met: /[0-9]/.test(formData.password) && /[^A-Za-z0-9]/.test(formData.password), }, ] if (!tokenValid) { return (

Invalid Reset Link

This password reset link is invalid or has expired.

) } if (success) { return (

Password Reset Successful!

Your password has been successfully reset.

Redirecting to login...

) } return (

clothesDesign

Reset your password

Enter your new password below

New Password Choose a strong password for your account

{error && ( {error} )}

New Password

{formData.password && (

Password strength {passwordStrength < 50 ? "Weak" : passwordStrength < 75 ? "Medium" : "Strong"}

{passwordRequirements.map((req, index) => (

{req.met ? ( ) : ( )} {req.text}

))}

)}

Confirm New Password

{formData.confirmPassword && formData.password !== formData.confirmPassword && (

Passwords do not match

)}

) } [V0_FILE]typescriptreact:file="app/reset-password/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/product/[slug]/page.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { useParams } from "next/navigation" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Star, Heart, Share2, Minus, Plus, ShoppingCart, Truck, Shield, RotateCcw, Home, ChevronRightIcon as BreadcrumbChevron, } from "lucide-react" import { useCart } from "@/hooks/use-cart" import { useAuth } from "@/hooks/use-auth" interface Product { id: number name: string slug: string description: string price: number originalPrice?: number category: string images: string[] colors: { name: string; value: string; image: string }[] sizes: string[] rating: number reviews: number inStock: boolean bestseller: boolean specifications: { [key: string]: string } features: string[] } interface Review { id: number user: string rating: number comment: string date: string verified: boolean } export default function ProductDetailPage() { const params = useParams() const { addItem } = useCart() const { user } = useAuth() const [product, setProduct] = useState(null) const [reviews, setReviews] = useState([]) const [relatedProducts, setRelatedProducts] = useState([]) const [selectedImageIndex, setSelectedImageIndex] = useState(0) const [selectedColor, setSelectedColor] = useState("") const [selectedSize, setSelectedSize] = useState("") const [quantity, setQuantity] = useState(1) const [isFavorite, setIsFavorite] = useState(false) const [isLoading, setIsLoading] = useState(true) const [isZoomed, setIsZoomed] = useState(false) useEffect(() => { // Mock data loading const loadProduct = async () => { setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) const mockProduct: Product = { id: 1, name: "Premium Cotton T-Shirt", slug: params.slug as string, description: "Experience ultimate comfort with our premium cotton t-shirt. Made from 100% organic cotton, this shirt offers exceptional softness and durability. Perfect for everyday wear or as a base for your custom designs.", price: 29.99, originalPrice: 39.99, category: "T-Shirts", images: [ "/placeholder.svg?height=600&width=600&text=Product+Front", "/placeholder.svg?height=600&width=600&text=Product+Back", "/placeholder.svg?height=600&width=600&text=Product+Side", "/placeholder.svg?height=600&width=600&text=Product+Detail", ], colors: [ { name: "Black", value: "#000000", image: "/placeholder.svg?height=600&width=600&text=Black+Shirt" }, { name: "White", value: "#FFFFFF", image: "/placeholder.svg?height=600&width=600&text=White+Shirt" }, { name: "Navy", value: "#1e3a8a", image: "/placeholder.svg?height=600&width=600&text=Navy+Shirt" }, { name: "Gray", value: "#6b7280", image: "/placeholder.svg?height=600&width=600&text=Gray+Shirt" }, ], sizes: ["XS", "S", "M", "L", "XL", "XXL"], rating: 4.8, reviews: 124, inStock: true, bestseller: true, specifications: { Material: "100% Organic Cotton", Weight: "180 GSM", Fit: "Regular Fit", Care: "Machine wash cold, tumble dry low", Origin: "Made in USA", }, features: [ "100% Organic Cotton", "Pre-shrunk fabric", "Reinforced seams", "Tagless for comfort", "Available in multiple colors", ], } const mockReviews: Review[] = [ { id: 1, user: "Sarah M.", rating: 5, comment: "Amazing quality! The fabric is so soft and the fit is perfect. Highly recommend!", date: "2024-01-15", verified: true, }, { id: 2, user: "Mike R.", rating: 4, comment: "Great shirt for the price. Good quality cotton and comfortable to wear.", date: "2024-01-10", verified: true, }, { id: 3, user: "Emma L.", rating: 5, comment: "Perfect for custom designs. The material holds prints really well.", date: "2024-01-08", verified: false, }, ] const mockRelated: Product[] = [ { id: 2, name: "Classic Hoodie", slug: "classic-hoodie", description: "Comfortable hoodie", price: 49.99, category: "Hoodies", images: ["/placeholder.svg?height=300&width=300&text=Hoodie"], colors: [], sizes: [], rating: 4.7, reviews: 89, inStock: true, bestseller: false, specifications: {}, features: [], }, ] setProduct(mockProduct) setReviews(mockReviews) setRelatedProducts(mockRelated) setSelectedColor(mockProduct.colors[0]?.name || "") setSelectedSize(mockProduct.sizes[2] || "") // Default to M setIsLoading(false) } loadProduct() }, [params.slug]) const handleAddToCart = () => { if (!product || !selectedColor || !selectedSize) return addItem({ productId: product.id, name: product.name, price: product.price, quantity, size: selectedSize, color: selectedColor, image: product.images[0], }) // Show success toast or notification } const toggleFavorite = () => { setIsFavorite(!isFavorite) // API call to update favorites } if (isLoading) { return (

{[...Array(4)].map((_, i) => (

))}

{[...Array(4)].map((_, i) => (

))}

) } if (!product) { return (

Product not found

The product you're looking for doesn't exist.

) } return (

{/* Breadcrumb */}

{/* Product Images */}

{product.bestseller && ( Bestseller )} {product.name}

setIsZoomed(!isZoomed)} />

{/* Thumbnail Images */}

{product.images.map((image, index) => ( ))}

{/* Product Info */}

{product.name}

{[...Array(5)].map((_, i) => ( ))} {product.rating} ({product.reviews} reviews)

${product.price} {product.originalPrice && ( ${product.originalPrice} )} {product.originalPrice && ( Save ${(product.originalPrice - product.price).toFixed(2)} )}

{product.description}

{/* Color Selection */}

Color: {selectedColor}

{product.colors.map((color) => (

{/* Size Selection */}

Size

{/* Quantity */}

Quantity

{quantity}

{/* Actions */}

{user && ( )}

{/* Features */}

Free Shipping

On orders over $50

Easy Returns

30-day return policy

Quality Guarantee

Premium materials

{/* Product Details Tabs */}

Description Specifications Reviews ({product.reviews})

Product Description

{product.description}

Key Features:

{feature}

Specifications

{Object.entries(product.specifications).map(([key, value]) => (

{key}: {value}

))}

Customer Reviews

{reviews.map((review) => (

{review.user} {review.verified && ( Verified Purchase )}

{review.date}

{[...Array(5)].map((_, i) => ( ))}

{review.comment}

))}

{/* Related Products */} {relatedProducts.length > 0 && (

Related Products

{relatedProducts.map((relatedProduct) => (

{relatedProduct.name}

{[...Array(5)].map((_, i) => ( ))}

({relatedProduct.reviews})

${relatedProduct.price}

))}

)}

) } function Label({ children, className, ...props }: { children: React.ReactNode; className?: string }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/designs/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription } from "@/components/ui/alert" import { Progress } from "@/components/ui/progress" import { CreditCard, Truck, MapPin, Mail, Phone, Lock, CheckCircle, ArrowLeft, ArrowRight } from "lucide-react" import Image from "next/image" import Link from "next/link" import { useCart } from "@/hooks/use-cart" import { useAuth } from "@/hooks/use-auth" interface ShippingInfo { firstName: string lastName: string email: string phone: string address: string city: string state: string zipCode: string country: string } interface BillingInfo extends ShippingInfo { sameAsShipping: boolean } interface PaymentInfo { method: "hand-to-hand" | "credit-card" | "paypal" cardNumber: string expiryDate: string cvv: string cardName: string } export default function CheckoutPage() { const { items, totalAmount, clearCart } = useCart() const { user } = useAuth() const router = useRouter() const [currentStep, setCurrentStep] = useState(1) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [shippingInfo, setShippingInfo] = useState({ firstName: "", lastName: "", email: user?.email || "", phone: "", address: "", city: "", state: "", zipCode: "", country: "US", }) const [billingInfo, setBillingInfo] = useState({ ...shippingInfo, sameAsShipping: true, }) const [paymentInfo, setPaymentInfo] = useState({ method: "hand-to-hand", cardNumber: "", expiryDate: "", cvv: "", cardName: "", }) const [orderNotes, setOrderNotes] = useState("") const [agreedToTerms, setAgreedToTerms] = useState(false) useEffect(() => { if (items.length === 0) { router.push("/cart") } }, [items, router]) useEffect(() => { if (billingInfo.sameAsShipping) { setBillingInfo((prev) => ({ ...shippingInfo, sameAsShipping: true })) } }, [shippingInfo, billingInfo.sameAsShipping]) const subtotal = totalAmount const shippingCost = subtotal > 50 ? 0 : 9.99 const taxRate = 0.1 const taxAmount = subtotal * taxRate const finalTotal = subtotal + shippingCost + taxAmount const countries = [ { code: "US", name: "United States" }, { code: "CA", name: "Canada" }, { code: "UK", name: "United Kingdom" }, { code: "AU", name: "Australia" }, { code: "DE", name: "Germany" }, { code: "FR", name: "France" }, ] const validateStep = (step: number) => { switch (step) { case 1: return ( shippingInfo.firstName && shippingInfo.lastName && shippingInfo.email && shippingInfo.phone && shippingInfo.address && shippingInfo.city && shippingInfo.state && shippingInfo.zipCode && shippingInfo.country ) case 2: if (billingInfo.sameAsShipping) return true return ( billingInfo.firstName && billingInfo.lastName && billingInfo.email && billingInfo.phone && billingInfo.address && billingInfo.city && billingInfo.state && billingInfo.zipCode && billingInfo.country ) case 3: if (paymentInfo.method === "hand-to-hand") return true if (paymentInfo.method === "paypal") return true return paymentInfo.cardNumber && paymentInfo.expiryDate && paymentInfo.cvv && paymentInfo.cardName default: return false } } const handleNext = () => { if (validateStep(currentStep)) { setCurrentStep(currentStep + 1) setError("") } else { setError("Please fill in all required fields") } } const handleBack = () => { setCurrentStep(currentStep - 1) setError("") } const handlePlaceOrder = async () => { if (!agreedToTerms) { setError("Please agree to the terms and conditions") return } setIsLoading(true) setError("") try { // Mock order placement await new Promise((resolve) => setTimeout(resolve, 2000)) const orderData = { items, shippingInfo, billingInfo: billingInfo.sameAsShipping ? shippingInfo : billingInfo, paymentInfo, orderNotes, subtotal, shippingCost, taxAmount, total: finalTotal, } console.log("Order placed:", orderData) // Clear cart and redirect to success clearCart() router.push(`/order-confirmation?orderId=${Date.now()}`) } catch (err) { setError("Failed to place order. Please try again.") } finally { setIsLoading(false) } } const steps = [ { number: 1, title: "Shipping", icon: Truck }, { number: 2, title: "Billing", icon: MapPin }, { number: 3, title: "Payment", icon: CreditCard }, { number: 4, title: "Review", icon: CheckCircle }, ] if (items.length === 0) { return null } return (

{/* Progress Steps */}

{steps.map((step, index) => (

= step.number ? "bg-indigo-600 border-indigo-600 text-white" : "border-gray-300 text-gray-500" }`} >

= step.number ? "text-indigo-600" : "text-gray-500" }`} > {step.title}

{index < steps.length - 1 && (

step.number ? 100 : 0} className="h-2" />

)}

))}

{/* Main Content */}

{error && ( {error} )} {/* Step 1: Shipping Information */} {currentStep === 1 && ( Shipping Information

First Name * setShippingInfo((prev) => ({ ...prev, firstName: e.target.value }))} required />

Last Name * setShippingInfo((prev) => ({ ...prev, lastName: e.target.value }))} required />

Email *

setShippingInfo((prev) => ({ ...prev, email: e.target.value }))} className="pl-10" required />

Phone *

setShippingInfo((prev) => ({ ...prev, phone: e.target.value }))} className="pl-10" required />

Address * setShippingInfo((prev) => ({ ...prev, address: e.target.value }))} placeholder="Street address" required />

City * setShippingInfo((prev) => ({ ...prev, city: e.target.value }))} required />

State * setShippingInfo((prev) => ({ ...prev, state: e.target.value }))} required />

ZIP Code * setShippingInfo((prev) => ({ ...prev, zipCode: e.target.value }))} required />

Country *

)} {/* Step 2: Billing Information */} {currentStep === 2 && ( Billing Information

setBillingInfo((prev) => ({ ...prev, sameAsShipping: checked as boolean })) } /> Same as shipping address

{!billingInfo.sameAsShipping && ( <>

First Name * setBillingInfo((prev) => ({ ...prev, firstName: e.target.value }))} required />

Last Name * setBillingInfo((prev) => ({ ...prev, lastName: e.target.value }))} required />

Email * setBillingInfo((prev) => ({ ...prev, email: e.target.value }))} required />

Phone * setBillingInfo((prev) => ({ ...prev, phone: e.target.value }))} required />

Address * setBillingInfo((prev) => ({ ...prev, address: e.target.value }))} required />

City * setBillingInfo((prev) => ({ ...prev, city: e.target.value }))} required />

State * setBillingInfo((prev) => ({ ...prev, state: e.target.value }))} required />

ZIP Code * setBillingInfo((prev) => ({ ...prev, zipCode: e.target.value }))} required />

Country *

)} )} {/* Step 3: Payment Method */} {currentStep === 3 && ( Payment Method setPaymentInfo((prev) => ({ ...prev, method: value as any }))} >

Hand-to-Hand Payment

Pay when you receive your order

Recommended

Credit Card

Visa, Mastercard, American Express

VISA

PayPal

Pay with your PayPal account

PayPal

{paymentInfo.method === "credit-card" && (

Cardholder Name * setPaymentInfo((prev) => ({ ...prev, cardName: e.target.value }))} placeholder="John Doe" required />

Card Number * setPaymentInfo((prev) => ({ ...prev, cardNumber: e.target.value }))} placeholder="1234 5678 9012 3456" required />

Expiry Date * setPaymentInfo((prev) => ({ ...prev, expiryDate: e.target.value }))} placeholder="MM/YY" required />

CVV * setPaymentInfo((prev) => ({ ...prev, cvv: e.target.value }))} placeholder="123" required />

)}

Order Notes (Optional)

setOrderNotes(e.target.value)}
                      className="w-full p-3 border rounded-md resize-none"
                      rows={3}
                      placeholder="Any special instructions for your order..."
                    />
                  </div>
                </CardContent>
              </Card>
            )}

{/* Step 4: Review Order */}
            {currentStep === 4 && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <CheckCircle className="h-5 w-5 mr-2" />
                    Review Your Order
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  {/* Order Items */}
                  <div>
                    <h3 className="font-semibold mb-4">Order Items</h3>
                    <div className="space-y-4">
                      {items.map((item) => (
                        <div key={item.id} className="flex items-center space-x-4 p-4 border rounded-lg">
                          <Image
                            src={item.image || "/placeholder.svg"}
                            alt={item.name}
                            width={60}
                            height={60}
                            className="rounded-md object-cover"
                          />
                          <div className="flex-1">
                            <h4 className="font-medium">{item.name}</h4>
                            <p className="text-sm text-gray-600">
                              Size: {item.size} | Color: {item.color} | Qty: {item.quantity}
                            </p>
                          </div>
                          <div className="text-right">
                            <p className="font-semibold">${(item.price * item.quantity).toFixed(2)}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

{/* Shipping Information */}
                  <div>
                    <h3 className="font-semibold mb-2">Shipping Address</h3>
                    <div className="text-sm text-gray-600">
                      <p>
                        {shippingInfo.firstName} {shippingInfo.lastName}
                      </p>
                      <p>{shippingInfo.address}</p>
                      <p>
                        {shippingInfo.city}, {shippingInfo.state} {shippingInfo.zipCode}
                      </p>
                      <p>{countries.find((c) => c.code === shippingInfo.country)?.name}</p>
                      <p>{shippingInfo.phone}</p>
                    </div>
                  </div>

{/* Payment Method */}
                  <div>
                    <h3 className="font-semibold mb-2">Payment Method</h3>
                    <p className="text-sm text-gray-600">
                      {paymentInfo.method === "hand-to-hand" && "Hand-to-Hand Payment"}
                      {paymentInfo.method === "credit-card" &&
                        `Credit Card ending in ${paymentInfo.cardNumber.slice(-4)}`}
                      {paymentInfo.method === "paypal" && "PayPal"}
                    </p>
                  </div>

{/* Terms Agreement */}
                  <div className="flex items-start space-x-2">
                    <Checkbox
                      id="terms"
                      checked={agreedToTerms}
                      onCheckedChange={(checked) => setAgreedToTerms(checked as boolean)}
                    />
                    <Label htmlFor="terms" className="text-sm leading-5">
                      I agree to the{" "}
                      <Link href="/terms" className="text-indigo-600 hover:text-indigo-500">
                        Terms & Conditions
                      </Link>{" "}
                      and{" "}
                      <Link href="/privacy" className="text-indigo-600 hover:text-indigo-500">
                        Privacy Policy
                      </Link>
                    </Label>
                  </div>
                </CardContent>
              </Card>
            )}

{/* Navigation Buttons */}
            <div className="flex justify-between mt-8">
              <div>
                {currentStep > 1 && (
                  <Button variant="outline" onClick={handleBack}>
                    <ArrowLeft className="h-4 w-4 mr-2" />
                    Back
                  </Button>
                )}
              </div>
              <div>
                {currentStep < 4 ? (
                  <Button onClick={handleNext}>
                    Next
                    <ArrowRight className="h-4 w-4 ml-2" />
                  </Button>
                ) : (
                  <Button
                    onClick={handlePlaceOrder}
                    disabled={isLoading || !agreedToTerms}
                    className="bg-green-600 hover:bg-green-700"
                  >
                    {isLoading ? (
                      <>
                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
                        Processing...
                      </>
                    ) : (
                      <>
                        <Lock className="h-4 w-4 mr-2" />
                        Place Order
                      </>
                    )}
                  </Button>
                )}
              </div>
            </div>
          </div>

{/* Order Summary Sidebar */}
          <div className="lg:col-span-1">
            <Card className="sticky top-24">
              <CardHeader>
                <CardTitle>Order Summary</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Items */}
                <div className="space-y-3">
                  {items.map((item) => (
                    <div key={item.id} className="flex items-center space-x-3">
                      <Image
                        src={item.image || "/placeholder.svg"}
                        alt={item.name}
                        width={40}
                        height={40}
                        className="rounded object-cover"
                      />
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium truncate">{item.name}</p>
                        <p className="text-xs text-gray-600">
                          {item.size} | {item.color} | Qty: {item.quantity}
                        </p>
                      </div>
                      <p className="text-sm font-semibold">${(item.price * item.quantity).toFixed(2)}</p>
                    </div>
                  ))}
                </div>

{/* Price Breakdown */}
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span>Subtotal</span>
                    <span>${subtotal.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Shipping</span>
                    <span>{shippingCost === 0 ? "Free" : `$${shippingCost.toFixed(2)}`}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Tax</span>
                    <span>${taxAmount.toFixed(2)}</span>
                  </div>
                </div>

<div className="flex justify-between text-lg font-bold">
                  <span>Total</span>
                  <span>${finalTotal.toFixed(2)}</span>
                </div>

{shippingCost === 0 && (
                  <div className="bg-green-50 p-3 rounded-lg text-center">
                    <p className="text-green-800 text-sm font-medium">🎉 You saved $9.99 on shipping!</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/order-confirmation/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { CheckCircle, Package, Truck, Mail, Download, Share2, ArrowRight, MapPin, CreditCard } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

interface OrderDetails {
  orderId: string
  orderDate: string
  status: string
  estimatedDelivery: string
  items: Array<{
    id: string
    name: string
    image: string
    size: string
    color: string
    quantity: number
    price: number
  }>
  shippingAddress: {
    name: string
    address: string
    city: string
    state: string
    zipCode: string
    country: string
  }
  paymentMethod: string
  subtotal: number
  shipping: number
  tax: number
  total: number
}

export default function OrderConfirmationPage() {
  const searchParams = useSearchParams()
  const orderId = searchParams.get("orderId")
  const [orderDetails, setOrderDetails] = useState<OrderDetails | null>(null)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Mock order details loading
    const loadOrderDetails = async () => {
      setIsLoading(true)

// Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockOrderDetails: OrderDetails = {
        orderId: orderId || "ORD-" + Date.now(),
        orderDate: new Date().toISOString(),
        status: "confirmed",
        estimatedDelivery: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
        items: [
          {
            id: "1",
            name: "Custom T-Shirt Design",
            image: "/placeholder.svg?height=80&width=80&text=T-Shirt",
            size: "M",
            color: "Black",
            quantity: 2,
            price: 29.99,
          },
          {
            id: "2",
            name: "Premium Hoodie",
            image: "/placeholder.svg?height=80&width=80&text=Hoodie",
            size: "L",
            color: "Gray",
            quantity: 1,
            price: 49.99,
          },
        ],
        shippingAddress: {
          name: "John Doe",
          address: "123 Main Street",
          city: "New York",
          state: "NY",
          zipCode: "10001",
          country: "United States",
        },
        paymentMethod: "Hand-to-Hand Payment",
        subtotal: 109.97,
        shipping: 0,
        tax: 10.99,
        total: 120.96,
      }

setOrderDetails(mockOrderDetails)
      setIsLoading(false)
    }

loadOrderDetails()
  }, [orderId])

const shareOrder = () => {
    if (navigator.share) {
      navigator.share({
        title: "My Order Confirmation",
        text: `Order #${orderDetails?.orderId} has been confirmed!`,
        url: window.location.href,
      })
    } else {
      navigator.clipboard.writeText(window.location.href)
    }
  }

if (isLoading) {
    return (
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-2xl mx-auto text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4" />
          <p className="text-gray-600">Loading order details...</p>
        </div>
      </div>
    )
  }

if (!orderDetails) {
    return (
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-2xl mx-auto text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-4">Order Not Found</h1>
          <p className="text-gray-600 mb-8">We couldn't find the order you're looking for.</p>
          <Button asChild>
            <Link href="/shop">Continue Shopping</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        {/* Success Header */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
            <CheckCircle className="h-8 w-8 text-green-600" />
          </div>
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Order Confirmed!</h1>
          <p className="text-gray-600 mb-4">
            Thank you for your order. We've received your order and will start processing it soon.
          </p>
          <div className="flex items-center justify-center space-x-4">
            <Badge className="bg-green-100 text-green-800">Order #{orderDetails.orderId}</Badge>
            <Badge variant="secondary">{new Date(orderDetails.orderDate).toLocaleDateString()}</Badge>
          </div>
        </div>

{/* Order Status */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle className="flex items-center">
              <Package className="h-5 w-5 mr-2" />
              Order Status
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <div className="flex items-center justify-center w-10 h-10 bg-green-100 rounded-full">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                </div>
                <div>
                  <p className="font-semibold">Order Confirmed</p>
                  <p className="text-sm text-gray-600">Your order has been received and confirmed</p>
                </div>
              </div>
              <div className="text-right">
                <p className="text-sm text-gray-600">Estimated Delivery</p>
                <p className="font-semibold">{new Date(orderDetails.estimatedDelivery).toLocaleDateString()}</p>
              </div>
            </div>

<div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="text-center p-4 bg-gray-50 rounded-lg">
                <Package className="h-6 w-6 mx-auto mb-2 text-gray-600" />
                <p className="text-sm font-medium">Processing</p>
                <p className="text-xs text-gray-600">1-2 business days</p>
              </div>
              <div className="text-center p-4 bg-gray-50 rounded-lg">
                <Truck className="h-6 w-6 mx-auto mb-2 text-gray-600" />
                <p className="text-sm font-medium">Shipping</p>
                <p className="text-xs text-gray-600">3-5 business days</p>
              </div>
              <div className="text-center p-4 bg-gray-50 rounded-lg">
                <CheckCircle className="h-6 w-6 mx-auto mb-2 text-gray-600" />
                <p className="text-sm font-medium">Delivered</p>
                <p className="text-xs text-gray-600">To your doorstep</p>
              </div>
            </div>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Order Items */}
          <Card>
            <CardHeader>
              <CardTitle>Order Items</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {orderDetails.items.map((item) => (
                  <div key={item.id} className="flex items-center space-x-4">
                    <Image
                      src={item.image || "/placeholder.svg"}
                      alt={item.name}
                      width={60}
                      height={60}
                      className="rounded-md object-cover"
                    />
                    <div className="flex-1">
                      <h4 className="font-medium">{item.name}</h4>
                      <p className="text-sm text-gray-600">
                        Size: {item.size} | Color: {item.color}
                      </p>
                      <p className="text-sm text-gray-600">Quantity: {item.quantity}</p>
                    </div>
                    <div className="text-right">
                      <p className="font-semibold">${(item.price * item.quantity).toFixed(2)}</p>
                      <p className="text-sm text-gray-600">${item.price.toFixed(2)} each</p>
                    </div>
                  </div>
                ))}
              </div>

<div className="space-y-2">
                <div className="flex justify-between">
                  <span>Subtotal</span>
                  <span>${orderDetails.subtotal.toFixed(2)}</span>
                </div>
                <div className="flex justify-between">
                  <span>Shipping</span>
                  <span>{orderDetails.shipping === 0 ? "Free" : `$${orderDetails.shipping.toFixed(2)}`}</span>
                </div>
                <div className="flex justify-between">
                  <span>Tax</span>
                  <span>${orderDetails.tax.toFixed(2)}</span>
                </div>
                <Separator />
                <div className="flex justify-between text-lg font-bold">
                  <span>Total</span>
                  <span>${orderDetails.total.toFixed(2)}</span>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Order Details */}
          <div className="space-y-6">
            {/* Shipping Address */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <MapPin className="h-5 w-5 mr-2" />
                  Shipping Address
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-sm">
                  <p className="font-medium">{orderDetails.shippingAddress.name}</p>
                  <p>{orderDetails.shippingAddress.address}</p>
                  <p>
                    {orderDetails.shippingAddress.city}, {orderDetails.shippingAddress.state}{" "}
                    {orderDetails.shippingAddress.zipCode}
                  </p>
                  <p>{orderDetails.shippingAddress.country}</p>
                </div>
              </CardContent>
            </Card>

{/* Payment Method */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <CreditCard className="h-5 w-5 mr-2" />
                  Payment Method
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm">{orderDetails.paymentMethod}</p>
              </CardContent>
            </Card>

{/* Order Actions */}
            <Card>
              <CardHeader>
                <CardTitle>Order Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                  <Link href={`/orders/${orderDetails.orderId}`}>
                    <Package className="h-4 w-4 mr-2" />
                    Track Your Order
                  </Link>
                </Button>
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  <Download className="h-4 w-4 mr-2" />
                  Download Invoice
                </Button>
                <Button variant="outline" className="w-full justify-start bg-transparent" onClick={shareOrder}>
                  <Share2 className="h-4 w-4 mr-2" />
                  Share Order
                </Button>
                <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                  <Link href="/contact">
                    <Mail className="h-4 w-4 mr-2" />
                    Contact Support
                  </Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>

{/* Email Confirmation Notice */}
        <Card className="mt-8">
          <CardContent className="p-6">
            <div className="flex items-center space-x-4">
              <div className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-full">
                <Mail className="h-6 w-6 text-blue-600" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold">Email Confirmation Sent</h3>
                <p className="text-sm text-gray-600">
                  We've sent a confirmation email with your order details and tracking information. If you don't see it
                  in your inbox, please check your spam folder.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Continue Shopping */}
        <div className="text-center mt-8">
          <Button asChild size="lg">
            <Link href="/shop">
              Continue Shopping
              <ArrowRight className="h-4 w-4 ml-2" />
            </Link>
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/order-confirmation/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/orders/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/favorites/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/pricing/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Check, Star, Zap, Crown, Palette, ImageIcon, Layers, Headphones, ArrowRight } from "lucide-react"
import Link from "next/link"

interface PricingTier {
  name: string
  price: number
  originalPrice?: number
  description: string
  features: string[]
  popular?: boolean
  icon: React.ComponentType<{ className?: string }>
}

interface DesignPricing {
  category: string
  basePrice: number
  perImagePrice: number
  perSidePrice: number
  examples: Array<{
    description: string
    images: number
    sides: number
    totalPrice: number
  }>
}

export default function PricingPage() {
  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly")

const pricingTiers: PricingTier[] = [
    {
      name: "Basic",
      price: billingCycle === "monthly" ? 0 : 0,
      description: "Perfect for getting started with custom designs",
      features: [
        "5 designs per month",
        "Basic design tools",
        "Standard templates",
        "Community support",
        "720p image exports",
        "Personal use only",
      ],
      icon: Palette,
    },
    {
      name: "Pro",
      price: billingCycle === "monthly" ? 19 : 190,
      originalPrice: billingCycle === "monthly" ? 29 : 290,
      description: "For serious designers and small businesses",
      features: [
        "Unlimited designs",
        "Advanced design tools",
        "Premium templates",
        "Priority support",
        "4K image exports",
        "Commercial use",
        "Team collaboration (up to 3 members)",
        "Custom fonts",
        "Advanced layers",
      ],
      popular: true,
      icon: Zap,
    },
    {
      name: "Enterprise",
      price: billingCycle === "monthly" ? 49 : 490,
      originalPrice: billingCycle === "monthly" ? 69 : 690,
      description: "For large teams and businesses",
      features: [
        "Everything in Pro",
        "Unlimited team members",
        "White-label solution",
        "API access",
        "Custom integrations",
        "Dedicated account manager",
        "Advanced analytics",
        "Custom branding",
        "SLA guarantee",
      ],
      icon: Crown,
    },
  ]

const designPricing: DesignPricing[] = [
    {
      category: "T-Shirts",
      basePrice: 5.0,
      perImagePrice: 2.0,
      perSidePrice: 3.0,
      examples: [
        {
          description: "Simple text design (front only)",
          images: 0,
          sides: 1,
          totalPrice: 8.0,
        },
        {
          description: "Logo + text (front and back)",
          images: 1,
          sides: 2,
          totalPrice: 13.0,
        },
        {
          description: "Complex design with 3 images (front only)",
          images: 3,
          sides: 1,
          totalPrice: 17.0,
        },
      ],
    },
    {
      category: "Hoodies",
      basePrice: 8.0,
      perImagePrice: 2.5,
      perSidePrice: 4.0,
      examples: [
        {
          description: "Simple design (front only)",
          images: 0,
          sides: 1,
          totalPrice: 12.0,
        },
        {
          description: "Design with image (front and back)",
          images: 1,
          sides: 2,
          totalPrice: 18.5,
        },
        {
          description: "Premium design with 2 images (front, back, sleeves)",
          images: 2,
          sides: 3,
          totalPrice: 25.0,
        },
      ],
    },
    {
      category: "Tank Tops",
      basePrice: 4.0,
      perImagePrice: 1.5,
      perSidePrice: 2.5,
      examples: [
        {
          description: "Simple design (front only)",
          images: 0,
          sides: 1,
          totalPrice: 6.5,
        },
        {
          description: "Design with image (front and back)",
          images: 1,
          sides: 2,
          totalPrice: 12.0,
        },
        {
          description: "Complex design with 2 images (front only)",
          images: 2,
          sides: 1,
          totalPrice: 10.5,
        },
      ],
    },
  ]

const faqs = [
    {
      question: "How does the design pricing work?",
      answer:
        "Our design pricing is based on three factors: the base product price, the number of images in your design, and the number of sides (front, back, sleeves) you want to print on. Each product category has different rates to reflect the complexity and cost of production.",
    },
    {
      question: "Can I upgrade or downgrade my plan anytime?",
      answer:
        "Yes! You can upgrade or downgrade your subscription plan at any time. When you upgrade, you'll be charged the prorated amount immediately. When you downgrade, the change will take effect at the end of your current billing cycle.",
    },
    {
      question: "What's included in the free plan?",
      answer:
        "The free Basic plan includes 5 designs per month, access to basic design tools, standard templates, community support, and 720p image exports for personal use only.",
    },
    {
      question: "Do you offer refunds?",
      answer:
        "We offer a 30-day money-back guarantee for all paid plans. If you're not satisfied with our service, contact our support team within 30 days of your purchase for a full refund.",
    },
    {
      question: "What payment methods do you accept?",
      answer:
        "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and for Enterprise customers, we also accept bank transfers and purchase orders.",
    },
    {
      question: "Is there a limit to how many designs I can create?",
      answer:
        "The Basic plan includes 5 designs per month. Pro and Enterprise plans offer unlimited design creation. All plans allow you to save and edit your designs anytime.",
    },
    {
      question: "Can I use my designs for commercial purposes?",
      answer:
        "Commercial use is available with Pro and Enterprise plans. The Basic plan is for personal use only. Commercial use includes selling products with your designs, using them for business purposes, or any revenue-generating activities.",
    },
    {
      question: "What's the difference between 720p and 4K exports?",
      answer:
        "720p exports are suitable for web use and small prints, while 4K exports provide professional-quality resolution perfect for large prints, merchandise, and commercial applications.",
    },
  ]

const calculatePrice = (
    basePrice: number,
    images: number,
    sides: number,
    perImagePrice: number,
    perSidePrice: number,
  ) => {
    return basePrice + images * perImagePrice + (sides - 1) * perSidePrice
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50">
      <div className="container mx-auto px-4 py-16">
        {/* Header */}
        <div className="text-center mb-16">
          <h1 className="text-4xl lg:text-6xl font-bold text-gray-900 mb-6">
            Simple, Transparent
            <span className="text-indigo-600"> Pricing</span>
          </h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
            Choose the perfect plan for your design needs. Start free and upgrade as you grow.
          </p>

{/* Billing Toggle */}
          <div className="flex items-center justify-center space-x-4 mb-8">
            <span className={`text-sm ${billingCycle === "monthly" ? "text-gray-900" : "text-gray-500"}`}>Monthly</span>
            <button
              onClick={() => setBillingCycle(billingCycle === "monthly" ? "yearly" : "monthly")}
              className="relative inline-flex h-6 w-11 items-center rounded-full bg-indigo-600 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
            >
              <span
                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                  billingCycle === "yearly" ? "translate-x-6" : "translate-x-1"
                }`}
              />
            </button>
            <span className={`text-sm ${billingCycle === "yearly" ? "text-gray-900" : "text-gray-500"}`}>Yearly</span>
            {billingCycle === "yearly" && <Badge className="bg-green-100 text-green-800">Save 20%</Badge>}
          </div>
        </div>

{/* Pricing Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
          {pricingTiers.map((tier, index) => (
            <Card
              key={tier.name}
              className={`relative ${
                tier.popular ? "ring-2 ring-indigo-600 shadow-xl scale-105" : "hover:shadow-lg transition-shadow"
              }`}
            >
              {tier.popular && (
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                  <Badge className="bg-indigo-600 text-white px-4 py-1">
                    <Star className="h-3 w-3 mr-1" />
                    Most Popular
                  </Badge>
                </div>
              )}

<CardHeader className="text-center pb-4">
                <div className="flex items-center justify-center mb-4">
                  <div className={`p-3 rounded-full ${tier.popular ? "bg-indigo-100" : "bg-gray-100"}`}>
                    <tier.icon className={`h-6 w-6 ${tier.popular ? "text-indigo-600" : "text-gray-600"}`} />
                  </div>
                </div>
                <CardTitle className="text-2xl font-bold">{tier.name}</CardTitle>
                <div className="mt-4">
                  <div className="flex items-center justify-center space-x-2">
                    <span className="text-4xl font-bold text-gray-900">${tier.price}</span>
                    {tier.originalPrice && (
                      <span className="text-lg text-gray-500 line-through">${tier.originalPrice}</span>
                    )}
                  </div>
                  <p className="text-gray-600 mt-1">per {billingCycle === "monthly" ? "month" : "year"}</p>
                </div>
                <p className="text-gray-600 mt-4">{tier.description}</p>
              </CardHeader>

<CardContent>
                <ul className="space-y-3 mb-8">
                  {tier.features.map((feature, featureIndex) => (
                    <li key={featureIndex} className="flex items-center">
                      <Check className="h-4 w-4 text-green-500 mr-3 flex-shrink-0" />
                      <span className="text-sm text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>

<Button
                  className={`w-full ${
                    tier.popular ? "bg-indigo-600 hover:bg-indigo-700" : "bg-gray-900 hover:bg-gray-800"
                  }`}
                  asChild
                >
                  <Link href={tier.price === 0 ? "/register" : "/checkout"}>
                    {tier.price === 0 ? "Get Started Free" : "Start Free Trial"}
                    <ArrowRight className="h-4 w-4 ml-2" />
                  </Link>
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Design Pricing Section */}
        <div className="mb-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Design Pricing Breakdown</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Transparent pricing based on design complexity. No hidden fees.
            </p>
          </div>

<Tabs defaultValue="t-shirts" className="w-full">
            <TabsList className="grid w-full grid-cols-3 mb-8">
              <TabsTrigger value="t-shirts">T-Shirts</TabsTrigger>
              <TabsTrigger value="hoodies">Hoodies</TabsTrigger>
              <TabsTrigger value="tank-tops">Tank Tops</TabsTrigger>
            </TabsList>

{designPricing.map((category) => (
              <TabsContent
                key={category.category.toLowerCase().replace(" ", "-")}
                value={category.category.toLowerCase().replace(" ", "-")}
              >
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                  {/* Pricing Structure */}
                  <Card>
                    <CardHeader>
                      <CardTitle>Pricing Structure</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div className="flex items-center">
                          <Palette className="h-5 w-5 text-indigo-600 mr-3" />
                          <span className="font-medium">Base Design Price</span>
                        </div>
                        <span className="text-lg font-bold">${category.basePrice.toFixed(2)}</span>
                      </div>

<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div className="flex items-center">
                          <ImageIcon className="h-5 w-5 text-indigo-600 mr-3" />
                          <span className="font-medium">Per Image</span>
                        </div>
                        <span className="text-lg font-bold">+${category.perImagePrice.toFixed(2)}</span>
                      </div>

<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div className="flex items-center">
                          <Layers className="h-5 w-5 text-indigo-600 mr-3" />
                          <span className="font-medium">Per Additional Side</span>
                        </div>
                        <span className="text-lg font-bold">+${category.perSidePrice.toFixed(2)}</span>
                      </div>

<div className="mt-6 p-4 bg-indigo-50 rounded-lg">
                        <h4 className="font-semibold text-indigo-900 mb-2">How it works:</h4>
                        <p className="text-sm text-indigo-700">
                          Start with the base price, add $${category.perImagePrice.toFixed(2)} for each image in your
                          design, and $${category.perSidePrice.toFixed(2)} for each additional side beyond the first.
                        </p>
                      </div>
                    </CardContent>
                  </Card>

{/* Examples */}
                  <Card>
                    <CardHeader>
                      <CardTitle>Pricing Examples</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        {category.examples.map((example, index) => (
                          <div key={index} className="border rounded-lg p-4">
                            <h4 className="font-medium mb-2">{example.description}</h4>
                            <div className="text-sm text-gray-600 space-y-1">
                              <div className="flex justify-between">
                                <span>Base price:</span>
                                <span>${category.basePrice.toFixed(2)}</span>
                              </div>
                              {example.images > 0 && (
                                <div className="flex justify-between">
                                  <span>
                                    {example.images} image{example.images > 1 ? "s" : ""}:
                                  </span>
                                  <span>+${(example.images * category.perImagePrice).toFixed(2)}</span>
                                </div>
                              )}
                              {example.sides > 1 && (
                                <div className="flex justify-between">
                                  <span>
                                    {example.sides - 1} additional side{example.sides > 2 ? "s" : ""}:
                                  </span>
                                  <span>+${((example.sides - 1) * category.perSidePrice).toFixed(2)}</span>
                                </div>
                              )}
                              <div className="border-t pt-2 flex justify-between font-semibold">
                                <span>Total:</span>
                                <span className="text-indigo-600">${example.totalPrice.toFixed(2)}</span>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>
            ))}
          </Tabs>
        </div>

{/* Features Comparison */}
        <div className="mb-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Feature Comparison</h2>
            <p className="text-xl text-gray-600">See what's included in each plan</p>
          </div>

<div className="overflow-x-auto">
            <table className="w-full border-collapse bg-white rounded-lg shadow-lg">
              <thead>
                <tr className="border-b">
                  <th className="text-left p-4 font-semibold">Features</th>
                  <th className="text-center p-4 font-semibold">Basic</th>
                  <th className="text-center p-4 font-semibold bg-indigo-50">Pro</th>
                  <th className="text-center p-4 font-semibold">Enterprise</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { feature: "Designs per month", basic: "5", pro: "Unlimited", enterprise: "Unlimited" },
                  { feature: "Design tools", basic: "Basic", pro: "Advanced", enterprise: "Advanced" },
                  { feature: "Templates", basic: "Standard", pro: "Premium", enterprise: "Premium + Custom" },
                  { feature: "Image export quality", basic: "720p", pro: "4K", enterprise: "4K" },
                  { feature: "Commercial use", basic: "✗", pro: "✓", enterprise: "✓" },
                  { feature: "Team members", basic: "1", pro: "3", enterprise: "Unlimited" },
                  { feature: "Priority support", basic: "✗", pro: "✓", enterprise: "✓" },
                  { feature: "API access", basic: "✗", pro: "✗", enterprise: "✓" },
                  { feature: "White-label", basic: "✗", pro: "✗", enterprise: "✓" },
                  { feature: "SLA guarantee", basic: "✗", pro: "✗", enterprise: "✓" },
                ].map((row, index) => (
                  <tr key={index} className="border-b hover:bg-gray-50">
                    <td className="p-4 font-medium">{row.feature}</td>
                    <td className="p-4 text-center">{row.basic}</td>
                    <td className="p-4 text-center bg-indigo-50">{row.pro}</td>
                    <td className="p-4 text-center">{row.enterprise}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

{/* FAQ Section */}
        <div className="mb-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2>
            <p className="text-xl text-gray-600">Everything you need to know about our pricing</p>
          </div>

<div className="max-w-3xl mx-auto">
            <Accordion type="single" collapsible className="w-full">
              {faqs.map((faq, index) => (
                <AccordionItem key={index} value={`item-${index}`}>
                  <AccordionTrigger className="text-left">{faq.question}</AccordionTrigger>
                  <AccordionContent className="text-gray-600">{faq.answer}</AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>

{/* CTA Section */}
        <div className="text-center bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-12 text-white">
          <h2 className="text-3xl font-bold mb-4">Ready to Start Designing?</h2>
          <p className="text-xl mb-8 opacity-90">
            Join thousands of creators who trust our platform for their custom designs
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" variant="secondary" asChild>
              <Link href="/register">
                Start Free Trial
                <ArrowRight className="h-4 w-4 ml-2" />
              </Link>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="bg-transparent border-white text-white hover:bg-white hover:text-indigo-600"
              asChild
            >
              <Link href="/contact">
                <Headphones className="h-4 w-4 mr-2" />
                Talk to Sales
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import {
  Mail,
  Phone,
  MapPin,
  Clock,
  Send,
  MessageSquare,
  Headphones,
  Users,
  Globe,
  Facebook,
  Twitter,
  Instagram,
  Linkedin,
  CheckCircle,
} from "lucide-react"

interface ContactForm {
  name: string
  email: string
  subject: string
  category: string
  message: string
}

export default function ContactPage() {
  const [formData, setFormData] = useState<ContactForm>({
    name: "",
    email: "",
    subject: "",
    category: "",
    message: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)
  const [error, setError] = useState("")

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setError("")

// Validation
    if (!formData.name || !formData.email || !formData.subject || !formData.category || !formData.message) {
      setError("Please fill in all required fields")
      setIsSubmitting(false)
      return
    }

try {
      // Mock API call
      await new Promise((resolve) => setTimeout(resolve, 2000))
      setIsSubmitted(true)
    } catch (err) {
      setError("Failed to send message. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

const contactInfo = [
    {
      icon: Mail,
      title: "Email Us",
      description: "Send us an email anytime",
      value: "support@clothesdesign.com",
      action: "mailto:support@clothesdesign.com",
    },
    {
      icon: Phone,
      title: "Call Us",
      description: "Mon-Fri from 8am to 5pm",
      value: "+1 (555) 123-4567",
      action: "tel:+15551234567",
    },
    {
      icon: MapPin,
      title: "Visit Us",
      description: "Come say hello at our office",
      value: "123 Design Street, Creative City, CC 12345",
      action: "https://maps.google.com",
    },
    {
      icon: Clock,
      title: "Business Hours",
      description: "Our support team is available",
      value: "Monday - Friday: 8am - 5pm PST",
      action: null,
    },
  ]

const categories = [
    { value: "general", label: "General Inquiry" },
    { value: "support", label: "Technical Support" },
    { value: "billing", label: "Billing & Payments" },
    { value: "partnership", label: "Partnership" },
    { value: "press", label: "Press & Media" },
    { value: "feedback", label: "Feedback" },
  ]

const team = [
    {
      name: "Sarah Johnson",
      role: "Customer Success Manager",
      image: "/placeholder.svg?height=100&width=100&text=SJ",
      description: "Helps customers get the most out of our platform",
    },
    {
      name: "Mike Chen",
      role: "Technical Support Lead",
      image: "/placeholder.svg?height=100&width=100&text=MC",
      description: "Solves technical issues and provides expert guidance",
    },
    {
      name: "Emily Rodriguez",
      role: "Design Consultant",
      image: "/placeholder.svg?height=100&width=100&text=ER",
      description: "Provides design advice and creative solutions",
    },
  ]

const socialLinks = [
    { icon: Facebook, name: "Facebook", url: "https://facebook.com/clothesdesign" },
    { icon: Twitter, name: "Twitter", url: "https://twitter.com/clothesdesign" },
    { icon: Instagram, name: "Instagram", url: "https://instagram.com/clothesdesign" },
    { icon: Linkedin, name: "LinkedIn", url: "https://linkedin.com/company/clothesdesign" },
  ]

if (isSubmitted) {
    return (
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-2xl mx-auto text-center">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-6">
            <CheckCircle className="h-8 w-8 text-green-600" />
          </div>
          <h1 className="text-3xl font-bold text-gray-900 mb-4">Message Sent Successfully!</h1>
          <p className="text-gray-600 mb-8">
            Thank you for contacting us. We've received your message and will get back to you within 24 hours.
          </p>
          <div className="space-y-4">
            <Button
              onClick={() => {
                setIsSubmitted(false)
                setFormData({
                  name: "",
                  email: "",
                  subject: "",
                  category: "",
                  message: "",
                })
              }}
            >
              Send Another Message
            </Button>
            <div className="text-sm text-gray-500">
              <p>Reference ID: MSG-{Date.now()}</p>
            </div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-16">
        {/* Header */}
        <div className="text-center mb-16">
          <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">Get in Touch</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Have a question or need help? We're here to assist you. Reach out to our friendly team.
          </p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
          {/* Contact Form */}
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <MessageSquare className="h-5 w-5 mr-2" />
                  Send us a Message
                </CardTitle>
              </CardHeader>
              <CardContent>
                {error && (
                  <Alert variant="destructive" className="mb-6">
                    <AlertDescription>{error}</AlertDescription>
                  </Alert>
                )}

<form onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="name">Full Name *</Label>
                      <Input
                        id="name"
                        name="name"
                        value={formData.name}
                        onChange={handleInputChange}
                        placeholder="John Doe"
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="email">Email Address *</Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        placeholder="john@example.com"
                        required
                      />
                    </div>
                  </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="category">Category *</Label>
                      <Select
                        value={formData.category}
                        onValueChange={(value) => setFormData((prev) => ({ ...prev, category: value }))}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Select a category" />
                        </SelectTrigger>
                        <SelectContent>
                          {categories.map((category) => (
                            <SelectItem key={category.value} value={category.value}>
                              {category.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label htmlFor="subject">Subject *</Label>
                      <Input
                        id="subject"
                        name="subject"
                        value={formData.subject}
                        onChange={handleInputChange}
                        placeholder="How can we help you?"
                        required
                      />
                    </div>
                  </div>

<div>
                    <Label htmlFor="message">Message *</Label>
                    <textarea
                      id="message"
                      name="message"
                      value={formData.message}
                      onChange={handleInputChange}
                      rows={6}
                      className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"
                      placeholder="Please describe your question or issue in detail..."
                      required
                    />
                  </div>

<Button type="submit" disabled={isSubmitting} className="w-full bg-indigo-600 hover:bg-indigo-700">
                    {isSubmitting ? (
                      <>
                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
                        Sending...
                      </>
                    ) : (
                      <>
                        <Send className="h-4 w-4 mr-2" />
                        Send Message
                      </>
                    )}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>

{/* Contact Information */}
          <div className="space-y-6">
            {/* Contact Details */}
            <Card>
              <CardHeader>
                <CardTitle>Contact Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {contactInfo.map((info, index) => (
                  <div key={index} className="flex items-start space-x-3">
                    <div className="flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-lg flex-shrink-0">
                      <info.icon className="h-5 w-5 text-indigo-600" />
                    </div>
                    <div className="flex-1">
                      <h4 className="font-semibold text-gray-900">{info.title}</h4>
                      <p className="text-sm text-gray-600 mb-1">{info.description}</p>
                      {info.action ? (
                        <a
                          href={info.action}
                          className="text-sm text-indigo-600 hover:text-indigo-700 font-medium"
                          target={info.action.startsWith("http") ? "_blank" : undefined}
                          rel={info.action.startsWith("http") ? "noopener noreferrer" : undefined}
                        >
                          {info.value}
                        </a>
                      ) : (
                        <p className="text-sm text-gray-900 font-medium">{info.value}</p>
                      )}
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>

{/* Social Media */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Globe className="h-5 w-5 mr-2" />
                  Follow Us
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex space-x-4">
                  {socialLinks.map((social, index) => (
                    <a
                      key={index}
                      href={social.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center justify-center w-10 h-10 bg-gray-100 hover:bg-indigo-100 rounded-lg transition-colors"
                      title={social.name}
                    >
                      <social.icon className="h-5 w-5 text-gray-600 hover:text-indigo-600" />
                    </a>
                  ))}
                </div>
                <p className="text-sm text-gray-600 mt-4">
                  Stay updated with our latest news, design tips, and community highlights.
                </p>
              </CardContent>
            </Card>

{/* Quick Help */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Headphones className="h-5 w-5 mr-2" />
                  Need Quick Help?
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                  <a href="/faq">
                    <MessageSquare className="h-4 w-4 mr-2" />
                    Check FAQ
                  </a>
                </Button>
                <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                  <a href="/help">
                    <Headphones className="h-4 w-4 mr-2" />
                    Help Center
                  </a>
                </Button>
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  <MessageSquare className="h-4 w-4 mr-2" />
                  Live Chat
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>

{/* Team Section */}
        <div className="mt-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Meet Our Team</h2>
            <p className="text-xl text-gray-600">The people behind clothesDesign who are here to help you</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {team.map((member, index) => (
              <Card key={index} className="text-center hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="w-20 h-20 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <Users className="h-8 w-8 text-gray-400" />
                  </div>
                  <h3 className="font-semibold text-lg text-gray-900 mb-1">{member.name}</h3>
                  <p className="text-indigo-600 font-medium mb-3">{member.role}</p>
                  <p className="text-sm text-gray-600">{member.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{/* Map Section */}
        <div className="mt-16">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <MapPin className="h-5 w-5 mr-2" />
                Our Location
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="aspect-video bg-gray-200 rounded-lg flex items-center justify-center">
                <div className="text-center">
                  <MapPin className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-600">Interactive map would be embedded here</p>
                  <p className="text-sm text-gray-500 mt-2">123 Design Street, Creative City, CC 12345</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/orders/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Search, Package, Truck, CheckCircle, Clock, X, Eye, Download, RotateCcw, Star } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useAuth } from "@/hooks/use-auth"

interface Order {
  id: string
  orderNumber: string
  date: string
  status: "pending" | "processing" | "shipped" | "delivered" | "cancelled"
  items: Array<{
    id: string
    name: string
    image: string
    quantity: number
    price: number
    size: string
    color: string
  }>
  total: number
  shippingAddress: {
    name: string
    address: string
    city: string
    state: string
    zipCode: string
  }
  trackingNumber?: string
  estimatedDelivery?: string
}

export default function OrdersPage() {
  const { user } = useAuth()
  const [orders, setOrders] = useState<Order[]>([])
  const [filteredOrders, setFilteredOrders] = useState<Order[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [dateFilter, setDateFilter] = useState("all")
  const [isLoading, setIsLoading] = useState(true)
  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null)

useEffect(() => {
    const loadOrders = async () => {
      setIsLoading(true)

// Mock orders data
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockOrders: Order[] = [
        {
          id: "1",
          orderNumber: "ORD-2024-001",
          date: "2024-01-20T10:00:00Z",
          status: "delivered",
          items: [
            {
              id: "1",
              name: "Custom Sunset T-Shirt",
              image: "/placeholder.svg?height=80&width=80&text=T-Shirt",
              quantity: 2,
              price: 32.99,
              size: "M",
              color: "Black",
            },
            {
              id: "2",
              name: "Premium Hoodie",
              image: "/placeholder.svg?height=80&width=80&text=Hoodie",
              quantity: 1,
              price: 49.99,
              size: "L",
              color: "Gray",
            },
          ],
          total: 115.97,
          shippingAddress: {
            name: "John Doe",
            address: "123 Main St",
            city: "New York",
            state: "NY",
            zipCode: "10001",
          },
          trackingNumber: "1Z999AA1234567890",
          estimatedDelivery: "2024-01-25T00:00:00Z",
        },
        {
          id: "2",
          orderNumber: "ORD-2024-002",
          date: "2024-01-18T14:30:00Z",
          status: "shipped",
          items: [
            {
              id: "3",
              name: "Urban Street Design Tank",
              image: "/placeholder.svg?height=80&width=80&text=Tank",
              quantity: 1,
              price: 24.99,
              size: "S",
              color: "White",
            },
          ],
          total: 24.99,
          shippingAddress: {
            name: "John Doe",
            address: "123 Main St",
            city: "New York",
            state: "NY",
            zipCode: "10001",
          },
          trackingNumber: "1Z999AA1234567891",
          estimatedDelivery: "2024-01-23T00:00:00Z",
        },
        {
          id: "3",
          orderNumber: "ORD-2024-003",
          date: "2024-01-15T09:15:00Z",
          status: "processing",
          items: [
            {
              id: "4",
              name: "Minimalist Logo Hoodie",
              image: "/placeholder.svg?height=80&width=80&text=Logo+Hoodie",
              quantity: 1,
              price: 54.99,
              size: "XL",
              color: "Navy",
            },
          ],
          total: 54.99,
          shippingAddress: {
            name: "John Doe",
            address: "123 Main St",
            city: "New York",
            state: "NY",
            zipCode: "10001",
          },
        },
      ]

setOrders(mockOrders)
      setFilteredOrders(mockOrders)
      setIsLoading(false)
    }

loadOrders()
  }, [])

useEffect(() => {
    let filtered = [...orders]

// Search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (order) =>
          order.orderNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
          order.items.some((item) => item.name.toLowerCase().includes(searchQuery.toLowerCase())),
      )
    }

// Status filter
    if (statusFilter !== "all") {
      filtered = filtered.filter((order) => order.status === statusFilter)
    }

// Date filter
    if (dateFilter !== "all") {
      const now = new Date()
      const filterDate = new Date()

switch (dateFilter) {
        case "week":
          filterDate.setDate(now.getDate() - 7)
          break
        case "month":
          filterDate.setMonth(now.getMonth() - 1)
          break
        case "year":
          filterDate.setFullYear(now.getFullYear() - 1)
          break
      }

filtered = filtered.filter((order) => new Date(order.date) >= filterDate)
    }

setFilteredOrders(filtered)
  }, [orders, searchQuery, statusFilter, dateFilter])

const getStatusColor = (status: Order["status"]) => {
    switch (status) {
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "processing":
        return "bg-blue-100 text-blue-800"
      case "shipped":
        return "bg-purple-100 text-purple-800"
      case "delivered":
        return "bg-green-100 text-green-800"
      case "cancelled":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusIcon = (status: Order["status"]) => {
    switch (status) {
      case "pending":
        return <Clock className="h-4 w-4" />
      case "processing":
        return <Package className="h-4 w-4" />
      case "shipped":
        return <Truck className="h-4 w-4" />
      case "delivered":
        return <CheckCircle className="h-4 w-4" />
      case "cancelled":
        return <X className="h-4 w-4" />
      default:
        return <Package className="h-4 w-4" />
    }
  }

const handleReorder = (order: Order) => {
    // Add all items from the order back to cart
    alert(`Reordering ${order.orderNumber}. Items added to cart!`)
  }

const handleTrackOrder = (trackingNumber: string) => {
    // Open tracking page
    window.open(`https://www.ups.com/track?tracknum=${trackingNumber}`, "_blank")
  }

const handleDownloadInvoice = (orderNumber: string) => {
    // Mock download
    alert(`Downloading invoice for ${orderNumber}`)
  }

const handleLeaveReview = (itemId: string) => {
    alert(`Review form for item ${itemId} would open here`)
  }

if (isLoading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="space-y-6">
          {[...Array(3)].map((_, i) => (
            <Card key={i}>
              <CardContent className="p-6">
                <div className="animate-pulse space-y-4">
                  <div className="h-4 bg-gray-200 rounded w-1/4" />
                  <div className="h-4 bg-gray-200 rounded w-1/2" />
                  <div className="h-20 bg-gray-200 rounded" />
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">My Orders</h1>
        <p className="text-gray-600">Track and manage your orders</p>
      </div>

{/* Filters */}
      <div className="flex flex-col sm:flex-row gap-4 mb-8">
        <div className="flex-1">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
            <Input
              placeholder="Search orders..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

<Select value={statusFilter} onValueChange={setStatusFilter}>
          <SelectTrigger className="w-40">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Status</SelectItem>
            <SelectItem value="pending">Pending</SelectItem>
            <SelectItem value="processing">Processing</SelectItem>
            <SelectItem value="shipped">Shipped</SelectItem>
            <SelectItem value="delivered">Delivered</SelectItem>
            <SelectItem value="cancelled">Cancelled</SelectItem>
          </SelectContent>
        </Select>

<Select value={dateFilter} onValueChange={setDateFilter}>
          <SelectTrigger className="w-40">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Time</SelectItem>
            <SelectItem value="week">Last Week</SelectItem>
            <SelectItem value="month">Last Month</SelectItem>
            <SelectItem value="year">Last Year</SelectItem>
          </SelectContent>
        </Select>
      </div>

{/* Orders List */}
      {filteredOrders.length === 0 ? (
        <div className="text-center py-12">
          <Package className="h-16 w-16 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-semibold mb-2">No orders found</h3>
          <p className="text-gray-600 mb-6">
            {searchQuery || statusFilter !== "all" || dateFilter !== "all"
              ? "Try adjusting your filters"
              : "You haven't placed any orders yet"}
          </p>
          <Button asChild>
            <Link href="/shop">Start Shopping</Link>
          </Button>
        </div>
      ) : (
        <div className="space-y-6">
          {filteredOrders.map((order) => (
            <Card key={order.id} className="hover:shadow-lg transition-shadow">
              <CardHeader className="pb-4">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-lg">{order.orderNumber}</CardTitle>
                    <p className="text-sm text-gray-600 mt-1">Ordered on {new Date(order.date).toLocaleDateString()}</p>
                  </div>
                  <Badge className={getStatusColor(order.status)}>
                    {getStatusIcon(order.status)}
                    <span className="ml-1 capitalize">{order.status}</span>
                  </Badge>
                </div>
              </CardHeader>

<CardContent>
                {/* Order Items */}
                <div className="space-y-4 mb-6">
                  {order.items.map((item) => (
                    <div key={item.id} className="flex items-center space-x-4">
                      <Image
                        src={item.image || "/placeholder.svg"}
                        alt={item.name}
                        width={60}
                        height={60}
                        className="rounded-md object-cover"
                      />
                      <div className="flex-1">
                        <h4 className="font-medium">{item.name}</h4>
                        <p className="text-sm text-gray-600">
                          Size: {item.size} | Color: {item.color} | Qty: {item.quantity}
                        </p>
                      </div>
                      <div className="text-right">
                        <p className="font-semibold">${(item.price * item.quantity).toFixed(2)}</p>
                        {order.status === "delivered" && (
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleLeaveReview(item.id)}
                            className="text-xs mt-1"
                          >
                            <Star className="h-3 w-3 mr-1" />
                            Review
                          </Button>
                        )}
                      </div>
                    </div>
                  ))}
                </div>

{/* Order Summary */}
                <div className="flex items-center justify-between pt-4 border-t">
                  <div className="text-sm text-gray-600">
                    <p>
                      Total: <span className="font-semibold text-gray-900">${order.total.toFixed(2)}</span>
                    </p>
                    {order.estimatedDelivery && (
                      <p>Estimated delivery: {new Date(order.estimatedDelivery).toLocaleDateString()}</p>
                    )}
                  </div>

<div className="flex space-x-2">
                    <Dialog>
                      <DialogTrigger asChild>
                        <Button variant="outline" size="sm" onClick={() => setSelectedOrder(order)}>
                          <Eye className="h-4 w-4 mr-1" />
                          View
                        </Button>
                      </DialogTrigger>
                      <DialogContent className="max-w-2xl">
                        <DialogHeader>
                          <DialogTitle>Order Details - {order.orderNumber}</DialogTitle>
                        </DialogHeader>
                        {selectedOrder && (
                          <div className="space-y-6">
                            {/* Order Status */}
                            <div className="flex items-center justify-between">
                              <Badge className={getStatusColor(selectedOrder.status)}>
                                {getStatusIcon(selectedOrder.status)}
                                <span className="ml-1 capitalize">{selectedOrder.status}</span>
                              </Badge>
                              <p className="text-sm text-gray-600">
                                {new Date(selectedOrder.date).toLocaleDateString()}
                              </p>
                            </div>

{/* Items */}
                            <div>
                              <h3 className="font-semibold mb-3">Items</h3>
                              <div className="space-y-3">
                                {selectedOrder.items.map((item) => (
                                  <div key={item.id} className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
                                    <Image
                                      src={item.image || "/placeholder.svg"}
                                      alt={item.name}
                                      width={50}
                                      height={50}
                                      className="rounded object-cover"
                                    />
                                    <div className="flex-1">
                                      <p className="font-medium">{item.name}</p>
                                      <p className="text-sm text-gray-600">
                                        {item.size} | {item.color} | Qty: {item.quantity}
                                      </p>
                                    </div>
                                    <p className="font-semibold">${(item.price * item.quantity).toFixed(2)}</p>
                                  </div>
                                ))}
                              </div>
                            </div>

{/* Shipping Address */}
                            <div>
                              <h3 className="font-semibold mb-2">Shipping Address</h3>
                              <div className="text-sm text-gray-600">
                                <p>{selectedOrder.shippingAddress.name}</p>
                                <p>{selectedOrder.shippingAddress.address}</p>
                                <p>
                                  {selectedOrder.shippingAddress.city}, {selectedOrder.shippingAddress.state}{" "}
                                  {selectedOrder.shippingAddress.zipCode}
                                </p>
                              </div>
                            </div>

{/* Tracking */}
                            {selectedOrder.trackingNumber && (
                              <div>
                                <h3 className="font-semibold mb-2">Tracking Information</h3>
                                <p className="text-sm text-gray-600 mb-2">
                                  Tracking Number: {selectedOrder.trackingNumber}
                                </p>
                                <Button
                                  variant="outline"
                                  size="sm"
                                  onClick={() => handleTrackOrder(selectedOrder.trackingNumber!)}
                                >
                                  <Truck className="h-4 w-4 mr-1" />
                                  Track Package
                                </Button>
                              </div>
                            )}

{/* Total */}
                            <div className="pt-4 border-t">
                              <div className="flex justify-between text-lg font-semibold">
                                <span>Total</span>
                                <span>${selectedOrder.total.toFixed(2)}</span>
                              </div>
                            </div>
                          </div>
                        )}
                      </DialogContent>
                    </Dialog>

{order.trackingNumber && (
                      <Button variant="outline" size="sm" onClick={() => handleTrackOrder(order.trackingNumber!)}>
                        <Truck className="h-4 w-4 mr-1" />
                        Track
                      </Button>
                    )}

<Button variant="outline" size="sm" onClick={() => handleDownloadInvoice(order.orderNumber)}>
                      <Download className="h-4 w-4 mr-1" />
                      Invoice
                    </Button>

<Button variant="outline" size="sm" onClick={() => handleReorder(order)}>
                      <RotateCcw className="h-4 w-4 mr-1" />
                      Reorder
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/favorites/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Heart, ShoppingCart, Eye, Share2, Trash2, Grid3X3, List, Star, Calendar } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useAuth } from "@/hooks/use-auth"
import { useCart } from "@/hooks/use-cart"

interface FavoriteItem {
  id: string
  type: "product" | "design"
  name: string
  description: string
  image: string
  price: number
  originalPrice?: number
  rating: number
  reviews: number
  designer?: string
  tags: string[]
  addedAt: string
  inStock: boolean
}

export default function FavoritesPage() {
  const { user } = useAuth()
  const { addItem } = useCart()

const [favorites, setFavorites] = useState<FavoriteItem[]>([])
  const [filteredFavorites, setFilteredFavorites] = useState<FavoriteItem[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [typeFilter, setTypeFilter] = useState("all")
  const [sortBy, setSortBy] = useState("newest")
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const loadFavorites = async () => {
      setIsLoading(true)

// Mock favorites data
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockFavorites: FavoriteItem[] = [
        {
          id: "1",
          type: "design",
          name: "Sunset Vibes T-Shirt",
          description: "Beautiful sunset design perfect for summer",
          image: "/placeholder.svg?height=300&width=300&text=Sunset+Design",
          price: 32.99,
          originalPrice: 39.99,
          rating: 4.8,
          reviews: 124,
          designer: "Alex Martinez",
          tags: ["summer", "sunset", "nature"],
          addedAt: "2024-01-20T10:00:00Z",
          inStock: true,
        },
        {
          id: "2",
          type: "product",
          name: "Premium Cotton Hoodie",
          description: "Ultra-soft premium cotton hoodie",
          image: "/placeholder.svg?height=300&width=300&text=Hoodie",
          price: 49.99,
          rating: 4.9,
          reviews: 89,
          tags: ["hoodie", "cotton", "premium"],
          addedAt: "2024-01-18T14:30:00Z",
          inStock: true,
        },
        {
          id: "3",
          type: "design",
          name: "Urban Street Art",
          description: "Modern street art inspired design",
          image: "/placeholder.svg?height=300&width=300&text=Urban+Art",
          price: 28.99,
          rating: 4.7,
          reviews: 156,
          designer: "Sarah Kim",
          tags: ["urban", "street", "art"],
          addedAt: "2024-01-15T09:15:00Z",
          inStock: false,
        },
        {
          id: "4",
          type: "product",
          name: "Classic Tank Top",
          description: "Comfortable classic tank top",
          image: "/placeholder.svg?height=300&width=300&text=Tank+Top",
          price: 19.99,
          originalPrice: 24.99,
          rating: 4.6,
          reviews: 78,
          tags: ["tank", "classic", "summer"],
          addedAt: "2024-01-12T16:45:00Z",
          inStock: true,
        },
      ]

setFavorites(mockFavorites)
      setFilteredFavorites(mockFavorites)
      setIsLoading(false)
    }

loadFavorites()
  }, [])

useEffect(() => {
    let filtered = [...favorites]

// Search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (item) =>
          item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
          item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
          item.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())),
      )
    }

// Type filter
    if (typeFilter !== "all") {
      filtered = filtered.filter((item) => item.type === typeFilter)
    }

// Sort
    filtered.sort((a, b) => {
      switch (sortBy) {
        case "newest":
          return new Date(b.addedAt).getTime() - new Date(a.addedAt).getTime()
        case "oldest":
          return new Date(a.addedAt).getTime() - new Date(b.addedAt).getTime()
        case "name":
          return a.name.localeCompare(b.name)
        case "price-low":
          return a.price - b.price
        case "price-high":
          return b.price - a.price
        case "rating":
          return b.rating - a.rating
        default:
          return 0
      }
    })

setFilteredFavorites(filtered)
  }, [favorites, searchQuery, typeFilter, sortBy])

const removeFavorite = (id: string) => {
    setFavorites((prev) => prev.filter((item) => item.id !== id))
  }

const addToCart = (item: FavoriteItem) => {
    if (!item.inStock) {
      alert("This item is currently out of stock")
      return
    }

addItem({
      productId: item.id,
      name: item.name,
      price: item.price,
      quantity: 1,
      size: "M",
      color: "Default",
      image: item.image,
      isCustomDesign: item.type === "design",
    })

alert("Item added to cart!")
  }

const shareItem = (item: FavoriteItem) => {
    const url = item.type === "design" ? `/design-preview/${item.id}` : `/product/${item.id}`

if (navigator.share) {
      navigator.share({
        title: item.name,
        text: item.description,
        url: `${window.location.origin}${url}`,
      })
    } else {
      navigator.clipboard.writeText(`${window.location.origin}${url}`)
      alert("Link copied to clipboard!")
    }
  }

if (isLoading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {[...Array(6)].map((_, i) => (
            <div key={i} className="space-y-4">
              <div className="aspect-square bg-gray-200 rounded-lg animate-pulse" />
              <div className="h-4 bg-gray-200 rounded animate-pulse" />
              <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
            </div>
          ))}
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">My Favorites</h1>
        <p className="text-gray-600">{favorites.length} items saved</p>
      </div>

{/* Filters and Controls */}
      <div className="flex flex-col sm:flex-row gap-4 mb-8">
        <div className="flex-1">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
            <Input
              placeholder="Search favorites..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

<div className="flex items-center space-x-2">
          <Select value={typeFilter} onValueChange={setTypeFilter}>
            <SelectTrigger className="w-32">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Items</SelectItem>
              <SelectItem value="product">Products</SelectItem>
              <SelectItem value="design">Designs</SelectItem>
            </SelectContent>
          </Select>

<Select value={sortBy} onValueChange={setSortBy}>
            <SelectTrigger className="w-32">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="newest">Newest</SelectItem>
              <SelectItem value="oldest">Oldest</SelectItem>
              <SelectItem value="name">Name</SelectItem>
              <SelectItem value="price-low">Price: Low to High</SelectItem>
              <SelectItem value="price-high">Price: High to Low</SelectItem>
              <SelectItem value="rating">Rating</SelectItem>
            </SelectContent>
          </Select>

<div className="flex border rounded-md">
            <Button
              variant={viewMode === "grid" ? "default" : "ghost"}
              size="sm"
              onClick={() => setViewMode("grid")}
              className="rounded-r-none"
            >
              <Grid3X3 className="h-4 w-4" />
            </Button>
            <Button
              variant={viewMode === "list" ? "default" : "ghost"}
              size="sm"
              onClick={() => setViewMode("list")}
              className="rounded-l-none"
            >
              <List className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>

{/* Favorites Grid/List */}
      {filteredFavorites.length === 0 ? (
        <div className="text-center py-12">
          <Heart className="h-16 w-16 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-semibold mb-2">No favorites found</h3>
          <p className="text-gray-600 mb-6">
            {searchQuery || typeFilter !== "all"
              ? "Try adjusting your search or filters"
              : "Start adding items to your favorites"}
          </p>
          <Button asChild>
            <Link href="/shop">Browse Products</Link>
          </Button>
        </div>
      ) : (
        <div className={viewMode === "grid" ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" : "space-y-4"}>
          {filteredFavorites.map((item) => (
            <Card key={item.id} className="group hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                {viewMode === "grid" ? (
                  <>
                    <div className="relative overflow-hidden rounded-t-lg">
                      <Image
                        src={item.image || "/placeholder.svg"}
                        alt={item.name}
                        width={300}
                        height={300}
                        className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute top-3 left-3 flex space-x-2">
                        <Badge
                          className={
                            item.type === "design" ? "bg-purple-100 text-purple-800" : "bg-blue-100 text-blue-800"
                          }
                        >
                          {item.type === "design" ? "Design" : "Product"}
                        </Badge>
                        {!item.inStock && <Badge variant="secondary">Out of Stock</Badge>}
                      </div>
                      <div className="absolute top-3 right-3">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => removeFavorite(item.id)}
                          className="bg-white/80 hover:bg-white text-red-500 hover:text-red-600"
                        >
                          <Heart className="h-4 w-4 fill-current" />
                        </Button>
                      </div>
                      <div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-2">
                        <Button size="sm" variant="secondary" asChild>
                          <Link href={item.type === "design" ? `/design-preview/${item.id}` : `/product/${item.id}`}>
                            <Eye className="h-4 w-4 mr-1" />
                            View
                          </Link>
                        </Button>
                        <Button size="sm" variant="secondary" onClick={() => addToCart(item)} disabled={!item.inStock}>
                          <ShoppingCart className="h-4 w-4 mr-1" />
                          Add to Cart
                        </Button>
                      </div>
                    </div>
                    <div className="p-4">
                      <div className="flex items-start justify-between mb-2">
                        <h3 className="font-semibold text-lg line-clamp-1">{item.name}</h3>
                      </div>
                      <p className="text-gray-600 text-sm mb-3 line-clamp-2">{item.description}</p>

{item.designer && <p className="text-sm text-gray-500 mb-2">by {item.designer}</p>}

<div className="flex items-center mb-3">
                        <div className="flex items-center">
                          {[...Array(5)].map((_, i) => (
                            <Star
                              key={i}
                              className={`h-4 w-4 ${
                                i < Math.floor(item.rating) ? "text-yellow-400 fill-current" : "text-gray-300"
                              }`}
                            />
                          ))}
                        </div>
                        <span className="text-sm text-gray-600 ml-2">({item.reviews})</span>
                      </div>

<div className="flex flex-wrap gap-1 mb-3">
                        {item.tags.slice(0, 3).map((tag) => (
                          <Badge key={tag} variant="secondary" className="text-xs">
                            {tag}
                          </Badge>
                        ))}
                      </div>

<div className="flex items-center justify-between">
                        <div>
                          <span className="text-xl font-bold text-indigo-600">${item.price.toFixed(2)}</span>
                          {item.originalPrice && (
                            <span className="text-sm text-gray-500 line-through ml-2">
                              ${item.originalPrice.toFixed(2)}
                            </span>
                          )}
                        </div>
                        <div className="flex space-x-1">
                          <Button variant="ghost" size="sm" onClick={() => shareItem(item)}>
                            <Share2 className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => removeFavorite(item.id)}
                            className="text-red-500 hover:text-red-600"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  </>
                ) : (
                  <div className="flex items-center p-4 space-x-4">
                    <Image
                      src={item.image || "/placeholder.svg"}
                      alt={item.name}
                      width={80}
                      height={80}
                      className="rounded-lg object-cover"
                    />
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center space-x-2 mb-1">
                        <h3 className="font-semibold text-lg truncate">{item.name}</h3>
                        <Badge
                          className={
                            item.type === "design" ? "bg-purple-100 text-purple-800" : "bg-blue-100 text-blue-800"
                          }
                        >
                          {item.type === "design" ? "Design" : "Product"}
                        </Badge>
                        {!item.inStock && <Badge variant="secondary">Out of Stock</Badge>}
                      </div>
                      <p className="text-gray-600 text-sm mb-2 line-clamp-1">{item.description}</p>
                      {item.designer && <p className="text-sm text-gray-500 mb-2">by {item.designer}</p>}
                      <div className="flex items-center space-x-4 text-sm text-gray-500">
                        <div className="flex items-center">
                          {[...Array(5)].map((_, i) => (
                            <Star
                              key={i}
                              className={`h-3 w-3 ${
                                i < Math.floor(item.rating) ? "text-yellow-400 fill-current" : "text-gray-300"
                              }`}
                            />
                          ))}
                          <span className="ml-1">({item.reviews})</span>
                        </div>
                        <span className="flex items-center">
                          <Calendar className="h-3 w-3 mr-1" />
                          {new Date(item.addedAt).toLocaleDateString()}
                        </span>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="mb-2">
                        <span className="text-xl font-bold text-indigo-600">${item.price.toFixed(2)}</span>
                        {item.originalPrice && (
                          <div className="text-sm text-gray-500 line-through">${item.originalPrice.toFixed(2)}</div>
                        )}
                      </div>
                      <div className="flex items-center space-x-2">
                        <Button size="sm" variant="outline" asChild>
                          <Link href={item.type === "design" ? `/design-preview/${item.id}` : `/product/${item.id}`}>
                            <Eye className="h-4 w-4" />
                          </Link>
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => addToCart(item)} disabled={!item.inStock}>
                          <ShoppingCart className="h-4 w-4" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => shareItem(item)}>
                          <Share2 className="h-4 w-4" />
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => removeFavorite(item.id)}
                          className="text-red-500 hover:text-red-600"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Edit, Save, Camera, Shield, Bell, Download, Trash2, Eye, EyeOff, CheckCircle, AlertCircle } from "lucide-react"
import Image from "next/image"
import { useAuth } from "@/hooks/use-auth"

interface UserProfile {
  id: string
  firstName: string
  lastName: string
  email: string
  phone: string
  avatar: string
  bio: string
  location: string
  website: string
  joinedAt: string
  isVerified: boolean
  preferences: {
    emailNotifications: boolean
    smsNotifications: boolean
    marketingEmails: boolean
    designUpdates: boolean
  }
  stats: {
    totalOrders: number
    totalDesigns: number
    totalSpent: number
    memberSince: string
  }
}

export default function ProfilePage() {
  const { user } = useAuth()
  const [profile, setProfile] = useState<UserProfile | null>(null)
  const [isEditing, setIsEditing] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [activeTab, setActiveTab] = useState("profile")
  const [showCurrentPassword, setShowCurrentPassword] = useState(false)
  const [showNewPassword, setShowNewPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)

const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    bio: "",
    location: "",
    website: "",
  })

const [passwordData, setPasswordData] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  })

const [preferences, setPreferences] = useState({
    emailNotifications: true,
    smsNotifications: false,
    marketingEmails: true,
    designUpdates: true,
  })

useEffect(() => {
    const loadProfile = async () => {
      setIsLoading(true)

// Mock profile data
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockProfile: UserProfile = {
        id: "1",
        firstName: "John",
        lastName: "Doe",
        email: "john.doe@example.com",
        phone: "+1 (555) 123-4567",
        avatar: "/placeholder.svg?height=120&width=120&text=JD",
        bio: "Passionate designer and creative enthusiast. Love creating unique designs that tell stories.",
        location: "New York, NY",
        website: "https://johndoe.design",
        joinedAt: "2023-06-15T00:00:00Z",
        isVerified: true,
        preferences: {
          emailNotifications: true,
          smsNotifications: false,
          marketingEmails: true,
          designUpdates: true,
        },
        stats: {
          totalOrders: 24,
          totalDesigns: 18,
          totalSpent: 487.5,
          memberSince: "June 2023",
        },
      }

setProfile(mockProfile)
      setFormData({
        firstName: mockProfile.firstName,
        lastName: mockProfile.lastName,
        email: mockProfile.email,
        phone: mockProfile.phone,
        bio: mockProfile.bio,
        location: mockProfile.location,
        website: mockProfile.website,
      })
      setPreferences(mockProfile.preferences)
      setIsLoading(false)
    }

loadProfile()
  }, [])

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setPasswordData((prev) => ({ ...prev, [name]: value }))
  }

const handlePreferenceChange = (key: keyof typeof preferences) => {
    setPreferences((prev) => ({ ...prev, [key]: !prev[key] }))
  }

const handleSaveProfile = async () => {
    setIsSaving(true)

// Mock save
    await new Promise((resolve) => setTimeout(resolve, 1500))

if (profile) {
      setProfile((prev) => (prev ? { ...prev, ...formData } : null))
    }

setIsEditing(false)
    setIsSaving(false)
    alert("Profile updated successfully!")
  }

const handleChangePassword = async () => {
    if (passwordData.newPassword !== passwordData.confirmPassword) {
      alert("New passwords don't match")
      return
    }

if (passwordData.newPassword.length < 8) {
      alert("Password must be at least 8 characters long")
      return
    }

// Mock password change
    await new Promise((resolve) => setTimeout(resolve, 1000))

setPasswordData({
      currentPassword: "",
      newPassword: "",
      confirmPassword: "",
    })

alert("Password changed successfully!")
  }

const handleSavePreferences = async () => {
    // Mock save preferences
    await new Promise((resolve) => setTimeout(resolve, 1000))

if (profile) {
      setProfile((prev) => (prev ? { ...prev, preferences } : null))
    }

alert("Preferences saved successfully!")
  }

const handleDeleteAccount = () => {
    if (confirm("Are you sure you want to delete your account? This action cannot be undone.")) {
      alert("Account deletion process initiated. You will receive an email with further instructions.")
    }
  }

const handleDownloadData = () => {
    alert("Your data export has been initiated. You will receive an email with the download link.")
  }

if (isLoading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <div className="animate-pulse space-y-6">
            <div className="h-8 bg-gray-200 rounded w-1/4" />
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              <div className="space-y-4">
                <div className="h-32 bg-gray-200 rounded-full w-32 mx-auto" />
                <div className="h-4 bg-gray-200 rounded w-3/4 mx-auto" />
                <div className="h-4 bg-gray-200 rounded w-1/2 mx-auto" />
              </div>
              <div className="lg:col-span-2 space-y-4">
                {[...Array(6)].map((_, i) => (
                  <div key={i} className="h-4 bg-gray-200 rounded" />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

if (!profile) {
    return (
      <div className="container mx-auto px-4 py-16 text-center">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">Profile not found</h1>
        <p className="text-gray-600">Unable to load your profile information.</p>
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">My Profile</h1>
          <p className="text-gray-600">Manage your account settings and preferences</p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Profile Sidebar */}
          <div className="space-y-6">
            {/* Avatar and Basic Info */}
            <Card>
              <CardContent className="p-6 text-center">
                <div className="relative inline-block mb-4">
                  <Image
                    src={profile.avatar || "/placeholder.svg"}
                    alt={`${profile.firstName} ${profile.lastName}`}
                    width={120}
                    height={120}
                    className="rounded-full object-cover"
                  />
                  <Button size="sm" className="absolute bottom-0 right-0 rounded-full w-8 h-8 p-0">
                    <Camera className="h-4 w-4" />
                  </Button>
                </div>

<div className="space-y-2">
                  <div className="flex items-center justify-center space-x-2">
                    <h2 className="text-xl font-bold">
                      {profile.firstName} {profile.lastName}
                    </h2>
                    {profile.isVerified && <CheckCircle className="h-5 w-5 text-blue-500" />}
                  </div>
                  <p className="text-gray-600">{profile.email}</p>
                  <Badge variant="secondary" className="mt-2">
                    Member since {profile.stats.memberSince}
                  </Badge>
                </div>
              </CardContent>
            </Card>

{/* Stats */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Account Stats</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex justify-between">
                  <span className="text-gray-600">Total Orders</span>
                  <span className="font-semibold">{profile.stats.totalOrders}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">Designs Created</span>
                  <span className="font-semibold">{profile.stats.totalDesigns}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">Total Spent</span>
                  <span className="font-semibold">${profile.stats.totalSpent.toFixed(2)}</span>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Main Content */}
          <div className="lg:col-span-2">
            <Tabs value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="profile">Profile</TabsTrigger>
                <TabsTrigger value="security">Security</TabsTrigger>
                <TabsTrigger value="preferences">Preferences</TabsTrigger>
                <TabsTrigger value="data">Data</TabsTrigger>
              </TabsList>

{/* Profile Tab */}
              <TabsContent value="profile" className="space-y-6">
                <Card>
                  <CardHeader className="flex flex-row items-center justify-between">
                    <CardTitle>Personal Information</CardTitle>
                    <Button variant="outline" size="sm" onClick={() => setIsEditing(!isEditing)}>
                      <Edit className="h-4 w-4 mr-2" />
                      {isEditing ? "Cancel" : "Edit"}
                    </Button>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="firstName">First Name</Label>
                        <Input
                          id="firstName"
                          name="firstName"
                          value={formData.firstName}
                          onChange={handleInputChange}
                          disabled={!isEditing}
                        />
                      </div>
                      <div>
                        <Label htmlFor="lastName">Last Name</Label>
                        <Input
                          id="lastName"
                          name="lastName"
                          value={formData.lastName}
                          onChange={handleInputChange}
                          disabled={!isEditing}
                        />
                      </div>
                    </div>

<div>
                      <Label htmlFor="email">Email Address</Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        disabled={!isEditing}
                      />
                    </div>

<div>
                      <Label htmlFor="phone">Phone Number</Label>
                      <Input
                        id="phone"
                        name="phone"
                        value={formData.phone}
                        onChange={handleInputChange}
                        disabled={!isEditing}
                      />
                    </div>

<div>
                      <Label htmlFor="location">Location</Label>
                      <Input
                        id="location"
                        name="location"
                        value={formData.location}
                        onChange={handleInputChange}
                        disabled={!isEditing}
                      />
                    </div>

<div>
                      <Label htmlFor="website">Website</Label>
                      <Input
                        id="website"
                        name="website"
                        value={formData.website}
                        onChange={handleInputChange}
                        disabled={!isEditing}
                      />
                    </div>

{isEditing && (
                      <div className="flex space-x-4">
                        <Button onClick={handleSaveProfile} disabled={isSaving}>
                          {isSaving ? (
                            <>
                              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
                              Saving...
                            </>
                          ) : (
                            <>
                              <Save className="h-4 w-4 mr-2" />
                              Save Changes
                            </>
                          )}
                        </Button>
                        <Button variant="outline" onClick={() => setIsEditing(false)}>
                          Cancel
                        </Button>
                      </div>
                    )}
                  </CardContent>
                </Card>
              </TabsContent>

{/* Security Tab */}
              <TabsContent value="security" className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Shield className="h-5 w-5 mr-2" />
                      Change Password
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <Label htmlFor="currentPassword">Current Password</Label>
                      <div className="relative">
                        <Input
                          id="currentPassword"
                          name="currentPassword"
                          type={showCurrentPassword ? "text" : "password"}
                          value={passwordData.currentPassword}
                          onChange={handlePasswordChange}
                        />
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="absolute right-0 top-0 h-full px-3"
                          onClick={() => setShowCurrentPassword(!showCurrentPassword)}
                        >
                          {showCurrentPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                        </Button>
                      </div>
                    </div>

<div>
                      <Label htmlFor="newPassword">New Password</Label>
                      <div className="relative">
                        <Input
                          id="newPassword"
                          name="newPassword"
                          type={showNewPassword ? "text" : "password"}
                          value={passwordData.newPassword}
                          onChange={handlePasswordChange}
                        />
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="absolute right-0 top-0 h-full px-3"
                          onClick={() => setShowNewPassword(!showNewPassword)}
                        >
                          {showNewPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                        </Button>
                      </div>
                    </div>

<div>
                      <Label htmlFor="confirmPassword">Confirm New Password</Label>
                      <div className="relative">
                        <Input
                          id="confirmPassword"
                          name="confirmPassword"
                          type={showConfirmPassword ? "text" : "password"}
                          value={passwordData.confirmPassword}
                          onChange={handlePasswordChange}
                        />
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="absolute right-0 top-0 h-full px-3"
                          onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                        >
                          {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                        </Button>
                      </div>
                    </div>

<Button onClick={handleChangePassword}>
                      <Shield className="h-4 w-4 mr-2" />
                      Change Password
                    </Button>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Two-Factor Authentication</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">Two-Factor Authentication</p>
                        <p className="text-sm text-gray-600">Add an extra layer of security to your account</p>
                      </div>
                      <Button variant="outline">Enable 2FA</Button>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

{/* Preferences Tab */}
              <TabsContent value="preferences" className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Bell className="h-5 w-5 mr-2" />
                      Notification Preferences
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">Email Notifications</p>
                        <p className="text-sm text-gray-600">Receive order updates and important account information</p>
                      </div>
                      <Button
                        variant={preferences.emailNotifications ? "default" : "outline"}
                        size="sm"
                        onClick={() => handlePreferenceChange("emailNotifications")}
                      >
                        {preferences.emailNotifications ? "On" : "Off"}
                      </Button>
                    </div>

<div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">SMS Notifications</p>
                        <p className="text-sm text-gray-600">Get text messages for urgent updates</p>
                      </div>
                      <Button
                        variant={preferences.smsNotifications ? "default" : "outline"}
                        size="sm"
                        onClick={() => handlePreferenceChange("smsNotifications")}
                      >
                        {preferences.smsNotifications ? "On" : "Off"}
                      </Button>
                    </div>

<div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">Marketing Emails</p>
                        <p className="text-sm text-gray-600">Receive promotional offers and design inspiration</p>
                      </div>
                      <Button
                        variant={preferences.marketingEmails ? "default" : "outline"}
                        size="sm"
                        onClick={() => handlePreferenceChange("marketingEmails")}
                      >
                        {preferences.marketingEmails ? "On" : "Off"}
                      </Button>
                    </div>

<div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">Design Updates</p>
                        <p className="text-sm text-gray-600">Get notified about new design tools and features</p>
                      </div>
                      <Button
                        variant={preferences.designUpdates ? "default" : "outline"}
                        size="sm"
                        onClick={() => handlePreferenceChange("designUpdates")}
                      >
                        {preferences.designUpdates ? "On" : "Off"}
                      </Button>
                    </div>

<div className="pt-4">
                      <Button onClick={handleSavePreferences}>
                        <Save className="h-4 w-4 mr-2" />
                        Save Preferences
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

{/* Data Tab */}
              <TabsContent value="data" className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle>Data Management</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex items-center justify-between p-4 border rounded-lg">
                      <div>
                        <p className="font-medium">Download Your Data</p>
                        <p className="text-sm text-gray-600">Get a copy of all your account data and designs</p>
                      </div>
                      <Button variant="outline" onClick={handleDownloadData}>
                        <Download className="h-4 w-4 mr-2" />
                        Download
                      </Button>
                    </div>

<div className="flex items-center justify-between p-4 border rounded-lg border-red-200">
                      <div>
                        <p className="font-medium text-red-600">Delete Account</p>
                        <p className="text-sm text-gray-600">Permanently delete your account and all associated data</p>
                      </div>
                      <Dialog>
                        <DialogTrigger asChild>
                          <Button
                            variant="outline"
                            className="text-red-600 border-red-600 hover:bg-red-50 bg-transparent"
                          >
                            <Trash2 className="h-4 w-4 mr-2" />
                            Delete
                          </Button>
                        </DialogTrigger>
                        <DialogContent>
                          <DialogHeader>
                            <DialogTitle className="flex items-center text-red-600">
                              <AlertCircle className="h-5 w-5 mr-2" />
                              Delete Account
                            </DialogTitle>
                          </DialogHeader>
                          <div className="space-y-4">
                            <Alert variant="destructive">
                              <AlertCircle className="h-4 w-4" />
                              <AlertDescription>
                                This action cannot be undone. This will permanently delete your account and remove all
                                your data from our servers.
                              </AlertDescription>
                            </Alert>
                            <p className="text-sm text-gray-600">
                              Are you sure you want to delete your account? All your designs, orders, and personal
                              information will be permanently removed.
                            </p>
                            <div className="flex space-x-4">
                              <Button variant="destructive" onClick={handleDeleteAccount}>
                                Yes, Delete My Account
                              </Button>
                              <Button variant="outline">Cancel</Button>
                            </div>
                          </div>
                        </DialogContent>
                      </Dialog>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/reviews/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Star, Search, Filter, Eye, Trash2, Edit, MessageSquare } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useAuth } from "@/hooks/use-auth"

interface Review {
  id: string
  productId: string
  productName: string
  productImage: string
  rating: number
  title: string
  content: string
  createdAt: string
  status: "published" | "pending" | "rejected"
  helpful: number
  reported: number
  response?: {
    content: string
    createdAt: string
    author: string
  }
}

export default function ReviewsPage() {
  const { user } = useAuth()
  const [reviews, setReviews] = useState<Review[]>([])
  const [filteredReviews, setFilteredReviews] = useState<Review[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [ratingFilter, setRatingFilter] = useState("all")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const loadReviews = async () => {
      setIsLoading(true)

// Mock reviews data
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockReviews: Review[] = [
        {
          id: "1",
          productId: "1",
          productName: "Custom T-Shirt Design",
          productImage: "/placeholder.svg?height=80&width=80&text=T-Shirt",
          rating: 5,
          title: "Amazing quality and design!",
          content:
            "I absolutely love this custom t-shirt. The print quality is excellent and the fabric feels great. The design studio was easy to use and the final product exceeded my expectations.",
          createdAt: "2024-01-15T10:00:00Z",
          status: "published",
          helpful: 12,
          reported: 0,
          response: {
            content: "Thank you so much for your wonderful review! We're thrilled that you love your custom t-shirt.",
            createdAt: "2024-01-16T09:00:00Z",
            author: "Customer Service Team",
          },
        },
        {
          id: "2",
          productId: "2",
          productName: "Premium Hoodie",
          productImage: "/placeholder.svg?height=80&width=80&text=Hoodie",
          rating: 4,
          title: "Good quality, minor issues",
          content:
            "The hoodie is comfortable and the design looks good. However, the delivery took longer than expected and there was a small issue with the sizing.",
          createdAt: "2024-01-10T14:30:00Z",
          status: "published",
          helpful: 8,
          reported: 1,
        },
        {
          id: "3",
          productId: "3",
          productName: "Tank Top Design",
          productImage: "/placeholder.svg?height=80&width=80&text=Tank",
          rating: 3,
          title: "Average experience",
          content:
            "The tank top is okay but the colors weren't as vibrant as shown in the preview. The material is decent though.",
          createdAt: "2024-01-08T16:45:00Z",
          status: "published",
          helpful: 3,
          reported: 0,
        },
        {
          id: "4",
          productId: "4",
          productName: "Long Sleeve Shirt",
          productImage: "/placeholder.svg?height=80&width=80&text=Long+Sleeve",
          rating: 2,
          title: "Disappointed with quality",
          content:
            "The shirt arrived with some defects and the print quality was poor. I expected better for the price.",
          createdAt: "2024-01-05T11:20:00Z",
          status: "pending",
          helpful: 1,
          reported: 2,
        },
        {
          id: "5",
          productId: "5",
          productName: "Custom Design Mug",
          productImage: "/placeholder.svg?height=80&width=80&text=Mug",
          rating: 1,
          title: "Terrible experience",
          content: "The mug broke during shipping and customer service was unhelpful. Would not recommend.",
          createdAt: "2024-01-03T09:15:00Z",
          status: "rejected",
          helpful: 0,
          reported: 5,
        },
      ]

setReviews(mockReviews)
      setFilteredReviews(mockReviews)
      setIsLoading(false)
    }

loadReviews()
  }, [])

useEffect(() => {
    let filtered = [...reviews]

// Search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (review) =>
          review.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
          review.content.toLowerCase().includes(searchQuery.toLowerCase()) ||
          review.productName.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

// Status filter
    if (statusFilter !== "all") {
      filtered = filtered.filter((review) => review.status === statusFilter)
    }

// Rating filter
    if (ratingFilter !== "all") {
      filtered = filtered.filter((review) => review.rating === Number.parseInt(ratingFilter))
    }

setFilteredReviews(filtered)
  }, [reviews, searchQuery, statusFilter, ratingFilter])

const handleDeleteReview = (reviewId: string) => {
    if (confirm("Are you sure you want to delete this review?")) {
      setReviews((prev) => prev.filter((review) => review.id !== reviewId))
      alert("Review deleted successfully!")
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "published":
        return "bg-green-100 text-green-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "rejected":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const renderStars = (rating: number) => {
    return [...Array(5)].map((_, i) => (
      <Star key={i} className={`h-4 w-4 ${i < rating ? "text-yellow-400 fill-current" : "text-gray-300"}`} />
    ))
  }

if (isLoading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto space-y-6">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="h-32 bg-gray-200 rounded-lg animate-pulse" />
          ))}
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">My Reviews</h1>
          <p className="text-gray-600">Manage your product reviews and feedback</p>
        </div>

{/* Filters */}
        <Card className="mb-6">
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
                <Input
                  placeholder="Search reviews..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10"
                />
              </div>

<Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="Status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="published">Published</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="rejected">Rejected</SelectItem>
                </SelectContent>
              </Select>

<Select value={ratingFilter} onValueChange={setRatingFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="Rating" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Ratings</SelectItem>
                  <SelectItem value="5">5 Stars</SelectItem>
                  <SelectItem value="4">4 Stars</SelectItem>
                  <SelectItem value="3">3 Stars</SelectItem>
                  <SelectItem value="2">2 Stars</SelectItem>
                  <SelectItem value="1">1 Star</SelectItem>
                </SelectContent>
              </Select>

<Button variant="outline">
                <Filter className="h-4 w-4 mr-2" />
                Clear Filters
              </Button>
            </div>
          </CardContent>
        </Card>

{/* Reviews List */}
        <div className="space-y-6">
          {filteredReviews.length === 0 ? (
            <Card>
              <CardContent className="p-12 text-center">
                <MessageSquare className="h-12 w-12 mx-auto mb-4 text-gray-400" />
                <h3 className="text-lg font-semibold mb-2">No reviews found</h3>
                <p className="text-gray-600">You haven't written any reviews yet or no reviews match your filters.</p>
              </CardContent>
            </Card>
          ) : (
            filteredReviews.map((review) => (
              <Card key={review.id}>
                <CardContent className="p-6">
                  <div className="flex items-start space-x-4">
                    {/* Product Image */}
                    <Image
                      src={review.productImage || "/placeholder.svg"}
                      alt={review.productName}
                      width={80}
                      height={80}
                      className="rounded-lg object-cover"
                    />

{/* Review Content */}
                    <div className="flex-1 space-y-3">
                      {/* Header */}
                      <div className="flex items-start justify-between">
                        <div>
                          <Link
                            href={`/product/${review.productId}`}
                            className="font-semibold text-indigo-600 hover:text-indigo-800"
                          >
                            {review.productName}
                          </Link>
                          <div className="flex items-center space-x-2 mt-1">
                            <div className="flex">{renderStars(review.rating)}</div>
                            <Badge className={getStatusColor(review.status)}>{review.status}</Badge>
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Button variant="ghost" size="sm" asChild>
                            <Link href={`/product/${review.productId}`}>
                              <Eye className="h-4 w-4" />
                            </Link>
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDeleteReview(review.id)}
                            className="text-red-600 hover:text-red-800"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>

{/* Review Title and Content */}
                      <div>
                        <h3 className="font-semibold mb-2">{review.title}</h3>
                        <p className="text-gray-700">{review.content}</p>
                      </div>

{/* Review Stats */}
                      <div className="flex items-center justify-between text-sm text-gray-500">
                        <div className="flex items-center space-x-4">
                          <span>Posted {new Date(review.createdAt).toLocaleDateString()}</span>
                          <span>{review.helpful} found helpful</span>
                          {review.reported > 0 && <span className="text-red-500">{review.reported} reports</span>}
                        </div>
                      </div>

{/* Response */}
                      {review.response && (
                        <div className="bg-gray-50 p-4 rounded-lg mt-4">
                          <div className="flex items-center justify-between mb-2">
                            <span className="font-semibold text-sm">Response from {review.response.author}</span>
                            <span className="text-xs text-gray-500">
                              {new Date(review.response.createdAt).toLocaleDateString()}
                            </span>
                          </div>
                          <p className="text-sm text-gray-700">{review.response.content}</p>
                        </div>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </div>

{/* Pagination */}
        {filteredReviews.length > 10 && (
          <div className="flex justify-center mt-8">
            <div className="flex space-x-2">
              <Button variant="outline" size="sm">
                Previous
              </Button>
              <Button variant="outline" size="sm">
                1
              </Button>
              <Button size="sm">2</Button>
              <Button variant="outline" size="sm">
                3
              </Button>
              <Button variant="outline" size="sm">
                Next
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/reviews/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/reports/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Flag, Search, Filter, Eye, AlertTriangle, CheckCircle, XCircle, Clock } from "lucide-react"
import Image from "next/image"
import { useAuth } from "@/hooks/use-auth"

interface Report {
  id: string
  type: "design" | "review" | "user" | "content"
  targetId: string
  targetTitle: string
  targetImage?: string
  reason: string
  description: string
  status: "pending" | "reviewed" | "resolved" | "dismissed"
  priority: "low" | "medium" | "high" | "urgent"
  createdAt: string
  updatedAt: string
  result?: {
    action: "no_action" | "warning" | "content_removed" | "user_suspended" | "user_banned"
    reason: string
    moderator: string
    date: string
  }
}

export default function ReportsPage() {
  const { user } = useAuth()
  const [reports, setReports] = useState<Report[]>([])
  const [filteredReports, setFilteredReports] = useState<Report[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [typeFilter, setTypeFilter] = useState("all")
  const [priorityFilter, setPriorityFilter] = useState("all")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const loadReports = async () => {
      setIsLoading(true)

// Mock reports data
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockReports: Report[] = [
        {
          id: "1",
          type: "design",
          targetId: "design-123",
          targetTitle: "Inappropriate Design Content",
          targetImage: "/placeholder.svg?height=80&width=80&text=Design",
          reason: "inappropriate_content",
          description: "This design contains offensive imagery that violates community guidelines.",
          status: "resolved",
          priority: "high",
          createdAt: "2024-01-15T10:00:00Z",
          updatedAt: "2024-01-16T14:30:00Z",
          result: {
            action: "content_removed",
            reason:
              "Design violated community guidelines regarding inappropriate content. Design has been removed and designer has been notified.",
            moderator: "Admin Team",
            date: "2024-01-16T14:30:00Z",
          },
        },
        {
          id: "2",
          type: "review",
          targetId: "review-456",
          targetTitle: "Fake Review Suspected",
          reason: "fake_review",
          description: "This review seems fake and is trying to manipulate ratings.",
          status: "reviewed",
          priority: "medium",
          createdAt: "2024-01-12T16:45:00Z",
          updatedAt: "2024-01-13T09:20:00Z",
          result: {
            action: "warning",
            reason:
              "Review was flagged but found to be legitimate after investigation. User received a warning about review guidelines.",
            moderator: "Moderation Team",
            date: "2024-01-13T09:20:00Z",
          },
        },
        {
          id: "3",
          type: "user",
          targetId: "user-789",
          targetTitle: "Spam Account Activity",
          reason: "spam",
          description: "This user is posting spam content and fake designs repeatedly.",
          status: "pending",
          priority: "urgent",
          createdAt: "2024-01-18T11:30:00Z",
          updatedAt: "2024-01-18T11:30:00Z",
        },
        {
          id: "4",
          type: "content",
          targetId: "comment-321",
          targetTitle: "Harassment in Comments",
          reason: "harassment",
          description: "User is harassing other community members in design comments.",
          status: "dismissed",
          priority: "low",
          createdAt: "2024-01-10T08:15:00Z",
          updatedAt: "2024-01-11T10:45:00Z",
          result: {
            action: "no_action",
            reason:
              "After review, the reported content was found to be within community guidelines. No action required.",
            moderator: "Community Team",
            date: "2024-01-11T10:45:00Z",
          },
        },
        {
          id: "5",
          type: "design",
          targetId: "design-654",
          targetTitle: "Copyright Infringement",
          targetImage: "/placeholder.svg?height=80&width=80&text=Design",
          reason: "copyright",
          description: "This design uses copyrighted material without permission.",
          status: "resolved",
          priority: "high",
          createdAt: "2024-01-08T14:20:00Z",
          updatedAt: "2024-01-09T16:00:00Z",
          result: {
            action: "user_suspended",
            reason: "Design contained copyrighted material. User account suspended for 7 days and design removed.",
            moderator: "Legal Team",
            date: "2024-01-09T16:00:00Z",
          },
        },
      ]

setReports(mockReports)
      setFilteredReports(mockReports)
      setIsLoading(false)
    }

loadReports()
  }, [])

useEffect(() => {
    let filtered = [...reports]

// Search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (report) =>
          report.targetTitle.toLowerCase().includes(searchQuery.toLowerCase()) ||
          report.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
          report.reason.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

// Status filter
    if (statusFilter !== "all") {
      filtered = filtered.filter((report) => report.status === statusFilter)
    }

// Type filter
    if (typeFilter !== "all") {
      filtered = filtered.filter((report) => report.type === typeFilter)
    }

// Priority filter
    if (priorityFilter !== "all") {
      filtered = filtered.filter((report) => report.priority === priorityFilter)
    }

setFilteredReports(filtered)
  }, [reports, searchQuery, statusFilter, typeFilter, priorityFilter])

const getStatusColor = (status: string) => {
    switch (status) {
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "reviewed":
        return "bg-blue-100 text-blue-800"
      case "resolved":
        return "bg-green-100 text-green-800"
      case "dismissed":
        return "bg-gray-100 text-gray-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "urgent":
        return "bg-red-100 text-red-800"
      case "high":
        return "bg-orange-100 text-orange-800"
      case "medium":
        return "bg-yellow-100 text-yellow-800"
      case "low":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "pending":
        return <Clock className="h-4 w-4" />
      case "reviewed":
        return <Eye className="h-4 w-4" />
      case "resolved":
        return <CheckCircle className="h-4 w-4" />
      case "dismissed":
        return <XCircle className="h-4 w-4" />
      default:
        return <AlertTriangle className="h-4 w-4" />
    }
  }

const getActionDescription = (action: string) => {
    switch (action) {
      case "no_action":
        return "No action taken"
      case "warning":
        return "Warning issued"
      case "content_removed":
        return "Content removed"
      case "user_suspended":
        return "User suspended"
      case "user_banned":
        return "User banned"
      default:
        return "Unknown action"
    }
  }

const getActionColor = (action: string) => {
    switch (action) {
      case "no_action":
        return "bg-gray-100 text-gray-800"
      case "warning":
        return "bg-yellow-100 text-yellow-800"
      case "content_removed":
        return "bg-orange-100 text-orange-800"
      case "user_suspended":
        return "bg-red-100 text-red-800"
      case "user_banned":
        return "bg-red-200 text-red-900"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">My Reports</h1>
          <p className="text-gray-600">Track your submitted reports and their resolution status</p>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-2">
                <Clock className="h-5 w-5 text-yellow-500" />
                <div>
                  <p className="text-2xl font-bold">{reports.filter((r) => r.status === "pending").length}</p>
                  <p className="text-sm text-gray-600">Pending</p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-2">
                <Eye className="h-5 w-5 text-blue-500" />
                <div>
                  <p className="text-2xl font-bold">{reports.filter((r) => r.status === "reviewed").length}</p>
                  <p className="text-sm text-gray-600">Reviewed</p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-2">
                <CheckCircle className="h-5 w-5 text-green-500" />
                <div>
                  <p className="text-2xl font-bold">{reports.filter((r) => r.status === "resolved").length}</p>
                  <p className="text-sm text-gray-600">Resolved</p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-2">
                <XCircle className="h-5 w-5 text-gray-500" />
                <div>
                  <p className="text-2xl font-bold">{reports.filter((r) => r.status === "dismissed").length}</p>
                  <p className="text-sm text-gray-600">Dismissed</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Filters */}
        <Card className="mb-6">
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
                <Input
                  placeholder="Search reports..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10"
                />
              </div>

<Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="Status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="reviewed">Reviewed</SelectItem>
                  <SelectItem value="resolved">Resolved</SelectItem>
                  <SelectItem value="dismissed">Dismissed</SelectItem>
                </SelectContent>
              </Select>

<Select value={typeFilter} onValueChange={setTypeFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="Type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Types</SelectItem>
                  <SelectItem value="design">Design</SelectItem>
                  <SelectItem value="review">Review</SelectItem>
                  <SelectItem value="user">User</SelectItem>
                  <SelectItem value="content">Content</SelectItem>
                </SelectContent>
              </Select>

<Select value={priorityFilter} onValueChange={setPriorityFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="Priority" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Priorities</SelectItem>
                  <SelectItem value="urgent">Urgent</SelectItem>
                  <SelectItem value="high">High</SelectItem>
                  <SelectItem value="medium">Medium</SelectItem>
                  <SelectItem value="low">Low</SelectItem>
                </SelectContent>
              </Select>

<Button
                variant="outline"
                onClick={() => {
                  setSearchQuery("")
                  setStatusFilter("all")
                  setTypeFilter("all")
                  setPriorityFilter("all")
                }}
              >
                <Filter className="h-4 w-4 mr-2" />
                Clear
              </Button>
            </div>
          </CardContent>
        </Card>

{/* Reports List */}
        <div className="space-y-6">
          {filteredReports.length === 0 ? (
            <Card>
              <CardContent className="p-12 text-center">
                <Flag className="h-12 w-12 mx-auto mb-4 text-gray-400" />
                <h3 className="text-lg font-semibold mb-2">No reports found</h3>
                <p className="text-gray-600">You haven't submitted any reports yet or no reports match your filters.</p>
              </CardContent>
            </Card>
          ) : (
            filteredReports.map((report) => (
              <Card key={report.id}>
                <CardContent className="p-6">
                  <div className="flex items-start space-x-4">
                    {/* Target Image (if available) */}
                    {report.targetImage && (
                      <Image
                        src={report.targetImage || "/placeholder.svg"}
                        alt={report.targetTitle}
                        width={80}
                        height={80}
                        className="rounded-lg object-cover"
                      />
                    )}

{/* Report Content */}
                    <div className="flex-1 space-y-3">
                      {/* Header */}
                      <div className="flex items-start justify-between">
                        <div>
                          <h3 className="font-semibold text-lg">{report.targetTitle}</h3>
                          <div className="flex items-center space-x-2 mt-1">
                            <Badge className={getStatusColor(report.status)}>
                              {getStatusIcon(report.status)}
                              <span className="ml-1 capitalize">{report.status}</span>
                            </Badge>
                            <Badge className={getPriorityColor(report.priority)}>{report.priority.toUpperCase()}</Badge>
                            <Badge variant="outline" className="capitalize">
                              {report.type}
                            </Badge>
                          </div>
                        </div>
                      </div>

{/* Report Details */}
                      <div>
                        <p className="text-sm text-gray-600 mb-2">
                          <strong>Reason:</strong> {report.reason.replace("_", " ").toUpperCase()}
                        </p>
                        <p className="text-gray-700">{report.description}</p>
                      </div>

{/* Timestamps */}
                      <div className="flex items-center justify-between text-sm text-gray-500">
                        <div className="flex items-center space-x-4">
                          <span>Reported {new Date(report.createdAt).toLocaleDateString()}</span>
                          <span>Updated {new Date(report.updatedAt).toLocaleDateString()}</span>
                        </div>
                      </div>

{/* Resolution Result */}
                      {report.result && (
                        <Alert className="mt-4">
                          <AlertTriangle className="h-4 w-4" />
                          <AlertDescription>
                            <div className="space-y-2">
                              <div className="flex items-center space-x-2">
                                <span className="font-semibold">Resolution:</span>
                                <Badge className={getActionColor(report.result.action)}>
                                  {getActionDescription(report.result.action)}
                                </Badge>
                              </div>
                              <p className="text-sm">{report.result.reason}</p>
                              <div className="text-xs text-gray-500">
                                Resolved by {report.result.moderator} on{" "}
                                {new Date(report.result.date).toLocaleDateString()}
                              </div>
                            </div>
                          </AlertDescription>
                        </Alert>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </div>

{/* Pagination */}
        {filteredReports.length > 10 && (
          <div className="flex justify-center mt-8">
            <div className="flex space-x-2">
              <Button variant="outline" size="sm">
                Previous
              </Button>
              <Button variant="outline" size="sm">
                1
              </Button>
              <Button size="sm">2</Button>
              <Button variant="outline" size="sm">
                3
              </Button>
              <Button variant="outline" size="sm">
                Next
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/reports/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import Image from "next/image"
import { Star, ArrowRight, Palette, Shirt, Users, Zap } from "lucide-react"

export default function HomePage() {
  const featuredProducts = [
    {
      id: 1,
      name: "Classic T-Shirt",
      price: 24.99,
      image: "/placeholder.svg?height=300&width=300&text=T-Shirt",
      rating: 4.8,
      reviews: 124,
      bestseller: true,
    },
    {
      id: 2,
      name: "Premium Hoodie",
      price: 49.99,
      image: "/placeholder.svg?height=300&width=300&text=Hoodie",
      rating: 4.9,
      reviews: 89,
      bestseller: false,
    },
    {
      id: 3,
      name: "Tank Top",
      price: 19.99,
      image: "/placeholder.svg?height=300&width=300&text=Tank",
      rating: 4.7,
      reviews: 156,
      bestseller: true,
    },
    {
      id: 4,
      name: "Long Sleeve",
      price: 29.99,
      image: "/placeholder.svg?height=300&width=300&text=Long+Sleeve",
      rating: 4.6,
      reviews: 78,
      bestseller: false,
    },
  ]

const categories = [
    { name: "T-Shirts", image: "/placeholder.svg?height=200&width=200&text=T-Shirts", count: 150 },
    { name: "Hoodies", image: "/placeholder.svg?height=200&width=200&text=Hoodies", count: 89 },
    { name: "Tank Tops", image: "/placeholder.svg?height=200&width=200&text=Tanks", count: 67 },
    { name: "Long Sleeves", image: "/placeholder.svg?height=200&width=200&text=Long+Sleeves", count: 45 },
  ]

const recentDesigns = [
    { id: 1, name: "Sunset Vibes", designer: "Alex M.", image: "/placeholder.svg?height=250&width=250&text=Design+1" },
    { id: 2, name: "Urban Street", designer: "Sarah K.", image: "/placeholder.svg?height=250&width=250&text=Design+2" },
    { id: 3, name: "Nature Call", designer: "Mike R.", image: "/placeholder.svg?height=250&width=250&text=Design+3" },
    { id: 4, name: "Retro Wave", designer: "Emma L.", image: "/placeholder.svg?height=250&width=250&text=Design+4" },
  ]

const testimonials = [
    {
      name: "Jessica Chen",
      role: "Fashion Designer",
      content: "The design studio is incredibly intuitive. I can bring my ideas to life in minutes!",
      avatar: "/placeholder.svg?height=60&width=60&text=JC",
    },
    {
      name: "Marcus Johnson",
      role: "Small Business Owner",
      content: "Quality is outstanding and the customization options are endless. Highly recommend!",
      avatar: "/placeholder.svg?height=60&width=60&text=MJ",
    },
    {
      name: "Sofia Rodriguez",
      role: "Artist",
      content: "Finally found a platform that understands creative needs. The tools are professional-grade.",
      avatar: "/placeholder.svg?height=60&width=60&text=SR",
    },
  ]

return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-indigo-50 via-white to-purple-50 py-20 lg:py-32">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <div className="space-y-4">
                <Badge className="bg-indigo-100 text-indigo-700 hover:bg-indigo-100">
                  ✨ New Design Studio Features
                </Badge>
                <h1 className="text-4xl lg:text-6xl font-bold text-gray-900 leading-tight">
                  Create Custom
                  <span className="text-indigo-600"> Apparel</span>
                  <br />
                  That Tells Your Story
                </h1>
                <p className="text-xl text-gray-600 leading-relaxed">
                  Design unique clothing with our advanced studio. From concept to creation, bring your vision to life
                  with professional-grade tools and premium materials.
                </p>
              </div>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button size="lg" className="bg-indigo-600 hover:bg-indigo-700" asChild>
                  <Link href="/shop">
                    Shop Now
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Link>
                </Button>
                <Button size="lg" variant="outline" asChild>
                  <Link href="/design-studio">
                    <Palette className="mr-2 h-5 w-5" />
                    Start Designing
                  </Link>
                </Button>
              </div>
              <div className="flex items-center space-x-8 text-sm text-gray-600">
                <div className="flex items-center">
                  <Users className="h-5 w-5 mr-2 text-indigo-600" />
                  50K+ Happy Customers
                </div>
                <div className="flex items-center">
                  <Shirt className="h-5 w-5 mr-2 text-indigo-600" />
                  Premium Quality
                </div>
                <div className="flex items-center">
                  <Zap className="h-5 w-5 mr-2 text-indigo-600" />
                  Fast Delivery
                </div>
              </div>
            </div>
            <div className="relative">
              <Image
                src="/placeholder.svg?height=600&width=600&text=Hero+Design+Studio"
                alt="Design Studio Preview"
                width={600}
                height={600}
                className="rounded-2xl shadow-2xl"
              />
            </div>
          </div>
        </div>
      </section>

{/* Featured Products */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Featured Products</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Discover our most popular items, loved by thousands of customers worldwide
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {featuredProducts.map((product) => (
              <Card key={product.id} className="group hover:shadow-lg transition-shadow">
                <CardContent className="p-0">
                  <div className="relative overflow-hidden rounded-t-lg">
                    {product.bestseller && (
                      <Badge className="absolute top-3 left-3 z-10 bg-red-500 hover:bg-red-500">Bestseller</Badge>
                    )}
                    <Image
                      src={product.image || "/placeholder.svg"}
                      alt={product.name}
                      width={300}
                      height={300}
                      className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                  <div className="p-6">
                    <h3 className="font-semibold text-lg mb-2">{product.name}</h3>
                    <div className="flex items-center mb-3">
                      <div className="flex items-center">
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            className={`h-4 w-4 ${
                              i < Math.floor(product.rating) ? "text-yellow-400 fill-current" : "text-gray-300"
                            }`}
                          />
                        ))}
                      </div>
                      <span className="text-sm text-gray-600 ml-2">({product.reviews})</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-2xl font-bold text-indigo-600">${product.price}</span>
                      <Button size="sm" variant="outline" asChild>
                        <Link href={`/product/${product.id}`}>
                          View Details
                        </Link>
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
          <div className="text-center mt-12">
            <Button size="lg" variant="outline" asChild>
              <Link href="/shop">
                View All Products
                <ArrowRight className="ml-2 h-5 w-5" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

{/* Categories */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Shop by Category</h2>
            <p className="text-xl text-gray-600">Find the perfect base for your custom design</p>
          </div>
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {categories.map((category) => (
              <Link key={category.name} href={`/shop?category=${category.name.toLowerCase()}`} className="group">
                <Card className="hover:shadow-lg transition-shadow">
                  <CardContent className="p-6 text-center">
                    <Image
                      src={category.image || "/placeholder.svg"}
                      alt={category.name}
                      width={200}
                      height={200}
                      className="w-full h-32 object-cover rounded-lg mb-4 group-hover:scale-105 transition-transform"
                    />
                    <h3 className="font-semibold text-lg mb-2">{category.name}</h3>
                    <p className="text-gray-600">{category.count} items</p>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      </section>

{/* Recent Designs */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Recent Designs</h2>
            <p className="text-xl text-gray-600">Get inspired by our community's latest creations</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {recentDesigns.map((design) => (
              <Card key={design.id} className="group hover:shadow-lg transition-shadow">
                <CardContent className="p-0">
                  <div className="relative overflow-hidden rounded-t-lg">
                    <Image
                      src={design.image || "/placeholder.svg"}
                      alt={design.name}
                      width={250}
                      height={250}
                      className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                  <div className="p-6">
                    <h3 className="font-semibold text-lg mb-1">{design.name}</h3>
                    <p className="text-gray-600 mb-4">by {design.designer}</p>
                    <Button size="sm" className="w-full" asChild>
                      <Link href={`/design-preview/${design.id}`}>View Design</Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Testimonials */}
      <section className="py-20 bg-indigo-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">What Our Customers Say</h2>
            <p className="text-xl text-gray-600">Join thousands of satisfied customers who love our platform</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="bg-white">
                <CardContent className="p-8">
                  <div className="flex items-center mb-6">
                    <Image
                      src={testimonial.avatar || "/placeholder.svg"}
                      alt={testimonial.name}
                      width={60}
                      height={60}
                      className="rounded-full mr-4"
                    />
                    <div>
                      <h4 className="font-semibold">{testimonial.name}</h4>
                      <p className="text-gray-600 text-sm">{testimonial.role}</p>
                    </div>
                  </div>
                  <p className="text-gray-700 leading-relaxed">"{testimonial.content}"</p>
                  <div className="flex mt-4">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 text-yellow-400 fill-current" />
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Newsletter */}
      <section className="py-20 bg-gray-900 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl lg:text-4xl font-bold mb-4">Stay Updated</h2>
          <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
            Get the latest designs, exclusive offers, and design tips delivered to your inbox
          </p>
          <form className="max-w-md mx-auto flex gap-4">
            <Input type="email" placeholder="Enter your email" className="bg-white text-gray-900" />
            <Button type="submit" className="bg-indigo-600 hover:bg-indigo-700">
              Subscribe
            </Button>
          </form>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/shop/page.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
  Search,
  Filter,
  Heart,
  Star,
  Eye,
  ShoppingCart,
  Edit,
  Grid3X3,
  List,
  ChevronLeft,
  ChevronRight,
} from "lucide-react"
import Image from "next/image"
import { useCart } from "@/hooks/use-cart"
import Link from "next/link"

interface Product {
  id: number
  name: string
  category: string
  price: number
  originalPrice?: number
  image: string
  rating: number
  reviews: number
  colors: string[]
  bestseller: boolean
  isFavorite: boolean
  isEditable: boolean
}

export default function ShopPage() {
  const [products, setProducts] = useState<Product[]>([])
  const [filteredProducts, setFilteredProducts] = useState<Product[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [sortBy, setSortBy] = useState("most-sold")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [priceRange, setPriceRange] = useState({ min: "", max: "" })
  const [viewMode, setViewMode] = useState<"front" | "back">("front")
  const [layoutMode, setLayoutMode] = useState<"grid" | "list">("grid")
  const [currentPage, setCurrentPage] = useState(1)
  const [isLoading, setIsLoading] = useState(true)
  const itemsPerPage = 12

const { addItem } = useCart()

const handleAddToCart = (product: Product) => {
    addItem({
      productId: product.id.toString(),
      name: product.name,
      price: product.price,
      quantity: 1,
      size: "M",
      color: product.colors[0],
      image: product.image,
      isCustomDesign: false,
    })
    alert("Product added to cart!")
  }

// Mock data
  useEffect(() => {
    const mockProducts: Product[] = [
      {
        id: 1,
        name: "Classic Cotton T-Shirt",
        category: "t-shirts",
        price: 24.99,
        originalPrice: 29.99,
        image: "/placeholder.svg?height=300&width=300&text=T-Shirt+1",
        rating: 4.8,
        reviews: 124,
        colors: ["#000000", "#FFFFFF", "#FF0000", "#0000FF", "#00FF00"],
        bestseller: true,
        isFavorite: false,
        isEditable: true,
      },
      {
        id: 2,
        name: "Premium Hoodie",
        category: "hoodies",
        price: 49.99,
        image: "/placeholder.svg?height=300&width=300&text=Hoodie+1",
        rating: 4.9,
        reviews: 89,
        colors: ["#000000", "#FFFFFF", "#808080"],
        bestseller: false,
        isFavorite: true,
        isEditable: true,
      },
      {
        id: 3,
        name: "Athletic Tank Top",
        category: "tank-tops",
        price: 19.99,
        image: "/placeholder.svg?height=300&width=300&text=Tank+1",
        rating: 4.7,
        reviews: 156,
        colors: ["#000000", "#FFFFFF", "#FF0000", "#0000FF"],
        bestseller: true,
        isFavorite: false,
        isEditable: false,
      },
      {
        id: 4,
        name: "Long Sleeve Comfort",
        category: "long-sleeves",
        price: 29.99,
        image: "/placeholder.svg?height=300&width=300&text=Long+Sleeve+1",
        rating: 4.6,
        reviews: 78,
        colors: ["#000000", "#FFFFFF", "#808080", "#FF0000"],
        bestseller: false,
        isFavorite: false,
        isEditable: true,
      },
      // Add more mock products...
    ]

setTimeout(() => {
      setProducts(mockProducts)
      setFilteredProducts(mockProducts)
      setIsLoading(false)
    }, 1000)
  }, [])

// Filter and sort products
  useEffect(() => {
    let filtered = [...products]

// Search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (product) =>
          product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
          product.category.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

// Category filter
    if (selectedCategory !== "all") {
      filtered = filtered.filter((product) => product.category === selectedCategory)
    }

// Price range filter
    if (priceRange.min) {
      filtered = filtered.filter((product) => product.price >= Number.parseFloat(priceRange.min))
    }
    if (priceRange.max) {
      filtered = filtered.filter((product) => product.price <= Number.parseFloat(priceRange.max))
    }

// Sort products
    switch (sortBy) {
      case "most-sold":
        filtered.sort((a, b) => b.reviews - a.reviews)
        break
      case "newest":
        filtered.sort((a, b) => b.id - a.id)
        break
      case "price-low-high":
        filtered.sort((a, b) => a.price - b.price)
        break
      case "price-high-low":
        filtered.sort((a, b) => b.price - a.price)
        break
    }

setFilteredProducts(filtered)
    setCurrentPage(1)
  }, [products, searchQuery, sortBy, selectedCategory, priceRange])

const toggleFavorite = (productId: number) => {
    setProducts((prev) =>
      prev.map((product) => (product.id === productId ? { ...product, isFavorite: !product.isFavorite } : product)),
    )
  }

const categories = [
    { value: "all", label: "All Categories" },
    { value: "t-shirts", label: "T-Shirts" },
    { value: "hoodies", label: "Hoodies" },
    { value: "tank-tops", label: "Tank Tops" },
    { value: "long-sleeves", label: "Long Sleeves" },
  ]

const sortOptions = [
    { value: "most-sold", label: "Most Sold" },
    { value: "newest", label: "Newest" },
    { value: "price-low-high", label: "Price: Low to High" },
    { value: "price-high-low", label: "Price: High to Low" },
  ]

// Pagination
  const totalPages = Math.ceil(filteredProducts.length / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const endIndex = startIndex + itemsPerPage
  const currentProducts = filteredProducts.slice(startIndex, endIndex)

const FilterSidebar = () => (
    <div className="space-y-6">
      {/* Search */}
      <div>
        <Label htmlFor="search" className="text-sm font-medium mb-2 block">
          Search Products
        </Label>
        <div className="relative">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
          <Input
            id="search"
            placeholder="Search products..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>
      </div>

{/* Sort */}
      <div>
        <Label className="text-sm font-medium mb-2 block">Sort By</Label>
        <Select value={sortBy} onValueChange={setSortBy}>
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {sortOptions.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

{/* Categories */}
      <div>
        <Label className="text-sm font-medium mb-3 block">Categories</Label>
        <RadioGroup value={selectedCategory} onValueChange={setSelectedCategory}>
          {categories.map((category) => (
            <div key={category.value} className="flex items-center space-x-2">
              <RadioGroupItem value={category.value} id={category.value} />
              <Label htmlFor={category.value} className="text-sm">
                {category.label}
              </Label>
            </div>
          ))}
        </RadioGroup>
      </div>

{/* Price Range */}
      <div>
        <Label className="text-sm font-medium mb-3 block">Price Range</Label>
        <div className="grid grid-cols-2 gap-2">
          <div>
            <Label htmlFor="min-price" className="text-xs text-gray-500">
              Min
            </Label>
            <Input
              id="min-price"
              type="number"
              placeholder="0"
              value={priceRange.min}
              onChange={(e) => setPriceRange((prev) => ({ ...prev, min: e.target.value }))}
            />
          </div>
          <div>
            <Label htmlFor="max-price" className="text-xs text-gray-500">
              Max
            </Label>
            <Input
              id="max-price"
              type="number"
              placeholder="100"
              value={priceRange.max}
              onChange={(e) => setPriceRange((prev) => ({ ...prev, max: e.target.value }))}
            />
          </div>
        </div>
      </div>

{/* View Options */}
      <div>
        <Label className="text-sm font-medium mb-3 block">View Options</Label>
        <div className="flex space-x-2">
          <Button
            variant={viewMode === "front" ? "default" : "outline"}
            size="sm"
            onClick={() => setViewMode("front")}
            className="flex-1"
          >
            Front View
          </Button>
          <Button
            variant={viewMode === "back" ? "default" : "outline"}
            size="sm"
            onClick={() => setViewMode("back")}
            className="flex-1"
          >
            Back View
          </Button>
        </div>
      </div>
    </div>
  )

const ProductCard = ({ product }: { product: Product }) => (
    <Card className="group hover:shadow-lg transition-all duration-300">
      <CardContent className="p-0">
        <div className="relative overflow-hidden rounded-t-lg">
          {product.bestseller && (
            <Badge className="absolute top-3 left-3 z-10 bg-red-500 hover:bg-red-500">Bestseller</Badge>
          )}
          <Button
            variant="ghost"
            size="icon"
            className={`absolute top-3 right-3 z-10 ${product.isFavorite ? "text-red-500" : "text-gray-400"}`}
            onClick={() => toggleFavorite(product.id)}
          >
            <Heart className={`h-4 w-4 ${product.isFavorite ? "fill-current" : ""}`} />
          </Button>

{/* Hover Overlay */}
          <div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-2">
            <Button size="sm" variant="secondary" asChild>
              <Link href={`/product/${product.id}`}>
                <Eye className="h-4 w-4 mr-1" />
                Quick View
              </Link>
            </Button>
            <Button size="sm" variant="secondary" onClick={() => handleAddToCart(product)}>
              <ShoppingCart className="h-4 w-4 mr-1" />
              Add to Cart
            </Button>
          </div>
        </div>

<div className="p-4">
          <h3 className="font-semibold text-lg mb-1 line-clamp-1">{product.name}</h3>
          <p className="text-sm text-gray-600 mb-2 capitalize">{product.category.replace("-", " ")}</p>

<div className="flex items-center mb-3">
            <div className="flex items-center">
              {[...Array(5)].map((_, i) => (
                <Star
                  key={i}
                  className={`h-4 w-4 ${
                    i < Math.floor(product.rating) ? "text-yellow-400 fill-current" : "text-gray-300"
                  }`}
                />
              ))}
            </div>
            <span className="text-sm text-gray-600 ml-2">({product.reviews})</span>
          </div>

{/* Color Swatches */}
          <div className="flex items-center mb-3">
            <div className="flex space-x-1">
              {product.colors.slice(0, 4).map((color, index) => (
                <div
                  key={index}
                  className="w-4 h-4 rounded-full border border-gray-300"
                  style={{ backgroundColor: color }}
                />
              ))}
              {product.colors.length > 4 && (
                <span className="text-xs text-gray-500 ml-1">+{product.colors.length - 4} more</span>
              )}
            </div>
          </div>

<div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <span className="text-xl font-bold text-indigo-600">${product.price}</span>
              {product.originalPrice && (
                <span className="text-sm text-gray-500 line-through">${product.originalPrice}</span>
              )}
            </div>
            {product.isEditable && (
              <Button size="sm" variant="outline" asChild>
                <Link href={`/design-studio?product=${product.id}`}>
                  <Edit className="h-4 w-4 mr-1" />
                  Edit Design
                </Link>
              </Button>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  )

if (isLoading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          <div className="lg:col-span-1">
            <div className="space-y-4">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="h-12 bg-gray-200 rounded animate-pulse" />
              ))}
            </div>
          </div>
          <div className="lg:col-span-3">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {[...Array(9)].map((_, i) => (
                <div key={i} className="space-y-4">
                  <div className="h-64 bg-gray-200 rounded animate-pulse" />
                  <div className="h-4 bg-gray-200 rounded animate-pulse" />
                  <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {/* Desktop Sidebar */}
        <div className="hidden lg:block">
          <div className="sticky top-24">
            <h2 className="text-lg font-semibold mb-4">Filters</h2>
            <FilterSidebar />
          </div>
        </div>

{/* Main Content */}
        <div className="lg:col-span-3">
          {/* Header */}
          <div className="flex items-center justify-between mb-6">
            <div>
              <h1 className="text-2xl font-bold">Shop</h1>
              <p className="text-gray-600">{filteredProducts.length} products found</p>
            </div>

<div className="flex items-center space-x-2">
              {/* Mobile Filter */}
              <Sheet>
                <SheetTrigger asChild>
                  <Button variant="outline" size="sm" className="lg:hidden bg-transparent">
                    <Filter className="h-4 w-4 mr-2" />
                    Filters
                  </Button>
                </SheetTrigger>
                <SheetContent side="left" className="w-80">
                  <div className="mt-8">
                    <h2 className="text-lg font-semibold mb-4">Filters</h2>
                    <FilterSidebar />
                  </div>
                </SheetContent>
              </Sheet>

{/* Layout Toggle */}
              <div className="flex border rounded-md">
                <Button
                  variant={layoutMode === "grid" ? "default" : "ghost"}
                  size="sm"
                  onClick={() => setLayoutMode("grid")}
                  className="rounded-r-none"
                >
                  <Grid3X3 className="h-4 w-4" />
                </Button>
                <Button
                  variant={layoutMode === "list" ? "default" : "ghost"}
                  size="sm"
                  onClick={() => setLayoutMode("list")}
                  className="rounded-l-none"
                >
                  <List className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>

{/* Products Grid */}
          {currentProducts.length === 0 ? (
            <div className="text-center py-12">
              <div className="text-gray-400 mb-4">
                <Search className="h-16 w-16 mx-auto" />
              </div>
              <h3 className="text-lg font-semibold mb-2">No products found</h3>
              <p className="text-gray-600">Try adjusting your filters or search terms</p>
            </div>
          ) : (
            <div
              className={`grid gap-6 ${
                layoutMode === "grid" ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"
              }`}
            >
              {currentProducts.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          )}

{/* Pagination */}
          {totalPages > 1 && (
            <div className="flex items-center justify-center space-x-2 mt-8">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
                disabled={currentPage === 1}
              >
                <ChevronLeft className="h-4 w-4" />
              </Button>

{[...Array(totalPages)].map((_, i) => (
                <Button
                  key={i}
                  variant={currentPage === i + 1 ? "default" : "outline"}
                  size="sm"
                  onClick={() => setCurrentPage(i + 1)}
                >
                  {i + 1}
                </Button>
              ))}

<Button
                variant="outline"
                size="sm"
                onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
                disabled={currentPage === totalPages}
              >
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="database.sql"
-- E-commerce Design Platform Database Schema
-- Created for PHP + MySQL backend integration

-- Create database
CREATE DATABASE IF NOT EXISTS ecommerce_design_platform;
USE ecommerce_design_platform;

-- Users table
CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    phone VARCHAR(20),
    date_of_birth DATE,
    avatar_url VARCHAR(255),
    bio TEXT,
    location VARCHAR(100),
    website VARCHAR(255),
    is_verified BOOLEAN DEFAULT FALSE,
    is_active BOOLEAN DEFAULT TRUE,
    email_verified_at TIMESTAMP NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- User preferences table
CREATE TABLE user_preferences (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    email_notifications BOOLEAN DEFAULT TRUE,
    sms_notifications BOOLEAN DEFAULT FALSE,
    marketing_emails BOOLEAN DEFAULT TRUE,
    design_updates BOOLEAN DEFAULT TRUE,
    dark_mode BOOLEAN DEFAULT FALSE,
    language VARCHAR(10) DEFAULT 'en',
    timezone VARCHAR(50) DEFAULT 'UTC',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

-- Categories table
CREATE TABLE categories (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    slug VARCHAR(100) UNIQUE NOT NULL,
    description TEXT,
    image_url VARCHAR(255),
    parent_id INT NULL,
    sort_order INT DEFAULT 0,
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (parent_id) REFERENCES categories(id) ON DELETE SET NULL
);

-- Products table
CREATE TABLE products (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(200) NOT NULL,
    slug VARCHAR(200) UNIQUE NOT NULL,
    description TEXT,
    short_description TEXT,
    sku VARCHAR(100) UNIQUE,
    base_price DECIMAL(10,2) NOT NULL,
    sale_price DECIMAL(10,2) NULL,
    cost_price DECIMAL(10,2) NULL,
    category_id INT,
    brand VARCHAR(100),
    weight DECIMAL(8,2),
    dimensions JSON, -- {width, height, depth}
    design_area JSON, -- {x, y, width, height}
    is_customizable BOOLEAN DEFAULT TRUE,
    is_active BOOLEAN DEFAULT TRUE,
    is_featured BOOLEAN DEFAULT FALSE,
    stock_quantity INT DEFAULT 0,
    low_stock_threshold INT DEFAULT 10,
    meta_title VARCHAR(255),
    meta_description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (category_id) REFERENCES categories(id) ON DELETE SET NULL
);

-- Product images table
CREATE TABLE product_images (
    id INT PRIMARY KEY AUTO_INCREMENT,
    product_id INT NOT NULL,
    image_url VARCHAR(255) NOT NULL,
    alt_text VARCHAR(255),
    sort_order INT DEFAULT 0,
    is_primary BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE
);

-- Product variants table (colors, sizes, etc.)
CREATE TABLE product_variants (
    id INT PRIMARY KEY AUTO_INCREMENT,
    product_id INT NOT NULL,
    name VARCHAR(100) NOT NULL,
    value VARCHAR(100) NOT NULL,
    hex_color VARCHAR(7) NULL, -- For color variants
    price_modifier DECIMAL(10,2) DEFAULT 0,
    stock_quantity INT DEFAULT 0,
    sku VARCHAR(100),
    is_active BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE
);

-- Designs table
CREATE TABLE designs (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    name VARCHAR(200) NOT NULL,
    description TEXT,
    tags JSON, -- Array of tags
    product_id INT NOT NULL,
    product_color VARCHAR(50),
    product_size VARCHAR(20),
    design_data JSON, -- Complete design elements and properties
    preview_image_url VARCHAR(255),
    is_public BOOLEAN DEFAULT FALSE,
    allow_edit BOOLEAN DEFAULT FALSE,
    price DECIMAL(10,2) DEFAULT 0,
    views_count INT DEFAULT 0,
    likes_count INT DEFAULT 0,
    downloads_count INT DEFAULT 0,
    sales_count INT DEFAULT 0,
    status ENUM('draft', 'published', 'archived', 'reported') DEFAULT 'draft',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE
);

-- Design likes table
CREATE TABLE design_likes (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    design_id INT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    UNIQUE KEY unique_like (user_id, design_id),
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY (design_id) REFERENCES designs(id) ON DELETE CASCADE
);

-- Shopping cart table
CREATE TABLE shopping_cart (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    product_id INT NOT NULL,
    design_id INT NULL,
    quantity INT NOT NULL DEFAULT 1,
    size VARCHAR(20),
    color VARCHAR(50),
    price DECIMAL(10,2) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE,
    FOREIGN KEY (design_id) REFERENCES designs(id) ON DELETE SET NULL
);

-- Orders table
CREATE TABLE orders (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    order_number VARCHAR(50) UNIQUE NOT NULL,
    status ENUM('pending', 'processing', 'shipped', 'delivered', 'cancelled', 'refunded') DEFAULT 'pending',
    payment_status ENUM('pending', 'paid', 'failed', 'refunded') DEFAULT 'pending',
    payment_method VARCHAR(50),
    payment_id VARCHAR(255), -- External payment gateway ID
    subtotal DECIMAL(10,2) NOT NULL,
    tax_amount DECIMAL(10,2) DEFAULT 0,
    shipping_amount DECIMAL(10,2) DEFAULT 0,
    discount_amount DECIMAL(10,2) DEFAULT 0,
    total_amount DECIMAL(10,2) NOT NULL,
    currency VARCHAR(3) DEFAULT 'USD',
    notes TEXT,
    shipped_at TIMESTAMP NULL,
    delivered_at TIMESTAMP NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

-- Order items table
CREATE TABLE order_items (
    id INT PRIMARY KEY AUTO_INCREMENT,
    order_id INT NOT NULL,
    product_id INT NOT NULL,
    design_id INT NULL,
    quantity INT NOT NULL,
    size VARCHAR(20),
    color VARCHAR(50),
    unit_price DECIMAL(10,2) NOT NULL,
    total_price DECIMAL(10,2) NOT NULL,
    product_name VARCHAR(200), -- Snapshot of product name at time of order
    design_name VARCHAR(200), -- Snapshot of design name at time of order
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (order_id) REFERENCES orders(id) ON DELETE CASCADE,
    FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE,
    FOREIGN KEY (design_id) REFERENCES designs(id) ON DELETE SET NULL
);

-- Shipping addresses table
CREATE TABLE shipping_addresses (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    order_id INT NULL,
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50) NOT NULL,
    company VARCHAR(100),
    address_line_1 VARCHAR(255) NOT NULL,
    address_line_2 VARCHAR(255),
    city VARCHAR(100) NOT NULL,
    state VARCHAR(100) NOT NULL,
    postal_code VARCHAR(20) NOT NULL,
    country VARCHAR(100) NOT NULL,
    phone VARCHAR(20),
    is_default BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY (order_id) REFERENCES orders(id) ON DELETE SET NULL
);

-- Reviews table
CREATE TABLE reviews (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    product_id INT NOT NULL,
    order_id INT NULL,
    design_id INT NULL,
    rating INT NOT NULL CHECK (rating >= 1 AND rating <= 5),
    title VARCHAR(255),
    content TEXT,
    status ENUM('pending', 'published', 'rejected') DEFAULT 'pending',
    helpful_count INT DEFAULT 0,
    reported_count INT DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE,
    FOREIGN KEY (order_id) REFERENCES orders(id) ON DELETE SET NULL,
    FOREIGN KEY (design_id) REFERENCES designs(id) ON DELETE SET NULL
);

-- Review responses table (for admin/seller responses)
CREATE TABLE review_responses (
    id INT PRIMARY KEY AUTO_INCREMENT,
    review_id INT NOT NULL,
    user_id INT NOT NULL, -- Admin or seller who responded
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (review_id) REFERENCES reviews(id) ON DELETE CASCADE,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

-- Reports table
CREATE TABLE reports (
    id INT PRIMARY KEY AUTO_INCREMENT,
    reporter_id INT NOT NULL,
    reported_type ENUM('design', 'review', 'user', 'content') NOT NULL,
    reported_id INT NOT NULL, -- ID of the reported item
    reason VARCHAR(100) NOT NULL,
    description TEXT,
    status ENUM('pending', 'reviewed', 'resolved', 'dismissed') DEFAULT 'pending',
    priority ENUM('low', 'medium', 'high', 'urgent') DEFAULT 'medium',
    moderator_id INT NULL,
    resolution_action ENUM('no_action', 'warning', 'content_removed', 'user_suspended', 'user_banned') NULL,
    resolution_reason TEXT,
    resolved_at TIMESTAMP NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (reporter_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY (moderator_id) REFERENCES users(id) ON DELETE SET NULL
);

-- Coupons table
CREATE TABLE coupons (
    id INT PRIMARY KEY AUTO_INCREMENT,
    code VARCHAR(50) UNIQUE NOT NULL,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    type ENUM('percentage', 'fixed_amount', 'free_shipping') NOT NULL,
    value DECIMAL(10,2) NOT NULL,
    minimum_amount DECIMAL(10,2) DEFAULT 0,
    maximum_discount DECIMAL(10,2) NULL,
    usage_limit INT NULL,
    usage_count INT DEFAULT 0,
    user_limit INT DEFAULT 1, -- Per user usage limit
    is_active BOOLEAN DEFAULT TRUE,
    starts_at TIMESTAMP NULL,
    expires_at TIMESTAMP NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Coupon usage tracking
CREATE TABLE coupon_usage (
    id INT PRIMARY KEY AUTO_INCREMENT,
    coupon_id INT NOT NULL,
    user_id INT NOT NULL,
    order_id INT NOT NULL,
    discount_amount DECIMAL(10,2) NOT NULL,
    used_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (coupon_id) REFERENCES coupons(id) ON DELETE CASCADE,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY (order_id) REFERENCES orders(id) ON DELETE CASCADE
);

-- Favorites/Wishlist table
CREATE TABLE favorites (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    product_id INT NULL,
    design_id INT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
    FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE,
    FOREIGN KEY (design_id) REFERENCES designs(id) ON DELETE CASCADE,
    UNIQUE KEY unique_favorite (user_id, product_id, design_id)
);

-- Notifications table
CREATE TABLE notifications (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    type VARCHAR(50) NOT NULL,
    title VARCHAR(255) NOT NULL,
    message TEXT NOT NULL,
    data JSON, -- Additional notification data
    is_read BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    read_at TIMESTAMP NULL,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

-- Activity log table
CREATE TABLE activity_logs (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NULL,
    action VARCHAR(100) NOT NULL,
    entity_type VARCHAR(50) NOT NULL,
    entity_id INT NOT NULL,
    old_values JSON,
    new_values JSON,
    ip_address VARCHAR(45),
    user_agent TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE SET NULL
);

-- Settings table (for global app settings)
CREATE TABLE settings (
    id INT PRIMARY KEY AUTO_INCREMENT,
    key_name VARCHAR(100) UNIQUE NOT NULL,
    value TEXT,
    type ENUM('string', 'number', 'boolean', 'json') DEFAULT 'string',
    description TEXT,
    is_public BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Insert default categories
INSERT INTO categories (name, slug, description) VALUES
('T-Shirts', 't-shirts', 'Comfortable and stylish t-shirts for everyday wear'),
('Hoodies', 'hoodies', 'Warm and cozy hoodies perfect for any season'),
('Tank Tops', 'tank-tops', 'Lightweight tank tops for active lifestyles'),
('Long Sleeves', 'long-sleeves', 'Long sleeve shirts for extended coverage'),
('Accessories', 'accessories', 'Custom accessories and add-ons');

-- Insert default products
INSERT INTO products (name, slug, description, base_price, category_id, design_area, is_customizable) VALUES
('Classic Cotton T-Shirt', 'classic-cotton-t-shirt', 'Premium quality cotton t-shirt perfect for custom designs', 24.99, 1, '{"x": 100, "y": 150, "width": 200, "height": 200}', TRUE),
('Premium Hoodie', 'premium-hoodie', 'Comfortable hoodie with spacious design area', 49.99, 2, '{"x": 120, "y": 180, "width": 160, "height": 160}', TRUE),
('Athletic Tank Top', 'athletic-tank-top', 'Lightweight tank top ideal for sports and casual wear', 19.99, 3, '{"x": 110, "y": 140, "width": 180, "height": 180}', TRUE),
('Long Sleeve Comfort', 'long-sleeve-comfort', 'Soft long sleeve shirt with extended design space', 29.99, 4, '{"x": 100, "y": 160, "width": 200, "height": 180}', TRUE);

-- Insert product variants (colors)
INSERT INTO product_variants (product_id, name, value, hex_color) VALUES
(1, 'Color', 'Black', '#000000'),
(1, 'Color', 'White', '#FFFFFF'),
(1, 'Color', 'Navy', '#1e3a8a'),
(1, 'Color', 'Red', '#dc2626'),
(2, 'Color', 'Black', '#000000'),
(2, 'Color', 'Gray', '#6b7280'),
(2, 'Color', 'Navy', '#1e3a8a'),
(3, 'Color', 'White', '#FFFFFF'),
(3, 'Color', 'Black', '#000000'),
(3, 'Color', 'Blue', '#3b82f6'),
(4, 'Color', 'Black', '#000000'),
(4, 'Color', 'White', '#FFFFFF'),
(4, 'Color', 'Gray', '#6b7280');

-- Insert product variants (sizes)
INSERT INTO product_variants (product_id, name, value) VALUES
(1, 'Size', 'XS'), (1, 'Size', 'S'), (1, 'Size', 'M'), (1, 'Size', 'L'), (1, 'Size', 'XL'), (1, 'Size', 'XXL'),
(2, 'Size', 'XS'), (2, 'Size', 'S'), (2, 'Size', 'M'), (2, 'Size', 'L'), (2, 'Size', 'XL'), (2, 'Size', 'XXL'),
(3, 'Size', 'XS'), (3, 'Size', 'S'), (3, 'Size', 'M'), (3, 'Size', 'L'), (3, 'Size', 'XL'), (3, 'Size', 'XXL'),
(4, 'Size', 'XS'), (4, 'Size', 'S'), (4, 'Size', 'M'), (4, 'Size', 'L'), (4, 'Size', 'XL'), (4, 'Size', 'XXL');

-- Insert default settings
INSERT INTO settings (key_name, value, type, description, is_public) VALUES
('site_name', 'Custom Clothing Platform', 'string', 'Website name', TRUE),
('site_description', 'Create and customize your own clothing designs', 'string', 'Website description', TRUE),
('currency', 'USD', 'string', 'Default currency', TRUE),
('tax_rate', '0.08', 'number', 'Default tax rate', FALSE),
('shipping_rate', '5.99', 'number', 'Default shipping rate', TRUE),
('free_shipping_threshold', '50.00', 'number', 'Minimum order for free shipping', TRUE),
('max_design_file_size', '5242880', 'number', 'Maximum design file size in bytes (5MB)', FALSE),
('allowed_image_types', '["jpg", "jpeg", "png", "gif", "svg"]', 'json', 'Allowed image file types', FALSE);

-- Create indexes for better performance
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_username ON users(username);
CREATE INDEX idx_products_slug ON products(slug);
CREATE INDEX idx_products_category ON products(category_id);
CREATE INDEX idx_products_active ON products(is_active);
CREATE INDEX idx_designs_user ON designs(user_id);
CREATE INDEX idx_designs_product ON designs(product_id);
CREATE INDEX idx_designs_public ON designs(is_public);
CREATE INDEX idx_designs_status ON designs(status);
CREATE INDEX idx_orders_user ON orders(user_id);
CREATE INDEX idx_orders_status ON orders(status);
CREATE INDEX idx_orders_number ON orders(order_number);
CREATE INDEX idx_reviews_product ON reviews(product_id);
CREATE INDEX idx_reviews_user ON reviews(user_id);
CREATE INDEX idx_reviews_status ON reviews(status);
CREATE INDEX idx_reports_type_id ON reports(reported_type, reported_id);
CREATE INDEX idx_reports_status ON reports(status);
CREATE INDEX idx_favorites_user ON favorites(user_id);
CREATE INDEX idx_notifications_user ON notifications(user_id);
CREATE INDEX idx_notifications_read ON notifications(is_read);
[V0_FILE]typescriptreact:file="components/providers/theme-provider.tsx"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/theme-toggle.tsx"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function ThemeToggle() {
  const { setTheme } = useTheme()

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { Header } from "@/components/layout/header"
import { Toaster } from "@/components/ui/toaster"
import { AuthProvider } from "@/components/providers/auth-provider"
import { CartProvider } from "@/components/providers/cart-provider"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "clothesDesign - Custom Apparel Design Platform",
  description: "Create and customize your own clothing designs with our advanced design studio",
  keywords: "custom clothing, design, apparel, t-shirts, hoodies, fashion",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AuthProvider>
          <CartProvider>
            <Header />
            <main className="min-h-screen">{children}</main>
            <Toaster />
          </CartProvider>
        </AuthProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/layout/header.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
  Droplets,
  Search,
  ShoppingCart,
  User,
  Menu,
  Heart,
  Package,
  Palette,
  MessageSquare,
  Flag,
  LogOut,
  Shield,
} from "lucide-react"
import { useAuth } from "@/hooks/use-auth"
import { useCart } from "@/hooks/use-cart"

export function Header() {
  const [searchQuery, setSearchQuery] = useState("")
  const [isSearchFocused, setIsSearchFocused] = useState(false)
  const { user, logout, isAdmin } = useAuth()
  const { itemCount } = useCart()
  const router = useRouter()

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (searchQuery.trim()) {
      router.push(`/search?q=${encodeURIComponent(searchQuery)}`)
    }
  }

const navigation = [
    { name: "Shop", href: "/shop" },
    { name: "Pricing", href: "/pricing" },
    { name: "Design Studio", href: "/design-studio", authRequired: true },
    { name: "Contact", href: "/contact" },
  ]

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center space-x-2">
            <Droplets className="h-8 w-8 text-indigo-600" />
            <span className="text-xl font-bold">clothesDesign</span>
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className={`text-sm font-medium transition-colors hover:text-indigo-600 ${
                  item.authRequired && !user ? "opacity-50 cursor-not-allowed" : ""
                }`}
                onClick={(e) => {
                  if (item.authRequired && !user) {
                    e.preventDefault()
                    router.push("/login?redirect=" + encodeURIComponent(item.href))
                  }
                }}
              >
                {item.name}
              </Link>
            ))}
          </nav>

{/* Search Bar */}
          <div className="hidden md:flex flex-1 max-w-md mx-8">
            <form onSubmit={handleSearch} className="relative w-full">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                type="search"
                placeholder="Search products, designs..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                onFocus={() => setIsSearchFocused(true)}
                onBlur={() => setIsSearchFocused(false)}
                className="pl-10 pr-4"
              />
            </form>
          </div>

{/* Right Side Actions */}
          <div className="flex items-center space-x-4">
            {/* Cart */}
            <Link href="/cart" className="relative">
              <Button variant="ghost" size="icon">
                <ShoppingCart className="h-5 w-5" />
                {itemCount > 0 && (
                  <Badge className="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 text-xs">{itemCount}</Badge>
                )}
              </Button>
            </Link>

{/* User Menu */}
            {user ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <User className="h-5 w-5" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-56">
                  <DropdownMenuItem asChild>
                    <Link href="/profile" className="flex items-center">
                      <User className="mr-2 h-4 w-4" />
                      Profile
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/favorites" className="flex items-center">
                      <Heart className="mr-2 h-4 w-4" />
                      Favorites
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/orders" className="flex items-center">
                      <Package className="mr-2 h-4 w-4" />
                      Orders
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/designs" className="flex items-center">
                      <Palette className="mr-2 h-4 w-4" />
                      My Designs
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/reviews" className="flex items-center">
                      <MessageSquare className="mr-2 h-4 w-4" />
                      My Reviews
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/my-reports" className="flex items-center">
                      <Flag className="mr-2 h-4 w-4" />
                      My Reports
                    </Link>
                  </DropdownMenuItem>
                  {isAdmin && (
                    <>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem asChild>
                        <Link href="/admin" className="flex items-center text-red-600">
                          <Shield className="mr-2 h-4 w-4" />
                          Admin Panel
                        </Link>
                      </DropdownMenuItem>
                    </>
                  )}
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={logout} className="flex items-center">
                    <LogOut className="mr-2 h-4 w-4" />
                    Logout
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              <Button asChild>
                <Link href="/login">Sign in</Link>
              </Button>
            )}

{/* Mobile Menu */}
            <Sheet>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="md:hidden">
                  <Menu className="h-5 w-5" />
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-80">
                <div className="flex flex-col space-y-4 mt-8">
                  {/* Mobile Search */}
                  <form onSubmit={handleSearch} className="relative">
                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                    <Input
                      type="search"
                      placeholder="Search..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="pl-10"
                    />
                  </form>

{/* Mobile Navigation */}
                  <nav className="flex flex-col space-y-2">
                    {navigation.map((item) => (
                      <Link
                        key={item.name}
                        href={item.href}
                        className="px-4 py-2 text-sm font-medium rounded-md hover:bg-accent"
                        onClick={(e) => {
                          if (item.authRequired && !user) {
                            e.preventDefault()
                            router.push("/login?redirect=" + encodeURIComponent(item.href))
                          }
                        }}
                      >
                        {item.name}
                      </Link>
                    ))}
                  </nav>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/design-studio/page.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Toggle } from "@/components/ui/toggle"
import {
  Type,
  ImageIcon,
  Square,
  Circle,
  Palette,
  Layers,
  ZoomIn,
  ZoomOut,
  RotateCcw,
  RotateCw,
  Save,
  Eye,
  ShoppingCart,
  Upload,
  Grid3X3,
  Move,
  Trash2,
  Copy,
  Lock,
  Unlock,
  Settings,
  MousePointer,
  Download,
  ChevronUp,
  ChevronDown,
  Bold,
  Italic,
  Underline,
  EyeOff,
} from "lucide-react"
import { useAuth } from "@/hooks/use-auth"
import { useRouter } from "next/navigation"
import { useCart } from "@/hooks/use-cart"
import Image from "next/image"

interface DesignElement {
  id: string
  type: "text" | "image" | "shape"
  content: string
  x: number
  y: number
  width: number
  height: number
  rotation: number
  opacity: number
  locked: boolean
  visible: boolean
  zIndex: number
  style?: {
    fontSize?: number
    fontFamily?: string
    color?: string
    backgroundColor?: string
    borderColor?: string
    borderWidth?: number
    fontWeight?: "normal" | "bold"
    fontStyle?: "normal" | "italic"
    textDecoration?: "none" | "underline"
    textStroke?: string
    textStrokeWidth?: number
    backgroundGradient?: string
    textShape?: "normal" | "arc" | "wave"
  }
}

interface Product {
  id: string
  name: string
  image: string
  designArea: {
    x: number
    y: number
    width: number
    height: number
  }
  colors: { name: string; value: string }[]
}

interface UploadedImage {
  id: string
  url: string
  name: string
  uploadDate: Date
}

interface DesignViews {
  front: DesignElement[]
  back: DesignElement[]
}

export default function DesignStudioPage() {
  const { user } = useAuth()
  const router = useRouter()
  const { addItem } = useCart()
  const canvasRef = useRef<HTMLDivElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const downloadCanvasRef = useRef<HTMLCanvasElement>(null)

const [selectedProduct, setSelectedProduct] = useState<Product | null>(null)
  const [selectedColor, setSelectedColor] = useState("")
  const [selectedSize, setSelectedSize] = useState("M")
  const [viewSide, setViewSide] = useState<"front" | "back">("front")
  const [zoomLevel, setZoomLevel] = useState(100)
  const [showGrid, setShowGrid] = useState(true)
  const [snapToGrid, setSnapToGrid] = useState(true)
  const [previewMode, setPreviewMode] = useState(false)
  const [open, setOpen] = useState(false);

// Separate design views
  const [designViews, setDesignViews] = useState<DesignViews>({
    front: [],
    back: [],
  })

// Current elements based on selected view
  const elements = designViews[viewSide]
  const setElements = (updater: React.SetStateAction<DesignElement[]>) => {
    setDesignViews((prev) => ({
      ...prev,
      [viewSide]: typeof updater === "function" ? updater(prev[viewSide]) : updater,
    }))
  }

const [selectedElement, setSelectedElement] = useState<string | null>(null)
  const [draggedElement, setDraggedElement] = useState<string | null>(null)
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
  const [resizeHandle, setResizeHandle] = useState<string | null>(null)
  const [rotateHandle, setRotateHandle] = useState<string | null>(null)
  const [isResizing, setIsResizing] = useState(false)
  const [isRotating, setIsRotating] = useState(false)
  const [initialMousePos, setInitialMousePos] = useState({ x: 0, y: 0 })
  const [initialElementState, setInitialElementState] = useState<DesignElement | null>(null)
  const [history, setHistory] = useState<DesignViews[]>([])
  const [historyIndex, setHistoryIndex] = useState(-1)

// Image library
  const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([])
  
  // Suggested images
  const suggestedImages = [
    { id: 'suggested-1', url: '/placeholder.svg?height=200&width=200&text=Logo+1', name: 'Logo Design 1' },
    { id: 'suggested-2', url: '/placeholder.svg?height=200&width=200&text=Logo+2', name: 'Logo Design 2' },
    { id: 'suggested-3', url: '/placeholder.svg?height=200&width=200&text=Pattern+1', name: 'Pattern 1' },
    { id: 'suggested-4', url: '/placeholder.svg?height=200&width=200&text=Pattern+2', name: 'Pattern 2' },
    { id: 'suggested-5', url: '/placeholder.svg?height=200&width=200&text=Icon+1', name: 'Icon 1' },
    { id: 'suggested-6', url: '/placeholder.svg?height=200&width=200&text=Icon+2', name: 'Icon 2' },
  ]

const [designName, setDesignName] = useState("")
  const [designDescription, setDesignDescription] = useState("")
  const [designTags, setDesignTags] = useState("")
  const [isPublic, setIsPublic] = useState(false)
  const [allowEdit, setAllowEdit] = useState(false)

const [activeTab, setActiveTab] = useState("products")
  const [textInput, setTextInput] = useState("")
  const [selectedFont, setSelectedFont] = useState("Arial")
  const [fontSize, setFontSize] = useState(24)
  const [textColor, setTextColor] = useState("#000000")
  const [textOutlineColor, setTextOutlineColor] = useState("#000000")
  const [textOutlineWidth, setTextOutlineWidth] = useState(0)
  const [textGradient, setTextGradient] = useState("")
  const [textShape, setTextShape] = useState<"normal" | "arc" | "wave">("normal")
  const [isBold, setIsBold] = useState(false)
  const [isItalic, setIsItalic] = useState(false)
  const [isUnderline, setIsUnderline] = useState(false)

// Add new state for gradient colors
  const [gradientStartColor, setGradientStartColor] = useState("#ff0000")
  const [gradientEndColor, setGradientEndColor] = useState("#0000ff")
  const [gradientDirection, setGradientDirection] = useState("45deg")

// Mobile-specific states
  const [isMobile, setIsMobile] = useState(false)
  const [isToolsOpen, setIsToolsOpen] = useState(false)
  const [isPropertiesOpen, setIsPropertiesOpen] = useState(false)

const products: Product[] = [
    {
      id: "1",
      name: "Classic T-Shirt",
      image: "/placeholder.svg?height=400&width=400&text=T-Shirt+Front",
      designArea: { x: 100, y: 150, width: 200, height: 200 },
      colors: [
        { name: "Black", value: "#000000" },
        { name: "White", value: "#FFFFFF" },
        { name: "Navy", value: "#1e3a8a" },
        { name: "Red", value: "#dc2626" },
      ],
    },
    {
      id: "2",
      name: "Premium Hoodie",
      image: "/placeholder.svg?height=400&width=400&text=Hoodie+Front",
      designArea: { x: 120, y: 180, width: 160, height: 160 },
      colors: [
        { name: "Black", value: "#000000" },
        { name: "Gray", value: "#6b7280" },
        { name: "Navy", value: "#1e3a8a" },
      ],
    },
    {
      id: "3",
      name: "Tank Top",
      image: "/placeholder.svg?height=400&width=400&text=Tank+Front",
      designArea: { x: 110, y: 140, width: 180, height: 180 },
      colors: [
        { name: "White", value: "#FFFFFF" },
        { name: "Black", value: "#000000" },
        { name: "Blue", value: "#3b82f6" },
      ],
    },
  ]

const fonts = [
    "Arial",
    "Helvetica",
    "Times New Roman",
    "Georgia",
    "Verdana",
    "Impact",
    "Comic Sans MS",
    "Trebuchet MS",
    "Courier New",
    "Palatino",
    "Garamond",
    "Bookman",
    "Avant Garde",
    "Helvetica Narrow",
    "Century Gothic",
    "Franklin Gothic",
  ]

const shapes = [
    { name: "Rectangle", icon: Square },
    { name: "Circle", icon: Circle },
  ]

useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }

checkMobile()
    window.addEventListener("resize", checkMobile)

return () => window.removeEventListener("resize", checkMobile)
  }, [])

useEffect(() => {
    if (!user) {
      router.push("/login?redirect=/design-studio")
      return
    }

// Set default product
    if (products.length > 0 && !selectedProduct) {
      setSelectedProduct(products[0])
      setSelectedColor(products[0].colors[0].value)
    }
  }, [user, router, selectedProduct])

// Keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (!selectedElement) return

// Prevent default for our shortcuts
      if (["Delete", "Backspace", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
          return // Don't interfere with input fields
        }
      }

switch (e.key) {
        case "Delete":
        case "Backspace":
          e.preventDefault()
          deleteElement(selectedElement)
          break
        case "c":
          if (e.ctrlKey || e.metaKey) {
            e.preventDefault()
            duplicateElement(selectedElement)
          }
          break
        case "ArrowUp":
          e.preventDefault()
          nudgeElement(selectedElement, 0, e.shiftKey ? -10 : -1)
          break
        case "ArrowDown":
          e.preventDefault()
          nudgeElement(selectedElement, 0, e.shiftKey ? 10 : 1)
          break
        case "ArrowLeft":
          e.preventDefault()
          nudgeElement(selectedElement, e.shiftKey ? -10 : -1, 0)
          break
        case "ArrowRight":
          e.preventDefault()
          nudgeElement(selectedElement, e.shiftKey ? 10 : 1, 0)
          break
      }
    }

document.addEventListener("keydown", handleKeyDown)
    return () => document.removeEventListener("keydown", handleKeyDown)
  }, [selectedElement])

const saveToHistory = useCallback(() => {
    const newHistory = history.slice(0, historyIndex + 1)
    newHistory.push(JSON.parse(JSON.stringify(designViews)))
    setHistory(newHistory)
    setHistoryIndex(newHistory.length - 1)
  }, [designViews, history, historyIndex])

const nudgeElement = (elementId: string, deltaX: number, deltaY: number) => {
    setElements((prev) =>
      prev.map((el) => {
        if (el.id === elementId && !el.locked) {
          const newX = Math.max(0, el.x + deltaX)
          const newY = Math.max(0, el.y + deltaY)
          return { ...el, x: newX, y: newY }
        }
        return el
      }),
    )
    saveToHistory()
  }

const addTextElement = () => {
    if (!textInput.trim() || !selectedProduct) return

const designArea = selectedProduct.designArea
    const newElement: DesignElement = {
      id: Date.now().toString(),
      type: "text",
      content: textInput,
      x: designArea.x + 20,
      y: designArea.y + 20,
      width: 150,
      height: 40,
      rotation: 0,
      opacity: 1,
      locked: false,
      visible: true,
      zIndex: elements.length + 1,
      style: {
        fontSize,
        fontFamily: selectedFont,
        color: textColor,
        fontWeight: isBold ? "bold" : "normal",
        fontStyle: isItalic ? "italic" : "normal",
        textDecoration: isUnderline ? "underline" : "none",
        textStroke: textOutlineColor,
        textStrokeWidth: textOutlineWidth,
        backgroundGradient: textGradient,
        textShape: textShape,
      },
    }

setElements((prev) => [...prev, newElement])
    setTextInput("")
    saveToHistory()

if (isMobile) {
      setIsToolsOpen(false)
    }
  }

const addShapeElement = (shapeType: string) => {
    if (!selectedProduct) return

const designArea = selectedProduct.designArea
    const newElement: DesignElement = {
      id: Date.now().toString(),
      type: "shape",
      content: shapeType,
      x: designArea.x + 30,
      y: designArea.y + 30,
      width: 80,
      height: 80,
      rotation: 0,
      opacity: 1,
      locked: false,
      visible: true,
      zIndex: elements.length + 1,
      style: {
        backgroundColor: "#3b82f6",
        borderColor: "#1e40af",
        borderWidth: 2,
      },
    }

setElements((prev) => [...prev, newElement])
    saveToHistory()

if (isMobile) {
      setIsToolsOpen(false)
    }
  }

const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file || !selectedProduct) return

const reader = new FileReader()
    reader.onload = (e) => {
      const imageUrl = e.target?.result as string

// Add to uploaded images library
      const newUploadedImage: UploadedImage = {
        id: Date.now().toString(),
        url: imageUrl,
        name: file.name,
        uploadDate: new Date(),
      }
      setUploadedImages((prev) => [...prev, newUploadedImage])

// Add to canvas
      addImageToCanvas(imageUrl)
    }
    reader.readAsDataURL(file)

if (isMobile) {
      setIsToolsOpen(false)
    }
  }

const addImageToCanvas = (imageUrl: string) => {
    if (!selectedProduct) return

const designArea = selectedProduct.designArea
    const newElement: DesignElement = {
      id: Date.now().toString(),
      type: "image",
      content: imageUrl,
      x: designArea.x + 40,
      y: designArea.y + 40,
      width: 100,
      height: 100,
      rotation: 0,
      opacity: 1,
      locked: false,
      visible: true,
      zIndex: elements.length + 1,
    }

setElements((prev) => [...prev, newElement])
    saveToHistory()
  }

const deleteElement = (id: string) => {
    setElements((prev) => prev.filter((el) => el.id !== id))
    if (selectedElement === id) {
      setSelectedElement(null)
    }
    saveToHistory()
  }

const duplicateElement = (id: string) => {
    const element = elements.find((el) => el.id === id)
    if (!element) return

const newElement: DesignElement = {
      ...element,
      id: Date.now().toString(),
      x: element.x + 20,
      y: element.y + 20,
      zIndex: elements.length + 1,
    }

setElements((prev) => [...prev, newElement])
    saveToHistory()
  }

const toggleElementLock = (id: string) => {
    setElements((prev) => prev.map((el) => (el.id === id ? { ...el, locked: !el.locked } : el)))
    saveToHistory()
  }

const toggleElementVisibility = (id: string) => {
    setElements((prev) => prev.map((el) => (el.id === id ? { ...el, visible: !el.visible } : el)))
    saveToHistory()
  }

const moveElementLayer = (id: string, direction: "up" | "down") => {
    setElements((prev) => {
      const element = prev.find((el) => el.id === id)
      if (!element) return prev

const newZIndex = direction === "up" ? element.zIndex + 1 : element.zIndex - 1
      const clampedZIndex = Math.max(1, Math.min(prev.length, newZIndex))

return prev.map((el) => {
        if (el.id === id) {
          return { ...el, zIndex: clampedZIndex }
        }
        if (direction === "up" && el.zIndex === clampedZIndex && el.id !== id) {
          return { ...el, zIndex: el.zIndex - 1 }
        }
        if (direction === "down" && el.zIndex === clampedZIndex && el.id !== id) {
          return { ...el, zIndex: el.zIndex + 1 }
        }
        return el
      })
    })
    saveToHistory()
  }

const undo = () => {
    if (historyIndex > 0) {
      setHistoryIndex(historyIndex - 1)
      setDesignViews(JSON.parse(JSON.stringify(history[historyIndex - 1])))
    }
  }

const redo = () => {
    if (historyIndex < history.length - 1) {
      setHistoryIndex(historyIndex + 1)
      setDesignViews(JSON.parse(JSON.stringify(history[historyIndex + 1])))
    }
  }

const saveDesign = async () => {
    if (!designName.trim()) {
      alert("Please enter a design name")
      return
    }

const designData = {
      name: designName,
      description: designDescription,
      tags: designTags.split(",").map((tag) => tag.trim()),
      product: selectedProduct,
      color: selectedColor,
      size: selectedSize,
      designViews,
      isPublic,
      allowEdit,
    }

console.log("Saving design:", designData)
    alert("Design saved successfully!")
  }

const lockDesign = () => {
    setPreviewMode(true)
  }
  const unlockDesign = () => {
    setPreviewMode(false)
  }

const previewDesign = () => {
    setPreviewMode(!previewMode)
  }

const downloadBothSides = async () => {
    await downloadDesign("front")
    setTimeout(() => downloadDesign("back"), 100)
  }

const addToCart = () => {
    if (!selectedProduct) return

addItem({
      productId: selectedProduct.id,
      name: `Custom ${selectedProduct.name}`,
      price: 29.99,
      quantity: 1,
      size: selectedSize,
      color: selectedColor,
      image: selectedProduct.image,
      isCustomDesign: true,
    })

alert("Design added to cart!")
  }

// Enhanced mouse event handlers with resize and rotate
  const getResizeHandle = (e: React.MouseEvent, element: DesignElement) => {
    if (!canvasRef.current) return null

const rect = canvasRef.current.getBoundingClientRect()
    const mouseX = e.clientX - rect.left
    const mouseY = e.clientY - rect.top

const elementX = element.x * (zoomLevel / 100)
    const elementY = element.y * (zoomLevel / 100)
    const elementWidth = element.width * (zoomLevel / 100)
    const elementHeight = element.height * (zoomLevel / 100)

const handleSize = 10 // Increased for better interaction
    const tolerance = 5 // Added tolerance for easier clicking

const handles = [
      { name: "nw", x: elementX - handleSize / 2, y: elementY - handleSize / 2 },
      { name: "n", x: elementX + elementWidth / 2 - handleSize / 2, y: elementY - handleSize / 2 },
      { name: "ne", x: elementX + elementWidth - handleSize / 2, y: elementY - handleSize / 2 },
      { name: "e", x: elementX + elementWidth - handleSize / 2, y: elementY + elementHeight / 2 - handleSize / 2 },
      { name: "se", x: elementX + elementWidth - handleSize / 2, y: elementY + elementHeight - handleSize / 2 },
      { name: "s", x: elementX + elementWidth / 2 - handleSize / 2, y: elementY + elementHeight - handleSize / 2 },
      { name: "sw", x: elementX - handleSize / 2, y: elementY + elementHeight - handleSize / 2 },
      { name: "w", x: elementX - handleSize / 2, y: elementY + elementHeight / 2 - handleSize / 2 },
    ]

for (const handle of handles) {
      if (
        mouseX >= handle.x - tolerance &&
        mouseX <= handle.x + handleSize + tolerance &&
        mouseY >= handle.y - tolerance &&
        mouseY <= handle.y + handleSize + tolerance
      ) {
        return handle.name
      }
    }

// Check rotate handle with better positioning
    const rotateHandleX = elementX + elementWidth / 2 - handleSize / 2
    const rotateHandleY = elementY - 25 - handleSize / 2
    if (
      mouseX >= rotateHandleX - tolerance &&
      mouseX <= rotateHandleX + handleSize + tolerance &&
      mouseY >= rotateHandleY - tolerance &&
      mouseY <= rotateHandleY + handleSize + tolerance
    ) {
      return "rotate"
    }

return null
  }

const handleMouseDown = (e: React.MouseEvent, elementId: string) => {
    if (!canvasRef.current) return

const element = elements.find((el) => el.id === elementId)
    if (!element || element.locked) return

const handle = getResizeHandle(e, element)
    const rect = canvasRef.current.getBoundingClientRect()
    const mouseX = e.clientX - rect.left
    const mouseY = e.clientY - rect.top

setInitialMousePos({ x: mouseX, y: mouseY })
    setInitialElementState({ ...element })

if (handle === "rotate") {
      setRotateHandle(elementId)
      setIsRotating(true)
      setSelectedElement(elementId)
      return
    }

if (handle) {
      setResizeHandle(handle)
      setIsResizing(true)
      setSelectedElement(elementId)
      return
    }

// Regular drag
    const offsetX = mouseX - element.x * (zoomLevel / 100)
    const offsetY = mouseY - element.y * (zoomLevel / 100)

setDraggedElement(elementId)
    setDragOffset({ x: offsetX, y: offsetY })
    setSelectedElement(elementId)
  }

const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      if (!canvasRef.current || !selectedProduct) return

const rect = canvasRef.current.getBoundingClientRect()
      const mouseX = (e.clientX - rect.left) / (zoomLevel / 100)
      const mouseY = (e.clientY - rect.top) / (zoomLevel / 100)

if (draggedElement) {
        const newX = mouseX - dragOffset.x / (zoomLevel / 100)
        const newY = mouseY - dragOffset.y / (zoomLevel / 100)

const designArea = selectedProduct.designArea
        const element = elements.find((el) => el.id === draggedElement)
        if (!element) return

// Smooth positioning with grid snapping
        let constrainedX = newX
        let constrainedY = newY

if (snapToGrid) {
          const gridSize = 10
          constrainedX = Math.round(constrainedX / gridSize) * gridSize
          constrainedY = Math.round(constrainedY / gridSize) * gridSize
        }

// Keep within design area
        constrainedX = Math.max(designArea.x, Math.min(constrainedX, designArea.x + designArea.width - element.width))
        constrainedY = Math.max(designArea.y, Math.min(constrainedY, designArea.y + designArea.height - element.height))

setElements((prev) =>
          prev.map((el) => (el.id === draggedElement ? { ...el, x: constrainedX, y: constrainedY } : el)),
        )
      } else if (resizeHandle && selectedElement && isResizing) {
        const element = elements.find((el) => el.id === selectedElement)
        if (!element || !initialElementState) return

let newWidth = element.width
        let newHeight = element.height
        let newX = element.x
        let newY = element.y

const aspectRatio = initialElementState.width / initialElementState.height
        const maintainAspectRatio = e.shiftKey
        const minSize = 10

// Calculate mouse delta from initial position
        const deltaX = (mouseX - initialMousePos.x) / (zoomLevel / 100)
        const deltaY = (mouseY - initialMousePos.y) / (zoomLevel / 100)

switch (resizeHandle) {
          case "se":
            newWidth = Math.max(minSize, initialElementState.width + deltaX)
            newHeight = maintainAspectRatio ? newWidth / aspectRatio : Math.max(minSize, initialElementState.height + deltaY)
            break
          case "sw":
            newWidth = Math.max(minSize, initialElementState.width - deltaX)
            newHeight = maintainAspectRatio ? newWidth / aspectRatio : Math.max(minSize, initialElementState.height + deltaY)
            newX = initialElementState.x + (initialElementState.width - newWidth)
            break
          case "ne":
            newWidth = Math.max(minSize, initialElementState.width + deltaX)
            newHeight = maintainAspectRatio ? newWidth / aspectRatio : Math.max(minSize, initialElementState.height - deltaY)
            newY = initialElementState.y + (initialElementState.height - newHeight)
            break
          case "nw":
            newWidth = Math.max(minSize, initialElementState.width - deltaX)
            newHeight = maintainAspectRatio ? newWidth / aspectRatio : Math.max(minSize, initialElementState.height - deltaY)
            newX = initialElementState.x + (initialElementState.width - newWidth)
            newY = initialElementState.y + (initialElementState.height - newHeight)
            break
          case "n":
            newHeight = Math.max(minSize, initialElementState.height - deltaY)
            newY = initialElementState.y + (initialElementState.height - newHeight)
            if (maintainAspectRatio) {
              newWidth = newHeight * aspectRatio
              newX = initialElementState.x + (initialElementState.width - newWidth) / 2
            }
            break
          case "s":
            newHeight = Math.max(minSize, initialElementState.height + deltaY)
            if (maintainAspectRatio) {
              newWidth = newHeight * aspectRatio
              newX = initialElementState.x + (initialElementState.width - newWidth) / 2
            }
            break
          case "e":
            newWidth = Math.max(minSize, initialElementState.width + deltaX)
            if (maintainAspectRatio) {
              newHeight = newWidth / aspectRatio
              newY = initialElementState.y + (initialElementState.height - newHeight) / 2
            }
            break
          case "w":
            newWidth = Math.max(minSize, initialElementState.width - deltaX)
            newX = initialElementState.x + (initialElementState.width - newWidth)
            if (maintainAspectRatio) {
              newHeight = newWidth / aspectRatio
              newY = initialElementState.y + (initialElementState.height - newHeight) / 2
            }
            break
        }

setElements((prev) =>
          prev.map((el) =>
            el.id === selectedElement
              ? { ...el, width: newWidth, height: newHeight, x: newX, y: newY }
              : el,
          ),
        )
      } else if (rotateHandle && selectedElement && isRotating) {
        const element = elements.find((el) => el.id === selectedElement)
        if (!element) return

// Calculate rotation based on mouse position relative to element center
        const elementCenterX = (element.x + element.width / 2) * (zoomLevel / 100)
        const elementCenterY = (element.y + element.height / 2) * (zoomLevel / 100)
        
        const angle = Math.atan2(mouseY - elementCenterY, mouseX - elementCenterX) * (180 / Math.PI)
        let newRotation = angle + 90 // Adjust for handle position
        
        // Snap to 15-degree increments when shift is held
        if (e.shiftKey) {
          newRotation = Math.round(newRotation / 15) * 15
        }
        
        // Normalize angle to 0-360 range
        newRotation = ((newRotation % 360) + 360) % 360

setElements((prev) =>
          prev.map((el) => (el.id === selectedElement ? { ...el, rotation: newRotation } : el)),
        )
      }
    },
    [
      draggedElement,
      resizeHandle,
      rotateHandle,
      selectedElement,
      dragOffset,
      zoomLevel,
      selectedProduct,
      elements,
      snapToGrid,
      isResizing,
      isRotating,
      initialMousePos,
      initialElementState,
    ],
  )

const handleMouseUp = useCallback(() => {
    if (draggedElement || resizeHandle || rotateHandle) {
      setDraggedElement(null)
      setResizeHandle(null)
      setRotateHandle(null)
      setIsResizing(false)
      setIsRotating(false)
      setInitialMousePos({ x: 0, y: 0 })
      setInitialElementState(null)
      saveToHistory()
    }
  }, [draggedElement, resizeHandle, rotateHandle, saveToHistory])

useEffect(() => {
    if (draggedElement || resizeHandle || rotateHandle) {
      document.addEventListener("mousemove", handleMouseMove)
      document.addEventListener("mouseup", handleMouseUp)

return () => {
        document.removeEventListener("mousemove", handleMouseMove)
        document.removeEventListener("mouseup", handleMouseUp)
      }
    }
  }, [draggedElement, resizeHandle, rotateHandle, handleMouseMove, handleMouseUp])

// Render resize and rotation handles for selected element
  const renderResizeHandles = (element: DesignElement) => {
    if (selectedElement !== element.id || previewMode) return null

const handleSize = 12
    const elementX = element.x * (zoomLevel / 100)
    const elementY = element.y * (zoomLevel / 100)
    const elementWidth = element.width * (zoomLevel / 100)
    const elementHeight = element.height * (zoomLevel / 100)

const handles = [
      { name: "nw", x: elementX - handleSize / 2, y: elementY - handleSize / 2, cursor: "nw-resize" },
      { name: "n", x: elementX + elementWidth / 2 - handleSize / 2, y: elementY - handleSize / 2, cursor: "n-resize" },
      { name: "ne", x: elementX + elementWidth - handleSize / 2, y: elementY - handleSize / 2, cursor: "ne-resize" },
      { name: "e", x: elementX + elementWidth - handleSize / 2, y: elementY + elementHeight / 2 - handleSize / 2, cursor: "e-resize" },
      { name: "se", x: elementX + elementWidth - handleSize / 2, y: elementY + elementHeight - handleSize / 2, cursor: "se-resize" },
      { name: "s", x: elementX + elementWidth / 2 - handleSize / 2, y: elementY + elementHeight - handleSize / 2, cursor: "s-resize" },
      { name: "sw", x: elementX - handleSize / 2, y: elementY + elementHeight - handleSize / 2, cursor: "sw-resize" },
      { name: "w", x: elementX - handleSize / 2, y: elementY + elementHeight / 2 - handleSize / 2, cursor: "w-resize" },
    ]

const rotateHandleX = elementX + elementWidth / 2 - handleSize / 2
    const rotateHandleY = elementY - 30 - handleSize / 2

return (
      <>
        {/* Resize handles */}
        {handles.map((handle) => (
          <div
            key={handle.name}
            className="absolute bg-white border-2 border-indigo-600 rounded-sm hover:bg-indigo-100 transition-colors"
            style={{
              left: handle.x,
              top: handle.y,
              width: handleSize,
              height: handleSize,
              cursor: handle.cursor,
              zIndex: 1000,
            }}
            onMouseDown={(e) => {
              e.stopPropagation()
              setResizeHandle(handle.name)
              setIsResizing(true)
              setSelectedElement(element.id)
              const rect = canvasRef.current?.getBoundingClientRect()
              if (rect) {
                setInitialMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top })
                setInitialElementState({ ...element })
              }
            }}
          />
        ))}
        
        {/* Rotation handle */}
        <div
          className="absolute bg-white border-2 border-green-600 rounded-full hover:bg-green-100 transition-colors flex items-center justify-center"
          style={{
            left: rotateHandleX,
            top: rotateHandleY,
            width: handleSize,
            height: handleSize,
            cursor: "grab",
            zIndex: 1000,
          }}
          onMouseDown={(e) => {
            e.stopPropagation()
            setRotateHandle(element.id)
            setIsRotating(true)
            setSelectedElement(element.id)
            const rect = canvasRef.current?.getBoundingClientRect()
            if (rect) {
              setInitialMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top })
              setInitialElementState({ ...element })
            }
          }}
        >
          <div className="w-2 h-2 bg-green-600 rounded-full" />
        </div>
        
        {/* Connection line from element to rotation handle */}
        <div
          className="absolute border-l border-green-400 border-dashed"
          style={{
            left: elementX + elementWidth / 2,
            top: elementY - 30,
            width: 0,
            height: 30,
            zIndex: 999,
          }}
        />
      </>
    )
  }

const isElementInDesignArea = (element: DesignElement) => {
    if (!selectedProduct) return true

const designArea = selectedProduct.designArea
    return (
      element.x >= designArea.x &&
      element.y >= designArea.y &&
      element.x + element.width <= designArea.x + designArea.width &&
      element.y + element.height <= designArea.y + designArea.height
    )
  }

if (!user) {
    return null
  }

// Mobile Layout
  if (isMobile) {
    return (
      <div className="h-screen flex flex-col bg-gray-50">
        {/* Mobile Header */}
        <div className="bg-white border-b px-4 py-3 flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <h1 className="text-lg font-bold">Design Studio</h1>
          </div>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm" onClick={undo} disabled={historyIndex <= 0}>
              <RotateCcw className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="sm" onClick={redo} disabled={historyIndex >= history.length - 1}>
              <RotateCw className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="sm" onClick={previewDesign}>
              {previewMode ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </Button>
            <Dialog open={open}
            onOpenChange={(isOpen) => {
              setOpen(isOpen);
              if (isOpen) {
                lockDesign();    // lock on open
              } else {
                unlockDesign();  // unlock on close
              }
            }}>
              <DialogTrigger asChild>
                <Button variant="outline" size="sm">
                  <Download className="h-4 w-4" />
                </Button>
              </DialogTrigger>
              <DialogContent className="w-[95vw] max-w-md">
                <DialogHeader>
                  <DialogTitle>Download Design</DialogTitle>
                </DialogHeader>
                <div className="space-y-4">
                  <Button onClick={() => downloadDesign()} className="w-full">
                    Download Current Side ({viewSide})
                  </Button>
                  <Button onClick={() => downloadBothSides()} variant="outline" className="w-full bg-transparent">
                    Download Both Sides
                  </Button>
                </div>
              </DialogContent>
            </Dialog>
            <Dialog open={open}
            onOpenChange={(isOpen) => {
              setOpen(isOpen);
              if (isOpen) {
                lockDesign();    // lock on open
              } else {
                unlockDesign();  // unlock on close
              }
            }}>
              <DialogTrigger asChild>
                <Button variant="outline" size="sm">
                  <Save className="h-4 w-4" />
                </Button>
              </DialogTrigger>
              <DialogContent className="w-[95vw] max-w-md">
                <DialogHeader>
                  <DialogTitle>Save Design</DialogTitle>
                </DialogHeader>
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="designName">Design Name</Label>
                    <Input
                      id="designName"
                      value={designName}
                      onChange={(e) => setDesignName(e.target.value)}
                      placeholder="Enter design name"
                    />
                  </div>
                  <div>
                    <Label htmlFor="designDescription">Description</Label>
                    <Input
                      id="designDescription"
                      value={designDescription}
                      onChange={(e) => setDesignDescription(e.target.value)}
                      placeholder="Enter description"
                    />
                  </div>
                  <Button onClick={saveDesign} className="w-full">
                    Save Design
                  </Button>
                </div>
              </DialogContent>
            </Dialog>
            <Button size="sm" onClick={addToCart} className="bg-indigo-600 hover:bg-indigo-700">
              <ShoppingCart className="h-4 w-4" />
            </Button>
          </div>
        </div>

{/* Mobile Canvas Controls */}
        <div className="bg-white border-b px-4 py-2 flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Button
              variant={viewSide === "front" ? "default" : "outline"}
              size="sm"
              onClick={() => setViewSide("front")}
            >
              Front ({designViews.front.length})
            </Button>
            <Button variant={viewSide === "back" ? "default" : "outline"} size="sm" onClick={() => setViewSide("back")}>
              Back ({designViews.back.length})
            </Button>
          </div>

<div className="flex items-center space-x-2">
            <Button variant="outline" size="sm" onClick={() => setZoomLevel(Math.max(50, zoomLevel - 25))}>
              <ZoomOut className="h-4 w-4" />
            </Button>
            <span className="text-sm font-medium w-12 text-center">{zoomLevel}%</span>
            <Button variant="outline" size="sm" onClick={() => setZoomLevel(Math.min(200, zoomLevel + 25))}>
              <ZoomIn className="h-4 w-4" />
            </Button>
            <Button variant={showGrid ? "default" : "outline"} size="sm" onClick={() => setShowGrid(!showGrid)}>
              <Grid3X3 className="h-4 w-4" />
            </Button>
          </div>
        </div>

{/* Mobile Canvas */}
        <div className="flex-1 bg-gray-100 p-4 overflow-auto">
          <div className="max-w-sm mx-auto">
            <div
              ref={canvasRef}
              className="relative bg-white rounded-lg shadow-lg mx-auto overflow-hidden"
              style={{
                width: `${300 * (zoomLevel / 100)}px`,
                height: `${400 * (zoomLevel / 100)}px`,
              }}
            >
              {/* Product Background */}
              {selectedProduct && (
                <div className="absolute inset-0">
                  <Image
                    src={selectedProduct.image || "/placeholder.svg"}
                    alt={selectedProduct.name}
                    fill
                    className="object-cover"
                    style={{ filter: `hue-rotate(${selectedColor === "#FFFFFF" ? "0deg" : "180deg"})` }}
                  />
                  {/* Design Area Overlay - Hidden in preview mode */}
                  {!previewMode && (
                    <div
                      className="absolute border-2 border-dashed border-blue-400 bg-blue-50 bg-opacity-20"
                      style={{
                        left: selectedProduct.designArea.x * (zoomLevel / 100),
                        top: selectedProduct.designArea.y * (zoomLevel / 100),
                        width: selectedProduct.designArea.width * (zoomLevel / 100),
                        height: selectedProduct.designArea.height * (zoomLevel / 100),
                      }}
                    />
                  )}
                </div>
              )}

{/* Grid Overlay */}
              {showGrid && selectedProduct && !previewMode && (
                <div
                  className="absolute opacity-20 pointer-events-none"
                  style={{
                    left: selectedProduct.designArea.x * (zoomLevel / 100),
                    top: selectedProduct.designArea.y * (zoomLevel / 100),
                    width: selectedProduct.designArea.width * (zoomLevel / 100),
                    height: selectedProduct.designArea.height * (zoomLevel / 100),
                    backgroundImage: `
                      linear-gradient(to right, #000 1px, transparent 1px),
                      linear-gradient(to bottom, #000 1px, transparent 1px)
                    `,
                    backgroundSize: "20px 20px",
                  }}
                />
              )}

{/* Design Elements */}
              {elements
                .sort((a, b) => a.zIndex - b.zIndex)
                .map(
                  (element) =>
                    element.visible && (
                      <div key={element.id}>
                        <div
                          className={`absolute ${!previewMode ? "cursor-move" : ""} border-2 ${
                            selectedElement === element.id && !previewMode ? "border-indigo-600" : "border-transparent"
                          } ${element.locked ? "cursor-not-allowed" : ""} ${
                            !isElementInDesignArea(element) && !previewMode
                              ? "border-red-500 bg-red-100 bg-opacity-50"
                              : ""
                          }`}
                          style={{
                            left: element.x * (zoomLevel / 100),
                            top: element.y * (zoomLevel / 100),
                            width: element.width * (zoomLevel / 100),
                            height: element.height * (zoomLevel / 100),
                            transform: `rotate(${element.rotation}deg)`,
                            opacity: element.opacity,
                            zIndex: element.zIndex,
                            clipPath:
                              previewMode && selectedProduct
                                ? `polygon(${Math.max(0, ((selectedProduct.designArea.x - element.x) / element.width) * 100)}% ${Math.max(0, ((selectedProduct.designArea.y - element.y) / element.height) * 100)}%, ${Math.min(100, ((selectedProduct.designArea.x + selectedProduct.designArea.width - element.x) / element.width) * 100)}% ${Math.max(0, ((selectedProduct.designArea.y - element.y) / element.height) * 100)}%, ${Math.min(100, ((selectedProduct.designArea.x + selectedProduct.designArea.width - element.x) / element.width) * 100)}% ${Math.min(100, ((selectedProduct.designArea.y + selectedProduct.designArea.height - element.y) / element.height) * 100)}%, ${Math.max(0, ((selectedProduct.designArea.x - element.x) / element.width) * 100)}% ${Math.min(100, ((selectedProduct.designArea.y + selectedProduct.designArea.height - element.y) / element.height) * 100)}%)`
                                : "none",
                          }}
                          onMouseDown={(e) => !previewMode && handleMouseDown(e, element.id)}
                          onClick={() => !element.locked && !previewMode && setSelectedElement(element.id)}
                        >
                          {element.type === "text" && (
                            <div
                              style={{
                                fontSize: (element.style?.fontSize || 24) * (zoomLevel / 100),
                                fontFamily: element.style?.fontFamily,
                                color: element.style?.color,
                                fontWeight: element.style?.fontWeight,
                                fontStyle: element.style?.fontStyle,
                                textDecoration: element.style?.textDecoration,
                                WebkitTextStroke: element.style?.textStrokeWidth
                                  ? `${element.style.textStrokeWidth}px ${element.style.textStroke}`
                                  : "none",
                                background: element.style?.backgroundGradient || "transparent",
                                width: "100%",
                                height: "100%",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                userSelect: "none",
                                // Text shape effects
                                ...(element.style?.textShape === "arc" && {
                                  transform: "perspective(100px) rotateX(15deg)",
                                  transformOrigin: "center bottom",
                                }),
                                ...(element.style?.textShape === "wave" && {
                                  background: `linear-gradient(45deg, transparent 25%, ${element.style?.color || "#000"} 25%, ${element.style?.color || "#000"} 50%, transparent 50%, transparent 75%, ${element.style?.color || "#000"} 75%)`,
                                  backgroundSize: "8px 8px",
                                  WebkitBackgroundClip: "text",
                                  WebkitTextFillColor: "transparent",
                                  backgroundClip: "text",
                                }),
                              }}
                            >
                              {element.content}
                            </div>
                          )}
                          {element.type === "image" && (
                            <img
                              src={element.content || "/placeholder.svg"}
                              alt="Design element"
                              style={{
                                width: "100%",
                                height: "100%",
                                objectFit: "cover",
                                userSelect: "none",
                              }}
                              draggable={false}
                            />
                          )}
                          {element.type === "shape" && (
                            <div
                              style={{
                                width: "100%",
                                height: "100%",
                                backgroundColor: element.style?.backgroundColor,
                                border: `${(element.style?.borderWidth || 2) * (zoomLevel / 100)}px solid ${element.style?.borderColor}`,
                                borderRadius: element.content === "Circle" ? "50%" : "0",
                              }}
                            />
                          )}
                        </div>
                        {!previewMode && renderResizeHandles(element)}
                      </div>
                    ),
                )}

{/* Canvas Label */}
              <div className="absolute bottom-2 left-2">
                <Badge variant="secondary" className="text-xs">
                  {viewSide === "front" ? "Front" : "Back"} View
                </Badge>
              </div>
            </div>
          </div>
        </div>

{/* Mobile Bottom Navigation */}
        <div className="bg-white border-t">
          <div className="grid grid-cols-3">
            <Sheet open={isToolsOpen} onOpenChange={setIsToolsOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" className="h-16 rounded-none flex flex-col items-center justify-center">
                  <Settings className="h-5 w-5 mb-1" />
                  <span className="text-xs">Tools</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="bottom" className="h-[80vh]">
                <SheetHeader>
                  <SheetTitle>Design Tools</SheetTitle>
                </SheetHeader>
                <div className="mt-6">
                  <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                    <TabsList className="grid w-full grid-cols-4">
                      <TabsTrigger value="products" className="text-xs">
                        Products
                      </TabsTrigger>
                      <TabsTrigger value="tools" className="text-xs">
                        Tools
                      </TabsTrigger>
                      <TabsTrigger value="library" className="text-xs">
                        Library
                      </TabsTrigger>
                      <TabsTrigger value="layers" className="text-xs">
                        Layers
                      </TabsTrigger>
                    </TabsList>

<TabsContent value="products" className="mt-4 space-y-4">
                      <div>
                        <Label className="text-sm font-medium mb-2 block">Select Product</Label>
                        <div className="grid grid-cols-2 gap-2">
                          {products.map((product) => (
                            <Card
                              key={product.id}
                              className={`cursor-pointer transition-colors ${
                                selectedProduct?.id === product.id ? "ring-2 ring-indigo-600" : ""
                              }`}
                              onClick={() => setSelectedProduct(product)}
                            >
                              <CardContent className="p-3">
                                <img
                                  src={product.image || "/placeholder.svg"}
                                  alt={product.name}
                                  className="w-full h-16 object-cover rounded mb-2"
                                />
                                <p className="text-xs font-medium text-center">{product.name}</p>
                              </CardContent>
                            </Card>
                          ))}
                        </div>
                      </div>

{selectedProduct && (
                        <>
                          <div>
                            <Label className="text-sm font-medium mb-2 block">Color</Label>
                            <div className="flex flex-wrap gap-2">
                              {selectedProduct.colors.map((color) => (
                                <button
                                  key={color.name}
                                  onClick={() => setSelectedColor(color.value)}
                                  className={`w-8 h-8 rounded-full border-2 ${
                                    selectedColor === color.value
                                      ? "border-indigo-600 ring-2 ring-indigo-200"
                                      : "border-gray-300"
                                  }`}
                                  style={{ backgroundColor: color.value }}
                                  title={color.name}
                                />
                              ))}
                            </div>
                          </div>

<TabsContent value="tools" className="mt-4 space-y-4">
                      {/* Enhanced Text Tool */}
                      <Card>
                        <CardHeader className="pb-3">
                          <CardTitle className="text-sm flex items-center">
                            <Type className="h-4 w-4 mr-2" />
                            Text Tool
                          </CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-3">
                          <div>
                            <Label className="text-xs">Text</Label>
                            <Input
                              value={textInput}
                              onChange={(e) => setTextInput(e.target.value)}
                              placeholder="Enter text"
                              className="text-sm"
                            />
                          </div>
                          <div className="grid grid-cols-2 gap-2">
                            <div>
                              <Label className="text-xs">Font</Label>
                              <Select value={selectedFont} onValueChange={setSelectedFont}>
                                <SelectTrigger className="text-sm">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  {fonts.map((font) => (
                                    <SelectItem key={font} value={font}>
                                      {font}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </div>
                            <div>
                              <Label className="text-xs">Size</Label>
                              <Input
                                type="number"
                                value={fontSize}
                                onChange={(e) => setFontSize(Number(e.target.value))}
                                className="text-sm"
                              />
                            </div>
                          </div>
                          <div className="flex space-x-1">
                            <Toggle pressed={isBold} onPressedChange={setIsBold} size="sm">
                              <Bold className="h-3 w-3" />
                            </Toggle>
                            <Toggle pressed={isItalic} onPressedChange={setIsItalic} size="sm">
                              <Italic className="h-3 w-3" />
                            </Toggle>
                            <Toggle pressed={isUnderline} onPressedChange={setIsUnderline} size="sm">
                              <Underline className="h-3 w-3" />
                            </Toggle>
                          </div>
                          <div>
                            <Label className="text-xs">Text Color</Label>
                            <Input
                              type="color"
                              value={textColor}
                              onChange={(e) => setTextColor(e.target.value)}
                              className="h-8"
                            />
                          </div>
                          <div className="grid grid-cols-2 gap-2">
                            <div>
                              <Label className="text-xs">Outline Color</Label>
                              <Input
                                type="color"
                                value={textOutlineColor}
                                onChange={(e) => setTextOutlineColor(e.target.value)}
                                className="h-8"
                              />
                            </div>
                            <div>
                              <Label className="text-xs">Outline Width</Label>
                              <Input
                                type="number"
                                min="0"
                                max="10"
                                value={textOutlineWidth}
                                onChange={(e) => setTextOutlineWidth(Number(e.target.value))}
                                className="text-sm"
                              />
                            </div>
                          </div>

{/* Improved Gradient Section */}
                          <div className="border rounded-lg p-3 space-y-2">
                            <Label className="text-xs font-medium">Gradient Background</Label>
                            <div className="grid grid-cols-2 gap-2">
                              <div>
                                <Label className="text-xs text-gray-500">Start Color</Label>
                                <Input
                                  type="color"
                                  value={gradientStartColor}
                                  onChange={(e) => {
                                    setGradientStartColor(e.target.value)
                                    setTextGradient(
                                      `linear-gradient(${gradientDirection}, ${e.target.value}, ${gradientEndColor})`,
                                    )
                                  }}
                                  className="h-8"
                                />
                              </div>
                              <div>
                                <Label className="text-xs text-gray-500">End Color</Label>
                                <Input
                                  type="color"
                                  value={gradientEndColor}
                                  onChange={(e) => {
                                    setGradientEndColor(e.target.value)
                                    setTextGradient(
                                      `linear-gradient(${gradientDirection}, ${gradientStartColor}, ${e.target.value})`,
                                    )
                                  }}
                                  className="h-8"
                                />
                              </div>
                            </div>
                            <div>
                              <Label className="text-xs text-gray-500">Direction</Label>
                              <Select
                                value={gradientDirection}
                                onChange={(value) => {
                                  setGradientDirection(value)
                                  setTextGradient(
                                    `linear-gradient(${value}, ${gradientStartColor}, ${gradientEndColor})`,
                                  )
                                }}
                              >
                                <SelectTrigger className="text-sm">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="0deg">Top to Bottom</SelectItem>
                                  <SelectItem value="90deg">Left to Right</SelectItem>
                                  <SelectItem value="45deg">Diagonal ↗</SelectItem>
                                  <SelectItem value="135deg">Diagonal ↘</SelectItem>
                                  <SelectItem value="180deg">Bottom to Top</SelectItem>
                                  <SelectItem value="270deg">Right to Left</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                            <div className="h-6 rounded border" style={{ background: textGradient || "transparent" }} />
                          </div>

<div>
                            <Label className="text-xs">Text Shape</Label>
                            <Select
                              value={textShape}
                              onValueChange={(value: "normal" | "arc" | "wave") => setTextShape(value)}
                            >
                              <SelectTrigger className="text-sm">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="normal">Normal</SelectItem>
                                <SelectItem value="arc">Arc</SelectItem>
                                <SelectItem value="wave">Wave</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                          <Button onClick={addTextElement} size="sm" className="w-full">
                            Add Text
                          </Button>
                        </CardContent>
                      </Card>

{/* Shapes Tool */}
                      <Card>
                        <CardHeader className="pb-3">
                          <CardTitle className="text-sm flex items-center">
                            <Square className="h-4 w-4 mr-2" />
                            Add Shapes
                          </CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="grid grid-cols-2 gap-2">
                            {shapes.map((shape) => (
                              <Button
                                key={shape.name}
                                variant="outline"
                                size="sm"
                                onClick={() => addShapeElement(shape.name)}
                                className="flex items-center justify-center"
                              >
                                <shape.icon className="h-4 w-4 mr-1" />
                                {shape.name}
                              </Button>
                            ))}
                          </div>
                        </CardContent>
                      </Card>

{/* Image Tool */}
                      <Card>
                        <CardHeader className="pb-3">
                          <CardTitle className="text-sm flex items-center">
                            <ImageIcon className="h-4 w-4 mr-2" />
                            Add Images
                          </CardTitle>
                        </CardHeader>
                        <CardContent>
                          <input
                            ref={fileInputRef}
                            type="file"
                            accept="image/*"
                            onChange={handleImageUpload}
                            className="hidden"
                          />
                          <Button
                            variant="outline"
                            size="sm"
                            className="w-full bg-transparent"
                            onClick={() => fileInputRef.current?.click()}
                          >
                            <Upload className="h-4 w-4 mr-2" />
                            Upload Image
                          </Button>
                        </CardContent>
                      </Card>
                    </TabsContent>

<TabsContent value="library" className="p-4">
                      <div className="space-y-6">
                        {/* Uploaded Images Section */}
                        <div>
                          <Label className="text-sm font-medium mb-3 block flex items-center">
                            <Upload className="h-4 w-4 mr-2" />
                            Your Uploaded Images
                          </Label>
                          {uploadedImages.length > 0 ? (
                            <div className="grid grid-cols-2 gap-2 mb-4">
                              {uploadedImages.map((image) => (
                                <div
                                  key={image.id}
                                  className="cursor-pointer border rounded-lg p-2 hover:border-indigo-600 transition-colors"
                                  onClick={() => addImageToCanvas(image.url)}
                                >
                                  <img
                                    src={image.url || "/placeholder.svg"}
                                    alt={image.name}
                                    className="w-full h-16 object-cover rounded mb-1"
                                  />
                                  <p className="text-xs text-center truncate">{image.name}</p>
                                  <p className="text-xs text-center text-gray-500">
                                    {image.uploadDate.toLocaleDateString()}
                                  </p>
                                </div>
                              ))}
                            </div>
                          ) : (
                            <div className="text-center text-gray-500 py-6 border-2 border-dashed border-gray-200 rounded-lg mb-4">
                              <ImageIcon className="h-8 w-8 mx-auto mb-2 opacity-50" />
                              <p className="text-sm">No uploaded images yet</p>
                              <Button
                                variant="outline"
                                size="sm"
                                className="mt-2 bg-transparent"
                                onClick={() => fileInputRef.current?.click()}
                              >
                                Upload First Image
                              </Button>
                            </div>
                          )}
                        </div>

{/* Suggested Images Section */}
                        <div>
                          <Label className="text-sm font-medium mb-3 block flex items-center">
                            <ImageIcon className="h-4 w-4 mr-2" />
                            Suggested Images
                          </Label>
                          <div className="grid grid-cols-2 gap-2">
                            {[
                              {
                                id: 1,
                                name: "Abstract Pattern",
                                url: "/placeholder.svg?height=100&width=100&text=Abstract",
                              },
                              {
                                id: 2,
                                name: "Geometric Shape",
                                url: "/placeholder.svg?height=100&width=100&text=Geometric",
                              },
                              {
                                id: 3,
                                name: "Nature Element",
                                url: "/placeholder.svg?height=100&width=100&text=Nature",
                              },
                              { id: 4, name: "Tech Icon", url: "/placeholder.svg?height=100&width=100&text=Tech" },
                              {
                                id: 5,
                                name: "Vintage Badge",
                                url: "/placeholder.svg?height=100&width=100&text=Vintage",
                              },
                              { id: 6, name: "Modern Logo", url: "/placeholder.svg?height=100&width=100&text=Modern" },
                            ].map((suggestion) => (
                              <div
                                key={suggestion.id}
                                className="cursor-pointer border rounded-lg p-2 hover:border-indigo-600 transition-colors"
                                onClick={() => addImageToCanvas(suggestion.url)}
                              >
                                <img
                                  src={suggestion.url || "/placeholder.svg"}
                                  alt={suggestion.name}
                                  className="w-full h-16 object-cover rounded mb-1"
                                />
                                <p className="text-xs text-center truncate">{suggestion.name}</p>
                              </div>
                            ))}
                          </div>
                        </div>
                      </div>
                    </TabsContent>

<TabsContent value="layers" className="mt-4">
                      <div className="space-y-2">
                        {elements
                          .sort((a, b) => b.zIndex - a.zIndex)
                          .map((element) => (
                            <div
                              key={element.id}
                              className={`flex items-center justify-between p-2 rounded border ${
                                selectedElement === element.id ? "border-indigo-600 bg-indigo-50" : "border-gray-200"
                              }`}
                              onClick={() => setSelectedElement(element.id)}
                            >
                              <div className="flex items-center space-x-2">
                                <button onClick={() => toggleElementVisibility(element.id)}>
                                  <Eye className={`h-4 w-4 ${element.visible ? "text-gray-600" : "text-gray-300"}`} />
                                </button>
                                <span className="text-sm truncate">
                                  {element.type === "text" ? element.content : element.type}
                                </span>
                                {!isElementInDesignArea(element) && (
                                  <Badge variant="destructive" className="text-xs">
                                    Outside
                                  </Badge>
                                )}
                              </div>
                              <div className="flex items-center space-x-1">
                                <button onClick={() => moveElementLayer(element.id, "up")}>
                                  <ChevronUp className="h-3 w-3 text-gray-400 hover:text-gray-600" />
                                </button>
                                <button onClick={() => moveElementLayer(element.id, "down")}>
                                  <ChevronDown className="h-3 w-3 text-gray-400 hover:text-gray-600" />
                                </button>
                                <button onClick={() => toggleElementLock(element.id)}>
                                  {element.locked ? (
                                    <Lock className="h-3 w-3 text-gray-600" />
                                  ) : (
                                    <Unlock className="h-3 w-3 text-gray-400" />
                                  )}
                                </button>
                                <button onClick={() => duplicateElement(element.id)}>
                                  <Copy className="h-3 w-3 text-gray-400 hover:text-gray-600" />
                                </button>
                                <button onClick={() => deleteElement(element.id)}>
                                  <Trash2 className="h-3 w-3 text-red-400 hover:text-red-600" />
                                </button>
                              </div>
                            </div>
                          ))}
                        {elements.length === 0 && (
                          <div className="text-center text-gray-500 py-8">
                            <Layers className="h-12 w-12 mx-auto mb-2 opacity-50" />
                            <p className="text-sm">No elements yet</p>
                          </div>
                        )}
                      </div>
                    </TabsContent>
                  </Tabs>
                </div>
              </SheetContent>
            </Sheet>

<Button
              variant="ghost"
              className="h-16 rounded-none flex flex-col items-center justify-center"
              onClick={() => setSelectedElement(null)}
            >
              <MousePointer className="h-5 w-5 mb-1" />
              <span className="text-xs">Canvas</span>
            </Button>

<Sheet open={isPropertiesOpen} onOpenChange={setIsPropertiesOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" className="h-16 rounded-none flex flex-col items-center justify-center">
                  <Settings className="h-5 w-5 mb-1" />
                  <span className="text-xs">Properties</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="bottom" className="h-[80vh]">
                <SheetHeader>
                  <SheetTitle>Element Properties</SheetTitle>
                </SheetHeader>
                <div className="mt-6">
                  {selectedElement ? (
                    <div className="space-y-4">
                      {(() => {
                        const element = elements.find((el) => el.id === selectedElement)
                        if (!element) return null

return (
                          <>
                            <div>
                              <Label className="text-sm">Position</Label>
                              <div className="grid grid-cols-2 gap-2 mt-1">
                                <div>
                                  <Label className="text-xs text-gray-500">X</Label>
                                  <Input
                                    type="number"
                                    value={Math.round(element.x)}
                                    onChange={(e) => {
                                      const newX = Number(e.target.value)
                                      if (selectedProduct) {
                                        const designArea = selectedProduct.designArea
                                        const constrainedX = Math.max(
                                          designArea.x,
                                          Math.min(newX, designArea.x + designArea.width - element.width),
                                        )
                                        setElements((prev) =>
                                          prev.map((el) =>
                                            el.id === selectedElement ? { ...el, x: constrainedX } : el,
                                          ),
                                        )
                                      }
                                    }}
                                    className="text-sm"
                                  />
                                </div>
                                <div>
                                  <Label className="text-xs text-gray-500">Y</Label>
                                  <Input
                                    type="number"
                                    value={Math.round(element.y)}
                                    onChange={(e) => {
                                      const newY = Number(e.target.value)
                                      if (selectedProduct) {
                                        const designArea = selectedProduct.designArea
                                        const constrainedY = Math.max(
                                          designArea.y,
                                          Math.min(newY, designArea.y + designArea.height - element.height),
                                        )
                                        setElements((prev) =>
                                          prev.map((el) =>
                                            el.id === selectedElement ? { ...el, y: constrainedY } : el,
                                          ),
                                        )
                                      }
                                    }}
                                    className="text-sm"
                                  />
                                </div>
                              </div>
                            </div>

<div>
                              <Label className="text-sm">Size</Label>
                              <div className="grid grid-cols-2 gap-2 mt-1">
                                <div>
                                  <Label className="text-xs text-gray-500">Width</Label>
                                  <Input
                                    type="number"
                                    value={Math.round(element.width)}
                                    onChange={(e) => {
                                      const newWidth = Math.max(10, Number(e.target.value))
                                      setElements((prev) =>
                                        prev.map((el) => (el.id === selectedElement ? { ...el, width: newWidth } : el)),
                                      )
                                    }}
                                    className="text-sm"
                                  />
                                </div>
                                <div>
                                  <Label className="text-xs text-gray-500">Height</Label>
                                  <Input
                                    type="number"
                                    value={Math.round(element.height)}
                                    onChange={(e) => {
                                      const newHeight = Math.max(10, Number(e.target.value))
                                      setElements((prev) =>
                                        prev.map((el) =>
                                          el.id === selectedElement ? { ...el, height: newHeight } : el,
                                        ),
                                      )
                                    }}
                                    className="text-sm"
                                  />
                                </div>
                              </div>
                            </div>

<div>
                              <Label className="text-sm">Rotation</Label>
                              <div className="flex items-center space-x-2 mt-1">
                                <Slider
                                  value={[element.rotation]}
                                  onValueChange={(value) => {
                                    setElements((prev) =>
                                      prev.map((el) =>
                                        el.id === selectedElement ? { ...el, rotation: value[0] } : el,
                                      ),
                                    )
                                  }}
                                  max={360}
                                  min={0}
                                  step={1}
                                  className="flex-1"
                                />
                                <span className="text-sm w-12">{element.rotation}°</span>
                              </div>
                            </div>

<div>
                              <Label className="text-sm">Opacity</Label>
                              <div className="flex items-center space-x-2 mt-1">
                                <Slider
                                  value={[element.opacity * 100]}
                                  onValueChange={(value) => {
                                    setElements((prev) =>
                                      prev.map((el) =>
                                        el.id === selectedElement ? { ...el, opacity: value[0] / 100 } : el,
                                      ),
                                    )
                                  }}
                                  max={100}
                                  min={0}
                                  step={1}
                                  className="flex-1"
                                />
                                <span className="text-sm w-12">{Math.round(element.opacity * 100)}%</span>
                              </div>
                            </div>

{element.type === "shape" && (
                              <>
                                <Separator />
                                <div>
                                  <Label className="text-sm">Fill Color</Label>
                                  <Input
                                    type="color"
                                    value={element.style?.backgroundColor || "#3b82f6"}
                                    onChange={(e) => {
                                      setElements((prev) =>
                                        prev.map((el) =>
                                          el.id === selectedElement
                                            ? {
                                                ...el,
                                                style: { ...el.style, backgroundColor: e.target.value },
                                              }
                                            : el,
                                        ),
                                      )
                                    }}
                                    className="h-8 mt-1"
                                  />
                                </div>
                                <div>
                                  <Label className="text-sm">Border Color</Label>
                                  <Input
                                    type="color"
                                    value={element.style?.borderColor || "#1e40af"}
                                    onChange={(e) => {
                                      setElements((prev) =>
                                        prev.map((el) =>
                                          el.id === selectedElement
                                            ? {
                                                ...el,
                                                style: { ...el.style, borderColor: e.target.value },
                                              }
                                            : el,
                                        ),
                                      )
                                    }}
                                    className="h-8 mt-1"
                                  />
                                </div>
                                <div>
                                  <Label className="text-sm">Border Width</Label>
                                  <Input
                                    type="number"
                                    value={element.style?.borderWidth || 2}
                                    onChange={(e) => {
                                      setElements((prev) =>
                                        prev.map((el) =>
                                          el.id === selectedElement
                                            ? {
                                                ...el,
                                                style: { ...el.style, borderWidth: Number(e.target.value) },
                                              }
                                            : el,
                                        ),
                                      )
                                    }}
                                    className="text-sm mt-1"
                                  />
                                </div>
                              </>
                            )}

<Separator />
                            <div className="flex space-x-2">
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => duplicateElement(element.id)}
                                className="flex-1"
                              >
                                <Copy className="h-4 w-4 mr-1" />
                                Duplicate
                              </Button>
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => deleteElement(element.id)}
                                className="flex-1 text-red-600 hover:text-red-700"
                              >
                                <Trash2 className="h-4 w-4 mr-1" />
                                Delete
                              </Button>
                            </div>
                          </>
                        )
                      })()}
                    </div>
                  ) : (
                    <div className="text-center text-gray-500 py-8">
                      <Palette className="h-12 w-12 mx-auto mb-2 opacity-50" />
                      <p className="text-sm">Select an element to edit properties</p>
                    </div>
                  )}
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    )
  }

// Desktop Layout continues with the same enhanced functionality...
  return (
    <div className="h-screen flex flex-col bg-gray-50">
      {/* Desktop Header */}
      <div className="bg-white border-b px-4 py-3 flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <h1 className="text-xl font-bold">Design Studio</h1>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm" onClick={undo} disabled={historyIndex <= 0}>
              <RotateCcw className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="sm" onClick={redo} disabled={historyIndex >= history.length - 1}>
              <RotateCw className="h-4 w-4" />
            </Button>
          </div>
        </div>

<div className="flex items-center space-x-2">
          <Button variant="outline" size="sm" onClick={previewDesign}>
            {previewMode ? <EyeOff className="h-4 w-4 mr-1" /> : <Eye className="h-4 w-4 mr-1" />}
            {previewMode ? "Exit Preview" : "Preview"}
          </Button>
          <Dialog open={open}
            onOpenChange={(isOpen) => {
              setOpen(isOpen);
              if (isOpen) {
                lockDesign();    // lock on open
              } else {
                unlockDesign();  // unlock on close
              }
            }}>
            <DialogTrigger asChild>
              <Button variant="outline" size="sm">
                <Download className="h-4 w-4 mr-1" />
                Download
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Download Design</DialogTitle>
              </DialogHeader>
              <div className="space-y-4">
                <Button onClick={() => downloadDesign()} className="w-full">
                  Download Current Side ({viewSide})
                </Button>
                <Button onClick={downloadBothSides} variant="outline" className="w-full bg-transparent">
                  Download Both Sides
                </Button>
              </div>
            </DialogContent>
          </Dialog>
          <Dialog open={open}
            onOpenChange={(isOpen) => {
              setOpen(isOpen);
              if (isOpen) {
                lockDesign();    // lock on open
              } else {
                unlockDesign();  // unlock on close
              }
            }}>
            <DialogTrigger asChild>
              <Button variant="outline" size="sm">
                <Save className="h-4 w-4 mr-1" />
                Save
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Save Design</DialogTitle>
              </DialogHeader>
              <div className="space-y-4">
                <div>
                  <Label htmlFor="designName">Design Name</Label>
                  <Input
                    id="designName"
                    value={designName}
                    onChange={(e) => setDesignName(e.target.value)}
                    placeholder="Enter design name"
                  />
                </div>
                <div>
                  <Label htmlFor="designDescription">Description</Label>
                  <Input
                    id="designDescription"
                    value={designDescription}
                    onChange={(e) => setDesignDescription(e.target.value)}
                    placeholder="Enter description"
                  />
                </div>
                <div>
                  <Label htmlFor="designTags">Tags (comma separated)</Label>
                  <Input
                    id="designTags"
                    value={designTags}
                    onChange={(e) => setDesignTags(e.target.value)}
                    placeholder="e.g. vintage, modern, cool"
                  />
                </div>
                <div className="flex items-center space-x-4">
                  <label className="flex items-center space-x-2">
                    <input type="checkbox" checked={isPublic} onChange={(e) => setIsPublic(e.target.checked)} />
                    <span className="text-sm">Make public</span>
                  </label>
                  <label className="flex items-center space-x-2">
                    <input type="checkbox" checked={allowEdit} onChange={(e) => setAllowEdit(e.target.checked)} />
                    <span className="text-sm">Allow others to edit</span>
                  </label>
                </div>
                <Button onClick={saveDesign} className="w-full">
                  Save Design
                </Button>
              </div>
            </DialogContent>
          </Dialog>
          <Button size="sm" onClick={addToCart}>
            <ShoppingCart className="h-4 w-4 mr-1" />
            Add to Cart
          </Button>
        </div>
      </div>

<div className="flex-1 flex">
        {/* Left Sidebar */}
        <div className="w-80 bg-white border-r overflow-y-auto">
          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="products" className="text-xs">
                Products
              </TabsTrigger>
              <TabsTrigger value="tools" className="text-xs">
                Tools
              </TabsTrigger>
              <TabsTrigger value="library" className="text-xs">
                Library
              </TabsTrigger>
              <TabsTrigger value="layers" className="text-xs">
                Layers
              </TabsTrigger>
            </TabsList>

<TabsContent value="products" className="p-4 space-y-4">
              <div>
                <Label className="text-sm font-medium mb-2 block">Select Product</Label>
                <div className="grid grid-cols-2 gap-2">
                  {products.map((product) => (
                    <Card
                      key={product.id}
                      className={`cursor-pointer transition-colors ${
                        selectedProduct?.id === product.id ? "ring-2 ring-indigo-600" : ""
                      }`}
                      onClick={() => setSelectedProduct(product)}
                    >
                      <CardContent className="p-3">
                        <img
                          src={product.image || "/placeholder.svg"}
                          alt={product.name}
                          className="w-full h-20 object-cover rounded mb-2"
                        />
                        <p className="text-sm font-medium text-center">{product.name}</p>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>

{selectedProduct && (
                <>
                  <div>
                    <Label className="text-sm font-medium mb-2 block">Color</Label>
                    <div className="flex flex-wrap gap-2">
                      {selectedProduct.colors.map((color) => (
                        <button
                          key={color.name}
                          onClick={() => setSelectedColor(color.value)}
                          className={`w-8 h-8 rounded-full border-2 ${
                            selectedColor === color.value
                              ? "border-indigo-600 ring-2 ring-indigo-200"
                              : "border-gray-300"
                          }`}
                          style={{ backgroundColor: color.value }}
                          title={color.name}
                        />
                      ))}
                    </div>
                  </div>

<TabsContent value="tools" className="p-4 space-y-4">
              {/* Enhanced Text Tool */}
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-sm flex items-center">
                    <Type className="h-4 w-4 mr-2" />
                    Text Tool
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div>
                    <Label className="text-xs">Text</Label>
                    <Input
                      value={textInput}
                      onChange={(e) => setTextInput(e.target.value)}
                      placeholder="Enter text"
                      className="text-sm"
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label className="text-xs">Font</Label>
                      <Select value={selectedFont} onValueChange={setSelectedFont}>
                        <SelectTrigger className="text-sm">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {fonts.map((font) => (
                            <SelectItem key={font} value={font}>
                              {font}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label className="text-xs">Size</Label>
                      <Input
                        type="number"
                        value={fontSize}
                        onChange={(e) => setFontSize(Number(e.target.value))}
                        className="text-sm"
                      />
                    </div>
                  </div>
                  <div className="flex space-x-1">
                    <Toggle pressed={isBold} onPressedChange={setIsBold} size="sm">
                      <Bold className="h-3 w-3" />
                    </Toggle>
                    <Toggle pressed={isItalic} onPressedChange={setIsItalic} size="sm">
                      <Italic className="h-3 w-3" />
                    </Toggle>
                    <Toggle pressed={isUnderline} onPressedChange={setIsUnderline} size="sm">
                      <Underline className="h-3 w-3" />
                    </Toggle>
                  </div>
                  <div>
                    <Label className="text-xs">Text Color</Label>
                    <Input
                      type="color"
                      value={textColor}
                      onChange={(e) => setTextColor(e.target.value)}
                      className="h-8"
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label className="text-xs">Outline Color</Label>
                      <Input
                        type="color"
                        value={textOutlineColor}
                        onChange={(e) => setTextOutlineColor(e.target.value)}
                        className="h-8"
                      />
                    </div>
                    <div>
                      <Label className="text-xs">Outline Width</Label>
                      <Input
                        type="number"
                        min="0"
                        max="10"
                        value={textOutlineWidth}
                        onChange={(e) => setTextOutlineWidth(Number(e.target.value))}
                        className="text-sm"
                      />
                    </div>
                  </div>
                  <div>
                    <Label className="text-xs">Gradient (CSS)</Label>
                    <Input
                      value={textGradient}
                      onChange={(e) => setTextGradient(e.target.value)}
                      placeholder="linear-gradient(45deg, #ff0000, #0000ff)"
                      className="text-sm"
                    />
                  </div>
                  <div>
                    <Label className="text-xs">Text Shape</Label>
                    <Select value={textShape} onValueChange={(value: "normal" | "arc" | "wave") => setTextShape(value)}>
                      <SelectTrigger className="text-sm">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="normal">Normal</SelectItem>
                        <SelectItem value="arc">Arc</SelectItem>
                        <SelectItem value="wave">Wave</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <Button onClick={addTextElement} size="sm" className="w-full">
                    Add Text
                  </Button>
                </CardContent>
              </Card>

{/* Shapes Tool */}
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-sm flex items-center">
                    <Square className="h-4 w-4 mr-2" />
                    Shapes
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 gap-2">
                    {shapes.map((shape) => (
                      <Button
                        key={shape.name}
                        variant="outline"
                        size="sm"
                        onClick={() => addShapeElement(shape.name)}
                        className="flex items-center justify-center"
                      >
                        <shape.icon className="h-4 w-4" />
                      </Button>
                    ))}
                  </div>
                </CardContent>
              </Card>

{/* Image Tool */}
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-sm flex items-center">
                    <ImageIcon className="h-4 w-4 mr-2" />
                    Images
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept="image/*"
                    onChange={handleImageUpload}
                    className="hidden"
                  />
                  <Button
                    variant="outline"
                    size="sm"
                    className="w-full bg-transparent"
                    onClick={() => fileInputRef.current?.click()}
                  >
                    <Upload className="h-4 w-4 mr-2" />
                    Upload Image
                  </Button>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="library" className="p-4">
              <div className="space-y-6">
                <div>
                  <Label className="text-sm font-medium mb-2 block">Uploaded Images</Label>
                  {uploadedImages.length > 0 ? (
                    <div className="grid grid-cols-2 gap-2">
                      {uploadedImages.map((image) => (
                        <div
                          key={image.id}
                          className="cursor-pointer border rounded-lg p-2 hover:border-indigo-600"
                          onClick={() => addImageToCanvas(image.url)}
                        >
                          <img
                            src={image.url || "/placeholder.svg"}
                            alt={image.name}
                            className="w-full h-20 object-cover rounded mb-1"
                          />
                          <p className="text-xs text-center truncate">{image.name}</p>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center text-gray-500 py-4">
                      <ImageIcon className="h-8 w-8 mx-auto mb-2 opacity-50" />
                      <p className="text-xs">No uploaded images yet</p>
                    </div>
                  )}
                </div>
                
                <div>
                  <Label className="text-sm font-medium mb-2 block">Suggested Images</Label>
                  <div className="grid grid-cols-2 gap-2">
                    {suggestedImages.map((image) => (
                      <div
                        key={image.id}
                        className="cursor-pointer border rounded-lg p-2 hover:border-indigo-600 transition-colors"
                        onClick={() => addImageToCanvas(image.url)}
                      >
                        <img
                          src={image.url}
                          alt={image.name}
                          className="w-full h-20 object-cover rounded mb-1"
                        />
                        <p className="text-xs text-center truncate">{image.name}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </TabsContent>

<TabsContent value="layers" className="p-4">
              <div className="space-y-2">
                {elements
                  .sort((a, b) => b.zIndex - a.zIndex)
                  .map((element) => (
                    <div
                      key={element.id}
                      className={`flex items-center justify-between p-2 rounded border ${
                        selectedElement === element.id ? "border-indigo-600 bg-indigo-50" : "border-gray-200"
                      }`}
                      onClick={() => setSelectedElement(element.id)}
                    >
                      <div className="flex items-center space-x-2">
                        <button onClick={() => toggleElementVisibility(element.id)}>
                          <Eye className={`h-4 w-4 ${element.visible ? "text-gray-600" : "text-gray-300"}`} />
                        </button>
                        <span className="text-sm truncate">
                          {element.type === "text" ? element.content : element.type}
                        </span>
                        {!isElementInDesignArea(element) && (
                          <Badge variant="destructive" className="text-xs">
                            Outside
                          </Badge>
                        )}
                      </div>
                      <div className="flex items-center space-x-1">
                        <button onClick={() => moveElementLayer(element.id, "up")}>
                          <ChevronUp className="h-3 w-3 text-gray-400 hover:text-gray-600" />
                        </button>
                        <button onClick={() => moveElementLayer(element.id, "down")}>
                          <ChevronDown className="h-3 w-3 text-gray-400 hover:text-gray-600" />
                        </button>
                        <button onClick={() => toggleElementLock(element.id)}>
                          {element.locked ? (
                            <Lock className="h-3 w-3 text-gray-600" />
                          ) : (
                            <Unlock className="h-3 w-3 text-gray-400" />
                          )}
                        </button>
                        <button onClick={() => duplicateElement(element.id)}>
                          <Copy className="h-3 w-3 text-gray-400 hover:text-gray-600" />
                        </button>
                        <button onClick={() => deleteElement(element.id)}>
                          <Trash2 className="h-3 w-3 text-red-400 hover:text-red-600" />
                        </button>
                      </div>
                    </div>
                  ))}
                {elements.length === 0 && (
                  <div className="text-center text-gray-500 py-8">
                    <Layers className="h-12 w-12 mx-auto mb-2 opacity-50" />
                    <p className="text-sm">No elements yet</p>
                  </div>
                )}
              </div>
            </TabsContent>
          </Tabs>
        </div>

{/* Canvas Area */}
        <div className="flex-1 flex flex-col">
          {/* Canvas Controls */}
          <div className="bg-white border-b px-4 py-2 flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <div className="flex items-center space-x-2">
                <Button
                  variant={viewSide === "front" ? "default" : "outline"}
                  size="sm"
                  onClick={() => setViewSide("front")}
                >
                  Front ({designViews.front.length})
                </Button>
                <Button
                  variant={viewSide === "back" ? "default" : "outline"}
                  size="sm"
                  onClick={() => setViewSide("back")}
                >
                  Back ({designViews.back.length})
                </Button>
              </div>
              <Separator orientation="vertical" className="h-6" />
              <div className="flex items-center space-x-2">
                <Button variant="outline" size="sm" onClick={() => setZoomLevel(Math.max(25, zoomLevel - 25))}>
                  <ZoomOut className="h-4 w-4" />
                </Button>
                <span className="text-sm font-medium w-12 text-center">{zoomLevel}%</span>
                <Button variant="outline" size="sm" onClick={() => setZoomLevel(Math.min(200, zoomLevel + 25))}>
                  <ZoomIn className="h-4 w-4" />
                </Button>
              </div>
            </div>

<div className="flex items-center space-x-2">
              <Button variant={showGrid ? "default" : "outline"} size="sm" onClick={() => setShowGrid(!showGrid)}>
                <Grid3X3 className="h-4 w-4" />
              </Button>
              <Button variant={snapToGrid ? "default" : "outline"} size="sm" onClick={() => setSnapToGrid(!snapToGrid)}>
                <Move className="h-4 w-4" />
              </Button>
            </div>
          </div>

{/* Canvas */}
          <div className="flex-1 bg-gray-100 p-8 overflow-auto">
            <div className="max-w-2xl mx-auto">
              <div
                ref={canvasRef}
                className="relative bg-white rounded-lg shadow-lg mx-auto overflow-hidden"
                style={{
                  width: `${400 * (zoomLevel / 100)}px`,
                  height: `${500 * (zoomLevel / 100)}px`,
                }}
              >
                {/* Product Background */}
                {selectedProduct && (
                  <div className="absolute inset-0">
                    <Image
                      src={selectedProduct.image || "/placeholder.svg"}
                      alt={selectedProduct.name}
                      fill
                      className="object-cover"
                      style={{ filter: `hue-rotate(${selectedColor === "#FFFFFF" ? "0deg" : "180deg"})` }}
                    />
                    {/* Design Area Overlay - Hidden in preview mode */}
                    {!previewMode && (
                      <div
                        className="absolute border-2 border-dashed border-blue-400 bg-blue-50 bg-opacity-20"
                        style={{
                          left: selectedProduct.designArea.x * (zoomLevel / 100),
                          top: selectedProduct.designArea.y * (zoomLevel / 100),
                          width: selectedProduct.designArea.width * (zoomLevel / 100),
                          height: selectedProduct.designArea.height * (zoomLevel / 100),
                        }}
                      />
                    )}
                  </div>
                )}

{/* Grid Overlay */}
                {showGrid && selectedProduct && !previewMode && (
                  <div
                    className="absolute opacity-20 pointer-events-none"
                    style={{
                      left: selectedProduct.designArea.x * (zoomLevel / 100),
                      top: selectedProduct.designArea.y * (zoomLevel / 100),
                      width: selectedProduct.designArea.width * (zoomLevel / 100),
                      height: selectedProduct.designArea.height * (zoomLevel / 100),
                      backgroundImage: `
                        linear-gradient(to right, #000 1px, transparent 1px),
                        linear-gradient(to bottom, #000 1px, transparent 1px)
                      `,
                      backgroundSize: "20px 20px",
                    }}
                  />
                )}

{/* Design Elements */}
                {elements
                  .sort((a, b) => a.zIndex - b.zIndex)
                  .map(
                    (element) =>
                      element.visible && (
                        <div key={element.id}>
                          <div
                            className={`absolute ${!previewMode ? "cursor-move" : ""} border-2 ${
                              selectedElement === element.id && !previewMode
                                ? "border-indigo-600"
                                : "border-transparent"
                            } ${element.locked ? "cursor-not-allowed" : ""} ${
                              !isElementInDesignArea(element) && !previewMode
                                ? "border-red-500 bg-red-100 bg-opacity-50"
                                : ""
                            }`}
                            style={{
                              left: element.x * (zoomLevel / 100),
                              top: element.y * (zoomLevel / 100),
                              width: element.width * (zoomLevel / 100),
                              height: element.height * (zoomLevel / 100),
                              transform: `rotate(${element.rotation}deg)`,
                              opacity: element.opacity,
                              zIndex: element.zIndex,
                              clipPath:
                                previewMode && selectedProduct
                                  ? `polygon(${Math.max(0, ((selectedProduct.designArea.x - element.x) / element.width) * 100)}% ${Math.max(0, ((selectedProduct.designArea.y - element.y) / element.height) * 100)}%, ${Math.min(100, ((selectedProduct.designArea.x + selectedProduct.designArea.width - element.x) / element.width) * 100)}% ${Math.max(0, ((selectedProduct.designArea.y - element.y) / element.height) * 100)}%, ${Math.min(100, ((selectedProduct.designArea.x + selectedProduct.designArea.width - element.x) / element.width) * 100)}% ${Math.min(100, ((selectedProduct.designArea.y + selectedProduct.designArea.height - element.y) / element.height) * 100)}%, ${Math.max(0, ((selectedProduct.designArea.x - element.x) / element.width) * 100)}% ${Math.min(100, ((selectedProduct.designArea.y + selectedProduct.designArea.height - element.y) / element.height) * 100)}%)`
                                  : "none",
                            }}
                            onMouseDown={(e) => !previewMode && handleMouseDown(e, element.id)}
                            onClick={() => !element.locked && !previewMode && setSelectedElement(element.id)}
                          >
                            {element.type === "text" && (
                              <div
                                style={{
                                  fontSize: (element.style?.fontSize || 24) * (zoomLevel / 100),
                                  fontFamily: element.style?.fontFamily,
                                  color: element.style?.color,
                                  fontWeight: element.style?.fontWeight,
                                  fontStyle: element.style?.fontStyle,
                                  textDecoration: element.style?.textDecoration,
                                  WebkitTextStroke: element.style?.textStrokeWidth
                                    ? `${element.style.textStrokeWidth}px ${element.style.textStroke}`
                                    : "none",
                                  background: element.style?.backgroundGradient || "transparent",
                                  width: "100%",
                                  height: "100%",
                                  display: "flex",
                                  alignItems: "center",
                                  justifyContent: "center",
                                  userSelect: "none",
                                  // Text shape effects
                                  ...(element.style?.textShape === "arc" && {
                                    transform: "perspective(100px) rotateX(15deg)",
                                    transformOrigin: "center bottom",
                                  }),
                                  ...(element.style?.textShape === "wave" && {
                                    background: `linear-gradient(45deg, transparent 25%, ${element.style?.color || "#000"} 25%, ${element.style?.color || "#000"} 50%, transparent 50%, transparent 75%, ${element.style?.color || "#000"} 75%)`,
                                    backgroundSize: "8px 8px",
                                    WebkitBackgroundClip: "text",
                                    WebkitTextFillColor: "transparent",
                                    backgroundClip: "text",
                                  }),
                                }}
                              >
                                {element.content}
                              </div>
                            )}
                            {element.type === "image" && (
                              <img
                                src={element.content || "/placeholder.svg"}
                                alt="Design element"
                                style={{
                                  width: "100%",
                                  height: "100%",
                                  objectFit: "cover",
                                  userSelect: "none",
                                }}
                                draggable={false}
                              />
                            )}
                            {element.type === "shape" && (
                              <div
                                style={{
                                  width: "100%",
                                  height: "100%",
                                  backgroundColor: element.style?.backgroundColor,
                                  border: `${(element.style?.borderWidth || 2) * (zoomLevel / 100)}px solid ${element.style?.borderColor}`,
                                  borderRadius: element.content === "Circle" ? "50%" : "0",
                                }}
                              />
                            )}
                          </div>
                          {!previewMode && renderResizeHandles(element)}
                        </div>
                      ),
                  )}

{/* Canvas Label */}
                <div className="absolute bottom-4 left-4">
                  <Badge variant="secondary">{viewSide === "front" ? "Front" : "Back"} View</Badge>
                </div>
              </div>
            </div>
          </div>
        </div>

{/* Right Sidebar - Properties */}
        <div className="w-80 bg-white border-l overflow-y-auto">
          <div className="p-4">
            <h3 className="font-semibold mb-4">Properties</h3>

{selectedElement ? (
              <div className="space-y-4">
                {(() => {
                  const element = elements.find((el) => el.id === selectedElement)
                  if (!element) return null

return (
                    <>
                      <div>
                        <Label className="text-sm">Position</Label>
                        <div className="grid grid-cols-2 gap-2 mt-1">
                          <div>
                            <Label className="text-xs text-gray-500">X</Label>
                            <Input
                              type="number"
                              value={Math.round(element.x)}
                              onChange={(e) => {
                                const newX = Number(e.target.value)
                                if (selectedProduct) {
                                  const designArea = selectedProduct.designArea
                                  const constrainedX = Math.max(
                                    designArea.x,
                                    Math.min(newX, designArea.x + designArea.width - element.width),
                                  )
                                  setElements((prev) =>
                                    prev.map((el) => (el.id === selectedElement ? { ...el, x: constrainedX } : el)),
                                  )
                                }
                              }}
                              className="text-sm"
                            />
                          </div>
                          <div>
                            <Label className="text-xs text-gray-500">Y</Label>
                            <Input
                              type="number"
                              value={Math.round(element.y)}
                              onChange={(e) => {
                                const newY = Number(e.target.value)
                                if (selectedProduct) {
                                  const designArea = selectedProduct.designArea
                                  const constrainedY = Math.max(
                                    designArea.y,
                                    Math.min(newY, designArea.y + designArea.height - element.height),
                                  )
                                  setElements((prev) =>
                                    prev.map((el) => (el.id === selectedElement ? { ...el, y: constrainedY } : el)),
                                  )
                                }
                              }}
                              className="text-sm"
                            />
                          </div>
                        </div>
                      </div>

<div>
                        <Label className="text-sm">Size</Label>
                        <div className="grid grid-cols-2 gap-2 mt-1">
                          <div>
                            <Label className="text-xs text-gray-500">Width</Label>
                            <Input
                              type="number"
                              value={Math.round(element.width)}
                              onChange={(e) => {
                                const newWidth = Math.max(10, Number(e.target.value))
                                setElements((prev) =>
                                  prev.map((el) => (el.id === selectedElement ? { ...el, width: newWidth } : el)),
                                )
                              }}
                              className="text-sm"
                            />
                          </div>
                          <div>
                            <Label className="text-xs text-gray-500">Height</Label>
                            <Input
                              type="number"
                              value={Math.round(element.height)}
                              onChange={(e) => {
                                const newHeight = Math.max(10, Number(e.target.value))
                                setElements((prev) =>
                                  prev.map((el) => (el.id === selectedElement ? { ...el, height: newHeight } : el)),
                                )
                              }}
                              className="text-sm"
                            />
                          </div>
                        </div>
                      </div>

<div>
                        <Label className="text-sm">Rotation</Label>
                        <div className="flex items-center space-x-2 mt-1">
                          <Slider
                            value={[element.rotation]}
                            onValueChange={(value) => {
                              setElements((prev) =>
                                prev.map((el) => (el.id === selectedElement ? { ...el, rotation: value[0] } : el)),
                              )
                            }}
                            max={360}
                            min={0}
                            step={1}
                            className="flex-1"
                          />
                          <span className="text-sm w-12">{element.rotation}°</span>
                        </div>
                      </div>

<div>
                        <Label className="text-sm">Opacity</Label>
                        <div className="flex items-center space-x-2 mt-1">
                          <Slider
                            value={[element.opacity * 100]}
                            onValueChange={(value) => {
                              setElements((prev) =>
                                prev.map((el) => (el.id === selectedElement ? { ...el, opacity: value[0] / 100 } : el)),
                              )
                            }}
                            max={100}
                            min={0}
                            step={1}
                            className="flex-1"
                          />
                          <span className="text-sm w-12">{Math.round(element.opacity * 100)}%</span>
                        </div>
                      </div>

{element.type === "text" && (
                        <>
                          <Separator />
                          <div>
                            <Label className="text-sm">Text Content</Label>
                            <Input
                              value={element.content}
                              onChange={(e) => {
                                setElements((prev) =>
                                  prev.map((el) =>
                                    el.id === selectedElement ? { ...el, content: e.target.value } : el,
                                  ),
                                )
                              }}
                              className="text-sm mt-1"
                            />
                          </div>
                          <div className="grid grid-cols-2 gap-2">
                            <div>
                              <Label className="text-sm">Font Family</Label>
                              <Select
                                value={element.style?.fontFamily || "Arial"}
                                onValueChange={(value) => {
                                  setElements((prev) =>
                                    prev.map((el) =>
                                      el.id === selectedElement
                                        ? {
                                            ...el,
                                            style: { ...el.style, fontFamily: value },
                                          }
                                        : el,
                                    ),
                                  )
                                }}
                              >
                                <SelectTrigger className="text-sm">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  {fonts.map((font) => (
                                    <SelectItem key={font} value={font}>
                                      {font}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </div>
                            <div>
                              <Label className="text-sm">Font Size</Label>
                              <Input
                                type="number"
                                value={element.style?.fontSize || 24}
                                onChange={(e) => {
                                  setElements((prev) =>
                                    prev.map((el) =>
                                      el.id === selectedElement
                                        ? {
                                            ...el,
                                            style: { ...el.style, fontSize: Number(e.target.value) },
                                          }
                                        : el,
                                    ),
                                  )
                                }}
                                className="text-sm mt-1"
                              />
                            </div>
                          </div>
                          <div className="flex space-x-1">
                            <Toggle
                              pressed={element.style?.fontWeight === "bold"}
                              onPressedChange={(pressed) => {
                                setElements((prev) =>
                                  prev.map((el) =>
                                    el.id === selectedElement
                                      ? {
                                          ...el,
                                          style: { ...el.style, fontWeight: pressed ? "bold" : "normal" },
                                        }
                                      : el,
                                  ),
                                )
                              }}
                              size="sm"
                            >
                              <Bold className="h-3 w-3" />
                            </Toggle>
                            <Toggle
                              pressed={element.style?.fontStyle === "italic"}
                              onPressedChange={(pressed) => {
                                setElements((prev) =>
                                  prev.map((el) =>
                                    el.id === selectedElement
                                      ? {
                                          ...el,
                                          style: { ...el.style, fontStyle: pressed ? "italic" : "normal" },
                                        }
                                      : el,
                                  ),
                                )
                              }}
                              size="sm"
                            >
                              <Italic className="h-3 w-3" />
                            </Toggle>
                            <Toggle
                              pressed={element.style?.textDecoration === "underline"}
                              onPressedChange={(pressed) => {
                                setElements((prev) =>
                                  prev.map((el) =>
                                    el.id === selectedElement
                                      ? {
                                          ...el,
                                          style: { ...el.style, textDecoration: pressed ? "underline" : "none" },
                                        }
                                      : el,
                                  ),
                                )
                              }}
                              size="sm"
                            >
                              <Underline className="h-3 w-3" />
                            </Toggle>
                          </div>
                          <div>
                            <Label className="text-sm">Text Color</Label>
                            <Input
                              type="color"
                              value={element.style?.color || "#000000"}
                              onChange={(e) => {
                                setElements((prev) =>
                                  prev.map((el) =>
                                    el.id === selectedElement
                                      ? {
                                          ...el,
                                          style: { ...el.style, color: e.target.value },
                                        }
                                      : el,
                                  ),
                                )
                              }}
                              className="h-8 mt-1"
                            />
                          </div>
                          <div className="grid grid-cols-2 gap-2">
                            <div>
                              <Label className="text-sm">Outline Color</Label>
                              <Input
                                type="color"
                                value={element.style?.textStroke || "#000000"}
                                onChange={(e) => {
                                  setElements((prev) =>
                                    prev.map((el) =>
                                      el.id === selectedElement
                                        ? {
                                            ...el,
                                            style: { ...el.style, textStroke: e.target.value },
                                          }
                                        : el,
                                    ),
                                  )
                                }}
                                className="h-8"
                              />
                            </div>
                            <div>
                              <Label className="text-sm">Outline Width</Label>
                              <Input
                                type="number"
                                min="0"
                                max="10"
                                value={element.style?.textStrokeWidth || 0}
                                onChange={(e) => {
                                  setElements((prev) =>
                                    prev.map((el) =>
                                      el.id === selectedElement
                                        ? {
                                            ...el,
                                            style: { ...el.style, textStrokeWidth: Number(e.target.value) },
                                          }
                                        : el,
                                    ),
                                  )
                                }}
                                className="text-sm"
                              />
                            </div>
                          </div>
                          <div>
                            <Label className="text-sm">Background Gradient (CSS)</Label>
                            <Input
                              value={element.style?.backgroundGradient || ""}
                              onChange={(e) => {
                                setElements((prev) =>
                                  prev.map((el) =>
                                    el.id === selectedElement
                                      ? {
                                          ...el,
                                          style: { ...el.style, backgroundGradient: e.target.value },
                                        }
                                      : el,
                                  ),
                                )
                              }}
                              placeholder="linear-gradient(45deg, #ff0000, #0000ff)"
                              className="text-sm mt-1"
                            />
                          </div>
                        </>
                      )}

{element.type === "shape" && (
                        <>
                          <Separator />
                          <div>
                            <Label className="text-sm">Fill Color</Label>
                            <Input
                              type="color"
                              value={element.style?.backgroundColor || "#3b82f6"}
                              onChange={(e) => {
                                setElements((prev) =>
                                  prev.map((el) =>
                                    el.id === selectedElement
                                      ? {
                                          ...el,
                                          style: { ...el.style, backgroundColor: e.target.value },
                                        }
                                      : el,
                                  ),
                                )
                              }}
                              className="h-8 mt-1"
                            />
                          </div>
                          <div>
                            <Label className="text-sm">Border Color</Label>
                            <Input
                              type="color"
                              value={element.style?.borderColor || "#1e40af"}
                              onChange={(e) => {
                                setElements((prev) =>
                                  prev.map((el) =>
                                    el.id === selectedElement
                                      ? {
                                          ...el,
                                          style: { ...el.style, borderColor: e.target.value },
                                        }
                                      : el,
                                  ),
                                )
                              }}
                              className="h-8 mt-1"
                            />
                          </div>
                          <div>
                            <Label className="text-sm">Border Width</Label>
                            <Input
                              type="number"
                              value={element.style?.borderWidth || 2}
                              onChange={(e) => {
                                setElements((prev) =>
                                  prev.map((el) =>
                                    el.id === selectedElement
                                      ? {
                                          ...el,
                                          style: { ...el.style, borderWidth: Number(e.target.value) },
                                        }
                                      : el,
                                  ),
                                )
                              }}
                              className="text-sm mt-1"
                            />
                          </div>
                        </>
                      )}

<Separator />
                      <div className="flex space-x-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => duplicateElement(element.id)}
                          className="flex-1"
                        >
                          <Copy className="h-4 w-4 mr-1" />
                          Duplicate
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => deleteElement(element.id)}
                          className="flex-1 text-red-600 hover:text-red-700"
                        >
                          <Trash2 className="h-4 w-4 mr-1" />
                          Delete
                        </Button>
                      </div>
                    </>
                  )
                })()}
              </div>
            ) : (
              <div className="text-center text-gray-500 py-8">
                <Palette className="h-12 w-12 mx-auto mb-2 opacity-50" />
                <p className="text-sm">Select an element to edit properties</p>
              </div>
            )}
          </div>
        </div>
      </div>

{/* Hidden canvas for download functionality */}
      <canvas ref={downloadCanvasRef} style={{ display: "none" }} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/design-preview/[id]/page.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Heart, Share2, ShoppingCart, Edit, Download, Eye, Flag, ArrowLeft, ZoomIn, ZoomOut } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useAuth } from "@/hooks/use-auth"
import { useCart } from "@/hooks/use-cart"
import { Label } from "@/components/ui/label"

interface Design {
  id: string
  name: string
  description: string
  designer: {
    name: string
    avatar: string
    verified: boolean
  }
  images: {
    front: string
    back: string
    mockup: string
  }
  product: {
    name: string
    basePrice: number
    colors: Array<{ name: string; value: string }>
    sizes: string[]
  }
  designPrice: number
  totalPrice: number
  tags: string[]
  stats: {
    views: number
    likes: number
    downloads: number
    sales: number
  }
  isPublic: boolean
  allowEdit: boolean
  createdAt: string
  updatedAt: string
}

interface Review {
  id: string
  userId: string
  userName: string
  userAvatar: string
  rating: number
  comment: string
  createdAt: string
  helpful: number
}

export default function DesignPreviewPage() {
  const params = useParams()
  const router = useRouter()
  const { user } = useAuth()
  const { addItem } = useCart()

const [design, setDesign] = useState<Design | null>(null)
  const [selectedColor, setSelectedColor] = useState("")
  const [selectedSize, setSelectedSize] = useState("M")
  const [selectedView, setSelectedView] = useState<"front" | "back" | "mockup">("mockup")
  const [quantity, setQuantity] = useState(1)
  const [isLiked, setIsLiked] = useState(false)
  const [zoomLevel, setZoomLevel] = useState(100)
  const [isLoading, setIsLoading] = useState(true)

const [reviews, setReviews] = useState<Review[]>([])
  const [userReview, setUserReview] = useState<Review | null>(null)
  const [newRating, setNewRating] = useState(0)
  const [newComment, setNewComment] = useState("")
  const [showReviewForm, setShowReviewForm] = useState(false)
  const [reviewsLoading, setReviewsLoading] = useState(false)

useEffect(() => {
    const loadDesign = async () => {
      setIsLoading(true)

// Mock design data
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockDesign: Design = {
        id: params.id as string,
        name: "Sunset Vibes T-Shirt",
        description:
          "A beautiful sunset design perfect for summer vibes. This design captures the essence of golden hour with vibrant colors and artistic elements.",
        designer: {
          name: "Alex Martinez",
          avatar: "/placeholder.svg?height=60&width=60&text=AM",
          verified: true,
        },
        images: {
          front: "/placeholder.svg?height=600&width=600&text=Front+Design",
          back: "/placeholder.svg?height=600&width=600&text=Back+Design",
          mockup: "/placeholder.svg?height=600&width=600&text=Mockup+View",
        },
        product: {
          name: "Premium Cotton T-Shirt",
          basePrice: 24.99,
          colors: [
            { name: "Black", value: "#000000" },
            { name: "White", value: "#FFFFFF" },
            { name: "Navy", value: "#1e3a8a" },
            { name: "Gray", value: "#6b7280" },
          ],
          sizes: ["XS", "S", "M", "L", "XL", "XXL"],
        },
        designPrice: 8.0,
        totalPrice: 32.99,
        tags: ["summer", "sunset", "nature", "artistic"],
        stats: {
          views: 1247,
          likes: 89,
          downloads: 23,
          sales: 15,
        },
        isPublic: true,
        allowEdit: true,
        createdAt: "2024-01-15T10:00:00Z",
        updatedAt: "2024-01-20T15:30:00Z",
      }

const mockReviews: Review[] = [
        {
          id: "1",
          userId: "user1",
          userName: "Sarah Johnson",
          userAvatar: "/placeholder.svg?height=40&width=40&text=SJ",
          rating: 5,
          comment:
            "Amazing design! The colors are perfect and the quality is outstanding. Definitely recommend this to anyone looking for a unique t-shirt design.",
          createdAt: "2024-01-18T10:30:00Z",
          helpful: 12,
        },
        {
          id: "2",
          userId: "user2",
          userName: "Mike Chen",
          userAvatar: "/placeholder.svg?height=40&width=40&text=MC",
          rating: 4,
          comment:
            "Great design concept. The sunset theme really works well. Only minor issue is that it could be a bit larger on the shirt.",
          createdAt: "2024-01-16T14:20:00Z",
          helpful: 8,
        },
        {
          id: "3",
          userId: "user3",
          userName: "Emma Davis",
          userAvatar: "/placeholder.svg?height=40&width=40&text=ED",
          rating: 5,
          comment:
            "Love this design! Bought it for my summer vacation and got so many compliments. The artist did an excellent job.",
          createdAt: "2024-01-15T09:15:00Z",
          helpful: 15,
        },
        {
          id: "4",
          userId: "user4",
          userName: "James Wilson",
          userAvatar: "/placeholder.svg?height=40&width=40&text=JW",
          rating: 3,
          comment:
            "Decent design but not exactly what I expected from the preview. The colors look different in person.",
          createdAt: "2024-01-14T16:45:00Z",
          helpful: 3,
        },
      ]

setDesign(mockDesign)
      setSelectedColor(mockDesign.product.colors[0].value)
      setReviews(mockReviews)
      setIsLoading(false)
    }

loadDesign()
  }, [params.id])

const handleAddToCart = () => {
    if (!design) return

addItem({
      productId: design.id,
      name: `${design.name} - ${design.product.name}`,
      price: design.totalPrice,
      quantity,
      size: selectedSize,
      color: selectedColor,
      image: design.images.mockup,
      isCustomDesign: true,
    })

// Show success notification
    alert("Design added to cart!")
  }

const handleLike = () => {
    setIsLiked(!isLiked)
    if (design) {
      setDesign((prev) =>
        prev
          ? {
              ...prev,
              stats: {
                ...prev.stats,
                likes: isLiked ? prev.stats.likes - 1 : prev.stats.likes + 1,
              },
            }
          : null,
      )
    }
  }

const handleShare = () => {
    if (navigator.share) {
      navigator.share({
        title: design?.name,
        text: design?.description,
        url: window.location.href,
      })
    } else {
      navigator.clipboard.writeText(window.location.href)
      alert("Link copied to clipboard!")
    }
  }

const handleDownload = () => {
    // Mock download functionality
    alert("Design download started!")
  }

const handleReport = () => {
    alert("Report submitted. Thank you for helping keep our community safe.")
  }

const handleSubmitReview = async () => {
    if (!user || newRating === 0) return

const review: Review = {
      id: Date.now().toString(),
      userId: user.id,
      userName: user.name,
      userAvatar: user.avatar || "/placeholder.svg?height=40&width=40&text=" + user.name.charAt(0),
      rating: newRating,
      comment: newComment,
      createdAt: new Date().toISOString(),
      helpful: 0,
    }

setReviews((prev) => [review, ...prev])
    setUserReview(review)
    setNewRating(0)
    setNewComment("")
    setShowReviewForm(false)

// Show success message
    alert("Review submitted successfully!")
  }

const handleHelpfulClick = (reviewId: string) => {
    setReviews((prev) =>
      prev.map((review) => (review.id === reviewId ? { ...review, helpful: review.helpful + 1 } : review)),
    )
  }

const renderStars = (rating: number, interactive = false, onRatingChange?: (rating: number) => void) => {
    return (
      <div className="flex items-center space-x-1">
        {[1, 2, 3, 4, 5].map((star) => (
          <button
            key={star}
            onClick={() => interactive && onRatingChange?.(star)}
            className={`${interactive ? "cursor-pointer hover:scale-110" : "cursor-default"} transition-transform`}
            disabled={!interactive}
          >
            <svg
              className={`w-5 h-5 ${star <= rating ? "text-yellow-400 fill-current" : "text-gray-300"}`}
              viewBox="0 0 20 20"
            >
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
            </svg>
          </button>
        ))}
      </div>
    )
  }

const averageRating =
    reviews.length > 0 ? reviews.reduce((sum, review) => sum + review.rating, 0) / reviews.length : 0

if (isLoading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div className="aspect-square bg-gray-200 rounded-lg animate-pulse" />
            <div className="space-y-4">
              <div className="h-8 bg-gray-200 rounded animate-pulse" />
              <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
              <div className="h-6 bg-gray-200 rounded animate-pulse w-1/3" />
              <div className="space-y-2">
                {[...Array(4)].map((_, i) => (
                  <div key={i} className="h-4 bg-gray-200 rounded animate-pulse" />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

if (!design) {
    return (
      <div className="container mx-auto px-4 py-16 text-center">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">Design not found</h1>
        <p className="text-gray-600 mb-8">The design you're looking for doesn't exist or has been removed.</p>
        <Button asChild>
          <Link href="/shop">Browse Designs</Link>
        </Button>
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-6xl mx-auto">
        {/* Back Button */}
        <Button variant="ghost" className="mb-6" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Design Preview */}
          <div className="space-y-6">
            {/* View Selector */}
            <div className="flex items-center justify-between">
              <div className="flex space-x-2">
                <Button
                  variant={selectedView === "mockup" ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedView("mockup")}
                >
                  Mockup
                </Button>
                <Button
                  variant={selectedView === "front" ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedView("front")}
                >
                  Front
                </Button>
                <Button
                  variant={selectedView === "back" ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedView("back")}
                >
                  Back
                </Button>
              </div>

<div className="flex items-center space-x-2">
                <Button variant="outline" size="sm" onClick={() => setZoomLevel(Math.max(50, zoomLevel - 25))}>
                  <ZoomOut className="h-4 w-4" />
                </Button>
                <span className="text-sm font-medium w-12 text-center">{zoomLevel}%</span>
                <Button variant="outline" size="sm" onClick={() => setZoomLevel(Math.min(200, zoomLevel + 25))}>
                  <ZoomIn className="h-4 w-4" />
                </Button>
              </div>
            </div>

{/* Design Image */}
            <div className="relative aspect-square bg-gray-100 rounded-lg overflow-hidden">
              <Image
                src={design.images[selectedView] || "/placeholder.svg"}
                alt={`${design.name} - ${selectedView}`}
                fill
                className="object-cover transition-transform duration-300"
                style={{ transform: `scale(${zoomLevel / 100})` }}
              />
            </div>

{/* Design Stats */}
            <div className="grid grid-cols-4 gap-4 text-center">
              <div>
                <div className="flex items-center justify-center mb-1">
                  <Eye className="h-4 w-4 text-gray-600" />
                </div>
                <p className="text-sm font-medium">{design.stats.views}</p>
                <p className="text-xs text-gray-600">Views</p>
              </div>
              <div>
                <div className="flex items-center justify-center mb-1">
                  <Heart className="h-4 w-4 text-gray-600" />
                </div>
                <p className="text-sm font-medium">{design.stats.likes}</p>
                <p className="text-xs text-gray-600">Likes</p>
              </div>
              <div>
                <div className="flex items-center justify-center mb-1">
                  <Download className="h-4 w-4 text-gray-600" />
                </div>
                <p className="text-sm font-medium">{design.stats.downloads}</p>
                <p className="text-xs text-gray-600">Downloads</p>
              </div>
              <div>
                <div className="flex items-center justify-center mb-1">
                  <ShoppingCart className="h-4 w-4 text-gray-600" />
                </div>
                <p className="text-sm font-medium">{design.stats.sales}</p>
                <p className="text-xs text-gray-600">Sales</p>
              </div>
            </div>
          </div>

{/* Design Details */}
          <div className="space-y-6">
            {/* Header */}
            <div>
              <h1 className="text-3xl font-bold text-gray-900 mb-2">{design.name}</h1>
              <p className="text-gray-600 mb-4">{design.description}</p>

{/* Designer Info */}
              <div className="flex items-center space-x-3 mb-4">
                <Image
                  src={design.designer.avatar || "/placeholder.svg"}
                  alt={design.designer.name}
                  width={40}
                  height={40}
                  className="rounded-full"
                />
                <div>
                  <div className="flex items-center space-x-2">
                    <p className="font-medium">{design.designer.name}</p>
                    {design.designer.verified && <Badge className="bg-blue-100 text-blue-800 text-xs">Verified</Badge>}
                  </div>
                  <p className="text-sm text-gray-600">Created {new Date(design.createdAt).toLocaleDateString()}</p>
                </div>
              </div>

{/* Tags */}
              <div className="flex flex-wrap gap-2 mb-6">
                {design.tags.map((tag) => (
                  <Badge key={tag} variant="secondary" className="text-xs">
                    #{tag}
                  </Badge>
                ))}
              </div>
            </div>

{/* Pricing */}
            <Card>
              <CardContent className="p-6">
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span>Base Product ({design.product.name})</span>
                    <span>${design.product.basePrice.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Design Fee</span>
                    <span>${design.designPrice.toFixed(2)}</span>
                  </div>
                  <Separator />
                  <div className="flex justify-between items-center text-lg font-bold">
                    <span>Total Price</span>
                    <span className="text-indigo-600">${design.totalPrice.toFixed(2)}</span>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Customization Options */}
            <Card>
              <CardHeader>
                <CardTitle>Customize Your Order</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Color Selection */}
                <div>
                  <label className="text-sm font-medium mb-2 block">Color</label>
                  <div className="flex space-x-2">
                    {design.product.colors.map((color) => (
                      <button
                        key={color.name}
                        onClick={() => setSelectedColor(color.value)}
                        className={`w-8 h-8 rounded-full border-2 ${
                          selectedColor === color.value ? "border-indigo-600 ring-2 ring-indigo-200" : "border-gray-300"
                        }`}
                        style={{ backgroundColor: color.value }}
                        title={color.name}
                      />
                    ))}
                  </div>
                </div>

{/* Size Selection */}
                <div>
                  <label className="text-sm font-medium mb-2 block">Size</label>
                  <Select value={selectedSize} onValueChange={setSelectedSize}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {design.product.sizes.map((size) => (
                        <SelectItem key={size} value={size}>
                          {size}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

{/* Quantity */}
                <div>
                  <label className="text-sm font-medium mb-2 block">Quantity</label>
                  <div className="flex items-center space-x-3">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setQuantity(Math.max(1, quantity - 1))}
                      disabled={quantity <= 1}
                    >
                      -
                    </Button>
                    <span className="w-12 text-center font-medium">{quantity}</span>
                    <Button variant="outline" size="sm" onClick={() => setQuantity(quantity + 1)}>
                      +
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Action Buttons */}
            <div className="space-y-3">
              <Button onClick={handleAddToCart} className="w-full bg-indigo-600 hover:bg-indigo-700" size="lg">
                <ShoppingCart className="h-4 w-4 mr-2" />
                Add to Cart - ${(design.totalPrice * quantity).toFixed(2)}
              </Button>

{user && design.allowEdit && (
                <Button variant="outline" className="w-full bg-transparent" asChild>
                  <Link href={`/design-studio?design=${design.id}`}>
                    <Edit className="h-4 w-4 mr-2" />
                    Edit This Design
                  </Link>
                </Button>
              )}
            </div>

{/* Report Button */}
            <div className="pt-4 border-t">
              <Button variant="ghost" size="sm" onClick={handleReport} className="text-gray-500 hover:text-red-500">
                <Flag className="h-4 w-4 mr-2" />
                Report Design
              </Button>
            </div>
          </div>
        </div>

{/* Related Designs */}
        <div className="mt-16">
          <h2 className="text-2xl font-bold text-gray-900 mb-8">More from {design.designer.name}</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[...Array(4)].map((_, index) => (
              <Card key={index} className="group hover:shadow-lg transition-shadow">
                <CardContent className="p-0">
                  <div className="relative overflow-hidden rounded-t-lg">
                    <Image
                      src={`/placeholder.svg?height=250&width=250&text=Design+${index + 1}`}
                      alt={`Related Design ${index + 1}`}
                      width={250}
                      height={250}
                      className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                  <div className="p-4">
                    <h3 className="font-semibold mb-2">Related Design {index + 1}</h3>
                    <div className="flex items-center justify-between">
                      <span className="text-lg font-bold text-indigo-600">$29.99</span>
                      <Button size="sm" variant="outline" asChild>
                        <Link href={`/design-preview/${index + 1}`}>View</Link>
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{/* Reviews Section */}
        <div className="mt-16">
          <div className="flex items-center justify-between mb-8">
            <div>
              <h2 className="text-2xl font-bold text-gray-900">Customer Reviews</h2>
              <div className="flex items-center space-x-4 mt-2">
                <div className="flex items-center space-x-2">
                  {renderStars(Math.round(averageRating))}
                  <span className="text-lg font-semibold">{averageRating.toFixed(1)}</span>
                  <span className="text-gray-600">({reviews.length} reviews)</span>
                </div>
              </div>
            </div>
            {user && !userReview && <Button onClick={() => setShowReviewForm(!showReviewForm)}>Write a Review</Button>}
          </div>

{/* Review Form */}
          {showReviewForm && (
            <Card className="mb-8">
              <CardHeader>
                <CardTitle>Write Your Review</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label className="text-sm font-medium mb-2 block">Rating</Label>
                  {renderStars(newRating, true, setNewRating)}
                </div>
                <div>
                  <Label className="text-sm font-medium mb-2 block">Comment</Label>
                  <textarea
                    value={newComment}
                    onChange={(e) => setNewComment(e.target.value)}
                    placeholder="Share your thoughts about this design..."
                    className="w-full p-3 border border-gray-300 rounded-md resize-none h-24 text-sm"
                  />
                </div>
                <div className="flex space-x-2">
                  <Button
                    onClick={handleSubmitReview}
                    disabled={newRating === 0}
                    className="bg-indigo-600 hover:bg-indigo-700"
                  >
                    Submit Review
                  </Button>
                  <Button
                    variant="outline"
                    onClick={() => {
                      setShowReviewForm(false)
                      setNewRating(0)
                      setNewComment("")
                    }}
                  >
                    Cancel
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

{/* Reviews List */}
          <div className="space-y-6">
            {reviews.map((review) => (
              <Card key={review.id}>
                <CardContent className="p-6">
                  <div className="flex items-start space-x-4">
                    <Image
                      src={review.userAvatar || "/placeholder.svg"}
                      alt={review.userName}
                      width={48}
                      height={48}
                      className="rounded-full"
                    />
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-2">
                        <div>
                          <h4 className="font-semibold text-gray-900">{review.userName}</h4>
                          <div className="flex items-center space-x-2 mt-1">
                            {renderStars(review.rating)}
                            <span className="text-sm text-gray-500">
                              {new Date(review.createdAt).toLocaleDateString()}
                            </span>
                          </div>
                        </div>
                      </div>
                      <p className="text-gray-700 mb-3">{review.comment}</p>
                      <div className="flex items-center space-x-4">
                        <button
                          onClick={() => handleHelpfulClick(review.id)}
                          className="flex items-center space-x-1 text-sm text-gray-500 hover:text-gray-700"
                        >
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={2}
                              d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"
                            />
                          </svg>
                          <span>Helpful ({review.helpful})</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}

{reviews.length === 0 && (
              <div className="text-center py-12">
                <div className="text-gray-400 mb-4">
                  <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={1}
                      d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                    />
                  </svg>
                </div>
                <h3 className="text-lg font-semibold mb-2">No reviews yet</h3>
                <p className="text-gray-600 mb-6">Be the first to review this design</p>
                {user && <Button onClick={() => setShowReviewForm(true)}>Write First Review</Button>}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/designs/page.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import {
  Search,
  Grid3X3,
  List,
  Edit,
  Trash2,
  ShoppingCart,
  Share2,
  Eye,
  Heart,
  Globe,
  Lock,
  TrendingUp,
  Calendar,
  Plus,
  Users,
  Unlock,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useAuth } from "@/hooks/use-auth"

interface Design {
  id: string
  name: string
  description: string
  image: string
  tags: string[]
  isPublic: boolean
  allowEdit: boolean
  editableByOthers: boolean // Add this new field
  createdAt: string
  updatedAt: string
  views: number
  likes: number
  sales: number
  product: {
    name: string
    color: string
  }
}

export default function MyDesignsPage() {
  const { user } = useAuth()
  const [designs, setDesigns] = useState<Design[]>([])
  const [filteredDesigns, setFilteredDesigns] = useState<Design[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [filterStatus, setFilterStatus] = useState("all")
  const [sortBy, setSortBy] = useState("updated")
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
  const [isLoading, setIsLoading] = useState(true)
  const [selectedDesign, setSelectedDesign] = useState<Design | null>(null)

useEffect(() => {
    // Mock data loading
    const loadDesigns = async () => {
      setIsLoading(true)

// Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockDesigns: Design[] = [
        {
          id: "1",
          name: "Sunset Vibes",
          description: "A beautiful sunset design perfect for summer",
          image: "/placeholder.svg?height=300&width=300&text=Sunset+Design",
          tags: ["summer", "sunset", "nature"],
          isPublic: true,
          allowEdit: false,
          editableByOthers: true, // Add this
          createdAt: "2024-01-15",
          updatedAt: "2024-01-20",
          views: 245,
          likes: 18,
          sales: 5,
          product: {
            name: "Classic T-Shirt",
            color: "Black",
          },
        },
        {
          id: "2",
          name: "Urban Street",
          description: "Modern street art inspired design",
          image: "/placeholder.svg?height=300&width=300&text=Urban+Design",
          tags: ["urban", "street", "modern"],
          isPublic: false,
          allowEdit: true,
          editableByOthers: false, // Add this
          createdAt: "2024-01-10",
          updatedAt: "2024-01-18",
          views: 89,
          likes: 12,
          sales: 2,
          product: {
            name: "Premium Hoodie",
            color: "Gray",
          },
        },
        {
          id: "3",
          name: "Minimalist Logo",
          description: "Clean and simple logo design",
          image: "/placeholder.svg?height=300&width=300&text=Logo+Design",
          tags: ["minimalist", "logo", "clean"],
          isPublic: true,
          allowEdit: false,
          editableByOthers: true, // Add this
          createdAt: "2024-01-05",
          updatedAt: "2024-01-15",
          views: 156,
          likes: 24,
          sales: 8,
          product: {
            name: "Tank Top",
            color: "White",
          },
        },
      ]

setDesigns(mockDesigns)
      setFilteredDesigns(mockDesigns)
      setIsLoading(false)
    }

loadDesigns()
  }, [])

useEffect(() => {
    let filtered = [...designs]

// Search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (design) =>
          design.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
          design.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
          design.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())),
      )
    }

// Status filter
    if (filterStatus !== "all") {
      filtered = filtered.filter((design) => {
        if (filterStatus === "public") return design.isPublic
        if (filterStatus === "private") return !design.isPublic
        return true
      })
    }

// Sort
    filtered.sort((a, b) => {
      switch (sortBy) {
        case "name":
          return a.name.localeCompare(b.name)
        case "created":
          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
        case "updated":
          return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
        case "views":
          return b.views - a.views
        case "likes":
          return b.likes - a.likes
        case "sales":
          return b.sales - a.sales
        default:
          return 0
      }
    })

setFilteredDesigns(filtered)
  }, [designs, searchQuery, filterStatus, sortBy])

const deleteDesign = async (id: string) => {
    if (confirm("Are you sure you want to delete this design?")) {
      setDesigns((prev) => prev.filter((design) => design.id !== id))
    }
  }

const togglePublicStatus = async (id: string) => {
    setDesigns((prev) => prev.map((design) => (design.id === id ? { ...design, isPublic: !design.isPublic } : design)))
  }

const toggleEditableByOthers = async (id: string) => {
    setDesigns((prev) =>
      prev.map((design) => (design.id === id ? { ...design, editableByOthers: !design.editableByOthers } : design)),
    )
  }

const addToCart = (design: Design) => {
    // Add design to cart logic
    console.log("Adding design to cart:", design)
  }

const shareDesign = (design: Design) => {
    // Share design logic
    if (navigator.share) {
      navigator.share({
        title: design.name,
        text: design.description,
        url: `/design-preview/${design.id}`,
      })
    } else {
      // Fallback to copy link
      navigator.clipboard.writeText(`${window.location.origin}/design-preview/${design.id}`)
    }
  }

return (
    <div className="container mx-auto px-4 py-8">
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">My Designs</h1>
          <p className="text-gray-600 mt-1">{designs.length} designs created</p>
        </div>
        <Button asChild>
          <Link href="/design-studio">
            <Plus className="h-4 w-4 mr-2" />
            Create New Design
          </Link>
        </Button>
      </div>

{/* Filters and Controls */}
      <div className="flex flex-col sm:flex-row gap-4 mb-8">
        <div className="flex-1">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
            <Input
              placeholder="Search designs..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

<div className="flex items-center space-x-2">
          <Select value={filterStatus} onValueChange={setFilterStatus}>
            <SelectTrigger className="w-32">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Designs</SelectItem>
              <SelectItem value="public">Public</SelectItem>
              <SelectItem value="private">Private</SelectItem>
            </SelectContent>
          </Select>

<Select value={sortBy} onValueChange={setSortBy}>
            <SelectTrigger className="w-32">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="updated">Last Updated</SelectItem>
              <SelectItem value="created">Date Created</SelectItem>
              <SelectItem value="name">Name</SelectItem>
              <SelectItem value="views">Most Viewed</SelectItem>
              <SelectItem value="likes">Most Liked</SelectItem>
              <SelectItem value="sales">Best Selling</SelectItem>
            </SelectContent>
          </Select>

{/* Designs Grid/List */}
      {filteredDesigns.length === 0 ? (
        <div className="text-center py-12">
          <div className="text-gray-400 mb-4">
            <Search className="h-16 w-16 mx-auto" />
          </div>
          <h3 className="text-lg font-semibold mb-2">No designs found</h3>
          <p className="text-gray-600 mb-6">
            {searchQuery ? "Try adjusting your search terms" : "Start creating your first design"}
          </p>
          <Button asChild>
            <Link href="/design-studio">Create Your First Design</Link>
          </Button>
        </div>
      ) : (
        <div className={viewMode === "grid" ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" : "space-y-4"}>
          {filteredDesigns.map((design) => (
            <Card key={design.id} className="group hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                {viewMode === "grid" ? (
                  <>
                    <div className="relative overflow-hidden rounded-t-lg">
                      <Image
                        src={design.image || "/placeholder.svg"}
                        alt={design.name}
                        width={300}
                        height={300}
                        className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute top-3 left-3 flex space-x-2">
                        {design.isPublic ? (
                          <Badge className="bg-green-100 text-green-800">
                            <Globe className="h-3 w-3 mr-1" />
                            Public
                          </Badge>
                        ) : (
                          <Badge variant="secondary">
                            <Lock className="h-3 w-3 mr-1" />
                            Private
                          </Badge>
                        )}
                        {design.editableByOthers && (
                          <Badge className="bg-purple-100 text-purple-800">
                            <Users className="h-3 w-3 mr-1" />
                            Community Editable
                          </Badge>
                        )}
                      </div>
                      <div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center space-x-2">
                        <Button size="sm" variant="secondary" asChild>
                          <Link href={`/design-studio?design=${design.id}`}>
                            <Edit className="h-4 w-4 mr-1" />
                            Edit
                          </Link>
                        </Button>
                        <Button size="sm" variant="secondary" asChild>
                          <Link href={`/design-preview/${design.id}`}>
                            <Eye className="h-4 w-4 mr-1" />
                            View
                          </Link>
                        </Button>
                      </div>
                    </div>
                    <div className="p-4">
                      <div className="flex items-start justify-between mb-2">
                        <h3 className="font-semibold text-lg line-clamp-1">{design.name}</h3>
                        <Dialog>
                          <DialogTrigger asChild>
                            <Button variant="ghost" size="sm">
                              •••
                            </Button>
                          </DialogTrigger>
                          <DialogContent>
                            <DialogHeader>
                              <DialogTitle>Design Actions</DialogTitle>
                            </DialogHeader>
                            <div className="space-y-2">
                              <Button variant="outline" className="w-full justify-start bg-transparent" asChild>
                                <Link href={`/design-studio?design=${design.id}`}>
                                  <Edit className="h-4 w-4 mr-2" />
                                  Edit Design
                                </Link>
                              </Button>
                              <Button
                                variant="outline"
                                className="w-full justify-start bg-transparent"
                                onClick={() => addToCart(design)}
                              >
                                <ShoppingCart className="h-4 w-4 mr-2" />
                                Add to Cart
                              </Button>
                              <Button
                                variant="outline"
                                className="w-full justify-start bg-transparent"
                                onClick={() => shareDesign(design)}
                              >
                                <Share2 className="h-4 w-4 mr-2" />
                                Share Design
                              </Button>
                              <Button
                                variant="outline"
                                className="w-full justify-start bg-transparent"
                                onClick={() => togglePublicStatus(design.id)}
                              >
                                {design.isPublic ? (
                                  <>
                                    <Lock className="h-4 w-4 mr-2" />
                                    Make Private
                                  </>
                                ) : (
                                  <>
                                    <Globe className="h-4 w-4 mr-2" />
                                    Make Public
                                  </>
                                )}
                              </Button>
                              <Button
                                variant="outline"
                                className="w-full justify-start bg-transparent"
                                onClick={() => toggleEditableByOthers(design.id)}
                              >
                                {design.editableByOthers ? (
                                  <>
                                    <Lock className="h-4 w-4 mr-2" />
                                    Disable Community Editing
                                  </>
                                ) : (
                                  <>
                                    <Unlock className="h-4 w-4 mr-2" />
                                    Allow Community Editing
                                  </>
                                )}
                              </Button>
                              <Button
                                variant="outline"
                                className="w-full justify-start text-red-600 hover:text-red-700 bg-transparent"
                                onClick={() => deleteDesign(design.id)}
                              >
                                <Trash2 className="h-4 w-4 mr-2" />
                                Delete Design
                              </Button>
                            </div>
                          </DialogContent>
                        </Dialog>
                      </div>
                      <p className="text-gray-600 text-sm mb-3 line-clamp-2">{design.description}</p>
                      <div className="flex flex-wrap gap-1 mb-3">
                        {design.tags.slice(0, 3).map((tag) => (
                          <Badge key={tag} variant="secondary" className="text-xs">
                            {tag}
                          </Badge>
                        ))}
                        {design.tags.length > 3 && (
                          <Badge variant="secondary" className="text-xs">
                            +{design.tags.length - 3}
                          </Badge>
                        )}
                      </div>
                      <div className="flex items-center justify-between text-sm text-gray-500">
                        <div className="flex items-center space-x-4">
                          <span className="flex items-center">
                            <Eye className="h-4 w-4 mr-1" />
                            {design.views}
                          </span>
                          <span className="flex items-center">
                            <Heart className="h-4 w-4 mr-1" />
                            {design.likes}
                          </span>
                          <span className="flex items-center">
                            <TrendingUp className="h-4 w-4 mr-1" />
                            {design.sales}
                          </span>
                          {design.editableByOthers && (
                            <span className="flex items-center text-purple-600">
                              <Users className="h-4 w-4 mr-1" />
                              Collaborative
                            </span>
                          )}
                        </div>
                        <span className="flex items-center">
                          <Calendar className="h-4 w-4 mr-1" />
                          {new Date(design.updatedAt).toLocaleDateString()}
                        </span>
                      </div>
                    </div>
                  </>
                ) : (
                  <div className="flex items-center p-4 space-x-4">
                    <Image
                      src={design.image || "/placeholder.svg"}
                      alt={design.name}
                      width={80}
                      height={80}
                      className="rounded-lg object-cover"
                    />
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center space-x-2 mb-1">
                        <h3 className="font-semibold text-lg truncate">{design.name}</h3>
                        {design.isPublic ? (
                          <Badge className="bg-green-100 text-green-800">
                            <Globe className="h-3 w-3 mr-1" />
                            Public
                          </Badge>
                        ) : (
                          <Badge variant="secondary">
                            <Lock className="h-3 w-3 mr-1" />
                            Private
                          </Badge>
                        )}
                        {design.editableByOthers && (
                          <Badge className="bg-purple-100 text-purple-800">
                            <Users className="h-3 w-3 mr-1" />
                            Community Editable
                          </Badge>
                        )}
                      </div>
                      <p className="text-gray-600 text-sm mb-2 line-clamp-1">{design.description}</p>
                      <div className="flex items-center space-x-4 text-sm text-gray-500">
                        <span className="flex items-center">
                          <Eye className="h-4 w-4 mr-1" />
                          {design.views}
                        </span>
                        <span className="flex items-center">
                          <Heart className="h-4 w-4 mr-1" />
                          {design.likes}
                        </span>
                        <span className="flex items-center">
                          <TrendingUp className="h-4 w-4 mr-1" />
                          {design.sales}
                        </span>
                        <span className="flex items-center">
                          <Calendar className="h-4 w-4 mr-1" />
                          {new Date(design.updatedAt).toLocaleDateString()}
                        </span>
                      </div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Button size="sm" variant="outline" asChild>
                        <Link href={`/design-studio?design=${design.id}`}>
                          <Edit className="h-4 w-4" />
                        </Link>
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => addToCart(design)}>
                        <ShoppingCart className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => shareDesign(design)}>
                        <Share2 className="h-4 w-4" />
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => deleteDesign(design.id)}
                        className="text-red-600 hover:text-red-700"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}</article></body></html>