import type { Metadata } from 'next'

import { Button } from '@/components/ui/button'
import { mergeOpenGraph } from '@/utilities/mergeOpenGraph'
import Link from 'next/link'
import React from 'react'

export default function ConfirmOrderPage() {
  return (
    <div className="container min-h-[70vh] py-16">
      <div className="mx-auto flex max-w-2xl flex-col gap-6 rounded-xl border bg-card p-8">
        <h1 className="text-3xl font-medium">Payment confirmation unavailable</h1>
        <p className="text-base text-muted-foreground">
          This checkout confirmation route is no longer accepting payment callbacks.
        </p>
        <p className="text-sm text-muted-foreground">
          If you already completed a purchase, use order lookup to find your order or contact your
          administrator for manual verification.
        </p>
        <div className="flex flex-col gap-3 sm:flex-row">
          <Button asChild>
            <Link href="/find-order">Find an order</Link>
          </Button>
          <Button asChild variant="outline">
            <Link href="/shop">Return to shop</Link>
          </Button>
        </div>
      </div>
    </div>
  )
}

export const metadata: Metadata = {
  description: 'Payment confirmation is temporarily unavailable.',
  openGraph: mergeOpenGraph({
    title: 'Payment confirmation unavailable',
    url: '/checkout/confirm-order',
  }),
  title: 'Payment confirmation unavailable',
}