import {
  mdiAlertCircleOutline,
  mdiArrowLeft,
} from '@mdi/js'
import Head from 'next/head'
import { useRouter } from 'next/router'
import React, { ReactElement, useMemo } from 'react'
import BaseButton from '../../components/BaseButton'
import CardBox from '../../components/CardBox'
import SectionMain from '../../components/SectionMain'
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
import { getPageTitle } from '../../config'
import LayoutAuthenticated from '../../layouts/Authenticated'

const StripeCancelPage = () => {
  const router = useRouter()
  const reservationId = useMemo(() => {
    const value = router.query.reservationId
    return typeof value === 'string' ? value : ''
  }, [router.query.reservationId])

  return (
    <>
      <Head>
        <title>{getPageTitle('Stripe Payment Cancelled')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiAlertCircleOutline} title="Stripe payment cancelled" main>
          <BaseButton href="/front-desk" icon={mdiArrowLeft} label="Back to Front Desk" color="info" />
        </SectionTitleLineWithButton>

        <CardBox className="border-0 shadow-sm ring-1 ring-amber-100">
          <div className="rounded-3xl bg-amber-50 p-6 text-amber-900">
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-amber-600">HotelPilot PMS</p>
            <h2 className="mt-2 text-3xl font-black">Checkout was cancelled</h2>
            <p className="mt-3 max-w-2xl text-sm leading-6 text-amber-700">
              No Stripe payment was captured. The reservation remains open, so front desk staff can retry collection,
              accept another method, or continue the check-in workflow based on hotel policy.
            </p>
          </div>

          <div className="mt-6 space-y-4">
            {reservationId && (
              <p className="rounded-2xl bg-slate-50 p-4 text-sm text-slate-600">
                Reservation reference: <span className="font-bold">{reservationId}</span>
              </p>
            )}

            <div className="flex flex-wrap gap-3">
              <BaseButton href="/front-desk" color="info" label="Retry from Front Desk" />
              <BaseButton href="/reservations/reservations-list" color="whiteDark" label="Open Reservations" />
            </div>
          </div>
        </CardBox>
      </SectionMain>
    </>
  )
}

StripeCancelPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
}

export default StripeCancelPage
