"use client";
import { BaseModal } from "@/components/modal";
import DynamicInput from "../input";
import { useForm, Controller } from "react-hook-form";

type PaddleForm = {
  price: number;
  lot: string;
};

export default function BuyPaddleModal({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const {
    control,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<PaddleForm>({
    defaultValues: { price: 1000, lot: "" },
  });

  const onSubmit = (data: PaddleForm) => {
    alert(
      `تم شراء المضرب! \nالقيمة: ${data.price} \nالخيل: ${
        data.lot || "غير محدد"
      }`,
    );
    reset();
    onClose();
  };

  return (
    <BaseModal
      isOpen={open}
      onOpenChange={(isOpen) => {
        if (!isOpen) onClose();
      }}
      title="شراء مضرب"
      contentClassName="w-full max-w-[400px] rounded-xl"
      footer={
        <div className="flex justify-end gap-2">
          <button
            onClick={handleSubmit(onSubmit)}
            className="px-4 py-2 bg-green-700 text-white rounded-lg"
          >
            دفع وشراء
          </button>
        </div>
      }
    >
      <form className="space-y-4">
        <Controller
          name="price"
          control={control}
          rules={{
            required: "القيمة مطلوبة",
            min: { value: 1, message: "أدخل قيمة صحيحة" },
          }}
          render={({ field, fieldState }) => (
            <DynamicInput
              field={field}
              fieldState={fieldState}
              type="number"
              label="قيمة المضرب"
              placeholder="أدخل قيمة المضرب"
              variant="bordered"
            />
          )}
        />

        <Controller
          name="lot"
          control={control}
          render={({ field, fieldState }) => (
            <DynamicInput
              field={field}
              fieldState={fieldState}
              type="text"
              label="ربط بخيل محدد (اختياري)"
              placeholder="مثال: 101"
              variant="bordered"
            />
          )}
        />
      </form>
    </BaseModal>
  );
}