import { useTranslations } from 'next-intl';
import Link from 'next/link';

interface SuccessPageProps {
  params: { locale: string };
  searchParams: { session_id?: string };
}

export default function SuccessPage({ params, searchParams }: SuccessPageProps) {
  const t = useTranslations('Success');
  const { locale } = params;
  const sessionId = searchParams.session_id;
  const referenceNumber = sessionId ? sessionId.substring(0, 8).toUpperCase() : '--------';

  return (
    <div className="min-h-[80vh] flex items-center justify-center px-4 py-12">
      <div className="max-w-md w-full bg-white rounded-2xl shadow-lg p-8 text-center">
        {/* Green checkmark icon */}
        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-green-100">
          <svg
            className="h-10 w-10 text-green-600"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2.5}
              d="M5 13l4 4L19 7"
            />
          </svg>
        </div>

        {/* Title */}
        <h1 className="text-2xl font-bold text-gray-900 mb-3">
          {t('title')}
        </h1>

        {/* Success message */}
        <p className="text-gray-600 mb-6">
          {t('message')}
        </p>

        {/* Reference number */}
        <div className="bg-gray-50 rounded-lg p-4 mb-6">
          <p className="text-sm text-gray-500 mb-1">{t('reference')}</p>
          <p className="text-lg font-mono font-semibold text-green-700">
            {referenceNumber}
          </p>
        </div>

        {/* Contact notice */}
        <p className="text-sm text-gray-600 mb-2">
          {t('contact')}
        </p>

        {/* Email confirmation note */}
        <p className="text-sm text-gray-500 mb-8">
          {t('emailNote')}
        </p>

        {/* Back to Home link */}
        <Link
          href={`/${locale}`}
          className="inline-block w-full rounded-lg bg-green-600 px-6 py-3 text-white font-medium hover:bg-green-700 transition-colors"
        >
          {t('backHome')}
        </Link>
      </div>
    </div>
  );
}