"use client";

import { useActionState } from "react";
import { FormField, FormTextarea } from "@/components/admin/FormField";
import { ImageUploadField } from "@/components/admin/ImageUploadField";
import type { CarRentalFormState } from "@/app/(admin-group)/admin/car-rentals/actions";
import type { CarRental } from "@/generated/prisma/client";

interface CarRentalFormProps {
  action: (
    state: CarRentalFormState,
    formData: FormData
  ) => Promise<CarRentalFormState>;
  carRental?: CarRental;
  submitLabel: string;
}

export function CarRentalForm({ action, carRental, submitLabel }: CarRentalFormProps) {
  const [state, formAction, isPending] = useActionState<
    CarRentalFormState,
    FormData
  >(action, undefined);

  return (
    <form action={formAction} className="space-y-5">
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <FormField
          label="Nama Mobil"
          name="name"
          defaultValue={carRental?.name}
          error={state?.errors?.name?.[0]}
          required
        />
        <FormField
          label="Tipe Mobil"
          name="type"
          defaultValue={carRental?.type ?? ""}
          placeholder="cth. SUV, Minivan"
        />
        <FormField
          label="Kapasitas Penumpang"
          name="capacity"
          defaultValue={carRental?.capacity ?? ""}
          placeholder="cth. 7 Kursi"
        />
        <FormField
          label="Harga Sewa"
          name="price"
          defaultValue={carRental?.price ?? ""}
          placeholder="cth. Rp 500.000 / Hari"
        />
      </div>

      <FormTextarea
        label="Deskripsi Lengkap"
        name="description"
        rows={5}
        defaultValue={carRental?.description ?? ""}
      />

      <ImageUploadField
        name="image"
        label="Gambar Mobil"
        defaultImageUrl={carRental?.imageUrl}
      />

      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <FormField
          label="Urutan Tampil"
          name="sortOrder"
          type="number"
          defaultValue={carRental?.sortOrder ?? 0}
        />
        <div className="space-y-3 pt-6">
          <div className="flex items-center gap-2">
            <input
              id="includeDriver"
              name="includeDriver"
              type="checkbox"
              defaultChecked={carRental?.includeDriver ?? true}
              className="h-4 w-4 rounded border-gray-300 text-merah-ranata focus:ring-merah-ranata"
            />
            <label htmlFor="includeDriver" className="text-sm text-heading">
              Harga Termasuk Supir
            </label>
          </div>
          
          <div className="flex items-center gap-2">
            <input
              id="isFeatured"
              name="isFeatured"
              type="checkbox"
              defaultChecked={carRental?.isFeatured ?? false}
              className="h-4 w-4 rounded border-gray-300 text-merah-ranata focus:ring-merah-ranata"
            />
            <label htmlFor="isFeatured" className="text-sm text-heading">
              Tampilkan sebagai unggulan
            </label>
          </div>
        </div>
      </div>

      {state?.message && (
        <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">
          {state.message}
        </p>
      )}

      <button
        type="submit"
        disabled={isPending}
        className="rounded-full bg-merah-ranata px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-merah-hover disabled:opacity-60"
      >
        {isPending ? "Menyimpan..." : submitLabel}
      </button>
    </form>
  );
}