"use client";
import Image from "next/image";
import { FormButton } from "@/app/components/form/forms";
import { useSearchParams, useRouter } from "next/navigation";
import { useEffect, useState, useCallback } from "react";
import { getUserSessionId } from "@/utils/helper";
import { getApiClient } from "@/utils/apiClient";

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

export default function CCOrderSummary() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const externalId = searchParams.get("external");

  const [orderSummary, setOrderSummary] = useState<any>(null);

  const fetchExternalWizardData = useCallback(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);
    }
  }, [externalId]);

  useEffect(() => {
    fetchExternalWizardData();
  }, [fetchExternalWizardData]);

  return (
    <>
      <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">
        <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 className="font-light">
                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 className="font-light">
                We will contact you shortly after the payment is processed
              </p>
            </div>
            <div className="flex flex-col w-full mx-auto md:w-[75%] border-1 border-dashed border-gray-950/50">
            {orderSummary?.type === 'suits' ? (
                <>
                  <SummaryRow 
                    label="base cost: OuterWear" 
                    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}`} 
                    />
                  )}
                </>
              ) : (
                <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="flex flex-col py-4 mx-auto 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="ccBottomBtnWrap">
          <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>
      </div>
    </>
  );
}