import { Button } from "@/shared/common/ui/button";
import { Loader2 } from "lucide-react";

import {
  FormInputBox,
  FormSelector,
  FormTextBox,
  FormToggle,
  ImageUpload,
  Section,
} from "../components/FormInputBox";
import { useEffect, useState } from "react";
import { FormProps } from "./EditMessage";
import { ContactUsList } from "../types/contactUs";

const MessageForm = ({
  handleSubmit,
  handleCancel,
  watch,
  control,
  setValue,
  register,
  errors,
  isSubmitting,
  employeesList,
  reset,
  item,
  label,
}: FormProps) => {
  const MessageType: ContactUsList[] = [
    {
      label: "Office Head",
      value: "office_head",
    },
    {
      label: "Deputy",
      value: "deputy",
    },
  ];
  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]);
  useEffect(() => {
    if (employeesList.length && !watch("employeeId")) {
      setValue("employeeId", employeesList[0].value);
    }
  }, [employeesList, setValue, watch]);
  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">
        {/* message type */}
        <FormSelector
          id="staffType"
          label="Message Type"
          error="Type is Required"
          errors={errors}
          register={register}
          control={control}
          item={MessageType}
        />
        {/* Employee Selection */}
        <FormSelector
          id="employeeId"
          label="Select Employee"
          error="Employee is Required"
          errors={errors}
          register={register}
          control={control}
          item={employeesList}
        />
        {/* Title Section */}
        <FormInputBox
          idEn="messageTitleEn"
          idAm="messageTitleAm"
          label="Title"
          error="Title is Required"
          errors={errors}
          register={register}
        />

        {/* Content Section */}
        <FormTextBox
          idAm="messageContentAm"
          idEn="messageContentEn"
          label="Content"
          error="Content 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 MessageForm;
