"use client"

import { useSearchParams } from "next/navigation"
import Link from "next/link"
import { CheckCircle2, Package, Phone, MessageCircle, ArrowRight, Home } from "lucide-react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { CartProvider } from "@/lib/cart-context"
import { AdminProvider, useAdmin } from "@/lib/admin-context"

function ThankYouContent() {
  const searchParams = useSearchParams()
  const orderId = searchParams.get("orderId")
  const paymentMethod = searchParams.get("payment") as "cod" | "easypaisa" | "jazzcash" | "bank" | null
  const { paymentSettings } = useAdmin()

  const paymentLabels = {
    cod: "Cash on Delivery",
    easypaisa: "EasyPaisa",
    jazzcash: "JazzCash",
    bank: "Bank Transfer",
  }

  return (
    <div className="container mx-auto px-4 py-12">
      <div className="max-w-2xl mx-auto">
        {/* Success Icon */}
        <div className="text-center mb-8">
          <div className="w-20 h-20 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-4">
            <CheckCircle2 className="w-12 h-12 text-success" />
          </div>
          <h1 className="text-3xl font-bold text-foreground mb-2">Thank You for Your Order!</h1>
          <p className="text-muted-foreground">Your order has been placed successfully.</p>
        </div>

        {/* Order Info Card */}
        <div className="bg-card rounded-xl border border-border p-6 mb-6">
          <div className="flex items-center justify-between mb-4 pb-4 border-b border-border">
            <div>
              <p className="text-sm text-muted-foreground">Order Number</p>
              <p className="text-xl font-bold text-primary">{orderId}</p>
            </div>
            <div className="text-right">
              <p className="text-sm text-muted-foreground">Payment Method</p>
              <p className="font-semibold text-foreground">{paymentMethod ? paymentLabels[paymentMethod] : "N/A"}</p>
            </div>
          </div>

          {/* Payment Instructions for Online Payments */}
          {paymentMethod && paymentMethod !== "cod" && (
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-4">
              <h3 className="font-semibold text-amber-800 mb-2 flex items-center gap-2">
                <Package className="w-5 h-5" />
                Complete Your Payment
              </h3>
              <div className="text-sm text-amber-700 space-y-2">
                {paymentMethod === "easypaisa" && (
                  <>
                    <p>Please send the payment to:</p>
                    <p className="font-bold text-lg text-amber-900">{paymentSettings.easypaisaNumber}</p>
                    <p>Via EasyPaisa App or *786#</p>
                  </>
                )}
                {paymentMethod === "jazzcash" && (
                  <>
                    <p>Please send the payment to:</p>
                    <p className="font-bold text-lg text-amber-900">{paymentSettings.jazzcashNumber}</p>
                    <p>Via JazzCash App or *786#</p>
                  </>
                )}
                {paymentMethod === "bank" && (
                  <>
                    <p>
                      <strong>Bank:</strong> {paymentSettings.bankName}
                    </p>
                    <p>
                      <strong>Account Title:</strong> {paymentSettings.accountTitle}
                    </p>
                    <p>
                      <strong>IBAN/Account:</strong>
                    </p>
                    <p className="font-mono font-bold text-amber-900">{paymentSettings.accountNumber}</p>
                  </>
                )}
                <p className="mt-3 pt-3 border-t border-amber-300">
                  After payment, please confirm via WhatsApp with your order number and transaction screenshot.
                </p>
              </div>
            </div>
          )}

          {/* COD Info */}
          {paymentMethod === "cod" && (
            <div className="bg-green-50 border border-green-200 rounded-xl p-4 mb-4">
              <h3 className="font-semibold text-green-800 mb-2">Cash on Delivery</h3>
              <p className="text-sm text-green-700">
                Please keep the exact amount ready when your order arrives. Our delivery partner will collect the
                payment.
              </p>
            </div>
          )}

          {/* Contact Section */}
          <div className="bg-muted rounded-xl p-4">
            <h3 className="font-semibold text-foreground mb-3">Need Help or Want to Confirm?</h3>
            <div className="flex flex-col sm:flex-row gap-3">
              <a
                href={`https://wa.me/${paymentSettings.whatsappNumber.replace(/-/g, "")}?text=Hi, I just placed order ${orderId}. Please confirm.`}
                target="_blank"
                rel="noopener noreferrer"
                className="flex-1 flex items-center justify-center gap-2 bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg font-semibold transition-colors"
              >
                <MessageCircle className="w-5 h-5" />
                WhatsApp Us
              </a>
              <a
                href={`tel:${paymentSettings.whatsappNumber}`}
                className="flex-1 flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-primary-foreground py-3 px-4 rounded-lg font-semibold transition-colors"
              >
                <Phone className="w-5 h-5" />
                Call Us
              </a>
            </div>
          </div>
        </div>

        {/* What's Next */}
        <div className="bg-card rounded-xl border border-border p-6 mb-6">
          <h3 className="font-semibold text-foreground mb-4">What Happens Next?</h3>
          <div className="space-y-4">
            <div className="flex gap-4">
              <div className="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-sm shrink-0">
                1
              </div>
              <div>
                <p className="font-medium text-foreground">Order Confirmation</p>
                <p className="text-sm text-muted-foreground">
                  We will call/WhatsApp you to confirm your order details.
                </p>
              </div>
            </div>
            <div className="flex gap-4">
              <div className="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-sm shrink-0">
                2
              </div>
              <div>
                <p className="font-medium text-foreground">Processing & Packaging</p>
                <p className="text-sm text-muted-foreground">Your order will be packed discreetly within 24 hours.</p>
              </div>
            </div>
            <div className="flex gap-4">
              <div className="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-sm shrink-0">
                3
              </div>
              <div>
                <p className="font-medium text-foreground">Delivery</p>
                <p className="text-sm text-muted-foreground">
                  Expect delivery within 2-5 business days depending on your location.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Continue Shopping */}
        <div className="flex flex-col sm:flex-row gap-4">
          <Link
            href="/"
            className="flex-1 flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-primary-foreground py-4 px-6 rounded-xl font-semibold transition-colors"
          >
            <Home className="w-5 h-5" />
            Continue Shopping
          </Link>
          <Link
            href="/"
            className="flex-1 flex items-center justify-center gap-2 border-2 border-primary text-primary hover:bg-primary/5 py-4 px-6 rounded-xl font-semibold transition-colors"
          >
            View More Products
            <ArrowRight className="w-5 h-5" />
          </Link>
        </div>
      </div>
    </div>
  )
}

export default function ThankYouPage() {
  return (
    <CartProvider>
      <AdminProvider>
        <div className="min-h-screen flex flex-col">
          <Header />
          <main className="flex-1 bg-muted">
            <ThankYouContent />
          </main>
          <Footer />
        </div>
      </AdminProvider>
    </CartProvider>
  )
}
