"use client";

import { useState } from "react";
import { Check, Loader2 } from "lucide-react";
import { apiBaseUrl, apiHeaders, apiPath } from "@/lib/api-url";
import { getUserAuthToken } from "@/lib/user-auth";

export function BookingForm() {
  const [status, setStatus] = useState<"idle" | "loading" | "done" | "error">("idle");
  const [errorMessage, setErrorMessage] = useState("");

  const submit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus("loading");
    setErrorMessage("");

    const formData = new FormData(e.currentTarget);
    const booking = {
      fullName: String(formData.get("fullName") ?? ""),
      phone: String(formData.get("phone") ?? ""),
      vehicleType: String(formData.get("vehicleType") ?? ""),
      service: String(formData.get("service") ?? ""),
      preferredDate: String(formData.get("preferredDate") ?? ""),
      preferredTime: String(formData.get("preferredTime") ?? ""),
      address: String(formData.get("address") ?? ""),
    };

    try {
      const response = await fetch(`${apiBaseUrl}${apiPath("/api/bookings")}`, {
        method: "POST",
        headers: apiHeaders({
          "Content-Type": "application/json",
          ...(getUserAuthToken() ? { Authorization: `Bearer ${getUserAuthToken()}` } : {}),
        }),
        body: JSON.stringify(booking),
      });

      if (!response.ok) {
        throw new Error("Booking request failed");
      }

      e.currentTarget.reset();
      setStatus("done");
    } catch (error) {
      console.error(error);
      setErrorMessage("We could not save your booking right now. Please try again.");
      setStatus("error");
    }
  };

  if (status === "done") {
    return (
      <div className="rounded-2xl glass-strong p-10 text-center shadow-elegant">
        <div className="mx-auto grid h-14 w-14 place-items-center rounded-full bg-primary text-primary-foreground">
          <Check className="h-6 w-6" />
        </div>
        <h3 className="mt-5 font-display text-2xl font-bold">Booking received!</h3>
        <p className="mt-2 text-muted-foreground">
          Our team will confirm your slot within 5 minutes. Get ready to revive your ride.
        </p>
        <button
          onClick={() => setStatus("idle")}
          className="mt-6 rounded-lg bg-foreground text-background px-5 py-2.5 text-sm font-semibold"
        >
          Book another
        </button>
      </div>
    );
  }

  const field =
    "w-full rounded-lg border border-border bg-background px-4 py-3 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition";
  const label = "block text-xs font-semibold text-foreground/70 mb-1.5 uppercase tracking-wider";

  return (
    <form
      onSubmit={submit}
      className="rounded-2xl glass-strong p-6 sm:p-8 shadow-elegant space-y-5"
    >
      <div className="grid sm:grid-cols-2 gap-4">
        <div>
          <label className={label}>Full name</label>
          <input required name="fullName" className={field} placeholder="Jane Rider" />
        </div>
        <div>
          <label className={label}>Phone</label>
          <input required name="phone" type="tel" className={field} placeholder="+91 98xxxxxxxx" />
        </div>
      </div>
      <div className="grid sm:grid-cols-2 gap-4">
        <div>
          <label className={label}>Vehicle type</label>
          <select required name="vehicleType" className={field}>
            <option>Bike</option>
            <option>Car</option>
            <option>Scooter</option>
          </select>
        </div>
        <div>
          <label className={label}>Service</label>
          <select required name="service" className={field}>
            <option>General service</option>
            <option>Repair</option>
            <option>Inspection</option>
            <option>Detailing & wash</option>
            <option>Emergency assistance</option>
          </select>
        </div>
      </div>
      <div className="grid sm:grid-cols-2 gap-4">
        <div>
          <label className={label}>Preferred date</label>
          <input required name="preferredDate" type="date" className={field} />
        </div>
        <div>
          <label className={label}>Preferred time</label>
          <input required name="preferredTime" type="time" className={field} />
        </div>
      </div>
      <div>
        <label className={label}>Address</label>
        <textarea
          required
          name="address"
          rows={3}
          className={field}
          placeholder="Where should our mechanic come?"
        />
      </div>
      {status === "error" ? (
        <p className="rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
          {errorMessage}
        </p>
      ) : null}
      <button
        disabled={status === "loading"}
        className="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3.5 text-sm font-semibold text-primary-foreground shadow-elegant hover:opacity-95 transition disabled:opacity-70"
      >
        {status === "loading" ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
        {status === "loading" ? "Booking..." : "Confirm booking"}
      </button>
    </form>
  );
}