import { useEffect, useState } from "react";
import { Button, Form, Input, Card, Col, Row, Radio, Tabs, Select, Tag, Modal, Popconfirm, Typography, Spin } from "antd";
import { fetchLanguageOptions } from "@/hooks/useLanguageOptions";
import {
  useForm,
  Controller,
  useFieldArray,
  type SubmitHandler,
  Resolver,
} from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { API_Instance } from "../../api/axios.instance";
import API_Constants from "../../constants/api.constants";
import toast from "react-hot-toast";
import { getAxiosErrorMessage } from "@/utils/index.utils";
import { QuestionFormValues } from "@/types";
import { useLocation, useNavigate } from "react-router-dom";
import ROUTE_CONSTANTS from "@/constants/route.constants";
import ImageUploader from "@/components/shared/ImageUploader";

const schema = yup
  .object({
    subject: yup.string().required("Subject is required"),
    topic: yup.string().required("Topic is required"),

    questionText: yup.string().test(
      "question-text-or-image",
      "Question text or image is required",
      function (value) {
        return !!(value || this.parent.questionImage);
      }
    ),
    questionImage: yup.mixed().optional(),

    options: yup
      .array()
      .of(
        yup
          .object({
            option: yup.string().optional(),
            optionImage: yup.mixed().optional(),
          })
          .test(
            "option-or-image",
            "Option text or image is required",
            (value) => !!(value?.option || value?.optionImage),
          ),
      )
      .min(4, "At least four options required")
      .required(),

    correctAnswer: yup.number().required("Correct answer required"),
    marks: yup.number().min(1).required(),
    difficulty: yup
      .mixed<"Easy" | "Medium" | "Hard">()
      .oneOf(["Easy", "Medium", "Hard"])
      .required(),

    explanation: yup.string().optional(),
    explanationImage: yup.mixed().optional(),
  });

const initialFormValues: QuestionFormValues = {
  subject: "",
  topic: "",
  questionText: "",
  questionImage: "",
  options: [
    { option: "", optionImage: "" },
    { option: "", optionImage: "" },
    { option: "", optionImage: "" },
    { option: "", optionImage: "" },
  ],
  correctAnswer: 0,
  marks: 1,
  difficulty: "Easy",
  explanation: "",
  explanationImage: "",
};

export default function QuestionAddPage() {
  const { state, pathname } = useLocation();
  const isEdit = pathname === ROUTE_CONSTANTS.QuestionBankEdit;
  const navigate = useNavigate();

  const [languageOptions, setLanguageOptions] = useState<any[]>([]);
  const [selectedLanguages, setSelectedLanguages] = useState<string[]>(["English"]);
  const [activeTab, setActiveTab] = useState<string>("English");
  const [translations, setTranslations] = useState<Record<string, QuestionFormValues>>({});
  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
  const [previewData, setPreviewData] = useState<Record<string, QuestionFormValues>>({});
  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
  const [isFetchLoading, setIsFetchLoading] = useState(false);
  const [fetchedQuestion, setFetchedQuestion] = useState<any>(null);

  useEffect(() => {
    fetchLanguageOptions().then(setLanguageOptions).catch(() => {});
  }, []);

  const resolver = yupResolver(
    schema,
  ) as unknown as Resolver<QuestionFormValues>;

  const {
    control,
    handleSubmit,
    reset,
    watch,
    setValue,
    getValues,
    formState: { errors, isSubmitting },
  } = useForm<QuestionFormValues>({
    resolver,
    defaultValues: initialFormValues,
  });

  // Load edit values
  useEffect(() => {
    if (!state) return;

    const initEdit = (data: any) => {
      const editValues = {
        subject: data.subjectId,
        topic: data.topic,
        questionText: data.questionText || "",
        questionImage: data.questionImage || "",
        options: (data.options || []).map((o: any) => ({
          option: o.option || "",
          optionImage: o.optionImage || "",
        })),
        correctAnswer: data.correctAnswer,
        marks: data.marks,
        difficulty: data.difficulty,
        explanation: data.explanation || "",
        explanationImage: data.explanationImage || "",
      };

      reset(editValues);

      const lang = data.language || "English";
      setSelectedLanguages([lang]);
      setActiveTab(lang);
      setTranslations({ [lang]: editValues });
    };

    if (pathname === ROUTE_CONSTANTS.QuestionBankEdit) {
      if (state.options) {
        initEdit(state);
      } else if (state.id) {
        setIsFetchLoading(true);
        API_Instance.get(`${API_Constants.questionBank}/${state.id}`)
          .then((res) => {
            initEdit(res.data.data);
            setFetchedQuestion(res.data.data);
          })
          .catch((err) => {
            toast.error(getAxiosErrorMessage(err));
          })
          .finally(() => {
            setIsFetchLoading(false);
          });
      }
    } else {
      const initVals = {
        ...initialFormValues,
        subject: state.subject,
        topic: state.topic,
      };
      reset(initVals);
      
      if (state.language) {
        setTranslations({ [state.language]: initVals });
        setSelectedLanguages([state.language]);
        setActiveTab(state.language);
      } else {
        setTranslations({ ["English"]: initVals });
        setSelectedLanguages(["English"]);
        setActiveTab("English");
      }
    }
  }, [state, pathname, reset]);

  const handleTabChange = (key: string) => {
    const currentValues = getValues();
    setTranslations((prev) => ({ ...prev, [activeTab]: currentValues }));

    const nextValues = translations[key] || {
      ...initialFormValues,
      subject: currentValues.subject,
      topic: currentValues.topic,
      marks: currentValues.marks,
      difficulty: currentValues.difficulty,
      correctAnswer: currentValues.correctAnswer,
    };
    reset(nextValues);
    setActiveTab(key);
  };

  const { fields } = useFieldArray({
    control,
    name: "options",
  });

  const onPreview: SubmitHandler<QuestionFormValues> = async (data) => {
    const allTranslations = { ...translations, [activeTab]: data };
    setPreviewData(allTranslations);
    setIsPreviewOpen(true);
  };

  const handleActualSubmit = async () => {
    setIsSubmitLoading(true);
    try {
      const promises = selectedLanguages.map(async (lang) => {
        const langData = previewData[lang];
        if (!langData) return null;
        
        const formData = new FormData();
        formData.append("subject", langData.subject);
        formData.append("topic", langData.topic);
        formData.append("language", lang);
        formData.append("questionText", langData.questionText || "");
        formData.append("correctAnswer", String(langData.correctAnswer));
        formData.append("marks", String(langData.marks));
        formData.append("difficulty", langData.difficulty);
        if (langData.explanation) formData.append("explanation", langData.explanation);
        if (langData.explanationImage && typeof langData.explanationImage !== "string") {
          formData.append("explanationImage", langData.explanationImage);
        }
        if (langData.questionImage && typeof langData.questionImage !== "string") {
          formData.append("questionImage", langData.questionImage);
        }

        const existingOptionImages: Record<number, string> = {};
        langData.options.forEach((o, index) => {
          formData.append("options", o.option || "");
          if (o.optionImage) {
            if (typeof o.optionImage === "string") {
              const uploadedOld = o.optionImage.split("/");
              existingOptionImages[index] = `/${uploadedOld[uploadedOld.length - 2]}/${uploadedOld[uploadedOld.length - 1]}`;
            } else {
              formData.append("optionImage", o.optionImage);
              formData.append("optionImageIndexes", String(index));
            }
          }
        });
        formData.append("existingOptionImages", JSON.stringify(existingOptionImages));

        if (isEdit && (state?.language === lang || fetchedQuestion?.language === lang)) {
           return API_Instance.put(`${API_Constants.questionBank}/${state.id || fetchedQuestion?.id}`, formData);
        }
        return API_Instance.post(API_Constants.questionBank, formData);
      });

      await Promise.all(promises.filter(Boolean));
      
      toast.success(isEdit ? "Question updated" : "Question created");
      setIsPreviewOpen(false);

      if (state?.supportTicketId) {
        try {
          await API_Instance.patch(`${API_Constants.support}/status/${state.supportTicketId}`, {
            status: "resolved",
          });
          toast.success("Support ticket auto-resolved");
        } catch (ticketErr) {
          console.error("Failed to auto-resolve support ticket", ticketErr);
        }
        navigate("/support");
        return;
      }

      if (isEdit) {
        navigate(-1);
      } else {
         const values = getValues();
         reset({
           ...initialFormValues,
           subject: values.subject,
           topic: values.topic,
         });
         setTranslations({ ["English"]: getValues() });
         setSelectedLanguages(["English"]);
         setActiveTab("English");
      }
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    } finally {
      setIsSubmitLoading(false);
    }
  };

  if (isFetchLoading) {
    return (
      <div className="h-64 flex items-center justify-center">
        <Spin size="large" tip="Loading question details..." />
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-3 px-4 pb-6">
      <h2 className="text-xl font-bold text-[#1677ff] mt-2 mb-2">
        {state && isEdit ? "Edit Question" : "Add New Question"}
      </h2>

      <Card className="rounded-xl shadow-lg border border-slate-200">
        <Form layout="vertical" onFinish={handleSubmit(onPreview)}>
          <Row gutter={[20, 4]}>
            {/* SUBJECT */}
            <Col span={12}>
              <Form.Item
                label="Subject"
                help={errors.subject?.message}
                validateStatus={errors.subject ? "error" : ""}
                required
              >
                <Controller
                  name="subject"
                  control={control}
                  render={({ field }) => (
                    <Input {...field} value={state?.subjectName || fetchedQuestion?.subject?.subjectName} disabled />
                  )}
                />
              </Form.Item>
            </Col>

            {/* TOPIC */}
            <Col span={12}>
              <Form.Item
                label="Topic"
                help={errors.subject?.message}
                validateStatus={errors.subject ? "error" : ""}
                required
              >
                <Controller
                  name="topic"
                  control={control}
                  render={({ field }) => (
                    <Input {...field} placeholder="Topic" disabled />
                  )}
                />
              </Form.Item>
            </Col>

            {/* MARKS + DIFFICULTY */}
            {/* <Col span={12}>
              <Form.Item
                label="Marks"
                help={errors.marks?.message}
                validateStatus={errors.marks ? "error" : ""}
                required
              >
                <Controller
                  name="marks"
                  control={control}
                  render={({ field }) => <Input {...field} type="number" />}
                />
              </Form.Item>
            </Col> */}

            <Col span={12}>
              <Form.Item
                label="Difficulty"
                help={errors.difficulty?.message}
                validateStatus={errors.difficulty ? "error" : ""}
                required
              >
                <Controller
                  name="difficulty"
                  control={control}
                  render={({ field }) => (
                    <Radio.Group
                      {...field}
                      options={[
                        { label: "Easy", value: "Easy" },
                        { label: "Medium", value: "Medium" },
                        { label: "Hard", value: "Hard" },
                      ]}
                    />
                  )}
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={[20, 4]} className="mb-4 mt-2">
            <Col span={12}>
              <div className="w-full">
                <label className="text-sm font-semibold text-slate-700 mb-2 block">Select Languages</label>
                <Select
                  mode={isEdit ? undefined : "multiple"}
                  style={{ width: "100%" }}
                  placeholder="Select languages"
                  options={languageOptions}
                  value={isEdit ? selectedLanguages[0] : selectedLanguages}
                  disabled={isEdit ? true : !!state?.language}
                  onChange={(val) => {
                    if (isEdit) {
                      const value = val as string;
                      if (!value) {
                        toast.error("Language must be selected");
                        return;
                      }
                      setSelectedLanguages([value]);
                      handleTabChange(value);
                    } else {
                      const valueArray = val as string[];
                      if (valueArray.length === 0) {
                        toast.error("At least one language must be selected");
                        return;
                      }
                      setSelectedLanguages(valueArray);
                      if (!valueArray.includes(activeTab)) {
                        handleTabChange(valueArray[0]);
                      }
                    }
                  }}
                />
              </div>
            </Col>
          </Row>

          {selectedLanguages.length > 1 && (
            <Tabs 
              activeKey={activeTab} 
              onChange={handleTabChange} 
              items={selectedLanguages.map(lang => ({ label: lang, key: lang }))} 
              className="mb-4"
            />
          )}

          <Row gutter={[20, 4]}>
            {/* QUESTION */}
            <Col span={24}>
              <Form.Item
                label="Question"
                help={errors.questionText?.message}
                validateStatus={errors.questionText ? "error" : ""}
                required
              >
                <Controller
                  name="questionText"
                  control={control}
                  render={({ field }) => (
                    <Input.TextArea
                      {...field}
                      rows={2}
                      placeholder="Type question here..."
                    />
                  )}
                />
              </Form.Item>
            </Col>

            <Col span={24}>
              <Form.Item
                label="Question Image"
                name="questionImage"
                help={errors.questionImage?.message}
                validateStatus={errors.questionImage ? "error" : ""}
              >
                <Controller
                  name="questionImage"
                  control={control}
                  render={({ field }) => (
                    <ImageUploader
                      value={field.value}
                      onChange={(file) => field.onChange(file || "")}
                      onRemove={() => field.onChange("")}
                    />
                  )}
                />
              </Form.Item>
            </Col>

            {/* OPTIONS */}
            <Col span={24}>
              <Form.Item
                label={
                  <span className="font-medium text-slate-700">Options</span>
                }
                required
              >
                {fields.map((op, index) => {
                  const errorMsg = errors.options?.[index]?.message;

                  return (
                    <Form.Item
                      key={op.id}
                      // validateStatus={errorMsg ? "error" : ""}
                      // help={errorMsg}
                      className={`border border-gray-100 p-2 rounded-lg ${errorMsg
                        ? "border-red-500"
                        : index === watch("correctAnswer")
                          ? "bg-[#dcdcdc20] border-gray-200"
                          : ""
                        }`}
                    >
                      <div className="flex items-center gap-3 w-full justify-between">
                        {/* Index Tag */}
                        <div className="w-[75%] flex flex-col gap-2">
                          <div className="flex items-center gap-2">
                            <Tag
                              className={`rounded-2xl text-gray-500 border-none h-8 w-8 flex items-center justify-center font-semibold ${index === watch("correctAnswer")
                                ? "bg-[#16a34a] text-white"
                                : ""
                                }`}
                            >
                              {index + 1}
                            </Tag>

                            {/* Input */}
                            <div className="flex-1">
                              <Controller
                                name={`options.${index}.option`}
                                control={control}
                                render={({ field }) => (
                                  <Input.TextArea
                                    {...field}
                                    className={`w-full ${!errorMsg &&
                                      index === watch("correctAnswer")
                                      ? "border-green-500 hover:border-green-500"
                                      : ""
                                      }`}
                                    placeholder={`Option ${index + 1}`}
                                    rows={2}
                                  />
                                )}
                              />
                            </div>
                          </div>
                          {errorMsg && (
                            <small className="text-md text-red-500">
                              {errorMsg}
                            </small>
                          )}
                        </div>
                        <div className="flex items-center gap-5">
                          <Controller
                            name={`options.${index}.optionImage`}
                            control={control}
                            render={({ field }) => (
                              <ImageUploader
                                value={field.value}
                                onChange={(file) => field.onChange(file || "")}
                                onRemove={() => field.onChange("")}
                              />
                            )}
                          />
                          {/* Correct Answer Radio */}
                          <Controller
                            name="correctAnswer"
                            control={control}
                            render={({ field }) => (
                              <input
                                type="radio"
                                checked={field.value === index}
                                onChange={() => field.onChange(index)}
                                className="h-5 w-5 accent-[#16a34a] cursor-pointer"
                              />
                            )}
                          />
                        </div>
                      </div>
                    </Form.Item>
                  );
                })}
              </Form.Item>
            </Col>

            {/* EXPLANATION */}
            <Col span={24}>
              <Form.Item label="Explanation">
                <Controller
                  name="explanation"
                  control={control}
                  render={({ field }) => <Input.TextArea {...field} rows={2} />}
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                label="Explanation Image"
                name="explanationImage"
                help={errors.explanationImage?.message}
                validateStatus={errors.explanationImage ? "error" : ""}
              >
                <Controller
                  name="explanationImage"
                  control={control}
                  render={({ field }) => (
                    <ImageUploader
                      value={field.value}
                      onChange={(file) => field.onChange(file || "")}
                      onRemove={() => field.onChange("")}
                    />
                  )}
                />
              </Form.Item>
            </Col>
          </Row>

          {/* ACTION BUTTONS */}
          <div className="flex justify-end gap-3 mt-5">
            <Button onClick={() => navigate(-1)}>
              Cancel
            </Button>
            <Button type="primary" htmlType="submit">
              Preview
            </Button>
          </div>
        </Form>
      </Card>

      {/* Preview Questions Modal */}

      <Modal
        title={
          <div className="text-lg font-bold text-slate-700">Preview Questions</div>
        }
        open={isPreviewOpen}
        onCancel={() => setIsPreviewOpen(false)}
        width={800}
        footer={[
          <Button key="cancel" onClick={() => setIsPreviewOpen(false)}>
            Back to Edit
          </Button>,
          <Popconfirm
            key="submit"
            title="Are you sure you want to submit these questions?"
            onConfirm={handleActualSubmit}
            okText="Yes, Submit"
            cancelText="Cancel"
          >
            <Button type="primary" loading={isSubmitLoading}>
              {isEdit ? "Update Question" : "Create Questions"}
            </Button>
          </Popconfirm>,
        ]}
      >
        <div className="max-h-[60vh] overflow-y-auto pr-2 mt-4">
          <Tabs
            items={selectedLanguages.map((lang) => {
              const data = previewData[lang];
              if (!data) return { key: lang, label: lang, children: null };

              const renderPreviewImage = (imgData: any) => {
                if (!imgData) return null;
                let src = "";
                if (typeof imgData === "string") {
                  src = imgData;
                } else if (imgData instanceof File || imgData instanceof Blob) {
                  src = URL.createObjectURL(imgData);
                } else if (imgData.originFileObj) {
                  src = URL.createObjectURL(imgData.originFileObj);
                }
                
                if (!src) return null;
                return <img src={src} alt="Preview" className="h-[5rem] object-contain rounded-md mt-2" />;
              };

              return {
                key: lang,
                label: lang,
                children: (
                  <div className="flex flex-col gap-4 text-slate-600 text-sm">
                    {/* Basic Info */}
                    <div className="grid grid-cols-2 gap-4 bg-slate-50 p-3 rounded-lg border border-slate-100">
                      <div>
                        <span className="font-semibold text-slate-700">Difficulty: </span>
                        {data.difficulty}
                      </div>
                      <div>
                        <span className="font-semibold text-slate-700">Marks: </span>
                        {data.marks}
                      </div>
                    </div>

                    {/* Question Text */}
                    <div className="bg-white p-4 rounded-lg border border-slate-200">
                      <div className="font-bold text-slate-800 mb-2">Question:</div>
                      <div className="whitespace-pre-wrap">{data.questionText || "-"}</div>
                      {renderPreviewImage(data.questionImage)}
                    </div>

                    {/* Options */}
                    <div>
                      <div className="font-bold text-slate-800 mb-2">Options:</div>
                      <div className="grid grid-cols-1 gap-2">
                        {data.options.map((opt, i) => {
                          const isCorrect = i === data.correctAnswer;
                          return (
                            <div
                              key={i}
                              className={`p-3 rounded-lg border ${
                                isCorrect
                                  ? "border-green-400 bg-green-50"
                                  : "border-slate-200 bg-white"
                              }`}
                            >
                              <div className="flex items-center gap-2">
                                <Tag color={isCorrect ? "success" : "default"}>
                                  {String.fromCharCode(65 + i)}
                                </Tag>
                                <span>{opt.option || "-"}</span>
                              </div>
                              {renderPreviewImage(opt.optionImage)}
                            </div>
                          );
                        })}
                      </div>
                    </div>

                    {/* Explanation */}
                    {(data.explanation || data.explanationImage) && (
                      <div className="bg-amber-50 p-4 rounded-lg border border-amber-100">
                        <div className="font-bold text-amber-800 mb-1">Explanation:</div>
                        {data.explanation && <div className="whitespace-pre-wrap">{data.explanation}</div>}
                        {renderPreviewImage(data.explanationImage)}
                      </div>
                    )}
                  </div>
                ),
              };
            })}
          />
        </div>
      </Modal>
    </div>
  );
}