import { Button } from "@/shared/common/ui/button";
import { Loader2 } from "lucide-react";
import {
  FormInputBox,
  FormTextBox,
  FormToggle,
  ImageUpload,
  Section,
} from "../components/FormInputBox";
import { useEffect, useState } from "react";
import { FormProps } from "./EditGoal";

const GoalForm = ({
  handleSubmit,
  handleCancel,
  watch,
  control,
  setValue,
  register,
  errors,
  isSubmitting,
  reset,
  item,
  label,
}: FormProps) => {
  const imageFile = watch("image")?.[0];
  const [imagePreview, setImage1Preview] = useState<string>(
    item?.presigned || ""
  );

  useEffect(() => {
    if (item?.presigned) {
      setImage1Preview(item.presigned);
    }
  }, [item]);

  // 🔹 when user picks a new image, show it
  useEffect(() => {
    if (imageFile) {
      const url = URL.createObjectURL(imageFile);
      setImage1Preview(url);
      return () => URL.revokeObjectURL(url);
    }
  }, [imageFile]);
  return (
    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
      <form onSubmit={handleSubmit} className="space-y-8">
        {/* Title Section */}
        <FormInputBox
          idEn="GoalTitleEn"
          idAm="GoalTitleAm"
          label="Title"
          error="Title is Required"
          errors={errors}
          register={register}
        />

        {/* Description Section */}
        <FormTextBox
          idAm="GoalDescriptionAm"
          idEn="GoalDescriptionEn"
          label="Description"
          error="Description is Required"
          errors={errors}
          register={register}
        />

        {/* isActive Toggle */}
        <FormToggle
          idAm="isActive"
          label="Status"
          watch={watch}
          setValue={setValue}
        />

        {/* Image Upload */}
        <Section title="Image">
          <ImageUpload
            label="Experience Image*"
            preview={imagePreview}
            existingName={item?.fileInfo?.originalname}
            register={register("image")}
            error={errors.image?.message}
            onView={() => window.open(imagePreview, "_blank")}
            id="image"
            isRequired={false}
          />
        </Section>

        {/* Actions */}
        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
          <Button
            variant="outline"
            onClick={handleCancel}
            type="button"
            disabled={isSubmitting}
            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
          >
            Cancel
          </Button>

          <Button
            type="submit"
            disabled={isSubmitting}
            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
          >
            {isSubmitting ? (
              <span className="flex items-center gap-2">
                <Loader2 className="w-4 h-4 animate-spin" />
                ...
              </span>
            ) : (
              label
            )}
          </Button>
        </div>
      </form>
    </div>
  );
};
export default GoalForm;
