import { useState } from 'react'
import { createFileRoute, Link } from '@tanstack/react-router'

import { SiteFooter } from '#/components/site-footer'
import { SiteHeader } from '#/components/site-header'
import { cancelReservationByToken, getReservationByCancelToken } from '#/lib/reservations'

export const Route = createFileRoute('/stornieren/$token')({
  component: CancelReservationPage,
  loader: async ({ params }) => {
    const reservation = await getReservationByCancelToken({ data: { token: params.token } })
    return { reservation }
  },
})

const dateTimeFormatter = new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'full',
  timeStyle: 'short',
})

function CancelReservationPage() {
  const { token } = Route.useParams()
  const { reservation } = Route.useLoaderData()

  const [isCancelled, setIsCancelled] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function handleCancel() {
    setError(null)
    setIsSubmitting(true)

    try {
      await cancelReservationByToken({ data: { token } })
      setIsCancelled(true)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <>
      <SiteHeader />

      <main className="page">
        <section className="section">
          <div className="section-grid">
            <div>
              <span className="section-kicker">Reservierung verwalten</span>
              <h1 className="section-heading">Reservierung stornieren</h1>
            </div>

            {!reservation ? (
              <p className="empty-state">
                Diese Reservierung wurde nicht gefunden oder ist bereits storniert.{' '}
                <Link to="/">Zurück zur Startseite</Link>
              </p>
            ) : isCancelled ? (
              <p className="message message-success">
                Ihre Reservierung wurde storniert. Wir haben Ihnen eine Bestätigung per E-Mail
                gesendet. <Link to="/">Zurück zur Startseite</Link>
              </p>
            ) : (
              <div className="reservation-form">
                <ul className="contact-list">
                  <li>
                    <span className="label">Tisch</span>
                    <span>{reservation.tableName}</span>
                  </li>
                  <li>
                    <span className="label">Datum &amp; Uhrzeit</span>
                    <span>{dateTimeFormatter.format(new Date(reservation.reservationTime))}</span>
                  </li>
                  <li>
                    <span className="label">Personen</span>
                    <span>{reservation.partySize}</span>
                  </li>
                </ul>

                <button type="button" className="btn btn-danger" disabled={isSubmitting} onClick={handleCancel}>
                  {isSubmitting ? 'Wird storniert …' : 'Reservierung stornieren'}
                </button>

                {error && <p className="message message-error">{error}</p>}
              </div>
            )}
          </div>
        </section>
      </main>

      <SiteFooter />
    </>
  )
}