import { useNavigate } from 'react-router-dom'
import InfoIcon from '../components/InfoIcon'
import SuccessIcon from '../components/SuccessIcon'

function DetailRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between py-2">
      <span className="text-gray-500">{label}</span>
      <span className="font-medium text-gray-900">{value}</span>
    </div>
  )
}

// mock reservation summary — will come from the payment gateway's return params once integrated
const mockReservation = {
  count: '۳ نفر',
  fullName: 'هستی حصادی',
  phone: '۰۹۱۲۳۴۵۶۷۸۹',
  cafeName: 'بی‌بای',
  matchName: 'برزیل-مراکش',
  dateTime: 'پنجشنبه ۲۷ خرداد - ساعت ۲:۰۰',
  reservationCode: 'HH-۲۸۴۷',
}

export default function PaymentSuccess() {
  const navigate = useNavigate()

  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
      <div className="w-full max-w-sm rounded-3xl bg-white p-6 shadow-lg">
        <SuccessIcon />

        <h2 className="mt-6 text-right font-bold text-gray-900">جزئیات رزرو</h2>
        <div className="mt-2">
          <DetailRow label="تعداد" value={mockReservation.count} />
          <DetailRow label="به نام" value={mockReservation.fullName} />
          <DetailRow label="شماره تماس" value={mockReservation.phone} />
          <DetailRow label="کافه" value={mockReservation.cafeName} />
          <DetailRow label="بازی" value={mockReservation.matchName} />
          <DetailRow label="تاریخ و ساعت" value={mockReservation.dateTime} />
          <DetailRow label="کد رزرو" value={mockReservation.reservationCode} />
        </div>

        <div className="mt-4 flex items-center justify-end gap-2 rounded-2xl bg-[#ECF2F8] px-4 py-3">
          <InfoIcon />
          <p className="text-right text-sm text-gray-600">
            کد رزرو را برای ورود نزد خود نگه دارید. اطلاعات رزرو و کد ورود تا دقایقی دیگر برای شما پیامک می‌شود.
          </p>
        </div>

        <button
          type="button"
          onClick={() => navigate('/')}
          className="mt-4 w-full rounded-2xl bg-[#223D5D] py-4 text-lg font-semibold text-white"
        >
          صفحه اصلی
        </button>
      </div>
    </div>
  )
}