1
"use client"
2

3
import type React from "react"
4

5
import { useState, useEffect } from "react"
6
import Image from "next/image"
7
import { Plus, Minus, Copy, X, Trash2 } from "lucide-react"
8

9
interface Product {
10
  id: string
11
  name: string
12
  price: number
13
  image: string
14
  description: string
15
  sizes?: string[]
16
}
17

18
interface CartItem {
19
  productId: string
20
  size: string
21
  quantity: number
22
}
23

24
const products: Product[] = [
25
  {
26
    id: "tshirt",
27
    name: "AURA RACING T-SHIRT",
28
    price: 1.5,
29
    image: "/images/aura-racing-merch-display.jpeg",
30
    description: "Premium quality t-shirt with AURA RACING branding.",
31
    sizes: ["S", "M", "L", "XL"],
32
  },
33
  {
34
    id: "hoodie",
35
    name: "AURA RACING HOODIE",
36
    price: 2.0,
37
    image: "/images/aura-racing-hoodie.jpeg",
38
    description: "Comfortable hoodie perfect for racing events.",
39
    sizes: ["S", "M", "L", "XL"],
40
  },
41
]
42

43
export default function SolanaShop() {
44
  const [cart, setCart] = useState<CartItem[]>([])
45
  const [showCart, setShowCart] = useState(false)
46
  const [showCheckout, setShowCheckout] = useState(false)
47

48
  useEffect(() => {
49
    // Load cart from localStorage on component mount
50
    try {
51
      const savedCart = localStorage.getItem("aura-cart")
52
      if (savedCart) {
53
        setCart(JSON.parse(savedCart))
54
      }
55
    } catch (error) {
56
      console.error("Error loading cart:", error)
57
    }
58

59
    // Listen for show cart events from navigation
60
    const handleShowCart = () => {
61
      setShowCart(true)
62
    }
63

64
    window.addEventListener("showCart", handleShowCart)
65

66
    return () => {
67
      window.removeEventListener("showCart", handleShowCart)
68
    }
69
  }, [])
70

71
  // Save cart to localStorage whenever cart changes
72
  useEffect(() => {
73
    try {
74
      localStorage.setItem("aura-cart", JSON.stringify(cart))
75
      // Dispatch custom event to update cart button
76
      window.dispatchEvent(new CustomEvent("cartUpdated"))
77
    } catch (error) {
78
      console.error("Error saving cart:", error)
79
    }
80
  }, [cart])
81

82
  const addToCart = (productId: string, size: string) => {
83
    const existingItem = cart.find((item) => item.productId === productId && item.size === size)
84
    if (existingItem) {
85
      setCart(
86
        cart.map((item) =>
87
          item.productId === productId && item.size === size ? { ...item, quantity: item.quantity + 1 } : item,
88
        ),
89
      )
90
    } else {
91
      setCart([...cart, { productId, size, quantity: 1 }])
92
    }
93
  }
94

95
  const updateQuantity = (productId: string, size: string, quantity: number) => {
96
    if (quantity <= 0) {
97
      setCart(cart.filter((item) => !(item.productId === productId && item.size === size)))
98
    } else {
99
      setCart(cart.map((item) => (item.productId === productId && item.size === size ? { ...item, quantity } : item)))
100
    }
101
  }
102

103
  const removeFromCart = (productId: string, size: string) => {
104
    setCart(cart.filter((item) => !(item.productId === productId && item.size === size)))
105
  }
106

107
  const getCartTotal = () => {
108
    return cart.reduce((total, item) => {
109
      const product = products.find((p) => p.id === item.productId)
110
      return total + (product?.price || 0) * item.quantity
111
    }, 0)
112
  }
113

114
  return (
115
    <div className="w-full relative">
116
      {/* Products Grid */}
117
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
118
        {products.map((product) => (
119
          <ProductCard key={product.id} product={product} onAddToCart={addToCart} />
120
        ))}
121
      </div>
122

123
      {/* Cart Modal */}
124
      {showCart && (
125
        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
126
          <div className="bg-black border border-gray-700 rounded-lg p-6 w-full max-w-md max-h-[80vh] overflow-y-auto">
127
            <div className="flex items-center justify-between mb-4">
128
              <h2 className="text-lg font-bold text-white">Your Cart</h2>
129
              <button onClick={() => setShowCart(false)} className="text-gray-400 hover:text-white">
130
                <X size={20} />
131
              </button>
132
            </div>
133

134
            {cart.length === 0 ? (
135
              <div className="text-center py-6">
136
                <p className="text-gray-400 mb-4">Your cart is empty</p>
137
                <button onClick={() => setShowCart(false)} className="btn-secondary">
138
                  Continue Shopping
139
                </button>
140
              </div>
141
            ) : (
142
              <>
143
                <div className="space-y-4 mb-6">
144
                  {cart.map((item, index) => {
145
                    const product = products.find((p) => p.id === item.productId)
146
                    if (!product) return null
147

148
                    return (
149
                      <div key={index} className="flex items-center space-x-4 p-3 bg-gray-800 rounded">
150
                        <div className="w-12 h-12 relative">
151
                          <Image
152
                            src={product.image || "/placeholder.svg"}
153
                            alt={product.name}
154
                            fill
155
                            className="object-cover rounded"
156
                            sizes="48px"
157
                          />
158
                        </div>
159
                        <div className="flex-1">
160
                          <h4 className="font-semibold text-white text-sm">{product.name}</h4>
161
                          <p className="text-xs text-gray-400">Size: {item.size}</p>
162
                          <div className="flex items-center mt-1">
163
                            <button
164
                              onClick={() => updateQuantity(item.productId, item.size, item.quantity - 1)}
165
                              className="bg-gray-700 hover:bg-gray-600 text-white rounded-l p-1"
166
                            >
167
                              <Minus size={14} />
168
                            </button>
169
                            <span className="bg-gray-700 text-white px-3 py-1 text-xs">{item.quantity}</span>
170
                            <button
171
                              onClick={() => updateQuantity(item.productId, item.size, item.quantity + 1)}
172
                              className="bg-gray-700 hover:bg-gray-600 text-white rounded-r p-1"
173
                            >
174
                              <Plus size={14} />
175
                            </button>
176
                            <span className="ml-2 text-sm text-white">
177
                              {(product.price * item.quantity).toFixed(2)} SOL
178
                            </span>
179
                          </div>
180
                        </div>
181
                        <button
182
                          onClick={() => removeFromCart(item.productId, item.size)}
183
                          className="text-red-400 hover:text-red-300"
184
                        >
185
                          <Trash2 size={16} />
186
                        </button>
187
                      </div>
188
                    )
189
                  })}
190
                </div>
191

192
                <div className="border-t border-gray-700 pt-4 mb-6">
193
                  <div className="flex items-center justify-between text-lg font-bold text-white">
194
                    <span>Total:</span>
195
                    <span>{getCartTotal().toFixed(2)} SOL</span>
196
                  </div>
197
                </div>
198

199
                <button
200
                  onClick={() => {
201
                    setShowCart(false)
202
                    setShowCheckout(true)
203
                  }}
204
                  className="btn-primary w-full"
205
                >
206
                  CHECKOUT
207
                </button>
208
              </>
209
            )}
210
          </div>
211
        </div>
212
      )}
213

214
      {/* Checkout Modal */}
215
      {showCheckout && (
216
        <CheckoutModal
217
          cart={cart}
218
          products={products}
219
          total={getCartTotal()}
220
          onClose={() => setShowCheckout(false)}
221
          onComplete={() => {
222
            setCart([])
223
            setShowCart(false)
224
            setShowCheckout(false)
225
          }}
226
        />
227
      )}
228
    </div>
229
  )
230
}
231

232
function ProductCard({ product, onAddToCart }: { product: Product; onAddToCart: (id: string, size: string) => void }) {
233
  const [selectedSize, setSelectedSize] = useState(product.sizes?.[0] || "")
234

235
  return (
236
    <div className="bg-black/40 border border-gray-700 rounded-lg p-6 backdrop-blur-sm">
237
      <div className="w-full h-64 relative mb-4 rounded-lg overflow-hidden">
238
        <Image
239
          src={product.image || "/placeholder.svg"}
240
          alt={product.name}
241
          fill
242
          className="object-cover"
243
          sizes="(max-width: 768px) 100vw, 50vw"
244
        />
245
      </div>
246

247
      <h3 className="text-lg font-bold text-white mb-2">{product.name}</h3>
248
      <p className="text-sm text-gray-300 mb-4">{product.description}</p>
249

250
      {product.sizes && product.sizes.length > 0 && (
251
        <div className="mb-4 text-center">
252
          <h4 className="text-sm font-semibold text-white mb-2">SIZE</h4>
253
          <div className="flex justify-center space-x-2">
254
            {product.sizes.map((size) => (
255
              <button
256
                key={size}
257
                onClick={() => setSelectedSize(size)}
258
                className={`px-3 py-1 text-sm rounded border ${
259
                  selectedSize === size
260
                    ? "border-purple-500 bg-purple-500/20 text-purple-400"
261
                    : "border-gray-600 text-gray-300"
262
                }`}
263
              >
264
                {size}
265
              </button>
266
            ))}
267
          </div>
268
        </div>
269
      )}
270

271
      <div className="flex items-center justify-center text-2xl mb-4">
272
        <span className="mr-2 text-white font-bold">{product.price}</span>
273
        <Image src="/images/solana-logo-clean.png" alt="Solana" width={24} height={24} />
274
      </div>
275

276
      <button
277
        onClick={() => onAddToCart(product.id, selectedSize)}
278
        className="btn-primary w-full flex items-center justify-center"
279
        disabled={!selectedSize && !!product.sizes?.length}
280
      >
281
        <Plus size={16} className="mr-2" />
282
        ADD TO CART
283
      </button>
284
    </div>
285
  )
286
}
287

288
function CheckoutModal({
289
  cart,
290
  products,
291
  total,
292
  onClose,
293
  onComplete,
294
}: {
295
  cart: CartItem[]
296
  products: Product[]
297
  total: number
298
  onClose: () => void
299
  onComplete: () => void
300
}) {
301
  const [step, setStep] = useState<"info" | "payment" | "confirmation">("info")
302
  const [copied, setCopied] = useState(false)
303
  const [emailStatus, setEmailStatus] = useState<"idle" | "sending" | "success" | "error">("idle")
304
  const [customerInfo, setCustomerInfo] = useState({
305
    name: "",
306
    email: "",
307
    address: "",
308
    city: "",
309
    zipCode: "",
310
    country: "",
311
    phone: "",
312
  })
313

314
  const walletAddress = "gVgoRfDUECsHCQyFxPusyEHENcQmeXNqchYHyDQ9bqw"
315

316
  const copyAddress = () => {
317
    navigator.clipboard.writeText(walletAddress)
318
    setCopied(true)
319
    setTimeout(() => setCopied(false), 2000)
320
  }
321

322
  const handleInfoSubmit = (e: React.FormEvent) => {
323
    e.preventDefault()
324
    setStep("payment")
325
  }
326

327
  const handleOrderSubmit = () => {
328
    // Generate unique order ID
329
    const orderId = `ARP-${Date.now().toString().slice(-8)}`
330

331
    // Create order object
332
    const order = {
333
      id: orderId,
334
      timestamp: new Date().toISOString(),
335
      customerInfo,
336
      items: cart.map((item) => {
337
        const product = products.find((p) => p.id === item.productId)
338
        return {
339
          productId: item.productId,
340
          productName: product?.name || "Unknown Product",
341
          size: item.size,
342
          quantity: item.quantity,
343
          price: product?.price || 0,
344
        }
345
      }),
346
      total,
347
      paymentAddress: walletAddress,
348
      status: "pending" as const,
349
    }
350

351
    // Save order to localStorage
352
    try {
353
      const existingOrders = JSON.parse(localStorage.getItem("aura-orders") || "[]")
354
      const updatedOrders = [order, ...existingOrders]
355
      localStorage.setItem("aura-orders", JSON.stringify(updatedOrders))
356
      localStorage.setItem("aura-latest-order", JSON.stringify(order))
357
      console.log("Order saved:", order)
358

359
      // Send notification via Resend API
360
      sendOrderNotification(order)
361
    } catch (error) {
362
      console.error("Error saving order:", error)
363
    }
364

365
    setStep("confirmation")
366
  }
367

368
  // Send order notification via Resend API
369
  const sendOrderNotification = async (order: any) => {
370
    setEmailStatus("sending")
371
    console.log("🔄 Sending order notification via Resend API...")
372

373
    try {
374
      const response = await fetch("/api/send-order-notification", {
375
        method: "POST",
376
        headers: {
377
          "Content-Type": "application/json",
378
        },
379
        body: JSON.stringify({ order }),
380
      })
381

382
      if (response.ok) {
383
        console.log("✅ Resend notification sent successfully!")
384
        setEmailStatus("success")
385
      } else {
386
        console.error("❌ Resend API failed:", await response.text())
387
        setEmailStatus("error")
388
      }
389
    } catch (error) {
390
      console.error("❌ Network error:", error)
391
      setEmailStatus("error")
392
    }
393
  }
394

395
  if (step === "confirmation") {
396
    return (
397
      <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
398
        <div className="bg-black border border-gray-700 rounded-lg p-6 w-full max-w-md text-center">
399
          <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
400
            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
401
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
402
            </svg>
403
          </div>
404
          <h2 className="text-xl font-bold text-green-500 mb-4">Order Submitted!</h2>
405

406
          {/* Email Status */}
407
          <div className="mb-4">
408
            {emailStatus === "sending" && (
409
              <div className="bg-blue-500/10 border border-blue-500/30 rounded-lg p-3">
410
                <p className="text-blue-400 text-sm">📧 Sending notification via Resend...</p>
411
              </div>
412
            )}
413
            {emailStatus === "success" && (
414
              <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-3">
415
                <p className="text-green-400 text-sm">✅ Professional email notification sent!</p>
416
              </div>
417
            )}
418
            {/* Removed the "Email service unavailable" warning as per user request */}
419
          </div>
420

421
          <div className="bg-gray-800 p-4 rounded-lg mb-4">
422
            <p className="text-gray-300 mb-2">
423
              Thank you for your order! We've received your order details and will process it once payment is confirmed.
424
            </p>
425
            <div className="text-sm text-gray-400">
426
              <p>
427
                <strong>Order ID:</strong> {JSON.parse(localStorage.getItem("aura-latest-order") || "{}")?.id || "N/A"}
428
              </p>
429
              <p>
430
                <strong>Email:</strong> {customerInfo.email}
431
              </p>
432
            </div>
433
          </div>
434

435
          <div className="bg-blue-500/10 border border-blue-500/30 rounded-lg p-3 mb-4">
436
            <p className="text-blue-400 text-sm">
437
              You'll receive a confirmation email once we verify your payment. Shipping typically takes 5-10 business
438
              days.
439
            </p>
440
          </div>
441

442
          <button onClick={onComplete} className="btn-primary w-full">
443
            CONTINUE SHOPPING
444
          </button>
445
        </div>
446
      </div>
447
    )
448
  }
449

450
  return (
451
    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
452
      <div className="bg-black border border-gray-700 rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
453
        <div className="flex items-center justify-between mb-6">
454
          <h2 className="text-xl font-bold text-white">
455
            {step === "info" && "Shipping Information"}
456
            {step === "payment" && "Payment"}
457
          </h2>
458
          <button onClick={onClose} className="text-gray-400 hover:text-white text-2xl">
459
            <X size={24} />
460
          </button>
461
        </div>
462

463
        {step === "info" && (
464
          <form onSubmit={handleInfoSubmit} className="space-y-6">
465
            {/* Order Summary */}
466
            <div className="bg-gray-800 p-4 rounded-lg">
467
              <h3 className="text-lg font-bold mb-4 text-white">Order Summary</h3>
468
              {cart.map((item, index) => {
469
                const product = products.find((p) => p.id === item.productId)
470
                if (!product) return null
471

472
                return (
473
                  <div
474
                    key={index}
475
                    className="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0"
476
                  >
477
                    <div>
478
                      <p className="font-medium text-white">{product.name}</p>
479
                      <p className="text-sm text-gray-400">
480
                        Size: {item.size} | Qty: {item.quantity}
481
                      </p>
482
                    </div>
483
                    <div className="flex items-center">
484
                      <span className="mr-2 text-white">{(product.price * item.quantity).toFixed(2)}</span>
485
                      <Image src="/images/solana-logo-clean.png" alt="SOL" width={16} height={16} />
486
                    </div>
487
                  </div>
488
                )
489
              })}
490
              <div className="flex justify-between items-center pt-4 text-lg font-bold text-white">
491
                <span>Total:</span>
492
                <div className="flex items-center">
493
                  <span className="mr-2">{total.toFixed(2)}</span>
494
                  <Image src="/images/solana-logo-clean.png" alt="SOL" width={20} height={20} />
495
                </div>
496
              </div>
497
            </div>
498

499
            {/* Customer Information Form */}
500
            <div className="bg-gray-800 p-4 rounded-lg">
501
              <h3 className="text-lg font-bold mb-4 text-white">Shipping Information</h3>
502
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
503
                <div className="md:col-span-2">
504
                  <label className="block text-sm font-medium text-gray-300 mb-2">Full Name *</label>
505
                  <input
506
                    type="text"
507
                    value={customerInfo.name}
508
                    onChange={(e) => setCustomerInfo({ ...customerInfo, name: e.target.value })}
509
                    className="w-full p-3 bg-gray-700 border border-gray-600 rounded text-white focus:outline-none focus:border-purple-500"
510
                    required
511
                    placeholder="John Doe"
512
                  />
513
                </div>
514

515
                <div className="md:col-span-2">
516
                  <label className="block text-sm font-medium text-gray-300 mb-2">Email Address *</label>
517
                  <input
518
                    type="email"
519
                    value={customerInfo.email}
520
                    onChange={(e) => setCustomerInfo({ ...customerInfo, email: e.target.value })}
521
                    className="w-full p-3 bg-gray-700 border border-gray-600 rounded text-white focus:outline-none focus:border-purple-500"
522
                    required
523
                    placeholder="john@example.com"
524
                  />
525
                </div>
526

527
                <div className="md:col-span-2">
528
                  <label className="block text-sm font-medium text-gray-300 mb-2">Street Address *</label>
529
                  <input
530
                    type="text"
531
                    value={customerInfo.address}
532
                    onChange={(e) => setCustomerInfo({ ...customerInfo, address: e.target.value })}
533
                    className="w-full p-3 bg-gray-700 border border-gray-600 rounded text-white focus:outline-none focus:border-purple-500"
534
                    required
535
                    placeholder="123 Main Street, Apt 4B"
536
                  />
537
                </div>
538

539
                <div>
540
                  <label className="block text-sm font-medium text-gray-300 mb-2">City *</label>
541
                  <input
542
                    type="text"
543
                    value={customerInfo.city}
544
                    onChange={(e) => setCustomerInfo({ ...customerInfo, city: e.target.value })}
545
                    className="w-full p-3 bg-gray-700 border border-gray-600 rounded text-white focus:outline-none focus:border-purple-500"
546
                    required
547
                    placeholder="New York"
548
                  />
549
                </div>
550

551
                <div>
552
                  <label className="block text-sm font-medium text-gray-300 mb-2">ZIP/Postal Code *</label>
553
                  <input
554
                    type="text"
555
                    value={customerInfo.zipCode}
556
                    onChange={(e) => setCustomerInfo({ ...customerInfo, zipCode: e.target.value })}
557
                    className="w-full p-3 bg-gray-700 border border-gray-600 rounded text-white focus:outline-none focus:border-purple-500"
558
                    required
559
                    placeholder="10001"
560
                  />
561
                </div>
562

563
                <div>
564
                  <label className="block text-sm font-medium text-gray-300 mb-2">Country *</label>
565
                  <input
566
                    type="text"
567
                    value={customerInfo.country}
568
                    onChange={(e) => setCustomerInfo({ ...customerInfo, country: e.target.value })}
569
                    className="w-full p-3 bg-gray-700 border border-gray-600 rounded text-white focus:outline-none focus:border-purple-500"
570
                    required
571
                    placeholder="United States"
572
                  />
573
                </div>
574

575
                <div>
576
                  <label className="block text-sm font-medium text-gray-300 mb-2">Phone Number (Optional)</label>
577
                  <input
578
                    type="tel"
579
                    value={customerInfo.phone}
580
                    onChange={(e) => setCustomerInfo({ ...customerInfo, phone: e.target.value })}
581
                    className="w-full p-3 bg-gray-700 border border-gray-600 rounded text-white focus:outline-none focus:border-purple-500"
582
                    placeholder="+1 (555) 123-4567"
583
                  />
584
                </div>
585
              </div>
586
            </div>
587

588
            <button type="submit" className="btn-primary w-full">
589
              PROCEED TO PAYMENT
590
            </button>
591
          </form>
592
        )}
593

594
        {step === "payment" && (
595
          <div className="space-y-6">
596
            {/* Customer Info Review */}
597
            <div className="bg-gray-800 p-4 rounded-lg">
598
              <h3 className="text-lg font-bold mb-3 text-white">Shipping To:</h3>
599
              <div className="text-sm text-gray-300">
600
                <p className="font-medium text-white">{customerInfo.name}</p>
601
                <p>{customerInfo.address}</p>
602
                <p>
603
                  {customerInfo.city}, {customerInfo.zipCode}
604
                </p>
605
                <p>{customerInfo.country}</p>
606
                <p className="mt-2 text-gray-400">{customerInfo.email}</p>
607
                {customerInfo.phone && <p className="text-gray-400">{customerInfo.phone}</p>}
608
              </div>
609
            </div>
610

611
            {/* Payment Instructions */}
612
            <div className="bg-gray-800 p-4 rounded-lg">
613
              <h3 className="text-lg font-bold mb-4 text-white">Payment Instructions</h3>
614
              <div className="space-y-4">
615
                <div className="flex items-center space-x-2 text-yellow-400">
616
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
617
                    <path
618
                      strokeLinecap="round"
619
                      strokeLinejoin="round"
620
                      strokeWidth={2}
621
                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
622
                    />
623
                  </svg>
624
                  <span className="text-sm">Send exactly {total.toFixed(6)} SOL to the address below</span>
625
                </div>
626

627
                <div className="bg-gray-700 p-3 rounded">
628
                  <p className="text-xs break-all font-mono text-white">{walletAddress}</p>
629
                </div>
630

631
                <button onClick={copyAddress} className="btn-secondary w-full flex items-center justify-center">
632
                  <Copy size={16} className="mr-2" />
633
                  {copied ? "Copied!" : "Copy Address"}
634
                </button>
635

636
                <div className="bg-blue-500/10 border border-blue-500/30 rounded-lg p-4">
637
                  <p className="text-blue-400 text-sm">
638
                    <strong>Important:</strong> After sending payment, click "I've Sent Payment" below. We'll verify the
639
                    transaction and process your order within 24 hours.
640
                  </p>
641
                </div>
642
              </div>
643
            </div>
644

645
            <div className="flex space-x-4">
646
              <button onClick={() => setStep("info")} className="btn-secondary flex-1">
647
                BACK
648
              </button>
649
              <button onClick={handleOrderSubmit} className="btn-primary flex-1">
650
                I'VE SENT PAYMENT
651
              </button>
652
            </div>
653
          </div>
654
        )}
655
      </div>
656
    </div>
657
  )
658
}