"use client";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { UploadFile } from "@/lib/types/models/upload";
import UploadSection from "./upload-section";
import ProofingOptions from "../proofing-options";
import orderService from "@/lib/services/order";
import { toast } from "sonner";

export default function Page({
  produtData,
  queryObject
}: {
  produtData: Record<string, string>;
  queryObject: Record<string, string | string[] | undefined>;
}) {
  const router = useRouter();
  const [sideFiles, setSideFiles] = useState<UploadFile[]>([]);
  const [printedSides, setPrintedSides] = useState<number>(1);
  const [isPdfProof, setIsPdfProof] = useState<boolean>(false);
  const [cartPrice, setCartPrice] = useState<number | string>("");

  useEffect(() => {
    const printingVal = produtData?.["printing"] || produtData?.["Printing"] || "";
    let sides = 1;
    switch (printingVal) {
      case "4/0 (4 color front)":
      case "4/1":
      case "5/0 (4/0 with Foil on Front)":
      case "4/0":
      case "Single Sided":
        sides = 1;
        break;
      case "4/4 (4 color both sides)":
      case "4/4":
      case "Double Sided":
        sides = 2;
        break;
      default:
        sides = 1;
    }

    if (queryObject?.cartId) {
      const fetchCartDetails = async () => {
        try {
          const cartDetails = await orderService.getOrders(queryObject.cartId as string);
          console.log(cartDetails, "cartDetails");
          if (cartDetails?.success && cartDetails.data) {
            if (typeof cartDetails.data.isProofing === "boolean") {
              setIsPdfProof(cartDetails.data.isProofing);
            }
            if (cartDetails.data.price) {
              setCartPrice(cartDetails.data.price);
            }
            const existingSides = cartDetails.data.artworkFiles || [];
            if (existingSides.length > 0) {
              const totalSides = Math.max(sides, existingSides.length);
              setPrintedSides(totalSides);
              setSideFiles(
                Array.from({ length: totalSides }, (_, i) => {
                  const side = existingSides[i];
                  if (side && (side.image || side.original)) {
                    return {
                      ...side,
                      image: side.image || null,
                      original: side.original || side.image,
                      page: side.page || (i + 1).toString(),
                      name: side.image ? side.image.split("/").pop() : `Side ${i + 1}`,
                    };
                  }
                  return {} as UploadFile;
                })
              );
              return;
            }
          }
        } catch (error) {
          console.error("Error fetching cart details:", error);
        }
        setPrintedSides(sides);
        setSideFiles((prev) =>
          Array.from({ length: sides }, (_, i) => prev[i] ?? ({} as UploadFile))
        );
      };

      fetchCartDetails();
    } else {
      setPrintedSides(sides);
      setSideFiles((prev) =>
        Array.from({ length: sides }, (_, i) => prev[i] ?? ({} as UploadFile))
      );
    }
  }, [queryObject, produtData]);

  const submitDesign = async () => {
    const missing = sideFiles
      .map((files, i) =>
        files?.image
          ? null
          : `${printedSides <= 2 && i + 1 === 1
            ? "Front Side"
            : printedSides === 2 && i + 1 === 2
              ? "Back Side"
              : `${i + 1} Page`
          }  Artwork`
      )
      .filter(Boolean);
    if (missing.length) {
      toast.info(`Please upload artwork for: ${missing.join(", ")}`);
      return;
    }

    let body: Record<string, unknown> = {};
    body = {
      productId: queryObject.productId,
      quantity: queryObject.quantity,
      price: cartPrice || produtData.price,
      artworkFiles: sideFiles,
      uploadDesign: true,
      isProofing: isPdfProof
    };

    if (queryObject.cartId) {
      body.documentId = queryObject?.cartId as string;
    }

    const queryParamsData: Record<string, unknown> = {};
    for (const param of Object.keys(queryObject)) {
      queryParamsData[param] = queryObject[param];
    }

    try {
      const response = queryObject.cartId
        ? await orderService.updateOrder(body)
        : await orderService.createOrder(body);

      if (response?.success) {
        queryParamsData.cartId = response?.data?._id || queryObject.cartId;

        const stringifiedQuery = Object.fromEntries(
          Object.entries(queryParamsData).map(([key, value]) => [
            key,
            value === null || value === undefined ? "" : String(value)
          ])
        );
        const queryParams = new URLSearchParams(stringifiedQuery).toString();
        router.push(`/additional-options?${queryParams}`);
      } else {
        toast.error(response?.message || "Failed to save design");
      }
    } catch (error) {
      console.error("Error submitting design:", error);
      toast.error("An error occurred while submitting your design");
    }
  };

  const removeFile = (index: number) => {
    setSideFiles((prev) => {
      const updated = [...prev];
      updated[index] = {} as UploadFile;
      return updated;
    });
  };

  return (
    <>
      <div className="w-full md:flex-1">
        <div className="w-full max-w-5xl mx-auto">
          {Array.from({ length: printedSides }).map((_, idx) => (
            <UploadSection
              key={idx}
              title={`${printedSides <= 2 && idx + 1 === 1
                ? "Front Side"
                : printedSides === 2 && idx + 1 === 2
                  ? "Back Side"
                  : `${idx + 1} Page`
                }  Artwork`}
              selectedFile={sideFiles[idx]}
              selectedIndex={idx}
              removeSelectedFile={(index: number) => removeFile(index)}
              setSelectedFiles={(file: UploadFile) => {
                setSideFiles((prev) => {
                  const updated = [...prev];
                  updated[idx] = { ...file, page: (idx + 1).toString() };
                  return updated;
                });
              }}
            />
          ))}
        </div>
      </div>
      <div className="w-full max-w-md mx-auto md:mx-0 md:w-100 md:flex-shrink-0">
        <ProofingOptions
          isPdfProof={isPdfProof}
          setIsPdfProof={setIsPdfProof}
          submitDesign={submitDesign}
        />
      </div>
    </>
  );
}