/**
 * Payment Cancelled Page
 * Shows when user cancels the payment process
 */

import Link from "next/link";
import type { Lang } from "@/lib/config";
import { XCircle, ArrowLeft, RefreshCw, Home } from "lucide-react";

interface PageProps {
  params: Promise<{ lang: Lang }>;
  searchParams: Promise<{ booking_id?: string }>;
}

export default async function PaymentCancelledPage({
  params,
  searchParams,
}: PageProps) {
  const { lang } = await params;
  const { booking_id } = await searchParams;
  const isAr = lang === "ar";

  const t = {
    title: isAr ? "تم إلغاء الدفع" : "Payment Cancelled",
    subtitle: isAr
      ? "لم يتم إتمام عملية الدفع. لا تقلق، لم يتم خصم أي مبلغ."
      : "Your payment was not completed. Don't worry, no charges were made.",
    whyCancel: isAr
      ? "أسباب شائعة للإلغاء:"
      : "Common reasons for cancellation:",
    reason1: isAr ? "تم إغلاق صفحة الدفع" : "The payment page was closed",
    reason2: isAr ? "تم الضغط على زر العودة" : "The back button was pressed",
    reason3: isAr ? "انتهت صلاحية الجلسة" : "The session timed out",
    tryAgain: isAr ? "يمكنك المحاولة مرة أخرى" : "You can try again",
    tryAgainDesc: isAr
      ? "إذا كنت ترغب في إكمال الحجز، يمكنك طلب رابط دفع جديد."
      : "If you'd like to complete your booking, you can request a new payment link.",
    backToHome: isAr ? "العودة للرئيسية" : "Back to Home",
    contactSupport: isAr ? "تواصل معنا" : "Contact Support",
  };

  return (
    <div
      className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4"
      dir={isAr ? "rtl" : "ltr"}
    >
      <div className="w-full max-w-lg">
        {/* Cancelled Card */}
        <div className="bg-white rounded-3xl shadow-xl overflow-hidden">
          {/* Header */}
          <div className="bg-gradient-to-r from-slate-600 to-slate-700 px-8 py-12 text-center relative overflow-hidden">
            {/* Background pattern */}
            <div className="absolute inset-0 opacity-10">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,white_1px,transparent_0)] bg-[length:24px_24px]" />
            </div>

            {/* Cancel icon */}
            <div className="relative">
              <div className="w-24 h-24 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-6">
                <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center">
                  <XCircle className="w-12 h-12 text-slate-500" />
                </div>
              </div>
              <h1 className="text-3xl font-bold text-white mb-2">{t.title}</h1>
              <p className="text-slate-300 text-lg">{t.subtitle}</p>
            </div>
          </div>

          {/* Content */}
          <div className="px-8 py-8">
            {/* Why Cancelled Section */}
            <div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 mb-6">
              <h3 className="text-sm font-bold text-slate-700 mb-3">
                {t.whyCancel}
              </h3>
              <ul className="space-y-2 text-sm text-slate-600">
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-slate-400" />
                  {t.reason1}
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-slate-400" />
                  {t.reason2}
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-1.5 h-1.5 rounded-full bg-slate-400" />
                  {t.reason3}
                </li>
              </ul>
            </div>

            {/* Try Again Note */}
            <div className="bg-amber-50 border border-amber-200 rounded-2xl p-6 mb-8">
              <div className="flex items-start gap-3">
                <RefreshCw className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
                <div>
                  <h3 className="text-sm font-bold text-amber-900 mb-1">
                    {t.tryAgain}
                  </h3>
                  <p className="text-sm text-amber-700">{t.tryAgainDesc}</p>
                </div>
              </div>
            </div>

            {/* Action Buttons */}
            <div className="flex flex-col sm:flex-row gap-3">
              <Link
                href={`/${lang}`}
                className="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl border-2 border-slate-200 text-slate-700 font-semibold hover:bg-slate-50 transition-colors"
              >
                <Home className="w-5 h-5" />
                {t.backToHome}
              </Link>
              <Link
                href={`/${lang}/contact`}
                className="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-slate-800 text-white font-semibold hover:bg-slate-700 transition-colors"
              >
                {t.contactSupport}
              </Link>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="text-center mt-6">
          <p className="text-sm text-slate-500">
            © {new Date().getFullYear()} Mawidi.{" "}
            {isAr ? "جميع الحقوق محفوظة." : "All rights reserved."}
          </p>
        </div>
      </div>
    </div>
  );
}