"use client";
import { useEffect, useRef, useState } from "react";
import SpecificationForm from "../custom ui/specsForm";
import { Product } from "@prisma/client";
import axios from "axios";
import ToastMessage from "@/components/common/ToastMessage";
import { useRouter } from "next/navigation";
import Image from "next/image";

interface VariantFormProps {
  initialData?: ProductVariant | null;
}

const VariantForm = ({ initialData }: VariantFormProps) => {
  const [products, setProducts] = useState<Product[]>([]);
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [productId, setProductId] = useState("");
  const [name, setName] = useState("");
  const [onSell, setOnSell] = useState(false);
  const [regular_price, setRegularPrice] = useState("");
  const [purchase_cost, setPurchaseCost] = useState("");
  const [special_price, setSpecialPrice] = useState("");
  const [quantity, setQuantity] = useState("");
  const [wareHouseInfo, setWareHouseInfo] = useState("");
  const [specifications, setSpecifications] = useState<string | JSON>("");
  const [images, setImages] = useState<FileList | null>(null);
  const [previewImageUrls, setPreviewImageUrls] = useState<string[]>([]);
  const [previousImages, setPreviousImages] = useState<attachments[]>([]);
  const [deleteImages, setDeleteImages] = useState<string[]>([]);

  // Pagination states
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [limit] = useState(20);
  const [hasMore, setHasMore] = useState(true);
  const [loadingProducts, setLoadingProducts] = useState(false);

  const listRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (initialData) {
      setProductId(initialData.product_id);
      setName(initialData.name);
      setOnSell(initialData.on_sell);
      setRegularPrice(initialData.regular_price.toString());
      setPurchaseCost(initialData.purchase_cost.toString());
      setSpecialPrice(initialData.special_price.toString());
      setQuantity(initialData.quantity.toString());
      setWareHouseInfo(initialData.wareHouseInfo);
      setPreviousImages(initialData.variant_images ?? []);
      setSpecifications(initialData.specs);
    }
    setLoading(false);
  }, [initialData]);

  // Fetch products with pagination
  const fetchProducts = async (pageNumber: number) => {
    if (loadingProducts) return;
    setLoadingProducts(true);
    try {
      const response = await fetch(`/api/admin/products?page=${pageNumber}&limit=${limit}`);
      const data = await response.json();

      if (data.products) {
        setProducts((prev) => pageNumber === 1 ? data.products : [...prev, ...data.products]);
        setTotal(data.total || 0);
        setHasMore(data.products.length === limit);
      }
    } catch (err) {
      console.error("Failed to fetch products", err);
    } finally {
      setLoadingProducts(false);
    }
  };

  useEffect(() => {
    fetchProducts(page);
  }, [page]);

  // Scroll detection
  const handleScroll = () => {

    console.log("scrolling");

    if (!listRef.current || loadingProducts || !hasMore) return;
    const { scrollTop, scrollHeight, clientHeight } = listRef.current;
    if (scrollTop + clientHeight >= scrollHeight - 10) {
      setPage((prev) => prev + 1);
    }

    console.log(`PAGE = ${page}`)
  };

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const formData = new FormData();
    formData.append("productId", productId)
    formData.append("name", name)
    formData.append("onSell", onSell ? "true" : "false")
    formData.append("regular_price", regular_price)
    formData.append("purchase_cost", purchase_cost)
    formData.append("special_price", special_price)
    formData.append("quantity", quantity)
    formData.append("wareHouseInfo", wareHouseInfo)

    formData.append(
      "specifications",
      JSON.stringify(specifications || {})
    );
    if (deleteImages.length > 0) {
      formData.append("deleteImagesCount", deleteImages.length.toString())
      deleteImages.forEach((img, i) => formData.append(`deleteImages_${i}`, img))
    }

    if (images) {
      formData.append("imagesCount", images.length.toString())
      Array.from(images).forEach((file, i) => formData.append(`images_${i}`, file))
    }

    let response;
    if (initialData) {
      response = await axios.put(`/api/admin/variants/${initialData.id}`, formData)
    } else {
      response = await axios.post("/api/admin/variants", formData)
    }

    if (response.status == 200) {
      initialData
        ? ToastMessage("success", "Variant Updated Successfully")
        : ToastMessage("success", "Variant Created Successfully")
      router.push("/admin/variants");
    } else {
      ToastMessage("error", "Variant Creation Failed")
    }
  };

  const handleDeleteImages = (id: string) => {
    setDeleteImages((prev) => [...prev, id]);
    setPreviousImages((prev) => prev.filter((image) => image.id !== id));
  };

  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files) {
      const files = Array.from(event.target.files);
      const imageUrls = files.map((file) => URL.createObjectURL(file));
      setPreviewImageUrls(imageUrls);
      setImages(event.target.files);
    }
  };

  return (
    <div className="space-y-2 px-2 py-3">
      <h1 className="text-2xl pb-2 font-bold text-gray-900">
        {initialData ? "Edit Variant" : "Add New Variant"}
      </h1>
      <form
        // onSubmit={onSubmit}
        className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"
      >
        {/* Product Select with Infinite Scroll */}
        <div className="col-span-4">
          <label
            htmlFor="product"
            className="block text-md font-medium text-gray-900"
          >
            Product
          </label>
          <div
            ref={listRef}
            className="mt-2 w-full h-40 overflow-y-auto border rounded-md bg-white px-3 py-1.5 text-base text-gray-900 sm:text-sm"
          >
            <select
              id="product"
              onScroll={handleScroll}

              value={productId}
              onChange={(e) => setProductId(e.target.value)}
              className="w-full"
              size={8} 
              required
            >
              <option value="">Select Product</option>
              {products.map((product) => (
                <option key={product.id} value={product.id}>
                  {product.product_name}
                </option>
              ))}
              {loadingProducts && <option disabled>Loading more...</option>}
            </select>
          </div>
        </div>

        {/* On Sell */}
        <div className="col-span-2">
          <label htmlFor="onSell" className="block text-md font-medium text-gray-900">
            On Sell
          </label>
          <div className="mt-2 grid grid-cols-1">
            <select
              value={onSell ? "true" : "false"}
              onChange={(e) => setOnSell(e.target.value === "true")}
              required
              className="w-full border rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 sm:text-sm"
            >
              <option value="true">True</option>
              <option value="false">False</option>
            </select>
          </div>
        </div>

        {/* Variant Name */}
        <div className="col-span-4 mt-4">
          <label htmlFor="name" className="block text-sm font-medium text-gray-900">
            Variant Name
          </label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
            className="mt-2 block w-full rounded-md border bg-white px-3 py-1.5 text-base text-gray-900 sm:text-sm"
          />
        </div>

        {/* Quantity */}
        <div className="col-span-2 mt-4">
          <label htmlFor="quantity" className="block text-sm font-medium text-gray-900">
            Quantity
          </label>
          <input
            type="number"
            value={quantity}
            onChange={(e) => setQuantity(e.target.value)}
            required
            className="mt-2 block w-full rounded-md border bg-white px-3 py-1.5 text-base text-gray-900 sm:text-sm"
          />
        </div>

        {/* Prices */}
        <div className="col-span-2 mt-4">
          <label htmlFor="regular_price" className="block text-sm font-medium text-gray-900">
            Regular Price
          </label>
          <input
            type="number"
            value={regular_price}
            onChange={(e) => setRegularPrice(e.target.value)}
            required
            className="mt-2 block w-full rounded-md border bg-white px-3 py-1.5 text-base text-gray-900 sm:text-sm"
          />
        </div>

        <div className="col-span-2 mt-4">
          <label htmlFor="purchase_cost" className="block text-sm font-medium text-gray-900">
            Purchase Cost
          </label>
          <input
            type="number"
            value={purchase_cost}
            onChange={(e) => setPurchaseCost(e.target.value)}
            required
            className="mt-2 block w-full rounded-md border bg-white px-3 py-1.5 text-base text-gray-900 sm:text-sm"
          />
        </div>

        <div className="col-span-2 mt-4">
          <label htmlFor="special_price" className="block text-sm font-medium text-gray-900">
            Special Price
          </label>
          <input
            type="number"
            value={special_price}
            onChange={(e) => setSpecialPrice(e.target.value)}
            required
            className="mt-2 block w-full rounded-md border bg-white px-3 py-1.5 text-base text-gray-900 sm:text-sm"
          />
        </div>

        {/* Image Upload */}
        <div className="col-span-full">
          <label className="block text-sm font-medium text-gray-900">
            Image
          </label>
          <div className="mt-2 flex justify-center rounded-lg border border-dashed px-6 py-10">
            <div className="text-center">
              <input
                id="file-upload"
                name="images"
                type="file"
                className="hidden"
                multiple
                onChange={handleImageChange}
              />
              <label
                htmlFor="file-upload"
                className="cursor-pointer rounded-md bg-white font-semibold text-primary hover:text-secondary"
              >
                Upload a file
              </label>
            </div>
          </div>
        </div>

        {/* Previous Images */}
        <div className="col-span-full">
          {previousImages &&
            previousImages.map((image, index) => (
              <div className="relative inline-block mr-2" key={index}>
                <button
                  type="button"
                  className="absolute top-0 right-0 bg-red-500 text-white rounded p-1"
                  onClick={() => handleDeleteImages(image.id)}
                >
                  X
                </button>
                <Image
                  width={100}
                  height={100}
                  src={image.file_url}
                  alt={`Preview ${index}`}
                  className="w-20 h-20 object-cover"
                />
              </div>
            ))}
        </div>

        {/* Preview Images */}
        {previewImageUrls.length > 0 && (
          <div className="flex gap-2 my-2 col-span-full">
            {previewImageUrls.map((url, index) => (
              <Image
                key={index}
                width={100}
                height={100}
                src={url}
                alt={`Preview ${index}`}
                className="w-20 h-20 object-cover"
              />
            ))}
          </div>
        )}

        {/* Warehouse Info */}
        <div className="col-span-full">
          <label className="block text-sm font-medium text-gray-900">
            Warehouse Information
          </label>
          <textarea
            value={wareHouseInfo}
            onChange={(e) => setWareHouseInfo(e.target.value)}
            className="w-full p-2 border rounded"
          />
        </div>

        {/* Specifications */}
        <div className="col-span-full">
          <SpecificationForm
            content={specifications}
            onUpdate={(newContent: string | JSON) =>
              setSpecifications(newContent)
            }
          />
        </div>

        {/* Buttons */}
        <div className="my-5 col-span-full">
          <button
            onClick={onSubmit}
            className="bg-primary hover:bg-secondary text-white font-semibold py-2 px-6 mr-5 rounded-lg shadow-md transition duration-300 ease-in-out"
          >
            Submit
          </button>


          <button
            type="button"
            className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-6 rounded-lg"
          >
            Discard
          </button>
        </div>
      </form>
    </div>
  );
};

export default VariantForm;