import React from 'react';
import Link from 'next/link';
import { AlertTriangle, ArrowLeft, RefreshCw, HelpCircle } from 'lucide-react';
import { type Locale } from '@/i18n';

interface FailedPageProps {
  params: Promise<{ locale: Locale }>;
  searchParams: Promise<{ booking_id?: string; ref?: string; id?: string }>;
}

export const metadata = {
  title: 'Payment Incomplete | ShineCode Dubai',
  robots: { index: false, follow: false },
};

export default async function CheckoutFailedPage({ params, searchParams }: FailedPageProps) {
  const { locale } = await params;
  const { booking_id, ref, id } = await searchParams;
  const isAr = locale === 'ar';

  const resolvedRef = booking_id || ref || id;
  const displayRef = resolvedRef ? `#SC-${resolvedRef}` : '';

  return (
    <div className="min-h-screen bg-zinc-50/60 dark:bg-zinc-950 flex flex-col items-center justify-center px-4 py-16 text-center transition-colors">
      {/* Alert Container */}
      <div className="w-24 h-24 rounded-full bg-rose-100 dark:bg-rose-950/60 flex items-center justify-center mb-8 shadow-xl">
        <AlertTriangle className="w-12 h-12 text-rose-600 dark:text-rose-400" />
      </div>

      <div className="max-w-lg w-full space-y-6">
        <div className="space-y-2">
          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-rose-50 dark:bg-rose-950/50 border border-rose-200 dark:border-rose-800 text-rose-700 dark:text-rose-300 text-xs font-bold uppercase tracking-wider">
            {isAr ? 'لم تكتمل عملية الدفع' : 'Payment Not Completed'}
          </div>
          <h1 className="text-3xl sm:text-4xl font-extrabold text-zinc-900 dark:text-white">
            {isAr ? 'لم يتم خصم أي مبلغ' : 'No Charges Were Made'}
          </h1>
          <p className="text-zinc-600 dark:text-zinc-400 text-sm leading-relaxed">
            {isAr
              ? `تم إلغاء عملية الدفع أو تعذر إتمامها عبر بوابة الدفع${displayRef ? ` (المرجع: ${displayRef})` : ''}. يمكنك المحاولة مرة أخرى أو اختيار الدفع عند تقديم الخدمة (نقداً أو بالبطاقة).`
              : `Your payment was cancelled or could not be processed${displayRef ? ` (Ref: ${displayRef})` : ''}. You can try again or choose 'Pay After Service' at checkout.`}
          </p>
        </div>

        {/* Action Buttons */}
        <div className="flex flex-col sm:flex-row gap-3 pt-2">
          <Link
            href={`/${locale}/services`}
            className="flex-1 h-13 bg-zinc-900 dark:bg-white hover:bg-brand-500 active:bg-brand-600 dark:hover:bg-brand-500 dark:hover:text-white text-white dark:text-zinc-950 font-bold rounded-2xl flex items-center justify-center gap-2 transition-colors shadow-md text-sm cursor-pointer"
          >
            <RefreshCw className="w-4 h-4" />
            <span>{isAr ? 'العودة لقائمة الخدمات' : 'Return to Services'}</span>
          </Link>
          <Link
            href={`/${locale}/contact`}
            className="h-13 px-6 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-200 font-semibold rounded-2xl flex items-center justify-center gap-1.5 transition-colors text-sm cursor-pointer"
          >
            <HelpCircle className="w-4 h-4" />
            <span>{isAr ? 'مساعدة الدعم' : 'Contact Support'}</span>
          </Link>
        </div>
      </div>
    </div>
  );
}