import type { Metadata } from "next";
import Link from "next/link";
import { CheckCircle, Package, ArrowRight, Home } from "lucide-react";
import { auth } from "@/auth";
import { redirect } from "next/navigation";

export const metadata: Metadata = { title: "Order Successful" };

export default async function OrderSuccessPage({
  searchParams,
}: {
  searchParams: Promise<{ orderId?: string }>;
}) {
  const session = await auth();
  const { orderId } = await searchParams;

  // If not logged in, redirect to login
  if (!session?.user?.id) {
    redirect("/login");
  }

  return (
    <div className="min-h-screen bg-neutral-50 flex items-center justify-center py-20 px-4">
      <div className="max-w-2xl w-full">
        <div className="bg-white rounded-3xl border border-neutral-200 p-8 md:p-12 text-center shadow-sm">
          {/* Success Icon */}
          <div className="w-20 h-20 bg-emerald-50 rounded-full flex items-center justify-center mx-auto mb-6">
            <CheckCircle size={40} className="text-emerald-600" strokeWidth={2} />
          </div>

          {/* Thank You Message */}
          <h1 className="text-3xl md:text-4xl font-bold text-navy-900 mb-3">Thank You for Your Order!</h1>
          <p className="text-neutral-600 text-lg mb-8">
            Your order has been successfully placed and payment confirmed.
          </p>

          {/* Order ID */}
          {orderId && (
            <div className="bg-neutral-50 border border-neutral-200 rounded-2xl p-6 mb-8 text-left">
              <div className="flex items-center gap-3 mb-3">
                <Package size={20} className="text-navy-600" />
                <h2 className="font-semibold text-navy-800">Order Confirmation</h2>
              </div>
              <p className="text-sm text-neutral-600 mb-2">Your order number is:</p>
              <p className="text-2xl font-bold text-navy-700 tracking-wide">
                #{orderId.slice(-8).toUpperCase()}
              </p>
              <p className="text-sm text-neutral-500 mt-3">
                A confirmation email has been sent to <span className="font-medium">{session.user.email}</span>
              </p>
            </div>
          )}

          {/* What's Next */}
          <div className="bg-blue-50 border border-blue-200 rounded-2xl p-6 mb-8 text-left">
            <h3 className="font-semibold text-blue-900 mb-3">What happens next?</h3>
            <ul className="space-y-2 text-sm text-blue-800">
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="shrink-0 mt-0.5" />
                <span>You'll receive a confirmation email with your order details</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="shrink-0 mt-0.5" />
                <span>We'll notify you when your order is shipped</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle size={16} className="shrink-0 mt-0.5" />
                <span>Track your order anytime from your dashboard</span>
              </li>
            </ul>
          </div>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            {orderId && (
              <Link
                href={`/dashboard/orders/${orderId}`}
                className="flex items-center justify-center gap-2 px-6 py-3 bg-navy-700 text-white font-semibold rounded-xl hover:bg-navy-800 transition-colors"
              >
                View Order Details <ArrowRight size={16} />
              </Link>
            )}
            <Link
              href="/dashboard"
              className="flex items-center justify-center gap-2 px-6 py-3 border-2 border-navy-200 text-navy-700 font-semibold rounded-xl hover:bg-navy-50 transition-colors"
            >
              <Home size={16} /> Go to Dashboard
            </Link>
          </div>

          <div className="mt-8 pt-6 border-t border-neutral-200">
            <p className="text-sm text-neutral-500">
              Need help?{" "}
              <Link href="/contact" className="text-navy-700 font-medium hover:underline">
                Contact our support team
              </Link>
            </p>
          </div>
        </div>

        {/* Continue Shopping */}
        <div className="text-center mt-6">
          <Link
            href="/shop"
            className="text-navy-600 hover:text-navy-800 font-medium text-sm inline-flex items-center gap-1"
          >
            ← Continue Shopping
          </Link>
        </div>
      </div>
    </div>
  );
}