"use client";

import { useEffect } from "react";
import { useForm } from "react-hook-form";

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

import { useModal } from "../../../../lib/modal-system/ModalContext";
import type { Package } from "../../../../features/packages/types/package";
import Input from "../../../ui/CustomInput";
import Select from "../../../ui/CustomSelect";

interface PackageFormValues {
  title: string;
  description: string;
  price: string;
  credits: string;
  status: "Active" | "Inactive";
}

interface PackageFormModalProps {
  mode: "create" | "edit";
  packageData?: Package | null;
  onSubmit: (data: Package) => void;
}

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

  const {
    register,
    control,
    reset,
    handleSubmit,
    formState: { errors },
  } = useForm<PackageFormValues>({
    defaultValues: {
      title: "",
      description: "",
      price: "",
      credits: "",
      status: "Active",
    },
  });

  useEffect(() => {
    if (mode === "edit" && packageData) {
      reset({
        title: packageData.title,
        description: packageData.description,
        price: packageData.price,
        credits: String(packageData.credits),
        status: packageData.status,
      });
    } else {
      reset({
        title: "",
        description: "",
        price: "",
        credits: "",
        status: "Active",
      });
    }
  }, [mode, packageData, reset]);

  const onSave = (values: PackageFormValues) => {
    onSubmit({
      id: packageData?.id ?? 0,
      title: values.title,
      description: values.description,
      price: values.price,
      credits: Number(values.credits),
      status: values.status,
    });

    closeModal();
  };

  return (
    <form onSubmit={handleSubmit(onSave)}>
      <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("title", {
            required: "Title is required",
          })}
          error={errors.title?.message}
        />

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

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

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

        <Select<PackageFormValues>
          name="status"
          control={control}
          label="Status"
          required
          placeholder="Select Status"
          options={[
            { label: "Active", value: "Active" },
            { label: "Inactive", value: "Inactive" },
          ]}
          error={errors.status?.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>
  );
}