112:"ExplicitChatIdProvider" 113:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"$112"] 114:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"SWRDataProvider"] 116:[] 117:[["b_e2RTQTxoLKp",null],["b_XXRxaSDZeVl",null],["b_r1LytZ6CzAu",null]] 118:[["b_e2RTQTxoLKp",{"templateVersionId":null,"templateCanonId":null}],["b_XXRxaSDZeVl",{"templateVersionId":null,"templateCanonId":null}],["b_r1LytZ6CzAu",{"templateVersionId":null,"templateCanonId":null}]] 119:[["Z4eiwpUt1Ed","$D2025-04-14T05:19:30.441Z"],["b_unDzKHLwcRj","$D2025-04-14T05:22:35.914Z"],["b_wvEpF9OAfig","$D2025-04-14T05:55:37.792Z"],["b_G7ypcPSNa5F","$D2025-04-14T06:05:13.355Z"],["b_e2RTQTxoLKp","$D2025-04-15T03:25:52.765Z"],["b_M0rzr1KHJnO","$D2025-04-15T03:27:50.156Z"],["b_XXRxaSDZeVl","$D2025-04-15T03:29:00.751Z"],["b_r1LytZ6CzAu","$D2025-04-15T03:32:05.155Z"]] 11a:[["b_e2RTQTxoLKp",false],["b_XXRxaSDZeVl",false],["b_r1LytZ6CzAu",false]] 11b:[["b_e2RTQTxoLKp","$undefined"],["b_XXRxaSDZeVl","$undefined"],["b_r1LytZ6CzAu","$undefined"]] 11c:[["b_e2RTQTxoLKp",null],["b_XXRxaSDZeVl",null],["b_r1LytZ6CzAu",null]] 11d:[["b_e2RTQTxoLKp",true],["b_XXRxaSDZeVl",true],["b_r1LytZ6CzAu",true]] 11e:[["b_e2RTQTxoLKp",true],["b_XXRxaSDZeVl",true],["b_r1LytZ6CzAu",true]] 11f:[] 120:Ta1798,[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" isEdit="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/countdown-timer.tsx" isMerged="true" isEdit="true" "use client" import { useEffect, useState } from "react" interface CountdownTimerProps { hours: number minutes: number seconds: number } export default function CountdownTimer({ hours, minutes, seconds }: CountdownTimerProps) { const [timeLeft, setTimeLeft] = useState({ hours, minutes, seconds, }) useEffect(() => { const timer = setInterval(() => { setTimeLeft((prevTime) => { const newSeconds = prevTime.seconds - 1 const newMinutes = newSeconds < 0 ? prevTime.minutes - 1 : prevTime.minutes const newHours = newMinutes < 0 ? prevTime.hours - 1 : prevTime.hours return { hours: newHours < 0 ? 0 : newHours, minutes: newMinutes < 0 ? 59 : newMinutes, seconds: newSeconds < 0 ? 59 : newSeconds, } }) }, 1000) return () => clearInterval(timer) }, []) return (

{String(timeLeft.hours).padStart(2, "0")} : {String(timeLeft.minutes).padStart(2, "0")} : {String(timeLeft.seconds).padStart(2, "0")}

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" isEdit="true" import Link from "next/link" import { Package, ShoppingCart, Users, TrendingUp, DollarSign, AlertCircle } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" export default function AdminDashboard() { return (

Dashboard

Total Revenue

₹45,231.89

+20.1% from last month

Orders

+573

+201 since last week

Products

1,324

+42 new products this month

Active Customers

+2350

+180 since last month

Overview

Sales chart will appear here

Recent Sales You made 265 sales this month.

{[1, 2, 3, 4, 5].map((i) => (

Customer #{i}

customer{i}@example.com

+₹{(Math.random() * 1000).toFixed(2)}

))}

Low Stock Alerts Products that need to be restocked soon.

{[1, 2, 3].map((i) => (

Product #{i}

Only 3 items left

))}

Recent Activities Latest actions in the admin panel.

{[ "New product added", "Order #1234 fulfilled", "Customer account created", "Discount code created", "Product stock updated", ].map((activity, i) => (

{activity}

{Math.floor(Math.random() * 24)} hours ago

))}

Quick Actions Frequently used admin actions.

) } [V0_FILE]typescriptreact:file="app/admin/products/loading.tsx" isFixed="true" isMerged="true" isEdit="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Package } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { login } from "@/lib/auth" import { useAuth } from "@/contexts/auth-context" export default function AdminLoginPage() { const router = useRouter() const { user, isAdminUser } = useAuth() const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) useEffect(() => { // Redirect to admin dashboard if already logged in as admin if (isAdminUser) { router.push("/admin") } }, [isAdminUser, router]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { const result = await login(email, password) if (result.success) { if (result.user.role === "admin") { router.push("/admin") } else { setError("You don't have admin privileges") } } else { setError(result.error) } } catch (error) { setError("An error occurred during login") } finally { setIsLoading(false) } } return (

Halal Deals Admin

Enter your credentials to access the admin panel

{error &&

{error}

}

Use the following credentials for demo:

Email: jayedshaikh51@gmail.com

Password: password

) } [V0_FILE]typescriptreact:file="app/sitemap.ts" isMerged="true" isEdit="true" import type { MetadataRoute } from "next" import { getProducts } from "@/lib/products" export default function sitemap(): MetadataRoute.Sitemap { const baseUrl = "https://halaldeals.com" // Main pages const routes = [ { url: baseUrl, lastModified: new Date(), }, { url: `${baseUrl}/deals`, lastModified: new Date(), }, { url: `${baseUrl}/login`, lastModified: new Date(), }, { url: `${baseUrl}/register`, lastModified: new Date(), }, ] // Category pages const categories = [ "islamic-books", "azan-watches", "personal-care", "modest-clothing", "electronics", "fragrances", "foods", ] const categoryRoutes = categories.map((category) => ({ url: `${baseUrl}/category/${category}`, lastModified: new Date(), })) // Product pages const products = getProducts() const productRoutes = products.map((product) => ({ url: `${baseUrl}/product/${product.id}`, lastModified: new Date(), })) return [...routes, ...categoryRoutes, ...productRoutes] } [V0_FILE]typescriptreact:file="public/logo.svg" isMerged="true" isEdit="true" [V0_FILE]typescriptreact:file="app/deals/page.tsx" isMerged="true" isEdit="true" import Image from "next/image" import Link from "next/link" import { Clock } from "lucide-react" import { Button } from "@/components/ui/button" import CountdownTimer from "@/components/countdown-timer" import { getProducts } from "@/lib/products" export default function DealsPage() { // Get products with discounts const dealProducts = getProducts().filter((product) => product.discount && product.discount !== "New") return (

Today's Deals

Special offers with limited-time discounts

Ends in:

{dealProducts.map((product) => (

{product.discount && (

{product.discount}

)}

{product.name}

{product.discountedPrice ? ( <> ₹{product.discountedPrice.toFixed(2)} ₹{product.price.toFixed(2)} ) : ( ₹{product.price.toFixed(2)} )}

))}

) } [V0_FILE]typescriptreact:file="app/forgot-password/page.tsx" isQuickEdit="true" isMerged="true" isEdit="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Package, ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { resetPassword } from "@/lib/auth" export default function ForgotPasswordPage() { const [email, setEmail] = useState("") const [isSubmitted, setIsSubmitted] = useState(false) const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") // Basic email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { setError("Please enter a valid email address") setIsLoading(false) return } try { // In a real app, this would be an API call const result = await resetPassword(email) if (result.success) { setIsSubmitted(true) } else { setError(result.error || "Failed to send reset link") } } catch (err) { setError("An error occurred. Please try again.") } finally { setIsLoading(false) } } return (

Halal Deals

Reset your password

{isSubmitted ? "Check your email for a reset link" : "Enter your email and we'll send you a reset link"}

{error &&

{error}

}

{isSubmitted ? (

We've sent a password reset link to {email}. Please check your email and follow the instructions to reset your password.

If you don't see the email, check your spam folder or try again.

) : ( )}

Back to login

) } [V0_FILE]typescriptreact:file="app/api/send-order-notification/route.ts" isMerged="true" isEdit="true" import { NextResponse } from "next/server" import { supabase } from "@/lib/supabase" export async function POST(request: Request) { try { const { orderId, userId } = await request.json() // Fetch order details const { data: order } = await supabase.from("orders").select("*").eq("id", orderId).single() // Fetch user details const { data: user } = await supabase.from("users").select("*").eq("id", userId).single() // Fetch order items const { data: items } = await supabase .from("order_items") .select(` *, products (*) `) .eq("order_id", orderId) // In a real app, you would use a service like SendGrid, Mailgun, etc. // For now, we'll just log it console.log(` New Order Notification --------------------- Order ID: ${orderId} Customer: ${user.name} (${user.email}) Total Amount: ₹${order.total_amount} Status: ${order.status} Shipping Address: ${order.shipping_address} Payment Method: ${order.payment_method} Items: ${items .map( (item) => ` - ${item.products.name} x ${item.quantity} @ ₹${item.price} each `, ) .join("")} `) // Send email to admin (abujarshaikh039@gmail.com) // This would use an email service in a real app return NextResponse.json({ success: true }) } catch (error) { console.error("Error sending notification:", error) return NextResponse.json({ success: false, error: "Failed to send notification" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/account/orders/page.tsx" isMerged="true" isEdit="true" "use client" import { useEffect, useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Package, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { useAuth } from "@/contexts/auth-context" import { fetchUserOrders } from "@/lib/supabase" export default function OrdersPage() { const router = useRouter() const { user } = useAuth() const [orders, setOrders] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const loadOrders = async () => { if (!user) { // Redirect to login if not logged in router.push("/login") return } setLoading(true) const userOrders = await fetchUserOrders(user.id) setOrders(userOrders) setLoading(false) } loadOrders() }, [user, router]) if (loading) { return

} return (

My Orders

View and track your orders

{orders.length === 0 ? (

No orders yet

You haven't placed any orders yet. Start shopping to place your first order.

) : ( orders.map((order) => (

Order #{order.id} Placed on {new Date(order.created_at).toLocaleDateString()}

₹{order.total_amount.toFixed(2)}

{order.status}

{order.payment_method === "cod" ? "Cash on Delivery" : order.payment_method === "upi" ? "UPI Payment" : "Credit/Debit Card"}

)) )}

) } [V0_FILE]typescriptreact:file="app/admin/orders/page.tsx" isMerged="true" isEdit="true" "use client" import Link from "next/link" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Package, Search, ArrowUpDown, MoreHorizontal, Eye, CheckCircle, XCircle, TruckIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useAuth } from "@/contexts/auth-context" import { fetchAllOrders, updateOrderStatus } from "@/lib/supabase" import { useToast } from "@/hooks/use-toast" export default function AdminOrdersPage() { const router = useRouter() const { user, isAdminUser } = useAuth() const { toast } = useToast() const [orders, setOrders] = useState([]) const [filteredOrders, setFilteredOrders] = useState([]) const [loading, setLoading] = useState(true) const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [processingOrder, setProcessingOrder] = useState(null) useEffect(() => { const loadOrders = async () => { if (!user || !isAdminUser) { // Redirect if not admin router.push("/admin/login") return } setLoading(true) const allOrders = await fetchAllOrders() setOrders(allOrders) setFilteredOrders(allOrders) setLoading(false) } loadOrders() }, [user, isAdminUser, router]) useEffect(() => { // Filter orders based on search query and status filter let filtered = orders if (searchQuery) { filtered = filtered.filter( (order) => order.id.toString().includes(searchQuery) || order.users.name.toLowerCase().includes(searchQuery.toLowerCase()) || order.users.email.toLowerCase().includes(searchQuery.toLowerCase()), ) } if (statusFilter !== "all") { filtered = filtered.filter((order) => order.status === statusFilter) } setFilteredOrders(filtered) }, [orders, searchQuery, statusFilter]) const handleStatusChange = async (orderId: number, status: string) => { setProcessingOrder(orderId) try { const success = await updateOrderStatus(orderId, status) if (success) { // Update local state setOrders((prev) => prev.map((order) => (order.id === orderId ? { ...order, status } : order))) toast({ title: "Status updated", description: `Order #${orderId} status has been updated to ${status}.`, }) } else { throw new Error("Failed to update status") } } catch (error) { console.error("Error updating status:", error) toast({ title: "Error", description: "Failed to update order status. Please try again.", variant: "destructive", }) } finally { setProcessingOrder(null) } } const getStatusBadgeVariant = (status: string) => { switch (status) { case "pending": return "default" case "processing": return "secondary" case "shipped": return "info" case "delivered": return "success" case "cancelled": return "destructive" default: return "outline" } } if (loading) { return

} return (

Orders

setSearchQuery(e.target.value)} />

Order ID Customer Date

Total

Status Payment Actions {filteredOrders.length === 0 ? ( No orders found. ) : ( filteredOrders.map((order) => ( #{order.id}

{order.users.name} {order.users.email}

{new Date(order.created_at).toLocaleDateString()} ₹{order.total_amount.toFixed(2)} {order.status.charAt(0).toUpperCase() + order.status.slice(1)} {order.payment_method === "cod" ? "Cash on Delivery" : order.payment_method === "upi" ? "UPI Payment" : "Card"} View Details handleStatusChange(order.id, "processing")} disabled={ order.status === "processing" || order.status === "delivered" || order.status === "cancelled" } > Mark as Processing handleStatusChange(order.id, "shipped")} disabled={ order.status === "shipped" || order.status === "delivered" || order.status === "cancelled" } > Mark as Shipped handleStatusChange(order.id, "delivered")} disabled={order.status === "delivered" || order.status === "cancelled"} > Mark as Delivered handleStatusChange(order.id, "cancelled")} disabled={order.status === "delivered" || order.status === "cancelled"} className="text-destructive" > Cancel Order )) )}

) } [V0_FILE]typescriptreact:file="app/admin/orders/loading.tsx" isFixed="true" isMerged="true" isEdit="true" export default function Loading() { return null } [V0_FILE]sql:file="db-setup.sql" isMerged="true" isEdit="true" -- Create users table CREATE TABLE IF NOT EXISTS users ( id UUID PRIMARY KEY, email TEXT UNIQUE NOT NULL, name TEXT NOT NULL, role TEXT NOT NULL DEFAULT 'customer', created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); -- Create products table CREATE TABLE IF NOT EXISTS products ( id SERIAL PRIMARY KEY, name TEXT NOT NULL, price DECIMAL(10, 2) NOT NULL, discounted_price DECIMAL(10, 2), image_url TEXT, discount TEXT, description TEXT, category TEXT NOT NULL, in_stock BOOLEAN NOT NULL DEFAULT TRUE, featured BOOLEAN NOT NULL DEFAULT FALSE, date_added TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); -- Create cart_items table CREATE TABLE IF NOT EXISTS cart_items ( id SERIAL PRIMARY KEY, user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, product_id INTEGER NOT NULL REFERENCES products(id) ON DELETE CASCADE, quantity INTEGER NOT NULL DEFAULT 1, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, UNIQUE(user_id, product_id) ); -- Create orders table CREATE TABLE IF NOT EXISTS orders ( id SERIAL PRIMARY KEY, user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE, total_amount DECIMAL(10, 2) NOT NULL, status TEXT NOT NULL DEFAULT 'pending', shipping_address TEXT NOT NULL, payment_method TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); -- Create order_items table CREATE TABLE IF NOT EXISTS order_items ( id SERIAL PRIMARY KEY, order_id INTEGER NOT NULL REFERENCES orders(id) ON DELETE CASCADE, product_id INTEGER NOT NULL REFERENCES products(id) ON DELETE CASCADE, quantity INTEGER NOT NULL, price DECIMAL(10, 2) NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); -- Insert sample products INSERT INTO products (name, price, discounted_price, image_url, discount, description, category, in_stock, featured) VALUES ('RIYAZUL QURAN 13 LINE (ARABIC/HINDI) HB BIG', 550.0, NULL, '/placeholder.svg?height=200&width=200', NULL, 'High-quality Quran with Arabic text and Hindi translation in a beautiful hardbound edition.', 'Islamic Books', TRUE, TRUE), ('Premium Eid evelope with Pack of 5 or 10 (Black)', 249.0, NULL, '/placeholder.svg?height=200&width=200', '-25%', 'Elegant black Eid envelopes with gold detailing, perfect for Eidi gifts.', 'Islamic Books', TRUE, FALSE), ('My touch and feel alif baa taa', 2600.0, 1949.0, '/placeholder.svg?height=200&width=200', NULL, 'Interactive children''s book for learning Arabic alphabet with tactile elements.', 'Islamic Books', TRUE, FALSE), ('Unleash Your Child''s Love for the Prophet: Discover "The Prophet Described" – Stunning Islamic Picture Book for Kids', 2340.0, 1559.0, '/placeholder.svg?height=200&width=200', '-33%', 'Beautifully illustrated book teaching children about the Prophet Muhammad (PBUH).', 'Islamic Books', TRUE, TRUE), ('Plantable Seed Ecofriendly Rabbi Zidni Ilma Pencils Box ( Pack of 5 Pencils)', 194.0, 155.0, '/placeholder.svg?height=200&width=200', '-20%', 'Eco-friendly pencils that can be planted after use to grow into plants. Contains seeds in the base.', 'Islamic Books', TRUE, FALSE), ('Al-Harameen Azan Clock (HA-4001) Beautiful Adhan, Accurate Prayers, Qibla, Dual Calendar & More', 15000.0, 12200.0, '/placeholder.svg?height=200&width=200', '-5%', 'Digital prayer clock with beautiful Adhan sounds, accurate prayer times, qibla direction, and dual Hijri/Gregorian calendar.', 'Azan Watches', TRUE, TRUE), ('Al-Harameen Azan Clock (HA-7009) Enhance Your Faith Journey with the All-Encompassing', 7000.0, 5350.0, '/placeholder.svg?height=200&width=200', '-8%', 'Comprehensive digital prayer clock with multiple features to enhance your daily prayers.', 'Azan Watches', TRUE, FALSE), ('Al-Harameen Azan Clock with Charger (HA-5522) Enhance Your Prayer Experience', 30000.0, 28700.0, '/placeholder.svg?height=200&width=200', '-20%', 'Premium prayer clock with rechargeable battery and advanced features for an enhanced prayer experience.', 'Azan Watches', TRUE, TRUE), ('Al Harameen Azan Clock HA-5115 | Adhan Reminders, Dual Calendars, Custom Alarms', 9500.0, 8275.0, '/placeholder.svg?height=200&width=200', NULL, 'Feature-rich prayer clock with customizable alarms and dual calendar system.', 'Azan Watches', TRUE, FALSE), ('Al Harameen Azan Clock HA-4003 | Complete Adhan, Taqweem Options, Remote Control', 10500.0, 9700.0, '/placeholder.svg?height=200&width=200', '-13%', 'Advanced prayer clock with remote control and multiple Taqweem options for accurate prayer times.', 'Azan Watches', TRUE, TRUE), ('Hafiya Soap Musk – Moisturizing & Antibacterial', 80.0, NULL, '/placeholder.svg?height=200&width=200', NULL, 'Natural musk-scented soap with moisturizing and antibacterial properties.', 'Personal Care', TRUE, FALSE), ('Hafiya Soap Rose – Purifying and Nourishing', 80.0, NULL, '/placeholder.svg?height=200&width=200', NULL, 'Rose-scented natural soap that purifies and nourishes the skin.', 'Personal Care', TRUE, FALSE), ('Hafiya Sandal Soap – Natural Antiseptic & Moisturizer', 80.0, NULL, '/placeholder.svg?height=200&width=200', NULL, 'Sandalwood soap with natural antiseptic properties that also moisturizes the skin.', 'Personal Care', TRUE, FALSE), ('Hafiya Soap Turmeric – Natural Skincare for Glowing Skin', 80.0, NULL, '/placeholder.svg?height=200&width=200', 'New', 'Turmeric-infused natural soap that promotes glowing, healthy skin.', 'Personal Care', TRUE, TRUE), ('Ashtapathy Mud Shampoo 200ml – Purifying, Sulphate & Paraben Free', 80.0, NULL, '/placeholder.svg?height=200&width=200', '-22%', 'Natural mud shampoo that purifies the scalp and hair without harmful chemicals.', 'Personal Care', TRUE, FALSE); -- Create a trigger to ensure abujarshaikh039@gmail.com is always an admin CREATE OR REPLACE FUNCTION ensure_admin_role() RETURNS TRIGGER AS $$ BEGIN IF NEW.email = 'abujarshaikh039@gmail.com' AND NEW.role != 'admin' THEN NEW.role := 'admin'; END IF; RETURN NEW; END; $$ LANGUAGE plpgsql; CREATE TRIGGER ensure_admin_role_trigger BEFORE INSERT OR UPDATE ON users FOR EACH ROW EXECUTE FUNCTION ensure_admin_role(); [V0_FILE]typescriptreact:file="components/ui/toast-notification.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { X } from "lucide-react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const toastVariants = cva( "fixed flex items-center justify-between p-4 rounded-md shadow-md transition-all duration-300 ease-in-out", { variants: { variant: { default: "bg-background text-foreground border", success: "bg-green-100 text-green-800 border-green-200", error: "bg-red-100 text-red-800 border-red-200", warning: "bg-yellow-100 text-yellow-800 border-yellow-200", info: "bg-blue-100 text-blue-800 border-blue-200", }, position: { topRight: "top-4 right-4", topLeft: "top-4 left-4", bottomRight: "bottom-4 right-4", bottomLeft: "bottom-4 left-4", topCenter: "top-4 left-1/2 -translate-x-1/2", bottomCenter: "bottom-4 left-1/2 -translate-x-1/2", }, }, defaultVariants: { variant: "default", position: "topRight", }, }, ) export interface ToastProps extends VariantProps { message: string description?: string duration?: number onClose?: () => void } export function Toast({ message, description, variant, position, duration = 5000, onClose }: ToastProps) { const [isVisible, setIsVisible] = useState(true) useEffect(() => { const timer = setTimeout(() => { setIsVisible(false) if (onClose) setTimeout(onClose, 300) // Allow time for exit animation }, duration) return () => clearTimeout(timer) }, [duration, onClose]) if (!isVisible) return null return (

{message}

{description &&

{description}

}

) } export function ToastContainer({ children }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="contexts/toast-context.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true" "use client" import type React from "react" import { createContext, useContext, useState, useCallback } from "react" import { ToastContainer, type ToastProps } from "@/components/ui/toast-notification" import { Toast as ToastComponent } from "@/components/ui/toast-notification" type ToastContextType = { showToast: (props: Omit) => void hideToast: (id: string) => void } const ToastContext = createContext({ showToast: () => {}, hideToast: () => {}, }) export const useToastContext = () => useContext(ToastContext) type Toast = ToastProps & { id: string } export function ToastProvider({ children }: { children: React.ReactNode }) { const [toasts, setToasts] = useState([]) const showToast = useCallback((props: Omit) => { const id = Math.random().toString(36).substring(2, 9) setToasts((prev) => [...prev, { ...props, id }]) }, []) const hideToast = useCallback((id: string) => { setToasts((prev) => prev.filter((toast) => toast.id !== id)) }, []) return ( {children} {toasts.map((toast) => ( hideToast(toast.id)} /> ))} ) } [V0_FILE]sql:file="db-setup-settings.sql" isMerged="true" isEdit="true" -- Create settings table CREATE TABLE IF NOT EXISTS settings ( id SERIAL PRIMARY KEY, store_settings JSONB NOT NULL DEFAULT '{}', email_settings JSONB NOT NULL DEFAULT '{}', user_settings JSONB NOT NULL DEFAULT '{}', product_settings JSONB NOT NULL DEFAULT '{}', payment_settings JSONB NOT NULL DEFAULT '{}', created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); -- Insert default settings INSERT INTO settings ( store_settings, email_settings, user_settings, product_settings, payment_settings ) VALUES ( '{ "storeName": "Halal Deals", "storeDescription": "Your Premier Halal Shopping Destination", "storeEmail": "info@halaldeals.com", "storePhone": "+91 9876543210", "storeAddress": "123 Main Street, Mumbai, India", "currency": "INR", "taxRate": "18", "enableFreeShipping": true, "freeShippingThreshold": "1000", "shippingFee": "100" }', '{ "enableOrderConfirmation": true, "enableShippingNotifications": true, "enableAdminNotifications": true, "adminEmail": "abujarshaikh039@gmail.com", "emailFooter": "Thank you for shopping with Halal Deals. If you have any questions, please contact our customer service." }', '{ "enableGuestCheckout": false, "enableUserRegistration": true, "requireEmailVerification": false, "defaultUserRole": "customer" }', '{ "enableOutOfStockPurchase": false, "showOutOfStockProducts": true, "enableProductReviews": true, "enableProductRatings": true, "defaultProductSorting": "newest" }', '{ "enableCashOnDelivery": true, "enableUpiPayment": true, "enableCardPayment": true, "enableWalletPayment": false, "testMode": true }' ) ON CONFLICT (id) DO NOTHING; [V0_FILE]typescriptreact:file="app/account/page.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import Image from "next/image" import { User, Package, ShoppingBag, CreditCard, LogOut, Camera } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useAuth } from "@/contexts/auth-context" import { useToast } from "@/hooks/use-toast" import { logout } from "@/lib/auth" import { getUserProfile, updateUserProfile } from "@/lib/user" import { fetchUserOrders } from "@/lib/supabase" import { uploadUserAvatar } from "@/lib/image-upload" import ProfileForm from "@/components/profile-form" import AddressBook from "@/components/address-book" export default function AccountPage() { const router = useRouter() const { user } = useAuth() const { toast } = useToast() const [profile, setProfile] = useState(null) const [orders, setOrders] = useState([]) const [loading, setLoading] = useState(true) const [uploadingAvatar, setUploadingAvatar] = useState(false) useEffect(() => { const loadUserData = async () => { if (!user) { router.push("/login?redirect=/account") return } setLoading(true) try { // Fetch user profile const userProfile = await getUserProfile(user.id) setProfile(userProfile) // Fetch user orders const userOrders = await fetchUserOrders(user.id) setOrders(userOrders) } catch (error) { console.error("Error loading user data:", error) toast({ title: "Error", description: "Failed to load your account information. Please try again.", variant: "destructive", }) } finally { setLoading(false) } } loadUserData() }, [user, router, toast]) const handleLogout = async () => { try { await logout() router.push("/") toast({ title: "Logged Out", description: "You have been successfully logged out.", }) } catch (error) { console.error("Error logging out:", error) toast({ title: "Error", description: "Failed to log out. Please try again.", variant: "destructive", }) } } const handleAvatarUpload = async (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file || !user) return setUploadingAvatar(true) try { const avatarUrl = await uploadUserAvatar(user.id, file) // Update user profile with new avatar const updatedProfile = await updateUserProfile(user.id, { avatar_url: avatarUrl }) setProfile(updatedProfile) toast({ title: "Avatar Updated", description: "Your profile picture has been updated successfully.", }) } catch (error) { console.error("Error uploading avatar:", error) toast({ title: "Upload Failed", description: "Failed to upload profile picture. Please try again.", variant: "destructive", }) } finally { setUploadingAvatar(false) } } if (loading) { return (

Loading your account...

) } return (

My Account

Manage your account settings and view your orders

{profile?.avatar_url ? (

) : ( )}

Upload profile picture {uploadingAvatar && (

)}

{profile?.name || user?.email}

{user?.email}

Profile Addresses Recent Orders Profile Information Update your personal information Address Book Manage your saved addresses Recent Orders Review your recent purchases {orders.length === 0 ? (

No orders yet

Once you make a purchase, your orders will appear here.

) : (

{orders.slice(0, 3).map((order) => (

Order #{order.id}

Placed on {new Date(order.created_at).toLocaleDateString()}

₹{order.total_amount.toFixed(2)}

{order.status}

))} {orders.length > 3 && (

)}

) } [V0_FILE]typescriptreact:file="components/profile-form.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { useAuth } from "@/contexts/auth-context" import { useToast } from "@/hooks/use-toast" import { updateUserProfile } from "@/lib/user" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface ProfileFormProps { profile: any setProfile: (profile: any) => void } export default function ProfileForm({ profile, setProfile }: ProfileFormProps) { const { user } = useAuth() const { toast } = useToast() const [formData, setFormData] = useState({ name: profile?.name || "", phone: profile?.phone || "", bio: profile?.bio || "", gender: profile?.gender || "", dob: profile?.dob || "", }) const [isSubmitting, setIsSubmitting] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (value: string, name: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!user) return setIsSubmitting(true) try { const updatedProfile = await updateUserProfile(user.id, formData) setProfile(updatedProfile) toast({ title: "Profile Updated", description: "Your profile information has been updated successfully.", }) } catch (error) { console.error("Error updating profile:", error) toast({ title: "Update Failed", description: "Failed to update your profile. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return (

Your email address cannot be changed

Full Name

Phone Number

Gender

Date of Birth

Bio

</div>

<Button type="submit" className="bg-orange-500 hover:bg-orange-600" disabled={isSubmitting}>
        {isSubmitting ? "Saving..." : "Save Changes"}
      </Button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/address-book.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useAuth } from "@/contexts/auth-context"
import { useToast } from "@/hooks/use-toast"
import { getUserAddresses, addUserAddress, updateUserAddress, deleteUserAddress, setDefaultAddress } from "@/lib/user"
import { Button } from "@/components/ui/button"
import { PlusCircle, Pencil, Trash2, Check, Home, Building, MapPin } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import AddressForm from "@/components/address-form"

export default function AddressBook() {
  const { user } = useAuth()
  const { toast } = useToast()
  const [addresses, setAddresses] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [editingAddress, setEditingAddress] = useState<any>(null)

useEffect(() => {
    const loadAddresses = async () => {
      if (!user) return

setLoading(true)
      try {
        const userAddresses = await getUserAddresses(user.id)
        setAddresses(userAddresses)
      } catch (error) {
        console.error("Error loading addresses:", error)
        toast({
          title: "Error",
          description: "Failed to load your saved addresses. Please try again.",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

loadAddresses()
  }, [user, toast])

const handleAddressSubmit = async (addressData: any) => {
    if (!user) return

try {
      if (editingAddress) {
        // Update existing address
        const updated = await updateUserAddress(user.id, editingAddress.id, addressData)
        setAddresses(addresses.map((addr) => (addr.id === editingAddress.id ? updated : addr)))
        toast({
          title: "Address Updated",
          description: "Your address has been updated successfully.",
        })
      } else {
        // Add new address
        const newAddress = await addUserAddress(user.id, addressData)
        setAddresses([...addresses, newAddress])
        toast({
          title: "Address Added",
          description: "Your new address has been added successfully.",
        })
      }

setShowForm(false)
      setEditingAddress(null)
    } catch (error) {
      console.error("Error saving address:", error)
      toast({
        title: "Error",
        description: "Failed to save your address. Please try again.",
        variant: "destructive",
      })
    }
  }

const handleEditAddress = (address: any) => {
    setEditingAddress(address)
    setShowForm(true)
  }

const handleDeleteAddress = async (addressId: string) => {
    if (!user) return

if (confirm("Are you sure you want to delete this address?")) {
      try {
        await deleteUserAddress(user.id, addressId)
        setAddresses(addresses.filter((addr) => addr.id !== addressId))
        toast({
          title: "Address Deleted",
          description: "Your address has been deleted successfully.",
        })
      } catch (error) {
        console.error("Error deleting address:", error)
        toast({
          title: "Error",
          description: "Failed to delete your address. Please try again.",
          variant: "destructive",
        })
      }
    }
  }

const handleSetDefault = async (addressId: string) => {
    if (!user) return

try {
      await setDefaultAddress(user.id, addressId)
      setAddresses(
        addresses.map((addr) => ({
          ...addr,
          is_default: addr.id === addressId,
        })),
      )
      toast({
        title: "Default Address Set",
        description: "Your default shipping address has been updated.",
      })
    } catch (error) {
      console.error("Error setting default address:", error)
      toast({
        title: "Error",
        description: "Failed to set default address. Please try again.",
        variant: "destructive",
      })
    }
  }

if (loading) {
    return (
      <div className="flex justify-center py-8">
        <div className="h-6 w-6 animate-spin rounded-full border-2 border-solid border-current border-t-transparent"></div>
      </div>
    )
  }

if (showForm) {
    return (
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-medium">{editingAddress ? "Edit Address" : "Add New Address"}</h3>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              setShowForm(false)
              setEditingAddress(null)
            }}
          >
            Cancel
          </Button>
        </div>
        <AddressForm initialData={editingAddress || {}} onSubmit={handleAddressSubmit} />
      </div>
    )
  }

return (
    <div className="space-y-4">
      {addresses.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-8 text-center">
          <MapPin className="h-12 w-12 text-muted-foreground" />
          <h3 className="mt-4 text-lg font-medium">No addresses saved</h3>
          <p className="mt-1 text-sm text-muted-foreground">
            Add your shipping and billing addresses for a faster checkout.
          </p>
          <Button onClick={() => setShowForm(true)} className="mt-4 bg-orange-500 hover:bg-orange-600">
            Add Your First Address
          </Button>
        </div>
      ) : (
        <>
          <div className="flex justify-end">
            <Button
              onClick={() => setShowForm(true)}
              className="flex items-center gap-2 bg-orange-500 hover:bg-orange-600"
            >
              <PlusCircle className="h-4 w-4" />
              Add New Address
            </Button>
          </div>

<div className="grid gap-4 md:grid-cols-2">
            {addresses.map((address) => (
              <Card key={address.id} className="relative">
                <CardContent className="p-4">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-2">
                      {address.type === "home" ? (
                        <Home className="h-4 w-4 text-muted-foreground" />
                      ) : (
                        <Building className="h-4 w-4 text-muted-foreground" />
                      )}
                      <h4 className="font-medium capitalize">{address.type} Address</h4>
                    </div>
                    {address.is_default && <Badge variant="secondary">Default</Badge>}
                  </div>

<div className="mt-2 space-y-1 text-sm">
                    <p className="font-medium">{address.full_name}</p>
                    <p>{address.address_line1}</p>
                    {address.address_line2 && <p>{address.address_line2}</p>}
                    <p>
                      {address.city}, {address.state} {address.postal_code}
                    </p>
                    <p>{address.country}</p>
                    <p className="mt-2">Phone: {address.phone}</p>
                  </div>

<div className="mt-4 flex items-center gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex items-center gap-1"
                      onClick={() => handleEditAddress(address)}
                    >
                      <Pencil className="h-3 w-3" />
                      Edit
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex items-center gap-1 text-destructive"
                      onClick={() => handleDeleteAddress(address.id)}
                    >
                      <Trash2 className="h-3 w-3" />
                      Delete
                    </Button>
                    {!address.is_default && (
                      <Button
                        variant="ghost"
                        size="sm"
                        className="flex items-center gap-1 ml-auto"
                        onClick={() => handleSetDefault(address.id)}
                      >
                        <Check className="h-3 w-3" />
                        Set as Default
                      </Button>
                    )}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/address-form.tsx" isMerged="true" isEdit="true"
"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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface AddressFormProps {
  initialData: any
  onSubmit: (data: any) => void
}

export default function AddressForm({ initialData = {}, onSubmit }: AddressFormProps) {
  const [formData, setFormData] = useState({
    full_name: initialData.full_name || "",
    phone: initialData.phone || "",
    address_line1: initialData.address_line1 || "",
    address_line2: initialData.address_line2 || "",
    city: initialData.city || "",
    state: initialData.state || "",
    postal_code: initialData.postal_code || "",
    country: initialData.country || "India",
    type: initialData.type || "home",
    is_default: initialData.is_default || false,
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

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

const handleSelectChange = (value: string, name: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleRadioChange = (value: string) => {
    setFormData((prev) => ({ ...prev, type: value }))
  }

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

try {
      onSubmit(formData)
    } catch (error) {
      console.error("Error in form submission:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="full_name">Full Name</Label>
        <Input id="full_name" name="full_name" value={formData.full_name} onChange={handleChange} required />
      </div>

<div className="space-y-2">
        <Label htmlFor="phone">Phone Number</Label>
        <Input
          id="phone"
          name="phone"
          value={formData.phone}
          onChange={handleChange}
          placeholder="10-digit mobile number"
          required
        />
      </div>

<div className="space-y-2">
        <Label htmlFor="address_line1">Address Line 1</Label>
        <Input
          id="address_line1"
          name="address_line1"
          value={formData.address_line1}
          onChange={handleChange}
          placeholder="Street address, apartment, etc."
          required
        />
      </div>

<div className="space-y-2">
        <Label htmlFor="address_line2">Address Line 2 (Optional)</Label>
        <Input
          id="address_line2"
          name="address_line2"
          value={formData.address_line2}
          onChange={handleChange}
          placeholder="Landmark, nearby location, etc."
        />
      </div>

<div className="space-y-2">
          <Label htmlFor="state">State</Label>
          <Input id="state" name="state" value={formData.state} onChange={handleChange} required />
        </div>

<div className="space-y-2">
          <Label htmlFor="postal_code">Postal Code</Label>
          <Input
            id="postal_code"
            name="postal_code"
            value={formData.postal_code}
            onChange={handleChange}
            placeholder="6-digit PIN code"
            required
          />
        </div>

<div className="space-y-2">
          <Label htmlFor="country">Country</Label>
          <Select value={formData.country} onValueChange={(value) => handleSelectChange(value, "country")}>
            <SelectTrigger id="country">
              <SelectValue placeholder="Select country" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="India">India</SelectItem>
              <SelectItem value="United States">United States</SelectItem>
              <SelectItem value="United Kingdom">United Kingdom</SelectItem>
              <SelectItem value="Canada">Canada</SelectItem>
              <SelectItem value="Australia">Australia</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="space-y-2">
        <Label>Address Type</Label>
        <RadioGroup value={formData.type} onValueChange={handleRadioChange} className="flex gap-4">
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="home" id="home" />
            <Label htmlFor="home" className="cursor-pointer">
              Home
            </Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="work" id="work" />
            <Label htmlFor="work" className="cursor-pointer">
              Work
            </Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="other" id="other" />
            <Label htmlFor="other" className="cursor-pointer">
              Other
            </Label>
          </div>
        </RadioGroup>
      </div>

<div className="flex justify-end gap-2">
        <Button type="submit" className="bg-orange-500 hover:bg-orange-600" disabled={isSubmitting}>
          {isSubmitting ? "Saving..." : "Save Address"}
        </Button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="lib/user.ts" isQuickEdit="true" isMerged="true" isEdit="true"
import { database, ref, get, set, update, remove } from "./firebase"
import { v4 as uuidv4 } from "uuid"

// Get user profile information
export async function getUserProfile(userId: string) {
  const userProfileRef = ref(database, `userProfiles/${userId}`)
  const snapshot = await get(userProfileRef)

if (!snapshot.exists()) {
    // Profile doesn't exist, create a default one
    return createUserProfile(userId)
  }

return snapshot.val()
}

// Create a new user profile
export async function createUserProfile(userId: string, profileData = {}) {
  const defaultProfile = {
    name: "",
    phone: "",
    bio: "",
    gender: "",
    dob: "",
    createdAt: new Date().toISOString(),
    ...profileData,
  }

await set(ref(database, `userProfiles/${userId}`), defaultProfile)
  return defaultProfile
}

// Update user profile
export async function updateUserProfile(userId: string, profileData: any) {
  const updates = {
    ...profileData,
    updatedAt: new Date().toISOString(),
  }

await update(ref(database, `userProfiles/${userId}`), updates)

// Get the updated profile
  const userProfileRef = ref(database, `userProfiles/${userId}`)
  const snapshot = await get(userProfileRef)
  return snapshot.val()
}

// Get user addresses
export async function getUserAddresses(userId: string) {
  const addressesRef = ref(database, `userAddresses/${userId}`)
  const snapshot = await get(addressesRef)

if (!snapshot.exists()) {
    return []
  }

// Convert Firebase object to array and sort by default status
  const addresses = Object.entries(snapshot.val()).map(([id, data]) => ({
    id,
    ...(data as any),
  }))

// Sort addresses so default address comes first
  return addresses.sort((a, b) => (b.is_default ? 1 : 0) - (a.is_default ? 1 : 0))
}

// Add a new address
export async function addUserAddress(userId: string, addressData: any) {
  // Check if this is the first address
  const addressesRef = ref(database, `userAddresses/${userId}`)
  const snapshot = await get(addressesRef)
  const isFirstAddress = !snapshot.exists() || Object.keys(snapshot.val()).length === 0

// Generate a unique ID for the address
  const addressId = uuidv4()

const newAddress = {
    ...addressData,
    is_default: addressData.is_default || isFirstAddress,
    createdAt: new Date().toISOString(),
  }

await set(ref(database, `userAddresses/${userId}/${addressId}`), newAddress)

// If setting as default, update other addresses
  if (newAddress.is_default && !isFirstAddress) {
    const otherAddresses = Object.entries(snapshot.val()).filter(([id]) => id !== addressId)

for (const [id] of otherAddresses) {
      await update(ref(database, `userAddresses/${userId}/${id}`), {
        is_default: false,
      })
    }
  }

return {
    id: addressId,
    ...newAddress,
  }
}

// Update an existing address
export async function updateUserAddress(userId: string, addressId: string, addressData: any) {
  const updates = {
    ...addressData,
    updatedAt: new Date().toISOString(),
  }

await update(ref(database, `userAddresses/${userId}/${addressId}`), updates)

// If setting as default, update other addresses
  if (addressData.is_default) {
    const addressesRef = ref(database, `userAddresses/${userId}`)
    const snapshot = await get(addressesRef)

if (snapshot.exists()) {
      const otherAddresses = Object.entries(snapshot.val()).filter(([id]) => id !== addressId)

for (const [id] of otherAddresses) {
        await update(ref(database, `userAddresses/${userId}/${id}`), {
          is_default: false,
        })
      }
    }
  }

// Get the updated address
  const addressRef = ref(database, `userAddresses/${userId}/${addressId}`)
  const snapshot = await get(addressRef)
  return {
    id: addressId,
    ...snapshot.val(),
  }
}

// Delete an address
export async function deleteUserAddress(userId: string, addressId: string) {
  // Check if the address is default before deleting
  const addressRef = ref(database, `userAddresses/${userId}/${addressId}`)
  const snapshot = await get(addressRef)
  const isDefault = snapshot.exists() && snapshot.val().is_default

// Delete the address
  await remove(ref(database, `userAddresses/${userId}/${addressId}`))

// If the deleted address was default, set a new default if other addresses exist
  if (isDefault) {
    const addressesRef = ref(database, `userAddresses/${userId}`)
    const allAddresses = await get(addressesRef)

if (allAddresses.exists() && Object.keys(allAddresses.val()).length > 0) {
      // Set the first remaining address as default
      const firstAddressId = Object.keys(allAddresses.val())[0]
      await update(ref(database, `userAddresses/${userId}/${firstAddressId}`), {
        is_default: true,
      })
    }
  }

return true
}

// Set an address as default
export async function setDefaultAddress(userId: string, addressId: string) {
  // Set the target address as default
  await update(ref(database, `userAddresses/${userId}/${addressId}`), {
    is_default: true,
  })

// Set all other addresses as non-default
  const addressesRef = ref(database, `userAddresses/${userId}`)
  const snapshot = await get(addressesRef)

if (snapshot.exists()) {
    const otherAddresses = Object.entries(snapshot.val()).filter(([id]) => id !== addressId)

for (const [id] of otherAddresses) {
      await update(ref(database, `userAddresses/${userId}/${id}`), {
        is_default: false,
      })
    }
  }

return true
}

// Get user payment methods
export async function getUserPaymentMethods(userId: string) {
  const paymentMethodsRef = ref(database, `userPaymentMethods/${userId}`)
  const snapshot = await get(paymentMethodsRef)

if (!snapshot.exists()) {
    return []
  }

// Convert Firebase object to array and sort by default status
  const paymentMethods = Object.entries(snapshot.val()).map(([id, data]) => ({
    id,
    ...(data as any),
  }))

// Sort payment methods so default method comes first
  return paymentMethods.sort((a, b) => (b.is_default ? 1 : 0) - (a.is_default ? 1 : 0))
}
[V0_FILE]typescriptreact:file="components/admin-notification.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Bell } from "lucide-react"
import { useAuth } from "@/contexts/auth-context"
import { getUnreadNotifications, markNotificationAsRead } from "@/lib/admin"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { supabase } from "@/lib/supabaseClient"

export default function AdminNotification() {
  const router = useRouter()
  const { user, isAdminUser } = useAuth()
  const [notifications, setNotifications] = useState<any[]>([])
  const [unreadCount, setUnreadCount] = useState(0)
  const [loading, setLoading] = useState(true)
  const [isClient, setIsClient] = useState(false)

useEffect(() => {
    setIsClient(true)

if (!user || !isAdminUser) return

// Load initial notifications
    const loadNotifications = async () => {
      setLoading(true)
      try {
        const data = await getUnreadNotifications()
        setNotifications(data)
        setUnreadCount(data.filter((n: any) => !n.read_at).length)
      } catch (error) {
        console.error("Error loading notifications:", error)
      } finally {
        setLoading(false)
      }
    }

loadNotifications()

// Set up real-time listener for new notifications
    let notificationsChannel

if (supabase) {
      try {
        notificationsChannel = supabase
          .channel("admin-notifications")
          .on(
            "postgres_changes",
            {
              event: "INSERT",
              schema: "public",
              table: "admin_notifications",
            },
            (payload) => {
              // Add new notification to state
              const newNotification = payload.new as any
              setNotifications((prev) => [newNotification, ...prev])
              setUnreadCount((count) => count + 1)

// Show browser notification if supported
              if (typeof window !== "undefined" && "Notification" in window && Notification.permission === "granted") {
                const title = "New Notification"
                const options = {
                  body: newNotification.message,
                  icon: "/logo.svg",
                }
                new Notification(title, options)
              }
            },
          )
          .subscribe()
      } catch (error) {
        console.error("Error setting up notifications channel:", error)
      }
    }

// Request notification permission
    if (typeof window !== "undefined" && "Notification" in window && Notification.permission === "default") {
      Notification.requestPermission()
    }

return () => {
      // Clean up subscription
      if (supabase && notificationsChannel) {
        supabase.removeChannel(notificationsChannel)
      }
    }
  }, [user, isAdminUser])

const handleNotificationClick = async (notification: any) => {
    if (!notification.read_at) {
      try {
        await markNotificationAsRead(notification.id)
        // Update local state
        setNotifications(
          notifications.map((n) => (n.id === notification.id ? { ...n, read_at: new Date().toISOString() } : n)),
        )
        setUnreadCount((count) => count - 1)
      } catch (error) {
        console.error("Error marking notification as read:", error)
      }
    }

// Navigate to relevant page based on notification type
    if (notification.type === "new_order") {
      router.push(`/admin/orders/${notification.resource_id}`)
    } else if (notification.type === "new_user") {
      router.push("/admin/customers")
    } else if (notification.type === "low_stock") {
      router.push(`/admin/products/${notification.resource_id}`)
    }
  }

// Don't render anything on server-side to prevent hydration errors
  if (!isClient) {
    return null
  }

if (!isAdminUser) return null

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="relative">
          <Bell className="h-5 w-5" />
          {unreadCount > 0 && (
            <Badge
              variant="destructive"
              className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full p-0 text-xs"
            >
              {unreadCount > 9 ? "9+" : unreadCount}
            </Badge>
          )}
          <span className="sr-only">Notifications</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-80">
        <div className="flex items-center justify-between p-4">
          <h3 className="font-medium">Notifications</h3>
          {unreadCount > 0 && <Badge variant="secondary">{unreadCount} unread</Badge>}
        </div>
        <DropdownMenuSeparator />
        <ScrollArea className="h-[300px]">
          {loading ? (
            <div className="flex items-center justify-center p-4">
              <div className="h-5 w-5 animate-spin rounded-full border-2 border-solid border-current border-t-transparent"></div>
            </div>
          ) : notifications.length === 0 ? (
            <div className="p-4 text-center text-sm text-muted-foreground">No notifications</div>
          ) : (
            notifications.map((notification) => (
              <DropdownMenuItem
                key={notification.id}
                className={`flex cursor-pointer flex-col items-start p-4 ${!notification.read_at ? "bg-muted/50" : ""}`}
                onClick={() => handleNotificationClick(notification)}
              >
                <div className="flex w-full items-start justify-between">
                  <span className="font-medium">
                    {notification.type === "new_order" && "New Order"}
                    {notification.type === "new_user" && "New User Registration"}
                    {notification.type === "low_stock" && "Low Stock Alert"}
                  </span>
                  <span className="text-xs text-muted-foreground">
                    {new Date(notification.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                  </span>
                </div>
                <p className="mt-1 text-sm">{notification.message}</p>
                {!notification.read_at && (
                  <Badge variant="default" className="mt-2">
                    New
                  </Badge>
                )}
              </DropdownMenuItem>
            ))
          )}
        </ScrollArea>
        <DropdownMenuSeparator />
        <div className="p-2 text-center">
          <Button
            variant="link"
            className="text-xs text-muted-foreground"
            onClick={() => router.push("/admin/notifications")}
          >
            View All Notifications
          </Button>
        </div>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="app/admin/notifications/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Bell, CheckCircle, Eye, Trash2 } from "lucide-react"
import { useAuth } from "@/contexts/auth-context"
import {
  getAllNotifications,
  markNotificationAsRead,
  deleteNotification,
  markAllNotificationsAsRead,
  deleteAllNotifications,
} from "@/lib/admin"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export default function AdminNotificationsPage() {
  const router = useRouter()
  const { user, isAdminUser } = useAuth()
  const { toast } = useToast()
  const [notifications, setNotifications] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [filter, setFilter] = useState<"all" | "unread" | "read">("all")

useEffect(() => {
    if (!user || !isAdminUser) {
      router.push("/admin/login")
      return
    }

const loadNotifications = async () => {
      setLoading(true)
      try {
        const data = await getAllNotifications()
        setNotifications(data)
      } catch (error) {
        console.error("Error loading notifications:", error)
        toast({
          title: "Error",
          description: "Failed to load notifications. Please try again.",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

loadNotifications()
  }, [user, isAdminUser, router, toast])

const handleMarkAsRead = async (notificationId: string) => {
    try {
      await markNotificationAsRead(notificationId)
      // Update local state
      setNotifications(
        notifications.map((n) => (n.id === notificationId ? { ...n, read_at: new Date().toISOString() } : n)),
      )
      toast({
        title: "Success",
        description: "Notification marked as read.",
      })
    } catch (error) {
      console.error("Error marking notification as read:", error)
      toast({
        title: "Error",
        description: "Failed to mark notification as read.",
        variant: "destructive",
      })
    }
  }

const handleDeleteNotification = async (notificationId: string) => {
    try {
      await deleteNotification(notificationId)
      // Update local state
      setNotifications(notifications.filter((n) => n.id !== notificationId))
      toast({
        title: "Success",
        description: "Notification deleted.",
      })
    } catch (error) {
      console.error("Error deleting notification:", error)
      toast({
        title: "Error",
        description: "Failed to delete notification.",
        variant: "destructive",
      })
    }
  }

const handleMarkAllAsRead = async () => {
    try {
      await markAllNotificationsAsRead()
      // Update local state
      setNotifications(notifications.map((n) => ({ ...n, read_at: n.read_at || new Date().toISOString() })))
      toast({
        title: "Success",
        description: "All notifications marked as read.",
      })
    } catch (error) {
      console.error("Error marking all notifications as read:", error)
      toast({
        title: "Error",
        description: "Failed to mark all notifications as read.",
        variant: "destructive",
      })
    }
  }

const handleDeleteAll = async () => {
    if (confirm("Are you sure you want to delete all notifications? This action cannot be undone.")) {
      try {
        await deleteAllNotifications()
        // Update local state
        setNotifications([])
        toast({
          title: "Success",
          description: "All notifications deleted.",
        })
      } catch (error) {
        console.error("Error deleting all notifications:", error)
        toast({
          title: "Error",
          description: "Failed to delete all notifications.",
          variant: "destructive",
        })
      }
    }
  }

const handleViewNotification = (notification: any) => {
    if (!notification.read_at) {
      handleMarkAsRead(notification.id)
    }

const filteredNotifications = notifications.filter((notification) => {
    if (filter === "unread") return !notification.read_at
    if (filter === "read") return notification.read_at
    return true
  })

const unreadCount = notifications.filter((notification) => !notification.read_at).length

if (loading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="text-center">
          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em]"></div>
          <p className="mt-2">Loading notifications...</p>
        </div>
      </div>
    )
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Bell className="h-6 w-6" />
          <h2 className="text-3xl font-bold tracking-tight">Notifications</h2>
          {unreadCount > 0 && <Badge variant="destructive">{unreadCount} unread</Badge>}
        </div>
        <div className="flex gap-2">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline">
                {filter === "all" && "All Notifications"}
                {filter === "unread" && "Unread Only"}
                {filter === "read" && "Read Only"}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem onClick={() => setFilter("all")}>All Notifications</DropdownMenuItem>
              <DropdownMenuItem onClick={() => setFilter("unread")}>Unread Only</DropdownMenuItem>
              <DropdownMenuItem onClick={() => setFilter("read")}>Read Only</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <Button variant="outline" onClick={handleMarkAllAsRead} disabled={unreadCount === 0}>
            <CheckCircle className="mr-2 h-4 w-4" />
            Mark All as Read
          </Button>
          <Button variant="destructive" onClick={handleDeleteAll} disabled={notifications.length === 0}>
            <Trash2 className="mr-2 h-4 w-4" />
            Delete All
          </Button>
        </div>
      </div>

{filteredNotifications.length === 0 ? (
        <Card className="mt-6">
          <CardContent className="flex flex-col items-center justify-center py-12">
            <Bell className="h-12 w-12 text-muted-foreground" />
            <h3 className="mt-4 text-lg font-medium">No notifications</h3>
            <p className="mt-1 text-sm text-muted-foreground">
              {filter !== "all"
                ? `You don't have any ${filter} notifications.`
                : "You'll see notifications here when there are updates to your store."}
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-4">
          {filteredNotifications.map((notification) => (
            <Card key={notification.id} className={!notification.read_at ? "border-l-4 border-l-orange-500" : ""}>
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-base">
                      {notification.type === "new_order" && "New Order Received"}
                      {notification.type === "new_user" && "New User Registration"}
                      {notification.type === "low_stock" && "Product Low Stock Alert"}
                    </CardTitle>
                    <CardDescription>{new Date(notification.created_at).toLocaleString()}</CardDescription>
                  </div>
                  {!notification.read_at && <Badge>New</Badge>}
                </div>
              </CardHeader>
              <CardContent>
                <p>{notification.message}</p>
                <div className="mt-4 flex justify-end gap-2">
                  <Button variant="outline" size="sm" onClick={() => handleViewNotification(notification)}>
                    <Eye className="mr-2 h-4 w-4" />
                    View
                  </Button>
                  {!notification.read_at && (
                    <Button variant="outline" size="sm" onClick={() => handleMarkAsRead(notification.id)}>
                      <CheckCircle className="mr-2 h-4 w-4" />
                      Mark as Read
                    </Button>
                  )}
                  <Button
                    variant="outline"
                    size="sm"
                    className="text-destructive"
                    onClick={() => handleDeleteNotification(notification.id)}
                  >
                    <Trash2 className="mr-2 h-4 w-4" />
                    Delete
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/products/[id]/route.ts" isMerged="true" isEdit="true"
import { NextResponse } from "next/server"
import { updateProduct, getProductById } from "@/lib/products-db"
import { checkAdminPrivileges } from "@/lib/admin"
import { auth } from "@/lib/firebase"

export async function PATCH(request: Request, { params }: { params: { id: string } }) {
  try {
    const productId = Number.parseInt(params.id)

// Get current user
    const user = auth.currentUser
    if (!user) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

// Check if user is admin
    const isAdmin = await checkAdminPrivileges(user.email || "")
    if (!isAdmin) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 403 })
    }

// Get existing product
    const existingProduct = await getProductById(productId)
    if (!existingProduct) {
      return NextResponse.json({ error: "Product not found" }, { status: 404 })
    }

// Get update data from request
    const data = await request.json()

// Update product
    const updatedProduct = await updateProduct(productId, data)

return NextResponse.json(updatedProduct)
  } catch (error) {
    console.error("Error updating product:", error)
    return NextResponse.json({ error: "Failed to update product" }, { status: 500 })
  }
}

export async function DELETE(request: Request, { params }: { params: { id: string } }) {
  try {
    const productId = Number.parseInt(params.id)

// Get current user
    const user = auth.currentUser
    if (!user) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

// Check if user is admin
    const isAdmin = await checkAdminPrivileges(user.email || "")
    if (!isAdmin) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 403 })
    }

// Delete product
    await fetch(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/products?id=eq.${productId}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}`,
        Prefer: "return=minimal",
      },
    })

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error deleting product:", error)
    return NextResponse.json({ error: "Failed to delete product" }, { status: 500 })
  }
}
[V0_FILE]sql:file="db-setup-admin.sql" isMerged="true" isEdit="true"
-- Create admin notifications table
CREATE TABLE IF NOT EXISTS admin_notifications (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  type VARCHAR(50) NOT NULL, -- e.g., 'new_order', 'new_user', 'low_stock'
  message TEXT NOT NULL,
  resource_id TEXT, -- ID of the related resource, e.g., order ID or product ID
  read_at TIMESTAMP WITH TIME ZONE, -- NULL means unread
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create product images table
CREATE TABLE IF NOT EXISTS product_images (
  id SERIAL PRIMARY KEY,
  product_id INTEGER NOT NULL REFERENCES products(id) ON DELETE CASCADE,
  image_url TEXT NOT NULL,
  is_primary BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create user profiles table
CREATE TABLE IF NOT EXISTS user_profiles (
  id SERIAL PRIMARY KEY,
  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  name VARCHAR(255),
  phone VARCHAR(20),
  bio TEXT,
  gender VARCHAR(20),
  dob DATE,
  avatar_url TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create user addresses table
CREATE TABLE IF NOT EXISTS user_addresses (
  id SERIAL PRIMARY KEY,
  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  full_name VARCHAR(255) NOT NULL,
  phone VARCHAR(20) NOT NULL,
  address_line1 TEXT NOT NULL,
  address_line2 TEXT,
  city VARCHAR(100) NOT NULL,
  state VARCHAR(100) NOT NULL,
  postal_code VARCHAR(20) NOT NULL,
  country VARCHAR(100) NOT NULL DEFAULT 'India',
  type VARCHAR(20) NOT NULL DEFAULT 'home', -- 'home', 'work', 'other'
  is_default BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Add stock_quantity column to products table if it doesn't exist
ALTER TABLE products ADD COLUMN IF NOT EXISTS stock_quantity INTEGER DEFAULT 100;

-- Create triggers for admin notifications

-- Trigger for new orders
CREATE OR REPLACE FUNCTION notify_admin_new_order() RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO admin_notifications (type, message, resource_id)
  VALUES ('new_order', 'New order #' || NEW.id || ' has been placed for ₹' || NEW.total_amount, NEW.id::TEXT);
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER trigger_notify_admin_new_order
AFTER INSERT ON orders
FOR EACH ROW
EXECUTE FUNCTION notify_admin_new_order();

-- Trigger for new users
CREATE OR REPLACE FUNCTION notify_admin_new_user() RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO admin_notifications (type, message, resource_id)
  VALUES ('new_user', 'New user registered: ' || NEW.email, NEW.id::TEXT);
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER trigger_notify_admin_new_user
AFTER INSERT ON users
FOR EACH ROW
EXECUTE FUNCTION notify_admin_new_user();

-- Trigger for low stock
CREATE OR REPLACE FUNCTION notify_admin_low_stock() RETURNS TRIGGER AS $$
BEGIN
  IF NEW.stock_quantity < 10 AND NEW.in_stock = TRUE THEN
    INSERT INTO admin_notifications (type, message, resource_id)
    VALUES ('low_stock', 'Product "' || NEW.name || '" is running low on stock (' || NEW.stock_quantity || ' remaining).', NEW.id::TEXT);
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER trigger_notify_admin_low_stock
AFTER UPDATE OF stock_quantity ON products
FOR EACH ROW
WHEN (NEW.stock_quantity < 10 AND NEW.in_stock = TRUE)
EXECUTE FUNCTION notify_admin_low_stock();
[V0_FILE]typescriptreact:file="lib/admin.ts" isQuickEdit="true" isMerged="true" isEdit="true"
import { database, ref, push, get, set, update, remove } from "./firebase"

// Function to get all unread notifications
export async function getUnreadNotifications() {
  const notificationsRef = ref(database, "adminNotifications")
  const snapshot = await get(notificationsRef)

if (!snapshot.exists()) {
    return []
  }

return Object.entries(snapshot.val())
    .map(([id, data]) => ({
      id,
      ...(data as any),
    }))
    .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
    .slice(0, 10)
}

// Function to get all notifications
export async function getAllNotifications() {
  const notificationsRef = ref(database, "adminNotifications")
  const snapshot = await get(notificationsRef)

if (!snapshot.exists()) {
    return []
  }

return Object.entries(snapshot.val())
    .map(([id, data]) => ({
      id,
      ...(data as any),
    }))
    .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
}

// Function to mark a notification as read
export async function markNotificationAsRead(notificationId: string) {
  await update(ref(database, `adminNotifications/${notificationId}`), {
    read_at: new Date().toISOString(),
  })

return true
}

// Function to mark all notifications as read
export async function markAllNotificationsAsRead() {
  const notificationsRef = ref(database, "adminNotifications")
  const snapshot = await get(notificationsRef)

if (!snapshot.exists()) {
    return true
  }

const updates = {}

Object.entries(snapshot.val()).forEach(([id, data]: [string, any]) => {
    if (!data.read_at) {
      updates[`${id}/read_at`] = new Date().toISOString()
    }
  })

await update(ref(database, "adminNotifications"), updates)

return true
}

// Function to delete a notification
export async function deleteNotification(notificationId: string) {
  await remove(ref(database, `adminNotifications/${notificationId}`))
  return true
}

// Function to delete all notifications
export async function deleteAllNotifications() {
  await remove(ref(database, "adminNotifications"))
  return true
}

// Function to create a new notification
export async function createAdminNotification(data: {
  type: string
  message: string
  resource_id?: string | number
}) {
  const notificationsRef = ref(database, "adminNotifications")
  const newNotificationRef = push(notificationsRef)

await set(newNotificationRef, {
    type: data.type,
    message: data.message,
    resource_id: data.resource_id ? String(data.resource_id) : null,
    read_at: null,
    created_at: new Date().toISOString(),
  })

return true
}

// Function to get store statistics
export async function getStoreStatistics() {
  // Get orders
  const ordersRef = ref(database, "orders")
  const ordersSnapshot = await get(ordersRef)

// Get products
  const productsRef = ref(database, "products")
  const productsSnapshot = await get(productsRef)

// Get users
  const usersRef = ref(database, "userProfiles")
  const usersSnapshot = await get(usersRef)

let totalRevenue = 0
  let orderCount = 0
  let productCount = 0
  let userCount = 0

// Calculate total revenue and order count
  if (ordersSnapshot.exists()) {
    const orders = Object.values(ordersSnapshot.val()) as any[]
    orderCount = orders.length

// Only count non-cancelled orders for revenue
    totalRevenue = orders
      .filter((order) => order.status !== "cancelled")
      .reduce((sum, order) => sum + Number(order.total_amount), 0)
  }

// Get product count
  if (productsSnapshot.exists()) {
    productCount = Object.keys(productsSnapshot.val()).length
  }

// Get user count
  if (usersSnapshot.exists()) {
    userCount = Object.keys(usersSnapshot.val()).length
  }

return {
    totalRevenue,
    orderCount,
    productCount,
    userCount,
  }
}

// Function to get recent orders
export async function getRecentOrders(limit = 5) {
  const ordersRef = ref(database, "orders")
  const snapshot = await get(ordersRef)

if (!snapshot.exists()) {
    return []
  }

const orders = Object.entries(snapshot.val()).map(([id, orderData]) => ({
    id,
    ...(orderData as any),
  }))

// Sort by created_at desc
  orders.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())

// Get user data for each order
  const ordersWithUsers = await Promise.all(
    orders.slice(0, limit).map(async (order) => {
      const userRef = ref(database, `users/${order.user_id}`)
      const userSnapshot = await get(userRef)

return {
        ...order,
        users: userSnapshot.exists() ? userSnapshot.val() : null,
      }
    }),
  )

return ordersWithUsers
}

// Function to get low stock products
export async function getLowStockProducts() {
  const productsRef = ref(database, "products")
  const snapshot = await get(productsRef)

if (!snapshot.exists()) {
    return []
  }

return Object.entries(snapshot.val())
    .map(([id, data]) => ({
      id,
      ...(data as any),
    }))
    .filter((product) => product.stock_quantity < 10 && product.in_stock)
}

// Function to check admin privileges
export async function checkAdminPrivileges(email: string) {
  // Check if email is admin email
  if (email === "jayedshaikh51@gmail.com") {
    return true
  }

// Otherwise check if user has admin role
  const usersRef = ref(database, "users")
  const usersSnapshot = await get(usersRef)

if (!usersSnapshot.exists()) {
    return false
  }

const users = Object.values(usersSnapshot.val()) as any[]
  const user = users.find((u) => u.email === email)

return user?.role === "admin"
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { User, Phone, Mail, MapPin, Edit, Package } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useAuth } from "@/contexts/auth-context"
import { getUserProfile } from "@/lib/user"
import { getUserOrders } from "@/lib/checkout"
import { useToast } from "@/hooks/use-toast"
import { Separator } from "@/components/ui/separator"
import Link from "next/link"

export default function ProfilePage() {
  const router = useRouter()
  const { user } = useAuth()
  const { toast } = useToast()
  const [profile, setProfile] = useState<any>(null)
  const [orders, setOrders] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const loadUserData = async () => {
      if (!user) {
        toast({
          title: "Login Required",
          description: "Please login to view your profile",
          variant: "warning",
        })
        router.push("/login?redirect=/profile")
        return
      }

setLoading(true)
      try {
        // Fetch user profile
        const userProfile = await getUserProfile(user.uid)
        setProfile(userProfile)

// Fetch user orders
        const userOrders = await getUserOrders(user.uid)
        setOrders(userOrders)
      } catch (error) {
        console.error("Error loading user data:", error)
        toast({
          title: "Error",
          description: "Failed to load your profile information. Please try again.",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

loadUserData()
  }, [user, router, toast])

if (loading) {
    return (
      <div className="container flex min-h-[400px] items-center justify-center">
        <div className="text-center">
          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em]"></div>
          <p className="mt-2">Loading your profile...</p>
        </div>
      </div>
    )
  }

return (
    <div className="container px-4 py-8 md:py-12">
      <h1 className="text-2xl font-bold md:text-3xl">My Profile</h1>
      <p className="mt-2 text-muted-foreground">Manage your account settings and view your orders</p>

<div className="mt-8 grid gap-8 md:grid-cols-[240px_1fr]">
        <div className="space-y-6">
          <div className="flex flex-col items-center">
            <div className="relative h-32 w-32 overflow-hidden rounded-full border-4 border-muted bg-muted">
              {profile?.avatar_url ? (
                <Image
                  src={profile.avatar_url || "/placeholder.svg"}
                  alt="Profile picture"
                  fill
                  className="object-cover"
                />
              ) : (
                <User className="h-full w-full p-6 text-muted-foreground" />
              )}
            </div>
            <h2 className="mt-4 text-xl font-semibold">{profile?.name || user?.email?.split("@")[0]}</h2>
            <p className="text-sm text-muted-foreground">{user?.email}</p>

<Button variant="outline" size="sm" className="mt-4">
              <Edit className="mr-2 h-4 w-4" />
              Edit Profile
            </Button>
          </div>

<div className="space-y-1">
            <h3 className="text-sm font-medium">Contact Information</h3>
            {profile?.phone && (
              <div className="flex items-center gap-2 text-sm">
                <Phone className="h-4 w-4 text-muted-foreground" />
                <span>{profile.phone}</span>
              </div>
            )}
            <div className="flex items-center gap-2 text-sm">
              <Mail className="h-4 w-4 text-muted-foreground" />
              <span>{user?.email}</span>
            </div>
          </div>
        </div>

<div>
          <Tabs defaultValue="orders">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="orders">My Orders</TabsTrigger>
              <TabsTrigger value="addresses">My Addresses</TabsTrigger>
            </TabsList>

<TabsContent value="orders" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Order History</CardTitle>
                  <CardDescription>View your recent purchases</CardDescription>
                </CardHeader>
                <CardContent>
                  {orders.length === 0 ? (
                    <div className="flex flex-col items-center justify-center py-8 text-center">
                      <div className="rounded-full bg-muted p-3">
                        <Package className="h-8 w-8 text-muted-foreground" />
                      </div>
                      <h3 className="mt-4 text-lg font-medium">No orders yet</h3>
                      <p className="mt-1 text-sm text-muted-foreground">
                        Once you make a purchase, your orders will appear here.
                      </p>
                      <Button asChild className="mt-4 bg-orange-500 hover:bg-orange-600">
                        <Link href="/">Shop Now</Link>
                      </Button>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {orders.map((order) => (
                        <div key={order.id} className="rounded-md border p-4">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="font-medium">Order #{order.id}</p>
                              <p className="text-sm text-muted-foreground">
                                Placed on {new Date(order.created_at).toLocaleDateString()}
                              </p>
                            </div>
                            <div className="text-right">
                              <p className="font-medium">₹{order.total_amount.toFixed(2)}</p>
                              <p className="text-sm capitalize text-muted-foreground">{order.status}</p>
                            </div>
                          </div>
                          <div className="mt-4 flex justify-end">
                            <Button variant="outline" size="sm" asChild>
                              <Link href={`/order-confirmation/${order.id}`}>View Details</Link>
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="addresses" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Saved Addresses</CardTitle>
                  <CardDescription>Manage your shipping addresses</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {profile?.addresses && profile.addresses.length > 0 ? (
                      profile.addresses.map((address: any, index: number) => (
                        <div key={index} className="rounded-md border p-4">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                              <MapPin className="h-4 w-4 text-muted-foreground" />
                              <p className="font-medium capitalize">{address.type} Address</p>
                            </div>
                            {address.is_default && (
                              <span className="rounded-full bg-orange-100 px-2 py-1 text-xs font-medium text-orange-800">
                                Default
                              </span>
                            )}
                          </div>
                          <div className="mt-2 space-y-1 text-sm">
                            <p>{address.full_name}</p>
                            <p>{address.address_line1}</p>
                            {address.address_line2 && <p>{address.address_line2}</p>}
                            <p>
                              {address.city}, {address.state} {address.postal_code}
                            </p>
                            <p>Phone: {address.phone}</p>
                          </div>
                          <div className="mt-4 flex justify-end gap-2">
                            <Button variant="outline" size="sm">
                              Edit
                            </Button>
                            <Button variant="outline" size="sm" className="text-destructive">
                              Delete
                            </Button>
                          </div>
                        </div>
                      ))
                    ) : (
                      <div className="flex flex-col items-center justify-center py-8 text-center">
                        <div className="rounded-full bg-muted p-3">
                          <MapPin className="h-8 w-8 text-muted-foreground" />
                        </div>
                        <h3 className="mt-4 text-lg font-medium">No addresses saved</h3>
                        <p className="mt-1 text-sm text-muted-foreground">
                          Add shipping addresses for faster checkout.
                        </p>
                        <Button className="mt-4 bg-orange-500 hover:bg-orange-600">Add New Address</Button>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/product-upload.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Upload, X, AlertCircle } from "lucide-react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { uploadProductImage } from "@/lib/image-upload"
import { useToast } from "@/hooks/use-toast"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

interface ProductUploadProps {
  onImageUpload: (imageUrl: string) => void
  existingImage?: string
}

export default function ProductUpload({ onImageUpload, existingImage }: ProductUploadProps) {
  const [isUploading, setIsUploading] = useState(false)
  const [previewUrl, setPreviewUrl] = useState<string | null>(existingImage || null)
  const [error, setError] = useState<string | null>(null)
  const { toast } = useToast()

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

// Create a preview
    const objectUrl = URL.createObjectURL(file)
    setPreviewUrl(objectUrl)

setIsUploading(true)
    setError(null)

try {
      console.log("Uploading product image via API route")

// Upload via server API route
      const imageUrl = await uploadProductImage(0, file) // 0 is a placeholder ID
      console.log("Image uploaded successfully:", imageUrl)

// Call the callback with the image URL
      onImageUpload(imageUrl)

toast({
        title: "Image uploaded",
        description: "Your image has been uploaded successfully.",
      })
    } catch (error: any) {
      console.error("Error uploading image:", error)
      setError(error.message || "Failed to upload image. Please try again.")
      toast({
        title: "Upload failed",
        description: "There was a problem uploading your image. Please try again.",
        variant: "destructive",
      })

// Remove preview on error
      if (previewUrl && !existingImage) {
        URL.revokeObjectURL(previewUrl)
        setPreviewUrl(null)
      }
    } finally {
      setIsUploading(false)
    }
  }

const handleRemoveImage = () => {
    if (previewUrl && !existingImage) {
      URL.revokeObjectURL(previewUrl)
    }
    setPreviewUrl(null)
    setError(null)
    onImageUpload("")
  }

return (
    <div className="space-y-4">
      {error && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

{previewUrl ? (
        <div className="relative aspect-square w-full overflow-hidden rounded-lg border">
          <Image src={previewUrl || "/placeholder.svg"} alt="Product preview" fill className="object-cover" />
          <Button
            variant="destructive"
            size="icon"
            className="absolute right-2 top-2 h-8 w-8 rounded-full"
            onClick={handleRemoveImage}
            type="button"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      ) : (
        <label className="flex aspect-square w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed bg-muted/30 transition-colors hover:bg-muted/50">
          <div className="flex flex-col items-center gap-1 text-center">
            <Upload className="h-10 w-10 text-muted-foreground" />
            <span className="text-sm font-medium">Upload Image</span>
            <span className="text-xs text-muted-foreground">{isUploading ? "Uploading..." : "Click to browse"}</span>
          </div>
          <input type="file" accept="image/*" className="hidden" onChange={handleFileChange} disabled={isUploading} />
        </label>
      )}

{isUploading && (
        <div className="flex items-center justify-center">
          <div className="h-5 w-5 animate-spin rounded-full border-2 border-solid border-current border-t-transparent"></div>
          <span className="ml-2 text-sm">Uploading image...</span>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/url-image-upload.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import Image from "next/image"
import { LinkIcon, X, AlertCircle, Loader2, ShieldAlert } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { validateImageUrl, isTrustedImageSource } from "@/lib/image-validation"

interface UrlImageUploadProps {
  onImageUrlConfirmed: (imageUrl: string) => void
  existingImageUrl?: string
  className?: string
}

export default function UrlImageUpload({ onImageUrlConfirmed, existingImageUrl, className = "" }: UrlImageUploadProps) {
  const [imageUrl, setImageUrl] = useState<string>(existingImageUrl || "")
  const [previewUrl, setPreviewUrl] = useState<string>(existingImageUrl || "")
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [error, setError] = useState<string | null>(null)
  const [warning, setWarning] = useState<string | null>(null)
  const [isValidImage, setIsValidImage] = useState<boolean>(!!existingImageUrl)

const checkImageUrl = async (url: string) => {
    if (!url || !url.trim()) {
      setError("Please enter an image URL")
      setIsValidImage(false)
      return false
    }

setIsLoading(true)
    setError(null)
    setWarning(null)

try {
      // Check if the URL is from a trusted source
      const isTrusted = isTrustedImageSource(url)
      if (!isTrusted) {
        setWarning("This image is from an untrusted source. It may not display correctly or could pose security risks.")
      }

// Validate the image URL
      const isValid = await validateImageUrl(url)

if (isValid) {
        setIsValidImage(true)
        setPreviewUrl(url)
        return true
      } else {
        setError("The URL does not point to a valid image or the image cannot be accessed")
        setIsValidImage(false)
        return false
      }
    } catch (error) {
      console.error("Error validating image URL:", error)
      setError("Failed to validate image URL")
      setIsValidImage(false)
      return false
    } finally {
      setIsLoading(false)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const isValid = await checkImageUrl(imageUrl)
    if (isValid) {
      onImageUrlConfirmed(imageUrl)
    }
  }

const handleClear = () => {
    setImageUrl("")
    setPreviewUrl("")
    setIsValidImage(false)
    setError(null)
    setWarning(null)
    onImageUrlConfirmed("")
  }

return (
    <div className={`space-y-4 ${className}`}>
      <form onSubmit={handleSubmit} className="space-y-2">
        <div className="flex items-center gap-2">
          <Input
            type="url"
            placeholder="Enter image URL (https://...)"
            value={imageUrl}
            onChange={(e) => setImageUrl(e.target.value)}
            className="flex-1"
          />
          <Button type="submit" disabled={isLoading}>
            {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <LinkIcon className="h-4 w-4 mr-2" />}
            {isLoading ? "Checking..." : "Fetch"}
          </Button>
        </div>
        {error && (
          <Alert variant="destructive" className="py-2">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle className="text-sm">Error</AlertTitle>
            <AlertDescription className="text-xs">{error}</AlertDescription>
          </Alert>
        )}
        {warning && (
          <Alert variant="warning" className="py-2 border-orange-500/50 text-orange-500">
            <ShieldAlert className="h-4 w-4" />
            <AlertTitle className="text-sm">Warning</AlertTitle>
            <AlertDescription className="text-xs">{warning}</AlertDescription>
          </Alert>
        )}
      </form>

{isValidImage && previewUrl && (
        <div className="relative aspect-square w-full overflow-hidden rounded-lg border">
          <Image
            src={previewUrl || "/placeholder.svg"}
            alt="Image preview"
            fill
            className="object-cover"
            sizes="(max-width: 768px) 100vw, 300px"
          />
          <Button
            variant="destructive"
            size="icon"
            className="absolute right-2 top-2 h-8 w-8 rounded-full"
            onClick={handleClear}
          >
            <X className="h-4 w-4" />
            <span className="sr-only">Remove image</span>
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isMerged="true" isEdit="true"
import type React from "react"
import { cn } from "@/lib/utils"

function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/product-image-upload.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent } from "@/components/ui/card"
import SupabaseImageUpload from "@/components/supabase-image-upload"
import EnhancedUrlImageUpload from "@/components/enhanced-url-image-upload"

interface ProductImageUploadProps {
  onImageSelected: (imageData: { url: string; needsProxy?: boolean; type: "file" | "url" }) => void
  existingImageUrl?: string
  existingImageType?: "file" | "url"
  existingNeedsProxy?: boolean
  className?: string
}

export default function ProductImageUpload({
  onImageSelected,
  existingImageUrl,
  existingImageType = "file",
  existingNeedsProxy = false,
  className = "",
}: ProductImageUploadProps) {
  const [activeTab, setActiveTab] = useState<string>(existingImageType || "file")

// Handle file upload completion
  const handleFileUploadComplete = (imageUrl: string) => {
    onImageSelected({
      url: imageUrl,
      type: "file",
    })
  }

// Handle URL image confirmation
  const handleUrlImageConfirmed = (imageUrl: string, needsProxy = false) => {
    onImageSelected({
      url: imageUrl,
      needsProxy,
      type: "url",
    })
  }

return (
    <Card className={className}>
      <CardContent className="p-4">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="file">Upload File</TabsTrigger>
            <TabsTrigger value="url">Image URL</TabsTrigger>
          </TabsList>

<TabsContent value="url" className="mt-4">
            <EnhancedUrlImageUpload
              onImageUrlConfirmed={handleUrlImageConfirmed}
              existingImageUrl={activeTab === "url" ? existingImageUrl : undefined}
              existingNeedsProxy={existingNeedsProxy}
            />
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/enhanced-url-image-upload.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Image from "next/image"
import { LinkIcon, X, AlertCircle, Loader2, ShieldAlert, Check, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { validateImageUrl, isTrustedImageSource, getImageDisplayUrl } from "@/lib/image-validation"
import { Skeleton } from "@/components/ui/skeleton"

interface EnhancedUrlImageUploadProps {
  onImageUrlConfirmed: (imageUrl: string, needsProxy?: boolean) => void
  existingImageUrl?: string
  existingNeedsProxy?: boolean
  className?: string
}

export default function EnhancedUrlImageUpload({
  onImageUrlConfirmed,
  existingImageUrl,
  existingNeedsProxy = false,
  className = "",
}: EnhancedUrlImageUploadProps) {
  const [imageUrl, setImageUrl] = useState<string>(existingImageUrl || "")
  const [displayUrl, setDisplayUrl] = useState<string>(
    existingImageUrl ? getImageDisplayUrl(existingImageUrl, existingNeedsProxy) : "",
  )
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [isValidating, setIsValidating] = useState<boolean>(false)
  const [error, setError] = useState<string | null>(null)
  const [warning, setWarning] = useState<string | null>(null)
  const [isValidImage, setIsValidImage] = useState<boolean>(!!existingImageUrl)
  const [needsProxy, setNeedsProxy] = useState<boolean>(existingNeedsProxy || false)
  const [imageFormat, setImageFormat] = useState<string>("")
  const [imageLoadError, setImageLoadError] = useState<boolean>(false)

// Initialize with existing image if provided
  useEffect(() => {
    if (existingImageUrl) {
      setImageUrl(existingImageUrl)
      setDisplayUrl(getImageDisplayUrl(existingImageUrl, existingNeedsProxy))
      setIsValidImage(true)
      setNeedsProxy(existingNeedsProxy)
    }
  }, [existingImageUrl, existingNeedsProxy])

// Debounce validation for better UX
  useEffect(() => {
    if (!imageUrl) return

// Skip validation if it's the existing URL
    if (imageUrl === existingImageUrl) return

const timer = setTimeout(() => {
      validateImage(imageUrl, false)
    }, 800)

return () => clearTimeout(timer)
  }, [imageUrl, existingImageUrl])

const validateImage = async (url: string, showLoading = true) => {
    if (!url || !url.trim()) {
      setError("Please enter an image URL")
      setIsValidImage(false)
      return false
    }

if (showLoading) {
      setIsLoading(true)
    }
    setIsValidating(true)
    setError(null)
    setWarning(null)
    setImageLoadError(false)

// Validate the image URL
      const validationResult = await validateImageUrl(url)

if (validationResult.isValid) {
        setIsValidImage(true)
        setNeedsProxy(validationResult.needsProxy || false)
        setImageFormat(validationResult.format || "")

// Set the display URL (either direct or proxied)
        const newDisplayUrl = getImageDisplayUrl(url, validationResult.needsProxy)
        setDisplayUrl(newDisplayUrl)

// If there's a warning message from validation, show it
        if (validationResult.message) {
          setWarning(validationResult.message)
        }

return true
      } else {
        setError(validationResult.message || "The URL does not point to a valid image")
        setIsValidImage(false)
        return false
      }
    } catch (error: any) {
      console.error("Error validating image URL:", error)
      setError("Failed to validate image URL: " + (error.message || "Unknown error"))
      setIsValidImage(false)
      return false
    } finally {
      if (showLoading) {
        setIsLoading(false)
      }
      setIsValidating(false)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const isValid = await validateImage(imageUrl)
    if (isValid) {
      onImageUrlConfirmed(imageUrl, needsProxy)
    }
  }

const handleClear = () => {
    setImageUrl("")
    setDisplayUrl("")
    setIsValidImage(false)
    setError(null)
    setWarning(null)
    setNeedsProxy(false)
    setImageFormat("")
    onImageUrlConfirmed("")
  }

const handleImageLoadError = () => {
    setImageLoadError(true)
    // Don't show error if we're still validating
    if (!isValidating) {
      setError("Failed to load image. The image might be protected or no longer available.")
    }
  }

const handleRetry = () => {
    setImageLoadError(false)
    // Force reload the image by appending a timestamp
    setDisplayUrl(`${displayUrl}${displayUrl.includes("?") ? "&" : "?"}t=${Date.now()}`)
  }

{error && (
          <Alert variant="destructive" className="py-2">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle className="text-sm">Error</AlertTitle>
            <AlertDescription className="text-xs">{error}</AlertDescription>
          </Alert>
        )}

{warning && (
          <Alert className="py-2 border-orange-500/50 text-orange-500">
            <ShieldAlert className="h-4 w-4" />
            <AlertTitle className="text-sm">Warning</AlertTitle>
            <AlertDescription className="text-xs">{warning}</AlertDescription>
          </Alert>
        )}

{isValidImage && !error && (
          <Alert className="py-2 border-green-500/50 text-green-500">
            <Check className="h-4 w-4" />
            <AlertTitle className="text-sm">Valid Image</AlertTitle>
            <AlertDescription className="text-xs">
              {imageFormat ? `Format: ${imageFormat.toUpperCase()}` : "Image validated successfully"}
              {needsProxy && " (using proxy for CORS)"}
            </AlertDescription>
          </Alert>
        )}
      </form>

{isValidImage && displayUrl && (
        <div className="relative aspect-square w-full overflow-hidden rounded-lg border">
          {isValidating && (
            <div className="absolute inset-0 flex items-center justify-center bg-background/80 z-10">
              <Loader2 className="h-8 w-8 animate-spin text-primary" />
            </div>
          )}

{imageLoadError ? (
            <div className="absolute inset-0 flex flex-col items-center justify-center bg-muted p-4 text-center">
              <AlertCircle className="h-10 w-10 text-muted-foreground mb-2" />
              <p className="text-sm font-medium">Failed to load image</p>
              <p className="text-xs text-muted-foreground mb-4">The image might be protected or no longer available</p>
              <Button size="sm" onClick={handleRetry} variant="outline">
                <RefreshCw className="h-4 w-4 mr-2" />
                Retry
              </Button>
            </div>
          ) : (
            <>
              <Image
                src={displayUrl || "/placeholder.svg"}
                alt="Image preview"
                fill
                className="object-contain"
                sizes="(max-width: 768px) 100vw, 300px"
                onError={handleImageLoadError}
                priority
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
            </>
          )}

<Button
            variant="destructive"
            size="icon"
            className="absolute right-2 top-2 h-8 w-8 rounded-full z-20"
            onClick={handleClear}
          >
            <X className="h-4 w-4" />
            <span className="sr-only">Remove image</span>
          </Button>
        </div>
      )}

{!isValidImage && !displayUrl && !isValidating && (
        <div className="aspect-square w-full rounded-lg border border-dashed flex flex-col items-center justify-center p-4 text-center">
          <LinkIcon className="h-10 w-10 text-muted-foreground mb-2" />
          <p className="text-sm font-medium">Enter an image URL above</p>
          <p className="text-xs text-muted-foreground">Supported formats: JPG, PNG, GIF, WebP, SVG</p>
        </div>
      )}

{isValidating && !isValidImage && !displayUrl && (
        <div className="aspect-square w-full">
          <Skeleton className="h-full w-full rounded-lg" />
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" isEdit="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
        warning: "border-orange-500/50 text-orange-500 dark:border-orange-500 [&>svg]:text-orange-500",
        success: "border-green-500/50 text-green-500 dark:border-green-500 [&>svg]:text-green-500",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
  ),
)
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
  ),
)
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="app/new-arrivals/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { ShoppingCart, ChevronRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { getNewArrivals } from "@/lib/products-db"
import ProductImage from "@/components/product-image"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function NewArrivalsPage() {
  const [products, setProducts] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [sortBy, setSortBy] = useState("newest")

useEffect(() => {
    const fetchProducts = async () => {
      setLoading(true)
      try {
        // Get all new arrivals (no limit)
        const newProducts = await getNewArrivals(20)
        setProducts(newProducts)
      } catch (error) {
        console.error("Error fetching new arrivals:", error)
      } finally {
        setLoading(false)
      }
    }

fetchProducts()
  }, [])

// Sort products
  const sortedProducts = [...products].sort((a, b) => {
    switch (sortBy) {
      case "newest":
        return new Date(b.date_added || b.created_at).getTime() - new Date(a.date_added || a.created_at).getTime()
      case "price_low":
        return (a.discounted_price || a.price) - (b.discounted_price || b.price)
      case "price_high":
        return (b.discounted_price || b.price) - (a.discounted_price || a.price)
      case "name_asc":
        return a.name.localeCompare(b.name)
      default:
        return 0
    }
  })

return (
    <div className="container px-4 py-8 md:py-12">
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <Link href="/" className="hover:text-foreground">
          Home
        </Link>
        <ChevronRight className="h-4 w-4" />
        <span className="font-medium text-foreground">New Arrivals</span>
      </div>

<div className="mt-6">
        <h1 className="text-3xl font-bold">New Arrivals</h1>
        <p className="mt-2 text-muted-foreground">
          Discover our latest products, fresh from the warehouse to your home.
        </p>
      </div>

<div className="mt-6 flex items-center justify-between">
        <p className="text-sm text-muted-foreground">Showing {products.length} new products</p>
        <div className="flex items-center gap-2">
          <Select value={sortBy} onValueChange={setSortBy}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Sort by" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="newest">Newest First</SelectItem>
              <SelectItem value="price_low">Price: Low to High</SelectItem>
              <SelectItem value="price_high">Price: High to Low</SelectItem>
              <SelectItem value="name_asc">Name (A-Z)</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

{loading ? (
        <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
          {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
            <div key={i} className="animate-pulse">
              <div className="aspect-square rounded-lg bg-muted"></div>
              <div className="mt-3 space-y-2">
                <div className="h-4 rounded bg-muted"></div>
                <div className="h-4 w-1/2 rounded bg-muted"></div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
          {sortedProducts.length === 0 ? (
            <div className="col-span-full flex min-h-[300px] items-center justify-center rounded-md border border-dashed">
              <div className="text-center">
                <h3 className="text-lg font-medium">No new products found</h3>
                <p className="mt-1 text-sm text-muted-foreground">Check back later for new additions to our catalog.</p>
              </div>
            </div>
          ) : (
            sortedProducts.map((product) => (
              <Link key={product.id} href={`/product/${product.id}`} className="group">
                <div className="relative aspect-square overflow-hidden rounded-lg border bg-background">
                  <ProductImage
                    src={product.image_url || product.imageUrl || "/placeholder.svg?height=300&width=300"}
                    alt={product.name}
                    needsProxy={product.image_needs_proxy}
                    className="transition-transform duration-300 group-hover:scale-105"
                  />
                  <div className="absolute right-2 top-2 rounded-md bg-green-500 px-2 py-1 text-xs font-bold text-white">
                    New
                  </div>
                </div>
                <div className="mt-3">
                  <h3 className="line-clamp-2 font-medium group-hover:text-orange-500">{product.name}</h3>
                  <div className="mt-1 flex items-center gap-2">
                    {product.discounted_price ? (
                      <>
                        <span className="font-semibold">₹{product.discounted_price.toFixed(2)}</span>
                        <span className="text-sm text-muted-foreground line-through">₹{product.price.toFixed(2)}</span>
                      </>
                    ) : (
                      <span className="font-semibold">₹{product.price.toFixed(2)}</span>
                    )}
                  </div>
                  <Button className="mt-3 w-full bg-orange-500 hover:bg-orange-600">
                    <ShoppingCart className="mr-2 h-4 w-4" />
                    Add to Cart
                  </Button>
                </div>
              </Link>
            ))
          )}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Plus, Search, ArrowUpDown, MoreHorizontal, Pencil, Trash2, RefreshCw, Eye } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { getAllProducts, deleteProduct } from "@/lib/products-db"
import ProductImage from "@/components/product-image"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { useToast } from "@/hooks/use-toast"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

export default function ProductsPage() {
  const { toast } = useToast()
  const [products, setProducts] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [sortBy, setSortBy] = useState("newest")
  const [categoryFilter, setCategoryFilter] = useState("all")
  const [refreshing, setRefreshing] = useState(false)
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [productToDelete, setProductToDelete] = useState<any>(null)
  const [deleting, setDeleting] = useState(false)

// Load products
  useEffect(() => {
    loadProducts()
  }, [])

const loadProducts = async () => {
    setLoading(true)
    try {
      const { products } = await getAllProducts()
      console.log("Loaded products:", products)
      setProducts(products)
    } catch (error) {
      console.error("Error loading products:", error)
      toast({
        title: "Error",
        description: "Failed to load products. Please try again.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const refreshProducts = async () => {
    setRefreshing(true)
    await loadProducts()
    setRefreshing(false)
    toast({
      title: "Refreshed",
      description: "Product list has been refreshed",
    })
  }

// Filter and sort products
  const filteredProducts = products
    .filter((product) => {
      // Apply search filter
      const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase())

// Apply category filter
      const matchesCategory = categoryFilter === "all" || product.category === categoryFilter

return matchesSearch && matchesCategory
    })
    .sort((a, b) => {
      // Apply sorting
      switch (sortBy) {
        case "newest":
          return new Date(b.date_added || b.created_at).getTime() - new Date(a.date_added || a.created_at).getTime()
        case "oldest":
          return new Date(a.date_added || a.created_at).getTime() - new Date(b.date_added || b.created_at).getTime()
        case "name_asc":
          return a.name.localeCompare(b.name)
        case "name_desc":
          return b.name.localeCompare(a.name)
        case "price_low":
          return (a.discounted_price || a.price) - (b.discounted_price || b.price)
        case "price_high":
          return (b.discounted_price || b.price) - (a.discounted_price || a.price)
        default:
          return 0
      }
    })

const confirmDeleteProduct = (product: any) => {
    setProductToDelete(product)
    setDeleteDialogOpen(true)
  }

const handleDeleteProduct = async () => {
    if (!productToDelete) return

setDeleting(true)
    try {
      await deleteProduct(productToDelete.id)

// Update the local state
      setProducts(products.filter((product) => product.id !== productToDelete.id))

toast({
        title: "Product Deleted",
        description: `"${productToDelete.name}" has been deleted successfully.`,
      })
    } catch (error) {
      console.error("Error deleting product:", error)
      toast({
        title: "Error",
        description: "Failed to delete product. Please try again.",
        variant: "destructive",
      })
    } finally {
      setDeleting(false)
      setDeleteDialogOpen(false)
      setProductToDelete(null)
    }
  }

// Get unique categories from products
  const categories = ["all", ...new Set(products.map((product) => product.category))]

// Check if a product is new (added in the last 7 days)
  const isNewProduct = (product: any) => {
    const productDate = new Date(product.date_added || product.created_at)
    const sevenDaysAgo = new Date()
    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7)
    return productDate > sevenDaysAgo
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Products</h2>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={refreshProducts} disabled={refreshing}>
            <RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? "animate-spin" : ""}`} />
            Refresh
          </Button>
          <Button asChild className="bg-orange-500 hover:bg-orange-600">
            <Link href="/admin/products/new">
              <Plus className="mr-2 h-4 w-4" />
              Add Product
            </Link>
          </Button>
        </div>
      </div>

<Card>
        <CardHeader className="pb-3">
          <CardTitle>Product Management</CardTitle>
          <CardDescription>Manage your products, add new ones, or edit existing ones.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div className="flex flex-1 items-center gap-2">
              <div className="relative w-full md:w-[300px]">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="Search products..."
                  className="w-full appearance-none pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>

<Select value={categoryFilter} onValueChange={setCategoryFilter}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Category" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((category) => (
                    <SelectItem key={category} value={category}>
                      {category === "all" ? "All Categories" : category}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="flex items-center gap-2">
              <Select value={sortBy} onValueChange={setSortBy}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Sort by" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="newest">Newest First</SelectItem>
                  <SelectItem value="oldest">Oldest First</SelectItem>
                  <SelectItem value="name_asc">Name (A-Z)</SelectItem>
                  <SelectItem value="name_desc">Name (Z-A)</SelectItem>
                  <SelectItem value="price_low">Price (Low to High)</SelectItem>
                  <SelectItem value="price_high">Price (High to Low)</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="mt-6 rounded-md border">
            {loading ? (
              <div className="p-4">
                <div className="space-y-3">
                  {[1, 2, 3, 4, 5].map((i) => (
                    <div key={i} className="flex items-center gap-4">
                      <Skeleton className="h-12 w-12 rounded-md" />
                      <div className="space-y-2">
                        <Skeleton className="h-4 w-[250px]" />
                        <Skeleton className="h-4 w-[200px]" />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[80px]">Image</TableHead>
                    <TableHead>Name</TableHead>
                    <TableHead>Category</TableHead>
                    <TableHead>
                      <div className="flex items-center gap-1">
                        Price
                        <ArrowUpDown className="h-4 w-4" />
                      </div>
                    </TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Added</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredProducts.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={7} className="h-24 text-center">
                        No products found.
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredProducts.map((product) => (
                      <TableRow key={product.id} className={isNewProduct(product) ? "bg-orange-50" : ""}>
                        <TableCell>
                          <div className="relative h-10 w-10 overflow-hidden rounded-md">
                            <ProductImage
                              src={product.image_url || product.imageUrl || "/placeholder.svg"}
                              alt={product.name}
                              needsProxy={product.image_needs_proxy}
                              width={40}
                              height={40}
                            />
                          </div>
                        </TableCell>
                        <TableCell className="font-medium">
                          {product.name}
                          {isNewProduct(product) && (
                            <Badge variant="success" className="ml-2">
                              New
                            </Badge>
                          )}
                        </TableCell>
                        <TableCell>{product.category}</TableCell>
                        <TableCell>
                          {product.discounted_price ? (
                            <div className="flex flex-col">
                              <span>₹{product.discounted_price.toFixed(2)}</span>
                              <span className="text-xs text-muted-foreground line-through">
                                ₹{product.price.toFixed(2)}
                              </span>
                            </div>
                          ) : (
                            <span>₹{product.price.toFixed(2)}</span>
                          )}
                        </TableCell>
                        <TableCell>
                          <Badge variant={product.in_stock ? "default" : "destructive"}>
                            {product.in_stock ? "In Stock" : "Out of Stock"}
                          </Badge>
                        </TableCell>
                        <TableCell>{new Date(product.date_added || product.created_at).toLocaleDateString()}</TableCell>
                        <TableCell className="text-right">
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="icon">
                                <MoreHorizontal className="h-4 w-4" />
                                <span className="sr-only">Open menu</span>
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem asChild>
                                <Link href={`/product/${product.id}`}>
                                  <Eye className="mr-2 h-4 w-4" />
                                  View Product
                                </Link>
                              </DropdownMenuItem>
                              <DropdownMenuItem asChild>
                                <Link href={`/admin/products/edit/${product.id}`}>
                                  <Pencil className="mr-2 h-4 w-4" />
                                  Edit
                                </Link>
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => confirmDeleteProduct(product)}>
                                <Trash2 className="mr-2 h-4 w-4" />
                                Delete
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            )}
          </div>
        </CardContent>
      </Card>

<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure you want to delete this product?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the product
              {productToDelete && <strong> "{productToDelete.name}"</strong>} and remove it from all categories.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDeleteProduct}
              disabled={deleting}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {deleting ? "Deleting..." : "Delete"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" isEdit="true"
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/new-products-section.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { ChevronRight } from "lucide-react"
import { getAllProducts } from "@/lib/products-db"
import ProductCard from "@/components/product-card"
import { Skeleton } from "@/components/ui/skeleton"

export default function NewProductsSection() {
  const [products, setProducts] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    // Get the latest products
    const fetchNewProducts = async () => {
      setLoading(true)
      try {
        const { products } = await getAllProducts({
          sortBy: "date_added_desc",
          limit: 5,
        })
        setProducts(products)
      } catch (error) {
        console.error("Error fetching new products:", error)
      } finally {
        setLoading(false)
      }
    }

fetchNewProducts()
  }, [])

if (loading) {
    return (
      <section className="container px-4 py-8">
        <div className="mb-6 flex items-center justify-between">
          <h2 className="text-2xl font-bold">New Arrivals</h2>
          <Link href="/new-arrivals" className="flex items-center text-sm font-medium hover:underline">
            View All
            <ChevronRight className="ml-1 h-4 w-4" />
          </Link>
        </div>
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
          {[1, 2, 3, 4, 5].map((i) => (
            <div key={i} className="animate-pulse">
              <Skeleton className="aspect-square rounded-lg" />
              <div className="mt-3 space-y-2">
                <Skeleton className="h-4 rounded" />
                <Skeleton className="h-4 w-1/2 rounded" />
              </div>
            </div>
          ))}
        </div>
      </section>
    )
  }

if (products.length === 0) {
    return null
  }

return (
    <section className="container px-4 py-8">
      <div className="mb-6 flex items-center justify-between">
        <h2 className="text-2xl font-bold">New Arrivals</h2>
        <Link href="/new-arrivals" className="flex items-center text-sm font-medium hover:underline">
          View All
          <ChevronRight className="ml-1 h-4 w-4" />
        </Link>
      </div>
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="lib/image-validation.ts" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
/**
 * Gets the appropriate image URL to use (direct or proxied)
 * @param url Original image URL
 * @param needsProxy Whether the image needs to be proxied
 * @returns The URL to use for displaying the image
 */
export function getImageDisplayUrl(url: string, needsProxy = false): string {
  if (!url) return "/placeholder.svg"

// If it's already a data URL or a relative URL, return as is
  if (url.startsWith("data:") || url.startsWith("/")) {
    return url
  }

// If URL is a placeholder.svg with parameters, return as is
  if (url.includes("placeholder.svg")) {
    return url
  }

// If needs proxy, use our image proxy API
  if (needsProxy) {
    return `/api/image-proxy?url=${encodeURIComponent(url)}`
  }

return url
}

/**
 * Validates if a URL points to a valid image
 * @param url The URL to validate
 * @returns Promise that resolves to a validation result object
 */
export async function validateImageUrl(url: string): Promise<{
  isValid: boolean
  message?: string
  proxyUrl?: string
  format?: string
  needsProxy?: boolean
}> {
  // Basic URL validation
  try {
    new URL(url)
  } catch (e) {
    return {
      isValid: false,
      message: "Invalid URL format",
    }
  }

// Check if URL ends with a common image extension
  const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp"]
  const urlLower = url.toLowerCase()
  const hasImageExtension = imageExtensions.some((ext) => urlLower.endsWith(ext))

// Determine image format from URL
  let format = "unknown"
  if (hasImageExtension) {
    format = urlLower.split(".").pop() || "unknown"
  }

// First try with a direct HEAD request to check content type
  try {
    const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 5000) // 5 second timeout

const response = await fetch(url, {
      method: "HEAD",
      signal: controller.signal,
    })

clearTimeout(timeoutId)

if (response.ok) {
      const contentType = response.headers.get("content-type")
      if (contentType && contentType.startsWith("image/")) {
        format = contentType.split("/")[1]
        // If direct access works, we don't need a proxy
        return {
          isValid: true,
          format,
          needsProxy: false,
        }
      }
    }
  } catch (error) {
    // Continue to proxy method if direct access fails
    console.log("Direct HEAD request failed, trying proxy:", error)
  }

// Try validating through our proxy
  try {
    const proxyUrl = `/api/image-proxy?url=${encodeURIComponent(url)}`

// Make a HEAD request to our proxy
    const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 5000) // 5 second timeout

const proxyResponse = await fetch(proxyUrl, {
      method: "HEAD",
      signal: controller.signal,
    })

clearTimeout(timeoutId)

if (proxyResponse.ok) {
      const contentType = proxyResponse.headers.get("content-type")
      if (contentType && contentType.startsWith("image/")) {
        format = contentType.split("/")[1]
        return {
          isValid: true,
          proxyUrl,
          format,
          needsProxy: true,
        }
      } else {
        return {
          isValid: false,
          message: "URL does not point to a valid image",
        }
      }
    } else {
      // If we have an image extension, let's assume it's valid and try with proxy
      if (hasImageExtension) {
        return {
          isValid: true,
          format,
          needsProxy: true,
          message: "Image format detected from URL, but validation failed. Will try with proxy.",
        }
      }

return {
        isValid: false,
        message: `Failed to access image: ${proxyResponse.status} ${proxyResponse.statusText}`,
      }
    }
  } catch (error: any) {
    console.error("Error validating image through proxy:", error)

// If we have an image extension, let's assume it's valid as a fallback
    if (hasImageExtension) {
      return {
        isValid: true,
        format,
        needsProxy: true,
        message: "Image format detected from URL, but validation failed. Will try with proxy.",
      }
    }

return {
      isValid: false,
      message: "Failed to validate image URL: " + (error.message || "Unknown error"),
    }
  }
}

/**
 * Checks if a URL is from a trusted image source
 * This helps with CORS issues and security
 * @param url The URL to check
 * @returns boolean indicating if the source is trusted
 */
export function isTrustedImageSource(url: string): boolean {
  try {
    const { hostname } = new URL(url)

// List of trusted image hosting domains
    const trustedDomains = [
      "images.unsplash.com",
      "i.imgur.com",
      "cdn.pixabay.com",
      "res.cloudinary.com",
      "media.istockphoto.com",
      "img.freepik.com",
      "pexels.com",
      "images.pexels.com",
      "picsum.photos",
      "placekitten.com",
      "placeimg.com",
      "loremflickr.com",
      "amazonaws.com",
      "cloudfront.net",
      "googleusercontent.com",
      "ggpht.com",
      "ytimg.com",
      "twimg.com",
      "fbcdn.net",
      "wikimedia.org",
      "wordpress.com",
      "wp.com",
      "githubusercontent.com",
      "giphy.com",
      "gstatic.com",
      "staticflickr.com",
      "shopify.com",
      "shopifycdn.com",
      "supabase.co",
      "supabase.in",
      "htbsxgiskhklxzwfannu.supabase.co", // Add your Supabase domain
    ]

return trustedDomains.some((domain) => hostname.includes(domain) || hostname.endsWith(`.${domain}`))
  } catch (e) {
    return false
  }
}
[V0_FILE]typescriptreact:file="app/api/image-proxy/route.ts" isMerged="true" isEdit="true"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const imageUrl = searchParams.get("url")

if (!imageUrl) {
    return NextResponse.json({ error: "Missing image URL" }, { status: 400 })
  }

try {
    // Validate URL format
    new URL(imageUrl)

// Fetch the image with a timeout
    const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 10000) // 10 second timeout

const response = await fetch(imageUrl, {
      headers: {
        "User-Agent": "Mozilla/5.0 (compatible; HalalDealsBot/1.0)",
      },
      signal: controller.signal,
    })

clearTimeout(timeoutId)

if (!response.ok) {
      return NextResponse.json(
        {
          error: `Failed to fetch image: ${response.status} ${response.statusText}`,
        },
        { status: response.status },
      )
    }

// Check if it's actually an image
    const contentType = response.headers.get("content-type")
    if (!contentType || !contentType.startsWith("image/")) {
      return NextResponse.json(
        {
          error: "URL does not point to an image",
        },
        { status: 400 },
      )
    }

// Get the image data
    const imageData = await response.arrayBuffer()

// Return the image with appropriate headers
    return new NextResponse(imageData, {
      headers: {
        "Content-Type": contentType,
        "Cache-Control": "public, max-age=86400",
        "Access-Control-Allow-Origin": "*",
      },
    })
  } catch (error: any) {
    console.error("Error proxying image:", error)

// Handle timeout errors specifically
    if (error.name === "AbortError") {
      return NextResponse.json(
        {
          error: "Request timed out while fetching the image",
        },
        { status: 408 },
      )
    }

return NextResponse.json(
      {
        error: "Failed to process image URL: " + (error.message || "Unknown error"),
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="lib/image-storage.ts" isMerged="true" isEdit="true"
// Function to store an image in localStorage
export const storeImage = (key: string, imageUrl: string): void => {
  try {
    if (typeof window !== "undefined") {
      localStorage.setItem(`halal_image_${key}`, imageUrl)
    }
  } catch (error) {
    console.error("Error storing image in localStorage:", error)
  }
}

// Function to retrieve an image from localStorage
export const getStoredImage = (key: string, fallback: string): string => {
  if (typeof window === "undefined") {
    return fallback
  }

try {
    const storedImage = localStorage.getItem(`halal_image_${key}`)
    return storedImage || fallback
  } catch (error) {
    console.error("Error retrieving image from localStorage:", error)
    return fallback
  }
}

// Function to preload and store demo images
export const preloadDemoImages = (): void => {
  if (typeof window === "undefined") {
    return
  }

// Only load if not already loaded
  if (localStorage.getItem("halal_images_loaded")) {
    return
  }

// Demo images (base64 encoded small images or direct URLs)
  const demoImages = {
    logo: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Ja8qrBUJcWJ1vgdd72J1UoIPItFoCi.png", // Using a placeholder logo
    banner1: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Ja8qrBUJcWJ1vgdd72J1UoIPItFoCi.png", // Using a placeholder banner
    banner2: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Ja8qrBUJcWJ1vgdd72J1UoIPItFoCi.png", // Using a placeholder banner
    product: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Ja8qrBUJcWJ1vgdd72J1UoIPItFoCi.png", // Using a placeholder product image
    featured: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Ja8qrBUJcWJ1vgdd72J1UoIPItFoCi.png", // Using a placeholder featured image
  }

// Store demo images
  Object.entries(demoImages).forEach(([key, value]) => {
    storeImage(key, value)
  })

// Mark as loaded
  localStorage.setItem("halal_images_loaded", "true")
}

// Function to get a product image
export const getProductImage = (productId: number | string): string => {
  // For demo purposes, return a placeholder image
  return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Ja8qrBUJcWJ1vgdd72J1UoIPItFoCi.png"
}

// Upload an image to storage
export const uploadImageToStorage = async (file: File, folder: string): Promise<string> => {
  try {
    // For demo purposes, return a placeholder image URL
    return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Ja8qrBUJcWJ1vgdd72J1UoIPItFoCi.png"
  } catch (error) {
    console.error("Error uploading image:", error)
    // Return a placeholder image URL if upload fails
    return "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Ja8qrBUJcWJ1vgdd72J1UoIPItFoCi.png"
  }
}
[V0_FILE]typescriptreact:file="components/product-image.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { AlertCircle, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"

interface ProductImageProps {
  src: string
  alt: string
  className?: string
  width?: number
  height?: number
  priority?: boolean
  objectFit?: "cover" | "contain"
  onLoad?: () => void
  onError?: () => void
  quality?: number
  needsProxy?: boolean
}

export default function ProductImage({
  src,
  alt,
  className = "",
  width,
  height,
  priority = false,
  objectFit = "cover",
  onLoad,
  onError,
  quality = 75,
  needsProxy = false,
}: ProductImageProps) {
  const [isLoading, setIsLoading] = useState(true)
  const [hasError, setHasError] = useState(false)
  const [displayUrl, setDisplayUrl] = useState<string>(src || "/placeholder.svg")

// Update display URL when src changes
  useEffect(() => {
    if (!src) {
      setDisplayUrl("/placeholder.svg")
      return
    }

setDisplayUrl(src)
    setIsLoading(true)
    setHasError(false)
  }, [src])

const handleLoad = () => {
    setIsLoading(false)
    setHasError(false)
    if (onLoad) onLoad()
  }

const handleError = () => {
    // If the main image fails, try the placeholder
    if (displayUrl !== "/placeholder.svg") {
      console.error(`Image failed to load: ${displayUrl}, falling back to placeholder`)
      setDisplayUrl("/placeholder.svg")
    } else {
      setHasError(true)
      setIsLoading(false)
      if (onError) onError()
    }
  }

const handleRetry = () => {
    setIsLoading(true)
    setHasError(false)
    // First try the original URL again
    setDisplayUrl(src || "/placeholder.svg")
  }

// If width and height are provided, use a div with specific dimensions
  if (width && height) {
    return (
      <div className={`relative ${className}`} style={{ width: `${width}px`, height: `${height}px` }}>
        {isLoading && <Skeleton className="absolute inset-0 z-10" />}

{hasError ? (
          <div className="absolute inset-0 flex flex-col items-center justify-center bg-muted p-4 text-center">
            <AlertCircle className="h-8 w-8 text-muted-foreground mb-2" />
            <p className="text-sm font-medium">Failed to load image</p>
            <Button size="sm" onClick={handleRetry} variant="outline" className="mt-2">
              <RefreshCw className="h-4 w-4 mr-2" />
              Retry
            </Button>
          </div>
        ) : (
          <Image
            src={displayUrl || "/placeholder.svg"}
            alt={alt}
            width={width}
            height={height}
            quality={quality}
            className={`${objectFit === "contain" ? "object-contain" : "object-cover"} ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-300`}
            onLoad={handleLoad}
            onError={handleError}
            priority={priority}
            loading={priority ? "eager" : "lazy"}
          />
        )}
      </div>
    )
  }

// Otherwise, use fill mode with aspect ratio
  return (
    <div className={`relative aspect-square ${className}`}>
      {isLoading && <Skeleton className="absolute inset-0 z-10" />}

{hasError ? (
        <div className="absolute inset-0 flex flex-col items-center justify-center bg-muted p-4 text-center">
          <AlertCircle className="h-8 w-8 text-muted-foreground mb-2" />
          <p className="text-sm font-medium">Failed to load image</p>
          <Button size="sm" onClick={handleRetry} variant="outline" className="mt-2">
            <RefreshCw className="h-4 w-4 mr-2" />
            Retry
          </Button>
        </div>
      ) : (
        <Image
          src={displayUrl || "/placeholder.svg"}
          alt={alt}
          fill
          quality={quality}
          className={`${objectFit === "contain" ? "object-contain" : "object-cover"} ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-300`}
          onLoad={handleLoad}
          onError={handleError}
          priority={priority}
          loading={priority ? "eager" : "lazy"}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
      )}
    </div>
  )
}
[V0_FILE]typescript:file="lib/guest-cart.ts" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
// Type definitions
interface GuestCartItem {
  id: string
  product_id: string | number
  quantity: number
  price: number
  products: any
  added_at: string
}

// Get guest cart from localStorage
export function getGuestCart(): GuestCartItem[] {
  if (typeof window === "undefined") return []

try {
    const cartItems = JSON.parse(localStorage.getItem("guest_cart") || "[]")

// Generate IDs for items if they don't have one
    return cartItems.map((item: any) => ({
      ...item,
      id: item.id || `guest-${item.product_id}-${Date.now()}`,
    }))
  } catch (error) {
    console.error("Error fetching guest cart:", error)
    return []
  }
}

// Add item to guest cart
export function addToGuestCart(product: any, quantity: number): boolean {
  try {
    const localCart = getGuestCart()

// Check if product already exists in cart
    const existingItemIndex = localCart.findIndex((item) => item.product_id === product.id)

if (existingItemIndex >= 0) {
      // Update quantity if product already in cart
      localCart[existingItemIndex].quantity += quantity
    } else {
      // Add new item to cart
      localCart.push({
        id: `guest-${product.id}-${Date.now()}`,
        product_id: product.id,
        quantity: quantity,
        price: product.discounted_price || product.price,
        products: product,
        added_at: new Date().toISOString(),
      })
    }

localStorage.setItem("guest_cart", JSON.stringify(localCart))
    return true
  } catch (error) {
    console.error("Error adding to guest cart:", error)
    return false
  }
}

// Update cart item quantity
export function updateGuestCartItemQuantity(productId: string | number, quantity: number): boolean {
  try {
    const cartItems = getGuestCart()
    const itemIndex = cartItems.findIndex((item) => item.product_id === productId)

if (itemIndex >= 0) {
      cartItems[itemIndex].quantity = quantity
      localStorage.setItem("guest_cart", JSON.stringify(cartItems))
      return true
    }

return false
  } catch (error) {
    console.error("Error updating guest cart item quantity:", error)
    return false
  }
}

// Remove item from cart
export function removeGuestCartItem(productId: string | number): boolean {
  try {
    const cartItems = getGuestCart()
    const updatedCart = cartItems.filter((item) => item.product_id !== productId)
    localStorage.setItem("guest_cart", JSON.stringify(updatedCart))
    return true
  } catch (error) {
    console.error("Error removing guest cart item:", error)
    return false
  }
}

// Clear cart
export function clearGuestCart(): boolean {
  try {
    localStorage.setItem("guest_cart", "[]")
    return true
  } catch (error) {
    console.error("Error clearing guest cart:", error)
    return false
  }
}

// Get cart count
export function getGuestCartCount(): number {
  const cartItems = getGuestCart()
  return cartItems.reduce((total, item) => total + item.quantity, 0)
}

// Calculate cart total
export function getGuestCartTotal(): number {
  const cartItems = getGuestCart()
  return cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
}

// Transfer guest cart to user cart when logging in
export async function transferGuestCartToUserCart(userId: string): Promise<boolean> {
  try {
    const guestCart = getGuestCart()

if (guestCart.length === 0) return true

// Import the addToCart function dynamically to avoid circular dependencies
    const { addToCart } = await import("./checkout")

// Add each guest cart item to the user's cart
    for (const item of guestCart) {
      await addToCart(userId, item.product_id, item.quantity, item.price)
    }

// Clear the guest cart after successful transfer
    clearGuestCart()
    return true
  } catch (error) {
    console.error("Error transferring guest cart to user cart:", error)
    return false
  }
}
[V0_FILE]typescriptreact:file="app/checkout/loading.tsx" isMerged="true" isEdit="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="container px-4 py-8 md:py-12">
      <h1 className="text-2xl font-bold md:text-3xl">Checkout</h1>

<div className="mt-8 grid gap-8 md:grid-cols-2">
        <div className="space-y-6">
          <Skeleton className="h-[600px] w-full rounded-lg" />
        </div>
        <div>
          <Skeleton className="h-[400px] w-full rounded-lg" />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Settings, Save, RefreshCw, Users, Package, ShoppingCart, Store, Mail, Image } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useAuth } from "@/contexts/auth-context"
import { useToast } from "@/hooks/use-toast"
import { getSettings, getDefaultSettings } from "@/lib/settings"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Skeleton } from "@/components/ui/skeleton"
import SupabaseImageUpload from "@/components/supabase-image-upload"
import { getDatabase, ref, set } from "firebase/database"
import { firebaseApp } from "@/lib/firebase"

const database = getDatabase(firebaseApp)

export default function AdminSettingsPage() {
  const router = useRouter()
  const { user, isAdminUser } = useAuth()
  const { toast } = useToast()
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [activeTab, setActiveTab] = useState("store")
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

// Store settings
  const [storeSettings, setStoreSettings] = useState({
    storeName: "Halal Deals",
    storeDescription: "Your Premier Halal Shopping Destination",
    storeEmail: "info@halaldeals.com",
    storePhone: "+91 9876543210",
    storeAddress: "123 Main Street, Mumbai, India",
    currency: "INR",
    taxRate: "18",
    enableFreeShipping: true,
    freeShippingThreshold: "1000",
    shippingFee: "100",
  })

// Email settings
  const [emailSettings, setEmailSettings] = useState({
    enableOrderConfirmation: true,
    enableShippingNotifications: true,
    enableAdminNotifications: true,
    adminEmail: "abujarshaikh039@gmail.com",
    emailFooter:
      "Thank you for shopping with Halal Deals. If you have any questions, please contact our customer service.",
  })

// User settings
  const [userSettings, setUserSettings] = useState({
    enableGuestCheckout: false,
    enableUserRegistration: true,
    requireEmailVerification: false,
    defaultUserRole: "customer",
  })

// Product settings
  const [productSettings, setProductSettings] = useState({
    enableOutOfStockPurchase: false,
    showOutOfStockProducts: true,
    enableProductReviews: true,
    enableProductRatings: true,
    defaultProductSorting: "newest",
  })

// Payment settings
  const [paymentSettings, setPaymentSettings] = useState({
    enableCashOnDelivery: true,
    enableUpiPayment: true,
    enableCardPayment: true,
    enableWalletPayment: false,
    testMode: true,
    upiId: "yourupi@bank", // Add default UPI ID
  })

// Banner settings
  const [bannerSettings, setBannerSettings] = useState({
    mainBannerUrl: "",
    featuredBannerUrl: "",
    showMainBanner: true,
    showFeaturedBanner: true,
  })

useEffect(() => {
    const loadSettings = async () => {
      if (!user || !isAdminUser) {
        // Redirect if not admin
        router.push("/admin/login")
        return
      }

setLoading(true)
      setError(null)

try {
        // Fetch settings from database
        const settings = await getSettings()

if (settings) {
          // Update state with fetched settings
          setStoreSettings(settings.store_settings || storeSettings)
          setEmailSettings(settings.email_settings || emailSettings)
          setUserSettings(settings.user_settings || userSettings)
          setProductSettings(settings.product_settings || productSettings)
          setPaymentSettings(settings.payment_settings || paymentSettings)
          setBannerSettings(settings.banner_settings || bannerSettings)
        }
      } catch (error) {
        console.error("Error loading settings:", error)
        setError("Failed to load settings. Using default values.")
      } finally {
        setLoading(false)
      }
    }

loadSettings()
  }, [user, isAdminUser, router])

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

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

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

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

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

const handleSwitchChange = (setting: string, category: string, checked: boolean) => {
    switch (category) {
      case "store":
        setStoreSettings((prev) => ({ ...prev, [setting]: checked }))
        break
      case "email":
        setEmailSettings((prev) => ({ ...prev, [setting]: checked }))
        break
      case "user":
        setUserSettings((prev) => ({ ...prev, [setting]: checked }))
        break
      case "product":
        setProductSettings((prev) => ({ ...prev, [setting]: checked }))
        break
      case "payment":
        setPaymentSettings((prev) => ({ ...prev, [setting]: checked }))
        break
      case "banner":
        setBannerSettings((prev) => ({ ...prev, [setting]: checked }))
        break
    }
  }

const handleSelectChange = (value: string, setting: string, category: string) => {
    switch (category) {
      case "store":
        setStoreSettings((prev) => ({ ...prev, [setting]: value }))
        break
      case "user":
        setUserSettings((prev) => ({ ...prev, [setting]: value }))
        break
      case "product":
        setProductSettings((prev) => ({ ...prev, [setting]: value }))
        break
    }
  }

const handleMainBannerUpload = (url: string) => {
    setBannerSettings((prev) => ({
      ...prev,
      mainBannerUrl: url,
    }))
  }

const handleFeaturedBannerUpload = (url: string) => {
    setBannerSettings((prev) => ({
      ...prev,
      featuredBannerUrl: url,
    }))
  }

const saveSettings = async () => {
    if (!user || !isAdminUser) {
      toast({
        title: "Permission Denied",
        description: "You don't have permission to change settings.",
        variant: "destructive",
      })
      return
    }

setSaving(true)
    setError(null)
    setSuccess(false)

try {
      // Combine all settings
      const allSettings = {
        store_settings: storeSettings,
        email_settings: emailSettings,
        user_settings: userSettings,
        product_settings: productSettings,
        payment_settings: paymentSettings,
        banner_settings: bannerSettings,
        updated_at: new Date().toISOString(),
      }

// Save to Firebase
      await set(ref(database, "settings/1"), allSettings)

setSuccess(true)
      toast({
        title: "Settings Saved",
        description: "Your settings have been updated successfully.",
      })

// Clear success message after a delay
      setTimeout(() => {
        setSuccess(false)
      }, 3000)
    } catch (error) {
      console.error("Error saving settings:", error)
      setError("Failed to save settings. Please try again.")
      toast({
        title: "Error Saving Settings",
        description: "There was a problem saving your settings. Please try again.",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

const resetSettings = () => {
    if (confirm("Are you sure you want to reset all settings to default values? This cannot be undone.")) {
      // Get default settings
      const defaults = getDefaultSettings()

// Reset to default values
      setStoreSettings(defaults.store_settings)
      setEmailSettings(defaults.email_settings)
      setUserSettings(defaults.user_settings)
      setProductSettings(defaults.product_settings)
      setPaymentSettings(defaults.payment_settings)
      setBannerSettings(defaults.banner_settings)

toast({
        title: "Settings Reset",
        description: "All settings have been reset to default values.",
      })
    }
  }

if (loading) {
    return (
      <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Settings className="h-6 w-6" />
            <h2 className="text-3xl font-bold tracking-tight">Settings</h2>
          </div>
          <div className="flex items-center gap-2">
            <Skeleton className="h-10 w-32" />
            <Skeleton className="h-10 w-32" />
          </div>
        </div>

<div className="space-y-4">
          <Skeleton className="h-[600px] w-full" />
        </div>
      </div>
    )
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Settings className="h-6 w-6" />
          <h2 className="text-3xl font-bold tracking-tight">Settings</h2>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={resetSettings}>
            <RefreshCw className="mr-2 h-4 w-4" />
            Reset to Default
          </Button>
          <Button onClick={saveSettings} disabled={saving} className="bg-orange-500 hover:bg-orange-600">
            <Save className="mr-2 h-4 w-4" />
            {saving ? "Saving..." : "Save Settings"}
          </Button>
        </div>
      </div>

{error && (
        <Alert variant="destructive">
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

{success && (
        <Alert variant="success" className="bg-green-50 border-green-500 text-green-700">
          <AlertTitle>Success</AlertTitle>
          <AlertDescription>Settings saved successfully!</AlertDescription>
        </Alert>
      )}

<Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-6">
          <TabsTrigger value="store" className="flex items-center gap-2">
            <Store className="h-4 w-4" />
            <span className="hidden sm:inline">Store</span>
          </TabsTrigger>
          <TabsTrigger value="email" className="flex items-center gap-2">
            <Mail className="h-4 w-4" />
            <span className="hidden sm:inline">Email</span>
          </TabsTrigger>
          <TabsTrigger value="users" className="flex items-center gap-2">
            <Users className="h-4 w-4" />
            <span className="hidden sm:inline">Users</span>
          </TabsTrigger>
          <TabsTrigger value="products" className="flex items-center gap-2">
            <Package className="h-4 w-4" />
            <span className="hidden sm:inline">Products</span>
          </TabsTrigger>
          <TabsTrigger value="payment" className="flex items-center gap-2">
            <ShoppingCart className="h-4 w-4" />
            <span className="hidden sm:inline">Payment</span>
          </TabsTrigger>
          <TabsTrigger value="banners" className="flex items-center gap-2">
            <Image className="h-4 w-4" />
            <span className="hidden sm:inline">Banners</span>
          </TabsTrigger>
        </TabsList>

<TabsContent value="store" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Store Information</CardTitle>
              <CardDescription>Manage your store details and appearance</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="storeName">Store Name</Label>
                  <Input
                    id="storeName"
                    name="storeName"
                    value={storeSettings.storeName}
                    onChange={handleStoreSettingsChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="storeEmail">Store Email</Label>
                  <Input
                    id="storeEmail"
                    name="storeEmail"
                    type="email"
                    value={storeSettings.storeEmail}
                    onChange={handleStoreSettingsChange}
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="storeDescription">Store Description</Label>
                <Textarea
                  id="storeDescription"
                  name="storeDescription"
                  value={storeSettings.storeDescription}
                  onChange={handleStoreSettingsChange}
                />
              </div>

<div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="storePhone">Store Phone</Label>
                  <Input
                    id="storePhone"
                    name="storePhone"
                    value={storeSettings.storePhone}
                    onChange={handleStoreSettingsChange}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="currency">Currency</Label>
                  <Select
                    value={storeSettings.currency}
                    onValueChange={(value) => handleSelectChange(value, "currency", "store")}
                  >
                    <SelectTrigger id="currency">
                      <SelectValue placeholder="Select currency" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="INR">Indian Rupee (₹)</SelectItem>
                      <SelectItem value="USD">US Dollar ($)</SelectItem>
                      <SelectItem value="EUR">Euro (€)</SelectItem>
                      <SelectItem value="GBP">British Pound (£)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="storeAddress">Store Address</Label>
                <Textarea
                  id="storeAddress"
                  name="storeAddress"
                  value={storeSettings.storeAddress}
                  onChange={handleStoreSettingsChange}
                />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Shipping & Tax Settings</CardTitle>
              <CardDescription>Configure shipping and tax options</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="taxRate">Tax Rate (%)</Label>
                <Input
                  id="taxRate"
                  name="taxRate"
                  type="number"
                  min="0"
                  max="100"
                  value={storeSettings.taxRate}
                  onChange={handleStoreSettingsChange}
                />
              </div>

<div className="flex items-center space-x-2">
                <Switch
                  id="enableFreeShipping"
                  checked={storeSettings.enableFreeShipping}
                  onCheckedChange={(checked) => handleSwitchChange("enableFreeShipping", "store", checked)}
                />
                <Label htmlFor="enableFreeShipping">Enable Free Shipping</Label>
              </div>

{storeSettings.enableFreeShipping && (
                <div className="space-y-2">
                  <Label htmlFor="freeShippingThreshold">Free Shipping Threshold (₹)</Label>
                  <Input
                    id="freeShippingThreshold"
                    name="freeShippingThreshold"
                    type="number"
                    min="0"
                    value={storeSettings.freeShippingThreshold}
                    onChange={handleStoreSettingsChange}
                  />
                  <p className="text-sm text-muted-foreground">
                    Orders above this amount will qualify for free shipping
                  </p>
                </div>
              )}

<div className="space-y-2">
                <Label htmlFor="shippingFee">Standard Shipping Fee (₹)</Label>
                <Input
                  id="shippingFee"
                  name="shippingFee"
                  type="number"
                  min="0"
                  value={storeSettings.shippingFee}
                  onChange={handleStoreSettingsChange}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="email" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Email Notifications</CardTitle>
              <CardDescription>Configure email notifications for your store</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Switch
                    id="enableOrderConfirmation"
                    checked={emailSettings.enableOrderConfirmation}
                    onCheckedChange={(checked) => handleSwitchChange("enableOrderConfirmation", "email", checked)}
                  />
                  <Label htmlFor="enableOrderConfirmation">Send Order Confirmation Emails</Label>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="enableShippingNotifications"
                    checked={emailSettings.enableShippingNotifications}
                    onCheckedChange={(checked) => handleSwitchChange("enableShippingNotifications", "email", checked)}
                  />
                  <Label htmlFor="enableShippingNotifications">Send Shipping Status Notifications</Label>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="enableAdminNotifications"
                    checked={emailSettings.enableAdminNotifications}
                    onCheckedChange={(checked) => handleSwitchChange("enableAdminNotifications", "email", checked)}
                  />
                  <Label htmlFor="enableAdminNotifications">Send New Order Notifications to Admin</Label>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="adminEmail">Admin Notification Email</Label>
                <Input
                  id="adminEmail"
                  name="adminEmail"
                  type="email"
                  value={emailSettings.adminEmail}
                  onChange={handleEmailSettingsChange}
                />
                <p className="text-sm text-muted-foreground">Email address where admin notifications will be sent</p>
              </div>

<div className="space-y-2">
                <Label htmlFor="emailFooter">Email Footer Text</Label>
                <Textarea
                  id="emailFooter"
                  name="emailFooter"
                  value={emailSettings.emailFooter}
                  onChange={handleEmailSettingsChange}
                />
                <p className="text-sm text-muted-foreground">
                  This text will appear at the bottom of all emails sent from your store
                </p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="users" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>User Account Settings</CardTitle>
              <CardDescription>Configure user account options</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Switch
                    id="enableGuestCheckout"
                    checked={userSettings.enableGuestCheckout}
                    onCheckedChange={(checked) => handleSwitchChange("enableGuestCheckout", "user", checked)}
                  />
                  <Label htmlFor="enableGuestCheckout">Enable Guest Checkout</Label>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="enableUserRegistration"
                    checked={userSettings.enableUserRegistration}
                    onCheckedChange={(checked) => handleSwitchChange("enableUserRegistration", "user", checked)}
                  />
                  <Label htmlFor="enableUserRegistration">Allow New User Registration</Label>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="requireEmailVerification"
                    checked={userSettings.requireEmailVerification}
                    onCheckedChange={(checked) => handleSwitchChange("requireEmailVerification", "user", checked)}
                  />
                  <Label htmlFor="requireEmailVerification">Require Email Verification</Label>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="defaultUserRole">Default User Role</Label>
                <Select
                  value={userSettings.defaultUserRole}
                  onValueChange={(value) => handleSelectChange(value, "defaultUserRole", "user")}
                >
                  <SelectTrigger id="defaultUserRole">
                    <SelectValue placeholder="Select default role" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="customer">Customer</SelectItem>
                    <SelectItem value="admin">Admin</SelectItem>
                  </SelectContent>
                </Select>
                <p className="text-sm text-muted-foreground">Role assigned to new users upon registration</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="products" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Product Display Settings</CardTitle>
              <CardDescription>Configure how products are displayed and managed</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Switch
                    id="enableOutOfStockPurchase"
                    checked={productSettings.enableOutOfStockPurchase}
                    onCheckedChange={(checked) => handleSwitchChange("enableOutOfStockPurchase", "product", checked)}
                  />
                  <Label htmlFor="enableOutOfStockPurchase">Allow Purchase of Out-of-Stock Items</Label>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="showOutOfStockProducts"
                    checked={productSettings.showOutOfStockProducts}
                    onCheckedChange={(checked) => handleSwitchChange("showOutOfStockProducts", "product", checked)}
                  />
                  <Label htmlFor="showOutOfStockProducts">Show Out-of-Stock Products</Label>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="enableProductReviews"
                    checked={productSettings.enableProductReviews}
                    onCheckedChange={(checked) => handleSwitchChange("enableProductReviews", "product", checked)}
                  />
                  <Label htmlFor="enableProductReviews">Enable Product Reviews</Label>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="enableProductRatings"
                    checked={productSettings.enableProductRatings}
                    onCheckedChange={(checked) => handleSwitchChange("enableProductRatings", "product", checked)}
                  />
                  <Label htmlFor="enableProductRatings">Enable Product Ratings</Label>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="defaultProductSorting">Default Product Sorting</Label>
                <Select
                  value={productSettings.defaultProductSorting}
                  onValueChange={(value) => handleSelectChange(value, "defaultProductSorting", "product")}
                >
                  <SelectTrigger id="defaultProductSorting">
                    <SelectValue placeholder="Select default sorting" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="newest">Newest First</SelectItem>
                    <SelectItem value="price-low">Price: Low to High</SelectItem>
                    <SelectItem value="price-high">Price: High to Low</SelectItem>
                    <SelectItem value="popularity">Popularity</SelectItem>
                    <SelectItem value="rating">Average Rating</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="payment" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Payment Methods</CardTitle>
              <CardDescription>Configure available payment methods</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Switch
                    id="enableCashOnDelivery"
                    checked={paymentSettings.enableCashOnDelivery}
                    onCheckedChange={(checked) => handleSwitchChange("enableCashOnDelivery", "payment", checked)}
                  />
                  <Label htmlFor="enableCashOnDelivery">Enable Cash on Delivery</Label>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="enableUpiPayment"
                    checked={paymentSettings.enableUpiPayment}
                    onCheckedChange={(checked) => handleSwitchChange("enableUpiPayment", "payment", checked)}
                  />
                  <Label htmlFor="enableUpiPayment">Enable UPI Payment</Label>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="enableCardPayment"
                    checked={paymentSettings.enableCardPayment}
                    onCheckedChange={(checked) => handleSwitchChange("enableCardPayment", "payment", checked)}
                  />
                  <Label htmlFor="enableCardPayment">Enable Credit/Debit Card Payment</Label>
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="enableWalletPayment"
                    checked={paymentSettings.enableWalletPayment}
                    onCheckedChange={(checked) => handleSwitchChange("enableWalletPayment", "payment", checked)}
                  />
                  <Label htmlFor="enableWalletPayment">Enable Digital Wallet Payment</Label>
                </div>
              </div>

<div className="flex items-center space-x-2">
                <Switch
                  id="testMode"
                  checked={paymentSettings.testMode}
                  onCheckedChange={(checked) => handleSwitchChange("testMode", "payment", checked)}
                />
                <div>
                  <Label htmlFor="testMode">Test Mode</Label>
                  <p className="text-sm text-muted-foreground">
                    When enabled, payments will be processed in test mode and no real charges will be made
                  </p>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="upiId">UPI ID</Label>
                <Input
                  id="upiId"
                  name="upiId"
                  value={paymentSettings.upiId}
                  onChange={(e) => handlePaymentSettingsChange(e)}
                  placeholder="yourname@bank"
                />
                <p className="text-xs text-muted-foreground">
                  This UPI ID will be used for receiving payments from customers
                </p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="banners" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Banner Settings</CardTitle>
              <CardDescription>Configure homepage banners and promotional images</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Switch
                    id="showMainBanner"
                    checked={bannerSettings.showMainBanner}
                    onCheckedChange={(checked) => handleSwitchChange("showMainBanner", "banner", checked)}
                  />
                  <Label htmlFor="showMainBanner">Show Main Banner</Label>
                </div>

<div className="space-y-2">
                  <Label htmlFor="mainBanner">Main Banner Image</Label>
                  <SupabaseImageUpload
                    onUploadComplete={handleMainBannerUpload}
                    existingImageUrl={bannerSettings.mainBannerUrl}
                    folder="banners"
                  />
                  <p className="text-sm text-muted-foreground">
                    This banner will be displayed at the top of the homepage (Recommended size: 1200x400px)
                  </p>
                </div>
              </div>

<div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Switch
                    id="showFeaturedBanner"
                    checked={bannerSettings.showFeaturedBanner}
                    onCheckedChange={(checked) => handleSwitchChange("showFeaturedBanner", "banner", checked)}
                  />
                  <Label htmlFor="showFeaturedBanner">Show Featured Banner</Label>
                </div>

<div className="space-y-2">
                  <Label htmlFor="featuredBanner">Featured Banner Image</Label>
                  <SupabaseImageUpload
                    onUploadComplete={handleFeaturedBannerUpload}
                    existingImageUrl={bannerSettings.featuredBannerUrl}
                    folder="banners"
                  />
                  <p className="text-sm text-muted-foreground">
                    This banner will be displayed in the featured section (Recommended size: 600x400px)
                  </p>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <p className="text-sm text-muted-foreground">
                Banner changes will be visible immediately after saving settings
              </p>
            </CardFooter>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/banner-display.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { getSettings } from "@/lib/settings"
import { Skeleton } from "@/components/ui/skeleton"

interface BannerDisplayProps {
  type: "main" | "featured"
  fallbackUrl?: string
  alt?: string
  href?: string
  height?: number
  width?: number
}

export default function BannerDisplay({
  type,
  fallbackUrl = "/placeholder.svg",
  alt = "Banner",
  href = "/",
  height = 400,
  width = 1200,
}: BannerDisplayProps) {
  const [bannerUrl, setBannerUrl] = useState<string | null>(null)
  const [showBanner, setShowBanner] = useState(true)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const loadBannerSettings = async () => {
      try {
        setLoading(true)
        const settings = await getSettings()

if (settings && settings.banner_settings) {
          if (type === "main") {
            setBannerUrl(settings.banner_settings.mainBannerUrl || fallbackUrl)
            setShowBanner(settings.banner_settings.showMainBanner !== false)
          } else if (type === "featured") {
            setBannerUrl(settings.banner_settings.featuredBannerUrl || fallbackUrl)
            setShowBanner(settings.banner_settings.showFeaturedBanner !== false)
          }
        } else {
          setBannerUrl(fallbackUrl)
        }
      } catch (error) {
        console.error("Error loading banner settings:", error)
        setBannerUrl(fallbackUrl)
      } finally {
        setLoading(false)
      }
    }

loadBannerSettings()
  }, [type, fallbackUrl])

if (loading) {
    return <Skeleton className={`w-full h-[${height}px] rounded-lg`} />
  }

if (!showBanner) {
    return null
  }

return (
    <Link href={href} className="block overflow-hidden rounded-lg">
      <div className="relative h-[400px] w-full">
        <Image
          src={bannerUrl || fallbackUrl}
          alt={alt}
          fill
          className="object-cover"
          sizes={`(max-width: 768px) 100vw, ${width}px`}
          priority={type === "main"}
        />
      </div>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="app/order-confirmation/[id]/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { CheckCircle, ArrowRight, AlertCircle, Clock } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { useAuth } from "@/contexts/auth-context"
import { fetchOrderDetails } from "@/lib/checkout"
import { useToast } from "@/hooks/use-toast"
import { Skeleton } from "@/components/ui/skeleton"

interface OrderConfirmationPageProps {
  params: {
    id: string
  }
}

export default function OrderConfirmationPage({ params }: OrderConfirmationPageProps) {
  const router = useRouter()
  const { user } = useAuth()
  const { toast } = useToast()
  const [order, setOrder] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const loadOrder = async () => {
      setLoading(true)
      setError(null)

try {
        const orderDetails = await fetchOrderDetails(params.id)

if (!orderDetails) {
          setError("Order not found")
          toast({
            title: "Order Not Found",
            description: "The order you're looking for doesn't exist.",
            variant: "destructive",
          })
          return
        }

// Check if order belongs to user (skip for guest orders)
        if (user && orderDetails.user_id !== "guest" && orderDetails.user_id !== user.uid) {
          setError("You don't have permission to view this order")
          toast({
            title: "Access Denied",
            description: "You don't have permission to view this order.",
            variant: "destructive",
          })
          return
        }

setOrder(orderDetails)
      } catch (error) {
        console.error("Error loading order:", error)
        setError("Failed to load order details")
        toast({
          title: "Error",
          description: "Failed to load order details. Please try again.",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

loadOrder()
  }, [params.id, user, toast])

if (loading) {
    return (
      <div className="container px-4 py-8 md:py-12">
        <div className="mx-auto max-w-3xl">
          <div className="mb-8 text-center">
            <Skeleton className="mx-auto h-16 w-16 rounded-full" />
            <Skeleton className="mx-auto mt-4 h-8 w-64" />
            <Skeleton className="mx-auto mt-2 h-4 w-96" />
          </div>

<Skeleton className="h-[500px] w-full rounded-lg" />
        </div>
      </div>
    )
  }

if (error || !order) {
    return (
      <div className="container flex min-h-[400px] items-center justify-center">
        <div className="text-center">
          <AlertCircle className="mx-auto h-12 w-12 text-destructive" />
          <h1 className="mt-4 text-2xl font-bold">Order Not Found</h1>
          <p className="mt-2 text-muted-foreground">{error || "The order you're looking for doesn't exist."}</p>
          <Link href="/">
            <Button className="mt-4 bg-orange-500 hover:bg-orange-600">Return to Home</Button>
          </Link>
        </div>
      </div>
    )
  }

// Get payment status badge
  const getPaymentStatusBadge = () => {
    const status = order.payment_status || (order.payment_method === "cod" ? "pending" : "completed")

switch (status) {
      case "completed":
        return <Badge className="ml-2 bg-green-500">Paid</Badge>
      case "pending":
        return <Badge className="ml-2 bg-yellow-500">Pending</Badge>
      case "failed":
        return <Badge className="ml-2 bg-red-500">Failed</Badge>
      default:
        return null
    }
  }

return (
    <div className="container px-4 py-8 md:py-12">
      <div className="mx-auto max-w-3xl">
        <div className="mb-8 text-center">
          <CheckCircle className="mx-auto h-16 w-16 text-green-500" />
          <h1 className="mt-4 text-2xl font-bold md:text-3xl">Order Confirmed!</h1>
          <p className="mt-2 text-muted-foreground">
            Thank you for your order. We've received your order and will begin processing it soon.
          </p>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Order #{order.id}</CardTitle>
            <CardDescription>
              Placed on {new Date(order.created_at).toLocaleDateString()} at{" "}
              {new Date(order.created_at).toLocaleTimeString()}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="font-medium">Order Status</h3>
                <p className="mt-1 capitalize flex items-center">
                  {order.status}
                  {order.status === "pending" && <Clock className="ml-2 h-4 w-4 text-yellow-500" />}
                  {order.status === "processing" && (
                    <span className="ml-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent" />
                  )}
                  {order.status === "delivered" && <CheckCircle className="ml-2 h-4 w-4 text-green-500" />}
                </p>
              </div>

<div className="text-right">
                <h3 className="font-medium">Order Total</h3>
                <p className="mt-1 text-xl font-bold">₹{order.total_amount.toFixed(2)}</p>
              </div>
            </div>

<div>
              <h3 className="font-medium">Shipping Address</h3>
              <p className="mt-1 whitespace-pre-line">{order.shipping_address}</p>
            </div>

<div>
              <h3 className="font-medium">Payment Method</h3>
              <p className="mt-1 capitalize flex items-center">
                {order.payment_method === "cod" ? (
                  "Cash on Delivery"
                ) : order.payment_method === "upi" ? (
                  <span className="flex items-center">
                    UPI Payment
                    {getPaymentStatusBadge()}
                  </span>
                ) : (
                  "Credit/Debit Card"
                )}
              </p>
              {order.payment_method === "upi" && order.upi_reference && (
                <p className="mt-1 text-sm text-muted-foreground">Reference: {order.upi_reference}</p>
              )}
            </div>

<div>
              <h3 className="mb-4 font-medium">Order Items</h3>
              <div className="space-y-4">
                {order.items &&
                  order.items.map((item: any) => (
                    <div key={item.id} className="flex justify-between">
                      <div>
                        <span className="font-medium">{item.products?.name || `Product #${item.product_id}`}</span>
                        <span className="text-sm text-muted-foreground"> × {item.quantity}</span>
                      </div>
                      <span>₹{(item.price * item.quantity).toFixed(2)}</span>
                    </div>
                  ))}
              </div>
            </div>

<div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-muted-foreground">Subtotal</span>
                <span>₹{(order.total_amount / 1.18).toFixed(2)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Tax (18%)</span>
                <span>₹{(order.total_amount - order.total_amount / 1.18).toFixed(2)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Shipping</span>
                <span>Free</span>
              </div>
              <div className="flex justify-between font-medium">
                <span>Total</span>
                <span>₹{order.total_amount.toFixed(2)}</span>
              </div>
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline" asChild>
              <Link href="/profile">View All Orders</Link>
            </Button>
            <Button className="bg-orange-500 hover:bg-orange-600" asChild>
              <Link href="/">
                Continue Shopping
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/orders/track/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Search, ArrowRight, Package, Truck, CheckCircle, XCircle } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { fetchOrderDetails, updateOrderStatus } from "@/lib/checkout"
import { useToast } from "@/hooks/use-toast"
import { Skeleton } from "@/components/ui/skeleton"

export default function AdminOrderTrackingPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [orderId, setOrderId] = useState("")
  const [order, setOrder] = useState<any>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [processingAction, setProcessingAction] = useState(false)

const handleSearch = async () => {
    if (!orderId.trim()) {
      setError("Please enter an order ID")
      return
    }

setLoading(true)
    setError(null)
    setOrder(null)

try {
      const orderDetails = await fetchOrderDetails(orderId.trim())

if (!orderDetails) {
        setError("Order not found. Please check the order ID and try again.")
        return
      }

setOrder(orderDetails)
    } catch (error) {
      console.error("Error fetching order:", error)
      setError("Failed to fetch order details. Please try again.")
    } finally {
      setLoading(false)
    }
  }

const handleStatusChange = async (status: string) => {
    setProcessingAction(true)

try {
      const success = await updateOrderStatus(order.id, status)

if (success) {
        // Update local state
        setOrder((prev: any) => ({ ...prev, status }))

toast({
          title: "Status updated",
          description: `Order #${order.id} status has been updated to ${status}.`,
        })
      } else {
        throw new Error("Failed to update status")
      }
    } catch (error) {
      console.error("Error updating status:", error)
      toast({
        title: "Error",
        description: "Failed to update order status. Please try again.",
        variant: "destructive",
      })
    } finally {
      setProcessingAction(false)
    }
  }

const getStatusBadgeVariant = (status: string) => {
    switch (status) {
      case "pending":
        return "default"
      case "processing":
        return "secondary"
      case "shipped":
        return "info"
      case "delivered":
        return "success"
      case "cancelled":
        return "destructive"
      default:
        return "outline"
    }
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold tracking-tight">Order Tracking</h2>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Track Order</CardTitle>
          <CardDescription>Enter an order ID to view details and update status</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-2">
            <Input
              placeholder="Enter order ID"
              value={orderId}
              onChange={(e) => setOrderId(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
            />
            <Button onClick={handleSearch} disabled={loading} className="bg-orange-500 hover:bg-orange-600">
              {loading ? (
                <span className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent"></span>
              ) : (
                <Search className="h-4 w-4" />
              )}
              <span className="ml-2">Search</span>
            </Button>
          </div>

{error && (
            <Alert variant="destructive" className="mt-4">
              <AlertTitle>Error</AlertTitle>
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}
        </CardContent>
      </Card>

{loading && (
        <Card>
          <CardContent className="p-6">
            <div className="space-y-4">
              <Skeleton className="h-8 w-1/3" />
              <Skeleton className="h-4 w-1/4" />
              <div className="grid grid-cols-2 gap-4">
                <Skeleton className="h-24 w-full" />
                <Skeleton className="h-24 w-full" />
              </div>
              <Skeleton className="h-32 w-full" />
            </div>
          </CardContent>
        </Card>
      )}

{order && (
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Order #{order.id}</CardTitle>
                <CardDescription>
                  Placed on {new Date(order.created_at).toLocaleDateString()} at{" "}
                  {new Date(order.created_at).toLocaleTimeString()}
                </CardDescription>
              </div>
              <Badge variant={getStatusBadgeVariant(order.status)} className="text-base">
                {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
              </Badge>
            </div>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="grid gap-6 md:grid-cols-2">
              <div>
                <h3 className="font-medium">Customer Information</h3>
                <div className="mt-2 space-y-1">
                  <p>
                    <span className="font-medium">Customer:</span>{" "}
                    {order.user_id === "guest"
                      ? `${order.customer_info?.name || "Guest"} (Guest)`
                      : order.users?.name || "Registered User"}
                  </p>
                  <p>
                    <span className="font-medium">Email:</span>{" "}
                    {order.user_id === "guest" ? order.customer_info?.email || "N/A" : order.users?.email || "N/A"}
                  </p>
                  <p>
                    <span className="font-medium">Phone:</span>{" "}
                    {order.customer_info?.phone || order.shipping_address.match(/Phone: ([0-9]+)/)?.[1] || "N/A"}
                  </p>
                </div>
              </div>

<div>
                <h3 className="font-medium">Order Details</h3>
                <div className="mt-2 space-y-1">
                  <p>
                    <span className="font-medium">Total Amount:</span> ₹{order.total_amount.toFixed(2)}
                  </p>
                  <p>
                    <span className="font-medium">Payment Method:</span>{" "}
                    {order.payment_method === "cod"
                      ? "Cash on Delivery"
                      : order.payment_method === "upi"
                        ? "UPI Payment"
                        : "Credit/Debit Card"}
                  </p>
                  <p>
                    <span className="font-medium">Payment Status:</span>{" "}
                    {order.payment_status || (order.payment_method === "cod" ? "Pending" : "Completed")}
                  </p>
                </div>
              </div>
            </div>

<div>
              <h3 className="font-medium">Shipping Address</h3>
              <p className="mt-2 whitespace-pre-line">{order.shipping_address}</p>
            </div>

<div>
              <h3 className="font-medium">Order Items</h3>
              <div className="mt-2 space-y-2">
                {order.items?.map((item: any) => (
                  <div key={item.id} className="flex justify-between border-b pb-2">
                    <div>
                      <span className="font-medium">{item.products?.name || `Product #${item.product_id}`}</span>
                      <span className="text-sm text-muted-foreground"> × {item.quantity}</span>
                    </div>
                    <span>₹{(item.price * item.quantity).toFixed(2)}</span>
                  </div>
                ))}
              </div>
            </div>

<div>
              <h3 className="font-medium">Update Order Status</h3>
              <div className="mt-2 flex flex-wrap gap-2">
                <Button
                  variant="outline"
                  className="gap-2"
                  onClick={() => handleStatusChange("processing")}
                  disabled={
                    processingAction ||
                    order.status === "processing" ||
                    order.status === "delivered" ||
                    order.status === "cancelled"
                  }
                >
                  <Package className="h-4 w-4" />
                  Mark as Processing
                </Button>
                <Button
                  variant="outline"
                  className="gap-2"
                  onClick={() => handleStatusChange("shipped")}
                  disabled={
                    processingAction ||
                    order.status === "shipped" ||
                    order.status === "delivered" ||
                    order.status === "cancelled"
                  }
                >
                  <Truck className="h-4 w-4" />
                  Mark as Shipped
                </Button>
                <Button
                  variant="outline"
                  className="gap-2"
                  onClick={() => handleStatusChange("delivered")}
                  disabled={processingAction || order.status === "delivered" || order.status === "cancelled"}
                >
                  <CheckCircle className="h-4 w-4" />
                  Mark as Delivered
                </Button>
                <Button
                  variant="destructive"
                  className="gap-2"
                  onClick={() => handleStatusChange("cancelled")}
                  disabled={processingAction || order.status === "delivered" || order.status === "cancelled"}
                >
                  <XCircle className="h-4 w-4" />
                  Cancel Order
                </Button>
              </div>
            </div>
          </CardContent>
          <CardFooter className="flex justify-end">
            <Button
              onClick={() => router.push(`/admin/orders/${order.id}`)}
              className="bg-orange-500 hover:bg-orange-600"
            >
              View Full Details
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </CardFooter>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/orders/track/loading.tsx" isFixed="true" isMerged="true" isEdit="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/orders/[id]/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft, Package, Truck, CheckCircle, XCircle, Phone, Mail, MapPin, User, Printer } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { useAuth } from "@/contexts/auth-context"
import { fetchOrderDetails, updateOrderStatus, updatePaymentStatus } from "@/lib/checkout"
import { useToast } from "@/hooks/use-toast"
import ProductImage from "@/components/product-image"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Skeleton } from "@/components/ui/skeleton"

interface OrderDetailsPageProps {
  params: {
    id: string
  }
}

export default function AdminOrderDetailsPage({ params }: OrderDetailsPageProps) {
  const router = useRouter()
  const { user, isAdminUser } = useAuth()
  const { toast } = useToast()
  const [order, setOrder] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [processingAction, setProcessingAction] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const loadOrder = async () => {
      if (!user || !isAdminUser) {
        // Redirect if not admin
        router.push("/admin/login")
        return
      }

setLoading(true)
      setError(null)

try {
        const orderDetails = await fetchOrderDetails(params.id)

loadOrder()
  }, [params.id, user, isAdminUser, router, toast])

const handleStatusChange = async (status: string) => {
    setProcessingAction("status")

try {
      const success = await updateOrderStatus(order.id, status)

if (success) {
        // Update local state
        setOrder((prev: any) => ({ ...prev, status }))

const handlePaymentStatusChange = async (status: string) => {
    setProcessingAction("payment")

try {
      const success = await updatePaymentStatus(order.id, status)

if (success) {
        // Update local state
        setOrder((prev: any) => ({ ...prev, payment_status: status }))

toast({
          title: "Payment status updated",
          description: `Order #${order.id} payment status has been updated to ${status}.`,
        })
      } else {
        throw new Error("Failed to update payment status")
      }
    } catch (error) {
      console.error("Error updating payment status:", error)
      toast({
        title: "Error",
        description: "Failed to update payment status. Please try again.",
        variant: "destructive",
      })
    } finally {
      setProcessingAction(null)
    }
  }

const getPaymentStatusBadgeVariant = (status: string) => {
    switch (status) {
      case "completed":
        return "success"
      case "pending":
        return "warning"
      case "failed":
        return "destructive"
      default:
        return "outline"
    }
  }

const printOrder = () => {
    window.print()
  }

if (loading) {
    return (
      <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
        <div className="flex items-center gap-2">
          <Skeleton className="h-10 w-10" />
          <Skeleton className="h-8 w-48" />
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          <Skeleton className="h-[300px]" />
          <Skeleton className="h-[300px] md:col-span-2" />
        </div>
        <Skeleton className="h-[200px]" />
      </div>
    )
  }

if (error || !order) {
    return (
      <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Button variant="outline" size="icon" onClick={() => router.back()}>
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <h2 className="text-3xl font-bold tracking-tight">Order Details</h2>
          </div>
        </div>

<Alert variant="destructive">
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{error || "Order not found"}</AlertDescription>
        </Alert>

<div className="flex justify-center">
          <Button onClick={() => router.push("/admin/orders")}>Back to Orders</Button>
        </div>
      </div>
    )
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Button variant="outline" size="icon" onClick={() => router.back()}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <h2 className="text-3xl font-bold tracking-tight">Order #{order.id}</h2>
        </div>
        <div className="flex items-center gap-2">
          <Badge variant={getStatusBadgeVariant(order.status)} className="text-base">
            {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
          </Badge>
          <Button variant="outline" size="sm" onClick={printOrder}>
            <Printer className="mr-2 h-4 w-4" />
            Print
          </Button>
        </div>
      </div>

<Tabs defaultValue="details">
        <TabsList>
          <TabsTrigger value="details">Order Details</TabsTrigger>
          <TabsTrigger value="customer">Customer Info</TabsTrigger>
          <TabsTrigger value="items">Order Items</TabsTrigger>
          <TabsTrigger value="actions">Actions</TabsTrigger>
        </TabsList>

<TabsContent value="details" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Order Information</CardTitle>
              <CardDescription>
                Order placed on {new Date(order.created_at).toLocaleDateString()} at{" "}
                {new Date(order.created_at).toLocaleTimeString()}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div>
                  <h3 className="font-medium">Order Status</h3>
                  <div className="mt-2 flex items-center gap-2">
                    <Badge variant={getStatusBadgeVariant(order.status)}>
                      {order.status.charAt(0).toUpperCase() + order.status.slice(1)}
                    </Badge>
                    {processingAction === "status" && (
                      <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent"></span>
                    )}
                  </div>
                </div>

<div>
                  <h3 className="font-medium">Payment Information</h3>
                  <div className="mt-2 space-y-1">
                    <p>
                      <span className="font-medium">Method:</span>{" "}
                      {order.payment_method === "cod"
                        ? "Cash on Delivery"
                        : order.payment_method === "upi"
                          ? "UPI Payment"
                          : "Credit/Debit Card"}
                    </p>
                    <p className="flex items-center gap-2">
                      <span className="font-medium">Status:</span>{" "}
                      <Badge variant={getPaymentStatusBadgeVariant(order.payment_status || "pending")}>
                        {(order.payment_status || "pending").charAt(0).toUpperCase() +
                          (order.payment_status || "pending").slice(1)}
                      </Badge>
                      {processingAction === "payment" && (
                        <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent"></span>
                      )}
                    </p>
                    {order.payment_method === "upi" && order.upi_reference && (
                      <p>
                        <span className="font-medium">Reference:</span> {order.upi_reference}
                      </p>
                    )}
                  </div>
                </div>
              </div>

<div>
                <h3 className="font-medium">Shipping Address</h3>
                <p className="mt-2 whitespace-pre-line">{order.shipping_address}</p>
              </div>

<TabsContent value="customer" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Customer Information</CardTitle>
              <CardDescription>{order.user_id === "guest" ? "Guest Customer" : "Registered Customer"}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <User className="h-4 w-4 text-muted-foreground" />
                  <span className="font-medium">Customer:</span>
                  <span>
                    {order.user_id === "guest"
                      ? `${order.customer_info?.name || "Guest"} (Guest)`
                      : order.users?.name || "Registered User"}
                  </span>
                </div>

<div className="flex items-center gap-2">
                  <Mail className="h-4 w-4 text-muted-foreground" />
                  <span className="font-medium">Email:</span>
                  <span>
                    {order.user_id === "guest" ? order.customer_info?.email || "N/A" : order.users?.email || "N/A"}
                  </span>
                </div>

<div className="flex items-center gap-2">
                  <Phone className="h-4 w-4 text-muted-foreground" />
                  <span className="font-medium">Phone:</span>
                  <span>
                    {order.customer_info?.phone || order.shipping_address.match(/Phone: ([0-9]+)/)?.[1] || "N/A"}
                  </span>
                </div>
              </div>

<div>
                <div className="flex items-start gap-2">
                  <MapPin className="h-4 w-4 mt-1 text-muted-foreground" />
                  <div>
                    <span className="font-medium">Shipping Address:</span>
                    <p className="mt-1 whitespace-pre-line">{order.shipping_address}</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="items" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Order Items</CardTitle>
              <CardDescription>{order.items?.length || 0} items in this order</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {order.items?.map((item: any) => (
                  <div key={item.id} className="flex items-center gap-4 border-b pb-4">
                    <div className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border">
                      <ProductImage
                        src={item.products?.image_url || "/placeholder.svg"}
                        alt={item.products?.name || "Product"}
                        width={64}
                        height={64}
                      />
                    </div>
                    <div className="flex-1">
                      <h4 className="font-medium">{item.products?.name || `Product #${item.product_id}`}</h4>
                      <div className="flex justify-between">
                        <p className="text-sm text-muted-foreground">
                          {item.quantity} × ₹{item.price.toFixed(2)}
                        </p>
                        <p className="font-medium">₹{(item.quantity * item.price).toFixed(2)}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

<TabsContent value="actions" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Update Order Status</CardTitle>
              <CardDescription>Change the current status of this order</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-4">
                <Button
                  variant="outline"
                  className="gap-2"
                  onClick={() => handleStatusChange("processing")}
                  disabled={
                    processingAction === "status" ||
                    order.status === "processing" ||
                    order.status === "delivered" ||
                    order.status === "cancelled"
                  }
                >
                  <Package className="h-4 w-4" />
                  Mark as Processing
                </Button>
                <Button
                  variant="outline"
                  className="gap-2"
                  onClick={() => handleStatusChange("shipped")}
                  disabled={
                    processingAction === "status" ||
                    order.status === "shipped" ||
                    order.status === "delivered" ||
                    order.status === "cancelled"
                  }
                >
                  <Truck className="h-4 w-4" />
                  Mark as Shipped
                </Button>
                <Button
                  variant="outline"
                  className="gap-2"
                  onClick={() => handleStatusChange("delivered")}
                  disabled={
                    processingAction === "status" || order.status === "delivered" || order.status === "cancelled"
                  }
                >
                  <CheckCircle className="h-4 w-4" />
                  Mark as Delivered
                </Button>
                <Button
                  variant="destructive"
                  className="gap-2"
                  onClick={() => handleStatusChange("cancelled")}
                  disabled={
                    processingAction === "status" || order.status === "delivered" || order.status === "cancelled"
                  }
                >
                  <XCircle className="h-4 w-4" />
                  Cancel Order
                </Button>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Update Payment Status</CardTitle>
              <CardDescription>Change the payment status for this order</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-4">
                <Button
                  variant="outline"
                  className="gap-2"
                  onClick={() => handlePaymentStatusChange("pending")}
                  disabled={processingAction === "payment" || order.payment_status === "pending"}
                >
                  Mark as Pending
                </Button>
                <Button
                  variant="outline"
                  className="gap-2"
                  onClick={() => handlePaymentStatusChange("completed")}
                  disabled={processingAction === "payment" || order.payment_status === "completed"}
                >
                  <CheckCircle className="h-4 w-4" />
                  Mark as Completed
                </Button>
                <Button
                  variant="outline"
                  className="gap-2 text-destructive"
                  onClick={() => handlePaymentStatusChange("failed")}
                  disabled={processingAction === "payment" || order.payment_status === "failed"}
                >
                  <XCircle className="h-4 w-4" />
                  Mark as Failed
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescript:file="lib/checkout.ts" isMerged="true" isEdit="true"
import { database, ref, push, get, set, update, remove } from "./firebase"
import { createAdminNotification } from "./admin"

// Create a new order
export async function createOrder(
  userId: string | null,
  totalAmount: number,
  shippingAddress: string,
  paymentMethod: string,
  cartItems: any[],
  customerInfo?: any,
) {
  try {
    console.log("Creating order with params:", { userId, totalAmount, paymentMethod })
    console.log("Cart items for order:", cartItems)

// Create a new order in Firebase
    const ordersRef = ref(database, "orders")
    const newOrderRef = push(ordersRef)
    const orderId = newOrderRef.key

if (!orderId) {
      throw new Error("Failed to generate order ID")
    }

// Generate UPI reference if payment method is UPI
    const upiReference = paymentMethod === "upi" ? `UPI-${Date.now().toString().slice(-6)}` : null

const orderData = {
      user_id: userId || "guest",
      total_amount: totalAmount,
      status: paymentMethod === "cod" ? "pending" : "processing",
      shipping_address: shippingAddress,
      payment_method: paymentMethod,
      payment_status: paymentMethod === "upi" ? "completed" : "pending",
      created_at: new Date().toISOString(),
      customer_info: customerInfo || null,
      upi_reference: upiReference,
    }

await set(newOrderRef, orderData)
    console.log("Order created with ID:", orderId)

// Add order items
    const orderItemsRef = ref(database, `orderItems/${orderId}`)

for (const item of cartItems) {
      const newItemRef = push(orderItemsRef)
      await set(newItemRef, {
        product_id: item.product_id || item.id,
        quantity: item.quantity,
        price: item.price || item.products?.price || 0,
        created_at: new Date().toISOString(),
      })
    }
    console.log("Order items added successfully")

// Clear the user's cart if they're logged in
    if (userId) {
      await remove(ref(database, `carts/${userId}`))
      console.log("User cart cleared")
    } else {
      // For guest users, clear localStorage cart
      if (typeof window !== "undefined") {
        localStorage.removeItem("guest_cart")
        console.log("Guest cart cleared")
      }
    }

// Create notification for admin
    try {
      await createAdminNotification({
        type: "new_order",
        message: `New order #${orderId} has been placed for ₹${totalAmount.toFixed(2)} via ${paymentMethod.toUpperCase()}`,
        resource_id: orderId,
      })
      console.log("Admin notification created")
    } catch (notifError) {
      console.error("Error creating admin notification:", notifError)
      // Continue with order creation even if notification fails
    }

return orderId
  } catch (error) {
    console.error("Error creating order:", error)
    throw error
  }
}

// Get order details
export async function fetchOrderDetails(orderId: string) {
  try {
    // Get order data
    const orderRef = ref(database, `orders/${orderId}`)
    const orderSnapshot = await get(orderRef)

if (!orderSnapshot.exists()) {
      return null
    }

const order = orderSnapshot.val()

// Get order items
    const orderItemsRef = ref(database, `orderItems/${orderId}`)
    const itemsSnapshot = await get(orderItemsRef)

const items = []

if (itemsSnapshot.exists()) {
      // Convert Firebase object to array
      const itemsData = itemsSnapshot.val()

for (const [itemId, itemData] of Object.entries(itemsData)) {
        const item = {
          id: itemId,
          ...(itemData as any),
        }

// Get product details for each item
        try {
          const productRef = ref(database, `products/${item.product_id}`)
          const productSnapshot = await get(productRef)

if (productSnapshot.exists()) {
            item.products = productSnapshot.val()
          }
        } catch (productError) {
          console.error("Error fetching product details:", productError)
          // Continue with other items even if one product fetch fails
        }

items.push(item)
      }
    }

return {
      ...order,
      id: orderId,
      items,
    }
  } catch (error) {
    console.error("Error fetching order details:", error)
    throw error
  }
}

// Get user orders
export async function getUserOrders(userId: string) {
  try {
    const ordersRef = ref(database, "orders")
    const snapshot = await get(ordersRef)

if (!snapshot.exists()) {
      return []
    }

// Filter orders by user_id and convert to array
    return Object.entries(snapshot.val())
      .map(([id, data]) => ({
        id,
        ...(data as any),
      }))
      .filter((order) => order.user_id === userId)
      .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
  } catch (error) {
    console.error("Error fetching user orders:", error)
    return []
  }
}

// Update order status
export async function updateOrderStatus(orderId: string, status: string) {
  try {
    await update(ref(database, `orders/${orderId}`), {
      status,
      updated_at: new Date().toISOString(),
    })
    return true
  } catch (error) {
    console.error("Error updating order status:", error)
    throw error
  }
}

// Update payment status
export async function updatePaymentStatus(orderId: string, status: string) {
  try {
    await update(ref(database, `orders/${orderId}`), {
      payment_status: status,
      updated_at: new Date().toISOString(),
    })
    return true
  } catch (error) {
    console.error("Error updating payment status:", error)
    throw error
  }
}

// Add item to cart
export async function addToCart(userId: string, productId: string, quantity: number, price: number) {
  try {
    const cartRef = ref(database, `carts/${userId}`)
    const snapshot = await get(cartRef)

if (snapshot.exists()) {
      // Check if product already exists in cart
      const cart = snapshot.val()
      let existingItem = null
      let existingItemKey = null

Object.entries(cart).forEach(([key, item]: [string, any]) => {
        if (item.product_id === productId) {
          existingItem = item
          existingItemKey = key
        }
      })

if (existingItem) {
        // Update quantity if product already in cart
        await update(ref(database, `carts/${userId}/${existingItemKey}`), {
          quantity: existingItem.quantity + quantity,
        })
      } else {
        // Add new item to cart
        const newItemRef = push(cartRef)
        await set(newItemRef, {
          product_id: productId,
          quantity,
          price,
          added_at: new Date().toISOString(),
        })
      }
    } else {
      // Create new cart with item
      const newItemRef = push(cartRef)
      await set(newItemRef, {
        product_id: productId,
        quantity,
        price,
        added_at: new Date().toISOString(),
      })
    }

return true
  } catch (error) {
    console.error("Error adding to cart:", error)
    throw error
  }
}

// Get user cart
export async function getUserCart(userId: string) {
  try {
    console.log("Getting cart for user:", userId)
    const cartRef = ref(database, `carts/${userId}`)
    const snapshot = await get(cartRef)

if (!snapshot.exists()) {
      console.log("No cart found for user")
      return []
    }

const cartItems = []
    const cart = snapshot.val()

for (const [itemId, itemData] of Object.entries(cart)) {
      const item = {
        id: itemId,
        ...(itemData as any),
      }

try {
        // Get product details
        const productRef = ref(database, `products/${item.product_id}`)
        const productSnapshot = await get(productRef)

if (productSnapshot.exists()) {
          item.products = productSnapshot.val()
        }
      } catch (productError) {
        console.error("Error fetching product details for cart item:", productError)
        // Continue with other items even if one product fetch fails
      }

cartItems.push(item)
    }

console.log("Cart items loaded:", cartItems.length)
    return cartItems
  } catch (error) {
    console.error("Error fetching user cart:", error)
    return []
  }
}

// Update cart item quantity
export async function updateCartItemQuantity(userId: string | null, itemId: string, quantity: number) {
  if (userId) {
    // Update Firebase cart for logged-in users
    try {
      await update(ref(database, `carts/${userId}/${itemId}`), {
        quantity,
        updated_at: new Date().toISOString(),
      })
      return true
    } catch (error) {
      console.error("Error updating cart item quantity:", error)
      throw error
    }
  } else {
    // Update localStorage cart for guest users
    try {
      const cartItems = JSON.parse(localStorage.getItem("guest_cart") || "[]")
      const itemIndex = cartItems.findIndex((item: any) => item.id === itemId)

if (itemIndex >= 0) {
        cartItems[itemIndex].quantity = quantity
        localStorage.setItem("guest_cart", JSON.stringify(cartItems))
      }

return true
    } catch (error) {
      console.error("Error updating guest cart item quantity:", error)
      throw error
    }
  }
}

// Remove item from cart
export async function removeCartItem(userId: string | null, itemId: string) {
  if (userId) {
    // Remove from Firebase cart for logged-in users
    try {
      await remove(ref(database, `carts/${userId}/${itemId}`))
      return true
    } catch (error) {
      console.error("Error removing cart item:", error)
      throw error
    }
  } else {
    // Remove from localStorage cart for guest users
    try {
      const cartItems = JSON.parse(localStorage.getItem("guest_cart") || "[]")
      const updatedCart = cartItems.filter((item: any) => item.id !== itemId)
      localStorage.setItem("guest_cart", JSON.stringify(updatedCart))
      return true
    } catch (error) {
      console.error("Error removing guest cart item:", error)
      throw error
    }
  }
}

// Clear cart
export async function clearCart(userId: string | null) {
  if (userId) {
    // Clear Firebase cart for logged-in users
    try {
      await remove(ref(database, `carts/${userId}`))
      return true
    } catch (error) {
      console.error("Error clearing cart:", error)
      throw error
    }
  } else {
    // Clear localStorage cart for guest users
    try {
      localStorage.setItem("guest_cart", "[]")
      return true
    } catch (error) {
      console.error("Error clearing guest cart:", error)
      throw error
    }
  }
}
[V0_FILE]typescriptreact:file="app/cart/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { Minus, Plus, Trash2, ShoppingBag, AlertCircle, ArrowRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { useAuth } from "@/contexts/auth-context"
import { useToast } from "@/hooks/use-toast"
import { getUserCart, updateCartItemQuantity, removeCartItem } from "@/lib/checkout"
import { getGuestCart, updateGuestCartItemQuantity, removeGuestCartItem, clearGuestCart } from "@/lib/guest-cart"
import ProductImage from "@/components/product-image"
import { Skeleton } from "@/components/ui/skeleton"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export default function CartPage() {
  const { user } = useAuth()
  const { toast } = useToast()
  const [cartItems, setCartItems] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [processingAction, setProcessingAction] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [clearingCart, setClearingCart] = useState(false)

useEffect(() => {
    // Load cart items
    const loadCart = async () => {
      setLoading(true)
      setError(null)
      try {
        if (user) {
          // Load cart from Firebase for logged-in users
          const items = await getUserCart(user.uid)
          setCartItems(items)
        } else {
          // Load cart from localStorage for guests
          const guestCart = getGuestCart()
          setCartItems(guestCart)
        }
      } catch (error) {
        console.error("Error loading cart:", error)
        setError("Failed to load your cart. Please try refreshing the page.")
        toast({
          title: "Error",
          description: "Failed to load your cart. Please try again.",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

loadCart()
  }, [user, toast])

const updateQuantity = async (id: string, newQuantity: number) => {
    if (newQuantity < 1) return

setProcessingAction(id)
    try {
      let success = false

if (user) {
        // Update quantity in Firebase for logged-in users
        await updateCartItemQuantity(user.uid, id, newQuantity)
        success = true
      } else {
        // Update quantity in localStorage for guests
        success = updateGuestCartItemQuantity(cartItems.find((item) => item.id === id)?.product_id || id, newQuantity)
      }

if (success) {
        // Update local state
        setCartItems(cartItems.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item)))
      }
    } catch (error) {
      console.error("Error updating quantity:", error)
      toast({
        title: "Error",
        description: "Failed to update item quantity. Please try again.",
        variant: "destructive",
      })
    } finally {
      setProcessingAction(null)
    }
  }

const removeItem = async (id: string) => {
    setProcessingAction(id)
    try {
      let success = false

if (user) {
        // Remove item from Firebase for logged-in users
        await removeCartItem(user.uid, id)
        success = true
      } else {
        // Remove item from localStorage for guests
        success = removeGuestCartItem(cartItems.find((item) => item.id === id)?.product_id || id)
      }

if (success) {
        // Update local state
        setCartItems(cartItems.filter((item) => item.id !== id))

toast({
          title: "Item removed",
          description: "Item has been removed from your cart.",
        })
      }
    } catch (error) {
      console.error("Error removing item:", error)
      toast({
        title: "Error",
        description: "Failed to remove item from cart. Please try again.",
        variant: "destructive",
      })
    } finally {
      setProcessingAction(null)
    }
  }

const clearCart = async () => {
    if (!confirm("Are you sure you want to clear your cart? This cannot be undone.")) {
      return
    }

setClearingCart(true)
    try {
      if (user) {
        // Clear Firebase cart for logged-in users
        await clearGuestCart(user.uid)
      } else {
        // Clear localStorage cart for guests
        clearGuestCart()
      }

// Update local state
      setCartItems([])

toast({
        title: "Cart cleared",
        description: "Your cart has been cleared.",
      })
    } catch (error) {
      console.error("Error clearing cart:", error)
      toast({
        title: "Error",
        description: "Failed to clear cart. Please try again.",
        variant: "destructive",
      })
    } finally {
      setClearingCart(false)
    }
  }

const calculateSubtotal = () => {
    return cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
  }

if (loading) {
    return (
      <div className="container px-4 py-6 md:py-8">
        <h1 className="text-xl font-bold md:text-2xl">Shopping Cart</h1>
        <div className="mt-4 md:mt-6 grid gap-4 md:gap-6 md:grid-cols-3">
          <div className="md:col-span-2">
            <div className="rounded-lg border">
              <div className="p-4">
                <div className="space-y-4">
                  {[1, 2, 3].map((i) => (
                    <div key={i} className="flex py-4">
                      <Skeleton className="h-16 w-16 md:h-24 md:w-24 rounded-md" />
                      <div className="ml-3 md:ml-4 flex flex-1 flex-col">
                        <div className="space-y-1 md:space-y-2">
                          <Skeleton className="h-3 md:h-4 w-3/4" />
                          <Skeleton className="h-3 md:h-4 w-1/4" />
                        </div>
                        <div className="mt-auto flex items-end justify-between">
                          <Skeleton className="h-6 md:h-8 w-20 md:w-24" />
                          <Skeleton className="h-6 md:h-8 w-14 md:w-16" />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <div>
            <Skeleton className="h-[250px] md:h-[300px] w-full rounded-lg" />
          </div>
        </div>
      </div>
    )
  }

if (error) {
    return (
      <div className="container px-4 py-6 md:py-8">
        <h1 className="text-xl font-bold md:text-2xl">Shopping Cart</h1>
        <Alert variant="destructive" className="mt-4">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
        <div className="mt-4 flex justify-center">
          <Button onClick={() => window.location.reload()}>Refresh Page</Button>
        </div>
      </div>
    )
  }

if (cartItems.length === 0) {
    return (
      <div className="container flex min-h-[60vh] flex-col items-center justify-center py-8">
        <ShoppingBag className="h-12 w-12 md:h-16 md:w-16 text-muted-foreground" />
        <h1 className="mt-4 text-xl md:text-2xl font-bold">Your cart is empty</h1>
        <p className="mt-2 text-center text-sm md:text-base text-muted-foreground">
          Looks like you haven't added any products to your cart yet.
        </p>
        <Link href="/">
          <Button className="mt-6 bg-orange-500 hover:bg-orange-600">Continue Shopping</Button>
        </Link>
      </div>
    )
  }

return (
    <div className="container px-4 py-6 md:py-8">
      <h1 className="text-xl font-bold md:text-2xl">Shopping Cart</h1>
      <p className="text-muted-foreground text-sm md:text-base mt-1 md:mt-2">
        Review and update your items before checkout.
      </p>

<div className="mt-4 md:mt-6 grid gap-4 md:gap-6 md:grid-cols-3">
        <div className="md:col-span-2">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between p-4 md:p-6">
              <CardTitle className="text-base md:text-lg">Cart Items ({cartItems.length})</CardTitle>
              <Button
                variant="outline"
                size="sm"
                onClick={clearCart}
                disabled={clearingCart}
                className="text-muted-foreground text-xs md:text-sm h-8 md:h-9"
              >
                {clearingCart ? "Clearing..." : "Clear Cart"}
              </Button>
            </CardHeader>
            <CardContent className="p-4 md:p-6 pt-0 md:pt-0">
              <div className="flow-root">
                <ul className="-my-4 md:-my-6 divide-y">
                  {cartItems.map((item) => (
                    <li key={item.id} className="flex py-4 md:py-6">
                      <div className="relative h-16 w-16 md:h-24 md:w-24 flex-shrink-0 overflow-hidden rounded-md border">
                        <ProductImage
                          src={item.products?.image_url || "/placeholder.svg"}
                          alt={item.products?.name || "Product"}
                          width={96}
                          height={96}
                          quality={60}
                        />
                      </div>
                      <div className="ml-3 md:ml-4 flex flex-1 flex-col">
                        <div>
                          <div className="flex justify-between text-sm md:text-base font-medium">
                            <h3 className="line-clamp-2">
                              <Link href={`/product/${item.product_id}`} className="hover:text-orange-500">
                                {item.products?.name || "Product"}
                              </Link>
                            </h3>
                            <p className="ml-2 md:ml-4 whitespace-nowrap">₹{(item.price * item.quantity).toFixed(2)}</p>
                          </div>
                          <p className="mt-1 text-xs md:text-sm text-muted-foreground">₹{item.price.toFixed(2)} each</p>
                        </div>
                        <div className="flex flex-1 items-end justify-between mt-2 md:mt-4">
                          <div className="flex items-center">
                            <Button
                              variant="outline"
                              size="icon"
                              className="h-7 w-7 md:h-8 md:w-8 rounded-r-none"
                              onClick={() => updateQuantity(item.id, item.quantity - 1)}
                              disabled={processingAction === item.id || item.quantity <= 1}
                            >
                              <Minus className="h-3 w-3" />
                              <span className="sr-only">Decrease quantity</span>
                            </Button>
                            <div className="flex h-7 w-8 md:h-8 md:w-12 items-center justify-center border-y text-xs md:text-sm">
                              {processingAction === item.id ? (
                                <div className="h-3 w-3 animate-spin rounded-full border-2 border-solid border-current border-t-transparent"></div>
                              ) : (
                                item.quantity
                              )}
                            </div>
                            <Button
                              variant="outline"
                              size="icon"
                              className="h-7 w-7 md:h-8 md:w-8 rounded-l-none"
                              onClick={() => updateQuantity(item.id, item.quantity + 1)}
                              disabled={processingAction === item.id}
                            >
                              <Plus className="h-3 w-3" />
                              <span className="sr-only">Increase quantity</span>
                            </Button>
                          </div>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="text-muted-foreground h-7 md:h-8 text-xs md:text-sm px-2 md:px-3"
                            onClick={() => removeItem(item.id)}
                            disabled={processingAction === item.id}
                          >
                            {processingAction === item.id ? (
                              <div className="h-3 w-3 md:h-4 md:w-4 animate-spin rounded-full border-2 border-solid border-current border-t-transparent"></div>
                            ) : (
                              <>
                                <Trash2 className="mr-1 h-3 w-3 md:h-4 md:w-4" />
                                Remove
                              </>
                            )}
                          </Button>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </CardContent>
            <CardFooter className="border-t px-4 py-3 md:px-6 md:py-4 flex flex-col sm:flex-row gap-2 sm:gap-0 sm:justify-between">
              <Link href="/" className="w-full sm:w-auto">
                <Button variant="outline" size="sm" className="w-full sm:w-auto text-xs md:text-sm">
                  Continue Shopping
                </Button>
              </Link>
              <Link href="/checkout" className="w-full sm:w-auto">
                <Button
                  variant="outline"
                  size="sm"
                  className="w-full sm:w-auto bg-orange-500 text-white hover:bg-orange-600 text-xs md:text-sm"
                >
                  Proceed to Checkout
                  <ArrowRight className="ml-2 h-3 w-3 md:h-4 md:w-4" />
                </Button>
              </Link>
            </CardFooter>
          </Card>
        </div>
        <div>
          <Card className="sticky top-4">
            <CardHeader className="p-4 md:p-6">
              <CardTitle className="text-base md:text-lg">Order Summary</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 p-4 md:p-6 pt-0 md:pt-0">
              <div className="space-y-2">
                <div className="flex items-center justify-between text-sm md:text-base">
                  <p className="text-muted-foreground">Subtotal</p>
                  <p className="font-medium">₹{calculateSubtotal().toFixed(2)}</p>
                </div>
                <div className="flex items-center justify-between text-sm md:text-base">
                  <p className="text-muted-foreground">Shipping</p>
                  <p className="font-medium">₹0.00</p>
                </div>
                <div className="flex items-center justify-between text-sm md:text-base">
                  <p className="text-muted-foreground">Tax</p>
                  <p className="font-medium">₹0.00</p>
                </div>
                <Separator />
                <div className="flex items-center justify-between font-medium text-sm md:text-base">
                  <p>Total</p>
                  <p>₹{calculateSubtotal().toFixed(2)}</p>
                </div>
              </div>

<Button
                className="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-sm md:text-base"
                onClick={() => {
                  if (user) {
                    // Navigate to checkout
                    window.location.href = "/checkout"
                  } else {
                    // Redirect to login or guest checkout
                    window.location.href = "/checkout?guest=true"
                  }
                }}
              >
                Proceed to Checkout
              </Button>

<div className="mt-4 text-xs text-muted-foreground">
                <p>* Free shipping on all orders</p>
                <p>* Secure checkout process</p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/supabase-image-upload.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import Image from "next/image"
import { Upload, X, Check, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { uploadToSupabaseStorage } from "@/lib/supabase-storage"

interface SupabaseImageUploadProps {
  onUploadComplete: (url: string) => void
  folder?: string
  existingImageUrl?: string
  className?: string
  maxSizeMB?: number
}

export default function SupabaseImageUpload({
  onUploadComplete,
  folder = "products",
  existingImageUrl,
  className = "",
  maxSizeMB = 5,
}: SupabaseImageUploadProps) {
  const [isUploading, setIsUploading] = useState(false)
  const [uploadError, setUploadError] = useState<string | null>(null)
  const [previewUrl, setPreviewUrl] = useState<string | null>(existingImageUrl || null)
  const [uploadSuccess, setUploadSuccess] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

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

// Validate file size
    const fileSizeInMB = file.size / (1024 * 1024)
    if (fileSizeInMB > maxSizeMB) {
      setUploadError(`File size exceeds ${maxSizeMB}MB limit`)
      return
    }

// Validate file type
    if (!file.type.startsWith("image/")) {
      setUploadError("Only image files are allowed")
      return
    }

// Create a preview
    const objectUrl = URL.createObjectURL(file)
    setPreviewUrl(objectUrl)

setIsUploading(true)
    setUploadError(null)
    setUploadSuccess(false)

try {
      // Upload to Supabase Storage
      const imageUrl = await uploadToSupabaseStorage(file, folder)

// Call the callback with the image URL
      onUploadComplete(imageUrl)
      setUploadSuccess(true)

// Clean up the object URL after a delay to show success state
      setTimeout(() => {
        setUploadSuccess(false)
      }, 3000)
    } catch (error: any) {
      console.error("Error uploading image:", error)
      setUploadError(error.message || "Failed to upload image. Please try again.")

// Remove preview on error if there was no existing image
      if (previewUrl && !existingImageUrl) {
        URL.revokeObjectURL(previewUrl)
        setPreviewUrl(null)
      }
    } finally {
      setIsUploading(false)
    }
  }

const handleRemoveImage = () => {
    // Clean up object URL if it was created locally
    if (previewUrl && previewUrl !== existingImageUrl) {
      URL.revokeObjectURL(previewUrl)
    }

setPreviewUrl(null)
    setUploadError(null)
    setUploadSuccess(false)
    onUploadComplete("")

// Reset file input
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

return (
    <div className={`space-y-4 ${className}`}>
      {uploadError && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Upload Failed</AlertTitle>
          <AlertDescription>{uploadError}</AlertDescription>
        </Alert>
      )}

{previewUrl ? (
        <div className="relative aspect-square w-full overflow-hidden rounded-lg border">
          <Image
            src={previewUrl || "/placeholder.svg"}
            alt="Image preview"
            fill
            className="object-cover"
            sizes="(max-width: 768px) 100vw, 300px"
          />

{uploadSuccess && (
            <div className="absolute inset-0 flex items-center justify-center bg-black/50">
              <div className="rounded-full bg-green-500 p-2">
                <Check className="h-6 w-6 text-white" />
              </div>
            </div>
          )}

<Button
            variant="destructive"
            size="icon"
            className="absolute right-2 top-2 h-8 w-8 rounded-full"
            onClick={handleRemoveImage}
          >
            <X className="h-4 w-4" />
            <span className="sr-only">Remove image</span>
          </Button>
        </div>
      ) : (
        <div
          onClick={triggerFileInput}
          className="flex aspect-square w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed bg-muted/30 transition-colors hover:bg-muted/50"
        >
          <div className="flex flex-col items-center gap-1 text-center">
            <Upload className="h-10 w-10 text-muted-foreground" />
            <span className="text-sm font-medium">Upload Image</span>
            <span className="text-xs text-muted-foreground">
              {isUploading ? "Uploading..." : `Click to browse (Max: ${maxSizeMB}MB)`}
            </span>
          </div>
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            className="hidden"
            onChange={handleFileChange}
            disabled={isUploading}
          />
        </div>
      )}

{isUploading && (
        <div className="flex items-center justify-center">
          <div className="h-5 w-5 animate-spin rounded-full border-2 border-solid border-current border-t-transparent"></div>
          <span className="ml-2 text-sm">Uploading to Supabase...</span>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/image-upload.ts" isMerged="true" isEdit="true"
import { uploadToSupabaseStorage } from "./supabase-storage"

// Upload user avatar - using Supabase storage
export async function uploadUserAvatar(userId: string, file: File) {
  try {
    console.log("Uploading avatar to Supabase storage")
    const imageUrl = await uploadToSupabaseStorage(file, "avatars")
    console.log("Avatar uploaded successfully:", imageUrl)
    return imageUrl
  } catch (error) {
    console.error("Error uploading avatar:", error)
    return "/placeholder.svg?height=200&width=200"
  }
}

// Upload product image - using Supabase storage
export async function uploadProductImage(productId: number, file: File) {
  try {
    console.log("Uploading product image to Supabase storage")
    const imageUrl = await uploadToSupabaseStorage(file, "products")
    console.log("Product image uploaded successfully:", imageUrl)
    return imageUrl
  } catch (error) {
    console.error("Error uploading product image:", error)
    return "/placeholder.svg?height=300&width=300"
  }
}

// Upload multiple product images - using Supabase storage
export async function uploadProductImages(productId: number, files: File[]) {
  try {
    console.log(`Uploading ${files.length} product images for product ID ${productId}`)
    const uploadPromises = files.map((file) => uploadProductImage(productId, file))
    return Promise.all(uploadPromises)
  } catch (error) {
    console.error("Error uploading product images:", error)
    return ["/placeholder.svg?height=300&width=300"]
  }
}

// Upload banner image - using Supabase storage
export async function uploadBannerImage(file: File) {
  try {
    console.log("Uploading banner image to Supabase storage")
    const imageUrl = await uploadToSupabaseStorage(file, "banners")
    console.log("Banner image uploaded successfully:", imageUrl)
    return imageUrl
  } catch (error) {
    console.error("Error uploading banner image:", error)
    return "/placeholder.svg?height=400&width=1200"
  }
}
[V0_FILE]typescriptreact:file="app/api/upload/route.ts" isMerged="true" isEdit="true"
import { NextResponse } from "next/server"
import { uploadToSupabaseStorage } from "@/lib/supabase-storage"

export async function POST(request: Request) {
  try {
    const formData = await request.formData()
    const file = formData.get("file") as File
    const folder = (formData.get("folder") as string) || "products"

if (!file) {
      return NextResponse.json({ error: "No file provided" }, { status: 400 })
    }

// Upload to Supabase storage
    const imageUrl = await uploadToSupabaseStorage(file, folder)

return NextResponse.json({
      success: true,
      url: imageUrl,
    })
  } catch (error: any) {
    console.error("Error in upload API:", error)
    return NextResponse.json({ error: error.message || "Upload failed" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/categories/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowLeft, Grid } from "lucide-react"
import { Button } from "@/components/ui/button"
import { getCategories } from "@/lib/categories"

export default function CategoriesPage() {
  const [categories, setCategories] = useState(getCategories())

return (
    <div className="container px-4 py-6">
      <div className="flex items-center mb-6">
        <Button variant="ghost" size="sm" onClick={() => window.history.back()} className="mr-2">
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>
        <h1 className="text-xl font-bold">All Categories</h1>
      </div>

<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
        <Link
          href="/deals"
          className="flex flex-col items-center justify-center p-4 rounded-lg border bg-white shadow-sm hover:shadow-md transition-all"
        >
          <div className="w-16 h-16 rounded-full bg-orange-100 flex items-center justify-center mb-3">
            <span className="text-orange-500 font-bold text-xl">%</span>
          </div>
          <span className="text-sm font-medium text-center">Today's Deals</span>
        </Link>

<Link
          href="/new-arrivals"
          className="flex flex-col items-center justify-center p-4 rounded-lg border bg-white shadow-sm hover:shadow-md transition-all"
        >
          <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-3">
            <span className="text-green-500 font-bold text-xl">New</span>
          </div>
          <span className="text-sm font-medium text-center">New Arrivals</span>
        </Link>

{categories.map((category) => (
          <Link
            key={category.id}
            href={`/category/${category.slug}`}
            className="flex flex-col items-center justify-center p-4 rounded-lg border bg-white shadow-sm hover:shadow-md transition-all"
          >
            <div className="w-16 h-16 rounded-full bg-orange-50 flex items-center justify-center mb-3">
              {category.imageUrl ? (
                <Image
                  src={category.imageUrl || "/placeholder.svg"}
                  alt={category.name}
                  width={40}
                  height={40}
                  className="rounded-full object-cover"
                />
              ) : (
                <Grid className="h-6 w-6 text-orange-500" />
              )}
            </div>
            <span className="text-sm font-medium text-center">{category.name}</span>
          </Link>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/category-section.tsx" isMerged="true" isEdit="true"
"use client"

interface CategorySectionProps {
  title: string
  viewAllLink: string
  categoryId?: string
  limit?: number
}

export default function CategorySection({ title, viewAllLink, categoryId, limit = 5 }: CategorySectionProps) {
  const [products, setProducts] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchCategoryProducts = async () => {
      setLoading(true)
      try {
        // Fetch products for this category
        const { products } = await getAllProducts({
          category: categoryId || title,
          limit: limit,
          sortBy: "date_added_desc", // Show newest first
        })
        setProducts(products)
      } catch (error) {
        console.error(`Error fetching products for category ${title}:`, error)
      } finally {
        setLoading(false)
      }
    }

fetchCategoryProducts()
  }, [title, categoryId, limit])

if (loading) {
    return (
      <section className="py-8 bg-gradient-to-r from-orange-50 to-white">
        <div className="container px-4">
          <div className="mb-6 flex items-center justify-between">
            <h2 className="text-2xl font-bold text-orange-800">{title}</h2>
            <Link
              href={viewAllLink}
              className="flex items-center text-sm font-medium text-orange-600 hover:text-orange-700"
            >
              View All
              <ChevronRight className="ml-1 h-4 w-4" />
            </Link>
          </div>
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
            {Array(5)
              .fill(0)
              .map((_, i) => (
                <div key={i} className="animate-pulse">
                  <Skeleton className="aspect-square rounded-lg" />
                  <div className="mt-3 space-y-2">
                    <Skeleton className="h-4 rounded" />
                    <Skeleton className="h-4 w-1/2 rounded" />
                  </div>
                </div>
              ))}
          </div>
        </div>
      </section>
    )
  }

if (products.length === 0) {
    return (
      <section className="py-8 bg-gradient-to-r from-orange-50 to-white">
        <div className="container px-4">
          <div className="mb-6 flex items-center justify-between">
            <h2 className="text-2xl font-bold text-orange-800">{title}</h2>
            <Link
              href={viewAllLink}
              className="flex items-center text-sm font-medium text-orange-600 hover:text-orange-700"
            >
              View All
              <ChevronRight className="ml-1 h-4 w-4" />
            </Link>
          </div>
          <div className="rounded-lg border border-dashed p-8 text-center">
            <p className="text-muted-foreground">No products found in this category.</p>
          </div>
        </div>
      </section>
    )
  }

return (
    <section className="py-8 bg-gradient-to-r from-orange-50 to-white">
      <div className="container px-4">
        <div className="mb-6 flex items-center justify-between">
          <h2 className="text-2xl font-bold text-orange-800">{title}</h2>
          <div className="flex items-center gap-2">
            <Link
              href="/new-arrivals"
              className="text-sm font-medium text-orange-600 hover:text-orange-700 hidden sm:block"
            >
              New Arrivals
            </Link>
            <Link
              href={viewAllLink}
              className="flex items-center text-sm font-medium text-orange-600 hover:text-orange-700"
            >
              View All
              <ChevronRight className="ml-1 h-4 w-4" />
            </Link>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
          {products.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>

<div className="mt-6 text-center md:hidden">
          <Button asChild variant="outline" className="border-orange-500 text-orange-600 hover:bg-orange-50">
            <Link href={viewAllLink}>
              View All {title}
              <ChevronRight className="ml-1 h-4 w-4" />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/category/[slug]/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { ChevronRight, SlidersHorizontal, RefreshCw, Filter, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { getAllProducts } from "@/lib/products-db"
import { getCategoryBySlug } from "@/lib/categories"
import { Skeleton } from "@/components/ui/skeleton"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import ProductCard from "@/components/product-card"

interface CategoryPageProps {
  params: {
    slug: string
  }
}

export default function CategoryPage({ params }: CategoryPageProps) {
  const [category, setCategory] = useState<any>(null)
  const [products, setProducts] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const [sortBy, setSortBy] = useState("newest")
  const [priceFilter, setPriceFilter] = useState<string[]>([])
  const [stockFilter, setStockFilter] = useState<string[]>([])
  const [discountFilter, setDiscountFilter] = useState<string[]>([])
  const [showFilters, setShowFilters] = useState(false)
  const [filtersOpen, setFiltersOpen] = useState(false)

useEffect(() => {
    const loadCategoryData = async () => {
      setLoading(true)
      try {
        // Get category info
        const categoryData = getCategoryBySlug(params.slug)
        if (!categoryData) {
          setCategory(null)
          setProducts([])
          return
        }

setCategory(categoryData)

// Get products for this category
        const { products } = await getAllProducts({
          category: categoryData.name,
        })

setProducts(products)
      } catch (error) {
        console.error("Error loading category data:", error)
      } finally {
        setLoading(false)
      }
    }

loadCategoryData()
  }, [params.slug])

const refreshProducts = async () => {
    if (!category) return

setRefreshing(true)
    try {
      // Fetch fresh products
      const { products } = await getAllProducts({
        category: category.name,
      })

setProducts(products)
    } catch (error) {
      console.error("Error refreshing products:", error)
    } finally {
      setRefreshing(false)
    }
  }

// Handle price filter changes
  const togglePriceFilter = (value: string) => {
    setPriceFilter((prev) => (prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]))
  }

// Handle stock filter changes
  const toggleStockFilter = (value: string) => {
    setStockFilter((prev) => (prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]))
  }

// Handle discount filter changes
  const toggleDiscountFilter = (value: string) => {
    setDiscountFilter((prev) => (prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]))
  }

// Apply filters and sorting
  const filteredProducts = products
    .filter((product) => {
      // Apply price filters
      if (priceFilter.length > 0) {
        const price = product.discounted_price || product.price

const matchesPrice = priceFilter.some((filter) => {
          switch (filter) {
            case "under500":
              return price < 500
            case "500to1000":
              return price >= 500 && price <= 1000
            case "1000to5000":
              return price > 1000 && price <= 5000
            case "5000to10000":
              return price > 5000 && price <= 10000
            case "above10000":
              return price > 10000
            default:
              return true
          }
        })

if (!matchesPrice) return false
      }

// Apply stock filters
      if (stockFilter.length > 0) {
        if (stockFilter.includes("in-stock") && !product.in_stock) return false
        if (stockFilter.includes("out-of-stock") && product.in_stock) return false
      }

// Apply discount filters
      if (discountFilter.length > 0) {
        if (!product.discounted_price) return false

const discountPercent = ((product.price - product.discounted_price) / product.price) * 100

const matchesDiscount = discountFilter.some((filter) => {
          switch (filter) {
            case "discount10":
              return discountPercent >= 10
            case "discount20":
              return discountPercent >= 20
            case "discount30":
              return discountPercent >= 30
            default:
              return true
          }
        })

if (!matchesDiscount) return false
      }

return true
    })
    .sort((a, b) => {
      // Apply sorting
      switch (sortBy) {
        case "newest":
          return new Date(b.date_added || b.created_at).getTime() - new Date(a.date_added || a.created_at).getTime()
        case "price_low":
          return (a.discounted_price || a.price) - (b.discounted_price || b.price)
        case "price_high":
          return (b.discounted_price || b.price) - (a.discounted_price || a.price)
        case "name_asc":
          return a.name.localeCompare(b.name)
        default:
          return 0
      }
    })

// Count active filters
  const activeFilterCount = priceFilter.length + stockFilter.length + discountFilter.length

if (loading) {
    return (
      <div className="container px-4 py-8 md:py-12">
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Link href="/" className="hover:text-foreground">
            Home
          </Link>
          <ChevronRight className="h-4 w-4" />
          <Skeleton className="h-4 w-24" />
        </div>

<div className="grid grid-cols-2 gap-4 sm:grid-cols-2 md:grid-cols-3">
              {Array(6)
                .fill(0)
                .map((_, i) => (
                  <div key={i} className="animate-pulse">
                    <Skeleton className="aspect-square rounded-lg" />
                    <div className="mt-3 space-y-2">
                      <Skeleton className="h-4 rounded" />
                      <Skeleton className="h-4 w-1/2 rounded" />
                    </div>
                  </div>
                ))}
            </div>
          </div>
        </div>
      </div>
    )
  }

if (!category) {
    return (
      <div className="container flex min-h-[400px] items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold">Category Not Found</h1>
          <p className="mt-2 text-muted-foreground">The category you are looking for does not exist.</p>
          <Link href="/">
            <Button className="mt-4 bg-orange-500 hover:bg-orange-600">Return to Home</Button>
          </Link>
        </div>
      </div>
    )
  }

<div className="mt-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-orange-800">{category.name}</h1>
          <p className="text-muted-foreground">{category.description}</p>
        </div>
        <Button variant="outline" size="sm" onClick={refreshProducts} disabled={refreshing}>
          <RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? "animate-spin" : ""}`} />
          Refresh
        </Button>
      </div>

<div className="mt-6 grid grid-cols-1 gap-8 md:grid-cols-[240px_1fr]">
        {/* Desktop filters sidebar */}
        <div className="hidden space-y-6 md:block">
          <div>
            <h3 className="mb-4 text-lg font-medium">Filters</h3>
            <Button
              variant="outline"
              size="sm"
              className="mb-4 w-full justify-start"
              onClick={() => {
                setPriceFilter([])
                setStockFilter([])
                setDiscountFilter([])
              }}
            >
              <Filter className="mr-2 h-4 w-4" />
              Clear Filters
            </Button>
          </div>

<div>
            <h4 className="mb-2 text-sm font-medium">Price Range</h4>
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Checkbox
                  id="price-1"
                  checked={priceFilter.includes("under500")}
                  onCheckedChange={() => togglePriceFilter("under500")}
                />
                <Label htmlFor="price-1" className="text-sm font-normal">
                  Under ₹500
                </Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="price-2"
                  checked={priceFilter.includes("500to1000")}
                  onCheckedChange={() => togglePriceFilter("500to1000")}
                />
                <Label htmlFor="price-2" className="text-sm font-normal">
                  ₹500 - ₹1000
                </Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="price-3"
                  checked={priceFilter.includes("1000to5000")}
                  onCheckedChange={() => togglePriceFilter("1000to5000")}
                />
                <Label htmlFor="price-3" className="text-sm font-normal">
                  ₹1000 - ₹5000
                </Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="price-4"
                  checked={priceFilter.includes("5000to10000")}
                  onCheckedChange={() => togglePriceFilter("5000to10000")}
                />
                <Label htmlFor="price-4" className="text-sm font-normal">
                  ₹5000 - ₹10000
                </Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="price-5"
                  checked={priceFilter.includes("above10000")}
                  onCheckedChange={() => togglePriceFilter("above10000")}
                />
                <Label htmlFor="price-5" className="text-sm font-normal">
                  Above ₹10000
                </Label>
              </div>
            </div>
          </div>

<div>
            <h4 className="mb-2 text-sm font-medium">Availability</h4>
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Checkbox
                  id="in-stock"
                  checked={stockFilter.includes("in-stock")}
                  onCheckedChange={() => toggleStockFilter("in-stock")}
                />
                <Label htmlFor="in-stock" className="text-sm font-normal">
                  In Stock
                </Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="out-of-stock"
                  checked={stockFilter.includes("out-of-stock")}
                  onCheckedChange={() => toggleStockFilter("out-of-stock")}
                />
                <Label htmlFor="out-of-stock" className="text-sm font-normal">
                  Out of Stock
                </Label>
              </div>
            </div>
          </div>

<div>
            <h4 className="mb-2 text-sm font-medium">Discount</h4>
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Checkbox
                  id="discount-1"
                  checked={discountFilter.includes("discount10")}
                  onCheckedChange={() => toggleDiscountFilter("discount10")}
                />
                <Label htmlFor="discount-1" className="text-sm font-normal">
                  10% or more
                </Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="discount-2"
                  checked={discountFilter.includes("discount20")}
                  onCheckedChange={() => toggleDiscountFilter("discount20")}
                />
                <Label htmlFor="discount-2" className="text-sm font-normal">
                  20% or more
                </Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="discount-3"
                  checked={discountFilter.includes("discount30")}
                  onCheckedChange={() => toggleDiscountFilter("discount30")}
                />
                <Label htmlFor="discount-3" className="text-sm font-normal">
                  30% or more
                </Label>
              </div>
            </div>
          </div>
        </div>

<div className="space-y-6">
          <div className="flex items-center justify-between">
            <p className="text-sm text-muted-foreground">Showing {filteredProducts.length} products</p>
            <div className="flex items-center gap-2">
              <Select value={sortBy} onValueChange={setSortBy}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Sort by" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="newest">Newest First</SelectItem>
                  <SelectItem value="price_low">Price: Low to High</SelectItem>
                  <SelectItem value="price_high">Price: High to Low</SelectItem>
                  <SelectItem value="name_asc">Name (A-Z)</SelectItem>
                </SelectContent>
              </Select>

{/* Mobile filter button */}
              <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
                <SheetTrigger asChild>
                  <Button variant="outline" size="sm" className="md:hidden relative">
                    <SlidersHorizontal className="mr-2 h-4 w-4" />
                    Filters
                    {activeFilterCount > 0 && (
                      <span className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-orange-500 text-xs font-semibold text-white">
                        {activeFilterCount}
                      </span>
                    )}
                  </Button>
                </SheetTrigger>
                <SheetContent side="left" className="w-[85%] sm:max-w-md p-0">
                  <SheetHeader className="p-6 bg-gradient-to-r from-orange-500 to-orange-600 text-white">
                    <SheetTitle className="text-white">Filters</SheetTitle>
                  </SheetHeader>
                  <div className="p-6 overflow-y-auto">
                    <Button
                      variant="outline"
                      size="sm"
                      className="mb-6 w-full justify-center"
                      onClick={() => {
                        setPriceFilter([])
                        setStockFilter([])
                        setDiscountFilter([])
                      }}
                    >
                      <Filter className="mr-2 h-4 w-4" />
                      Clear All Filters
                    </Button>

<div className="space-y-6">
                      <div>
                        <h4 className="mb-3 text-sm font-medium">Price Range</h4>
                        <div className="space-y-3">
                          {[
                            { id: "under500", label: "Under ₹500" },
                            { id: "500to1000", label: "₹500 - ₹1000" },
                            { id: "1000to5000", label: "₹1000 - ₹5000" },
                            { id: "5000to10000", label: "₹5000 - ₹10000" },
                            { id: "above10000", label: "Above ₹10000" },
                          ].map((item) => (
                            <div key={item.id} className="flex items-center gap-2">
                              <Checkbox
                                id={`mobile-${item.id}`}
                                checked={priceFilter.includes(item.id)}
                                onCheckedChange={() => togglePriceFilter(item.id)}
                              />
                              <Label htmlFor={`mobile-${item.id}`} className="text-sm font-normal">
                                {item.label}
                              </Label>
                            </div>
                          ))}
                        </div>
                      </div>

<div>
                        <h4 className="mb-3 text-sm font-medium">Availability</h4>
                        <div className="space-y-3">
                          <div className="flex items-center gap-2">
                            <Checkbox
                              id="mobile-in-stock"
                              checked={stockFilter.includes("in-stock")}
                              onCheckedChange={() => toggleStockFilter("in-stock")}
                            />
                            <Label htmlFor="mobile-in-stock" className="text-sm font-normal">
                              In Stock
                            </Label>
                          </div>
                          <div className="flex items-center gap-2">
                            <Checkbox
                              id="mobile-out-of-stock"
                              checked={stockFilter.includes("out-of-stock")}
                              onCheckedChange={() => toggleStockFilter("out-of-stock")}
                            />
                            <Label htmlFor="mobile-out-of-stock" className="text-sm font-normal">
                              Out of Stock
                            </Label>
                          </div>
                        </div>
                      </div>

<div>
                        <h4 className="mb-3 text-sm font-medium">Discount</h4>
                        <div className="space-y-3">
                          <div className="flex items-center gap-2">
                            <Checkbox
                              id="mobile-discount-1"
                              checked={discountFilter.includes("discount10")}
                              onCheckedChange={() => toggleDiscountFilter("discount10")}
                            />
                            <Label htmlFor="mobile-discount-1" className="text-sm font-normal">
                              10% or more
                            </Label>
                          </div>
                          <div className="flex items-center gap-2">
                            <Checkbox
                              id="mobile-discount-2"
                              checked={discountFilter.includes("discount20")}
                              onCheckedChange={() => toggleDiscountFilter("discount20")}
                            />
                            <Label htmlFor="mobile-discount-2" className="text-sm font-normal">
                              20% or more
                            </Label>
                          </div>
                          <div className="flex items-center gap-2">
                            <Checkbox
                              id="mobile-discount-3"
                              checked={discountFilter.includes("discount30")}
                              onCheckedChange={() => toggleDiscountFilter("discount30")}
                            />
                            <Label htmlFor="mobile-discount-3" className="text-sm font-normal">
                              30% or more
                            </Label>
                          </div>
                        </div>
                      </div>
                    </div>

<div className="mt-8 flex justify-end">
                      <Button className="bg-orange-500 hover:bg-orange-600" onClick={() => setFiltersOpen(false)}>
                        Apply Filters
                      </Button>
                    </div>
                  </div>
                </SheetContent>
              </Sheet>
            </div>
          </div>

{filteredProducts.length === 0 ? (
            <div className="flex min-h-[300px] items-center justify-center rounded-md border border-dashed">
              <div className="text-center">
                <h3 className="text-lg font-medium">No products found</h3>
                <p className="mt-1 text-sm text-muted-foreground">Try adjusting your filters or check back later.</p>
              </div>
            </div>
          ) : (
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-2 md:grid-cols-3">
              {filteredProducts.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          )}

{/* Show applied filters on mobile */}
          {activeFilterCount > 0 && (
            <div className="flex flex-wrap gap-2 md:hidden">
              {priceFilter.map((filter) => (
                <Button
                  key={filter}
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-1 text-xs"
                  onClick={() => togglePriceFilter(filter)}
                >
                  {filter === "under500" && "Under ₹500"}
                  {filter === "500to1000" && "₹500 - ₹1000"}
                  {filter === "1000to5000" && "₹1000 - ₹5000"}
                  {filter === "5000to10000" && "₹5000 - ₹10000"}
                  {filter === "above10000" && "Above ₹10000"}
                  <X className="h-3 w-3" />
                </Button>
              ))}
              {stockFilter.map((filter) => (
                <Button
                  key={filter}
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-1 text-xs"
                  onClick={() => toggleStockFilter(filter)}
                >
                  {filter === "in-stock" && "In Stock"}
                  {filter === "out-of-stock" && "Out of Stock"}
                  <X className="h-3 w-3" />
                </Button>
              ))}
              {discountFilter.map((filter) => (
                <Button
                  key={filter}
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-1 text-xs"
                  onClick={() => toggleDiscountFilter(filter)}
                >
                  {filter === "discount10" && "10% or more"}
                  {filter === "discount20" && "20% or more"}
                  {filter === "discount30" && "30% or more"}
                  <X className="h-3 w-3" />
                </Button>
              ))}
              <Button
                variant="ghost"
                size="sm"
                className="text-xs text-muted-foreground"
                onClick={() => {
                  setPriceFilter([])
                  setStockFilter([])
                  setDiscountFilter([])
                }}
              >
                Clear all
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true" isEdit="true"
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  },
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
  ({ side = "right", className, children, ...props }, ref) => (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
        {children}
        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
          <X className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  ),
)
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
)
SheetHeader.displayName = "SheetHeader"

const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
SheetFooter.displayName = "SheetFooter"

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true" isEdit="true"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]",
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]css:file="app/globals.css" isMerged="true" isEdit="true"
@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: 24 95% 53%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --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: 24 95% 53%;
    --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: 24 95% 53%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --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: 24 95% 53%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom scrollbar for webkit browsers */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* For Firefox */
.scrollbar-hide {
  scrollbar-width: none;
}

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* Product card hover effect */
.product-card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Custom gradient backgrounds */
.bg-orange-gradient {
  background: linear-gradient(to right, #f97316, #fb923c);
}

.bg-green-gradient {
  background: linear-gradient(to right, #22c55e, #4ade80);
}

/* Improved focus styles */
*:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}
[V0_FILE]typescriptreact:file="components/multi-image-upload.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Upload, X, Plus, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { uploadToSupabaseStorage } from "@/lib/supabase-storage"
import { ScrollArea } from "@/components/ui/scroll-area"
import ProductImage from "@/components/product-image"

interface MultiImageUploadProps {
  images: string[]
  onImagesChange: (images: string[]) => void
  maxImages?: number
}

export default function MultiImageUpload({ images, onImagesChange, maxImages = 10 }: MultiImageUploadProps) {
  const [isUploading, setIsUploading] = useState(false)
  const [currentUploadIndex, setCurrentUploadIndex] = useState<number | null>(null)

const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files || files.length === 0) return

// Check if adding these files would exceed the maximum
    if (images.length + files.length > maxImages) {
      alert(`You can only upload a maximum of ${maxImages} images.`)
      return
    }

setIsUploading(true)

try {
      const newImages = [...images]

for (let i = 0; i < files.length; i++) {
        const file = files[i]
        setCurrentUploadIndex(i)

// Upload to Supabase Storage
        const imageUrl = await uploadToSupabaseStorage(file, "products")
        newImages.push(imageUrl)
      }

onImagesChange(newImages)
    } catch (error) {
      console.error("Error uploading images:", error)
    } finally {
      setIsUploading(false)
      setCurrentUploadIndex(null)
    }
  }

const removeImage = (index: number) => {
    const newImages = [...images]
    newImages.splice(index, 1)
    onImagesChange(newImages)
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-medium">
          Product Images ({images.length}/{maxImages})
        </h3>
        <label className="cursor-pointer">
          <Button
            variant="outline"
            size="sm"
            disabled={isUploading || images.length >= maxImages}
            className="flex items-center gap-1"
          >
            {isUploading ? (
              <>
                <Loader2 className="h-4 w-4 animate-spin mr-1" />
                Uploading {currentUploadIndex !== null ? currentUploadIndex + 1 : ""}...
              </>
            ) : (
              <>
                <Plus className="h-4 w-4 mr-1" />
                Add Images
              </>
            )}
          </Button>
          <input
            type="file"
            accept="image/*"
            multiple
            className="hidden"
            onChange={handleFileChange}
            disabled={isUploading || images.length >= maxImages}
          />
        </label>
      </div>

{images.length > 0 ? (
        <ScrollArea className="h-[300px] rounded-md border p-4">
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {images.map((image, index) => (
              <div key={index} className="relative group">
                <div className="aspect-square relative rounded-md overflow-hidden border">
                  <ProductImage src={image} alt={`Product image ${index + 1}`} className="object-cover" />
                </div>
                <Button
                  variant="destructive"
                  size="icon"
                  className="absolute top-2 right-2 h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
                  onClick={() => removeImage(index)}
                  disabled={isUploading}
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ))}
          </div>
        </ScrollArea>
      ) : (
        <div className="border border-dashed rounded-md p-8 text-center">
          <Upload className="h-10 w-10 mx-auto text-muted-foreground" />
          <p className="mt-2 text-sm text-muted-foreground">No images uploaded yet</p>
          <p className="text-xs text-muted-foreground">Drag and drop or click to upload</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/view/[id]/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { ArrowLeft, Printer, Edit, AlertCircle } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import ProductImage from "@/components/product-image"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Skeleton } from "@/components/ui/skeleton"
import { getProductById } from "@/lib/products-db"
import { ScrollArea } from "@/components/ui/scroll-area"

interface ProductViewPageProps {
  params: {
    id: string
  }
}

export default function AdminProductViewPage({ params }: ProductViewPageProps) {
  const router = useRouter()
  const { toast } = useToast()
  const [product, setProduct] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const loadProduct = async () => {
      try {
        setLoading(true)
        const productData = await getProductById(params.id)

if (!productData) {
          setError("Product not found")
          return
        }

setProduct(productData)
      } catch (error: any) {
        console.error("Error loading product:", error)
        setError(error.message || "Failed to load product details")
        toast({
          title: "Error",
          description: "Failed to load product details. Please try again.",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

loadProduct()
  }, [params.id, toast])

const printProduct = () => {
    window.print()
  }

// Check if product is new (added in the last 7 days)
  const isNewProduct = () => {
    if (!product) return false
    const productDate = new Date(product.date_added || product.created_at)
    const sevenDaysAgo = new Date()
    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7)
    return productDate > sevenDaysAgo
  }

// Check if this is an Al Harameen product
  const isAlHarameenProduct = () => {
    if (!product) return false
    return (
      product.name.toLowerCase().includes("al harameen") &&
      (product.name.toLowerCase().includes("wrist watches") ||
        product.name.toLowerCase().includes("azan") ||
        product.name.toLowerCase().includes("clock"))
    )
  }

if (error || !product) {
    return (
      <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Button variant="outline" size="icon" onClick={() => router.back()}>
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <h2 className="text-3xl font-bold tracking-tight">Product Details</h2>
          </div>
        </div>

<Alert variant="destructive">
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{error || "Product not found"}</AlertDescription>
        </Alert>

<div className="flex justify-center">
          <Button onClick={() => router.push("/admin/products")}>Back to Products</Button>
        </div>
      </div>
    )
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Button variant="outline" size="icon" onClick={() => router.back()}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <h2 className="text-3xl font-bold tracking-tight">Product Details</h2>
        </div>
        <div className="flex items-center gap-2">
          {isAlHarameenProduct() && (
            <Badge variant="outline" className="bg-orange-50 text-orange-700 border-orange-200">
              Al Harameen Special Product
            </Badge>
          )}
          <Button variant="outline" size="sm" onClick={printProduct}>
            <Printer className="mr-2 h-4 w-4" />
            Print
          </Button>
          <Button variant="outline" asChild>
            <Link href={`/admin/products/edit/${params.id}`}>
              <Edit className="mr-2 h-4 w-4" />
              Edit Product
            </Link>
          </Button>
        </div>
      </div>

<Tabs defaultValue="details">
        <TabsList>
          <TabsTrigger value="details">Product Details</TabsTrigger>
          <TabsTrigger value="images">Product Images</TabsTrigger>
          <TabsTrigger value="inventory">Inventory</TabsTrigger>
        </TabsList>

<TabsContent value="details" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>{product.name}</CardTitle>
              <CardDescription>
                Added on {new Date(product.date_added || product.created_at).toLocaleDateString()}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-2">
                <div>
                  <h3 className="font-medium">Main Image</h3>
                  <div className="mt-2 relative aspect-square max-w-md overflow-hidden rounded-md border">
                    <ProductImage
                      src={product.image_url || "/placeholder.svg"}
                      alt={product.name}
                      needsProxy={product.image_needs_proxy}
                      objectFit="contain"
                    />
                  </div>
                </div>

<div>
                  <h3 className="font-medium">Product Information</h3>
                  <div className="mt-2 space-y-2">
                    <div className="flex flex-wrap gap-2">
                      <Badge>{product.category}</Badge>
                      {product.featured && <Badge variant="secondary">Featured</Badge>}
                      {isNewProduct() && <Badge variant="success">New</Badge>}
                      {product.discount && <Badge variant="outline">{product.discount}</Badge>}
                      <Badge variant={product.in_stock ? "default" : "destructive"}>
                        {product.in_stock ? "In Stock" : "Out of Stock"}
                      </Badge>
                    </div>

<div className="space-y-1 mt-4">
                      <p>
                        <span className="font-medium">Price:</span> ₹{product.price.toFixed(2)}
                      </p>

{product.discounted_price && (
                        <p>
                          <span className="font-medium">Discounted Price:</span> ₹{product.discounted_price.toFixed(2)}
                          <Badge variant="success" className="ml-2">
                            {Math.round(((product.price - product.discounted_price) / product.price) * 100)}% off
                          </Badge>
                        </p>
                      )}

<p>
                        <span className="font-medium">Stock:</span> {product.stock_quantity || "Not specified"}
                      </p>
                      <p>
                        <span className="font-medium">Added:</span>{" "}
                        {new Date(product.date_added || product.created_at).toLocaleString()}
                      </p>
                    </div>
                  </div>
                </div>
              </div>

<div>
                <h3 className="font-medium">Description</h3>
                <p className="mt-2 text-muted-foreground">{product.description || "No description provided."}</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="images" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Product Images</CardTitle>
              <CardDescription>View all images for this product</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div>
                  <h3 className="font-medium mb-2">Main Product Image</h3>
                  <div className="relative aspect-square max-w-md overflow-hidden rounded-md border">
                    <ProductImage
                      src={product.image_url || "/placeholder.svg"}
                      alt={product.name}
                      needsProxy={product.image_needs_proxy}
                      objectFit="contain"
                    />
                  </div>
                </div>

<div>
                  <h3 className="font-medium mb-2">Additional Images</h3>
                  {product.additional_images && product.additional_images.length > 0 ? (
                    <ScrollArea className="h-[400px] rounded-md border p-4">
                      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                        {product.additional_images.map((imageUrl: string, index: number) => (
                          <div key={index} className="relative aspect-square overflow-hidden rounded-md border">
                            <ProductImage
                              src={imageUrl}
                              alt={`${product.name} - Image ${index + 1}`}
                              objectFit="contain"
                            />
                          </div>
                        ))}
                      </div>
                    </ScrollArea>
                  ) : (
                    <div className="text-center p-8 border border-dashed rounded-md">
                      <p className="text-muted-foreground">No additional images available</p>
                    </div>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="inventory" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Inventory Information</CardTitle>
              <CardDescription>Stock and inventory details</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="grid gap-4 md:grid-cols-2">
                  <div>
                    <h3 className="font-medium">Stock Status</h3>
                    <div className="mt-2 space-y-2">
                      <p>
                        <span className="font-medium">Current Stock:</span> {product.stock_quantity || 0} units
                      </p>
                      <p>
                        <span className="font-medium">Status:</span>{" "}
                        <Badge variant={product.in_stock ? "default" : "destructive"}>
                          {product.in_stock ? "In Stock" : "Out of Stock"}
                        </Badge>
                      </p>
                      {product.stock_quantity < 10 && product.in_stock && (
                        <Alert className="mt-2">
                          <AlertCircle className="h-4 w-4" />
                          <AlertTitle>Low Stock Alert</AlertTitle>
                          <AlertDescription>
                            This product is running low on stock. Consider restocking soon.
                          </AlertDescription>
                        </Alert>
                      )}
                    </div>
                  </div>

<div>
                    <h3 className="font-medium">Sales Information</h3>
                    <div className="mt-2 space-y-2">
                      <p>
                        <span className="font-medium">Total Sales:</span> Not available
                      </p>
                      <p>
                        <span className="font-medium">Last Ordered:</span> Not available
                      </p>
                    </div>
                  </div>
                </div>

<div>
                  <h3 className="font-medium">Quick Actions</h3>
                  <div className="mt-2 flex flex-wrap gap-2">
                    <Button variant="outline" asChild>
                      <Link href={`/admin/products/edit/${params.id}`}>
                        <Edit className="mr-2 h-4 w-4" />
                        Edit Product
                      </Link>
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/products-db.ts" isMerged="true" isEdit="true"
import { database, ref, push, get, set, update, remove } from "./firebase"
import { createAdminNotification } from "./admin"

// Add to the existing product interface
export interface Product {
  // ... existing fields
  image_url: string
  image_type?: "file" | "url"
  image_needs_proxy?: boolean
  date_added?: string
  additional_images?: string[]
}

// Create a new product
export async function createProduct(productData: any) {
  try {
    const productsRef = ref(database, "products")
    if (!productsRef) {
      throw new Error("Database reference is undefined")
    }

const newProductRef = push(productsRef)
    if (!newProductRef) {
      throw new Error("Failed to create product reference")
    }

const productId = newProductRef.key
    if (!productId) {
      throw new Error("Failed to generate product ID")
    }

const product = {
      ...productData,
      id: productId,
      created_at: new Date().toISOString(),
      date_added: productData.date_added || new Date().toISOString(),
      // Ensure these fields are included
      image_url: productData.image_url || "/placeholder.svg?height=300&width=300",
      image_type: productData.image_type || "file",
      image_needs_proxy: productData.image_needs_proxy || false,
      additional_images: productData.additional_images || [],
    }

await set(newProductRef, product)

// Create notification for new product
    try {
      await createAdminNotification({
        type: "new_product",
        message: `New product "${product.name}" has been added to the catalog.`,
        resource_id: productId,
      })
    } catch (notifError) {
      console.error("Error creating new product notification:", notifError)
      // Continue even if notification fails
    }

return product
  } catch (error) {
    console.error("Error creating product:", error)
    throw error
  }
}

// Update an existing product
export async function updateProduct(id: string, productData: any) {
  try {
    const productRef = ref(database, `products/${id}`)
    if (!productRef) {
      throw new Error("Product reference is undefined")
    }

const updates = {
      ...productData,
      updated_at: new Date().toISOString(),
      // Ensure these fields are included if they exist in productData
      ...(productData.image_url && { image_url: productData.image_url }),
      ...(productData.image_type && { image_type: productData.image_type }),
      ...(productData.image_needs_proxy !== undefined && { image_needs_proxy: productData.image_needs_proxy }),
      ...(productData.additional_images && { additional_images: productData.additional_images }),
    }

await update(productRef, updates)

// Get the updated product
    const snapshot = await get(productRef)
    if (!snapshot.exists()) {
      throw new Error("Product not found after update")
    }

const updatedProduct = snapshot.val()

// Create notification if stock is low
    if (productData.stock_quantity && productData.stock_quantity < 10 && productData.in_stock) {
      try {
        await createAdminNotification({
          type: "low_stock",
          message: `Product "${updatedProduct.name}" is running low on stock (${productData.stock_quantity} remaining).`,
          resource_id: id,
        })
      } catch (notifError) {
        console.error("Error creating low stock notification:", notifError)
        // Continue even if notification fails
      }
    }

return updatedProduct
  } catch (error) {
    console.error("Error updating product:", error)
    throw error
  }
}

// Delete a product
export async function deleteProduct(id: string) {
  try {
    // First, get the product to check if it exists
    const productRef = ref(database, `products/${id}`)
    const snapshot = await get(productRef)

if (!snapshot.exists()) {
      throw new Error("Product not found")
    }

// Delete the product
    await remove(productRef)

// Also delete any product images associated with this product
    const productImagesRef = ref(database, `productImages/${id}`)
    await remove(productImagesRef)

// Return success
    return true
  } catch (error) {
    console.error("Error deleting product:", error)
    throw error
  }
}

// Get a product by ID
export async function getProductById(id: string) {
  try {
    const productRef = ref(database, `products/${id}`)
    const snapshot = await get(productRef)

if (!snapshot.exists()) {
      return null
    }

return snapshot.val()
  } catch (error) {
    console.error("Error fetching product:", error)
    return null
  }
}

// Get all products with optional filtering
export async function getAllProducts(
  options: {
    category?: string
    featured?: boolean
    inStock?: boolean
    search?: string
    sortBy?: string
    limit?: number
    offset?: number
  } = {},
) {
  try {
    const productsRef = ref(database, "products")
    const snapshot = await get(productsRef)

if (!snapshot.exists()) {
      return { products: [], total: 0 }
    }

let products = Object.entries(snapshot.val()).map(([key, value]) => ({
      id: key,
      ...(value as any),
    }))

// Apply filters
    if (options.category) {
      products = products.filter((product) => product.category === options.category)
    }

if (options.featured !== undefined) {
      products = products.filter((product) => product.featured === options.featured)
    }

if (options.inStock !== undefined) {
      products = products.filter((product) => product.in_stock === options.inStock)
    }

if (options.search) {
      const searchLower = options.search.toLowerCase()
      products = products.filter((product) => product.name.toLowerCase().includes(searchLower))
    }

// Apply sorting
    if (options.sortBy) {
      const [field, direction] = options.sortBy.split("_")
      products.sort((a, b) => {
        if (direction === "asc") {
          return a[field] > b[field] ? 1 : -1
        } else {
          return a[field] < b[field] ? 1 : -1
        }
      })
    } else {
      // Default sort by created_at desc
      products.sort(
        (a, b) => new Date(b.date_added || b.created_at).getTime() - new Date(a.date_added || a.created_at).getTime(),
      )
    }

const total = products.length

// Apply pagination
    if (options.offset !== undefined && options.limit) {
      products = products.slice(options.offset, options.offset + options.limit)
    } else if (options.limit) {
      products = products.slice(0, options.limit)
    }

return { products, total }
  } catch (error) {
    console.error("Error fetching products:", error)
    return { products: [], total: 0 }
  }
}

// Get new arrivals
export async function getNewArrivals(limit = 5) {
  try {
    const { products } = await getAllProducts({
      sortBy: "date_added_desc",
      limit: limit,
    })
    return products
  } catch (error) {
    console.error("Error fetching new arrivals:", error)
    return []
  }
}

// Add product images
export async function addProductImages(productId: string, imageUrls: string[]) {
  try {
    // Get the current product
    const productRef = ref(database, `products/${productId}`)
    const snapshot = await get(productRef)

if (!snapshot.exists()) {
      throw new Error("Product not found")
    }

const product = snapshot.val()

// Update the additional_images array
    const currentImages = product.additional_images || []
    const updatedImages = [...currentImages, ...imageUrls]

// Update the product
    await update(productRef, {
      additional_images: updatedImages,
      updated_at: new Date().toISOString(),
    })

return updatedImages
  } catch (error) {
    console.error("Error adding product images:", error)
    throw error
  }
}

// Remove a product image
export async function removeProductImage(productId: string, imageIndex: number) {
  try {
    // Get the current product
    const productRef = ref(database, `products/${productId}`)
    const snapshot = await get(productRef)

if (!snapshot.exists()) {
      throw new Error("Product not found")
    }

const product = snapshot.val()

// Check if additional_images exists and has the specified index
    if (!product.additional_images || imageIndex >= product.additional_images.length) {
      throw new Error("Image not found")
    }

// Remove the image at the specified index
    const updatedImages = [...product.additional_images]
    updatedImages.splice(imageIndex, 1)

// Update the product
    await update(productRef, {
      additional_images: updatedImages,
      updated_at: new Date().toISOString(),
    })

return updatedImages
  } catch (error) {
    console.error("Error removing product image:", error)
    throw error
  }
}

// Update product main image
export async function updateProductMainImage(
  productId: string,
  imageUrl: string,
  imageType = "file",
  needsProxy = false,
) {
  try {
    const productRef = ref(database, `products/${productId}`)

await update(productRef, {
      image_url: imageUrl,
      image_type: imageType,
      image_needs_proxy: needsProxy,
      updated_at: new Date().toISOString(),
    })

return true
  } catch (error) {
    console.error("Error updating product main image:", error)
    throw error
  }
}
[V0_FILE]typescriptreact:file="components/product-image-gallery.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { ChevronLeft, ChevronRight, X, ZoomIn } from "lucide-react"
import { Button } from "@/components/ui/button"
import ProductImage from "@/components/product-image"
import { ScrollArea } from "@/components/ui/scroll-area"

interface ProductImageGalleryProps {
  mainImage: string
  additionalImages?: string[]
  productName: string
  needsProxy?: boolean
}

export default function ProductImageGallery({
  mainImage,
  additionalImages = [],
  productName,
  needsProxy = false,
}: ProductImageGalleryProps) {
  const [currentImage, setCurrentImage] = useState(mainImage)
  const [currentIndex, setCurrentIndex] = useState(-1) // -1 means main image
  const [showLightbox, setShowLightbox] = useState(false)

const allImages = [mainImage, ...(additionalImages || [])]

const handleThumbnailClick = (image: string, index: number) => {
    setCurrentImage(image)
    setCurrentIndex(index - 1) // Adjust index (-1 for main image, 0+ for additional)
  }

const nextImage = () => {
    const newIndex = (currentIndex + 1) % allImages.length
    setCurrentIndex(newIndex)
    setCurrentImage(allImages[newIndex])
  }

const prevImage = () => {
    const newIndex = (currentIndex - 1 + allImages.length) % allImages.length
    setCurrentIndex(newIndex)
    setCurrentImage(allImages[newIndex])
  }

return (
    <div className="space-y-4">
      {/* Main image display */}
      <div
        className="relative aspect-square overflow-hidden rounded-lg border cursor-pointer"
        onClick={() => setShowLightbox(true)}
      >
        <ProductImage src={currentImage} alt={productName} needsProxy={needsProxy} objectFit="contain" priority />
        <div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-black/10">
          <ZoomIn className="h-10 w-10 text-white bg-black/30 rounded-full p-2" />
        </div>
      </div>

{/* Thumbnails */}
      {additionalImages && additionalImages.length > 0 && (
        <ScrollArea className="h-24 w-full">
          <div className="flex space-x-2 p-1">
            <div
              className={`relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-md border cursor-pointer ${
                currentIndex === -1 ? "ring-2 ring-orange-500" : ""
              }`}
              onClick={() => handleThumbnailClick(mainImage, 0)}
            >
              <ProductImage src={mainImage} alt={`${productName} - Main`} needsProxy={needsProxy} objectFit="cover" />
            </div>

{additionalImages.map((image, index) => (
              <div
                key={index}
                className={`relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-md border cursor-pointer ${
                  currentIndex === index ? "ring-2 ring-orange-500" : ""
                }`}
                onClick={() => handleThumbnailClick(image, index + 1)}
              >
                <ProductImage src={image} alt={`${productName} - ${index + 1}`} objectFit="cover" />
              </div>
            ))}
          </div>
        </ScrollArea>
      )}

{/* Lightbox */}
      {showLightbox && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
          onClick={() => setShowLightbox(false)}
        >
          <div className="relative max-h-[90vh] max-w-[90vw]" onClick={(e) => e.stopPropagation()}>
            <div className="relative h-full w-full">
              <ProductImage
                src={currentImage}
                alt={productName}
                needsProxy={needsProxy}
                objectFit="contain"
                className="max-h-[80vh]"
              />
            </div>

<Button
              variant="ghost"
              size="icon"
              className="absolute right-2 top-2 h-10 w-10 rounded-full bg-black/50 text-white hover:bg-black/70"
              onClick={() => setShowLightbox(false)}
            >
              <X className="h-6 w-6" />
            </Button>

<div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white text-sm">
              {currentIndex === -1 ? "Main Image" : `Image ${currentIndex + 1} of ${additionalImages.length}`}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/special-settings/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Save, Loader2, CheckCircle, Upload, ArrowLeft, ImageIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { useAuth } from "@/contexts/auth-context"
import { useToast } from "@/hooks/use-toast"
import { getSettings, saveSettings } from "@/lib/settings"
import { getAllProducts } from "@/lib/products-db"
import { uploadToSupabaseStorage } from "@/lib/supabase-storage"
import ProductImage from "@/components/product-image"
import Link from "next/link"

export default function SpecialSettingsPage() {
  const router = useRouter()
  const { user, isAdminUser } = useAuth()
  const { toast } = useToast()
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [settings, setSettings] = useState<any>({})
  const [logoUrl, setLogoUrl] = useState("")
  const [uploadingLogo, setUploadingLogo] = useState(false)
  const [specialProducts, setSpecialProducts] = useState<any[]>([])
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const loadData = async () => {
      if (!user || !isAdminUser) {
        router.push("/admin/login")
        return
      }

setLoading(true)
      try {
        // Load settings
        const settingsData = await getSettings()
        setSettings(settingsData)

// Get logo URL from settings
        if (settingsData?.store_settings?.logoUrl) {
          setLogoUrl(settingsData.store_settings.logoUrl)
        }

// Load special products (Al Harameen products)
        const { products } = await getAllProducts()
        const alHarameenProducts = products.filter(
          (product) =>
            product.name.toLowerCase().includes("al harameen") &&
            (product.name.toLowerCase().includes("wrist watches") ||
              product.name.toLowerCase().includes("azan") ||
              product.name.toLowerCase().includes("clock")),
        )
        setSpecialProducts(alHarameenProducts)
      } catch (error) {
        console.error("Error loading settings:", error)
        setError("Failed to load settings. Please try again.")
      } finally {
        setLoading(false)
      }
    }

loadData()
  }, [user, isAdminUser, router])

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

setUploadingLogo(true)
    try {
      // Upload logo to storage
      const uploadedUrl = await uploadToSupabaseStorage(file, "logos")
      setLogoUrl(uploadedUrl)

// Update settings with new logo URL
      const updatedSettings = {
        ...settings,
        store_settings: {
          ...(settings.store_settings || {}),
          logoUrl: uploadedUrl,
        },
      }
      setSettings(updatedSettings)

toast({
        title: "Logo uploaded",
        description: "The logo has been uploaded successfully.",
      })
    } catch (error) {
      console.error("Error uploading logo:", error)
      toast({
        title: "Upload failed",
        description: "Failed to upload logo. Please try again.",
        variant: "destructive",
      })
    } finally {
      setUploadingLogo(false)
    }
  }

const saveChanges = async () => {
    setSaving(true)
    setError(null)
    setSuccess(false)

try {
      await saveSettings(settings)
      setSuccess(true)
      toast({
        title: "Settings saved",
        description: "Your settings have been saved successfully.",
      })
    } catch (error) {
      console.error("Error saving settings:", error)
      setError("Failed to save settings. Please try again.")
      toast({
        title: "Error",
        description: "Failed to save settings. Please try again.",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

if (loading) {
    return (
      <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
        <div className="flex items-center justify-center h-screen">
          <Loader2 className="h-8 w-8 animate-spin" />
          <span className="ml-2">Loading special settings...</span>
        </div>
      </div>
    )
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Button variant="outline" size="icon" onClick={() => router.back()}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <h2 className="text-3xl font-bold tracking-tight">Special Admin Settings</h2>
        </div>
        <Button onClick={saveChanges} disabled={saving} className="bg-orange-500 hover:bg-orange-600">
          {saving ? (
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
          ) : success ? (
            <CheckCircle className="mr-2 h-4 w-4" />
          ) : (
            <Save className="mr-2 h-4 w-4" />
          )}
          {saving ? "Saving..." : success ? "Saved!" : "Save Changes"}
        </Button>
      </div>

{error && (
        <Alert variant="destructive">
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

{success && (
        <Alert variant="success" className="bg-green-50 border-green-500 text-green-700">
          <CheckCircle className="h-4 w-4" />
          <AlertTitle>Success</AlertTitle>
          <AlertDescription>Settings have been saved successfully!</AlertDescription>
        </Alert>
      )}

<Tabs defaultValue="logo" className="w-full">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="logo">Site Logo</TabsTrigger>
          <TabsTrigger value="special-products">Special Products</TabsTrigger>
        </TabsList>

<TabsContent value="logo" className="space-y-4 pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Site Logo Management</CardTitle>
              <CardDescription>Upload and manage the site logo that appears in the header</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex flex-col items-center justify-center space-y-4">
                <div className="relative h-40 w-40 overflow-hidden rounded-lg border bg-white p-4">
                  {logoUrl ? (
                    <Image src={logoUrl || "/placeholder.svg"} alt="Site Logo" fill className="object-contain" />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center">
                      <ImageIcon className="h-16 w-16 text-muted-foreground" />
                    </div>
                  )}
                </div>

<div className="flex flex-col items-center">
                  <label
                    htmlFor="logo-upload"
                    className="cursor-pointer rounded-md bg-orange-500 px-4 py-2 text-white hover:bg-orange-600"
                  >
                    {uploadingLogo ? (
                      <div className="flex items-center">
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Uploading...
                      </div>
                    ) : (
                      <div className="flex items-center">
                        <Upload className="mr-2 h-4 w-4" />
                        Upload New Logo
                      </div>
                    )}
                  </label>
                  <input
                    id="logo-upload"
                    type="file"
                    accept="image/*"
                    className="hidden"
                    onChange={handleLogoUpload}
                    disabled={uploadingLogo}
                  />
                  <p className="mt-2 text-xs text-muted-foreground">Recommended size: 200x80 pixels, transparent PNG</p>
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-end">
              <Button onClick={saveChanges} disabled={saving} className="bg-orange-500 hover:bg-orange-600">
                {saving ? "Saving..." : "Save Logo"}
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

<TabsContent value="special-products" className="space-y-4 pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Al Harameen Special Products</CardTitle>
              <CardDescription>Manage images for Al Harameen Wrist Watches and Azan Clocks</CardDescription>
            </CardHeader>
            <CardContent>
              {specialProducts.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <ImageIcon className="h-16 w-16 text-muted-foreground" />
                  <h3 className="mt-4 text-lg font-medium">No Al Harameen products found</h3>
                  <p className="mt-1 text-sm text-muted-foreground">
                    Add products with "Al Harameen" in the name to manage them here.
                  </p>
                </div>
              ) : (
                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                  {specialProducts.map((product) => (
                    <div key={product.id} className="overflow-hidden rounded-lg border bg-white shadow-sm">
                      <div className="relative aspect-square">
                        <ProductImage
                          src={product.image_url || "/placeholder.svg"}
                          alt={product.name}
                          className="object-contain"
                        />
                      </div>
                      <div className="p-4">
                        <h3 className="line-clamp-2 font-medium">{product.name}</h3>
                        <p className="mt-1 text-sm text-muted-foreground">
                          {product.category} • {product.in_stock ? "In Stock" : "Out of Stock"}
                        </p>
                        <Button asChild className="mt-4 w-full bg-orange-500 hover:bg-orange-600">
                          <Link href={`/admin/products/edit/${product.id}`}>Edit Images</Link>
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/special-admin-check.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useAuth } from "@/contexts/auth-context"
import { hasSpecialAdminAccess } from "@/lib/settings"

interface SpecialAdminCheckProps {
  children: React.ReactNode
  fallback?: React.ReactNode
}

export default function SpecialAdminCheck({ children, fallback }: SpecialAdminCheckProps) {
  const { user, isAdminUser } = useAuth()
  const [hasAccess, setHasAccess] = useState(false)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const checkAccess = async () => {
      if (!user || !isAdminUser) {
        setHasAccess(false)
        setLoading(false)
        return
      }

try {
        const hasSpecialAccess = await hasSpecialAdminAccess(user.email || "")
        setHasAccess(hasSpecialAccess)
      } catch (error) {
        console.error("Error checking special admin access:", error)
        setHasAccess(false)
      } finally {
        setLoading(false)
      }
    }

checkAccess()
  }, [user, isAdminUser])

if (loading) {
    return null // Or a loading indicator
  }

if (!hasAccess) {
    return fallback || null
  }

return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/admin/products/edit/[id]/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Save, X, ArrowLeft, Loader2, CheckCircle, ImageIcon, Plus, Trash } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { getProductById, updateProduct } from "@/lib/products-db"
import ProductImageUpload from "@/components/product-image-upload"
import { getCategories } from "@/lib/categories"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import ProductImage from "@/components/product-image"
import { useAuth } from "@/contexts/auth-context"
import { hasSpecialAdminAccess } from "@/lib/settings"

interface EditProductPageProps {
  params: {
    id: string
  }
}

export default function EditProductPage({ params }: EditProductPageProps) {
  const router = useRouter()
  const { toast } = useToast()
  const { user } = useAuth()
  const [isLoading, setIsLoading] = useState(true)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)
  const [activeTab, setActiveTab] = useState("basic")
  const [categories, setCategories] = useState<any[]>([])
  const [additionalImages, setAdditionalImages] = useState<string[]>([])
  const [isSpecialAdmin, setIsSpecialAdmin] = useState(false)
  const [isSpecialProduct, setIsSpecialProduct] = useState(false)
  const [productData, setProductData] = useState({
    name: "",
    description: "",
    price: "",
    discountedPrice: "",
    category: "",
    stock_quantity: "100",
    inStock: true,
    featured: false,
    image_url: "",
    image_type: "file" as "file" | "url",
    image_needs_proxy: false,
    discount: "" as string | null,
  })

// Load categories and check special admin access
  useEffect(() => {
    const allCategories = getCategories()
    setCategories(allCategories)

// Check if user has special admin access
    const checkSpecialAccess = async () => {
      if (user) {
        const hasAccess = await hasSpecialAdminAccess(user.email || "")
        setIsSpecialAdmin(hasAccess)
      }
    }

checkSpecialAccess()
  }, [user])

useEffect(() => {
    const loadProduct = async () => {
      try {
        setIsLoading(true)
        const product = await getProductById(params.id)

if (!product) {
          setError("Product not found")
          return
        }

// Check if this is one of the special products
        const isAlHarameenProduct =
          product.name.toLowerCase().includes("al harameen") &&
          (product.name.toLowerCase().includes("wrist watches") ||
            product.name.toLowerCase().includes("azan") ||
            product.name.toLowerCase().includes("clock"))

setIsSpecialProduct(isAlHarameenProduct)

if (isAlHarameenProduct) {
          toast({
            title: "Special Product Detected",
            description: "You can edit images for this Al Harameen product.",
            variant: "default",
          })
          // Auto-switch to the image tab for these products
          setActiveTab("image")
        }

setProductData({
          name: product.name || "",
          description: product.description || "",
          price: product.price?.toString() || "",
          discountedPrice: product.discounted_price?.toString() || "",
          category: product.category || "",
          stock_quantity: product.stock_quantity?.toString() || "100",
          inStock: product.in_stock ?? true,
          featured: product.featured ?? false,
          image_url: product.image_url || "",
          image_type: product.image_type || "file",
          image_needs_proxy: product.image_needs_proxy || false,
          discount: product.discount || "",
        })

// Load additional images if available
        if (product.additional_images && Array.isArray(product.additional_images)) {
          setAdditionalImages(product.additional_images)
        }
      } catch (error: any) {
        console.error("Error loading product:", error)
        setError(error.message || "Failed to load product. Please try again.")
      } finally {
        setIsLoading(false)
      }
    }

loadProduct()
  }, [params.id, toast])

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

const handleSelectChange = (name: string, value: string) => {
    setProductData((prev) => ({ ...prev, [name]: value }))
  }

const handleSwitchChange = (name: string, checked: boolean) => {
    setProductData((prev) => ({ ...prev, [name]: checked }))
  }

const handleImageSelected = (imageData: { url: string; needsProxy?: boolean; type: "file" | "url" }) => {
    setProductData((prev) => ({
      ...prev,
      image_url: imageData.url,
      image_type: imageData.type,
      image_needs_proxy: imageData.needsProxy || false,
    }))
  }

const handleAdditionalImageSelected = (imageData: { url: string }) => {
    if (imageData.url) {
      setAdditionalImages((prev) => [...prev, imageData.url])
    }
  }

const removeAdditionalImage = (index: number) => {
    setAdditionalImages((prev) => prev.filter((_, i) => i !== index))
  }

const calculateDiscountPercentage = () => {
    if (!productData.price || !productData.discountedPrice) return null

const originalPrice = Number.parseFloat(productData.price)
    const discountedPrice = Number.parseFloat(productData.discountedPrice)

if (isNaN(originalPrice) || isNaN(discountedPrice) || discountedPrice >= originalPrice) {
      return null
    }

const discountPercentage = Math.round(((originalPrice - discountedPrice) / originalPrice) * 100)
    return `-${discountPercentage}%`
  }

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

try {
      // Validate required fields
      if (!productData.name.trim()) {
        throw new Error("Product name is required")
      }

if (!productData.category) {
        throw new Error("Product category is required")
      }

if (!productData.price || isNaN(Number(productData.price))) {
        throw new Error("Valid product price is required")
      }

// Check if user has permission to edit images for special products
      if (isSpecialProduct && !isSpecialAdmin) {
        // If trying to edit images for a special product without permission
        if (activeTab === "image") {
          throw new Error("You don't have permission to edit images for this special product")
        }
      }

// Calculate discount percentage if discounted price is provided
      const discount = calculateDiscountPercentage() || productData.discount

// Update the product
      await updateProduct(params.id, {
        name: productData.name.trim(),
        description: productData.description.trim(),
        price: Number.parseFloat(productData.price) || 0,
        discounted_price: productData.discountedPrice ? Number.parseFloat(productData.discountedPrice) : null,
        category: productData.category,
        stock_quantity: Number.parseInt(productData.stock_quantity) || 100,
        in_stock: productData.inStock,
        featured: productData.featured,
        image_url: productData.image_url || "/placeholder.svg?height=300&width=300",
        image_type: productData.image_type,
        image_needs_proxy: productData.image_needs_proxy,
        discount: discount,
        additional_images: additionalImages,
      })

setSuccess(true)
      toast({
        title: "Product updated",
        description: "Your product has been updated successfully and changes are now visible in the catalog.",
      })

// Wait a moment to show success state before redirecting
      setTimeout(() => {
        router.push("/admin/products")
      }, 1500)
    } catch (error: any) {
      console.error("Error updating product:", error)
      setError(error.message || "Failed to update product. Please try again.")
      toast({
        title: "Error",
        description: error.message || "Failed to update product. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const isFormValid = () => {
    return (
      productData.name.trim() !== "" &&
      productData.category !== "" &&
      productData.price !== "" &&
      !isNaN(Number(productData.price))
    )
  }

const nextTab = () => {
    if (activeTab === "basic") setActiveTab("details")
    else if (activeTab === "details") setActiveTab("image")
  }

const prevTab = () => {
    if (activeTab === "details") setActiveTab("basic")
    else if (activeTab === "image") setActiveTab("details")
  }

if (isLoading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin" />
        <span className="ml-2">Loading product...</span>
      </div>
    )
  }

if (error && !productData.name) {
    return (
      <div className="container p-8">
        <Alert variant="destructive">
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
        <Button className="mt-4" onClick={() => router.push("/admin/products")}>
          Back to Products
        </Button>
      </div>
    )
  }

<div className="flex items-center gap-2">
          <Button variant="outline" onClick={() => router.push("/admin/products")}>
            <X className="mr-2 h-4 w-4" />
            Cancel
          </Button>
          <Button
            onClick={handleSubmit}
            disabled={isSubmitting || !isFormValid()}
            className="bg-orange-500 hover:bg-orange-600"
          >
            {isSubmitting ? (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            ) : success ? (
              <CheckCircle className="mr-2 h-4 w-4" />
            ) : (
              <Save className="mr-2 h-4 w-4" />
            )}
            {isSubmitting ? "Saving..." : success ? "Saved!" : "Save Changes"}
          </Button>
        </div>
      </div>

{error && (
        <Alert variant="destructive">
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

{success && (
        <Alert variant="success" className="bg-green-50 border-green-500 text-green-700">
          <CheckCircle className="h-4 w-4" />
          <AlertTitle>Success</AlertTitle>
          <AlertDescription>
            Product has been updated successfully! Changes are now visible in the catalog. Redirecting...
          </AlertDescription>
        </Alert>
      )}

{isSpecialProduct && !isSpecialAdmin && (
        <Alert className="bg-yellow-50 border-yellow-500 text-yellow-700">
          <AlertTitle>Special Product</AlertTitle>
          <AlertDescription>
            This is a special Al Harameen product. Only special administrators can edit the images for this product.
          </AlertDescription>
        </Alert>
      )}

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="basic">Basic Info</TabsTrigger>
          <TabsTrigger value="details">Details & Pricing</TabsTrigger>
          <TabsTrigger value="image" disabled={isSpecialProduct && !isSpecialAdmin}>
            Product Images
            {isSpecialProduct && !isSpecialAdmin && <span className="ml-2 text-xs">🔒</span>}
          </TabsTrigger>
        </TabsList>

{/* Basic Info Tab */}
        <TabsContent value="basic" className="space-y-4 pt-4">
          {/* Basic info content */}
        </TabsContent>

{/* Details Tab */}
        <TabsContent value="details" className="space-y-4 pt-4">
          {/* Details content */}
        </TabsContent>

{/* Images Tab */}
        <TabsContent value="image" className="space-y-4 pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Product Images</CardTitle>
              <CardDescription>
                {isSpecialProduct ? (
                  <span className="text-orange-500 font-semibold">
                    Special Al Harameen product -{" "}
                    {isSpecialAdmin
                      ? "You have special access to edit these images"
                      : "Only special admins can edit these images"}
                  </span>
                ) : (
                  "Upload and manage product images"
                )}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {isSpecialProduct && !isSpecialAdmin ? (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <ImageIcon className="h-16 w-16 text-muted-foreground" />
                  <h3 className="mt-4 text-lg font-medium">Restricted Access</h3>
                  <p className="mt-1 text-sm text-muted-foreground">
                    Only special administrators can edit images for Al Harameen products.
                  </p>
                  <Button variant="outline" className="mt-4" onClick={() => router.push("/admin/products")}>
                    Back to Products
                  </Button>
                </div>
              ) : (
                <>
                  <div className="space-y-2">
                    <Label>Main Product Image</Label>
                    <ProductImageUpload
                      onImageSelected={handleImageSelected}
                      existingImageUrl={productData.image_url}
                      existingImageType={productData.image_type}
                      existingNeedsProxy={productData.image_needs_proxy}
                    />
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label>Additional Product Images</Label>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleAdditionalImageSelected({ url: "/placeholder.svg?height=300&width=300" })}
                        className="flex items-center gap-1"
                      >
                        <Plus className="h-4 w-4" />
                        Add Image
                      </Button>
                    </div>

{additionalImages.length > 0 ? (
                      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-2">
                        {additionalImages.map((imageUrl, index) => (
                          <div key={index} className="relative group">
                            <div className="aspect-square relative rounded-md overflow-hidden border">
                              <ProductImage
                                src={imageUrl}
                                alt={`Product image ${index + 1}`}
                                className="object-cover"
                              />
                            </div>
                            <Button
                              variant="destructive"
                              size="icon"
                              className="absolute top-2 right-2 h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
                              onClick={() => removeAdditionalImage(index)}
                            >
                              <Trash className="h-4 w-4" />
                            </Button>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="border border-dashed rounded-md p-8 text-center">
                        <ImageIcon className="h-10 w-10 mx-auto text-muted-foreground" />
                        <p className="mt-2 text-sm text-muted-foreground">No additional images</p>
                        <Button
                          variant="outline"
                          size="sm"
                          className="mt-4"
                          onClick={() =>
                            handleAdditionalImageSelected({ url: "/placeholder.svg?height=300&width=300" })
                          }
                        >
                          <Plus className="h-4 w-4 mr-2" />
                          Add Image
                        </Button>
                      </div>
                    )}
                  </div>
                </>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/settings.ts" isMerged="true" isEdit="true"
import { database, ref, get, set, update } from "./firebase"

// Get all settings
export async function getSettings() {
  try {
    const settingsRef = ref(database, "settings/1") // Assuming there's only one settings record with id 1
    const snapshot = await get(settingsRef)

if (snapshot.exists()) {
      return snapshot.val()
    } else {
      console.warn("No settings found, returning default settings")
      return getDefaultSettings()
    }
  } catch (error) {
    console.error("Error fetching settings:", error)
    return getDefaultSettings()
  }
}

// Save settings
export async function saveSettings(settings: any) {
  try {
    const settingsRef = ref(database, "settings/1")
    await set(settingsRef, {
      ...settings,
      updated_at: new Date().toISOString(),
    })
    return true
  } catch (error) {
    console.error("Error saving settings:", error)
    throw error
  }
}

// Update specific settings category
export async function updateSettings(category: string, settings: any) {
  try {
    const settingsRef = ref(database, `settings/1/${category}`)
    await update(settingsRef, settings)
    return true
  } catch (error) {
    console.error(`Error updating ${category} settings:`, error)
    throw error
  }
}

// Get default settings
export function getDefaultSettings() {
  return {
    store_settings: {
      storeName: "Halal Deals",
      storeDescription: "Your Premier Halal Shopping Destination",
      storeEmail: "info@halaldeals.com",
      storePhone: "+91 9876543210",
      storeAddress: "123 Main Street, Mumbai, India",
      currency: "INR",
      taxRate: "18",
      enableFreeShipping: true,
      freeShippingThreshold: "1000",
      shippingFee: "100",
      logoUrl: "/logo.svg", // Default logo URL
    },
    email_settings: {
      enableOrderConfirmation: true,
      enableShippingNotifications: true,
      enableAdminNotifications: true,
      adminEmail: "abujarshaikh039@gmail.com",
      emailFooter:
        "Thank you for shopping with Halal Deals. If you have any questions, please contact our customer service.",
    },
    user_settings: {
      enableGuestCheckout: false,
      enableUserRegistration: true,
      requireEmailVerification: false,
      defaultUserRole: "customer",
    },
    product_settings: {
      enableOutOfStockPurchase: false,
      showOutOfStockProducts: true,
      enableProductReviews: true,
      enableProductRatings: true,
      defaultProductSorting: "newest",
    },
    payment_settings: {
      enableCashOnDelivery: true,
      enableUpiPayment: true,
      enableCardPayment: true,
      enableWalletPayment: false,
      testMode: true,
      upiId: "yourupi@bank",
    },
    banner_settings: {
      mainBannerUrl: "",
      featuredBannerUrl: "",
      showMainBanner: true,
      showFeaturedBanner: true,
    },
    special_settings: {
      specialAdminEmails: ["abujarshaikh039@gmail.com"], // List of emails with special admin access
      specialProducts: ["Al Harameen Wrist Watches", "Al Harameen Azan Clock"], // Product types with special editing privileges
    },
    home_images: {
      carousel: [
        {
          id: 1,
          title: "MOON LAMP QURAN SPEAKERS",
          subtitle: "",
          tag: "",
          buttonText: "ORDER NOW",
          buttonLink: "/product/moon-lamp",
          imageUrl: "",
        },
        {
          id: 2,
          title: "AL HARAMEEN Wrist Watches",
          subtitle: "EXCLUSIVE",
          tag: "BEST OFFERS",
          buttonText: "SHOP NOW",
          buttonLink: "/category/watches",
          imageUrl: "",
        },
      ],
      featuredBanner: {
        title: "Al Harameen",
        subtitle: "Azan Wall Clocks Loaded with Features",
        discount: "25% Off",
        imageUrl: "",
        href: "/category/azan-watches",
      },
    },
  }
}

// Check if user has special admin privileges
export async function hasSpecialAdminAccess(email: string) {
  try {
    const settings = await getSettings()
    if (settings?.special_settings?.specialAdminEmails) {
      return settings.special_settings.specialAdminEmails.includes(email)
    }
    return false
  } catch (error) {
    console.error("Error checking special admin access:", error)
    return false
  }
}

// Add a user to special admins list
export async function addSpecialAdmin(email: string) {
  try {
    const settings = await getSettings()
    const specialAdmins = settings?.special_settings?.specialAdminEmails || []

if (!specialAdmins.includes(email)) {
      const updatedSpecialSettings = {
        ...settings.special_settings,
        specialAdminEmails: [...specialAdmins, email],
      }

await updateSettings("special_settings", updatedSpecialSettings)
      return true
    }

return false // User already has special access
  } catch (error) {
    console.error("Error adding special admin:", error)
    throw error
  }
}
[V0_FILE]typescriptreact:file="components/featured-banner.tsx" isMerged="true" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { getSettings } from "@/lib/settings"

interface FeaturedBannerProps {
  title?: string
  subtitle?: string
  discount?: string
  imageUrl?: string
  href?: string
}

export default function FeaturedBanner({ title, subtitle, discount, imageUrl, href }: FeaturedBannerProps) {
  const [bannerData, setBannerData] = useState({
    title: title || "Al Harameen",
    subtitle: subtitle || "Azan Wall Clocks Loaded with Features",
    discount: discount || "25% Off",
    imageUrl: imageUrl || "/placeholder.svg?height=300&width=300",
    href: href || "/category/azan-watches",
  })

useEffect(() => {
    // Load featured banner from settings
    const loadFeaturedBanner = async () => {
      try {
        const settings = await getSettings()
        if (settings?.home_images?.featuredBanner) {
          const featuredBanner = settings.home_images.featuredBanner

// Only update if props are not provided
          setBannerData({
            title: title || featuredBanner.title || "Al Harameen",
            subtitle: subtitle || featuredBanner.subtitle || "Azan Wall Clocks Loaded with Features",
            discount: discount || featuredBanner.discount || "25% Off",
            imageUrl: imageUrl || featuredBanner.imageUrl || "/placeholder.svg?height=300&width=300",
            href: href || featuredBanner.href || "/category/azan-watches",
          })
        }
      } catch (error) {
        console.error("Error loading featured banner:", error)
      }
    }

// Only load from settings if props are not provided
    if (!title || !subtitle || !discount || !imageUrl || !href) {
      loadFeaturedBanner()
    }
  }, [title, subtitle, discount, imageUrl, href])

return (
    <Link href={bannerData.href} className="block overflow-hidden rounded-lg border bg-white text-center">
      <div className="p-4">
        <h3 className="text-lg font-semibold">{bannerData.title}</h3>
        <p className="mt-1 text-center text-sm">{bannerData.subtitle}</p>
        <p className="mt-2 text-orange-500">Up to {bannerData.discount}</p>
      </div>
      <div className="relative h-48 w-full">
        <Image src={bannerData.imageUrl || "/placeholder.svg"} alt={bannerData.title} fill className="object-contain" />
      </div>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import type * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

interface ThemeProviderProps extends React.PropsWithChildren {
  attribute?: "class" | "data-theme"
  defaultTheme?: string
  enableSystem?: boolean
  disableTransitionOnChange?: boolean
}

function ThemeProvider({
  attribute,
  defaultTheme,
  enableSystem,
  disableTransitionOnChange,
  children,
}: ThemeProviderProps) {
  return (
    <NextThemesProvider
      attribute={attribute}
      defaultTheme={defaultTheme}
      enableSystem={enableSystem}
      disableTransitionOnChange={disableTransitionOnChange}
    >
      {children}
    </NextThemesProvider>
  )
}

function useTheme() {
  return { theme: "light" }
}

export { ThemeProvider, useTheme }
[V0_FILE]typescriptreact:file="app/api/search/route.ts" isMerged="true" isEdit="true"
import { NextResponse } from "next/server"
import { searchProducts } from "@/lib/search"

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url)
    const query = searchParams.get("q") || ""

const results = await searchProducts(query)
    return NextResponse.json(results)
  } catch (error) {
    console.error("Search API error:", error)
    return NextResponse.json({ error: "Failed to search products" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/search/loading.tsx" isFixed="true" isMerged="true" isEdit="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="lib/auth-providers.ts" isMerged="true" isEdit="true"
import { GoogleAuthProvider, FacebookAuthProvider, signInWithPopup } from "firebase/auth"
import { auth, database, ref, get, set } from "./firebase"

// Google Authentication
export const googleProvider = new GoogleAuthProvider()
export const facebookProvider = new FacebookAuthProvider()

// Sign in with Google
export const signInWithGoogle = async () => {
  try {
    const result = await signInWithPopup(auth, googleProvider)
    const user = result.user

// Check if user exists in database
    const userRef = ref(database, `users/${user.uid}`)
    const snapshot = await get(userRef)

if (!snapshot.exists()) {
      // Create new user record
      await set(ref(database, `users/${user.uid}`), {
        name: user.displayName || "",
        email: user.email,
        role: user.email === "abujarshaikh039@gmail.com" ? "admin" : "customer",
        provider: "google",
        createdAt: new Date().toISOString(),
      })
    }

return {
      success: true,
      user: {
        id: user.uid,
        email: user.email,
        name: user.displayName || "User",
        role: user.email === "abujarshaikh039@gmail.com" ? "admin" : "customer",
      },
    }
  } catch (error: any) {
    console.error("Google sign-in error:", error)

// Handle user cancellation separately
    if (error.code === "auth/popup-closed-by-user") {
      return {
        success: false,
        error: "Sign-in cancelled",
      }
    }

return {
      success: false,
      error: "Failed to sign in with Google",
    }
  }
}

// Sign in with Facebook
export const signInWithFacebook = async () => {
  try {
    const result = await signInWithPopup(auth, facebookProvider)
    const user = result.user

// Check if user exists in database
    const userRef = ref(database, `users/${user.uid}`)
    const snapshot = await get(userRef)

if (!snapshot.exists()) {
      // Create new user record
      await set(ref(database, `users/${user.uid}`), {
        name: user.displayName || "",
        email: user.email,
        role: "customer",
        provider: "facebook",
        createdAt: new Date().toISOString(),
      })
    }

return {
      success: true,
      user: {
        id: user.uid,
        email: user.email,
        name: user.displayName || "User",
        role: "customer",
      },
    }
  } catch (error: any) {
    console.error("Facebook sign-in error:", error)

// Handle user cancellation separately
    if (error.code === "auth/popup-closed-by-user") {
      return {
        success: false,
        error: "Sign-in cancelled",
      }
    }

return {
      success: false,
      error: "Failed to sign in with Facebook",
    }
  }
}
[V0_FILE]typescriptreact:file="components/product-carousel.tsx" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { ChevronLeft, ChevronRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { getSettings } from "@/lib/settings"

export default function ProductCarousel() {
  const [currentSlide, setCurrentSlide] = useState(0)
  const [carouselItems, setCarouselItems] = useState<any[]>([
    {
      id: 1,
      title: "MOON LAMP QURAN SPEAKERS",
      subtitle: "",
      tag: "",
      buttonText: "ORDER NOW",
      buttonLink: "/product/moon-lamp",
      imageUrl: "/placeholder.svg?height=400&width=800",
    },
    {
      id: 2,
      title: "AL HARAMEEN Wrist Watches",
      subtitle: "EXCLUSIVE",
      tag: "BEST OFFERS",
      buttonText: "SHOP NOW",
      buttonLink: "/category/watches",
      imageUrl: "/placeholder.svg?height=400&width=800",
    },
  ])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    // Load carousel items from settings
    const loadCarouselItems = async () => {
      setLoading(true)
      try {
        const settings = await getSettings()
        if (settings?.home_images?.carousel && settings.home_images.carousel.length > 0) {
          // Filter out items without images
          const validItems = settings.home_images.carousel.filter((item: any) => item.imageUrl)

if (validItems.length > 0) {
            setCarouselItems(validItems)
          }
        }
      } catch (error) {
        console.error("Error loading carousel items:", error)
      } finally {
        setLoading(false)
      }
    }

loadCarouselItems()
  }, [])

const nextSlide = () => {
    setCurrentSlide((prev) => (prev === carouselItems.length - 1 ? 0 : prev + 1))
  }

const prevSlide = () => {
    setCurrentSlide((prev) => (prev === 0 ? carouselItems.length - 1 : prev - 1))
  }

const goToSlide = (index: number) => {
    setCurrentSlide(index)
  }

useEffect(() => {
    const interval = setInterval(() => {
      nextSlide()
    }, 5000)
    return () => clearInterval(interval)
  }, [])

return (
    <div className="relative overflow-hidden rounded-lg">
      <div className="relative h-[300px] w-full overflow-hidden bg-blue-900 sm:h-[400px]">
        {carouselItems.map((item, index) => (
          <div
            key={item.id}
            className={`absolute inset-0 transition-opacity duration-500 ${
              index === currentSlide ? "opacity-100" : "opacity-0"
            }`}
          >
            {item.imageUrl && (
              <Image
                src={item.imageUrl || "/placeholder.svg"}
                alt={item.title}
                fill
                className="object-cover"
                priority={index === 0}
              />
            )}
            <div className="absolute inset-0 flex flex-col items-center justify-center p-4 text-center text-white">
              {item.subtitle && (
                <span className="mb-2 inline-block rounded-full bg-orange-500 px-3 py-1 text-xs font-semibold uppercase">
                  {item.subtitle}
                </span>
              )}
              <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">{item.title}</h2>
              <Link href={item.buttonLink}>
                <Button variant="default" className="mt-4 bg-orange-500 px-6 py-2 font-medium hover:bg-orange-600">
                  {item.buttonText}
                </Button>
              </Link>
              {item.tag && (
                <div className="absolute right-4 top-4 rounded-full bg-orange-500 px-4 py-2 text-sm font-bold">
                  {item.tag}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

<Button
        variant="outline"
        size="icon"
        className="absolute left-2 top-1/2 z-10 h-10 w-10 -translate-y-1/2 rounded-full bg-white/80 text-gray-800 hover:bg-white"
        onClick={prevSlide}
      >
        <ChevronLeft className="h-6 w-6" />
        <span className="sr-only">Previous slide</span>
      </Button>

<Button
        variant="outline"
        size="icon"
        className="absolute right-2 top-1/2 z-10 h-10 w-10 -translate-y-1/2 rounded-full bg-white/80 text-gray-800 hover:bg-white"
        onClick={nextSlide}
      >
        <ChevronRight className="h-6 w-6" />
        <span className="sr-only">Next slide</span>
      </Button>

<div className="absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 space-x-2">
        {carouselItems.map((_, index) => (
          <button
            key={index}
            className={`h-2 w-2 rounded-full ${index === currentSlide ? "bg-white" : "bg-white/50"} transition-colors`}
            onClick={() => goToSlide(index)}
          >
            <span className="sr-only">Go to slide {index + 1}</span>
          </button>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/search.ts" isMerged="true" isEdit="true"
import { database, ref, get } from "./firebase"

export async function searchProducts(query: string) {
  try {
    const productsRef = ref(database, "products")
    const snapshot = await get(productsRef)

if (!snapshot.exists()) {
      return { products: [], total: 0 }
    }

const products = Object.entries(snapshot.val()).map(([key, value]) => ({
      id: key,
      ...(value as any),
    }))

// Enhanced search algorithm that checks multiple fields
    const searchTerms = query
      .toLowerCase()
      .split(" ")
      .filter((term) => term.length > 0)

const filteredProducts = products.filter((product) => {
      // Check if any search term matches product name, description, or category
      return searchTerms.some(
        (term) =>
          (product.name && product.name.toLowerCase().includes(term)) ||
          (product.description && product.description.toLowerCase().includes(term)) ||
          (product.category && product.category.toLowerCase().includes(term)),
      )
    })

// Sort results by relevance (products that match in name come first)
    filteredProducts.sort((a, b) => {
      const aNameMatch = searchTerms.some((term) => a.name.toLowerCase().includes(term)) ? 1 : 0
      const bNameMatch = searchTerms.some((term) => b.name.toLowerCase().includes(term)) ? 1 : 0
      return bNameMatch - aNameMatch
    })

return {
      products: filteredProducts,
      total: filteredProducts.length,
      searchTerms,
    }
  } catch (error) {
    console.error("Error searching products:", error)
    return { products: [], total: 0, searchTerms: [] }
  }
}
[V0_FILE]typescriptreact:file="app/search/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { Search, Filter, ArrowLeft } from "lucide-react"

import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetClose } from "@/components/ui/sheet"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"

import ProductCard from "@/components/product-card"
import { useToast } from "@/hooks/use-toast"

export default function SearchPage() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const { toast } = useToast()
  const [query, setQuery] = useState(searchParams.get("q") || "")
  const [results, setResults] = useState<any[]>([])
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)
  const [searchTerms, setSearchTerms] = useState<string[]>([])

// Filter states
  const [priceRange, setPriceRange] = useState({ min: "", max: "" })
  const [selectedCategories, setSelectedCategories] = useState<string[]>([])
  const [availableCategories, setAvailableCategories] = useState<string[]>([])
  const [sortBy, setSortBy] = useState("relevance")

useEffect(() => {
    const initialQuery = searchParams.get("q")
    if (initialQuery) {
      setQuery(initialQuery)
      performSearch(initialQuery)
    }
  }, [searchParams])

const performSearch = async (searchQuery: string) => {
    if (!searchQuery.trim()) return

setLoading(true)
    try {
      const response = await fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`)

if (!response.ok) {
        throw new Error("Search failed")
      }

const data = await response.json()
      setResults(data.products || [])
      setTotal(data.total || 0)
      setSearchTerms(data.searchTerms || [])

// Extract unique categories from search results
      const categories = [...new Set(data.products.map((p: any) => p.category).filter(Boolean))]
      setAvailableCategories(categories)
    } catch (error) {
      console.error("Error searching:", error)
      toast({
        title: "Search Error",
        description: "Failed to perform search. Please try again.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    performSearch(query)

// Update URL with search query
    const url = new URL(window.location.href)
    url.searchParams.set("q", query)
    window.history.pushState({}, "", url.toString())
  }

const applyFilters = () => {
    let filtered = [...results]

// Apply price filter
    if (priceRange.min && priceRange.max) {
      const min = Number.parseFloat(priceRange.min)
      const max = Number.parseFloat(priceRange.max)
      filtered = filtered.filter((product) => {
        const price = product.discounted_price || product.price
        return price >= min && price <= max
      })
    } else if (priceRange.min) {
      const min = Number.parseFloat(priceRange.min)
      filtered = filtered.filter((product) => {
        const price = product.discounted_price || product.price
        return price >= min
      })
    } else if (priceRange.max) {
      const max = Number.parseFloat(priceRange.max)
      filtered = filtered.filter((product) => {
        const price = product.discounted_price || product.price
        return price <= max
      })
    }

// Apply category filter
    if (selectedCategories.length > 0) {
      filtered = filtered.filter((product) => selectedCategories.includes(product.category))
    }

// Apply sorting
    if (sortBy === "price-low") {
      filtered.sort((a, b) => {
        const priceA = a.discounted_price || a.price
        const priceB = b.discounted_price || b.price
        return priceA - priceB
      })
    } else if (sortBy === "price-high") {
      filtered.sort((a, b) => {
        const priceA = a.discounted_price || a.price
        const priceB = b.discounted_price || b.price
        return priceB - priceA
      })
    } else if (sortBy === "newest") {
      filtered.sort((a, b) => {
        const dateA = new Date(a.date_added || a.created_at || 0)
        const dateB = new Date(b.date_added || b.created_at || 0)
        return dateB.getTime() - dateA.getTime()
      })
    }

setResults(filtered)
  }

const resetFilters = () => {
    setPriceRange({ min: "", max: "" })
    setSelectedCategories([])
    setSortBy("relevance")
    performSearch(query) // Re-run the search to get original results
  }

const handleCategoryChange = (category: string) => {
    setSelectedCategories((prev) =>
      prev.includes(category) ? prev.filter((c) => c !== category) : [...prev, category],
    )
  }

const getFilterCount = () => {
    let count = 0
    if (priceRange.min || priceRange.max) count++
    if (selectedCategories.length > 0) count++
    if (sortBy !== "relevance") count++
    return count
  }

return (
    <div className="container py-8">
      <div className="flex items-center gap-2 mb-6">
        <Button variant="outline" size="icon" onClick={() => router.back()} className="h-8 w-8">
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <h1 className="text-2xl font-bold">Search Products</h1>
      </div>

<form onSubmit={handleSearch} className="mb-8">
        <div className="relative flex w-full max-w-lg mx-auto">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            type="search"
            placeholder="Search for products..."
            className="w-full pl-10 pr-20 py-2 rounded-l-md"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
          <Button type="submit" className="rounded-l-none bg-orange-500 hover:bg-orange-600" disabled={loading}>
            {loading ? "Searching..." : "Search"}
          </Button>
        </div>
      </form>

{/* Search results section */}
      {loading ? (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
          {[...Array(10)].map((_, i) => (
            <div key={i} className="space-y-2">
              <Skeleton className="h-40 w-full rounded-lg" />
              <Skeleton className="h-4 w-3/4 rounded" />
              <Skeleton className="h-4 w-1/2 rounded" />
            </div>
          ))}
        </div>
      ) : (
        <>
          {query && (
            <div className="flex flex-wrap items-center justify-between mb-4 gap-2">
              <div>
                <p className="text-muted-foreground">
                  {total} results for "{query}"
                </p>
                {searchTerms.length > 0 && (
                  <div className="flex flex-wrap gap-1 mt-1">
                    {searchTerms.map((term, i) => (
                      <Badge key={i} variant="outline" className="text-xs">
                        {term}
                      </Badge>
                    ))}
                  </div>
                )}
              </div>

<Sheet>
                <SheetTrigger asChild>
                  <Button variant="outline" size="sm" className="gap-2">
                    <Filter className="h-4 w-4" />
                    Filter & Sort
                    {getFilterCount() > 0 && (
                      <Badge className="ml-1 h-5 w-5 p-0 flex items-center justify-center">{getFilterCount()}</Badge>
                    )}
                  </Button>
                </SheetTrigger>
                <SheetContent className="w-[300px] sm:w-[400px] overflow-y-auto">
                  <SheetHeader>
                    <SheetTitle>Filter & Sort</SheetTitle>
                  </SheetHeader>
                  <div className="py-4 space-y-6">
                    <div className="space-y-2">
                      <h3 className="font-medium">Sort By</h3>
                      <div className="grid grid-cols-2 gap-2">
                        {[
                          { id: "relevance", label: "Relevance" },
                          { id: "price-low", label: "Price: Low to High" },
                          { id: "price-high", label: "Price: High to Low" },
                          { id: "newest", label: "Newest First" },
                        ].map((option) => (
                          <Button
                            key={option.id}
                            variant={sortBy === option.id ? "default" : "outline"}
                            size="sm"
                            onClick={() => setSortBy(option.id)}
                            className="justify-start"
                          >
                            {option.label}
                          </Button>
                        ))}
                      </div>
                    </div>

<div className="space-y-2">
                      <h3 className="font-medium">Price Range</h3>
                      <div className="flex gap-2 items-center">
                        <Input
                          type="number"
                          placeholder="Min"
                          value={priceRange.min}
                          onChange={(e) => setPriceRange((prev) => ({ ...prev, min: e.target.value }))}
                          className="w-full"
                        />
                        <span>to</span>
                        <Input
                          type="number"
                          placeholder="Max"
                          value={priceRange.max}
                          onChange={(e) => setPriceRange((prev) => ({ ...prev, max: e.target.value }))}
                          className="w-full"
                        />
                      </div>
                    </div>

{availableCategories.length > 0 && (
                      <>
                        <Separator />
                        <div className="space-y-2">
                          <h3 className="font-medium">Categories</h3>
                          <div className="space-y-2">
                            {availableCategories.map((category) => (
                              <div key={category} className="flex items-center space-x-2">
                                <Checkbox
                                  id={`category-${category}`}
                                  checked={selectedCategories.includes(category)}
                                  onCheckedChange={() => handleCategoryChange(category)}
                                />
                                <Label htmlFor={`category-${category}`}>{category}</Label>
                              </div>
                            ))}
                          </div>
                        </div>
                      </>
                    )}
                  </div>

<div className="flex gap-2 mt-4">
                    <Button variant="outline" className="w-full" onClick={resetFilters}>
                      Reset
                    </Button>
                    <SheetClose asChild>
                      <Button className="w-full bg-orange-500 hover:bg-orange-600" onClick={applyFilters}>
                        Apply Filters
                      </Button>
                    </SheetClose>
                  </div>
                </SheetContent>
              </Sheet>
            </div>
          )}

{results.length > 0 ? (
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
              {results.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          ) : (
            query && (
              <div className="text-center py-12">
                <h3 className="text-lg font-medium">No products found</h3>
                <p className="text-muted-foreground mt-2">Try a different search term or browse our categories</p>
                <Button className="mt-4 bg-orange-500 hover:bg-orange-600" onClick={() => router.push("/categories")}>
                  Browse Categories
                </Button>
              </div>
            )
          )}
        </>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="lib/wishlist.ts" isMerged="true" isEdit="true"
import { database, ref, set, remove, get } from "./firebase"

// Add product to wishlist for logged-in user
export async function addToWishlist(userId: string, productId: string) {
  try {
    const wishlistRef = ref(database, `userWishlists/${userId}/${productId}`)
    await set(wishlistRef, {
      added_at: new Date().toISOString(),
    })
    return true
  } catch (error) {
    console.error("Error adding to wishlist:", error)
    throw error
  }
}

// Remove product from wishlist for logged-in user
export async function removeFromWishlist(userId: string, productId: string) {
  try {
    const wishlistRef = ref(database, `userWishlists/${userId}/${productId}`)
    await remove(wishlistRef)
    return true
  } catch (error) {
    console.error("Error removing from wishlist:", error)
    throw error
  }
}

// Check if product is in wishlist for logged-in user
export async function isInWishlist(userId: string, productId: string) {
  try {
    const wishlistRef = ref(database, `userWishlists/${userId}/${productId}`)
    const snapshot = await get(wishlistRef)
    return snapshot.exists()
  } catch (error) {
    console.error("Error checking wishlist:", error)
    return false
  }
}

// Get all wishlist items for logged-in user
export async function getUserWishlist(userId: string) {
  try {
    const wishlistRef = ref(database, `userWishlists/${userId}`)
    const snapshot = await get(wishlistRef)

if (!snapshot.exists()) {
      return []
    }

// Convert to array of product IDs
    const wishlistItems = Object.keys(snapshot.val())

// Get product details for each item
    const productsRef = ref(database, "products")
    const productsSnapshot = await get(productsRef)

if (!productsSnapshot.exists()) {
      return []
    }

const products = productsSnapshot.val()

// Filter products to only include wishlist items
    return wishlistItems
      .filter((id) => products[id]) // Only include products that exist
      .map((id) => ({
        id,
        ...products[id],
      }))
  } catch (error) {
    console.error("Error getting wishlist:", error)
    return []
  }
}

// Guest wishlist functions (localStorage)
const GUEST_WISHLIST_KEY = "guest_wishlist"

// Add product to guest wishlist
export function addToGuestWishlist(product: any) {
  try {
    const wishlist = getGuestWishlist()

// Check if product is already in wishlist
    if (wishlist.some((item) => item.id === product.id)) {
      return true
    }

// Add product to wishlist
    wishlist.push({
      id: product.id,
      name: product.name,
      price: product.price,
      discounted_price: product.discounted_price,
      image_url: product.image_url,
      added_at: new Date().toISOString(),
    })

// Save to localStorage
    localStorage.setItem(GUEST_WISHLIST_KEY, JSON.stringify(wishlist))
    return true
  } catch (error) {
    console.error("Error adding to guest wishlist:", error)
    return false
  }
}

// Remove product from guest wishlist
export function removeFromGuestWishlist(productId: string) {
  try {
    let wishlist = getGuestWishlist()

// Remove product from wishlist
    wishlist = wishlist.filter((item) => item.id !== productId)

// Save to localStorage
    localStorage.setItem(GUEST_WISHLIST_KEY, JSON.stringify(wishlist))
    return true
  } catch (error) {
    console.error("Error removing from guest wishlist:", error)
    return false
  }
}

// Check if product is in guest wishlist
export function isInGuestWishlist(productId: string) {
  try {
    const wishlist = getGuestWishlist()
    return wishlist.some((item) => item.id === productId)
  } catch (error) {
    console.error("Error checking guest wishlist:", error)
    return false
  }
}

// Get all guest wishlist items
export function getGuestWishlist() {
  try {
    const wishlistJson = localStorage.getItem(GUEST_WISHLIST_KEY)
    return wishlistJson ? JSON.parse(wishlistJson) : []
  } catch (error) {
    console.error("Error getting guest wishlist:", error)
    return []
  }
}

// Clear guest wishlist
export function clearGuestWishlist() {
  try {
    localStorage.removeItem(GUEST_WISHLIST_KEY)
    return true
  } catch (error) {
    console.error("Error clearing guest wishlist:", error)
    return false
  }
}

// Migrate guest wishlist to user wishlist
export async function migrateGuestWishlist(userId: string) {
  try {
    const guestWishlist = getGuestWishlist()

// Add each item to user wishlist
    for (const item of guestWishlist) {
      await addToWishlist(userId, item.id)
    }

// Clear guest wishlist
    clearGuestWishlist()

return true
  } catch (error) {
    console.error("Error migrating guest wishlist:", error)
    return false
  }
}
[V0_FILE]typescriptreact:file="app/wishlist/page.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Heart, Trash2, ShoppingCart, ArrowLeft } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

import { useAuth } from "@/contexts/auth-context"
import { useToast } from "@/hooks/use-toast"
import { getUserWishlist, removeFromWishlist, getGuestWishlist, removeFromGuestWishlist } from "@/lib/wishlist"
import { addToCart } from "@/lib/checkout"
import { addToGuestCart } from "@/lib/guest-cart"
import ProductImage from "@/components/product-image"
import Link from "next/link"

export default function WishlistPage() {
  const router = useRouter()
  const { user } = useAuth()
  const { toast } = useToast()
  const [wishlistItems, setWishlistItems] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [removingItem, setRemovingItem] = useState<string | null>(null)
  const [addingToCart, setAddingToCart] = useState<string | null>(null)

useEffect(() => {
    const loadWishlist = async () => {
      setLoading(true)
      try {
        let items = []
        if (user) {
          // Get wishlist for logged-in user
          items = await getUserWishlist(user.uid)
        } else {
          // Get wishlist for guest user
          items = getGuestWishlist()
        }
        setWishlistItems(items)
      } catch (error) {
        console.error("Error loading wishlist:", error)
        toast({
          title: "Error",
          description: "Failed to load your wishlist. Please try again.",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

loadWishlist()
  }, [user, toast])

const handleRemoveFromWishlist = async (productId: string) => {
    setRemovingItem(productId)
    try {
      let success = false
      if (user) {
        // Remove from Firebase wishlist
        success = await removeFromWishlist(user.uid, productId)
      } else {
        // Remove from localStorage wishlist
        success = removeFromGuestWishlist(productId)
      }

if (success) {
        // Update local state
        setWishlistItems((prev) => prev.filter((item) => item.id !== productId))
        toast({
          title: "Removed from Wishlist",
          description: "The item has been removed from your wishlist.",
        })
      }
    } catch (error) {
      console.error("Error removing from wishlist:", error)
      toast({
        title: "Error",
        description: "Failed to remove item from wishlist. Please try again.",
        variant: "destructive",
      })
    } finally {
      setRemovingItem(null)
    }
  }

const handleAddToCart = async (product: any) => {
    setAddingToCart(product.id)
    try {
      let success = false
      if (user) {
        // Add to Firebase cart
        await addToCart(user.uid, product.id, 1, product.discounted_price || product.price)
        success = true
      } else {
        // Add to localStorage cart
        success = addToGuestCart(product, 1)
      }

if (success) {
        toast({
          title: "Added to Cart",
          description: `${product.name} has been added to your cart.`,
        })
      }
    } catch (error) {
      console.error("Error adding to cart:", error)
      toast({
        title: "Error",
        description: "Failed to add item to cart. Please try again.",
        variant: "destructive",
      })
    } finally {
      setAddingToCart(null)
    }
  }

const handleClearWishlist = async () => {
    try {
      if (user) {
        // Remove all items from Firebase wishlist
        for (const item of wishlistItems) {
          await removeFromWishlist(user.uid, item.id)
        }
      } else {
        // Clear localStorage wishlist
        localStorage.removeItem("guest_wishlist")
      }

setWishlistItems([])
      toast({
        title: "Wishlist Cleared",
        description: "All items have been removed from your wishlist.",
      })
    } catch (error) {
      console.error("Error clearing wishlist:", error)
      toast({
        title: "Error",
        description: "Failed to clear wishlist. Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <div className="container py-8">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-2">
          <Button variant="outline" size="icon" onClick={() => router.back()} className="h-8 w-8">
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <h1 className="text-2xl font-bold">My Wishlist</h1>
        </div>

{wishlistItems.length > 0 && (
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button variant="outline" size="sm" className="text-red-500 border-red-200 hover:bg-red-50">
                <Trash2 className="h-4 w-4 mr-2" />
                Clear Wishlist
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Clear Wishlist</AlertDialogTitle>
                <AlertDialogDescription>
                  Are you sure you want to remove all items from your wishlist? This action cannot be undone.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction onClick={handleClearWishlist} className="bg-red-500 hover:bg-red-600">
                  Clear Wishlist
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        )}
      </div>

{loading ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {[...Array(4)].map((_, i) => (
            <Card key={i}>
              <CardContent className="p-4">
                <Skeleton className="h-40 w-full rounded-lg" />
                <div className="mt-4 space-y-2">
                  <Skeleton className="h-4 w-3/4 rounded" />
                  <Skeleton className="h-4 w-1/2 rounded" />
                  <div className="flex gap-2 mt-4">
                    <Skeleton className="h-9 w-full rounded" />
                    <Skeleton className="h-9 w-9 rounded" />
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      ) : (
        <>
          {wishlistItems.length > 0 ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
              {wishlistItems.map((item) => (
                <Card key={item.id} className="overflow-hidden">
                  <CardContent className="p-0">
                    <Link href={`/product/${item.id}`}>
                      <div className="relative aspect-square overflow-hidden">
                        <ProductImage
                          src={item.image_url || "/placeholder.svg"}
                          alt={item.name}
                          className="object-cover transition-transform hover:scale-105"
                        />
                      </div>
                    </Link>
                    <div className="p-4">
                      <Link href={`/product/${item.id}`}>
                        <h3 className="font-medium line-clamp-2 hover:text-orange-500 transition-colors">
                          {item.name}
                        </h3>
                      </Link>
                      <div className="mt-1 flex items-center gap-2">
                        {item.discounted_price ? (
                          <>
                            <span className="font-semibold text-orange-600">₹{item.discounted_price.toFixed(2)}</span>
                            <span className="text-xs text-muted-foreground line-through">₹{item.price.toFixed(2)}</span>
                            <span className="text-xs text-green-600 font-medium">
                              {Math.round(((item.price - item.discounted_price) / item.price) * 100)}% off
                            </span>
                          </>
                        ) : (
                          <span className="font-semibold text-orange-600">₹{item.price.toFixed(2)}</span>
                        )}
                      </div>
                      <div className="flex gap-2 mt-3">
                        <Button
                          className="flex-1 bg-orange-500 hover:bg-orange-600"
                          size="sm"
                          onClick={() => handleAddToCart(item)}
                          disabled={addingToCart === item.id}
                        >
                          {addingToCart === item.id ? (
                            "Adding..."
                          ) : (
                            <>
                              <ShoppingCart className="h-4 w-4 mr-2" />
                              Add to Cart
                            </>
                          )}
                        </Button>
                        <Button
                          variant="outline"
                          size="icon"
                          className="h-9 w-9"
                          onClick={() => handleRemoveFromWishlist(item.id)}
                          disabled={removingItem === item.id}
                        >
                          {removingItem === item.id ? (
                            <div className="h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent" />
                          ) : (
                            <Trash2 className="h-4 w-4 text-red-500" />
                          )}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center py-12 text-center">
              <Heart className="h-16 w-16 text-muted-foreground mb-4" />
              <h2 className="text-xl font-semibold mb-2">Your wishlist is empty</h2>
              <p className="text-muted-foreground mb-6 max-w-md">
                Add items to your wishlist by clicking the heart icon on products you love.
              </p>
              <Button className="bg-orange-500 hover:bg-orange-600" onClick={() => router.push("/")}>
                Start Shopping
              </Button>
            </div>
          )}
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/upi-qr-generator.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { Copy, Check, RefreshCw, AlertCircle, Download } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Skeleton } from "@/components/ui/skeleton"

interface UpiQrGeneratorProps {
  amount: number
  orderId: string
  upiId: string
  onPaymentComplete: (transactionData: any) => void
}

export default function UpiQrGenerator({ amount, orderId, upiId, onPaymentComplete }: UpiQrGeneratorProps) {
  const [qrUrl, setQrUrl] = useState<string>("")
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [copied, setCopied] = useState(false)
  const [upiLink, setUpiLink] = useState("")
  const [paymentVerificationStatus, setPaymentVerificationStatus] = useState<
    "pending" | "verifying" | "success" | "failed"
  >("pending")

// Add transaction reference for verification
  const [transactionRef, setTransactionRef] = useState("")

// Generate UPI payment link and QR code
  useEffect(() => {
    if (!upiId || !amount) {
      setError("Missing UPI ID or amount")
      setIsLoading(false)
      return
    }

try {
      // Generate a transaction reference
      const txnRef = `TXN${Date.now()}${Math.floor(Math.random() * 1000)}`
      setTransactionRef(txnRef)

// Format amount to 2 decimal places
      const formattedAmount = amount.toFixed(2)

// Create UPI payment link with transaction reference
      const upiPaymentLink = `upi://pay?pa=${encodeURIComponent(upiId)}&pn=HalalDeals&am=${formattedAmount}&cu=INR&tn=Order-${orderId}&tr=${txnRef}`
      setUpiLink(upiPaymentLink)

// Generate QR code URL using a free QR code API
      const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(upiPaymentLink)}`
      setQrUrl(qrCodeUrl)
      setIsLoading(false)
    } catch (err) {
      console.error("Error generating UPI QR code:", err)
      setError("Failed to generate QR code. Please try again.")
      setIsLoading(false)
    }
  }, [upiId, amount, orderId])

// Copy UPI ID to clipboard
  const copyUpiId = () => {
    navigator.clipboard.writeText(upiId)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

// Open UPI app if on mobile
  const openUpiApp = () => {
    if (typeof window !== "undefined" && upiLink) {
      window.location.href = upiLink
    }
  }

// Download QR code
  const downloadQrCode = () => {
    const link = document.createElement("a")
    link.href = qrUrl
    link.download = `upi-payment-${orderId}.png`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

// Simulate payment verification with transaction reference
  const verifyPayment = () => {
    setPaymentVerificationStatus("verifying")

// In a real app, this would call an API to verify the payment using the transaction reference
    setTimeout(() => {
      // Simulate successful payment for demo purposes
      setPaymentVerificationStatus("success")

// Create transaction data to pass back
      const transactionData = {
        transactionId: transactionRef,
        amount: amount,
        status: "success",
        paymentMethod: "upi",
        timestamp: new Date().toISOString(),
      }

setTimeout(() => {
        onPaymentComplete(transactionData)
      }, 1000)
    }, 2000)
  }

if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center p-4 md:p-6 space-y-3 md:space-y-4">
        <div className="h-6 w-6 md:h-8 md:w-8 animate-spin rounded-full border-4 border-orange-500 border-t-transparent"></div>
        <p className="text-sm md:text-base">Generating payment QR code...</p>
      </div>
    )
  }

if (error) {
    return (
      <Alert variant="destructive">
        <AlertCircle className="h-4 w-4" />
        <AlertDescription className="text-xs md:text-sm">{error}</AlertDescription>
      </Alert>
    )
  }

return (
    <div className="flex flex-col items-center space-y-4 md:space-y-6 p-4">
      <div className="text-center">
        <h3 className="text-base md:text-lg font-semibold">Pay ₹{amount.toFixed(2)} using UPI</h3>
        <p className="text-xs md:text-sm text-muted-foreground">Scan the QR code with any UPI app</p>
      </div>

<div className="relative bg-white p-3 md:p-4 rounded-lg shadow-sm">
        {qrUrl ? (
          <Image
            src={qrUrl || "/placeholder.svg"}
            alt="UPI Payment QR Code"
            width={180}
            height={180}
            className="mx-auto"
          />
        ) : (
          <Skeleton className="h-[180px] w-[180px]" />
        )}
        <Button
          variant="ghost"
          size="sm"
          className="absolute top-1 right-1 h-6 w-6 md:h-8 md:w-8 p-0"
          onClick={downloadQrCode}
        >
          <Download className="h-3 w-3 md:h-4 md:w-4" />
          <span className="sr-only">Download QR Code</span>
        </Button>
      </div>

<div className="w-full max-w-xs space-y-1 md:space-y-2">
        <Label htmlFor="upi-id" className="text-xs md:text-sm">
          UPI ID
        </Label>
        <div className="flex">
          <Input id="upi-id" value={upiId} readOnly className="rounded-r-none text-xs md:text-sm h-8 md:h-9" />
          <Button onClick={copyUpiId} variant="secondary" className="rounded-l-none h-8 md:h-9 px-2 md:px-3">
            {copied ? <Check className="h-3 w-3 md:h-4 md:w-4" /> : <Copy className="h-3 w-3 md:h-4 md:w-4" />}
          </Button>
        </div>
        <p className="text-xs text-muted-foreground">
          You can also manually pay to this UPI ID with amount ₹{amount.toFixed(2)}
        </p>
      </div>

{/* Transaction reference display */}
      <div className="w-full max-w-xs">
        <Label htmlFor="transaction-ref" className="text-xs md:text-sm">
          Transaction Reference
        </Label>
        <div className="flex">
          <Input
            id="transaction-ref"
            value={transactionRef}
            readOnly
            className="text-xs md:text-sm h-8 md:h-9 font-mono"
          />
        </div>
        <p className="text-xs text-muted-foreground mt-1">Use this reference when making manual payment</p>
      </div>

{/* Mobile-specific button to open UPI app */}
      <Button onClick={openUpiApp} className="w-full max-w-xs bg-green-600 hover:bg-green-700 text-xs md:text-sm">
        Open UPI App
      </Button>

<div className="w-full max-w-xs space-y-1 md:space-y-2">
        <Button
          onClick={verifyPayment}
          className="w-full bg-orange-500 hover:bg-orange-600 text-xs md:text-sm h-9 md:h-10"
          disabled={paymentVerificationStatus === "verifying" || paymentVerificationStatus === "success"}
        >
          {paymentVerificationStatus === "verifying" ? (
            <>
              <RefreshCw className="mr-2 h-3 w-3 md:h-4 md:w-4 animate-spin" />
              Verifying Payment...
            </>
          ) : paymentVerificationStatus === "success" ? (
            <>
              <Check className="mr-2 h-3 w-3 md:h-4 md:w-4" />
              Payment Verified!
            </>
          ) : (
            "I've Completed the Payment"
          )}
        </Button>

<p className="text-xs text-center text-muted-foreground">Click the button after completing your payment</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/checkout/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { getUserCart, createOrder } from "@/lib/checkout"
import { getGuestCart } from "@/lib/guest-cart"
import { getUserAddresses } from "@/lib/user"
import { useToast } from "@/hooks/use-toast"
import { getSettings } from "@/lib/settings"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertCircle, CheckCircle, ArrowLeft, ShoppingCart } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Skeleton } from "@/components/ui/skeleton"
import Link from "next/link"

// Import UPI payment component
import UpiQrGenerator from "@/components/upi-qr-generator"

export default function CheckoutPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const isGuestCheckout = searchParams.get("guest") === "true"
  const { user } = useAuth()
  const { toast } = useToast()
  const [loading, setLoading] = useState(true)
  const [cartItems, setCartItems] = useState<any[]>([])
  const [savedAddresses, setSavedAddresses] = useState<any[]>([])
  const [processing, setProcessing] = useState(false)
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [checkoutError, setCheckoutError] = useState<string | null>(null)

// Add a state for tracking checkout steps
  const [checkoutStep, setCheckoutStep] = useState<"details" | "payment" | "confirmation">("details")

// Add a state for UPI payment
  const [showUpiQr, setShowUpiQr] = useState(false)
  const [upiId, setUpiId] = useState("")
  const [paymentSettings, setPaymentSettings] = useState<any>(null)
  const [availablePaymentMethods, setAvailablePaymentMethods] = useState({
    cod: true,
    upi: true,
    card: true,
  })

const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    address: "",
    city: "",
    state: "",
    postalCode: "",
    paymentMethod: "cod", // cash on delivery by default
    selectedAddressId: "",
  })

// Add a function to fetch UPI ID and payment settings
  useEffect(() => {
    const fetchSettings = async () => {
      try {
        const settings = await getSettings()
        if (settings && settings.payment_settings) {
          setPaymentSettings(settings.payment_settings)
          setUpiId(settings.payment_settings.upiId || "yourupi@bank")

// Set available payment methods based on settings
          setAvailablePaymentMethods({
            cod: settings.payment_settings.enableCashOnDelivery !== false,
            upi: settings.payment_settings.enableUpiPayment !== false,
            card: settings.payment_settings.enableCardPayment !== false,
          })
        }
      } catch (error) {
        console.error("Error fetching settings:", error)
        setUpiId("yourupi@bank") // Fallback UPI ID
      }
    }

fetchSettings()
  }, [])

useEffect(() => {
    const loadData = async () => {
      setLoading(true)
      setCheckoutError(null)

try {
        // Load cart items
        let items = []
        if (user) {
          // Load cart from Firebase for logged-in users
          items = await getUserCart(user.uid)
        } else {
          // Load cart from localStorage for guests
          items = getGuestCart()
        }

setCartItems(items)

if (items.length === 0) {
          // Redirect to cart if empty
          toast({
            title: "Empty Cart",
            description: "Your cart is empty. Add some products before checkout.",
          })
          router.push("/cart")
          return
        }

// Load user addresses for logged-in users
        if (user) {
          const addresses = await getUserAddresses(user.uid)
          setSavedAddresses(addresses)

// If user has a default address, select it
          const defaultAddress = addresses.find((addr) => addr.is_default)
          if (defaultAddress) {
            setFormData((prev) => ({
              ...prev,
              selectedAddressId: defaultAddress.id,
              name: defaultAddress.full_name,
              phone: defaultAddress.phone,
              address:
                defaultAddress.address_line1 +
                (defaultAddress.address_line2 ? ", " + defaultAddress.address_line2 : ""),
              city: defaultAddress.city,
              state: defaultAddress.state,
              postalCode: defaultAddress.postal_code,
            }))
          }

// Set user email
          if (user.email) {
            setFormData((prev) => ({
              ...prev,
              email: user.email || "",
            }))
          }
        }
      } catch (error) {
        console.error("Error loading data for checkout:", error)
        setCheckoutError("Failed to load checkout data. Please try again.")
        toast({
          title: "Error Loading Data",
          description: "There was a problem loading your information. Please try again.",
        })
      } finally {
        setLoading(false)
      }
    }

loadData()
  }, [user, router, toast])

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

// Clear error for this field if it exists
    if (errors[name]) {
      setErrors((prev) => {
        const newErrors = { ...prev }
        delete newErrors[name]
        return newErrors
      })
    }
  }

const handleRadioChange = (value: string) => {
    setFormData((prev) => ({ ...prev, paymentMethod: value }))
  }

const handleAddressSelect = (addressId: string) => {
    setFormData((prev) => ({ ...prev, selectedAddressId: addressId }))

// Fill form with selected address data
    const selectedAddress = savedAddresses.find((addr) => addr.id === addressId)
    if (selectedAddress) {
      setFormData((prev) => ({
        ...prev,
        name: selectedAddress.full_name,
        phone: selectedAddress.phone,
        address:
          selectedAddress.address_line1 + (selectedAddress.address_line2 ? ", " + selectedAddress.address_line2 : ""),
        city: selectedAddress.city,
        state: selectedAddress.state,
        postalCode: selectedAddress.postal_code,
      }))
    }
  }

const calculateSubtotal = () => {
    return cartItems.reduce((total, item) => {
      const price = item.price || item.products?.price || 0
      return total + price * item.quantity
    }, 0)
  }

const calculateTotal = () => {
    // No tax calculation - just return the subtotal
    return calculateSubtotal()
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}
    const requiredFields = [
      { key: "name", label: "Full Name" },
      { key: "email", label: "Email" },
      { key: "phone", label: "Phone Number" },
      { key: "address", label: "Address" },
      { key: "city", label: "City" },
      { key: "state", label: "State" },
      { key: "postalCode", label: "Postal Code" },
    ]

// Check required fields
    requiredFields.forEach((field) => {
      if (!formData[field.key as keyof typeof formData]) {
        newErrors[field.key] = `${field.label} is required`
      }
    })

// Validate email format
    if (formData.email && !/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Please enter a valid email address"
    }

// Validate phone number (basic validation)
    if (formData.phone && !/^\d{10}$/.test(formData.phone.replace(/\D/g, ""))) {
      newErrors.phone = "Please enter a valid 10-digit phone number"
    }

// Validate postal code (basic validation for India)
    if (formData.postalCode && !/^\d{6}$/.test(formData.postalCode.replace(/\D/g, ""))) {
      newErrors.postalCode = "Please enter a valid 6-digit postal code"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

// Modify the handleSubmit function to handle UPI payment
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

// Validate form
    if (!validateForm()) {
      toast({
        title: "Form Validation Error",
        description: "Please correct the errors in the form.",
      })
      // Scroll to the first error
      const firstErrorField = document.querySelector('[aria-invalid="true"]')
      if (firstErrorField) {
        firstErrorField.scrollIntoView({ behavior: "smooth", block: "center" })
      }
      return
    }

// If payment method is UPI, show QR code instead of processing order
    if (formData.paymentMethod === "upi") {
      setCheckoutStep("payment")
      setShowUpiQr(true)
      return
    }

setProcessing(true)
    setCheckoutError(null)

try {
      // Create shipping address string
      const shippingAddress = `${formData.name}, ${formData.address}, ${formData.city}, ${formData.state} ${formData.postalCode}, Phone: ${formData.phone}`

let orderId

if (user) {
        // Create order for logged-in user
        orderId = await createOrder(user.uid, calculateTotal(), shippingAddress, formData.paymentMethod, cartItems)
      } else {
        // Create order for guest user with customer info
        const customerInfo = {
          name: formData.name,
          email: formData.email,
          phone: formData.phone,
        }

orderId = await createOrder(
          null,
          calculateTotal(),
          shippingAddress,
          formData.paymentMethod,
          cartItems,
          customerInfo,
        )
      }

if (orderId) {
        toast({
          title: "Order Placed Successfully!",
          description: `Your order #${orderId} has been placed and is being processed.`,
        })

// Set confirmation step before redirecting
        setCheckoutStep("confirmation")

// Redirect to order confirmation page after a short delay
        setTimeout(() => {
          router.push(`/order-confirmation/${orderId}`)
        }, 1000)
      } else {
        throw new Error("Failed to create order")
      }
    } catch (error) {
      console.error("Error creating order:", error)
      setCheckoutError("Failed to place your order. Please try again.")
      toast({
        title: "Order Error",
        description: "Failed to place your order. Please try again.",
        variant: "destructive",
      })
    } finally {
      setProcessing(false)
    }
  }

// Add a function to handle UPI payment completion
  const handleUpiPaymentComplete = async (transactionData: any) => {
    setProcessing(true)
    setCheckoutError(null)

let orderId

if (user) {
        // Create order for logged-in user with transaction data
        orderId = await createOrder(
          user.uid,
          calculateTotal(),
          shippingAddress,
          "upi",
          cartItems,
          null,
          transactionData,
        )
      } else {
        // Create order for guest user with customer info and transaction data
        const customerInfo = {
          name: formData.name,
          email: formData.email,
          phone: formData.phone,
        }

orderId = await createOrder(
          null,
          calculateTotal(),
          shippingAddress,
          "upi",
          cartItems,
          customerInfo,
          transactionData,
        )
      }

if (orderId) {
        // Hide UPI QR code
        setShowUpiQr(false)

// Set confirmation step
        setCheckoutStep("confirmation")

toast({
          title: "Payment Successful!",
          description: `Your order #${orderId} has been placed and is being processed.`,
        })

if (loading) {
    return (
      <div className="container px-4 py-6 md:py-8">
        <h1 className="text-xl font-bold md:text-2xl">Checkout</h1>
        <div className="mt-4 mb-6">
          <div className="flex items-center justify-between">
            <div className="flex flex-col items-center">
              <Skeleton className="w-8 h-8 md:w-10 md:h-10 rounded-full" />
              <Skeleton className="w-12 h-3 md:w-16 md:h-4 mt-1" />
            </div>
            <div className="flex-1 h-1 mx-2">
              <Skeleton className="w-full h-full" />
            </div>
            <div className="flex flex-col items-center">
              <Skeleton className="w-8 h-8 md:w-10 md:h-10 rounded-full" />
              <Skeleton className="w-12 h-3 md:w-16 md:h-4 mt-1" />
            </div>
            <div className="flex-1 h-1 mx-2">
              <Skeleton className="w-full h-full" />
            </div>
            <div className="flex flex-col items-center">
              <Skeleton className="w-8 h-8 md:w-10 md:h-10 rounded-full" />
              <Skeleton className="w-12 h-3 md:w-16 md:h-4 mt-1" />
            </div>
          </div>
        </div>
        <div className="mt-6 grid gap-4 md:gap-6 md:grid-cols-2">
          <div className="space-y-4">
            <Skeleton className="h-[500px] w-full rounded-lg" />
          </div>
          <div>
            <Skeleton className="h-[350px] w-full rounded-lg" />
          </div>
        </div>
      </div>
    )
  }

// If cart is empty, show a message and redirect to cart
  if (cartItems.length === 0) {
    return (
      <div className="container flex min-h-[60vh] flex-col items-center justify-center py-8">
        <ShoppingCart className="h-12 w-12 md:h-16 md:w-16 text-muted-foreground" />
        <h1 className="mt-4 text-xl md:text-2xl font-bold">Your cart is empty</h1>
        <p className="mt-2 text-center text-sm md:text-base text-muted-foreground">
          You need to add products to your cart before checkout.
        </p>
        <Link href="/">
          <Button className="mt-6 bg-orange-500 hover:bg-orange-600">Continue Shopping</Button>
        </Link>
      </div>
    )
  }

return (
    <div className="container px-4 py-6 md:py-8">
      <h1 className="text-xl font-bold md:text-2xl">Checkout</h1>

{/* Add a progress indicator at the top of the checkout page */}
      <div className="mt-4 mb-6">
        <div className="flex items-center justify-between">
          <div className="flex flex-col items-center">
            <div
              className={`w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center text-sm md:text-base ${
                checkoutStep === "details" ? "bg-orange-500 text-white" : "bg-gray-200"
              }`}
            >
              1
            </div>
            <span className="text-xs md:text-sm mt-1">Details</span>
          </div>
          <div className="flex-1 h-1 mx-2 bg-gray-200">
            <div className={`h-full ${checkoutStep !== "details" ? "bg-orange-500" : "bg-gray-200"}`}></div>
          </div>
          <div className="flex flex-col items-center">
            <div
              className={`w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center text-sm md:text-base ${
                checkoutStep === "payment" ? "bg-orange-500 text-white" : "bg-gray-200"
              }`}
            >
              2
            </div>
            <span className="text-xs md:text-sm mt-1">Payment</span>
          </div>
          <div className="flex-1 h-1 mx-2 bg-gray-200">
            <div className={`h-full ${checkoutStep === "confirmation" ? "bg-orange-500" : "bg-gray-200"}`}></div>
          </div>
          <div className="flex flex-col items-center">
            <div
              className={`w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center text-sm md:text-base ${
                checkoutStep === "confirmation" ? "bg-orange-500 text-white" : "bg-gray-200"
              }`}
            >
              3
            </div>
            <span className="text-xs md:text-sm mt-1">Confirmation</span>
          </div>
        </div>
      </div>

{checkoutError && (
        <Alert variant="destructive" className="mt-4">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{checkoutError}</AlertDescription>
        </Alert>
      )}

{/* Back to cart button */}
      <div className="mb-4">
        <Button
          variant="outline"
          size="sm"
          onClick={() => router.push("/cart")}
          className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
        >
          <ArrowLeft className="h-3 w-3 md:h-4 md:w-4" />
          Back to Cart
        </Button>
      </div>

<form onSubmit={handleSubmit} className="mt-6 grid gap-4 md:gap-6 md:grid-cols-2">
        <div className="space-y-4 md:space-y-6">
          <Card>
            <CardHeader className="p-4 md:p-6">
              <CardTitle className="text-base md:text-lg">Shipping Information</CardTitle>
              <CardDescription className="text-xs md:text-sm">Enter your shipping details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4 p-4 md:p-6 pt-0 md:pt-0">
              {savedAddresses.length > 0 && !isGuestCheckout && (
                <div className="space-y-1 md:space-y-2">
                  <Label className="text-xs md:text-sm">Saved Addresses</Label>
                  <Select value={formData.selectedAddressId} onValueChange={handleAddressSelect}>
                    <SelectTrigger className="text-xs md:text-sm h-8 md:h-9">
                      <SelectValue placeholder="Select a saved address" />
                    </SelectTrigger>
                    <SelectContent>
                      {savedAddresses.map((address) => (
                        <SelectItem key={address.id} value={address.id} className="text-xs md:text-sm">
                          {address.full_name} - {address.address_line1}, {address.city}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

<div className="grid gap-3 md:gap-4 md:grid-cols-2">
                <div className="space-y-1 md:space-y-2">
                  <Label htmlFor="name" className={`text-xs md:text-sm ${errors.name ? "text-destructive" : ""}`}>
                    Full Name <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    aria-invalid={!!errors.name}
                    className={`text-xs md:text-sm h-8 md:h-9 ${errors.name ? "border-destructive" : ""}`}
                  />
                  {errors.name && (
                    <p className="text-xs text-destructive flex items-center mt-1">
                      <AlertCircle className="h-3 w-3 mr-1" />
                      {errors.name}
                    </p>
                  )}
                </div>
                <div className="space-y-1 md:space-y-2">
                  <Label htmlFor="email" className={`text-xs md:text-sm ${errors.email ? "text-destructive" : ""}`}>
                    Email <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    value={formData.email}
                    onChange={handleChange}
                    aria-invalid={!!errors.email}
                    className={`text-xs md:text-sm h-8 md:h-9 ${errors.email ? "border-destructive" : ""}`}
                  />
                  {errors.email && (
                    <p className="text-xs text-destructive flex items-center mt-1">
                      <AlertCircle className="h-3 w-3 mr-1" />
                      {errors.email}
                    </p>
                  )}
                </div>
              </div>

<div className="space-y-1 md:space-y-2">
                <Label htmlFor="phone" className={`text-xs md:text-sm ${errors.phone ? "text-destructive" : ""}`}>
                  Phone Number <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="phone"
                  name="phone"
                  type="tel"
                  value={formData.phone}
                  onChange={handleChange}
                  aria-invalid={!!errors.phone}
                  className={`text-xs md:text-sm h-8 md:h-9 ${errors.phone ? "border-destructive" : ""}`}
                  placeholder="10-digit mobile number"
                />
                {errors.phone && (
                  <p className="text-xs text-destructive flex items-center mt-1">
                    <AlertCircle className="h-3 w-3 mr-1" />
                    {errors.phone}
                  </p>
                )}
              </div>

<div className="space-y-1 md:space-y-2">
                <Label htmlFor="address" className={`text-xs md:text-sm ${errors.address ? "text-destructive" : ""}`}>
                  Address <span className="text-destructive">*</span>
                </Label>
                <Textarea
                  id="address"
                  name="address"
                  value={formData.address}
                  onChange={handleChange}
                  aria-invalid={!!errors.address}
                  className={`text-xs md:text-sm min-h-[60px] md:min-h-[80px] ${errors.address ? "border-destructive" : ""}`}
                  placeholder="Street address, apartment, etc."
                />
                {errors.address && (
                  <p className="text-xs text-destructive flex items-center mt-1">
                    <AlertCircle className="h-3 w-3 mr-1" />
                    {errors.address}
                  </p>
                )}
              </div>

<div className="grid gap-3 md:gap-4 md:grid-cols-3">
                <div className="space-y-1 md:space-y-2">
                  <Label htmlFor="city" className={`text-xs md:text-sm ${errors.city ? "text-destructive" : ""}`}>
                    City <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="city"
                    name="city"
                    value={formData.city}
                    onChange={handleChange}
                    aria-invalid={!!errors.city}
                    className={`text-xs md:text-sm h-8 md:h-9 ${errors.city ? "border-destructive" : ""}`}
                  />
                  {errors.city && (
                    <p className="text-xs text-destructive flex items-center mt-1">
                      <AlertCircle className="h-3 w-3 mr-1" />
                      {errors.city}
                    </p>
                  )}
                </div>
                <div className="space-y-1 md:space-y-2">
                  <Label htmlFor="state" className={`text-xs md:text-sm ${errors.state ? "text-destructive" : ""}`}>
                    State <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="state"
                    name="state"
                    value={formData.state}
                    onChange={handleChange}
                    aria-invalid={!!errors.state}
                    className={`text-xs md:text-sm h-8 md:h-9 ${errors.state ? "border-destructive" : ""}`}
                  />
                  {errors.state && (
                    <p className="text-xs text-destructive flex items-center mt-1">
                      <AlertCircle className="h-3 w-3 mr-1" />
                      {errors.state}
                    </p>
                  )}
                </div>
                <div className="space-y-1 md:space-y-2">
                  <Label
                    htmlFor="postalCode"
                    className={`text-xs md:text-sm ${errors.postalCode ? "text-destructive" : ""}`}
                  >
                    Postal Code <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="postalCode"
                    name="postalCode"
                    value={formData.postalCode}
                    onChange={handleChange}
                    aria-invalid={!!errors.postalCode}
                    className={`text-xs md:text-sm h-8 md:h-9 ${errors.postalCode ? "border-destructive" : ""}`}
                    placeholder="6-digit PIN code"
                  />
                  {errors.postalCode && (
                    <p className="text-xs text-destructive flex items-center mt-1">
                      <AlertCircle className="h-3 w-3 mr-1" />
                      {errors.postalCode}
                    </p>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="p-4 md:p-6">
              <CardTitle className="text-base md:text-lg">Payment Method</CardTitle>
              <CardDescription className="text-xs md:text-sm">Select your preferred payment method</CardDescription>
            </CardHeader>
            <CardContent className="p-4 md:p-6 pt-0 md:pt-0">
              <RadioGroup value={formData.paymentMethod} onValueChange={handleRadioChange} className="space-y-3">
                {availablePaymentMethods.cod && (
                  <div className="flex items-center space-x-2 rounded-md border p-3 hover:bg-muted/50">
                    <RadioGroupItem value="cod" id="cod" />
                    <Label htmlFor="cod" className="flex-1 cursor-pointer">
                      <div className="font-medium text-sm md:text-base">Cash on Delivery</div>
                      <div className="text-xs md:text-sm text-muted-foreground">Pay when you receive your order</div>
                    </Label>
                  </div>
                )}

{availablePaymentMethods.upi && (
                  <div className="flex items-center space-x-2 rounded-md border p-3 hover:bg-muted/50">
                    <RadioGroupItem value="upi" id="upi" />
                    <Label htmlFor="upi" className="flex-1 cursor-pointer">
                      <div className="font-medium text-sm md:text-base">UPI Payment</div>
                      <div className="text-xs md:text-sm text-muted-foreground">
                        Pay using UPI apps like Google Pay, PhonePe, etc.
                      </div>
                    </Label>
                  </div>
                )}

{availablePaymentMethods.card && (
                  <div className="flex items-center space-x-2 rounded-md border p-3 hover:bg-muted/50">
                    <RadioGroupItem value="card" id="card" />
                    <Label htmlFor="card" className="flex-1 cursor-pointer">
                      <div className="font-medium text-sm md:text-base">Credit/Debit Card</div>
                      <div className="text-xs md:text-sm text-muted-foreground">Pay securely with your card</div>
                    </Label>
                  </div>
                )}
              </RadioGroup>
            </CardContent>
          </Card>
        </div>

<div>
          <Card className="sticky top-4">
            <CardHeader className="p-4 md:p-6">
              <CardTitle className="text-base md:text-lg">Order Summary</CardTitle>
              <CardDescription className="text-xs md:text-sm">Review your order details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4 p-4 md:p-6 pt-0 md:pt-0">
              <div className="max-h-[200px] md:max-h-[300px] overflow-y-auto space-y-2 pr-2">
                {cartItems.map((item) => (
                  <div key={item.id} className="flex justify-between text-sm md:text-base">
                    <div>
                      <span className="font-medium">{item.products?.name || "Product"}</span>
                      <span className="text-xs md:text-sm text-muted-foreground"> × {item.quantity}</span>
                    </div>
                    <span>₹{((item.price || item.products?.price || 0) * item.quantity).toFixed(2)}</span>
                  </div>
                ))}
              </div>

<div className="space-y-2">
                <div className="flex justify-between text-sm md:text-base">
                  <span className="text-muted-foreground">Subtotal</span>
                  <span>₹{calculateSubtotal().toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-sm md:text-base">
                  <span className="text-muted-foreground">Shipping</span>
                  <span>Free</span>
                </div>
                <div className="flex justify-between text-sm md:text-base">
                  <span className="text-muted-foreground">Tax</span>
                  <span>₹0.00</span>
                </div>
              </div>

<div className="flex justify-between font-medium text-base md:text-lg">
                <span>Total</span>
                <span>₹{calculateTotal().toFixed(2)}</span>
              </div>

<div className="rounded-md bg-muted p-3 text-xs md:text-sm">
                <div className="flex items-center gap-2">
                  <CheckCircle className="h-3 w-3 md:h-4 md:w-4 text-green-500" />
                  <span className="font-medium">Secure Checkout</span>
                </div>
                <p className="mt-1 text-muted-foreground">
                  Your personal data will be used to process your order, support your experience, and for other purposes
                  described in our privacy policy.
                </p>
              </div>
            </CardContent>
            <CardFooter className="p-4 md:p-6 pt-0 md:pt-0">
              <Button
                type="submit"
                className="w-full bg-orange-500 hover:bg-orange-600 text-sm md:text-base h-9 md:h-10"
                disabled={processing}
              >
                {processing ? (
                  <>
                    <span className="mr-2 inline-block h-3 w-3 md:h-4 md:w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em]"></span>
                    Processing...
                  </>
                ) : (
                  `Place Order - ₹${calculateTotal().toFixed(2)}`
                )}
              </Button>
            </CardFooter>
          </Card>
        </div>
      </form>

{showUpiQr && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
            <div className="p-3 md:p-4 border-b">
              <h2 className="text-base md:text-lg font-semibold">UPI Payment</h2>
            </div>
            <UpiQrGenerator
              amount={calculateTotal()}
              orderId={`TEMP-${Date.now()}`}
              upiId={upiId}
              onPaymentComplete={handleUpiPaymentComplete}
            />
            <div className="p-3 md:p-4 border-t flex justify-end">
              <Button variant="outline" onClick={() => setShowUpiQr(false)} className="text-xs md:text-sm h-8 md:h-9">
                Cancel
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/home-images/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft, Save, Upload, RefreshCw, ImageIcon, Plus, Trash } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { useAuth } from "@/contexts/auth-context"
import { getSettings, updateSettings } from "@/lib/settings"
import { uploadToSupabaseStorage } from "@/lib/supabase-storage"
import ProductImage from "@/components/product-image"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

export default function HomeImagesPage() {
  const router = useRouter()
  const { user, isAdminUser } = useAuth()
  const { toast } = useToast()
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [settings, setSettings] = useState<any>(null)
  const [activeTab, setActiveTab] = useState("carousel")
  const [uploadingImage, setUploadingImage] = useState<string | null>(null)

// State for carousel images
  const [carouselImages, setCarouselImages] = useState<any[]>([
    {
      id: 1,
      title: "MOON LAMP QURAN SPEAKERS",
      subtitle: "",
      tag: "",
      buttonText: "ORDER NOW",
      buttonLink: "/product/moon-lamp",
      imageUrl: "",
    },
    {
      id: 2,
      title: "AL HARAMEEN Wrist Watches",
      subtitle: "EXCLUSIVE",
      tag: "BEST OFFERS",
      buttonText: "SHOP NOW",
      buttonLink: "/category/watches",
      imageUrl: "",
    },
  ])

// State for featured banner
  const [featuredBanner, setFeaturedBanner] = useState({
    title: "Al Harameen",
    subtitle: "Azan Wall Clocks Loaded with Features",
    discount: "25% Off",
    imageUrl: "",
    href: "/category/azan-watches",
  })

useEffect(() => {
    const loadSettings = async () => {
      if (!user || !isAdminUser) {
        router.push("/admin/login")
        return
      }

setLoading(true)
      try {
        const settingsData = await getSettings()
        setSettings(settingsData)

// Initialize carousel images from settings if available
        if (settingsData?.home_images?.carousel && settingsData.home_images.carousel.length > 0) {
          setCarouselImages(settingsData.home_images.carousel)
        }

// Initialize featured banner from settings if available
        if (settingsData?.home_images?.featuredBanner) {
          setFeaturedBanner(settingsData.home_images.featuredBanner)
        }
      } catch (error) {
        console.error("Error loading settings:", error)
        toast({
          title: "Error",
          description: "Failed to load settings. Please try again.",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

loadSettings()
  }, [user, isAdminUser, router, toast])

const handleCarouselChange = (index: number, field: string, value: string) => {
    const updatedImages = [...carouselImages]
    updatedImages[index] = { ...updatedImages[index], [field]: value }
    setCarouselImages(updatedImages)
  }

const handleFeaturedBannerChange = (field: string, value: string) => {
    setFeaturedBanner((prev) => ({ ...prev, [field]: value }))
  }

const handleAddCarouselBanner = () => {
    const newId = Math.max(0, ...carouselImages.map((img) => img.id)) + 1
    setCarouselImages([
      ...carouselImages,
      {
        id: newId,
        title: "New Banner",
        subtitle: "",
        tag: "",
        buttonText: "SHOP NOW",
        buttonLink: "/",
        imageUrl: "",
      },
    ])
  }

const handleRemoveCarouselBanner = (index: number) => {
    const updatedImages = [...carouselImages]
    updatedImages.splice(index, 1)
    setCarouselImages(updatedImages)
  }

// Fix the handleImageUpload function to properly handle file uploads
  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>, type: string, index?: number) => {
    const file = e.target.files?.[0]
    if (!file) return

// Validate file type
    if (!file.type.startsWith("image/")) {
      toast({
        title: "Invalid File",
        description: "Please upload an image file (JPEG, PNG, etc.)",
        variant: "destructive",
      })
      return
    }

const imageType = type === "carousel" ? `carousel-${index}` : "featured-banner"
    setUploadingImage(imageType)

try {
      // Upload to Supabase Storage
      const imageUrl = await uploadToSupabaseStorage(file, "home-images")

if (type === "carousel" && index !== undefined) {
        const updatedImages = [...carouselImages]
        updatedImages[index] = { ...updatedImages[index], imageUrl: imageUrl }
        setCarouselImages(updatedImages)
      } else if (type === "featured") {
        setFeaturedBanner((prev) => ({ ...prev, imageUrl: imageUrl }))
      }

toast({
        title: "Image Uploaded",
        description: "The image has been uploaded successfully.",
      })
    } catch (error) {
      console.error("Error uploading image:", error)
      let errorMessage = "Failed to upload image. Please try again."

if (error instanceof Error) {
        errorMessage = error.message
      }

toast({
        title: "Upload Failed",
        description: errorMessage,
        variant: "destructive",
      })
    } finally {
      setUploadingImage(null)
      // Reset the file input
      e.target.value = ""
    }
  }

// Fix the saveSettings function to properly save carousel images
  const saveSettings = async () => {
    setSaving(true)
    try {
      // Check if there are any carousel banners
      if (carouselImages.length === 0) {
        toast({
          title: "No Carousel Banners",
          description: "Please add at least one carousel banner before saving.",
          variant: "destructive",
        })
        setSaving(false)
        return
      }

// Validate that images are uploaded for all carousel banners
      const missingImages = carouselImages.filter((img) => !img.imageUrl).length
      if (missingImages > 0) {
        toast({
          title: "Missing Images",
          description: `Please upload images for all ${missingImages} carousel banners before saving.`,
          variant: "destructive",
        })
        setSaving(false)
        return
      }

// Validate featured banner image
      if (!featuredBanner.imageUrl) {
        toast({
          title: "Missing Featured Banner Image",
          description: "Please upload an image for the featured banner before saving.",
          variant: "destructive",
        })
        setSaving(false)
        return
      }

// Prepare home images settings
      const homeImagesSettings = {
        carousel: carouselImages,
        featuredBanner: featuredBanner,
      }

// Update settings
      await updateSettings("home_images", homeImagesSettings)

toast({
        title: "Settings Saved",
        description: "Home page images have been updated successfully.",
      })

// Refresh the page to show updated settings
      router.refresh()
    } catch (error) {
      console.error("Error saving settings:", error)
      toast({
        title: "Error",
        description: "Failed to save settings. Please try again.",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

if (loading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent"></div>
        <span className="ml-2">Loading settings...</span>
      </div>
    )
  }

return (
    <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Button variant="outline" size="icon" onClick={() => router.back()}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <h2 className="text-3xl font-bold tracking-tight">Home Page Images</h2>
        </div>
        <Button onClick={saveSettings} disabled={saving} className="bg-orange-500 hover:bg-orange-600">
          {saving ? (
            <>
              <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
              Saving...
            </>
          ) : (
            <>
              <Save className="mr-2 h-4 w-4" />
              Save Changes
            </>
          )}
        </Button>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="carousel">Carousel Banners</TabsTrigger>
          <TabsTrigger value="featured">Featured Banner</TabsTrigger>
        </TabsList>

<TabsContent value="carousel" className="space-y-4 mt-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle>Carousel Banners</CardTitle>
                <CardDescription>
                  Edit the main carousel banners that appear at the top of the home page
                </CardDescription>
              </div>
              <Button onClick={handleAddCarouselBanner} variant="outline" className="gap-1">
                <Plus className="h-4 w-4" />
                Add Banner
              </Button>
            </CardHeader>
            <CardContent className="space-y-6">
              {carouselImages.length === 0 ? (
                <div className="text-center py-8">
                  <ImageIcon className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
                  <h3 className="text-lg font-medium mb-2">No Carousel Banners</h3>
                  <p className="text-muted-foreground mb-4">
                    Add your first carousel banner to display on the home page.
                  </p>
                  <Button onClick={handleAddCarouselBanner} className="bg-orange-500 hover:bg-orange-600">
                    <Plus className="h-4 w-4 mr-2" />
                    Add First Banner
                  </Button>
                </div>
              ) : (
                carouselImages.map((banner, index) => (
                  <div key={index} className="space-y-4 border rounded-lg p-4">
                    <div className="flex justify-between items-center">
                      <h3 className="text-lg font-medium">Banner {index + 1}</h3>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button variant="ghost" size="sm" className="text-red-500 hover:bg-red-50 hover:text-red-600">
                            <Trash className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Remove Banner</AlertDialogTitle>
                            <AlertDialogDescription>
                              Are you sure you want to remove this banner? This action cannot be undone.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => handleRemoveCarouselBanner(index)}
                              className="bg-red-500 hover:bg-red-600"
                            >
                              Remove
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>

<div className="grid gap-4 md:grid-cols-2">
                      <div className="space-y-4">
                        <div className="space-y-2">
                          <Label htmlFor={`title-${index}`}>Title</Label>
                          <Input
                            id={`title-${index}`}
                            value={banner.title}
                            onChange={(e) => handleCarouselChange(index, "title", e.target.value)}
                          />
                        </div>

<div className="space-y-2">
                          <Label htmlFor={`subtitle-${index}`}>Subtitle (Optional)</Label>
                          <Input
                            id={`subtitle-${index}`}
                            value={banner.subtitle || ""}
                            onChange={(e) => handleCarouselChange(index, "subtitle", e.target.value)}
                          />
                        </div>

<div className="space-y-2">
                          <Label htmlFor={`tag-${index}`}>Tag (Optional)</Label>
                          <Input
                            id={`tag-${index}`}
                            value={banner.tag || ""}
                            onChange={(e) => handleCarouselChange(index, "tag", e.target.value)}
                          />
                        </div>

<div className="grid gap-4 grid-cols-2">
                          <div className="space-y-2">
                            <Label htmlFor={`buttonText-${index}`}>Button Text</Label>
                            <Input
                              id={`buttonText-${index}`}
                              value={banner.buttonText}
                              onChange={(e) => handleCarouselChange(index, "buttonText", e.target.value)}
                            />
                          </div>

<div className="space-y-2">
                            <Label htmlFor={`buttonLink-${index}`}>Button Link</Label>
                            <Input
                              id={`buttonLink-${index}`}
                              value={banner.buttonLink}
                              onChange={(e) => handleCarouselChange(index, "buttonLink", e.target.value)}
                            />
                          </div>
                        </div>
                      </div>

<div className="space-y-2">
                        <Label>Banner Image</Label>
                        <div className="border rounded-lg p-4">
                          {banner.imageUrl ? (
                            <div className="relative aspect-video w-full overflow-hidden rounded-md">
                              <ProductImage src={banner.imageUrl} alt={banner.title} className="object-cover" />
                            </div>
                          ) : (
                            <div className="flex aspect-video w-full items-center justify-center rounded-md bg-muted">
                              <ImageIcon className="h-10 w-10 text-muted-foreground" />
                            </div>
                          )}

<div className="mt-4">
                            <Label htmlFor={`image-upload-${index}`} className="cursor-pointer">
                              <div className="flex items-center justify-center">
                                <Button
                                  variant="outline"
                                  className="w-full"
                                  disabled={uploadingImage === `carousel-${index}`}
                                >
                                  {uploadingImage === `carousel-${index}` ? (
                                    <>
                                      <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                                      Uploading...
                                    </>
                                  ) : (
                                    <>
                                      <Upload className="mr-2 h-4 w-4" />
                                      {banner.imageUrl ? "Change Image" : "Upload Image"}
                                    </>
                                  )}
                                </Button>
                              </div>
                              <input
                                id={`image-upload-${index}`}
                                type="file"
                                accept="image/*"
                                className="hidden"
                                onChange={(e) => handleImageUpload(e, "carousel", index)}
                                disabled={uploadingImage === `carousel-${index}`}
                              />
                            </Label>
                          </div>
                        </div>
                        <p className="text-xs text-muted-foreground">
                          Recommended size: 1200x400px. Max file size: 5MB.
                        </p>
                      </div>
                    </div>
                  </div>
                ))
              )}
            </CardContent>
            <CardFooter>
              <p className="text-sm text-muted-foreground">Changes will be applied to the home page after saving.</p>
            </CardFooter>
          </Card>
        </TabsContent>

<TabsContent value="featured" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Featured Banner</CardTitle>
              <CardDescription>Edit the featured banner that appears on the home page</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="featured-title">Title</Label>
                    <Input
                      id="featured-title"
                      value={featuredBanner.title}
                      onChange={(e) => handleFeaturedBannerChange("title", e.target.value)}
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="featured-subtitle">Subtitle</Label>
                    <Input
                      id="featured-subtitle"
                      value={featuredBanner.subtitle}
                      onChange={(e) => handleFeaturedBannerChange("subtitle", e.target.value)}
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="featured-discount">Discount Text</Label>
                    <Input
                      id="featured-discount"
                      value={featuredBanner.discount}
                      onChange={(e) => handleFeaturedBannerChange("discount", e.target.value)}
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="featured-href">Link URL</Label>
                    <Input
                      id="featured-href"
                      value={featuredBanner.href}
                      onChange={(e) => handleFeaturedBannerChange("href", e.target.value)}
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label>Banner Image</Label>
                  <div className="border rounded-lg p-4">
                    {featuredBanner.imageUrl ? (
                      <div className="relative aspect-square w-full overflow-hidden rounded-md">
                        <ProductImage
                          src={featuredBanner.imageUrl}
                          alt={featuredBanner.title}
                          className="object-cover"
                        />
                      </div>
                    ) : (
                      <div className="flex aspect-square w-full items-center justify-center rounded-md bg-muted">
                        <ImageIcon className="h-10 w-10 text-muted-foreground" />
                      </div>
                    )}

<div className="mt-4">
                      <Label htmlFor="featured-image-upload" className="cursor-pointer">
                        <div className="flex items-center justify-center">
                          <Button variant="outline" className="w-full" disabled={uploadingImage === "featured-banner"}>
                            {uploadingImage === "featured-banner" ? (
                              <>
                                <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                                Uploading...
                              </>
                            ) : (
                              <>
                                <Upload className="mr-2 h-4 w-4" />
                                {featuredBanner.imageUrl ? "Change Image" : "Upload Image"}
                              </>
                            )}
                          </Button>
                        </div>
                        <input
                          id="featured-image-upload"
                          type="file"
                          accept="image/*"
                          className="hidden"
                          onChange={(e) => handleImageUpload(e, "featured")}
                          disabled={uploadingImage === "featured-banner"}
                        />
                      </Label>
                    </div>
                  </div>
                  <p className="text-xs text-muted-foreground">Recommended size: 600x600px. Max file size: 5MB.</p>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <p className="text-sm text-muted-foreground">Changes will be applied to the home page after saving.</p>
            </CardFooter>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescript:file="lib/products.ts" isMerged="true" isEdit="true"
export interface Product {
  id: number
  name: string
  price: number
  discountedPrice: number | null
  imageUrl: string
  discount: string | null
  description?: string
  category: string
  inStock: boolean
  featured: boolean
  dateAdded: string
  partNumber?: string
  compatibility?: string[]
  brand?: string
}

const products: Product[] = [
  {
    id: 1,
    name: "Premium Brake Pads - Front Set",
    price: 2500.0,
    discountedPrice: 1999.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: "-20%",
    category: "Brake System",
    inStock: true,
    featured: true,
    dateAdded: "2023-01-15",
    description: "High-performance ceramic brake pads for superior stopping power and reduced brake dust.",
    partNumber: "BP-10234",
    compatibility: ["Honda City 2015-2020", "Honda Civic 2016-2021", "Honda Amaze 2018+"],
    brand: "BrakeMaster",
  },
  {
    id: 2,
    name: "Engine Oil Filter",
    price: 450.0,
    discountedPrice: 399.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: "-11%",
    category: "Engine Parts",
    inStock: true,
    featured: false,
    dateAdded: "2023-02-20",
    description: "Premium quality oil filter that removes harmful contaminants from engine oil.",
    partNumber: "OF-5678",
    compatibility: ["Maruti Suzuki Swift", "Maruti Suzuki Dzire", "Maruti Suzuki Baleno"],
    brand: "FilterPro",
  },
  {
    id: 3,
    name: "Alternator Assembly",
    price: 5600.0,
    discountedPrice: 4999.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: null,
    category: "Electrical System",
    inStock: true,
    featured: false,
    dateAdded: "2023-03-10",
    description: "High-output alternator for reliable battery charging and electrical system performance.",
    partNumber: "ALT-9012",
    compatibility: ["Hyundai i20", "Hyundai Venue", "Kia Sonet"],
    brand: "ElectroParts",
  },
  {
    id: 4,
    name: "Complete Clutch Kit",
    price: 7340.0,
    discountedPrice: 6559.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: "-10%",
    category: "Transmission",
    inStock: true,
    featured: true,
    dateAdded: "2023-04-05",
    description: "Complete clutch kit including pressure plate, clutch disc, and release bearing.",
    partNumber: "CK-3456",
    compatibility: ["Mahindra Scorpio", "Mahindra XUV500", "Mahindra Thar"],
    brand: "ClutchTech",
  },
  {
    id: 5,
    name: "Spark Plugs - Set of 4",
    price: 1194.0,
    discountedPrice: 999.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: "-16%",
    category: "Ignition System",
    inStock: true,
    featured: false,
    dateAdded: "2023-05-12",
    description: "High-performance iridium spark plugs for better fuel efficiency and engine performance.",
    partNumber: "SP-7890",
    compatibility: ["Toyota Innova", "Toyota Fortuner", "Toyota Glanza"],
    brand: "SparkTech",
  },
  {
    id: 6,
    name: "Air Filter",
    price: 650.0,
    discountedPrice: 599.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: "-8%",
    category: "Engine Parts",
    inStock: true,
    featured: true,
    dateAdded: "2023-06-18",
    description: "High-flow air filter for improved engine breathing and performance.",
    partNumber: "AF-1234",
    compatibility: ["Tata Nexon", "Tata Harrier", "Tata Safari"],
    brand: "AirFlow",
  },
  {
    id: 7,
    name: "Shock Absorbers - Pair",
    price: 4000.0,
    discountedPrice: 3350.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: "-16%",
    category: "Suspension",
    inStock: true,
    featured: false,
    dateAdded: "2023-07-22",
    description: "Gas-charged shock absorbers for improved ride comfort and handling.",
    partNumber: "SA-5678",
    compatibility: ["Maruti Suzuki Vitara Brezza", "Maruti Suzuki S-Cross", "Maruti Suzuki Ertiga"],
    brand: "RideSoft",
  },
  {
    id: 8,
    name: "Timing Belt Kit",
    price: 3500.0,
    discountedPrice: 2999.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: "-14%",
    category: "Engine Parts",
    inStock: true,
    featured: true,
    dateAdded: "2023-08-30",
    description: "Complete timing belt kit with tensioners and idler pulleys for reliable engine timing.",
    partNumber: "TB-9012",
    compatibility: ["Honda City", "Honda Civic", "Honda Jazz"],
    brand: "TimeMaster",
  },
  {
    id: 9,
    name: "Radiator Assembly",
    price: 6500.0,
    discountedPrice: 5999.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: null,
    category: "Cooling System",
    inStock: true,
    featured: false,
    dateAdded: "2023-09-14",
    description: "High-efficiency radiator for optimal engine cooling performance.",
    partNumber: "RA-3456",
    compatibility: ["Hyundai Creta", "Hyundai Verna", "Kia Seltos"],
    brand: "CoolTech",
  },
  {
    id: 10,
    name: "Fuel Pump Assembly",
    price: 3500.0,
    discountedPrice: 2999.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: "-14%",
    category: "Fuel System",
    inStock: true,
    featured: true,
    dateAdded: "2023-10-05",
    description: "Electric fuel pump assembly for reliable fuel delivery to the engine.",
    partNumber: "FP-7890",
    compatibility: ["Maruti Suzuki Swift", "Maruti Suzuki Dzire", "Maruti Suzuki Baleno"],
    brand: "FuelTech",
  },
  {
    id: 11,
    name: "Oxygen Sensor",
    price: 1800.0,
    discountedPrice: null,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: null,
    category: "Exhaust System",
    inStock: true,
    featured: false,
    dateAdded: "2023-11-10",
    description: "Precision oxygen sensor for optimal fuel mixture and emissions control.",
    partNumber: "OS-1234",
    compatibility: ["Toyota Innova", "Toyota Fortuner", "Toyota Corolla"],
    brand: "SensorPro",
  },
  {
    id: 12,
    name: "Power Steering Pump",
    price: 4800.0,
    discountedPrice: null,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: null,
    category: "Steering System",
    inStock: true,
    featured: false,
    dateAdded: "2023-12-15",
    description: "Remanufactured power steering pump for smooth and responsive steering.",
    partNumber: "PSP-5678",
    compatibility: ["Mahindra Scorpio", "Mahindra XUV500", "Mahindra Thar"],
    brand: "SteerTech",
  },
  {
    id: 13,
    name: "CV Joint Kit",
    price: 2200.0,
    discountedPrice: null,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: null,
    category: "Drivetrain",
    inStock: true,
    featured: false,
    dateAdded: "2024-01-20",
    description: "Complete CV joint kit with boot, clamps, and grease for smooth power transfer.",
    partNumber: "CVJ-9012",
    compatibility: ["Honda City", "Honda Civic", "Honda Amaze"],
    brand: "DriveMax",
  },
  {
    id: 14,
    name: "Headlight Assembly - Driver Side",
    price: 5500.0,
    discountedPrice: 4999.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: "New",
    category: "Lighting",
    inStock: true,
    featured: true,
    dateAdded: "2024-02-25",
    description: "OEM-quality headlight assembly with clear lens and bright illumination.",
    partNumber: "HL-3456",
    compatibility: ["Hyundai i20", "Hyundai Venue", "Hyundai Grand i10"],
    brand: "LightPro",
  },
  {
    id: 15,
    name: "Brake Disc Rotors - Front Pair",
    price: 3200.0,
    discountedPrice: 2499.0,
    imageUrl: "/placeholder.svg?height=200&width=200",
    discount: "-22%",
    category: "Brake System",
    inStock: true,
    featured: false,
    dateAdded: "2024-03-01",
    description: "High-performance cross-drilled and slotted brake rotors for improved braking performance.",
    partNumber: "BR-7890",
    compatibility: ["Maruti Suzuki Swift", "Maruti Suzuki Dzire", "Maruti Suzuki Baleno"],
    brand: "BrakeMaster",
  },
]

export function getProducts(category?: string, limit?: number): Product[] {
  let filteredProducts = products

if (category) {
    filteredProducts = filteredProducts.filter((product) => product.category === category)
  }

if (limit) {
    filteredProducts = filteredProducts.slice(0, limit)
  }

return filteredProducts
}

export function getProductById(id: number): Product | undefined {
  return products.find((product) => product.id === id)
}

export function getFeaturedProducts(limit?: number): Product[] {
  const featuredProducts = products.filter((product) => product.featured)

if (limit) {
    return featuredProducts.slice(0, limit)
  }

return featuredProducts
}

export function getNewArrivals(limit?: number): Product[] {
  const sortedProducts = [...products].sort((a, b) => new Date(b.dateAdded).getTime() - new Date(a.dateAdded).getTime())

if (limit) {
    return sortedProducts.slice(0, limit)
  }

return sortedProducts
}
[V0_FILE]typescript:file="lib/categories.ts" isMerged="true" isEdit="true"
export interface Category {
  id: number
  name: string
  slug: string
  description: string
  imageUrl: string
  featured: boolean
}

const categories: Category[] = [
  {
    id: 1,
    name: "Brake System",
    slug: "brake-system",
    description: "Brake pads, rotors, calipers, and brake lines for all vehicle makes and models",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: true,
  },
  {
    id: 2,
    name: "Engine Parts",
    slug: "engine-parts",
    description: "Pistons, gaskets, valves, and other essential engine components",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: true,
  },
  {
    id: 3,
    name: "Electrical System",
    slug: "electrical-system",
    description: "Alternators, starters, batteries, and electrical components",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: true,
  },
  {
    id: 4,
    name: "Transmission",
    slug: "transmission",
    description: "Clutch kits, transmission parts, and fluids",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: false,
  },
  {
    id: 5,
    name: "Suspension",
    slug: "suspension",
    description: "Shock absorbers, struts, springs, and control arms",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: true,
  },
  {
    id: 6,
    name: "Cooling System",
    slug: "cooling-system",
    description: "Radiators, water pumps, thermostats, and cooling fans",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: false,
  },
  {
    id: 7,
    name: "Fuel System",
    slug: "fuel-system",
    description: "Fuel pumps, injectors, filters, and fuel lines",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: false,
  },
  {
    id: 8,
    name: "Exhaust System",
    slug: "exhaust-system",
    description: "Mufflers, catalytic converters, exhaust pipes, and manifolds",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: false,
  },
  {
    id: 9,
    name: "Ignition System",
    slug: "ignition-system",
    description: "Spark plugs, ignition coils, distributors, and ignition wires",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: true,
  },
  {
    id: 10,
    name: "Steering System",
    slug: "steering-system",
    description: "Power steering pumps, racks, and steering components",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: false,
  },
  {
    id: 11,
    name: "Drivetrain",
    slug: "drivetrain",
    description: "CV joints, axles, differentials, and transfer cases",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: false,
  },
  {
    id: 12,
    name: "Lighting",
    slug: "lighting",
    description: "Headlights, tail lights, fog lights, and bulbs",
    imageUrl: "/placeholder.svg?height=300&width=300",
    featured: true,
  },
]

export function getCategories(): Category[] {
  return categories
}

export function getCategoryBySlug(slug: string): Category | undefined {
  return categories.find((category) => category.slug === slug)
}

export function getFeaturedCategories(limit?: number): Category[] {
  const featuredCategories = categories.filter((category) => category.featured)

if (limit) {
    return featuredCategories.slice(0, limit)
  }

return featuredCategories
}
[V0_FILE]typescriptreact:file="app/admin/products/new/page.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Save, X, ArrowLeft, Loader2, CheckCircle } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { useToast } from "@/hooks/use-toast"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { createProduct } from "@/lib/products-db"
import ProductImageUpload from "@/components/product-image-upload"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { getCategories } from "@/lib/categories"

export default function NewProductPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)
  const [activeTab, setActiveTab] = useState("basic")
  const [categories, setCategories] = useState<any[]>([])
  const [compatibilityList, setCompatibilityList] = useState<string[]>([])
  const [newCompatibility, setNewCompatibility] = useState("")
  const [productData, setProductData] = useState({
    name: "",
    description: "",
    price: "",
    discountedPrice: "",
    category: "",
    stock_quantity: "100",
    inStock: true,
    featured: false,
    image_url: "",
    image_type: "file" as "file" | "url",
    image_needs_proxy: false,
    discount: "" as string | null,
    partNumber: "",
    brand: "",
  })

// Load categories
  useEffect(() => {
    const allCategories = getCategories()
    setCategories(allCategories)
  }, [])

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

const handleSelectChange = (name: string, value: string) => {
    setProductData((prev) => ({ ...prev, [name]: value }))
  }

const handleSwitchChange = (name: string, checked: boolean) => {
    setProductData((prev) => ({ ...prev, [name]: checked }))
  }

const addCompatibility = () => {
    if (newCompatibility.trim()) {
      setCompatibilityList([...compatibilityList, newCompatibility.trim()])
      setNewCompatibility("")
    }
  }

const removeCompatibility = (index: number) => {
    setCompatibilityList(compatibilityList.filter((_, i) => i !== index))
  }