"use client";

import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { useBooking } from "@/context/BookingContext";
import { useCurrency } from "@/context/CurrencyContext";
import { formatArrivalTimeDisplay } from "@/lib/formatArrivalTime";
import { siteConfig } from "@/lib/mocks/site";

export default function ReserveHeldPage() {
  const router = useRouter();
  const {
    holdReference,
    selectedRoom,
    guest,
    checkIn,
    checkOut,
    nights,
    total,
    payLaterHold,
    resetBooking,
  } = useBooking();
  const { formatUsd } = useCurrency();

  useEffect(() => {
    if (!holdReference || !selectedRoom) {
      router.replace("/booking");
      return;
    }
    if (!payLaterHold) {
      router.replace("/payment");
    }
  }, [holdReference, selectedRoom, payLaterHold, router]);

  if (!holdReference || !selectedRoom || !payLaterHold) {
    return null;
  }

  return (
    <div className="mx-auto max-w-lg px-4 py-16 md:py-24">
      <div
        className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-[var(--color-primary)] text-[var(--color-on-primary)] shadow-lg"
        aria-hidden
      >
        <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.75" />
          <path
            d="M12 7v5l3 2"
            stroke="currentColor"
            strokeWidth="1.75"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </div>
      <h1 className="mt-8 text-center font-heading text-3xl md:text-4xl">
        Reservation on hold
      </h1>
      <p className="mt-3 text-center text-sm text-[var(--color-muted)]">
        {guest.firstName}, your room is saved — finish payment whenever you&apos;re ready in this
        browser session. (Demo: no real hold or email.)
      </p>
      <p className="mt-2 text-center font-mono text-sm text-[var(--color-text)]">
        Hold ref: {holdReference}
      </p>
      <p className="mt-2 text-center text-xs text-[var(--color-muted)]">
        Indicative total when you pay:{" "}
        <span className="font-semibold text-[var(--color-text)]">{formatUsd(total)}</span>
      </p>

      <div className="mt-10 overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] text-left shadow-sm">
        <div className="relative aspect-[2/1] w-full">
          <Image
            src={selectedRoom.gallery[0]!}
            alt={selectedRoom.name}
            fill
            className="object-cover"
            sizes="(max-width:768px) 100vw, 512px"
          />
        </div>
        <div className="space-y-2 p-5 text-sm">
          <p className="font-semibold">{siteConfig.name}</p>
          <p>{selectedRoom.name}</p>
          <p className="text-[var(--color-muted)]">
            {checkIn} → {checkOut} · {nights} night{nights !== 1 ? "s" : ""}
          </p>
          <p className="text-[var(--color-muted)]">
            Flight {guest.flightBookingNumber.trim()} · arrival{" "}
            {formatArrivalTimeDisplay(guest.arrivalTime)}
          </p>
        </div>
      </div>

      <Link
        href="/payment"
        className="btn-mustard mt-10 flex w-full items-center justify-center py-4 text-sm"
      >
        Complete payment
      </Link>

      <Link
        href="/"
        onClick={() => resetBooking()}
        className="mt-4 block text-center text-sm font-medium text-[var(--color-primary)] hover:underline"
      >
        Back to home — discard this hold
      </Link>
    </div>
  );
}