import { getCheckoutSession } from "@/lib/stripe";
import { UI, type Lang } from "@/lib/config";
import { redirect } from "next/navigation";

export default async function SubscriptionSuccess({
  params,
  searchParams,
}: {
  params: { lang: Lang };
  searchParams: { session_id?: string };
}) {
  const isAr = params.lang === "ar";
  const dict = UI[params.lang];

  if (!searchParams.session_id) {
    redirect(`/${params.lang}/pricing`);
  }

  const session = await getCheckoutSession(searchParams.session_id);

  if (!session) {
    redirect(`/${params.lang}/pricing`);
  }

  return (
    <main
      dir={dict.dir}
      className="min-h-screen bg-gradient-to-b from-emerald-50 to-white dark:from-slate-900 dark:to-slate-800 flex items-center justify-center p-4"
    >
      <div className="max-w-2xl w-full bg-white dark:bg-slate-900 rounded-2xl shadow-2xl p-8 md:p-12 text-center border-2 border-emerald-500">
        {/* Success Icon */}
        <div className="w-20 h-20 bg-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6">
          <svg
            className="w-12 h-12 text-white"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={3}
              d="M5 13l4 4L19 7"
            />
          </svg>
        </div>

        {/* Success Message */}
        <h1 className="text-3xl md:text-4xl font-bold text-brand-ink dark:text-white mb-4">
          {isAr ? "تم الاشتراك بنجاح!" : "Subscription Successful!"}
        </h1>

        <p className="text-lg text-neutral-600 dark:text-neutral-300 mb-8">
          {isAr
            ? "شكراً لاشتراكك في مويدي! لديك الآن وصول كامل لجميع المزايا."
            : "Thank you for subscribing to Mawidi! You now have full access to all features."}
        </p>

        {/* Session Details */}
        <div className="bg-slate-50 dark:bg-slate-800 rounded-lg p-6 mb-8 text-left">
          <h2 className="font-semibold text-lg mb-4 text-brand-ink dark:text-white">
            {isAr ? "تفاصيل الاشتراك" : "Subscription Details"}
          </h2>
          <div className="space-y-2 text-sm">
            <p className="flex justify-between">
              <span className="text-neutral-600 dark:text-neutral-400">
                {isAr ? "رقم الجلسة:" : "Session ID:"}
              </span>
              <span className="font-mono text-neutral-800 dark:text-neutral-200 text-xs">
                {session.id}
              </span>
            </p>
            <p className="flex justify-between">
              <span className="text-neutral-600 dark:text-neutral-400">
                {isAr ? "البريد الإلكتروني:" : "Email:"}
              </span>
              <span className="text-neutral-800 dark:text-neutral-200">
                {session.customer_details?.email}
              </span>
            </p>
            <p className="flex justify-between">
              <span className="text-neutral-600 dark:text-neutral-400">
                {isAr ? "الخطة:" : "Plan:"}
              </span>
              <span className="text-neutral-800 dark:text-neutral-200">
                {session.metadata?.tier_id?.toUpperCase()}
              </span>
            </p>
          </div>
        </div>

        {/* Next Steps */}
        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 mb-8 text-left">
          <h3 className="font-semibold text-brand-ink dark:text-white mb-3">
            {isAr ? "الخطوات التالية:" : "Next Steps:"}
          </h3>
          <ul className="space-y-2 text-sm text-neutral-700 dark:text-neutral-300">
            <li className="flex items-start gap-2">
              <span className="text-brand-green text-lg">✓</span>
              <span>
                {isAr
                  ? "ستتلقى رسالة تأكيد عبر البريد الإلكتروني خلال دقائق"
                  : "You will receive a confirmation email within minutes"}
              </span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-brand-green text-lg">✓</span>
              <span>
                {isAr
                  ? "تجربتك المجانية لمدة 7 أيام تبدأ الآن - لن يتم الخصم حتى انتهاء التجربة"
                  : "Your 7-day free trial starts now - no charge until trial ends"}
              </span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-brand-green text-lg">✓</span>
              <span>
                {isAr
                  ? "تواصل مع فريق الإعداد لديك للبدء"
                  : "Our onboarding team will contact you to get started"}
              </span>
            </li>
          </ul>
        </div>

        {/* CTA Buttons */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <a
            href={`/${params.lang}/demo`}
            className="px-8 py-3 bg-brand-green text-white rounded-lg font-semibold hover:bg-brand-greenHover transition-all shadow-md"
          >
            {isAr ? "استكشف لوحة التحكم" : "Explore Dashboard"}
          </a>
          <a
            href={`/${params.lang}/contact`}
            className="px-8 py-3 bg-slate-100 text-brand-ink rounded-lg font-semibold hover:bg-slate-200 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 transition-all"
          >
            {isAr ? "تواصل مع الدعم" : "Contact Support"}
          </a>
        </div>
      </div>
    </main>
  );
}