import "./style.css";
import React, { Suspense, useMemo } from "react";
import { ClickAwayListener, IconButton } from "@mui/material";
import { lazily } from "react-lazily";
import { TaleLoadingFallback } from "@components/TaleLoadingFallback";
import { getYoutubeIdFromURL } from "@/utils/getYoutubeIdFromURL";
import { questionService } from "@/api/question";
import { useTranslation } from "@/hooks/useTranslation";

import {
    FiMoreVertical,
    FiEdit2,
    FiTrash2,
    FiImage,
    FiVideo,
    FiMusic,
    // FiChevronRight,
    // FiChevronLeft,
} from "react-icons/fi";

const { TaleMenuOptions } = lazily(() => import("@components/TaleOptionsMenu"));
const { SingleQuestionRadioView } = lazily(() =>
    import("@pages/survey/surveyId/questions/SectionsFormats/Radio")
);
const { SingleQuestionCheckboxView } = lazily(() =>
    import("@pages/survey/surveyId/questions/SectionsFormats/Checkbox")
);
const StarRanking = React.lazy(() => import("@components/Ranking/StarRanking"));
const ZeroToTenRanking = React.lazy(() =>
    import("@components/Ranking/ZeroToTenRanking")
);
const { WithLabels } = lazily(() => import("@components/Ranking/WithLabels"));
const { EmojiRanking } = lazily(() =>
    import("@components/Ranking/EmojiRanking")
);
const { TaleTextarea } = lazily(() => import("@components/TaleTextarea"));
const { TaleAudioPlayer } = lazily(() => import("@components/TaleAudioPlayer"));
const { EditSingleQuestion } = lazily(() =>
    import("@pages/survey/new/scratch/Step2/EditSingleQuestion")
);

export const SingleQuestion = ({
                                   totalSteps = 0,
                                   currentIndex = 0,
                                   showProgress = true,
                                   //showCompanyLogo = true,
                                   showOptions = false,
                                   questions = [],
                                   question,
                                   setQuestion,
                                   selfDelete,
                                   //company = {},
                                   state,
                                   setstate,
                                   language,
                                   onAutoNext,
                               }) => {
    const { t } = useTranslation(); // defaults to "fr"

    const isArabic = language?.toUpperCase() === "ARABIC";
    const arabicFont = isArabic ? "'Tajawal', sans-serif" : "inherit";

    const formats = useMemo(
        () => ({
            radio:
                question.format !== "radio" ? null : (
                    <SingleQuestionRadioView
                        question={question}
                        selected={state?.values?.radio}
                        setSelected={(id) => {
                            setstate({
                                ...state,
                                values: { ...(state?.values ?? {}), radio: id },
                            });
                            if (window.innerWidth < 768 && currentIndex < totalSteps - 1) setTimeout(() => onAutoNext?.(), 300);
                        }}
                        setQuestion={setQuestion}
                        surveyLanguage={language}
                    />
                ),
            checkbox:
                question.format !== "checkbox" ? null : (
                    <SingleQuestionCheckboxView
                        question={question}
                        selected={state?.values?.checkbox ?? []}
                        setSelected={(id) =>
                            setstate((p) => ({
                                ...p,
                                values: {
                                    ...p.values,
                                    checkbox: p.values.checkbox.includes(id)
                                        ? p.values.checkbox.filter((x) => x !== id)
                                        : [...p.values.checkbox, id],
                                },
                            }))
                        }
                        setQuestion={setQuestion}
                        surveyLanguage={language}
                    />
                ),
            comment:
                question.format !== "comment" ? null : (
                    <div className="flex items-center justify-center w-full">
                        <div className="w-full max-w-3xl">
                            <div className="relative group">
                                <TaleTextarea
                                    onChange={(e) =>
                                        setstate((p) => ({
                                            ...p,
                                            values: { ...p.values, comment: e.target.value },
                                        }))
                                    }
                                    value={state?.values?.comment ?? ""}
                                    className="w-full h-40 md:h-64"
                                    textareaClassName="!bg-white py-6 px-6 !resize-none rounded-2xl border-2 border-gray-200 focus:border-gradient-to-r focus:border-blue-500 focus:shadow-lg transition-all duration-300 shadow-sm hover:shadow-md group-hover:border-blue-400"
                                    placeholder={t("question.type_response_placeholder")}
                                />
                                <div className="absolute bottom-4 right-4 text-sm text-gray-400 flex items-center gap-1">
                                    <span className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                        {t("question.enter_hint")}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                ),
            star:
                question.format !== "star" ? null : (
                    <div className="flex items-center justify-center w-full">
                        <div className="w-full max-w-3xl">
                            <WithLabels
                                labelsParentClassName="px-4"
                                label={question.label}
                                className="mb-3"
                            >
                                <div className="bg-gradient-to-r from-amber-50 to-orange-50 rounded-2xl p-4 md:p-8 border border-amber-100 shadow-sm">
                                    <StarRanking
                                        size={84}
                                        onStarClick={(v) => {
                                            setstate((p) => ({
                                                ...p,
                                                values: { ...p.values, star: v },
                                            }));
                                            if (window.innerWidth < 768 && currentIndex < totalSteps - 1) setTimeout(() => onAutoNext?.(), 300);
                                        }}
                                        value={state?.values?.star}
                                        className="gap-8"
                                        starClassName="transition-all duration-300 hover:scale-125 hover:drop-shadow-lg"
                                    />
                                </div>
                            </WithLabels>
                            <div className="flex justify-between text-sm text-gray-500 px-4 mt-4">
                                <span>{t("question.scale.star_low")}</span>
                                <span>{t("question.scale.star_high")}</span>
                            </div>
                        </div>
                    </div>
                ),
            smile:
                question.format !== "smile" ? null : (
                    <div className="flex items-center justify-center w-full">
                        <div className="w-full max-w-3xl">
                            <WithLabels
                                labelsParentClassName="px-4"
                                className="!gap-10 mb-3"
                                label={question.label}
                            >
                                <div className="bg-gradient-to-r from-emerald-50 to-cyan-50 rounded-2xl p-1 md:p-8 border border-emerald-100 shadow-sm">
                                    <EmojiRanking
                                        emojiSize={80}
                                        onEmojiSelect={(index) => {
                                            setstate((p) => ({
                                                ...p,
                                                values: { ...p.values, smile: index },
                                            }));
                                            if (window.innerWidth < 768 && currentIndex < totalSteps - 1) setTimeout(() => onAutoNext?.(), 300);
                                        }}
                                        selectedEmoji={state?.values?.smile}
                                        emojiClassName="transition-all duration-300 hover:scale-125 hover:drop-shadow-lg cursor-pointer"
                                    />
                                </div>
                            </WithLabels>
                            <div className="flex justify-between text-sm text-gray-500 px-4 mt-4">
                                <span>{t("question.scale.smile_low")}</span>
                                <span>{t("question.scale.smile_high")}</span>
                            </div>
                        </div>
                    </div>
                ),
            "1-10":
                question.format !== "1-10" ? null : (
                    <div className="flex items-center justify-center w-full">
                        <div className="w-full max-w-3xl">
                            <WithLabels
                                labelsParentClassName="px-4"
                                className="!gap-6 mb-3"
                                label={question.label}
                            >
                                <div className="bg-gradient-to-r from-violet-50 to-purple-50 rounded-2xl p-1 md:p-8 border border-violet-100 shadow-sm">
                                    <ZeroToTenRanking
                                        singleItem={{ width: 72, height: 92 }}
                                        setSelectedRate={(v) => {
                                            setstate((p) => ({
                                                ...p,
                                                values: { ...p.values, "1-10": v },
                                            }));
                                            if (window.innerWidth < 768 && currentIndex < totalSteps - 1) setTimeout(() => onAutoNext?.(), 300);
                                        }}
                                        selectedRate={state?.values?.["1-10"]}
                                        numberClassName="!text-2xl !font-bold"
                                        className="gap-4"
                                        itemClassName="transition-all duration-300 hover:scale-110 hover:shadow-xl rounded-xl border-2 border-transparent hover:border-violet-300"
                                        selectedItemClassName="!bg-gradient-to-r !from-violet-500 !to-purple-500 !text-white !shadow-lg !border-transparent"
                                    />
                                </div>
                            </WithLabels>
                            <div className="flex justify-between text-sm text-gray-500 px-4 mt-4">
                                <span>{t("question.scale.numeric_low")}</span>
                                <span>{t("question.scale.numeric_high")}</span>
                            </div>
                        </div>
                    </div>
                ),
        }),
        [question, setQuestion, setstate, state, t, currentIndex, totalSteps]
    );

    const mediaComponents = useMemo(
        () => ({
            IMAGE:
                question.responseType !== "IMAGE" ? null : (
                    <div className="relative group w-full max-w-4xl mx-auto">
                        <div className={`absolute top-4 ${isArabic ? "right-4" : "left-4"} px-4 py-2 bg-gradient-to-r from-black/80 to-black/60 text-white text-sm font-medium rounded-full backdrop-blur-sm flex items-center gap-2 z-10 shadow-lg`}>
                            <FiImage className="w-4 h-4" />
                            {t("question.visual_content")}
                        </div>
                        <img
                            src={
                                question.uploaded_image?.[0] instanceof File ||
                                question.uploaded_image?.[0] instanceof Blob
                                    ? URL.createObjectURL(question.uploaded_image[0])
                                    : question.assets[0]?.url
                            }
                            alt={t("question.visual_content")}
                            className="w-full h-[220px] md:h-[400px] object-cover rounded-2xl border-4 border-white shadow-2xl group-hover:shadow-3xl transition-all duration-500 group-hover:scale-[1.02]"
                            onError={(e) => { e.target.src = "/assets/placeholder-image.png"; }}
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl pointer-events-none" />
                    </div>
                ),
            VIDEO:
                question.responseType !== "VIDEO" ? null : question.video_source === "url" ? (
                    <div className="relative group w-full max-w-4xl mx-auto">
                        <div className={`absolute top-4 ${isArabic ? "right-4" : "left-4"} px-4 py-2 bg-gradient-to-r from-red-600 to-red-500 text-white text-sm font-medium rounded-full backdrop-blur-sm z-10 flex items-center gap-2 shadow-lg`}>
                            <FiVideo className="w-4 h-4" />
                            {t("question.youtube_video")}
                        </div>
                        <div className="relative rounded-2xl overflow-hidden border-4 border-white shadow-2xl group-hover:shadow-3xl transition-shadow duration-500">
                            <iframe
                                width="100%"
                                height="220"
                                src={`https://www.youtube.com/embed/${getYoutubeIdFromURL(question.youtube_video)}?rel=0&modestbranding=1&autoplay=0`}
                                title={t("question.youtube_video")}
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowFullScreen
                                className="md:h-[400px] rounded-xl"
                                loading="lazy"
                            />
                            <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
                        </div>
                        <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-5 py-2 rounded-full text-sm opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
                            {t("question.play_hint")}
                        </div>
                    </div>
                ) : (
                    <div className="relative group w-full max-w-4xl mx-auto">
                        <div className={`absolute top-4 ${isArabic ? "right-4" : "left-4"} px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-500 text-white text-sm font-medium rounded-full backdrop-blur-sm z-10 flex items-center gap-2 shadow-lg`}>
                            <FiVideo className="w-4 h-4" />
                            {t("question.video_content")}
                        </div>
                        <div className="relative rounded-2xl overflow-hidden border-4 border-white shadow-2xl group-hover:shadow-3xl transition-shadow duration-500">
                            <video
                                className="w-full h-[220px] md:h-[400px] object-cover"
                                src={question.assets[0]?.url}
                                controls
                                poster={question.assets[0]?.thumbnail}
                                preload="metadata"
                            />
                            <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
                        </div>
                    </div>
                ),
            SOUND:
                question.responseType !== "SOUND" ? null : (
                    <div className="relative group w-full max-w-4xl mx-auto">
                        <div className={`absolute top-4 ${isArabic ? "right-4" : "left-4"} px-4 py-2 bg-gradient-to-r from-purple-600 to-purple-500 text-white text-sm font-medium rounded-full backdrop-blur-sm z-10 flex items-center gap-2 shadow-lg`}>
                            <FiMusic className="w-4 h-4" />
                            {t("question.audio_content")}
                        </div>
                        <div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl p-8 border-2 border-purple-100 shadow-lg hover:shadow-xl transition-shadow duration-300">
                            <TaleAudioPlayer
                                className="w-full !py-6 px-4"
                                src={question.assets[0]?.url}
                                showWaveform={true}
                                showTime={true}
                            />
                        </div>
                    </div>
                ),
        }),
        [question, t]
    );

    return state?.isEditing ? (
        <Suspense
            fallback={
                <div className="survey-section flex flex-col justify-start items-center rounded-2xl p-8 bg-white relative gap-4 shadow-xl">
                    <div className="w-full max-w-4xl mx-auto">
                        <TaleLoadingFallback className="!py-24" />
                    </div>
                </div>
            }
        >
            <EditSingleQuestion
                setQuestion={setQuestion}
                questions={questions}
                question={question}
                canReorder={false}
                className={"!bg-white !rounded-2xl !shadow-2xl !p-8 !max-w-4xl !mx-auto"}
                canDelete={false}
                canDuplicate={false}
                showFinishEditButton={true}
                onSaveButtonClick={() => setstate((p) => ({ ...p, isEditing: false }))}
                showPreview={false}
            />
        </Suspense>
    ) : (
        <div className="relative bg-white rounded-3xl overflow-hidden" dir={isArabic ? "rtl" : "ltr"}>
            {/* Decorative Background Elements */}
            {/*<div className="absolute top-10 -right-10 w-40 h-40 bg-gradient-to-r from-blue-100 to-purple-100 rounded-full opacity-20"></div>*/}
            {/*<div className="absolute bottom-10 -left-10 w-40 h-40 bg-gradient-to-r from-amber-100 to-orange-100 rounded-full opacity-20"></div>*/}

            <div className="relative z-10">

                {/* Main Content */}
                <div className="p-1 md:p-8" style={{textAlign: '-webkit-center'}}>
                    {/* Options Menu */}
                    {showOptions && (
                        <ClickAwayListener
                            onClickAway={() =>
                                setstate((p) => ({ ...p, optionsExpanded: false }))
                            }
                        >
                            <div className={`absolute top-6 ${isArabic ? "left-6" : "right-6"} z-20`}>
                                <IconButton
                                    onClick={() =>
                                        setstate((p) => ({ ...p, optionsExpanded: !p.optionsExpanded }))
                                    }
                                    className="!bg-white !shadow-xl hover:!shadow-2xl !rounded-xl !p-3 transition-all duration-300 hover:scale-110"
                                    aria-label={t("actions.edit_question")}
                                >
                                    <FiMoreVertical className="w-6 h-6 text-gray-600" />
                                </IconButton>
                                <Suspense fallback={null}>
                                    {state?.optionsExpanded && (
                                        <TaleMenuOptions
                                            className={`absolute top-full ${isArabic ? "left-0" : "right-0"} mt-3 min-w-[180px] bg-white rounded-xl shadow-2xl border border-gray-200 py-2 z-30 animate-fade-in`}
                                            options={[
                                                {
                                                    text: (
                                                        <div className="flex items-center gap-3 px-4 py-3">
                                                            <FiEdit2 className="w-4 h-4" />
                                                            {t("actions.edit_question")}
                                                        </div>
                                                    ),
                                                    onClick: () =>
                                                        setstate((p) => ({
                                                            ...p,
                                                            isEditing: true,
                                                            optionsExpanded: false,
                                                        })),
                                                    className: "hover:bg-blue-50 transition-colors duration-200 rounded-lg mx-2",
                                                },
                                                ...(questions.length > 1
                                                    ? [
                                                        {
                                                            text: (
                                                                <div className="flex items-center gap-3 text-red-600 px-4 py-3">
                                                                    <FiTrash2 className="w-4 h-4" />
                                                                    {t("actions.delete_question")}
                                                                </div>
                                                            ),
                                                            onClick: async () => {
                                                                if (window.confirm(t("actions.delete_confirm"))) {
                                                                    await questionService.deleteQuestion(String(question.id || ""));
                                                                    selfDelete();
                                                                }
                                                            },
                                                            className: "hover:bg-red-50 transition-colors duration-200 rounded-lg mx-2",
                                                        },
                                                    ]
                                                    : []),
                                            ]}
                                        />
                                    )}
                                </Suspense>
                            </div>
                        </ClickAwayListener>
                    )}

                    {/* Media Content */}
                    {question.type !== "Text" && question.responseType && (
                        <div className="mb-5 animate-fade-in">
                            {mediaComponents[question.responseType]}
                        </div>
                    )}

                    {/* Question Text */}
                    <div className="mb-5 w-full bg-[#EFEFEF] rounded-2xl p-2 md:p-4" style={{textAlign: '-webkit-center'}}>
                        <div className="relative">
                            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent blur-xl opacity-30"></div>
                            <h2
                                className="relative text-sm md:text-2xl font-bold text-gray-900 leading-tight m-0 md:mb-3 px-2 md:px-4"
                                style={{ fontFamily: arabicFont, lineHeight: "1.3" }}
                            >
                                {question.question_text}
                            </h2>
                        </div>

                        {question.question_description && (
                            <div className="max-w-3xl mx-auto m-0">
                                <div className="rounded-2xl">
                                    <p className="text-gray-700 text-sm md:text-lg leading-relaxed text-center flex-1" style={{ fontFamily: arabicFont }}>
                                        {question.question_description}
                                    </p>
                                </div>
                            </div>
                        )}
                    </div>

                    {/* Question Format Component */}
                    <div className="mt-6 md:mt-12 mb-4 md:mb-8">
                        <div
                            dir={isArabic ? "rtl" : "ltr"}
                            className="w-full"
                            style={{ fontFamily: arabicFont }}
                        >
                            <Suspense
                                fallback={
                                    <div className="py-20">
                                        <div className="max-w-3xl mx-auto">
                                            <TaleLoadingFallback className="!h-32" />
                                        </div>
                                    </div>
                                }
                            >
                                <div className="max-w-3xl mx-auto">
                                    {formats[question.format]}
                                </div>
                            </Suspense>
                        </div>
                    </div>
                </div>

                {/* Footer Section
                <div className="border-t border-gray-200/50 bg-gradient-to-r from-gray-50/50 to-white/50 p-6">
                    <div className="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-gray-500">
                        {showProgress && totalSteps > 1 && (
                            <div className="flex items-center gap-4">
                                <button
                                    onClick={() => {/* navigation handled by parent *!/ }}
                                    disabled={currentIndex === 0}
                                    className="flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
                                >
                                    {isArabic ? <FiChevronRight className="w-4 h-4" /> : <FiChevronLeft className="w-4 h-4" />}
                                    {t("actions.previous")}
                                </button>
                                <button
                                    onClick={() => {/* navigation handled by parent *!/ }}
                                    disabled={currentIndex === totalSteps - 1}
                                    className="flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
                                >
                                    {t("actions.next")}
                                    {isArabic ? <FiChevronLeft className="w-4 h-4" /> : <FiChevronRight className="w-4 h-4" />}
                                </button>
                            </div>
                        )}
                    </div>
                </div>*/}
            </div>
        </div>
    );
};