import * as yup from "yup";
import toast from "react-hot-toast";
import Modal from "@/components/shared/Modal";
import { useDebounce } from "@/hooks/useDebounce";
import { IQuestion } from "@/types";
import { fetchLanguageOptions } from "@/hooks/useLanguageOptions";
import { yupResolver } from "@hookform/resolvers/yup";
import { API_Instance } from "../../api/axios.instance";
import { useEffect, useState, useCallback } from "react";
import API_Constants from "../../constants/api.constants";
import ROUTE_CONSTANTS from "@/constants/route.constants";
import { getAxiosErrorMessage } from "@/utils/index.utils";
import { useLocation, useNavigate } from "react-router-dom";
import QuestionCard from "@/components/shared/QuestionCard";
import { useForm, Controller, Resolver } from "react-hook-form";
import { Button, Form, Input, Select, Card, Col, Row, Tag, Pagination, Spin, Steps, Tooltip, Alert } from "antd";
import { Check, CheckCircle, Clock, Eye, Hash, RotateCcw, Search, Shuffle, Trash2, Wand2 } from "lucide-react";

interface FormValues {
  title: string;
  language: string;
  duration?: number;
  questionCount: number;
  markPerQuestion: number;
  generationMode: string;
}

const schema = yup.object({
  title: yup.string().required("Title is required"),
  language: yup.string().required("Language is required"),
  duration: yup
    .number()
    .typeError("Duration must be a number")
    .required("Duration is required")
    .min(1, "Duration must be at least 1 minute"),
  questionCount: yup
    .number()
    .typeError("Question Count must be a number")
    .required("Question Count is required")
    .min(1, "Question Count must be at least 1"),
  markPerQuestion: yup
    .number()
    .typeError("Mark Per Question must be a number")
    .required("Mark Per Question is required")
    .min(0.1, "Mark Per Question must be greater than 0"),
  generationMode: yup.string().default("manual"),
});

const MAX_QUESTIONS = 200;

const filterInitial = {
  subjectIds: [] as string[],
  topics: [] as string[],
  difficulty: undefined as string | undefined,
  language: undefined as string | undefined,
  search: "",
  questionUsage: undefined as string | undefined,
};

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

  const [selectedQuestions, setSelectedQuestions] = useState<IQuestion[]>([]);
  const [submitting, setSubmitting] = useState(false);

  const [current, setCurrent] = useState(0);

  const [mode, setMode] = useState<"manual" | "auto">("manual");

  const [previewQuestion, setPreviewQuestion] = useState<IQuestion | null>(null);

  const [sequencePage, setSequencePage] = useState(1);
  const [sequenceLimit, setSequenceLimit] = useState(10);

  const [questions, setQuestions] = useState<IQuestion[]>([]);
  const [qPage, setQPage] = useState(1);
  const [qLimit, setQLimit] = useState(10);
  const [qTotal, setQTotal] = useState(0);
  const [qLoading, setQLoading] = useState(false);

  const [autoCount, setAutoCount] = useState<number | null>(null);
  const [autoCountError, setAutoCountError] = useState<string>("");
  const [autoGenerated, setAutoGenerated] = useState<IQuestion[]>([]);
  const [autoGenPage, setAutoGenPage] = useState(1);
  const [autoGenLimit, setAutoGenLimit] = useState(10);
  const [autoLoading, setAutoLoading] = useState(false);
  const [autoPoolTotal, setAutoPoolTotal] = useState(0);
  const [shufflingId, setShufflingId] = useState<string | null>(null);

  const [availableCount, setAvailableCount] = useState<number | null>(null);
  const [usedCount, setUsedCount] = useState<number | null>(null);
  const [totalCount, setTotalCount] = useState<number | null>(null);
  const [availableCountLoading, setAvailableCountLoading] = useState(false);

  const [filterValues, setFilterValues] = useState(filterInitial);
  const debouncedSearch = useDebounce(filterValues.search, 600);

  const [languageOptions, setLanguageOptions] = useState<any[]>([]);
  const [options, setOptions] = useState<any>({
    subjects: [],
    languages: [],
    difficulty: ["Easy", "Medium", "Hard"].map((d) => ({ label: d, value: d })),
  });
  const [subjectPage, setSubjectPage] = useState(1);
  const [subjectTotal, setSubjectTotal] = useState(0);
  const [subjectLoading, setSubjectLoading] = useState(false);

  const [topicsBySubject, setTopicsBySubject] = useState<Record<string, any[]>>({});
  const [topicLoading, setTopicLoading] = useState(false);

  const resolver = yupResolver(schema) as unknown as Resolver<FormValues>;
  const {
    control,
    handleSubmit,
    reset,
    watch,
    trigger,
    formState: { errors },
  } = useForm<FormValues>({
    resolver,
    defaultValues: {
      title: "",
      language: "English",
      duration: 30,
      questionCount: 0,
      markPerQuestion: 0,
      generationMode: "manual",
    },
  });

  const formLanguage = watch("language");
  const formQuestionCount = watch("questionCount");
  const formMarkPerQuestion = watch("markPerQuestion");

  const steps = [
    // { title: <span className="text-sm">Test Details</span> },
    { title: <span className="text-sm">Test Details & Questions</span> },
    { title: <span className="text-sm">Save</span> },
  ];

  useEffect(() => {
    const loadLanguages = async () => {
      try {
        const options = await fetchLanguageOptions();
        setLanguageOptions(options);
        setOptions((prev: any) => ({ ...prev, languages: options }));
      } catch {
        setLanguageOptions([]);
        setOptions((prev: any) => ({ ...prev, languages: [] }));
      }
    };

    void loadLanguages();
  }, []);

  useEffect(() => {
    if (isEdit && state?.id) {
      fetchViewTest(state.id);
    } else if (state?.examId) {
    } else {
      navigate(ROUTE_CONSTANTS.MockTest);
    }
    fetchSubjects(1);
  }, []);

  const fetchViewTest = async (id: string) => {
    try {
      const res = await API_Instance.get(`${API_Constants.mockTests}/${id}`);
      const data = res.data.data;
      reset({
        title: data.title,
        language: data.language || "English",
        duration: data.duration,
        questionCount: data.questionCount || 0,
        markPerQuestion: (data.totalMarks && data.questionCount) ? (data.totalMarks / data.questionCount) : 0,
        generationMode: data.generationMode || "manual",
      });
      setSelectedQuestions(data.questions || []);
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    }
  };

  const fetchSubjects = async (page = 1) => {
    try {
      setSubjectLoading(true);
      const res = await API_Instance.get(API_Constants.subjects, {
        params: { page, limit: 20 },
      });
      const fetchedSubjects = res.data.data.map((s: any) => ({
        label: s.subjectName,
        value: s.id,
      }));
      setOptions((prev: any) => ({
        ...prev,
        subjects:
          page === 1 ? fetchedSubjects : [...prev.subjects, ...fetchedSubjects],
      }));
      setSubjectTotal(res.data.meta.total);
      setSubjectPage(page);
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    } finally {
      setSubjectLoading(false);
    }
  };

  const fetchTopicsForSubject = async (subjectId: string) => {
    if (topicsBySubject[subjectId]) return;
    try {
      setTopicLoading(true);
      const res = await API_Instance.get(
        `${API_Constants.subjects}/${subjectId}/topics`,
        { params: { page: 1, limit: 100 } }
      );
      const fetchedTopics = res.data.topics.map((t: any) => ({
        label: t.topic,
        value: t.topic,
      }));
      setTopicsBySubject((prev) => ({ ...prev, [subjectId]: fetchedTopics }));
    } catch (err) {
    } finally {
      setTopicLoading(false);
    }
  };

  const allAvailableTopics = filterValues.subjectIds.flatMap(
    (sid) => topicsBySubject[sid] || []
  );
  const uniqueTopics = Array.from(
    new Map(allAvailableTopics.map((t) => [t.value, t])).values()
  );

  const buildFilterPayload = useCallback(() => {
    return {
      subjectIds: filterValues.subjectIds,
      topics: filterValues.topics,
      difficulty: filterValues.difficulty || undefined,
      language: formLanguage || undefined,
      examId: state?.examId,
      currentMockTestId: isEdit ? state?.id : undefined,
    };
  }, [filterValues, isEdit, state, formLanguage]);

  const fetchAvailableCount = useCallback(async () => {
    setAvailableCountLoading(true);
    try {
      const res = await API_Instance.post(
        `${API_Constants.mockTests}/available-questions-count`,
        buildFilterPayload()
      );
      const availCount = res.data.available ?? res.data.count ?? 0;
      const usedCnt = res.data.used ?? 0;
      const totalCnt = res.data.total ?? availCount + usedCnt;
      setAvailableCount(availCount);
      setUsedCount(usedCnt);
      setTotalCount(totalCnt);
      if (mode === "auto") setAutoPoolTotal(availCount);
    } catch {
      setAvailableCount(null);
      setUsedCount(null);
      setTotalCount(null);
    } finally {
      setAvailableCountLoading(false);
    }
  }, [buildFilterPayload, mode]);

  useEffect(() => {
    if (current === 0) {
      fetchAvailableCount();
    }
  }, [fetchAvailableCount, current]);

  const handleModeChange = (newMode: "manual" | "auto") => {
    if (newMode !== mode) {
      setMode(newMode);
      setSelectedQuestions([]);
      setAutoGenerated([]);
      if (newMode === "auto") {
        setAutoCount(null);
        setAutoCountError("");
      }
    }
  };

  const fetchQuestions = async (
    page = 1,
    limit = 10,
    filter = filterValues
  ) => {
    setQLoading(true);
    try {
      const params = new URLSearchParams();
      params.append("page", page.toString());
      params.append("limit", limit.toString());
      params.append("exam", state.examId);
      if (isEdit && state?.id) params.append("mockTestId", state.id);
      filter.subjectIds.forEach((sid) => params.append("subject", sid));
      filter.topics.forEach((t) => params.append("topic", t));
      if (filter.difficulty) params.append("difficulty", filter.difficulty);
      if (formLanguage) params.append("language", formLanguage);
      if (filter.search) params.append("search", filter.search);
      if (filter.questionUsage) params.append("questionUsage", filter.questionUsage);

      const res = await API_Instance.get(
        `${API_Constants.questionBank}?${params.toString()}`
      );
      setQuestions(res.data.data);
      setQTotal(res.data.meta.total);
      setQPage(res.data.meta.page);
      setQLimit(res.data.meta.limit);
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    } finally {
      setQLoading(false);
    }
  };

  useEffect(() => {
    if (current === 0 && mode === "manual") {
      setQPage(1);
      fetchQuestions(1, qLimit, {
        ...filterValues,
        search: debouncedSearch,
      });
    }
  }, [
    debouncedSearch,
    filterValues.subjectIds.join(","),
    filterValues.topics.join(","),
    filterValues.difficulty,
    filterValues.language,
    filterValues.questionUsage,
    qLimit,
    current,
    mode,
    formLanguage,
  ]);

  const handleAutoGenerate = async () => {
    if (!formQuestionCount || formQuestionCount < 1) {
      toast.error("Please enter a valid Question Count in the Test Details section.");
      return;
    }

    const effectiveMax = Math.min(autoPoolTotal, MAX_QUESTIONS);

    if (formQuestionCount > effectiveMax) {
      if (autoPoolTotal < MAX_QUESTIONS) {
        toast.error(
          `Only ${autoPoolTotal} questions available for your filters. (Hard limit: ${MAX_QUESTIONS})`
        );
      } else {
        toast.error(
          `Maximum ${MAX_QUESTIONS} questions per test. (Available: ${autoPoolTotal})`
        );
      }
      return;
    }

    setAutoLoading(true);
    try {
      const res = await API_Instance.post(
        `${API_Constants.mockTests}/generate-questions`,
        {
          ...buildFilterPayload(),
          count: formQuestionCount,
        }
      );
      const generated: IQuestion[] = res.data.data;
      const poolTotal: number = res.data.totalAvailable ?? generated.length;
      setAutoGenerated(generated);
      setAutoGenPage(1);
      setAutoPoolTotal(poolTotal);
      setAvailableCount(poolTotal);

      setSelectedQuestions(
        generated.map((q: any) => ({ ...q, sourceType: "auto" }))
      );

      toast.success(`Generated ${generated.length} questions!`);
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    } finally {
      setAutoLoading(false);
    }
  };

  const handleClearAuto = () => {
    setAutoCount(null);
    setAutoCountError("");
    setAutoGenerated([]);
    setSelectedQuestions([]);
  };

  useEffect(() => {
    if (mode === "auto" && current === 0) {
      setAutoGenerated([]);
      setSelectedQuestions([]);
      setAutoCount(null);
      setAutoCountError("");
    }
  }, [
    filterValues.subjectIds.join(","),
    filterValues.topics.join(","),
    filterValues.difficulty,
    filterValues.language,
    filterValues.questionUsage,
    mode,
    current,
  ]);

  const shuffleQuestion = async (questionId: string) => {
    setShufflingId(questionId);
    try {
      const existingIds = selectedQuestions.map((q) => q.id);
      const res = await API_Instance.post(
        `${API_Constants.mockTests}/replace-question`,
        {
          ...buildFilterPayload(),
          existingQuestionIds: existingIds,
        }
      );
      const replacement: IQuestion = res.data.data;

      setAutoGenerated((prev) =>
        prev.map((q) =>
          q.id === questionId
            ? ({ ...replacement, sourceType: "auto" } as any)
            : q
        )
      );
      setSelectedQuestions((prev) =>
        prev.map((q) =>
          q.id === questionId
            ? ({ ...replacement, sourceType: "auto" } as any)
            : q
        )
      );
    } catch (err) {
      const msg = getAxiosErrorMessage(err);
      if (msg.includes("No alternative")) {
        toast.error("No more questions available to replace with your current filters.");
      } else {
        toast.error(msg);
      }
    } finally {
      setShufflingId(null);
    }
  };

  const toggleQuestion = (q: IQuestion) => {
    const alreadySelected = selectedQuestions.some((sq) => sq.id === q.id);
    if (alreadySelected) {
      setSelectedQuestions(selectedQuestions.filter((sq) => sq.id !== q.id));
    } else {
      const currentLimit = formQuestionCount || MAX_QUESTIONS;
      if (selectedQuestions.length >= currentLimit) {
        toast.error(
          `You can only select up to ${currentLimit} questions as per your Question Count.`
        );
        return;
      }
      setSelectedQuestions([
        ...selectedQuestions,
        { ...q, sourceType: "manual" } as any,
      ]);
    }
  };

  const removeSelectedQuestion = (id: string) => {
    setSelectedQuestions((prev) => prev.filter((q) => q.id !== id));
    setAutoGenerated((prev) => prev.filter((q) => q.id !== id));
  };

  const eligiblePageQuestions = questions.filter(
    (q) => !((q as any).usedInMockTests?.length > 0)
  );

  const isAllEligibleSelected =
    eligiblePageQuestions.length > 0 &&
    eligiblePageQuestions.every((q) =>
      selectedQuestions.some((s) => s.id === q.id)
    );

  const handleSelectAllPage = () => {
    const allEligibleSelected = eligiblePageQuestions.every((q) =>
      selectedQuestions.some((s) => s.id === q.id)
    );
    if (allEligibleSelected) {
      const eligibleIds = eligiblePageQuestions.map((q) => q.id);
      setSelectedQuestions((prev) =>
        prev.filter((item) => !eligibleIds.includes(item.id))
      );
    } else {
      const currentLimit = (formQuestionCount && Number(formQuestionCount) > 0) ? Number(formQuestionCount) : MAX_QUESTIONS;
      const missing = eligiblePageQuestions.filter(
        (q) => !selectedQuestions.some((item) => item.id === q.id)
      );
      const canAdd = currentLimit - selectedQuestions.length;
      if (canAdd <= 0) {
        toast.error(`Maximum ${currentLimit} questions allowed per your Question Count.`);
        return;
      }
      const toAdd = missing.slice(0, canAdd);
      if (toAdd.length < missing.length) {
        toast.success(
          `Added ${toAdd.length} questions. The rest were skipped to match your Question Count limit of ${currentLimit}.`
        );
      }
      setSelectedQuestions((prev) => [
        ...prev,
        ...toAdd.map((q) => ({ ...q, sourceType: "manual" } as any)),
      ]);
    }
  };

  const handleSubjectChange = (selectedIds: string[]) => {
    selectedIds.forEach((sid) => {
      if (!topicsBySubject[sid]) {
        fetchTopicsForSubject(sid);
      }
    });
    const validTopics = filterValues.topics.filter((t) =>
      selectedIds.some((sid) => (topicsBySubject[sid] || []).some((topic: any) => topic.value === t))
    );
    setFilterValues((prev) => ({
      ...prev,
      subjectIds: selectedIds,
      topics: validTopics,
    }));
  };

  const onSubmit = async (data: FormValues, publish: boolean) => {
    if (selectedQuestions.length === 0) {
      toast.error("Please select at least 1 question.");
      return;
    }
    setSubmitting(true);
    try {
      const payload = {
        ...data,
        generationMode: mode,
        examId: state.examId,
        publish,
        totalMarks: Number(data.markPerQuestion) * Number(data.questionCount),
        questionCount: Number(data.questionCount),
        questions: selectedQuestions.map((q: any) => ({
          questionId: q.id,
          subjectId: q.subjectId || null,
          topic: q.topic || null,
          sourceType: q.sourceType || "manual",
          marks: Number(data.markPerQuestion)
        })),
      };

      if (isEdit) {
        await API_Instance.put(
          `${API_Constants.mockTests}/${state.id}`,
          payload
        );
        toast.success("Mock Test updated successfully");
      } else {
        await API_Instance.post(API_Constants.mockTests, payload);
        toast.success("Mock Test created successfully");
      }
      navigate(ROUTE_CONSTANTS.MockTest);
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    } finally {
      setSubmitting(false);
    }
  };

  const totalCalculatedMarks = (formQuestionCount || 0) * (formMarkPerQuestion || 0);

  return (
    <div className="flex flex-col gap-3 px-4">
      <div className="flex justify-between items-center my-4 mb-6">
        <h2 className="text-xl font-bold text-[#1677ff]">
          {isEdit
            ? "Edit Mock Test"
            : `Create New Mock Test${state?.examName ? ` — ${state.examName}` : ""}`}
        </h2>
      </div>

      <Steps current={current} items={steps} className="mb-5" />

      <Card
        bordered={false}
        className="shadow-sm flex-1 flex flex-col"
        title={
          current === 0
            ? "Test Details & Questions"
            : "Save"
        }
        bodyStyle={{
          display: "flex",
          flexDirection: "column",
          flex: 1,
          minHeight: 0,
          padding: current === 0 ? "16px" : "24px",
        }}
      >
        <Form
          layout="vertical"
          className={current === 0 ? "flex-1 flex flex-col min-h-0" : ""}
        >
          {/* ── STEP 0: TEST DETAILS ── */}
          {/* {current === 0 && (
            <Row gutter={[18, 18]} style={{ rowGap: 0 }}>
               ... 
            </Row>
          )} */}

          {/* ── STEP 1: SELECT QUESTIONS ── */}
          {current === 0 && (
            <div className="flex flex-col gap-4 flex-1 min-h-0 h-full">
              <Alert
                message={`The maximum number of questions allowed for a mock test is ${MAX_QUESTIONS}.`} 
                type="info" 
                showIcon 
                className="mb-2 w-fit"
              />
              <Row gutter={[18, 18]} style={{ rowGap: 0, paddingBottom: 16 }}>
                <Col span={24}>
                  <Form.Item
                    label="Test Title"
                    validateStatus={errors.title ? "error" : ""}
                    help={errors.title?.message}
                    required
                  >
                    <Controller
                      name="title"
                      control={control}
                      render={({ field }) => (
                        <Input {...field} placeholder="Mock Test Title" />
                      )}
                    />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="Language"
                    validateStatus={errors.language ? "error" : ""}
                    help={errors.language?.message}
                    required
                  >
                    <Controller
                      name="language"
                      control={control}
                      render={({ field }) => (
                        <Select {...field} options={options.languages} />
                      )}
                    />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="Duration (Minutes)"
                    validateStatus={errors.duration ? "error" : ""}
                    help={errors.duration?.message}
                    required
                  >
                    <Controller
                      name="duration"
                      control={control}
                      render={({ field }) => (
                        <Input
                          {...field}
                          type="number"
                          placeholder="Test Duration"
                        />
                      )}
                    />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="Question Count"
                    validateStatus={
                      errors.questionCount
                        ? "error"
                        : formQuestionCount > MAX_QUESTIONS || (availableCount !== null && formQuestionCount > availableCount)
                          ? "error"
                          : ""
                    }
                    help={
                      errors.questionCount?.message ||
                      (formQuestionCount > MAX_QUESTIONS
                        ? `Maximum ${MAX_QUESTIONS} allowed`
                        : (availableCount !== null && formQuestionCount > availableCount)
                          ? `Only ${availableCount} available for your filters`
                          : "")
                    }
                    required
                  >
                    <Controller
                      name="questionCount"
                      control={control}
                      render={({ field }) => (
                        <Input
                          {...field}
                          type="number"
                          placeholder="Questions Count"
                        />
                      )}
                    />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="Mark Per Question"
                    validateStatus={errors.markPerQuestion ? "error" : ""}
                    help={errors.markPerQuestion?.message}
                    required
                  >
                    <Controller
                      name="markPerQuestion"
                      control={control}
                      render={({ field }) => (
                        <Input
                          {...field}
                          type="number"
                          step="any"
                          placeholder="Mark Per Question"
                        />
                      )}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <div className="flex gap-4 flex-1 min-h-0 h-full">

              {/* Left Filter Panel */}
              <div className="w-full lg:w-72 flex-shrink-0 bg-white border border-slate-200 rounded-xl flex flex-col overflow-y-auto">
                <div className="flex flex-col p-4">
                  {/* Mode Toggle */}
                  <div className="flex items-center justify-center gap-2 mb-4">
                    <button
                      type="button"
                      onClick={() => handleModeChange("manual")}
                      className={`flex items-center justify-center gap-2 px-2 py-2 w-full rounded-xl text-xs font-semibold border-2 transition-all ${mode === "manual"
                        ? "bg-brand-blue text-white border-brand-blue shadow"
                        : "bg-white text-slate-600 border-slate-200 hover:border-brand-blue hover:text-brand-blue"
                        }`}
                    >
                      Manual Select
                    </button>
                    <button
                      type="button"
                      onClick={() => handleModeChange("auto")}
                      className={`flex items-center justify-center gap-2 px-2 py-2 w-full rounded-xl text-xs font-semibold border-2 transition-all ${mode === "auto"
                        ? "bg-brand-green text-white border-brand-green shadow"
                        : "bg-white text-slate-600 border-slate-200 hover:border-brand-green hover:text-brand-green"
                        }`}
                    >
                      Auto Generate
                    </button>
                  </div>

                  {mode === "manual" && (
                    <Form.Item label="Search Questions">
                      <Input
                        placeholder="Search questions..."
                        prefix={<Search size={16} className="text-slate-400" />}
                        value={filterValues.search}
                        onChange={(e) =>
                          setFilterValues((prev) => ({
                            ...prev,
                            search: e.target.value,
                          }))
                        }
                        allowClear
                      />
                    </Form.Item>
                  )}

                  {/* Subjects — Multi-select */}
                  <Form.Item label="Subjects">
                    <Select
                      mode="multiple"
                      placeholder="Select Subjects"
                      options={options.subjects}
                      value={filterValues.subjectIds}
                      allowClear
                      loading={subjectLoading}
                      onPopupScroll={(e) => {
                        const target = e.currentTarget;
                        if (
                          Math.ceil(target.scrollTop + target.offsetHeight) >=
                          target.scrollHeight
                        ) {
                          if (
                            options.subjects.length < subjectTotal &&
                            !subjectLoading
                          ) {
                            fetchSubjects(subjectPage + 1);
                          }
                        }
                      }}
                      onChange={handleSubjectChange}
                    />
                  </Form.Item>

                  {/* Topics — Multi-select, shown when subjects selected */}
                  {filterValues.subjectIds.length > 0 && (
                    <Form.Item label="Topics">
                      <Select
                        mode="multiple"
                        placeholder="Select Topics"
                        options={uniqueTopics}
                        value={filterValues.topics}
                        allowClear
                        loading={topicLoading}
                        onChange={(values) =>
                          setFilterValues((prev) => ({
                            ...prev,
                            topics: values,
                          }))
                        }
                      />
                    </Form.Item>
                  )}

                  <Form.Item label="Difficulty">
                    <Select
                      placeholder="Select Difficulty"
                      options={[
                        { label: "All", value: "" },
                        ...options.difficulty,
                      ]}
                      allowClear
                      onSelect={(value) =>
                        setFilterValues((prev) => ({
                          ...prev,
                          difficulty: value,
                        }))
                      }
                      value={filterValues.difficulty || undefined}
                      onClear={() =>
                        setFilterValues((prev) => ({
                          ...prev,
                          difficulty: undefined,
                        }))
                      }
                    />
                  </Form.Item>

                  {mode === "manual" && (
                    <Form.Item label="Question Usage">
                      <Select
                        placeholder="All Questions"
                        options={[
                          { label: "All Questions", value: "" },
                          { label: "Available Only", value: "available" },
                          { label: "Used Only", value: "used" },
                        ]}
                        allowClear
                        onSelect={(value) =>
                          setFilterValues((prev) => ({
                            ...prev,
                            questionUsage: value,
                          }))
                        }
                        value={filterValues.questionUsage || undefined}
                        onClear={() =>
                          setFilterValues((prev) => ({
                            ...prev,
                            questionUsage: undefined,
                          }))
                        }
                      />
                    </Form.Item>
                  )}

                  <Button
                    className="w-full mt-2"
                    icon={<RotateCcw size={16} />}
                    onClick={() =>
                      setFilterValues({
                        ...filterInitial
                      })
                    }
                  >
                    Reset Filters
                  </Button>

                  {/* Auto mode controls */}
                  {mode === "auto" && (
                    <>
                      <div className="mt-6 flex flex-col gap-3">
                        <div className="text-xs text-slate-500 mb-2">
                          {autoPoolTotal < MAX_QUESTIONS
                            ? `Only ${autoPoolTotal} questions available for your filters.`
                            : `Up to ${MAX_QUESTIONS} questions allowed per test.`
                          }
                        </div>
                        <div className="flex gap-2">
                          <Button onClick={handleClearAuto} className="flex-1">
                            Clear
                          </Button>
                          <Button
                            type="primary"
                            icon={<Wand2 size={15} />}
                            loading={autoLoading}
                            onClick={handleAutoGenerate}
                            className="flex-[2] bg-brand-green hover:bg-brand-green! border-brand-green!"
                          >
                            Generate
                          </Button>
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </div>

              {/* Right Main Panel */}
              <div className="flex-1 flex flex-col gap-3 min-w-0">

                <div className="mt-4 grid grid-cols-4 bg-[#1677ff] text-white rounded-xl shadow-md divide-x divide-white/10 p-3.5 items-center text-center">
                  <div className="flex flex-col gap-1.5 px-2">
                    <span className="text-[10px] font-medium text-indigo-100 uppercase tracking-wide leading-tight">
                      Total Questions
                    </span>
                    {availableCountLoading ? (
                      <div className="flex justify-center items-center h-6 mt-1">
                        <Spin size="small" className="brightness-0 invert scale-75" />
                      </div>
                    ) : (
                      <span className="text-xl font-bold leading-none mt-1">
                        {totalCount !== null ? totalCount.toLocaleString() : 0}
                      </span>
                    )}
                  </div>

                  <div className="flex flex-col gap-1.5 px-2">
                    <span className="text-[10px] font-medium text-indigo-100 uppercase tracking-wide leading-tight">
                      Available Questions
                    </span>
                    {availableCountLoading ? (
                      <div className="flex justify-center items-center h-6 mt-1">
                        <Spin size="small" className="brightness-0 invert scale-75" />
                      </div>
                    ) : (
                      <span className="text-xl font-bold leading-none mt-1">
                        {availableCount !== null ? availableCount.toLocaleString() : 0}
                      </span>
                    )}
                  </div>

                  <div className="flex flex-col gap-1.5 px-2">
                    <span className="text-[10px] font-medium text-indigo-100 uppercase tracking-wide leading-tight">
                      {mode === "auto" ? "Generated" : "Selected"}
                    </span>
                    <span className="text-xl font-bold leading-none mt-1">
                      {mode === "auto" ? autoGenerated.length : selectedQuestions.length}
                    </span>
                  </div>

                  <div className="flex flex-col gap-1.5 px-2">
                    <span className="text-[10px] font-medium text-indigo-100 uppercase tracking-wide leading-tight">
                      Balance Questions
                    </span>
                    {availableCountLoading ? (
                      <div className="flex justify-center items-center h-6 mt-1">
                        <Spin size="small" className="brightness-0 invert scale-75" />
                      </div>
                    ) : (
                      <span className="text-xl font-bold leading-none mt-1">
                        {availableCount !== null ? Math.max(0, availableCount - (mode === "auto" ? autoGenerated.length : selectedQuestions.length)).toLocaleString() : 0}
                      </span>
                    )}
                  </div>

                  {/* <div className="flex flex-col gap-1.5 px-2">
                    <span className="text-[10px] font-medium text-indigo-100 uppercase tracking-wide leading-tight">
                      Total Marks
                    </span>
                    <span className="text-xl font-bold leading-none mt-1">
                      {totalCalculatedMarks}
                    </span>
                  </div> */}
                </div>

                {/* ── MANUAL MODE ── */}
                {mode === "manual" && (
                  <div className="flex-1 flex flex-col min-h-0">
                    {/* Select All */}
                    {!qLoading && eligiblePageQuestions.length > 0 && (
                      <div
                        className={`flex items-center gap-3 px-4 py-3 border-2 rounded-xl mb-3 transition-all ${isAllEligibleSelected
                          ? "bg-blue-50/50 border-blue-500 shadow-sm"
                          : "bg-slate-50/80 border-slate-200 hover:bg-slate-50 hover:border-blue-300"
                          }`}
                      >
                        <button
                          type="button"
                          onClick={handleSelectAllPage}
                          className={`w-5 h-5 rounded border flex items-center justify-center transition-colors ${isAllEligibleSelected
                            ? "bg-blue-600 border-blue-600 text-white"
                            : "bg-white border-slate-400 text-transparent hover:border-blue-500"
                            }`}
                        >
                          <Check size={14} strokeWidth={3} />
                        </button>
                        <span
                          onClick={handleSelectAllPage}
                          className={`text-sm font-bold select-none cursor-pointer ${isAllEligibleSelected
                            ? "text-blue-700"
                            : "text-slate-600"
                            }`}
                        >
                          {isAllEligibleSelected
                            ? "Deselect All on Current Page"
                            : "Select All Available on Current Page"}
                        </span>
                      </div>
                    )}

                    <div className="flex-1 overflow-y-auto space-y-2 custom-scrollbar pr-1 min-h-[300px]">
                      {qLoading ? (
                        <div className="h-full flex justify-center items-center">
                          <Spin />
                        </div>
                      ) : (
                        <>
                          {questions.map((q) => {
                            const usedInMockTests: {
                              id: string;
                              title: string;
                            }[] = (q as any).usedInMockTests || [];
                            const isDisabled = usedInMockTests.length > 0;
                            const isSelected = selectedQuestions.some(
                              (item) => item.id === q.id
                            );
                            const currentLimit = (formQuestionCount && Number(formQuestionCount) > 0) ? Number(formQuestionCount) : MAX_QUESTIONS;
                            const atLimit =
                              selectedQuestions.length >= currentLimit &&
                              !isSelected;
                            return (
                              <div
                                key={q.id}
                                className={`group p-4 rounded-xl border transition-all ${isDisabled
                                  ? "cursor-not-allowed opacity-60 bg-slate-50 border-slate-200"
                                  : atLimit
                                    ? "cursor-not-allowed opacity-60 bg-slate-50 border-slate-200"
                                    : isSelected
                                      ? "bg-indigo-50 border-indigo-200 hover:shadow-md"
                                      : "bg-white border-slate-200 hover:shadow-md"
                                  }`}
                              >
                                <div className="flex items-start gap-4">
                                  <div className="pt-1">
                                    <Tooltip
                                      title={
                                        atLimit
                                          ? `Cannot select more than your limit of question count ${currentLimit}`
                                          : undefined
                                      }
                                    >
                                      <button
                                        type="button"
                                        disabled={isDisabled || atLimit}
                                        onClick={() =>
                                          !isDisabled &&
                                          !atLimit &&
                                          toggleQuestion(q)
                                        }
                                        className={`w-5 h-5 rounded border flex items-center justify-center transition-colors ${isSelected
                                          ? "bg-indigo-600 border-indigo-600 text-white"
                                          : "bg-white border-slate-300 text-transparent hover:border-indigo-400"
                                          } ${isDisabled || atLimit
                                            ? "cursor-not-allowed"
                                            : ""
                                          }`}
                                      >
                                        <Check size={14} strokeWidth={3} />
                                      </button>
                                    </Tooltip>
                                  </div>
                                  <div className="flex-1 min-w-0">
                                    <p
                                      className={`text-sm font-medium ${isSelected
                                        ? "text-indigo-900"
                                        : "text-slate-800"
                                        } line-clamp-2`}
                                    >
                                      {q.questionText}
                                    </p>
                                    <div className="flex flex-wrap items-center gap-1 mt-2">
                                      <Tag
                                        color={
                                          q.difficulty === "Easy"
                                            ? "green"
                                            : q.difficulty === "Medium"
                                              ? "blue"
                                              : "red"
                                        }
                                        className="rounded-lg"
                                      >
                                        {q.difficulty}
                                      </Tag>
                                      {q.language && (
                                        <Tag color="purple" className="rounded-lg">
                                          {q.language}
                                        </Tag>
                                      )}
                                      {q.topic && (
                                        <Tag color="cyan" className="rounded-lg">
                                          {q.topic}
                                        </Tag>
                                      )}
                                      {/* <Tag color="blue" className="rounded-lg">
                                        {q.marks} Marks
                                      </Tag> */}
                                      {isDisabled &&
                                        usedInMockTests.map((mt) => (
                                          <Tag
                                            key={mt.id}
                                            color="red"
                                            className="rounded-lg"
                                          >
                                            Already in: {mt.title}
                                          </Tag>
                                        ))}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            );
                          })}
                          {questions.length === 0 && (
                            <div className="text-center py-12 text-slate-400">
                              No questions match your filters.
                            </div>
                          )}
                        </>
                      )}
                    </div>

                    {qTotal > 0 && (
                      <div className="flex justify-end mt-3">
                        <Pagination
                          current={qPage}
                          total={qTotal}
                          pageSize={qLimit}
                          showSizeChanger
                          pageSizeOptions={["10", "20", "50", "100"]}
                          onChange={(p, s) => {
                            setQPage(p);
                            setQLimit(s);
                            fetchQuestions(p, s, filterValues);
                          }}
                        />
                      </div>
                    )}
                  </div>
                )}

                {/* ── AUTO GENERATE MODE ── */}
                {mode === "auto" && (
                  <div className="flex-1 flex flex-col min-h-0">
                    {/* Generated Question Cards */}
                    <div className="flex-1 overflow-y-auto space-y-2 custom-scrollbar pr-1 min-h-[300px]">
                      {autoLoading ? (
                        <div className="h-full flex justify-center items-center">
                          <Spin />
                        </div>
                      ) : autoGenerated.length === 0 ? (
                        <div className="text-center py-16 text-slate-400">
                          <Wand2 size={40} className="mx-auto mb-3 opacity-30" />
                          <p>
                            Set your filters and click{" "}
                            <strong>Generate</strong> to auto-select questions.
                          </p>
                        </div>
                      ) : (
                        autoGenerated
                          .slice(
                            (autoGenPage - 1) * autoGenLimit,
                            autoGenPage * autoGenLimit
                          )
                          .map((q) => {
                            const isShuffling = shufflingId === q.id;
                            return (
                              <div
                                key={q.id}
                                className="group p-4 rounded-xl border bg-purple-50 border-purple-200 hover:shadow-md transition-all"
                              >
                                <div className="flex items-start gap-4">
                                  <div className="flex-1 min-w-0">
                                    <p className="text-sm font-medium text-purple-900 line-clamp-2">
                                      {q.questionText}
                                    </p>
                                    <div className="flex flex-wrap items-center gap-1 mt-2">
                                      <Tag
                                        color={
                                          q.difficulty === "Easy"
                                            ? "green"
                                            : q.difficulty === "Medium"
                                              ? "blue"
                                              : "red"
                                        }
                                        className="rounded-lg"
                                      >
                                        {q.difficulty}
                                      </Tag>
                                      {q.language && (
                                        <Tag color="purple" className="rounded-lg">
                                          {q.language}
                                        </Tag>
                                      )}
                                      {q.topic && (
                                        <Tag color="cyan" className="rounded-lg">
                                          {q.topic}
                                        </Tag>
                                      )}
                                      {/* <Tag color="blue" className="rounded-lg">
                                        {q.marks} Marks
                                      </Tag> */}
                                      {(q as any).subject && (
                                        <Tag color="geekblue" className="rounded-lg">
                                          {(q as any).subject}
                                        </Tag>
                                      )}
                                    </div>
                                  </div>
                                  <button
                                    type="button"
                                    title={
                                      isShuffling
                                        ? "Shuffling..."
                                        : "Get a different question"
                                    }
                                    disabled={isShuffling}
                                    onClick={() => shuffleQuestion(q.id)}
                                    className={`flex-shrink-0 flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all ${!isShuffling
                                      ? "bg-white border-purple-300 text-purple-700 hover:bg-purple-100 hover:border-purple-500"
                                      : "bg-slate-100 border-slate-200 text-slate-400 cursor-not-allowed"
                                      }`}
                                  >
                                    {isShuffling ? (
                                      <Spin size="small" />
                                    ) : (
                                      <Shuffle size={13} />
                                    )}
                                    {isShuffling ? "..." : "Shuffle"}
                                  </button>
                                </div>
                              </div>
                            );
                          })
                      )}
                    </div>
                    {autoGenerated.length > 0 && (
                      <div className="flex justify-end mt-3 mb-2">
                        <Pagination
                          current={autoGenPage}
                          total={autoGenerated.length}
                          pageSize={autoGenLimit}
                          showSizeChanger
                          pageSizeOptions={["10", "20", "50", "100"]}
                          onChange={(p, s) => {
                            setAutoGenPage(p);
                            setAutoGenLimit(s);
                          }}
                        />
                      </div>
                    )}
                  </div>
                )}
              </div>
            </div>
            </div>
          )}

          {/* ── STEP 2: SAVE ── */}
          {current === 1 && (
            <>
              {/* Summary Card */}
              <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                <div className="col-span-2">
                  <h3 className="text-lg font-bold text-slate-800">
                    {watch("title") || "Empty Title"}
                  </h3>
                  <div className="flex flex-wrap gap-2 mt-4">
                    {watch("language") && (
                      <Tag color="green" className="rounded-lg">
                        {watch("language")}
                      </Tag>
                    )}
                  </div>
                </div>
                <div className="space-y-4">
                  <div className="flex items-center space-x-3 text-slate-600">
                    <Hash size={18} className="text-indigo-500" />
                    <span className="text-sm">
                      <span className="font-semibold text-slate-900">
                        {selectedQuestions.length}
                      </span>{" "}
                      Questions
                    </span>
                  </div>
                  <div className="flex items-center space-x-3 text-slate-600">
                    <Check size={18} className="text-indigo-500" />
                    <span className="text-sm">
                      <span className="font-semibold text-slate-900">
                        {watch("markPerQuestion")}
                      </span>{" "}
                      Mark Per Question
                    </span>
                  </div>
                </div>
                <div className="space-y-4">
                  <div className="flex items-center space-x-3 text-slate-600">
                    <CheckCircle size={18} className="text-indigo-500" />
                    <span className="text-sm">
                      <span className="font-semibold text-slate-900">
                        {totalCalculatedMarks}
                      </span>{" "}
                      Total Marks
                    </span>
                  </div>
                  <div className="flex items-center space-x-3 text-slate-600">
                    <Clock size={18} className="text-indigo-500" />
                    <span className="text-sm">
                      <span className="font-semibold text-slate-900">
                        {watch("duration")}
                      </span>{" "}
                      Minutes
                    </span>
                  </div>
                </div>
              </div>

              {/* Questions Sequence List */}
              <div className="space-y-4">
                <h3 className="font-semibold text-slate-800 border-b border-slate-200 pb-2">
                  Questions Sequence
                </h3>
                {selectedQuestions
                  .slice(
                    (sequencePage - 1) * sequenceLimit,
                    sequencePage * sequenceLimit
                  )
                  .map((q, idx) => (
                    <div
                      key={q.id}
                      className="bg-white border border-slate-200 rounded-lg p-4 flex gap-4 items-start group hover:border-indigo-300 transition-colors"
                    >
                      <div className="w-8 h-8 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center font-bold text-sm flex-shrink-0">
                        {(sequencePage - 1) * sequenceLimit + idx + 1}
                      </div>
                      <div className="flex-1">
                        <div className="flex justify-between items-start">
                          <p className="text-slate-800 font-medium text-sm">
                            {q.questionText}
                          </p>
                          <div className="flex items-center gap-2 ml-3 flex-shrink-0">
                            <button
                              type="button"
                              onClick={() => setPreviewQuestion(q)}
                              className="text-slate-300 hover:text-indigo-600 transition-colors"
                            >
                              <Eye size={18} />
                            </button>
                            <button
                              type="button"
                              className="text-slate-300 hover:text-red-500 transition-colors"
                              onClick={() => removeSelectedQuestion(q.id)}
                            >
                              <Trash2 size={16} />
                            </button>
                          </div>
                        </div>
                        <div className="flex flex-wrap gap-2 mt-2 text-xs text-slate-500">
                          <Tag
                            color={
                              q.difficulty === "Easy"
                                ? "green"
                                : q.difficulty === "Medium"
                                  ? "blue"
                                  : "red"
                            }
                            className="rounded-lg"
                          >
                            {q.difficulty}
                          </Tag>
                          {q.language && (
                            <Tag color="purple" className="rounded-lg">
                              {q.language}
                            </Tag>
                          )}
                          {q.topic && (
                            <Tag color="cyan" className="rounded-lg">
                              {q.topic}
                            </Tag>
                          )}
                          {(q as any).sourceType === "auto" && (
                            <Tag color="geekblue" className="rounded-lg">
                              Auto Generated
                            </Tag>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                {selectedQuestions.length === 0 && (
                  <div className="text-center py-8 text-slate-400 border-2 border-dashed border-slate-200 rounded-xl">
                    No questions selected yet. Go back to step 2.
                  </div>
                )}
                {selectedQuestions.length > 0 && (
                  <div className="flex justify-end mt-3">
                    <Pagination
                      current={sequencePage}
                      total={selectedQuestions.length}
                      pageSize={sequenceLimit}
                      showSizeChanger
                      pageSizeOptions={["10", "20", "50", "100"]}
                      onChange={(p, s) => {
                        setSequencePage(p);
                        setSequenceLimit(s);
                      }}
                    />
                  </div>
                )}
              </div>
            </>
          )}

          {current !== 0 && (
            <div className="flex justify-end mt-8 gap-3">
              {current > 0 && (
                <Button onClick={() => setCurrent(current - 1)}>Back</Button>
              )}
              {current === 1 && (
                <>
                  <Button
                    loading={submitting}
                    onClick={handleSubmit((d) => onSubmit(d, false))}
                  >
                    Save
                  </Button>
                  <Button
                    type="primary"
                    loading={submitting}
                    onClick={handleSubmit((d) => onSubmit(d, true))}
                  >
                    Save &amp; Publish
                  </Button>
                </>
              )}
            </div>
          )}

          {current === 0 && (
            <div className="flex justify-end mt-4 gap-3 pr-4">
              <Button
                onClick={async () => {
                  const valid = await trigger([
                    "title",
                    "language",
                    "duration",
                    "questionCount",
                    "markPerQuestion"
                  ]);
                  if (!valid) return;
                  
                  if (formQuestionCount && selectedQuestions.length !== Number(formQuestionCount)) {
                    toast.error(`Please select exactly ${formQuestionCount} questions as per your Question Count.`);
                    return;
                  }

                  if (!formQuestionCount && selectedQuestions.length === 0) {
                    toast.error("Please select at least 1 question.");
                    return;
                  }
                  setCurrent(current + 1);
                }}
                type="primary"
              >
                Next
              </Button>
            </div>
          )}
        </Form>
      </Card>
      <Modal
        isOpen={previewQuestion !== null}
        onClose={() => setPreviewQuestion(null)}
        title="Preview Question"
      >
        <QuestionCard question={previewQuestion} />
      </Modal>
    </div>
  );
}