"use client";
import Image from "next/image";
import React, {
  useState,
  ChangeEvent,
  forwardRef,
  useImperativeHandle,
  useRef,
  useEffect,
} from "react";
import TextArea from "@/app/components/form/TextArea";
import { FormInput } from "@/app/components/form/forms";
import {AWS_CDN_URL } from "@/utils/staticValues";
export interface ImageItem {
  id: number;
  file: File | null;
  preview: string;
  description?: string;
  artistName?: string;
  source?: string;
}

interface Props {
  limit: number;
  storageId: string;
  showDescription?: boolean;
  showArtistName?: boolean;
  showSource?: boolean;
  uploadMessage?: string | ((currentCount: number, limit: number) => string);
}

export interface DynamicImageUploaderRef {
  getImages: () => ImageItem[];
  validate: () => boolean;
  reset: () => void;
}

let idCounter = 0;

const getStorageKey = (id: string) => `ImageData_${id}`;
const getEmptyImageItem = (): ImageItem => ({
  id: idCounter++,
  file: null,
  preview: "",
  description: "",
  artistName: "",
  source: "",
});

const DynamicImageUploader = forwardRef<DynamicImageUploaderRef, Props>(
  (
    {
      limit,
      storageId,
      uploadMessage = "Click to upload image",
      showDescription = true,
      showArtistName = false,
      showSource = false,
    },
    ref,
  ) => {
    const storageKey = getStorageKey(storageId);
    const [images, setImages] = useState<ImageItem[]>(() => {
      if (typeof window !== "undefined") {
        const saved = localStorage.getItem(storageKey);
        if (saved) {
          try {
            const parsed = JSON.parse(saved);
            return parsed.map((img: ImageItem) => ({
              ...img,
              id: idCounter++,
              file: null,
            }));
          } catch {
            return [getEmptyImageItem()];
          }
        }
      }
      return [getEmptyImageItem()];
    });

    const replaceFileInputs = useRef<(HTMLInputElement | null)[]>([]);
    const remainingSlots = limit - images.length;
    const [currentMessage, setCurrentMessage] = useState("");
   

    useImperativeHandle(ref, () => ({
      getImages: () => images,
      validate: () => true,
      reset: () => handleReset(),
    }));

    const updateImage = (index: number, updates: Partial<ImageItem>) => {
      setImages((prev) =>
        prev.map((img, i) => (i === index ? { ...img, ...updates } : img)),
      );
    };

    const handleAddImage = () => {
      if (images.length < limit) {
        setImages((prev) => [...prev, getEmptyImageItem()]);
      }
    };

    const handleRemoveImage = (id: number, index: number) => {
      if (images.length > 1) {
        setImages((prev) => prev.filter((img) => img.id !== id));
      }
    };

    const handleReset = () => {
      setImages([getEmptyImageItem()]);
      localStorage.removeItem(storageKey);
    };

  //   const handleFileChange = (
  //     index: number,
  //     e: ChangeEvent<HTMLInputElement>,
  //   ) => {
  //     const file = e.target.files?.[0];
  //     if (!file) return;

  //      try {
  //   const s3Url = await uploadToS3(file);
  //   updateImage(index, { file, preview: s3Url }); // preview now contains the S3 URL
  // } catch (err) {
  //   console.error("Upload failed", err);
  //   // Optionally show error toast
  // }


  //     // const reader = new FileReader();
  //     // reader.onloadend = () => {
  //     //   updateImage(index, { file, preview: reader.result as string });
  //     // };
  //     // reader.readAsDataURL(file);
  //   };

      const uploadToServer = async (file: File): Promise<string> => {
      const formData = new FormData();
      formData.append("artwork", file); // 👈 key must match backend requirement

      const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/co-creation/artwork/imgUpload`, {
        method: "POST",
        body: formData,
      });

      if (!res.ok) {
        throw new Error("Upload failed");
      }

      const data = await res.json();
 

     //// return "false";
    return data.data.url; // 👈 adjust this if your API returns something else
      ///return data.url; // 👈 adjust this if your API returns something else
    };

  const handleFileChange = async (
      index: number,
      e: ChangeEvent<HTMLInputElement>,
    ) => {
      const file = e.target.files?.[0];
      if (!file) return;

     try {
        const uploadedUrl = await uploadToServer(file);
        updateImage(index, {
          file,
          preview: uploadedUrl, // use the server's image URL
        });
      } catch (err) {
        console.error("Upload failed", err);
        // Optionally show error toast
      }
};

    const triggerReplace = (index: number) => {
      replaceFileInputs.current[index]?.click();
    };

    useEffect(() => {
      const timeout = setTimeout(() => {
        localStorage.setItem(
          storageKey,
          JSON.stringify(images.map(({ file, ...rest }) => rest)),
        );
      }, 300);
      return () => clearTimeout(timeout);
    }, [images, storageKey]);

    useEffect(() => {
      if (images.length === 0) {
        localStorage.removeItem(storageKey);
      }
    }, [images, storageKey]);

    useEffect(() => {
      if (typeof uploadMessage === "function") {
        setCurrentMessage(uploadMessage(images.length, limit));
      } else {
        setCurrentMessage(uploadMessage || "Click to upload image");
      }
    }, [images.length, uploadMessage, limit]);

    return (
      <div className="flex w-full flex-col gap-2">
        {images.map((img, index) => {
          const inputId = `file-upload-${img.id}`;
          return (
            <div
              key={img.id}
              className={`flex flex-col gap-1 border-1 p-1 ${
                img.preview ? "" : "border-dashed border-gray-950/50"
              }`}
            >
              <div
                className={`grid w-full items-start gap-2 p-2 transition-all duration-300 ${
                  img.preview
                    ? "bg-gray-100 md:grid-cols-5"
                    : "mob-noise bg-gray-950/10 md:grid-cols-1"
                }`}
              >
                <div className="col-span-1 flex flex-col items-center justify-center">
                  {!img.preview ? (
                    <>
                      <label
                        htmlFor={inputId}
                        className="flex h-full w-full cursor-pointer flex-col items-center justify-center py-2 text-sm"
                      >
                        <input
                          id={inputId}
                          type="file"
                          accept="image/*"
                          onChange={(e) => handleFileChange(index, e)}
                          className="hidden"
                        />
                        <i
                          className="icon-[stash--plus-light]"
                          style={{ width: 48, height: 48 }}
                        />
                        <span>{currentMessage}</span>
                      </label>
                      {index !== 0 && (
                        <div className="flex justify-end">
                          <button
                            type="button"
                            onClick={() => handleRemoveImage(img.id, index)}
                            className="btn-link"
                          >
                            Remove
                          </button>
                        </div>
                      )}
                    </>
                  ) : (
                    <>
                      <div className="border-1">
                        <Image
                          src={`${AWS_CDN_URL}/${img.preview}`}
                          alt={`preview-${index}`}
                          width={120}
                          height={120}
                          className="img-responsive"
                        />
                      </div>
                      <button
                        type="button"
                        className="mt-2 text-center text-xs"
                        onClick={() => triggerReplace(index)}
                        aria-label={`Replace image ${index + 1}`}
                      >
                        Replace Image
                      </button>
                      <input
                        type="file"
                        accept="image/*"
                        onChange={(e) => handleFileChange(index, e)}
                        className="hidden"
                        ref={(el) => {
                          replaceFileInputs.current[index] = el;
                        }}
                      />
                    </>
                  )}
                </div>

                {img.preview && (
                  <div className="col-span-1 flex flex-col gap-2 md:col-span-4">
                    {showDescription && (
                      <TextArea
                        label=""
                        name={`image_desc_${img.id}`}
                        maxLength={220}
                        placeholder={`Describe image ${index + 1}`}
                        showLimitMessage
                        value={img.description}
                        onChange={(e) =>
                          updateImage(index, { description: e.target.value })
                        }
                      />
                    )}
                    {showArtistName && (
                      <FormInput
                        type="text"
                        id={`artist_name_${img.id}`}
                        label="Artist Name"
                        value={img.artistName}
                        onChange={(e) =>
                          updateImage(index, { artistName: e.target.value })
                        }
                      />
                    )}
                    {showSource && (
                      <div className="pb-4">
                        <FormInput
                          type="text"
                          id={`source_input_${img.id}`}
                          label="Source"
                          value={img.source}
                          onChange={(e) =>
                            updateImage(index, { source: e.target.value })
                          }
                        />
                      </div>
                    )}
                    {index !== 0 && (
                      <div className="flex justify-center pb-2">
                        <button
                          type="button"
                          onClick={() => handleRemoveImage(img.id, index)}
                          className="btn-link"
                        >
                          Remove
                        </button>
                      </div>
                    )}
                  </div>
                )}
              </div>
            </div>
          );
        })}

        {images.length < limit && (
          <div className="flex w-full items-center justify-center">
            <button type="button" onClick={handleAddImage} className="btn-link">
              Add More Images
            </button>
          </div>
        )}
      </div>
    );
  },
);

DynamicImageUploader.displayName = "DynamicImageUploader";
export default DynamicImageUploader;