"use client";

import { useActionState } from "react";
import { FormField } from "@/components/admin/FormField";
import { ImageUploadField } from "@/components/admin/ImageUploadField";
import { submitPromo } from "@/app/(admin-group)/admin/promos/actions";
import type { Promo } from "@/generated/prisma/client";

interface PromoFormProps {
  initialData?: Promo;
}

export function PromoForm({ initialData }: PromoFormProps) {
  const [state, action, isPending] = useActionState(submitPromo, null);

  // Format date to YYYY-MM-DD for input type="date"
  const formattedEndDate = initialData?.endDate 
    ? new Date(initialData.endDate).toISOString().split('T')[0]
    : "";

  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="Judul Promo"
          name="title"
          required
          defaultValue={initialData?.title}
        />
        <FormField
          label="Teks Diskon (Cth: Diskon Hingga 20%)"
          name="discountText"
          required
          defaultValue={initialData?.discountText}
        />
        <FormField
          label="Deskripsi Tambahan"
          name="description"
          defaultValue={initialData?.description || ""}
        />
        <div className="space-y-2">
          <label className="block text-sm font-medium text-heading">
            Tanggal Berakhir (Untuk Hitung Mundur)
          </label>
          <input
            type="date"
            name="endDate"
            defaultValue={formattedEndDate}
            className="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-merah-ranata focus:outline-none focus:ring-1 focus:ring-merah-ranata"
          />
        </div>
      </div>

      <div className="space-y-2">
        <label className="block text-sm font-medium text-heading">
          Gambar Latar Belakang (Lebar / Landscape)
        </label>
        <ImageUploadField
          name="imageUrl"
          label="Gambar Promo"
          defaultImageUrl={initialData?.imageUrl || undefined}
        />
      </div>

      <div className="flex items-center gap-2">
        <input
          type="checkbox"
          id="isActive"
          name="isActive"
          value="true"
          defaultChecked={initialData ? initialData.isActive : true}
          className="h-4 w-4 rounded border-gray-300 text-merah-ranata focus:ring-merah-ranata"
        />
        <label htmlFor="isActive" className="text-sm font-medium text-heading">
          Promo Aktif (Tampilkan di halaman utama)
        </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 Promo"}
        </button>
      </div>
    </form>
  );
}