"use client";

import { useActionState } from "react";
import { FormField, FormTextarea } from "@/components/admin/FormField";
import { ImageUploadField } from "@/components/admin/ImageUploadField";
import { submitTestimonial } from "@/app/(admin-group)/admin/testimonials/actions";
import type { Testimonial } from "@/generated/prisma/client";

interface TestimonialFormProps {
  initialData?: Testimonial;
}

export function TestimonialForm({ initialData }: TestimonialFormProps) {
  const [state, action, isPending] = useActionState(submitTestimonial, null);

  return (
    <form action={action} className="space-y-6">
      {initialData && (
        <input type="hidden" name="id" value={initialData.id} />
      )}

      {state?.error && (
        <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600">
          {state.error}
        </div>
      )}

      <div className="grid gap-6 md:grid-cols-2">
        <FormField
          label="Nama Penulis"
          name="author"
          required
          defaultValue={initialData?.author}
        />
        <FormField
          label="Asal / Lokasi"
          name="location"
          defaultValue={initialData?.location || ""}
        />
        <FormField
          label="Rating Bintang (1-5)"
          name="rating"
          type="number"
          min="1"
          max="5"
          defaultValue={initialData?.rating?.toString() || "5"}
        />
        <FormField
          label="Urutan Tampil"
          name="sortOrder"
          type="number"
          defaultValue={initialData?.sortOrder?.toString() || "0"}
        />
      </div>

      <FormTextarea
        label="Isi Testimoni"
        name="text"
        required
        defaultValue={initialData?.text}
      />

      <div className="space-y-2">
        <label className="block text-sm font-medium text-heading">
          Foto Profil (Opsional)
        </label>
        <ImageUploadField
          name="avatarUrl"
          label="Foto Profil"
          defaultImageUrl={initialData?.avatarUrl || undefined}
        />
      </div>

      <div className="flex items-center gap-2">
        <input
          type="checkbox"
          id="isFeatured"
          name="isFeatured"
          value="true"
          defaultChecked={initialData?.isFeatured}
          className="h-4 w-4 rounded border-gray-300 text-merah-ranata focus:ring-merah-ranata"
        />
        <label htmlFor="isFeatured" className="text-sm font-medium text-heading">
          Tampilkan di Halaman Utama (Featured)
        </label>
      </div>

      <div className="flex justify-end">
        <button
          type="submit"
          disabled={isPending}
          className="rounded-lg bg-merah-ranata px-8 py-2.5 text-sm font-medium text-white transition hover:bg-merah-hover disabled:opacity-50"
        >
          {isPending ? "Menyimpan..." : "Simpan Testimoni"}
        </button>
      </div>
    </form>
  );
}