"use client";
import { FormButton } from "@/app/components/form/forms";
import { useSearchParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { getUserSessionId } from "@/utils/helper";
import { getApiClient } from "@/utils/apiClient";
import DialogModal from "@/app/components/common/DialogModal";
import Cookies from "js-cookie";
import { toast } from "react-toastify";

type ModalKey = string | null;

function SummaryRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex w-full flex-row justify-between gap-2 border-b-1 border-dashed bg-gray-100/50 px-5 py-3 text-xs capitalize transition-all duration-300 last:border-0 last:bg-gray-950/25 hover:bg-gray-100 md:text-sm">
      <span>{label}</span>
      <span className="font-medium">${value}</span>
    </div>
  );
}

export default function GuidanceOrderSummary() {
  const [openModal, setOpenModal] = useState<ModalKey>(null);
  const router = useRouter();
  const searchParams = useSearchParams();
  const externalId = searchParams.get("external");

  const [orderSummary, setOrderSummary] = useState<any>(null);
  const [inviteEmail, setInviteEmail] = useState("");
  const [customer_name, setCustomerName] = useState("");
  const [isInviting, setIsInviting] = useState(false);
  const [hasUserAllowToShare, setHasUserAllowToShare] = useState(false);

  const closeAllModals = () => setOpenModal(null);
  const openSpecificModal = (modalKey: ModalKey) => {
    closeAllModals();
    setTimeout(() => setOpenModal(modalKey), 50);
  };

  useEffect(() => {
    const fetchExternalWizardData = async () => {
      try {
        const apiData = await getApiClient(
          `co-creation/final/price?session_id=${getUserSessionId()}&external_id=${externalId}`,
        );

        if (apiData) {
          setOrderSummary(apiData);
        }

        console.log("Loaded external wizard data");
      } catch (error) {
        console.error("Failed to fetch wizard data:", error);
      }
    };

    fetchExternalWizardData();

    //find the cookie if user has allowed sharing in getUser 
   const user = Cookies.get("has_user_allow_to_share_vision_board");
  //// alert("user allow to share cookie:"+user);

      console.log("hasUserAllowToShare:", user);

      if(user === "true"){
        setHasUserAllowToShare(true);
      }else{
        setHasUserAllowToShare(false);
      }

  

  }, [externalId]);

  const handleInviteSubmit = async (e?: React.FormEvent) => {
    e?.preventDefault();
    if (!inviteEmail || !inviteEmail.includes("@")) {
      alert("Please enter a valid email address");
      return;
    }

    setIsInviting(true);
    try {
      const sessionId = getUserSessionId();
      const response = await fetch("/api/vision/invite-submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({
          email: inviteEmail,
          session_id: sessionId,
          customer_name,
          external_id: externalId,
        }),
      });

      if (response.ok) {
        toast.success("Vision board shared successfully!");
        setInviteEmail("");
        closeAllModals();
        router.push(`/dashboard/vision`);
      } else {
        throw new Error("Invitation failed");
      }
    } catch (error) {
      console.error("Failed to send invitation:", error);
      alert("Failed to send invitation. Please try again.");
    } finally {
      setIsInviting(false);
    }
  };

  return (
    <>
      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `}</style>

      <div className="mx-auto flex w-full flex-col items-center justify-center gap-10 align-middle md:w-[50%]">
        <div className="flex w-full flex-col items-center justify-center gap-2 text-center">
          <h1 className="med">Perfect!</h1>
          <h4 className="font-light">
            We have all the details required to bring your Morni to life.
          </h4>
        </div>
      </div>

      <div className="cc-vision-wrap pt-2">
        <div className="ccvision-scrollcontent">
          <div className="mx-auto flex w-full flex-col gap-4 md:w-[50%]">
            <div className="mx-auto flex w-full flex-col items-center justify-between gap-4 text-center text-sm font-light">
              <p>
                Please proceed to pay an initiation fee of{" "}
                <span className="font-medium text-blue-600">
                  ${orderSummary?.initation_price}
                </span>{" "}
                to begin the co-creation process. This fee will be used to
                procure raw materials and finalize your design.
              </p>
              <p>We will contact you shortly after the payment is processed.</p>
            </div>

            <div className="mx-auto flex w-full flex-col border-1 border-dashed border-gray-950/50 md:w-[75%]">
              {orderSummary?.type === "suits" ? (
                <>
                  <SummaryRow
                    label="base cost: Suit Jackets"
                    value={`${orderSummary?.pricing_calculation?.silhouette_outerwear || 0}`}
                  />
                  <SummaryRow
                    label="base cost: Bottom"
                    value={`${orderSummary?.pricing_calculation?.silhouette_bottom || 0}`}
                  />
                  {orderSummary?.pricing_calculation?.silhouette_vest > 0 && (
                    <SummaryRow
                      label="base cost: Vest"
                      value={`${orderSummary?.pricing_calculation?.silhouette_vest || 0}`}
                    />
                  )}
                </>
              ) : orderSummary?.type === "CoordSet" ? (
                <>
                  <SummaryRow
                    label={`base cost : ${orderSummary?.pricing_calculation?.outer_wear_category?.name || ""}`}
                    value={`${orderSummary?.pricing_calculation?.silhouette_outerwear || 0}`}
                  />
                  <SummaryRow
                    label={`base cost : ${orderSummary?.pricing_calculation?.bottom_category?.name || ""}`}
                    value={`${orderSummary?.pricing_calculation?.silhouette_bottom || 0}`}
                  />
                </>
              ) : (
                <SummaryRow
                  label={`base cost: ${orderSummary?.pricing_calculation?.category_name?.name || ""}`}
                  value={`${orderSummary?.pricing_calculation?.silhouette || 0}`}
                />
              )}

              <SummaryRow
                label="fabric (+)"
                value={`${orderSummary?.pricing_calculation?.fabric || 0}`}
              />
              <SummaryRow
                label="Craft (+)"
                value={`${orderSummary?.pricing_calculation?.technique || 0}`}
              />
              <SummaryRow
                label="Prominence (+)"
                value={`${orderSummary?.pricing_calculation?.prominence || 0}`}
              />
              <SummaryRow
                label="Total Estimated cost"
                value={`${orderSummary?.pricing_calculation?.total || 0}`}
              />
            </div>

            <div className="mx-auto flex flex-col py-4 md:w-[75%]">
              <p className="text-sm font-light">
                *** Your final cost may vary slightly{" "}
                <span className="font-medium text-blue-600">(±20%)</span>{" "}
                depending on design and materials.
              </p>
            </div>
          </div>
        </div>

        <div className="ccVisionBottomBtnWrap">
          <div className="flex w-full md:w-1/2">
            <FormButton
              id="btn_cc_proceed_pay"
              label="Add to cart"
              type="button"
              color="gray"
              hairline="blue"
              onClick={async () => {
                try {
                  const sessionId = getUserSessionId();
                  await getApiClient(
                    `cart/co-creation/save?session_id=${sessionId}`,
                    { method: "POST" },
                  );
                  router.push("/bag");
                } catch (error) {
                  console.error("Failed to add to cart:", error);
                }
              }}
            />
          </div>

          {hasUserAllowToShare && (
            <div>
              <button
                type="button"
                onClick={() => openSpecificModal("visionBoard_share")}
                className="btn-outline relative top-2"
              >
                <span className="md:hidden">Share</span>
                <span className="hidden md:flex">Share Vision</span>
              </button>
            </div>
          )}
        </div>

        <DialogModal
          name="visionBoard_share"
          isOpen={openModal === "visionBoard_share"}
          onClose={closeAllModals}
          size="md"
          title=""
          subtitle=""
          showFooter={false}
        >
          <form
            className="flex flex-col gap-4 p-4"
            onSubmit={handleInviteSubmit}
          >
            <div className="border px-6 py-4">
              <input
                id="invite-customer-name"
                type="text"
                required
                placeholder="Enter Customer Name"
                value={customer_name}
                onChange={(e) => setCustomerName(e.target.value)}
                className="flex w-full"
              />
            </div>

            <div className="border px-6 py-4">
              <input
                id="invite-email"
                type="email"
                required
                placeholder="Enter email"
                value={inviteEmail}
                onChange={(e) => setInviteEmail(e.target.value)}
                className="flex w-full"
              />
            </div>

            <button
              type="submit"
              className="btn-outline"
              aria-label="Share vision board"
              disabled={isInviting}
            >
              {isInviting ? "Sending..." : "Submit"}
            </button>
          </form>
        </DialogModal>
      </div>
    </>
  );
}