"use client";

import { useState } from "react";
import TicketsSlider, { type TicketCountryOption, type TicketSearchState, type TicketSlideItem } from "@/components/tickets/TicketsSlider";
import TicketRequestForm from "@/components/tickets/TicketRequestForm";

const initialState: TicketSearchState = {
  fromCountryId: "",
  fromCityId: "",
  toCountryId: "",
  toCityId: "",
  tripType: "one_way",
  departureDate: "",
  returnDate: "",
  passengers: 1,
};

export default function TicketsPageClient({
  countries,
  slides,
}: {
  countries: TicketCountryOption[];
  slides: TicketSlideItem[];
}) {
  const [search, setSearch] = useState<TicketSearchState>(initialState);
  const [applied, setApplied] = useState<TicketSearchState>(initialState);

  return (
    <div className="min-h-screen bg-neutral-50">
      <TicketsSlider
        slides={slides}
        countries={countries}
        value={search}
        onChange={setSearch}
        onApplySearch={() => {
          setApplied(search);
          if (typeof window !== "undefined") {
            window.location.hash = "ticket-request";
          }
        }}
      />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 space-y-8">
        <section id="ticket-request">
          <div className="mb-5">
            <h2 className="text-2xl md:text-3xl font-bold text-navy-900">Create Ticket Booking Request</h2>
            <p className="text-sm text-neutral-500 mt-2">
              This is a manual booking request. Super admin will review your request and follow up by email.
            </p>
          </div>

          <TicketRequestForm countries={countries} defaults={applied} />
        </section>
      </div>
    </div>
  );
}