"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect, useCallback } from 'react';
import { toast } from 'sonner';
import { Input } from '../../../../../../../ui/src/components/input.mjs';
import { Button } from '../../../../../../../ui/src/components/button.mjs';
import { FormItem, FormControl, FormMessage } from '../../../../../../../ui/src/components/form.mjs';
import { Loader2, Trash2 } from 'lucide-react';
import AutoFormLabel from '../../../../../../../ui/src/components/auto-form/common/label.mjs';
import AutoFormTooltip from '../../../../../../../ui/src/components/auto-form/common/tooltip.mjs';

function CMSFileUpload({
  label,
  isRequired,
  fieldConfigItem,
  fieldProps,
  field,
  uploadImage
}) {
  const {
    showLabel: _showLabel,
    value: _value,
    ...safeFieldProps
  } = fieldProps;
  const showLabel = _showLabel === void 0 ? true : _showLabel;
  const [isUploading, setIsUploading] = useState(false);
  const [previewUrl, setPreviewUrl] = useState(
    field.value || null
  );
  useEffect(() => {
    const normalizedValue = field.value || null;
    if (normalizedValue !== previewUrl) {
      setPreviewUrl(normalizedValue);
    }
  }, [field.value, previewUrl]);
  const handleFileChange = useCallback(
    async (e) => {
      const file = e.target.files?.[0];
      if (!file) return;
      if (!file.type.startsWith("image/")) {
        toast.error("Please select an image file");
        return;
      }
      setIsUploading(true);
      try {
        const url = await uploadImage(file);
        setPreviewUrl(url);
        field.onChange(url);
      } catch (error) {
        console.error("Image upload failed:", error);
        toast.error("Failed to upload image");
      } finally {
        setIsUploading(false);
      }
    },
    [field, uploadImage]
  );
  const handleRemove = useCallback(() => {
    setPreviewUrl(null);
    field.onChange("");
  }, [field]);
  return /* @__PURE__ */ jsxs(FormItem, { children: [
    showLabel && /* @__PURE__ */ jsx(
      AutoFormLabel,
      {
        label: fieldConfigItem?.label || label,
        isRequired
      }
    ),
    !previewUrl && /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
      /* @__PURE__ */ jsx(
        Input,
        {
          type: "file",
          accept: "image/*",
          ...safeFieldProps,
          onChange: handleFileChange,
          disabled: isUploading,
          className: "cursor-pointer",
          "data-testid": "image-upload-input"
        }
      ),
      isUploading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) })
    ] }) }),
    previewUrl && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ jsx("div", { className: "relative h-20 w-20 overflow-hidden rounded-md border", children: /* @__PURE__ */ jsx(
        "img",
        {
          src: previewUrl,
          alt: "Preview",
          className: "h-full w-full object-cover",
          "data-testid": "image-preview"
        }
      ) }),
      /* @__PURE__ */ jsxs(
        Button,
        {
          type: "button",
          variant: "outline",
          size: "sm",
          onClick: handleRemove,
          className: "flex items-center gap-1",
          "data-testid": "remove-image-button",
          children: [
            /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
            "Remove"
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
    /* @__PURE__ */ jsx(FormMessage, {})
  ] });
}

export { CMSFileUpload };
