import { TaleCheckbox } from "@components/TaleCheckbox";
import { TaleInput } from "@components/TaleInput";
import { TaleLoadingFallback } from "@components/TaleLoadingFallback";
import { TaleModal } from "@components/TaleModal";
import { TaleRadio } from "@components/TaleRadio";
import { TaleSelect } from "@components/TaleSelect";
import { TaleText } from "@components/TaleText";
import { TaleTextarea } from "@components/TaleTextarea";
import { TaleUpload } from "@components/TaleUpload";
import { Divider } from "@mui/material";
import React, { Suspense, useCallback, useEffect, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import { FaSpinner } from "react-icons/fa";
import { companyService } from "@/api/companies";
import { productsService } from "@/api/product";
import { surveyLanguages } from "@/utils/surveyLanguages";
import { assetsService } from "@/api/assets";
import { FF } from "@/utils/featureFlip";
import { surveyCategories } from "@/utils/surveyCategories";
import {getBatchImportedFlag} from "@/utils/batchImportStorage";
import { useTranslation } from "@/hooks/useTranslation";

const ProductOffers = React.lazy(() =>
  import("@pages/survey/new/scratch/Step1/ProductOffers")
);
const SubBrandPopup = React.lazy(() =>
  import("@pages/survey/new/scratch/Step1/SubBrandPopup")
);

export const CreateSurveyStep1 = ({
  setSurvey,
  setCoverPhoto,
  setLanguage,
  setCopyQuestions,
  setUseAudiencePanel,
  language,
  survey,
  copyQuestions,
  useAudiencePanel,
  coverPhoto,
  is_from_template,
}) => {
  const { t } = useTranslation();
  const [showBrandPopup, setShowBrandPopup] = useState(false);
  const [showProductPopup, setShowProductPopup] = useState(false);
  const [companiesData, setCompaniesData] = useState([]);
  const [productsData, setProductsData] = useState([]);

  // To load survey image programmatically on page redirection via state
  const loadImageIntoState = useCallback(
    async (filePath) => {
      try {
        const imagePath = `/assets/survey/create/simplified/${filePath}.jpg`;
        const response = await fetch(imagePath);
        const blob = await response.blob();
        const reader = new FileReader();
        reader.onloadend = () => {
          // const base64String = reader.result.split(",")[1];
          setSurvey((prev) => ({ ...prev, coverPhoto: [reader.result] }));
        };
        reader.readAsDataURL(blob);
      } catch (error) {
        console.error("Error loading image:", error);
      }
    },
    [setSurvey]
  );

  const location = useLocation();

  // Fetch companies data when the component mounts
  // If img from location state is available set it also !
  useEffect(() => {
    if (location.state?.img) loadImageIntoState(location.state.img);
  }, [loadImageIntoState, location.state]);

  useEffect(() => {
    Promise.all([
      companyService.getCompanies(0, 50),
      productsService.getProducts(0, 50),
    ])
      .then(([companies, products]) => {
        setCompaniesData(companies);
        setProductsData(
          // when a list of survey's products is loaded, we risk not loading data from backend bcz we take 50
          // this way we're merging what it has with what came, whether missing or not
          [...products, ...(survey.raw_products ?? [])].filter(
            (e, i, self) => self.findIndex((prd) => prd.id === e.id) === i
          )
        );
      })
      .catch((error) =>
        console.error("Error fetching companies or products:", error.message)
      );
  }, [survey.raw_products]);

  useEffect(() => {
    if (!language) {
      setLanguage("ENGLISH");
    }
  }, [language, setLanguage]);

  useEffect(() => {
    setSurvey((prev) => ({
      ...prev,
      rewardPoints: prev.rewardPoints ?? 0,
    }));
  }, []);

  const handleAddingBrand = (newItem) => {
    setCompaniesData([...companiesData, newItem]);
    setSurvey((prev) => ({ ...prev, company: newItem }));
    setShowBrandPopup(false);
  };

  const handleAddingProduct = (newItem) => {
    setProductsData([...productsData, newItem]);
    setSurvey((prev) => ({ ...prev, product: newItem }));
    setShowProductPopup(false);
  };

  const handleCoverPhotoChange = async (e) => {
    const files = e.target.files;
    if (files.length > 0) {
      const file = files[0];
      // No surveyId yet — store file locally, upload will happen after survey creation
      if (!survey.surveyId) {
        setCoverPhoto([file]);
        return;
      }
      setSurvey((prev) => ({ ...prev, loadingBannerImage: true }));
      try {
        const newBanner = await assetsService.uploadAsset({
          file,
          contentType: "IMAGE",
          entityType: "SURVEY",
          entityId: survey.surveyId,
          description: "SURVEY_BANNER",
        });
        setCoverPhoto([file]);
        if (survey.banner) {
          await assetsService.deleteAsset(survey.banner.id);
        }
        setSurvey((prev) => ({ ...prev, banner: newBanner }));
      } catch (error) {
        console.log(error);
      } finally {
        setSurvey((prev) => ({ ...prev, loadingBannerImage: false }));
      }
    }
  };

  const removeCoverPhoto = async () => {
    setSurvey((prev) => ({ ...prev, loadingBannerImage: true }));
    try {
      if (survey.banner) {
        await assetsService.deleteAsset(survey.banner.id);
      }
      setCoverPhoto(null);
      setSurvey((prev) => ({
        ...prev,
        coverPhoto: null,
        banner: null,
      }));
    } catch (error) {
      console.log(error);
    } finally {
      setSurvey((prev) => ({ ...prev, loadingBannerImage: false }));
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name === "company") {
      const selectedCompany = companiesData.find(
        (company) => String(company.id) === String(value)
      );
      setSurvey((prev) => ({ ...prev, company: selectedCompany }));
    } else if (name === "products") {
      setSurvey((prev) => ({
        ...prev,
        products: value,
      }));
    } else {
      setSurvey((prev) => ({ ...prev, [name]: value }));
    }
  };

  const handleTextareaChange = (e) => {
    const content = e.target.value;
    setSurvey((prev) => ({ ...prev, description: content }));
  };

  const handleRewardPointsChange = (e) => {
    const raw = e.target.value.replace(/\D/g, ""); // strip non-digits
    setSurvey((prev) => ({
      ...prev,
      rewardPoints: raw === "" ? "" : parseInt(raw, 10),
    }));
  };

  const params = useParams();
  const alreadyBatchImported = getBatchImportedFlag(survey.surveyId || params.surveyId);

  const [logoURL, setLogoURL] = useState(null); // stores the Object URL
  const [logoRemoteAction, setlogoRemoteAction] = useState(false);
  const handleLogoFile = useCallback(
      async (file) => {
        let tempLogo;
        if (survey.surveyId || params.surveyId) {
          setlogoRemoteAction(true);
          // if survey already created, update new logo
          tempLogo = await assetsService.uploadAsset({
            file,
            contentType: "IMAGE",
            description: "SURVEY_LOGO",
            entityId: survey.surveyId || params.surveyId,
            entityType: "SURVEY",
          });
          // delete old image
          if (survey.logo?.id) await assetsService.deleteAsset(survey.logo.id);
          setlogoRemoteAction(false);
        }
        // cleanup old preview if exists
        if (logoURL) {
          URL.revokeObjectURL(logoURL);
        }

        const newURL = URL.createObjectURL(file);
        setLogoURL(newURL);

        setSurvey((prev) => ({
          ...prev,
          logo: tempLogo ?? file,
        }));
      },
      [logoURL, params.surveyId, setSurvey, survey]
  );

  const handleLogoRemove = useCallback(async () => {
    if ((survey.surveyId || params.surveyId) && survey.logo?.url) {
      setlogoRemoteAction(true);
      await assetsService.deleteAsset(survey.logo.id);
      setlogoRemoteAction(false);
    }
    if (logoURL) {
      URL.revokeObjectURL(logoURL);
      setLogoURL(null);
    }
    setSurvey((prev) => ({ ...prev, logo: null }));
  }, [logoURL, params.surveyId, setSurvey, survey]);

  return (
    <>
      {!(showBrandPopup || showProductPopup) ? null : (
        <TaleModal className="flex items-end justify-end p-4">
          <Suspense fallback={<TaleLoadingFallback />}>
            {showBrandPopup && (
              <SubBrandPopup
                onClose={() => setShowBrandPopup(false)}
                onValidate={handleAddingBrand}
              />
            )}
            {showProductPopup && (
              <ProductOffers
                onClose={() => setShowProductPopup(false)}
                onValidate={handleAddingProduct}
              />
            )}
          </Suspense>
        </TaleModal>
      )}
      <div className="flex justify-start gap-24 items-start">
        {/* UPLOAD LOGO */}
        <div className="flex flex-col items-center justify-center gap-2">
          <div
              onClick={() => {
                if (!logoRemoteAction)
                  document.querySelector("#survey-logo")?.click();
              }}
              className={`${
                  !survey.logo ? "rounded-full" : "rounded-md"
              } size-[78px] flex items-center justify-center bg-tale-business-light cursor-pointer relative overflow-hidden`}
          >
            {logoRemoteAction && (
                <div className="absolute size-full z-10 bg-slate-800/20 backdrop-blur-sm flex items-center justify-center">
                  <FaSpinner className="animate-spin" />
                </div>
            )}
            <input
                type="file"
                accept="image/*"
                className="hidden"
                id="survey-logo"
                onChange={async (e) => {
                  const file = e.target.files[0];
                  if (file) await handleLogoFile(file);
                }}
            />
            <img
                src={
                    survey.logo?.url ??
                    (survey.logo
                        ? logoURL
                        : "/assets/survey/create/step-1/add-logo.svg")
                }
                id="logo-preview"
                className={
                  !survey.logo
                      ? "!size-[40px]"
                      : "size-full object-cover rounded-md bg-white border border-zinc-200"
                }
                alt={!survey.logo ? t("surveyBuilder.step1.addLogo") : t("surveyBuilder.step1.deleteLogo")}
            />
          </div>
          <span
              className={`cursor-pointer text-xs ${
                  !survey.logo ? "" : "!font-bold text-red-600"
              }`}
              onClick={async () => {
                // if no logo, click to select
                if (!survey.logo) document.querySelector("#survey-logo").click();
                // if logo exists and no survey is created yet
                else await handleLogoRemove();
              }}
          >
            {!survey.logo ? (
                <>
                  {t("surveyBuilder.step1.uploadLogo")} <br /> ({t("surveyBuilder.step1.optional")})
                </>
            ) : (
                t("surveyBuilder.step1.deleteLogo")
            )}
          </span>
        </div>
        {/* Language Selection */}
        <div className="flex flex-col items-start gap-3 w-fit">
          <div style={{ color: "black", fontSize: 14, fontWeight: "600" }}>
            {t("surveyBuilder.step1.languageLabel")}
          </div>
          <div className="flex gap-4">
            {surveyLanguages.map((lang) => {
              return (
                <TaleRadio
                  role="normal"
                  key={lang.value}
                  checked={language === lang.value}
                  onChange={() => setLanguage(lang.value)}
                  label={lang.label}
                />
              );
            })}
          </div>
        </div>
      </div>

      <div className="flex gap-8">
        <div className="flex flex-col grow basis-7/12 gap-5">
          {/* Survey Title */}
          <TaleInput
            labelClassName="!text-base"
            label={t("surveyBuilder.step1.titleLabel")}
            type="text"
            name="title"
            value={survey.title}
            onChange={handleChange}
            placeholder={t("surveyBuilder.step1.titlePlaceholder")}
          />
          {/* Survey Category */}
          <TaleSelect
            labelClassName="!text-base"
            label={t("surveyBuilder.step1.categoryLabel")}
            type="text"
            name="category"
            value={survey.category}
            onChange={handleChange}
            placeholder={t("surveyBuilder.step1.categoryPlaceholder")}
          >
            <option value="" disabled>
              {t("surveyBuilder.step1.selectPlaceholder")}
            </option>
            {surveyCategories.map((e, i) => (
              <option key={i} value={e.value}>
                {e.label}
              </option>
            ))}
          </TaleSelect>
          {/* Reward Points Input */}
          <TaleInput
            labelClassName="!text-base"
            label={t("surveyBuilder.step1.rewardPointsLabel")}
            type="text"
            inputMode="numeric"
            name="rewardPoints"
            value={survey.rewardPoints === 0 ? "" : String(survey.rewardPoints ?? "")}
            onChange={handleRewardPointsChange}
            placeholder="0"
            onBlur={() => {
              if (survey.rewardPoints === "" || survey.rewardPoints == null) {
                setSurvey((prev) => ({ ...prev, rewardPoints: 0 }));
              }
            }}
          />
          {/* Advanced settings */}
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 10,
            }}
          >
            <div
              style={{
                textAlign: "justify",
                color: "black",
                fontSize: 15,
                fontFamily: "revert",
                fontWeight: "600",
                wordWrap: "break-word",
              }}
            >
              {t("surveyBuilder.step1.advancedSettings")}
            </div>

            <div className="flex flex-col gap-2">
              {is_from_template || alreadyBatchImported ? null : (
                <TaleCheckbox
                  role={"normal"}
                  textClassName="text-sm"
                  width={24}
                  height={24}
                  checked={copyQuestions}
                  onClick={() => setCopyQuestions(!copyQuestions)}
                  label={t("surveyBuilder.step1.copyQuestionsLabel")}
                />
              )}
              {FF.CREATE_SURVEY_USE_TARGETING && (
                <TaleCheckbox
                  role={"normal"}
                  textClassName="text-sm"
                  width={24}
                  height={24}
                  checked={useAudiencePanel}
                  onClick={() => setUseAudiencePanel(!useAudiencePanel)}
                  label={t("surveyBuilder.step1.useAudiencePanelLabel")}
                />
              )}
            </div>
          </div>
          <Divider />
          <div className="flex flex-col gap-3 justify-between">
            {/*<TaleSelect
              label={
                <div className="flex justify-between">
                  <div>Brand</div>
                  <TaleText
                    role={"normal"}
                    onClick={() => setShowBrandPopup(true)}
                    className="font-semibold cursor-pointer"
                  >
                    + Add new
                  </TaleText>
                </div>
              }
              name="company"
              value={survey.company ? survey.company.id : ""}
              onChange={handleChange}
            >
              <option disabled value="">
                -Select-
              </option>
              {companiesData.map((company) => (
                <option key={company.id} value={company.id}>
                  {company.companyName}
                </option>
              ))}
            </TaleSelect>*/}
            <TaleSelect
              label={
                <div className="flex justify-between">
                  <div>{t("surveyBuilder.step1.productBrandLabel")}</div>
                  <TaleText
                    role={"normal"}
                    onClick={() => setShowProductPopup(true)}
                    className="font-semibold cursor-pointer"
                  >
                    {t("surveyBuilder.step1.addNew")}
                  </TaleText>
                </div>
              }
              multiple={true}
              name="products"
              value={survey.products}
              onChange={handleChange}
              filterKey="type"
              filterValues={["BRAND", "PRODUCT"]}
            >
              <option disabled value="">
                {t("surveyBuilder.step1.selectPlaceholder")}
              </option>
              {productsData.map((product) => (
                  <option
                      key={product.id}
                      value={product.id}
                      data-meta={JSON.stringify({ type: product.type ?? null })}
                  >
                    {product.name}
                  </option>
              ))}
            </TaleSelect>
          </div>
        </div>
        <div className="flex flex-col grow basis-5/12 gap-5">
          {/* Image Upload Section */}
          <TaleUpload
            title={t("surveyBuilder.step1.coverPhotoTitle")}
            extensions={".jpg .png .jpeg"}
            selecteFilesText={t("surveyBuilder.step1.selectCoverPhoto")}
            dragNDropText={t("surveyBuilder.step1.dragAndDrop")}
            singleFile={true}
            inputProps={{
              type: "file",
              accept: "image/*",
              multiple: false,
            }}
            files={
              coverPhoto ?? (survey.banner ? [survey.banner.url] : undefined)
            }
            onChange={handleCoverPhotoChange}
            removeFile={removeCoverPhoto}
            loading={survey.loadingBannerImage}
          />
          {/* Description Textarea */}
          <div
            style={{
              width: "100%",
              display: "flex",
              alignItems: "flex-start",
              flexDirection: "column",
              gap: 10,
              color: "black",
              fontSize: 14,
              fontFamily: "revert",
              fontWeight: "600",
              wordWrap: "break-word",
            }}
            className="grow"
          >
            <TaleTextarea
              label={t("surveyBuilder.step1.descriptionLabel")}
              value={survey.description}
              height={"100% !important"}
              onChange={handleTextareaChange}
              maxLength={1000}
              placeholder={t("surveyBuilder.step1.descriptionPlaceholder")}
              style={{
                width: "100%",
                padding: "8px",
                borderRadius: "10px",
                background: "rgba(17, 17, 17, 0.10)",
                resize: "none",
              }}
              className="!grow"
            />
          </div>
        </div>
      </div>
    </>
  );
};