"use client";

import { useActionState } from "react";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Button } from "@/components/ui/Button";
import { submitBooking, type BookingFormState } from "@/lib/actions/bookings";
import { destinations } from "@/content/destinations";
import type { Dictionary, Locale } from "@/content/types";

const initialState: BookingFormState = { status: "idle" };

export function BookingForm({ dict, locale }: { dict: Dictionary; locale: Locale }) {
  const [state, formAction, pending] = useActionState(submitBooking, initialState);

  return (
    <section id="booking" className="bg-charcoal-950 py-24">
      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          light
          eyebrow={dict.booking.eyebrow}
          title={dict.booking.title}
          titleAccent={dict.booking.titleAccent}
          subtitle={dict.booking.subtitle}
        />

        {state.status === "success" ? (
          <p className="mt-10 rounded-2xl bg-white/5 p-6 text-center text-white">
            {dict.booking.success}
          </p>
        ) : (
          <form action={formAction} className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2">
            <Field label={dict.booking.fields.fullName} name="fullName" required />
            <Field label={dict.booking.fields.nationality} name="nationality" required />
            <Field label={dict.booking.fields.email} name="email" type="email" required />
            <Field label={dict.booking.fields.whatsapp} name="whatsapp" required />
            <Field
              label={dict.booking.fields.travelers}
              name="travelers"
              type="number"
              min={1}
              required
            />
            <Field
              label={dict.booking.fields.arrivalDate}
              name="arrivalDate"
              type="date"
              required
            />
            <Field label={dict.booking.fields.duration} name="duration" required />
            <div className="flex min-w-0 flex-col gap-1.5">
              <label className="text-xs font-semibold uppercase tracking-wide text-white/60">
                {dict.booking.fields.destination}
              </label>
              <select
                name="destination"
                required
                defaultValue=""
                className="w-full min-w-0 rounded-xl border border-white/15 bg-white/5 px-4 py-3 text-sm text-white focus:border-gold-500 focus:outline-none"
              >
                <option value="" disabled className="text-charcoal-950">
                  —
                </option>
                {destinations.map((destination) => {
                  const name = locale === "ar" ? destination.nameAr : destination.nameEn;
                  return (
                    <option key={destination.slug} value={name} className="text-charcoal-950">
                      {name}
                    </option>
                  );
                })}
              </select>
            </div>
            <div className="flex min-w-0 flex-col gap-1.5 sm:col-span-2">
              <label className="text-xs font-semibold uppercase tracking-wide text-white/60">
                {dict.booking.fields.notes}
              </label>
              <textarea
                name="notes"
                rows={4}
                className="w-full min-w-0 rounded-xl border border-white/15 bg-white/5 px-4 py-3 text-sm text-white focus:border-gold-500 focus:outline-none"
              />
            </div>

            {state.status === "error" ? (
              <p className="text-sm text-red-400 sm:col-span-2">
                {state.message ?? dict.booking.error}
              </p>
            ) : null}

            <div className="sm:col-span-2">
              <Button type="submit" disabled={pending} className="w-full sm:w-auto">
                {pending ? dict.booking.submitting : dict.booking.submit}
              </Button>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

function Field({
  label,
  name,
  type = "text",
  required,
  min,
}: {
  label: string;
  name: string;
  type?: string;
  required?: boolean;
  min?: number;
}) {
  return (
    <div className="flex min-w-0 flex-col gap-1.5">
      <label className="text-xs font-semibold uppercase tracking-wide text-white/60">
        {label}
      </label>
      <input
        name={name}
        type={type}
        required={required}
        min={min}
        className="w-full min-w-0 rounded-xl border border-white/15 bg-white/5 px-4 py-3 text-sm text-white placeholder-white/30 focus:border-gold-500 focus:outline-none"
      />
    </div>
  );
}