import { useEffect, useState, useRef } from "react"; // ✅ useRef ইমপোর্ট করুন
// ... বাকি কোড
 
export default function CreatePage() {
  // ... অন্যান্য স্টেট
  const [isFetching, setIsFetching] = useState(false);
  const abortControllerRef = useRef(null); // ✅ AbortController ট্র্যাক করার জন্য ref
 
  // ... বাকি কোড
}

import { useEffect, useState, useRef } from "react";
import { useImages } from "../../context/ImagesContext";
import getRandomNumber from "../../utils/getRandomNumber";
import AdvancedOptions from "./AdvancedOptions";
import DisplayImages from "./DiplayImages";
import InputPrompt from "./InputPrompt";
import WelcomeMessage from "./WelcomeMessage";
 
export default function CreatePage() {
  const [apiParameters, setApiParameters] = useState({
    promptText: "",
    model: "flux",
    height: "",
    width: "",
  });
  const [models, setModels] = useState([]);
  const [message, setMessage] = useState("");
  const { images, setImages } = useImages("");
  const [isFetching, setIsFetching] = useState(false);
  const abortControllerRef = useRef(null); // ✅ AbortController ট্র্যাক করার জন্য ref
 
  // ... মডেল ফেচ করার useEffect (অপরিবর্তিত)
 
  // ✅ ফেচ বাতিল করার জন্য ফাংশন
  function handleCancel() {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      setIsFetching(false);
      console.log("Fetch requests cancelled by the user.");
    }
  }
 
  async function handleSubmit() {
    if (isFetching) {
      return;
    }
 
    if (apiParameters?.model === "gptimage") {
      setMessage(
        `This selected Model ${apiParameters?.model} is for Paid User Only`
      );
    } else {
      setIsFetching(true);
      abortControllerRef.current = new AbortController(); // ✅ প্রতিটি সাবমিটে নতুন কন্ট্রোলার
 
      console.log("fetching start");
      setImages(() =>
        Array(9)
          .fill(null)
          .map(() => ({
            src: "",
            seed: 0,
            loading: "Generating...",
            error: "",
          }))
      );
 
      for (let i = 0; i < 9; i++) {
        const seed = getRandomNumber();
        const url = `https://image.pollinations.ai/prompt/${apiParameters?.promptText}?width=${apiParameters?.width}&height=${apiParameters?.height}&seed=${seed}&model=${apiParameters?.model}`;
 
        try {
          const response = await fetch(url, {
            signal: abortControllerRef.current.signal, // ✅ সিগন্যাল পাস করা
          });
 
          if (!response.ok) {
            // ... এরর হ্যান্ডলিং (অপরিবর্তিত)
          }
 
          const data = await response.blob();
          const imageURL = URL.createObjectURL(data);
 
          setImages((previous) => {
            const newImages = [...previous];
            newImages[i] = { src: imageURL, seed, loading: "", error: "" };
            return newImages;
          });
        } catch (err) {
          // ✅ বাতিল করা হলে নির্দিষ্ট পদক্ষেপ
          if (err.name === "AbortError") {
            setImages((previous) => {
              const newImages = [...previous];
              // যেসব ছবি লোড হচ্ছিল, সেগুলোকে বাতিল হিসেবে দেখানো
              for (let j = i; j < 9; j++) {
                if (newImages[j].loading) {
                  newImages[j] = {
                    src: "",
                    seed: 0,
                    loading: "",
                    error: "অনুরোধ বাতিল করা হয়েছে",
                  };
                }
              }
              return newImages;
            });
            break; // ✅ বাতিল হলে লুপ থেকে বেরিয়ে আসা
          } else {
            // ... অন্যান্য এরর হ্যান্ডলিং (অপরিবর্তিত)
          }
        } finally {
          if (i === 8) {
            setIsFetching(false);
          }
        }
      }
    }
  }
 
  return (
    <main className="relative z-10">
      <WelcomeMessage message=" Let's create a masterpiece, Alvian!" />
 
      <InputPrompt
        onSubmitted={handleSubmit}
        apiParameters={apiParameters}
        setApiParameters={setApiParameters}
      />
 
      {/* ✅ ফেচিং চলাকালীন বাতিল বাটন দেখানো */}
      {isFetching && (
        <button
          onClick={handleCancel}
          className="mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
        >
          বাতিল করুন
        </button>
      )}
 
      {message && <p className="text-red-500">{message}</p>}
      <AdvancedOptions
        models={models}
        setApiParameters={setApiParameters}
        apiParameters={apiParameters}
      />
      <DisplayImages />
    </main>
  );
}

import { useRef, useState } from "react";
import getRandomNumber from "./getRandomNumber";
 
export default function ImageFetcher() {
  const [images, setImages] = useState([]);
  const [isFetching, setIsFetching] = useState(false);
  const controllersRef = useRef([]);
  const isCancelledRef = useRef(false);
 
  const handleSubmit = async () => {
    // Reset cancel state and abort old requests
    isCancelledRef.current = false;
    controllersRef.current.forEach((controller) => controller.abort());
    controllersRef.current = [];
 
    setIsFetching(true);
    setImages(Array(9).fill({ loading: true }));
 
    for (let i = 0; i < 9; i++) {
      if (isCancelledRef.current) {
        console.log("User cancelled, stopping remaining requests");
        break;
      }
 
      const seed = getRandomNumber();
      const controller = new AbortController();
      controllersRef.current.push(controller);
 
      const url = `https://image.pollinations.ai/prompt/football?width=256&height=256&seed=${seed}&model=flux`;
 
      try {
        const response = await fetch(url, {
          signal: controller.signal,
        });
 
        if (!response.ok) throw new Error("Fetch failed");
 
        const blob = await response.blob();
        const imageUrl = URL.createObjectURL(blob);
 
        setImages((prev) => {
          const copy = [...prev];
          copy[i] = { src: imageUrl, loading: false };
          return copy;
        });
      } catch (err) {
        setImages((prev) => {
          const copy = [...prev];
          copy[i] = { error: err.message, loading: false };
          return copy;
        });
      }
    }
 
    setIsFetching(false);
  };
 
  const handleCancel = () => {
    console.log("Cancelling...");
    isCancelledRef.current = true;
    controllersRef.current.forEach((controller) => controller.abort());
    controllersRef.current = [];
    setIsFetching(false);
  };
 
  return (
    <div className="p-4">
      <div className="space-x-4 mb-4">
        <button
          onClick={handleSubmit}
          disabled={isFetching}
          className="bg-blue-500 text-white px-4 py-2 rounded"
        >
          {isFetching ? "Generating..." : "Generate Images"}
        </button>
 
        {isFetching && (
          <button
            onClick={handleCancel}
            className="bg-red-500 text-white px-4 py-2 rounded"
          >
            Cancel
          </button>
        )}
      </div>
 
      <div className="grid grid-cols-3 gap-4">
        {images.map((img, idx) => (
          <div
            key={idx}
            className="h-40 w-40 border flex items-center justify-center text-xs text-gray-500"
          >
            {img.loading ? (
              "Loading..."
            ) : img.src ? (
              <img src={img.src} className="object-cover h-full w-full" />
            ) : (
              img.error || "Error"
            )}
          </div>
        ))}
      </div>
    </div>
  );
}