"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

// 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";

type VenueManagementFormProps = {
  venue: {
    id: string;
    name: string;
    type: string;
    addressLine1: string;
    suburb: string;
    stateCode: string;
    postcode: string;
    hourlyCost: number | null;
    latitude: number | null;
    longitude: number | null;
    active: boolean;
    eventCount: number;
  };
};

export function VenueManagementForm({
  venue,
}: VenueManagementFormProps) {
  const router = useRouter();

  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState("");
  const [message, setMessage] = useState("");

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

    setIsSaving(true);
    setError("");
    setMessage("");

    const form = new FormData(event.currentTarget);
    const data = Object.fromEntries(form);

    const response = await fetch(
      `/api/admin/venues/${venue.id}`,
      {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...data,
          isActive: form.get("isActive") === "on",
        }),
      },
    );

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

    if (!response.ok) {
      setError(
        payload.error || "Unable to update this venue.",
      );
    } else {
      setMessage("Venue changes saved.");
      router.refresh();
    }

    setIsSaving(false);
  };

  return (
    <form
      onSubmit={submit}
      className="mt-6 grid gap-5 xl:grid-cols-[1.2fr_0.8fr]"
    >
      <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]">
          Venue 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]">
            Venue name
            <input
              required
              minLength={3}
              maxLength={150}
              name="name"
              defaultValue={venue.name}
              className={inputClass}
            />
          </label>

          <label className="sm:col-span-2 text-xs font-extrabold text-[#405760]">
            Street address
            <input
              required
              minLength={5}
              maxLength={255}
              name="address"
              defaultValue={venue.addressLine1}
              className={inputClass}
            />
          </label>

          <label className="text-xs font-extrabold text-[#405760]">
            Suburb
            <input
              required
              name="suburb"
              maxLength={120}
              defaultValue={venue.suburb}
              className={inputClass}
            />
          </label>

          <label className="text-xs font-extrabold text-[#405760]">
            Venue type
            <select
              name="venueType"
              defaultValue={venue.type}
              className={inputClass}
            >
              <option value="council_ground">
                Council ground
              </option>
              <option value="school">School</option>
              <option value="community_centre">
                Community centre
              </option>
              <option value="other">Other</option>
            </select>
          </label>

          <label className="text-xs font-extrabold text-[#405760]">
            State

            {/* Added:
                Uses the shared Australian states list instead
                of allowing admins to manually type a state code.
                The venue's existing state is selected automatically.
            */}
            <select
              required
              name="stateCode"
              defaultValue={venue.stateCode}
              className={inputClass}
            >
              {AUSTRALIAN_STATES.map((state) => (
                <option
                  key={state.value}
                  value={state.value}
                >
                  {state.label}
                </option>
              ))}
            </select>
          </label>

          <label className="text-xs font-extrabold text-[#405760]">
            Postcode
            <input
              required
              name="postcode"
              defaultValue={venue.postcode}
              minLength={3}
              maxLength={12}
              className={inputClass}
            />
          </label>
        </div>
      </section>

      <aside className="rounded-[1.75rem] bg-[#fff1dd]/72 p-6 sm:p-7">
        <p className="text-[10px] font-extrabold uppercase tracking-[0.16em] text-[#9a5a1d]">
          Operations
        </p>

        <label className="mt-5 block text-xs font-extrabold text-[#405760]">
          Hourly cost (AUD)
          <input
            type="number"
            name="hourlyCost"
            min={0}
            max={100000}
            step="0.01"
            defaultValue={venue.hourlyCost ?? ""}
            className={inputClass}
          />
        </label>

        <div className="mt-5 grid grid-cols-2 gap-4">
          <label className="text-xs font-extrabold text-[#405760]">
            Latitude
            <input
              type="number"
              name="latitude"
              min={-90}
              max={90}
              step="0.0000001"
              defaultValue={venue.latitude ?? ""}
              className={inputClass}
            />
          </label>

          <label className="text-xs font-extrabold text-[#405760]">
            Longitude
            <input
              type="number"
              name="longitude"
              min={-180}
              max={180}
              step="0.0000001"
              defaultValue={venue.longitude ?? ""}
              className={inputClass}
            />
          </label>
        </div>

        <label className="mt-6 flex items-start gap-3 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 text-xs font-semibold text-slate-700">
          <input
            type="checkbox"
            name="isActive"
            defaultChecked={venue.active}
            className="mt-0.5 h-4 w-4 accent-[#1D4ED8]"
          />

          <span>
            Active and available for administrators to
            schedule new events.
          </span>
        </label>

        <p className="mt-3 text-[11px] leading-5 text-slate-400">
          Deactivating preserves {venue.eventCount} historical
          and scheduled event record(s), but removes this venue
          from new event forms.
        </p>

        {message && (
          <p className="mt-4 text-xs font-semibold text-emerald-700">
            {message}
          </p>
        )}

        {error && (
          <p className="mt-4 text-xs font-semibold text-rose-600">
            {error}
          </p>
        )}

        <button
          type="submit"
          disabled={isSaving}
          className="mt-6 w-full rounded-xl bg-[#1D4ED8] px-5 py-2.5 text-xs font-semibold text-white shadow-xs transition hover:bg-[#1e40af] disabled:opacity-50"
        >
          {isSaving
            ? "Saving..."
            : "Save venue changes"}
        </button>
      </aside>
    </form>
  );
}