"use client";

import Button from "../../../ui/Button";

import { useModal } from "../../../../lib/modal-system/ModalContext";
import Input from "../../../ui/CustomInput";
import Select from "../../../ui/CustomSelect";
import { Package } from "../../../../hooks/features/admin/packages/useFetchPackages";
import { useAppForm } from "../../../../hooks/useAppForm";
import {
  PackageFormData,
  packageSchema,
} from "../../../../hooks/features/admin/packages/create/schema";

interface PackageFormModalProps {
  mode: "create" | "edit";
  packageData?: Package | null;
  handleAction: (item: PackageFormData) => Promise<void>;
}

export default function PackageFormModal({
  mode,
  packageData,
  handleAction,
}: PackageFormModalProps) {
  const { closeModal } = useModal();

  const { register, control, reset, errors, handleSubmit } =
    useAppForm<PackageFormData>({
      defaultValues: {
        name: packageData?.name ?? "",
        description: packageData?.description ?? "",
        credits: packageData?.credits?.toString() ?? "",
        price: packageData?.price?.toString() ?? "",
        isActive: packageData?.isActive ? "true" : "false",
      },
      schema: packageSchema,
      onSubmit: async (data) => {
        try {
          await handleAction(data);
          closeModal();
        } catch (error) {}
      },
    });

  return (
    <form onSubmit={handleSubmit}>
      <h2 className="mb-8 text-center text-2xl font-bold text-heading">
        {mode === "create" ? "Create Package" : "Edit Package"}
      </h2>

      <div className="space-y-5">
        <Input
          label="Title"
          placeholder="Enter Title"
          required
          register={register("name")}
          error={errors.name?.message}
        />

        <Input
          label="Description"
          placeholder="Enter Description"
          required
          register={register("description")}
          error={errors.description?.message}
        />

        <div className="grid gap-5 md:grid-cols-2">
          <Input
            label="Price"
            placeholder="Enter Price"
            required
            register={register("price")}
            error={errors.price?.message}
          />

          <Input
            label="Credits"
            type="number"
            placeholder="Enter Credit"
            required
            register={register("credits")}
            error={errors.credits?.message}
          />
        </div>

        <Select<PackageFormData>
          name="isActive"
          control={control}
          label="Status"
          required
          placeholder="Select Status"
          options={[
            { label: "Active", value: "true" },
            { label: "Inactive", value: "false" },
          ]}
          error={errors.isActive?.message}
        />
      </div>

      <div className="mt-8 grid gap-5 md:grid-cols-2">
        <Button
          type="button"
          variant="white"
          onClick={closeModal}
          className="w-full"
          buttonClassName="w-full shadow-none!"
          BtnInnerclassName="px-4! py-3.5!"
        >
          Cancel
        </Button>

        <Button
          type="submit"
          className="w-full"
          buttonClassName="w-full shadow-none!"
          BtnInnerclassName="px-4! py-3.5!"
        >
          Save
        </Button>
      </div>
    </form>
  );
}