"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "@/components/ui/toast";

// Added: reusable Australian states/territories list
import { AUSTRALIAN_STATES } from "@/lib/australian-states";

const inputClass =
  "mt-2 h-11 w-full rounded-xl border border-slate-200/80 bg-white px-4 text-sm font-medium text-[#0D1B2A] outline-none transition focus:border-[#1D4ED8] focus:ring-2 focus:ring-[#1D4ED8]/20";

function toLocalDateTimeInputValue(date: Date) {
  const pad = (value: number) => String(value).padStart(2, "0");

  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
    date.getDate(),
  )}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
}

export function CreateEventForm({
  leagues,
  venues,
  defaultCapacity,
}: {
  leagues: Array<{ id: string; label: string; priceCents: number }>;
  // Added stateCode so Create Event can filter venues by state/territory.
  venues: Array<{ id: string; label: string; stateCode: string }>;
  defaultCapacity: number;
}) {
  const router = useRouter();

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState("");
  const [price, setPrice] = useState("0.00");

  // Date validation
  const [minDateTime, setMinDateTime] = useState("");
  const [startDateTime, setStartDateTime] = useState("");

  // Added: state/territory selection for filtering the venue list.
  // Default to the first state that actually has an active venue.
  const [selectedState, setSelectedState] = useState(
    () =>
      AUSTRALIAN_STATES.find((state) =>
        venues.some((venue) => venue.stateCode === state.value),
      )?.value ?? "",
  );
  const [selectedVenueId, setSelectedVenueId] = useState("");

  // Track which states currently have at least one active venue.
  const activeStateCodes = new Set(venues.map((venue) => venue.stateCode));

  const filteredVenues = venues.filter(
    (venue) => venue.stateCode === selectedState,
  );

  useEffect(() => {
    const timer = window.setTimeout(() => {
      setMinDateTime(toLocalDateTimeInputValue(new Date()));
    }, 0);
    return () => window.clearTimeout(timer);
  }, []);

  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    setIsSubmitting(true);
    setError("");
    setSuccess(false);

    const form = new FormData(event.currentTarget);

    // Validate start/end dates
    const startsAt = String(form.get("startsAt") || "");
    const endsAt = String(form.get("endsAt") || "");

    const startTime = new Date(startsAt).getTime();
    const endTime = new Date(endsAt).getTime();

    if (
      !startsAt ||
      Number.isNaN(startTime) ||
      startTime < Date.now()
    ) {
      setError("The event start date and time must be in the future.");
      setIsSubmitting(false);
      return;
    }

    if (
      !endsAt ||
      Number.isNaN(endTime) ||
      endTime <= startTime
    ) {
      setError("The event end date and time must be after the start time.");
      setIsSubmitting(false);
      return;
    }

    const response = await fetch("/api/admin/events", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(Object.fromEntries(form)),
    });

    const payload = (await response.json()) as { error?: string };

    if (!response.ok) {
      const errorMsg = payload.error || "Unable to create event.";
      setError(errorMsg);
      toast.error("Event creation failed", { description: errorMsg });
      setIsSubmitting(false);
      return;
    }

    // Show success toast
    setIsSubmitting(false);
    setSuccess(true);
    toast.success("Event created successfully", {
      description: "Returning to the event list...",
    });

    // Wait 1.5 seconds, then return to event list
    window.setTimeout(() => {
      router.push("/admin/events");
      router.refresh();
    }, 1500);
  };

  return (
    <>

      <form
        onSubmit={submit}
        className="mt-6 grid gap-5 xl:grid-cols-[1.25fr_0.75fr]"
      >
        <section className="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-xs sm:p-7">
          <p className="text-[10px] font-extrabold uppercase tracking-[0.16em] text-[#F97316]">
            Session details
          </p>

          <div className="mt-5 grid gap-5 sm:grid-cols-2">
            <label className="sm:col-span-2 text-xs font-extrabold text-[#405760]">
              Event title
              <input
                required
                minLength={3}
                maxLength={150}
                name="title"
                placeholder="e.g. Saturday Junior Skills"
                className={inputClass}
              />
            </label>

            <label className="sm:col-span-2 text-xs font-extrabold text-[#405760]">
              Program and age group
              <select
                required
                name="leagueId"
                defaultValue=""
                className={inputClass}
                onChange={(event) => {
                  const league = leagues.find(
                    (option) => option.id === event.target.value,
                  );

                  setPrice(
                    ((league?.priceCents || 0) / 100).toFixed(2),
                  );
                }}
              >
                <option value="" disabled>
                  Choose a program
                </option>

                {leagues.map((league) => (
                  <option key={league.id} value={league.id}>
                    {league.label}
                  </option>
                ))}
              </select>
            </label>

            {/* Added: State/Territory dropdown used to filter venues */}
            <label className="text-xs font-extrabold text-[#405760]">
              State / Territory
              <select
                required
                value={selectedState}
                className={inputClass}
                onChange={(event) => {
                  setSelectedState(event.target.value);

                  // Reset the selected venue when the state changes.
                  setSelectedVenueId("");
                }}
              >
                <option value="" disabled>
                  Choose a state
                </option>

                {AUSTRALIAN_STATES.map((state) => (
                  <option
                    key={state.value}
                    value={state.value}
                    disabled={!activeStateCodes.has(state.value)}
                  >
                    {state.label}
                    {!activeStateCodes.has(state.value) ? " (No active venues)" : ""}
                  </option>
                ))}
              </select>
            </label>

            {/* Updated: only shows active venues in the selected state/territory */}
            <label className="text-xs font-extrabold text-[#405760]">
              Venue
              <select
                required
                name="venueId"
                value={selectedVenueId}
                disabled={!selectedState}
                className={inputClass}
                onChange={(event) => setSelectedVenueId(event.target.value)}
              >
                <option value="" disabled>
                  {!selectedState
                    ? "Choose a state first"
                    : filteredVenues.length === 0
                      ? "No active venues in this state"
                      : "Choose an active venue"}
                </option>

                {filteredVenues.map((venue) => (
                  <option key={venue.id} value={venue.id}>
                    {venue.label}
                  </option>
                ))}
              </select>
            </label>

            <label className="text-xs font-extrabold text-[#405760]">
              Start date and time
              <input
                required
                type="datetime-local"
                name="startsAt"
                min={minDateTime}
                value={startDateTime}
                onChange={(event) =>
                  setStartDateTime(event.target.value)
                }
                className={inputClass}
              />
            </label>

            <label className="text-xs font-extrabold text-[#405760]">
              End date and time
              <input
                required
                type="datetime-local"
                name="endsAt"
                min={startDateTime || minDateTime}
                className={inputClass}
              />
            </label>

            <label className="text-xs font-extrabold text-[#405760]">
              Event type
              <select
                name="eventType"
                defaultValue="combined_session"
                className={inputClass}
              >
                <option value="combined_session">
                  Combined session
                </option>
                <option value="practice">Practice</option>
                <option value="match">Match</option>
              </select>
            </label>

            <label className="text-xs font-extrabold text-[#405760]">
              Initial status
              <select
                name="status"
                defaultValue="scheduled"
                className={inputClass}
              >
                <option value="scheduled">
                  Pending threshold
                </option>
                <option value="draft">Draft</option>
              </select>
            </label>
          </div>
        </section>

        <aside className="rounded-[1.75rem] bg-[#dfecef]/68 p-6 sm:p-7">
          <p className="text-[10px] font-extrabold uppercase tracking-[0.16em] text-[#53717d]">
            Operations
          </p>

          <label className="mt-5 block text-xs font-extrabold text-[#405760]">
            Player capacity
            <input
              required
              type="number"
              name="capacity"
              min={1}
              max={500}
              defaultValue={defaultCapacity}
              className={inputClass}
            />

            <span className="mt-2 block font-medium leading-5 text-[#718289]">
              Defaults to the current admin setting. You can override it for
              this event.
            </span>
          </label>

          <label className="mt-5 block text-xs font-extrabold text-[#405760]">
            Minimum participants
            <input
              required
              type="number"
              name="minParticipants"
              min={1}
              max={500}
              defaultValue={5}
              className={inputClass}
            />

            <span className="mt-2 block font-medium leading-5 text-[#718289]">
              When this count is reached the event becomes confirmed and emails
              are sent to registered accounts.
            </span>
          </label>

          <label className="mt-5 block text-xs font-extrabold text-[#405760]">
            Price per player (AUD)

            <input
              required
              type="number"
              name="price"
              min={0}
              max={10000}
              step="0.01"
              value={price}
              onChange={(event) => setPrice(event.target.value)}
              className={inputClass}
            />

            <span className="mt-2 block font-medium leading-5 text-[#718289]">
              Existing bookings keep their original paid amount if this price
              changes later.
            </span>
          </label>

          <label className="mt-5 block text-xs font-extrabold text-[#405760]">
            Public arrival notes

            <textarea
              name="notes"
              rows={6}
              maxLength={3000}
              placeholder="Arrival time, equipment or access instructions"
              className={`${inputClass} h-auto py-3`}
            />
          </label>

          {error && (
            <p className="mt-4 text-xs font-bold text-[#9a4338]">
              {error}
            </p>
          )}

          <button
            type="submit"
            disabled={
              isSubmitting ||
              success ||
              leagues.length === 0 ||
              venues.length === 0 ||
              !selectedState ||
              !selectedVenueId
            }
            className="mt-6 flex w-full items-center justify-between rounded-xl bg-[#1D4ED8] py-2.5 pl-5 pr-2.5 text-sm font-semibold text-white shadow-xs transition hover:bg-[#1e40af] disabled:cursor-not-allowed disabled:opacity-50"
          >
            {success
              ? "Event created"
              : isSubmitting
                ? "Creating..."
                : "Create event"}

            <span className="grid h-8 w-8 place-items-center rounded-lg bg-white/20 text-white">
              <span className="material-symbols-outlined text-[18px]">
                {success ? "check" : "arrow_forward"}
              </span>
            </span>
          </button>
        </aside>
      </form>
    </>
  );
}