import { TaleBorderFul } from "@components/TaleBorderFul";
import TaleButton from "@components/TaleButton";
import { TaleLoadingFallback } from "@components/TaleLoadingFallback";
import { TaleModal } from "@components/TaleModal";
import { TaleRadio } from "@components/TaleRadio";
import { TaleText } from "@components/TaleText";
import { Suspense, useState, useEffect, useMemo, useCallback } from "react";
import { lazily } from "react-lazily";
import { CriteriasListing } from "./TargetAudience/CriteriasListing";
import { billingService } from "@/api/billing";
import { useQuery } from "@tanstack/react-query";
import {
    formatPricePerResponse,
    formatTotalPrice,
    formatOptionPrice
} from "@/utils/currency";
import { useTranslation } from "@/hooks/useTranslation";

const { AddTargetingCriteria } = lazily(() =>
    import("./TargetAudience/AddTargetingCriteria")
);
const { OrderSummary } = lazily(() => import("./TargetAudience/OrderSummary"));

export const TargetAudience = ({
                                   targetingCriterias,
                                   setTargetingCriterias,
                                   targetedResponses,
                                   setTargetedResponses,
                                   questionsCount,
                                   onOrderConfirmed
                               }) => {
    const { t } = useTranslation();
    const [state, setState] = useState({
        showAddCriteria: false,
    });

    // Default responses options
    const responses = [50, 100, 150, 250, 500, 1000, 2000, 5000];

    // Fetch pricing info
    const { data: pricingInfo, isLoading: isLoadingPricing } = useQuery({
        queryKey: ["survey-pricing-info"],
        queryFn: async () => {
            const response = await billingService.getSurveyResponsePricing();
            return response;
        }
    });

    // Memoized formatted prices
    const formattedPricePerResponse = useMemo(() => {
        if (!pricingInfo?.pricePerResponse) return '';
        return formatPricePerResponse(pricingInfo.pricePerResponse);
    }, [pricingInfo]);

    const formattedTotalPrice = useMemo(() => {
        if (!pricingInfo?.pricePerResponse || !targetedResponses) return '';
        return formatTotalPrice(targetedResponses, pricingInfo.pricePerResponse);
    }, [pricingInfo, targetedResponses]);

    // Calculate recommended responses
    const getRecommendedResponses = useCallback(() => {
        if (!pricingInfo?.pricePerResponse) return 100;

        if (pricingInfo.pricePerResponse < 5) return 500;
        if (pricingInfo.pricePerResponse < 10) return 250;
        if (pricingInfo.pricePerResponse < 20) return 100;
        return 50;
    }, [pricingInfo]);

    // Initialize with recommended responses if not set
    useEffect(() => {
        if (targetedResponses === undefined || targetedResponses === null) {
            setTargetedResponses(getRecommendedResponses());
        }
    }, [targetedResponses, setTargetedResponses, getRecommendedResponses]);

    // Handle response selection
    const handleResponseSelect = useCallback((responseCount) => {
        setTargetedResponses(responseCount);
    }, [setTargetedResponses]);

    // Handle custom response input
    const handleCustomResponseChange = useCallback((e) => {
        const value = parseInt(e.target.value);
        setTargetedResponses(isNaN(value) ? 1 : Math.max(1, value));
    }, [setTargetedResponses]);

    // Check if low response count for warning
    const isLowResponseCount = useMemo(() => {
        return targetedResponses < 100;
    }, [targetedResponses]);

    // Format option price
    const getOptionPrice = useCallback((responseCount) => {
        if (!pricingInfo?.pricePerResponse) return '';
        return formatOptionPrice(responseCount, pricingInfo.pricePerResponse);
    }, [pricingInfo]);

    // Handle criteria addition
    const handleAddCriteria = useCallback(() => {
        setState(prev => ({ ...prev, showAddCriteria: true }));
    }, []);

    // Handle criteria validation from modal
    const handleCriteriaValidate = useCallback((newCriterias) => {
        setTargetingCriterias(newCriterias);
        setState(prev => ({ ...prev, showAddCriteria: false }));
    }, [setTargetingCriterias]);

    // Handle criteria removal
    const handleRemoveCriteria = useCallback((index) => {
        const newCriterias = [...targetingCriterias];
        newCriterias.splice(index, 1);
        setTargetingCriterias(newCriterias);
    }, [targetingCriterias, setTargetingCriterias]);

    return (
        <div className="flex gap-4 w-full">
            {/* ADD TARGETING CRITERIA MODAL */}
            {state.showAddCriteria && (
                <TaleModal className="flex items-end justify-end p-4">
                    <Suspense fallback={<TaleLoadingFallback />}>
                        <AddTargetingCriteria
                            onClose={() => setState(prev => ({ ...prev, showAddCriteria: false }))}
                            onValidate={handleCriteriaValidate}
                            criterias={targetingCriterias}
                        />
                    </Suspense>
                </TaleModal>
            )}

            {/* LEFT PART */}
            <div className="basis-10/12 flex flex-col gap-4">
                {/* NUMBER OF RESPONSES SECTION */}
                <div
                    className="w-full flex flex-col p-3 !pb-10 rounded-xl gap-3"
                    style={{
                        backgroundImage: "linear-gradient(to bottom, #F4F4F4, #EBEBEB)",
                    }}
                >
                    {/* HEADER */}
                    <div className="w-full flex justify-between items-center">
                        <div className="flex flex-col">
                            <span className="text-base font-semibold">
                                {t("surveyBuilder.targeting.howManyResponses")}
                            </span>
                            {isLoadingPricing ? (
                                <div className="text-sm text-gray-400 mt-1">{t("surveyBuilder.targeting.loadingPricing")}</div>
                            ) : formattedPricePerResponse ? (
                                <span className="text-sm text-gray-600 mt-1">
                                    {t("surveyBuilder.targeting.pricePerResponse", { price: formattedPricePerResponse })}
                                </span>
                            ) : null}
                        </div>
                        {isLowResponseCount && (
                            <TaleBorderFul
                                directContainerClassName="!p-2 !rounded-lg !bg-tale-business-light"
                                className={`text-sm font-semibold transition-all`}
                            >
                                <TaleText role="business">
                                    {t("surveyBuilder.targeting.marginOfError", { count: targetedResponses })}
                                </TaleText>
                            </TaleBorderFul>
                        )}
                    </div>

                    {/* Response options */}
                    <div className="flex gap-3 px-3 flex-wrap">
                        {responses.map((responseCount, i) => (
                            <TaleBorderFul
                                role="normal"
                                key={i}
                                tabIndex={0}
                                height="110px"
                                width="85px"
                                className={`!p-[3px] cursor-pointer transition-all hover:scale-105 ${
                                    targetedResponses === responseCount ? "" : "shadow-xl"
                                }`}
                                onClick={() => handleResponseSelect(responseCount)}
                                onKeyDown={(e) => e.key === 'Enter' && handleResponseSelect(responseCount)}
                                customBackground={
                                    targetedResponses === responseCount ? undefined : "bg-white"
                                }
                            >
                                <div
                                    className={`size-full flex flex-col gap-3 justify-center items-center rounded-lg ${
                                        targetedResponses === responseCount ? "bg-[#00C0FC] bg-opacity-10" : ""
                                    }`}
                                >
                                    <div className="text-center">
                                        <span className="font-semibold text-2xl">{responseCount}</span>
                                        <div className="text-xs text-gray-500 mt-1">
                                            {getOptionPrice(responseCount)}
                                        </div>
                                    </div>
                                    <TaleRadio
                                        checked={targetedResponses === responseCount}
                                        size={28}
                                        role="normal"
                                    />
                                </div>
                            </TaleBorderFul>
                        ))}
                    </div>

                    {/* Custom input for other amounts */}
                    <div className="mt-4 px-3">
                        <div className="flex items-center gap-3">
                            <span className="text-sm font-medium">{t("surveyBuilder.targeting.customAmountLabel")}</span>
                            <input
                                type="number"
                                min="1"
                                value={targetedResponses || ''}
                                onChange={handleCustomResponseChange}
                                className="px-3 py-2 border rounded-lg w-32 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                placeholder={t("surveyBuilder.targeting.customAmountPlaceholder")}
                            />
                            {formattedTotalPrice && (
                                <span className="text-sm text-gray-600 font-medium">
                                    {t("surveyBuilder.targeting.totalLabel", { total: formattedTotalPrice })}
                                </span>
                            )}
                        </div>
                    </div>
                </div>

                {/* TARGETING CRITERIA SECTION */}
                <div className="w-full flex flex-col p-3 !pb-10 rounded-xl gap-3 bg-[#F5F5F5]">
                    {/* HEADER */}
                    <div className="w-full flex justify-between items-center">
                        <div className="flex flex-col gap-2">
                            <span className="text-base font-semibold">
                                {t("surveyBuilder.targeting.whoToSurvey")}
                            </span>
                            <span className="text-base">
                                {t("surveyBuilder.targeting.addCriteriaHint")}
                            </span>
                        </div>
                        <TaleButton
                            directParentClassName={"!bg-[#F5F5F5]"}
                            role="normal"
                            variant="outlined"
                            onClick={handleAddCriteria}
                        >
                            {t("surveyBuilder.targeting.addCriteriaButton")}
                        </TaleButton>
                    </div>


                    {/* Criterias Listing Component */}
                    {targetingCriterias && targetingCriterias.length > 0 ? (
                        <CriteriasListing
                            criterias={targetingCriterias}
                            setCriterias={setTargetingCriterias}
                            onRemoveCriteria={handleRemoveCriteria}
                        />
                    ) : (
                        <div className="flex flex-col items-center justify-center py-10 text-gray-400">
                            <svg className="w-16 h-16 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                            </svg>
                            <p className="text-lg font-medium mb-2">{t("surveyBuilder.targeting.noCriteriaTitle")}</p>
                            <p className="text-sm">{t("surveyBuilder.targeting.noCriteriaHint")}</p>
                        </div>
                    )}

                </div>
            </div>

            {/* RIGHT PART - ORDER SUMMARY */}
            <div className="basis-3/12 flex">
                <Suspense fallback={<TaleLoadingFallback className="py-20" />}>
                    <OrderSummary
                        targetedResponses={targetedResponses}
                        questionsCount={questionsCount}
                        targetingCriterias={targetingCriterias}
                        pricePerResponse={pricingInfo?.pricePerResponse}
                        onOrderConfirmed={onOrderConfirmed} // Pass the callback

                    />
                </Suspense>
            </div>
        </div>
    );
};