"use client";

import { FormEvent, Suspense, useEffect, useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";
import { BedDouble, CalendarDays, CheckCircle, CreditCard, Music2, Printer, UserRound, Utensils } from "lucide-react";
import { PageHero, Reveal, SiteFooter, SiteNav } from "../components";
import { bannerImages, hotel, imageLibrary } from "../data";
import { addDays, resortToday } from "@/lib/dates";
import type { DynamicRoom } from "@/lib/rooms";

const GROUP_PACKAGE = {
  id: "GROUP-PACKAGE",
  title: "Group Package",
  price: 1900,
  image: imageLibrary[2],
  description:
    "A group-friendly stay and dining package with welcome drinks, AC room, non-veg dinner, morning non-veg breakfast, and DJ music.",
  inclusions: ["Welcome drinks", "AC room", "Non-veg dinner", "Morning non-veg breakfast", "DJ Music"],
};

export default function BookingPage() {
  return (
    <Suspense fallback={<BookingFallback />}>
      <BookingContent />
    </Suspense>
  );
}

function BookingFallback() {
  return (
    <>
      <Reveal />
      <SiteNav />
      <main>
        <PageHero
          title="Book Your Stay"
          copy="Preparing the booking desk."
          image={bannerImages.booking}
          imagePosition="center 46%"
        />
      </main>
      <SiteFooter />
    </>
  );
}

function BookingContent() {
  const params = useSearchParams();
  const requestedRoom = params.get("room");
  const requestedPackage = params.get("package") === "group";
  const [rooms, setRooms] = useState<DynamicRoom[]>([]);
  const [bookingMode, setBookingMode] = useState<"room" | "group">(requestedPackage ? "group" : "room");
  const [selectedRoom, setSelectedRoom] = useState(requestedRoom ?? "");
  const [roomsLoading, setRoomsLoading] = useState(true);
  const [guestName, setGuestName] = useState("");
  const [guestEmail, setGuestEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [today, setToday] = useState("");
  const [checkIn, setCheckIn] = useState(() => params.get("checkIn") ?? resortToday());
  const [checkOut, setCheckOut] = useState(() => params.get("checkOut") ?? addDays(resortToday(), 1));
  const [guests, setGuests] = useState(params.get("guests") ?? (requestedPackage ? "6" : "2"));
  const [paymentMethod, setPaymentMethod] = useState("Pay at hotel");
  const [notes, setNotes] = useState("");
  const [reservationCode, setReservationCode] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [formError, setFormError] = useState("");
  useEffect(() => {
    fetch("/api/rooms")
      .then((response) => response.json())
      .then((data: { rooms?: DynamicRoom[] }) => {
        const availableRooms = data.rooms ?? [];
        setRooms(availableRooms);
        setSelectedRoom((current) =>
          availableRooms.some((item) => item.id === current) ? current : (availableRooms[0]?.id ?? "")
        );
      })
      .catch(() => setFormError("Unable to load room inventory."))
      .finally(() => setRoomsLoading(false));
  }, []);

  // Recompute "today" in the browser (the page HTML is prerendered) and move any
  // past check-in, e.g. from an old link, forward to today.
  useEffect(() => {
    const current = resortToday();
    setToday(current);
    setCheckIn((value) => (!value || value < current ? current : value));
  }, []);

  useEffect(() => {
    if (checkIn && checkOut <= checkIn) setCheckOut(addDays(checkIn, 1));
  }, [checkIn, checkOut]);

  useEffect(() => {
    const count = Number(guests);
    if (bookingMode === "group" && count < 2) setGuests("2");
    if (bookingMode === "room" && count > 4) setGuests("4");
  }, [bookingMode, guests]);

  const room = rooms.find((item) => item.id === selectedRoom) ?? rooms[0];
  const nights = useMemo(() => {
    const start = new Date(checkIn);
    const end = new Date(checkOut);
    const diff = Math.ceil((end.getTime() - start.getTime()) / 86400000);
    return Math.max(1, Number.isFinite(diff) ? diff : 1);
  }, [checkIn, checkOut]);
  const serviceCharge = 0;
  const isGroupPackage = bookingMode === "group";
  const guestCount = Number(guests);
  const subtotal = isGroupPackage ? GROUP_PACKAGE.price * guestCount : (room?.price ?? 0) * nights;
  const total = useMemo(() => subtotal + serviceCharge, [subtotal]);
  async function submitReservation(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!isGroupPackage && !room) {
      setFormError("No room is currently available for reservation.");
      return;
    }
    if (checkIn < resortToday()) {
      setFormError("Check-in date cannot be in the past.");
      return;
    }
    setSubmitting(true);
    setFormError("");
    try {
      const response = await fetch("/api/reservations", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          guestName,
          guestEmail,
          phone,
          roomId: isGroupPackage ? GROUP_PACKAGE.id : selectedRoom,
          checkIn,
          checkOut,
          guests: guestCount,
          paymentMethod,
          notes,
        }),
      });
      const data = await response.json();
      if (!response.ok) throw new Error(data.error ?? "Unable to submit reservation.");
      setReservationCode(data.reservation.code);
      setTimeout(() => document.getElementById("receipt")?.scrollIntoView({ behavior: "smooth" }), 50);
    } catch (error) {
      setFormError(error instanceof Error ? error.message : "Unable to submit reservation.");
    } finally {
      setSubmitting(false);
    }
  }

  function printBill() {
    window.print();
  }

  return (
    <>
      <Reveal />
      <SiteNav />
      <main>
        <PageHero
          title="Book Your Stay"
          copy="Choose a room stay or the group package, confirm your dates, and review the clear estimated bill."
          image={bannerImages.booking}
          imagePosition="center 46%"
        />
        <section className="section section-light">
          <div className="container booking-grid">
            <form className="booking-form reveal" onSubmit={submitReservation}>
              <div className="form-head">
                <span className="eyebrow">Guest Details</span>
                <h2>Reservation Request</h2>
              </div>
              <div className="booking-mode-selector" role="group" aria-label="Booking type">
                <button
                  type="button"
                  className={bookingMode === "room" ? "active" : ""}
                  onClick={() => setBookingMode("room")}
                >
                  <BedDouble size={17} /> Room Stay
                </button>
                <button
                  type="button"
                  className={bookingMode === "group" ? "active" : ""}
                  onClick={() => setBookingMode("group")}
                >
                  <Music2 size={17} /> Group Package
                </button>
              </div>
              <label>
                Guest Name
                <input
                  placeholder="Full name"
                  value={guestName}
                  onChange={(event) => setGuestName(event.target.value)}
                  required
                />
              </label>
              <label>
                Phone Number
                <input
                  placeholder="+977 ..."
                  value={phone}
                  onChange={(event) => setPhone(event.target.value)}
                  required
                />
              </label>
              <label>
                Email Address
                <input
                  type="email"
                  placeholder="you@example.com"
                  value={guestEmail}
                  onChange={(event) => setGuestEmail(event.target.value)}
                />
              </label>
              {isGroupPackage ? (
                <div className="group-booking-note">
                  <strong>NPR {GROUP_PACKAGE.price.toLocaleString()} per person</strong>
                  <span>{GROUP_PACKAGE.inclusions.join(" · ")}</span>
                </div>
              ) : (
                <label>
                  Room Type
                  <select
                    value={selectedRoom}
                    onChange={(event) => setSelectedRoom(event.target.value)}
                    disabled={roomsLoading || !rooms.length}
                    required
                  >
                    {!rooms.length ? <option value="">No rooms available</option> : null}
                    {rooms.map((item) => (
                      <option key={item.id} value={item.id}>
                        {item.title} - NPR {item.price.toLocaleString()} / night
                      </option>
                    ))}
                  </select>
                </label>
              )}
              <div className="form-split">
                <label>
                  Check In
                  <input type="date" value={checkIn} min={today || undefined} onChange={(event) => setCheckIn(event.target.value)} required />
                </label>
                <label>
                  Check Out
                  <input
                    type="date"
                    value={checkOut}
                    min={addDays(checkIn || today, 1)}
                    onChange={(event) => setCheckOut(event.target.value)}
                    required
                  />
                </label>
              </div>
              <div className="form-split">
                <label>
                  Guests
                  <select value={guests} onChange={(event) => setGuests(event.target.value)}>
                    {(isGroupPackage ? [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] : [1, 2, 3, 4]).map((count) => (
                      <option key={count} value={count}>
                        {count} {count === 1 ? "Adult" : "Guests"}
                      </option>
                    ))}
                  </select>
                </label>
                <label>
                  Payment
                  <select value={paymentMethod} onChange={(event) => setPaymentMethod(event.target.value)}>
                    <option>Pay at hotel</option>
                    <option>Advance payment</option>
                    <option>Full payment</option>
                  </select>
                </label>
              </div>
              <label>
                Notes
                <textarea
                  placeholder="Arrival time, food preference, extra bed..."
                  value={notes}
                  onChange={(event) => setNotes(event.target.value)}
                />
              </label>
              {formError ? <p className="form-error">{formError}</p> : null}
              <button className="submit-button" type="submit" disabled={submitting || (!isGroupPackage && !room)}>
                {submitting ? "Submitting..." : "Send Reservation Request"}
              </button>
            </form>

            {isGroupPackage ? (
              <aside className="booking-summary reveal group-package-summary">
                <div className="summary-image">
                  <img src={GROUP_PACKAGE.image} alt={GROUP_PACKAGE.title} />
                </div>
                <div className="summary-body">
                  <span>Group Offer</span>
                  <h2>{GROUP_PACKAGE.title}</h2>
                  <p>{GROUP_PACKAGE.description}</p>
                  <div className="summary-list">
                    <p>
                      <UserRound size={17} /> {guestCount} guests · NPR {GROUP_PACKAGE.price.toLocaleString()} per person
                    </p>
                    <p>
                      <BedDouble size={17} /> AC room included
                    </p>
                    <p>
                      <Utensils size={17} /> Dinner and breakfast included
                    </p>
                    <p>
                      <Music2 size={17} /> DJ music included
                    </p>
                    <p>
                      <CheckCircle size={17} /> Front desk confirmation required
                    </p>
                  </div>
                  <div className="total-box">
                    <small>Estimated package bill</small>
                    <strong>NPR {total.toLocaleString()}</strong>
                  </div>
                  {reservationCode ? (
                    <button className="print-button" type="button" onClick={printBill}>
                      <Printer size={17} /> Print Reservation
                    </button>
                  ) : null}
                </div>
              </aside>
            ) : room ? <aside className="booking-summary reveal">
              <div className="summary-image">
                <img src={room.image} alt={room.title} />
              </div>
              <div className="summary-body">
                <span>{room.status}</span>
                <h2>{room.title}</h2>
                <p>{room.description}</p>
                <div className="summary-list">
                  <p>
                    <CalendarDays size={17} /> {nights} night stay
                  </p>
                  <p>
                    <UserRound size={17} /> Up to {room.guests} guests
                  </p>
                  <p>
                    <CreditCard size={17} /> No service charge added
                  </p>
                  <p>
                    <CheckCircle size={17} /> Peaceful greenery and restaurant access
                  </p>
                  <p>
                    <CheckCircle size={17} /> Front desk confirmation required
                  </p>
                </div>
                <div className="total-box">
                  <small>Estimated bill</small>
                  <strong>NPR {total.toLocaleString()}</strong>
                </div>
                {reservationCode ? (
                  <button className="print-button" type="button" onClick={printBill}>
                    <Printer size={17} /> Print Reservation
                  </button>
                ) : null}
              </div>
            </aside> : (
              <aside className="booking-summary reveal">
                <div className="summary-body">
                  <h2>No rooms available</h2>
                  <p>Please contact Bass Resort directly while room inventory is being updated.</p>
                </div>
              </aside>
            )}
          </div>
          {reservationCode && (isGroupPackage || room) ? (
            <div className="container receipt-wrap">
              <section className="receipt-card" id="receipt">
                <div className="receipt-head">
                  <div>
                    <span className="eyebrow">Reservation Received</span>
                    <h2>{hotel.name} Reservation Request</h2>
                    <p>{hotel.area}</p>
                  </div>
                  <div>
                    <strong>{reservationCode}</strong>
                    <span>{new Date().toLocaleDateString()}</span>
                  </div>
                </div>
                <div className="receipt-grid">
                  <p>
                    <span>Guest</span>
                    <strong>{guestName || "Walk-in Guest"}</strong>
                  </p>
                  <p>
                    <span>Phone</span>
                    <strong>{phone || "Not provided"}</strong>
                  </p>
                  <p>
                    <span>Booking</span>
                    <strong>{isGroupPackage ? GROUP_PACKAGE.title : room?.title}</strong>
                  </p>
                  <p>
                    <span>Guests</span>
                    <strong>{guests}</strong>
                  </p>
                  <p>
                    <span>Check In</span>
                    <strong>{checkIn}</strong>
                  </p>
                  <p>
                    <span>Check Out</span>
                    <strong>{checkOut}</strong>
                  </p>
                </div>
                <table className="receipt-table">
                  <thead>
                    <tr>
                      <th>Description</th>
                      <th>Qty</th>
                      <th>Rate</th>
                      <th>Total</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>{isGroupPackage ? GROUP_PACKAGE.title : room?.title}</td>
                      <td>{isGroupPackage ? `${guestCount} guests` : `${nights} night`}</td>
                      <td>NPR {(isGroupPackage ? GROUP_PACKAGE.price : room?.price ?? 0).toLocaleString()}</td>
                      <td>NPR {subtotal.toLocaleString()}</td>
                    </tr>
                    <tr>
                      <td>Service charge</td>
                      <td>1</td>
                      <td>NPR 0</td>
                      <td>NPR 0</td>
                    </tr>
                  </tbody>
                </table>
                <div className="receipt-total">
                  <span>Estimated Total</span>
                  <strong>NPR {total.toLocaleString()}</strong>
                </div>
                <button className="print-button receipt-print" type="button" onClick={printBill}>
                  <Printer size={17} /> Print Reservation
                </button>
              </section>
            </div>
          ) : null}
        </section>
      </main>
      <SiteFooter />
    </>
  );
}