"use client";

import { API_ENDPOINTS } from "@/api/apiEndpoints";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import Image from "next/image";
import { useEffect, useState } from "react";
import toast, { Toaster } from "react-hot-toast";
import ReactSelect from "react-select";

export default function AdminProductAdd() {
  const initialData = {
    product_name: "",
    org_price: "",
    disc_price: "",
    variant_type: "",
  };
  const baseurl = process.env.NEXT_PUBLIC_BASE_URL;

  const [userVariant, setUserVariant] = useState("");
  const [variantData, setVariantData] = useState([]);
  const [categoryList, setCategoryList] = useState([]);
  const [inputData, setInputData] = useState(initialData);
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [selectedImage, setSelectedImage] = useState(null);
  const [selectedVariant, setSelectedVariant] = useState(null);
  const [uploadedImages, setUploadedImages] = useState([]);
  const [variantImg, setVariantImg] = useState(null);
  const [imgPopUp, setImgPopUp] = useState(false);

  useEffect(() => {
    (async () => {
      const result = await fetch(baseurl + API_ENDPOINTS.category_list, {
        cache: 'no-store'
      });
      const categories = await result.json();

      setCategoryList(
        categories.list.map((each) => ({
          label: each.category,
          value: each.id,
        }))
      );
    })();
  }, []);

  const handleInput = (e) => {
    setInputData((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }));
  };

  const handleAddVariant = () => {
    if (!userVariant.length) return;
    setVariantData((prev) => [...prev, userVariant]);
    setUserVariant("");
  };

  const handleVariant = (variant) => {
    setSelectedVariant(variant);
    setImgPopUp(true);
  };

  const handleUpload = async (e) => {
    e.preventDefault();

    const formData = new FormData();
    Array.from(selectedImage)?.forEach((each) => {
      formData.append("image", each);
    });

    const response = await fetch(baseurl + API_ENDPOINTS.upload_product_image, {
      method: "POST",
      body: formData,
    });

    const result = await response.json();
    if(result.flag === 'SUCCESS'){
      toast.success(result.msg);
    }
    setUploadedImages(result.images);
  };

  const handleVariantImage = (variant, img) => {
    setVariantImg((prev) => ({
      ...prev,
      [variant]: img,
    }));
    setImgPopUp(false);
  };

  const handleSubmit = async () => {
    const errors = ["", null, undefined]

    if(errors.includes(inputData.product_name)){
      return toast.error('Product Name Required')
    } else if(errors.includes(inputData.org_price)){
      return toast.error('Original Price Required')
    } else if(!uploadedImages.length){
      return toast.error('Product Image Required')
    }

    const payload = {
      product_name: inputData.product_name,
      org_price: inputData.org_price,
      disc_price: inputData.disc_price,
      variant_type: inputData.variant_type,
      variant: variantData.length ? variantData.join(",") : null,
      category: selectedCategory ? selectedCategory?.value : null,
      img: uploadedImages?.join("|") || null,
      variant_img: variantImg ? JSON.stringify(variantImg) : null,
    };

    const output = await fetch(baseurl + API_ENDPOINTS.create_product, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });

    const result = await output.json();

    if (result.flag === "SUCCESS") {
      toast.success(result.msg);

      setInputData(initialData);
      setVariantData([]);
      setSelectedCategory(null);
    } else {
      toast.error(result.msg);
    }
  };

  return (
    <>
      <Card className="md:w-1/2 mx-3 md:mx-auto mt-5">
        <CardContent className="p-4">
          <div className="font-semibold text-center text-xl">
            Add New Product
          </div>
          <Toaster />

          <form onSubmit={handleUpload} encType="multipart/form-data">
            <Label htmlFor="product_name">Product Images</Label>
            <div className="grid grid-cols-3 gap-2 my-2">
              <Input
                type="file"
                name="file"
                className="col-span-2"
                multiple
                onChange={(e) => setSelectedImage(e.target.files)}
              />
              <Button type="submit">Upload</Button>
            </div>
          </form>

          <div className="grid gap-3">
            <Label htmlFor="product_name">Product Name</Label>
            <Input
              id="product_name"
              placeholder="Type product name"
              name="product_name"
              value={inputData.product_name}
              onChange={handleInput}
            />

            <Label htmlFor="product_price">Product Original Price</Label>
            <Input
              id="product_price"
              placeholder="Type product price"
              name="org_price"
              value={inputData.org_price}
              onChange={handleInput}
            />

            <Label htmlFor="product_price">Product Discounted Price</Label>
            <Input
              id="product_price"
              placeholder="Type product price"
              name="disc_price"
              value={inputData.disc_price}
              onChange={handleInput}
            />

            <Label htmlFor="variant_type">Variant Type</Label>
            <Input
              id="variant_type"
              placeholder="Type variant type"
              name="variant_type"
              value={inputData.variant_type}
              onChange={handleInput}
            />

            <Label htmlFor="product_variant">Variant Detail</Label>
            <div className="grid grid-cols-3 gap-2">
              <Input
                className="col-span-2"
                id="product_variant"
                placeholder="Type variant type"
                value={userVariant}
                onChange={(e) => setUserVariant(e.target.value)}
              />
              <Button onClick={handleAddVariant}>Add Variant</Button>
            </div>
            {variantData.length ? (
              <div className="grid gap-2">
                {variantData.map((variant, index) => (
                  <div key={index} className="grid grid-cols-2 gap-2">
                    <div>{variant}</div>
                    <Button onClick={() => handleVariant(variant)}>
                      Select Image
                    </Button>
                  </div>
                ))}
              </div>
            ) : (
              ""
            )}

            <Label htmlFor="product_variant">Product Category</Label>
            <ReactSelect
              className="text-sm"
              options={categoryList}
              value={selectedCategory}
              onChange={(selected) => setSelectedCategory(selected)}
            />

            <Button type="button" onClick={handleSubmit}>
              Submit
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Image Pop Up */}
      <Dialog open={imgPopUp} onOpenChange={setImgPopUp}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              Select {selectedVariant?.toUpperCase()} Variant Image
            </DialogTitle>
            <DialogDescription asChild>
              <div className="flex gap-2">
                {uploadedImages?.map((each, index) => (
                  <Label key={index}>
                    <Input
                      type="radio"
                      name="variant_img"
                      onChange={() => handleVariantImage(selectedVariant, each)}
                    />
                    <Image
                      className="h-24 w-24"
                      src={`/uploads/${each}`}
                      width={96}
                      height={96}
                    />
                  </Label>
                ))}
              </div>
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </>
  );
}