import React, { useEffect, useState } from "react";
import {
  FileStack,
  ClipboardList,
  Search,
  Pencil,
  ChevronDown,
  ChevronRight,
  Clock,
  Info,
  CheckCircle,
  Plus,
  Trash2,
  Share2,
} from "lucide-react";
import {
  Button,
  Empty,
  Input,
  Spin,
  Pagination,
  Switch,
  Form,
  InputNumber,
  Select,
  DatePicker,
  Popconfirm,
  Tooltip
} from "antd";
import { Accordion, AccordionRow } from "../shared/Accordion";
import {
  buildQuery,
  difficultyColor,
  getAxiosErrorMessage,
} from "@/utils/index.utils";
import {
  Difficulty,
  IExam,
  IOldQuestionPaper,
  IOldQuestionPaperYear,
  IOldQuestions,
} from "@/types";
import { fetchLanguageOptions } from "@/hooks/useLanguageOptions";
import { API_Instance } from "@/api/axios.instance";
import API_Constants from "@/constants/api.constants";
import dayjs from "dayjs";
import toast from "react-hot-toast";
import { useDebounce } from "@/hooks/useDebounce";
import {
  useForm,
  Controller,
  type SubmitHandler,
  Resolver,
} from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import Modal from "@/components/shared/Modal";
import { useNavigate, useSearchParams } from "react-router-dom";
import ROUTE_CONSTANTS from "@/constants/route.constants";

type OldQuestionFormValues = {
  exam: string;
  year: string;
  language: string;
  title: string;
  duration: number;
  marks: number;
};

const schema = yup.object({
  exam: yup.string().required("Exam is required"),
  year: yup.string().required("Year is required"),
  // language: yup.string().required("Language is required"),
  title: yup.string().required("Title is required"),
  duration: yup.number().required("Duration is required").min(1),
  marks: yup.number().required("Marks is required").min(1),
});

const InitialValues: OldQuestionFormValues = {
  exam: "",
  year: "",
  language: "English",
  title: "",
  duration: 0,
  marks: 0,
};

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

const initialPagination = {
  page: 1,
  limit: 10,
  total: 0,
  totalPages: 0,
};

export const OldQuestionTreeCard = ({
  exam,
  isOpen,
  onToggle,
  refreshTrigger,
}: {
  exam: IExam;
  isOpen?: boolean;
  onToggle?: () => void;
  refreshTrigger?: number;
}) => {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const openPaperId = searchParams.get("paperId");
  const [languageOptions, setLanguageOptions] = useState<any[]>([]);
  const [openQuestionId, setOpenQuestionId] = useState<string | null>(null);
  const [papers, setPapers] = useState<IOldQuestionPaperYear[]>([]);
  const [questions, setQuestions] = useState<IOldQuestions[]>([]);
  const [papersLoading, setPapersLoading] = useState(false);
  const [questionsLoading, setQuestionsLoading] = useState(false);
  const [paperSearch, setPaperSearch] = useState("");
  const [examSearch, setExamSearch] = useState("");
  const [questionSearch, setQuestionSearch] = useState("");
  const debouncedPaperSearch = useDebounce(paperSearch, 600);

  useEffect(() => {
    const loadLanguages = async () => {
      try {
        const options = await fetchLanguageOptions();
        setLanguageOptions(options);
      } catch {
        setLanguageOptions([]);
      }
    };

    void loadLanguages();
  }, []);
  const debouncedQuestionSearch = useDebounce(questionSearch, 600);
  const debouncedExamSearch = useDebounce(examSearch, 600);
  const [examPagination, setExamPagination] = useState(initialPagination);
  const [questionPagination, setQuestionPagination] =
    useState(initialPagination);
  const [paperPagination, setPaperPagination] = useState(initialPagination);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingPaper, setEditingPaper] = useState<IOldQuestionPaper | null>(
    null,
  );

  const {
    control,
    handleSubmit,
    reset,
    getValues,
    formState: { isSubmitting },
  } = useForm<OldQuestionFormValues>({
    resolver,
    defaultValues: InitialValues,
  });

  const getPapers = async () => {
    setPapersLoading(true);
    const query = buildQuery(
      {
        exam: exam.id,
        search: debouncedPaperSearch,
      },
      paperPagination.page,
      paperPagination.limit,
    );
    try {
      const res = await API_Instance.get(
        `${API_Constants.oldQuestionPapers}?${query}`,
      );
      setPapers(res.data.data);
      setPaperPagination(res.data.meta || initialPagination);
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    } finally {
      setPapersLoading(false);
    }
  };

  useEffect(() => {
    // if (!exam) return;
    getPapers();
  }, [paperPagination.page, paperPagination.limit, debouncedPaperSearch, refreshTrigger]);

  const getPaperQuestions = async (paperId: string, page = 1, limit = 10) => {
    setQuestionsLoading(true);
    const query = buildQuery(
      {
        search: debouncedQuestionSearch,
      },
      page,
      limit,
    );
    try {
      const res = await API_Instance.get(
        `${API_Constants.oldQuestionPapers}/${paperId}?${query}`,
      );
      setQuestions(res.data.questions || []);
      setQuestionPagination(res.data.meta || initialPagination);
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    } finally {
      setQuestionsLoading(false);
    }
  };

  useEffect(() => {
    if (openPaperId) {
      getPaperQuestions(openPaperId, 1, questionPagination.limit);
    }
  }, [debouncedQuestionSearch, refreshTrigger, openPaperId]);

  const openAddModal = () => {
    setEditingPaper(null);
    reset({
      ...InitialValues,
      exam: exam.id,
    });
    setIsModalOpen(true);
  };

  const openEditModal = async (paperId: string) => {
    try {
      const res = await API_Instance.get(
        `${API_Constants.oldQuestionPapers}/${paperId}?page=1&limit=0`,
      );
      const paper = res.data.data;
      setEditingPaper(paper);
      reset({
        exam: paper.examId || paper.exam,
        year: paper.year,
        language: paper.language,
        title: paper.title,
        duration: Number(paper.duration),
        marks: paper.marks,
      });
      setIsModalOpen(true);
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    }
  };

  const onSubmit: SubmitHandler<OldQuestionFormValues> = async (data) => {
    try {
      if (editingPaper) {
        await API_Instance.put(
          `${API_Constants.oldQuestionPapers}/${editingPaper.id}`,
          { ...data, duration: data.duration.toString(), resync: true },
        );
        toast.success("Paper updated & questions synced");
      } else {
        await API_Instance.post(API_Constants.oldQuestionPapers, {
          ...data,
          duration: data.duration.toString(),
        });
        toast.success("Paper created successfully");
      }
      getPapers();
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    } finally {
      handleModalClose();
    }
  };

  const handleModalClose = () => {
    setIsModalOpen(false);
    reset();
    setEditingPaper(null);
  };

  const handleDeletePaper = async (paperId: string) => {
    try {
      await API_Instance.delete(
        `${API_Constants.oldQuestionPapers}/${paperId}`,
      );
      toast.success("Paper deleted successfully");
      getPapers();
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    }
  };

  const handleDeleteQuestion = async (questionId: string) => {
    try {
      await API_Instance.delete(`${API_Constants.oldQuestions}/${questionId}`);
      toast.success("Question deleted successfully");
      if (openPaperId) {
        getPaperQuestions(
          openPaperId,
          questionPagination.page,
          questionPagination.limit,
        );
        getPapers();
      }
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    }
  };

  const handlePublishToggle = async (paperId: string, publish: boolean) => {
    try {
      await API_Instance.put(`${API_Constants.oldQuestionPapers}/${paperId}`, {
        publish,
      });
      toast.success("Paper published successfully");
      getPapers();
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    }
  };

  return (
    <>
      <Accordion
        leftIcon={<FileStack size={22} />}
        title={
          <div>
            <h2 className="text-md font-semibold text-slate-900 flex items-center gap-2">
              {exam.baseExamName || exam.examName}
            </h2>
            {exam.papersCount !== undefined && (
              <p className="text-xs text-slate-500 mt-0.5 flex items-center gap-2">
                <span>{exam.papersCount || 0} Papers</span>
              </p>
            )}
          </div>
        }
        rightActions={
          <div
            className="flex items-center gap-1 pl-2 border-slate-200 ml-2"
            onClick={(e) => e.stopPropagation()}
          >
            <Tooltip title={exam.sharedFromName ? "Cannot add paper to shared exam" : ""}>
              <Button onClick={() => openAddModal()} disabled={!!exam.sharedFromName}>Add New Paper</Button>
            </Tooltip>
          </div>
        }
        isOpen={isOpen}
        onToggle={onToggle}
        content={
          <>
            <div className="mt-2 flex gap-3 items-end w-[18rem] mb-4">
              <Input
                placeholder={"Search Title or Year..."}
                prefix={<Search size={16} />}
                autoComplete="off"
                allowClear
                onChange={(e) => {
                  setPaperSearch(e.target.value);
                }}
              />
            </div>
            <Spin spinning={papersLoading}>
              {papers.length === 0 ? (
                <Empty />
              ) : (
                <div className="pl-6 border-l space-y-1">
                  {papers.map((paper) => (
                    <AccordionRow
                      key={paper.id}
                      title={
                        <div className="flex items-center gap-2">
                          <span className="font-semibold text-slate-700">
                            {paper.title} ({paper.year})
                          </span>
                          {paper.referenceSourceId && (
                            <span className="bg-purple-100 text-purple-700 text-xs px-2 py-0.5 rounded-full font-medium flex items-center gap-1">
                              <Share2 size={12} /> Shared by Exam Infra
                            </span>
                          )}
                        </div>
                      }
                      rightActions={
                        <div className="w-max flex items-center gap-2">
                          <div className="text-sm text-slate-500">
                            Total Questions - {paper.totalQuestions}
                          </div>
                          <div
                            className="flex items-center gap-1 pl-2 border-l border-slate-200 ml-2"
                            onClick={(e) => e.stopPropagation()}
                          >
                            <Tooltip
                              title={
                                paper.totalQuestions === 0
                                  ? "Cannot publish because this paper has 0 questions"
                                  : "Toggle publish status"
                              }
                            >
                              <span>
                                <Switch
                                  checkedChildren="Published"
                                  unCheckedChildren="Yet to publish"
                                  checked={paper.publish}
                                  disabled={paper.totalQuestions === 0}
                                  onChange={(val) =>
                                    handlePublishToggle(paper.id, val)
                                  }
                                />
                              </span>
                            </Tooltip>

                            <Tooltip title={paper.referenceSourceId ? "Shared PYQ cannot be edited" : "Edit Paper"}>
                              <button
                                className={`p-1.5 rounded-xl transition-colors ${paper.referenceSourceId ? 'text-slate-300 cursor-not-allowed' : 'text-slate-400 hover:text-blue-600 hover:bg-blue-50'}`}
                                onClick={(e) => {
                                  e.stopPropagation();
                                  if (!paper.referenceSourceId) {
                                    openEditModal(paper.id!);
                                  }
                                }}
                                disabled={!!paper.referenceSourceId}
                              >
                                <Pencil size={15} />
                              </button>
                            </Tooltip>
                            <Tooltip title={paper.referenceSourceId ? "Shared PYQ cannot be deleted" : "Delete Paper"}>
                              <div>
                                <Popconfirm
                                  title="Delete the Paper"
                                  description="Are you sure to delete this paper?"
                                  onConfirm={() =>
                                    !paper.referenceSourceId && paper.id && handleDeletePaper(paper.id)
                                  }
                                  okText="Yes"
                                  cancelText="No"
                                  disabled={!!paper.referenceSourceId}
                                >
                                  <button
                                    className={`p-1.5 rounded-xl transition-colors ${paper.referenceSourceId ? 'text-slate-300 cursor-not-allowed' : 'text-slate-400 hover:text-red-600 hover:bg-red-50'}`}
                                    disabled={!!paper.referenceSourceId}
                                  >
                                    <Trash2 size={15} />
                                  </button>
                                </Popconfirm>
                              </div>
                            </Tooltip>
                          </div>
                        </div>
                      }
                      isOpen={openPaperId === paper.id}
                      onToggle={() => {
                        const newParams = new URLSearchParams(searchParams);
                        if (openPaperId === paper.id) {
                          newParams.delete("paperId");
                        } else {
                          newParams.set("paperId", paper.id || "");
                        }
                        setSearchParams(newParams, { replace: true });
                        setQuestionSearch("");
                        if (paper.id && openPaperId !== paper.id) {
                          getPaperQuestions(paper.id);
                        }
                      }}
                      content={
                        <>
                          <div className="flex flex-wrap items-center justify-between gap-4 py-3 px-4 rounded-xl bg-slate-50 border border-slate-100 mt-2 mb-4">
                            <div className="flex flex-wrap items-center gap-6">
                              <div className="flex items-center gap-2">
                                <Clock size={16} className="text-blue-500" />
                                <div className="flex flex-col">
                                  <span className="text-[10px] uppercase tracking-wider text-slate-400 font-bold">
                                    Duration
                                  </span>
                                  <span className="text-sm font-semibold text-slate-700">
                                    {paper.duration} Mins
                                  </span>
                                </div>
                              </div>
                              <div className="flex items-center gap-2">
                                <ClipboardList
                                  size={16}
                                  className="text-emerald-500"
                                />
                                <div className="flex flex-col">
                                  <span className="text-[10px] uppercase tracking-wider text-slate-400 font-bold">
                                    Marks
                                  </span>
                                  <span className="text-sm font-semibold text-slate-700">
                                    {paper.marks} Marks
                                  </span>
                                </div>
                              </div>
                              {/* <div className="flex items-center gap-2">
                                <Info size={16} className="text-amber-500" />
                                <div className="flex flex-col">
                                  <span className="text-[10px] uppercase tracking-wider text-slate-400 font-bold">
                                    Language
                                  </span>
                                  <span className="text-sm font-semibold text-slate-700">
                                    {paper.language}
                                  </span>
                                </div>
                              </div> */}
                            </div>

                            <Tooltip title={paper.referenceSourceId ? "Cannot add questions to shared paper" : ""}>
                              <Button
                                type="primary"
                                icon={<Plus size={16} />}
                                disabled={!!paper.referenceSourceId}
                                onClick={(e) => {
                                  e.stopPropagation();
                                  navigate(
                                    ROUTE_CONSTANTS.OldQuestionsBankCreate,
                                    {
                                      state: paper,
                                    },
                                  );
                                }}
                              >
                                Add Question
                              </Button>
                            </Tooltip>
                          </div>

                          <div className="mt-2 flex gap-3 items-end w-[18rem]">
                            <Input
                              placeholder={"Search Questions"}
                              prefix={<Search size={16} />}
                              autoComplete="off"
                              allowClear
                              onChange={(e) => {
                                setQuestionSearch(e.target.value);
                              }}
                            />
                          </div>
                          <Spin spinning={questionsLoading}>
                            {questions.length === 0 && !questionsLoading ? (
                              <div className="min-h-[300px] flex items-center justify-center">
                                <Empty
                                  description={
                                    debouncedQuestionSearch
                                      ? "No question found for your search"
                                      : "No question available"
                                  }
                                />
                              </div>
                            ) : (
                              <>
                                {questions.length > 0 &&
                                  questions.map((q) => {
                                    const isQuestionOpen =
                                      openQuestionId === q.id;
                                    return (
                                      <AccordionRow
                                        key={q.id}
                                        hideIcon
                                        className="bg-white shadow-sm border border-slate-100 overflow-hidden my-2"
                                        title={
                                          <div
                                            className={`
                                      flex items-center gap-4 p-0 cursor-pointer transition-colors duration-200
                                    `}
                                          >
                                            <div className="text-slate-400 transition-transform duration-200">
                                              {isQuestionOpen ? (
                                                <ChevronDown size={14} />
                                              ) : (
                                                <ChevronRight size={14} />
                                              )}
                                            </div>

                                            <div className="flex-1 grid grid-cols-1 xl:grid-cols-12 gap-4 items-center">
                                              <div className="xl:col-span-6 flex items-center gap-3">
                                                <div className="hidden sm:flex items-center justify-center p-1 rounded bg-slate-100 text-brand-blue shrink-0">
                                                  <ClipboardList size={20} />
                                                </div>
                                                <h3
                                                  className={`text-sm font-medium text-left leading-relaxed line-clamp-1 ${isQuestionOpen
                                                    ? "text-brand-blue"
                                                    : "text-slate-700"
                                                    }`}
                                                >
                                                  {q.questionText}
                                                </h3>
                                              </div>
                                              <div className="xl:col-span-6 flex flex-wrap xl:justify-end items-center gap-x-4 gap-y-2 mt-2 xl:mt-0">
                                                {q.updatedAt && (
                                                  <div className="hidden 2xl:flex items-center gap-1.5 text-[11px] font-medium italic text-slate-400 min-w-[80px] justify-end">
                                                    <Clock size={12} />
                                                    <span>
                                                      {dayjs(
                                                        q.updatedAt,
                                                      ).format(
                                                        "DD-MM-YYYY hh:mm A",
                                                      )}
                                                    </span>
                                                  </div>
                                                )}
                                                <div
                                                  className="flex items-center gap-1 pl-2 border-l border-slate-200 ml-2"
                                                  onClick={(e) =>
                                                    e.stopPropagation()
                                                  }
                                                >
                                                  <Tooltip title={paper.referenceSourceId ? "Shared questions cannot be edited" : "Edit Question"}>
                                                    <button
                                                      className={`p-1.5 rounded-xl transition-colors ${paper.referenceSourceId ? 'text-slate-300 cursor-not-allowed' : 'text-slate-400 hover:text-blue-600 hover:bg-blue-50'}`}
                                                      disabled={!!paper.referenceSourceId}
                                                      onClick={() =>
                                                        !paper.referenceSourceId && navigate(
                                                          ROUTE_CONSTANTS.OldQuestionsBankEdit,
                                                          {
                                                            state: q,
                                                          },
                                                        )
                                                      }
                                                    >
                                                      <Pencil size={15} />
                                                    </button>
                                                  </Tooltip>
                                                  <Tooltip title={paper.referenceSourceId ? "Shared questions cannot be deleted" : "Delete Question"}>
                                                    <div>
                                                      <Popconfirm
                                                        title="Delete the Question"
                                                        description="Are you sure to delete this question?"
                                                        onConfirm={() =>
                                                          !paper.referenceSourceId && handleDeleteQuestion(q.id)
                                                        }
                                                        okText="Yes"
                                                        cancelText="No"
                                                        disabled={!!paper.referenceSourceId}
                                                      >
                                                        <button
                                                          className={`p-1.5 rounded-xl transition-colors ${paper.referenceSourceId ? 'text-slate-300 cursor-not-allowed' : 'text-slate-400 hover:text-red-600 hover:bg-red-50'}`}
                                                          disabled={!!paper.referenceSourceId}
                                                        >
                                                          <Trash2 size={15} />
                                                        </button>
                                                      </Popconfirm>
                                                    </div>
                                                  </Tooltip>
                                                </div>
                                              </div>
                                              {/* <div className="xl:col-span-6 flex flex-wrap xl:justify-end items-center gap-x-4 gap-y-2 mt-2 xl:mt-0">
                                                {q.updatedAt && (
                                                  <div className="hidden 2xl:flex items-center gap-1.5 text-[11px] text-slate-400 min-w-[80px] justify-end">
                                                    <Clock size={12} />
                                                    <span>
                                                      {dayjs(
                                                        q.updatedAt,
                                                      ).format("DD-MM-YYYY")}
                                                    </span>
                                                  </div>
                                                )}
                                              </div> */}
                                            </div>
                                          </div>
                                        }
                                        isOpen={openQuestionId === q.id}
                                        onToggle={() =>
                                          openQuestionId === q.id
                                            ? setOpenQuestionId(null)
                                            : setOpenQuestionId(q.id)
                                        }
                                        content={
                                          <div className="pt-2 pb-6 px-4 sm:px-8 bg-slate-50 border-t border-slate-100">
                                            <div className="mb-2 flex flex-col items-start gap-2">
                                              <div className="text-sm font-medium text-left leading-relaxed text-slate-700 text-wrap">
                                                {q.questionText}
                                              </div>
                                              {q.questionImage && (
                                                <img
                                                  src={q.questionImage}
                                                  alt="Question Image"
                                                  className="h-[5rem] object-contain rounded-md"
                                                />
                                              )}
                                            </div>
                                            <div className="space-y-3">
                                              {q.options.map((option, idx) => {
                                                const isCorrect =
                                                  idx === q.correctAnswer;

                                                let optionClass =
                                                  "w-full text-left p-3 rounded-xl border text-sm font-medium flex justify-between items-center transition-all duration-200 cursor-default ";

                                                if (isCorrect) {
                                                  optionClass +=
                                                    "bg-green-50 border-green-500 text-green-800 shadow-sm ring-1 ring-green-500/20";
                                                } else {
                                                  optionClass +=
                                                    "bg-white border-slate-200 text-slate-500 opacity-80";
                                                }
                                                return (
                                                  <div
                                                    key={idx}
                                                    className={optionClass}
                                                  >
                                                    <div className="flex items-center gap-3">
                                                      <span
                                                        className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold border ${isCorrect
                                                          ? "border-green-600 bg-green-100 text-green-700"
                                                          : "border-slate-300 bg-slate-50 text-slate-500"
                                                          }`}
                                                      >
                                                        {String.fromCharCode(
                                                          65 + idx,
                                                        )}
                                                      </span>
                                                      {option.option &&
                                                        option.option !==
                                                        "" && (
                                                          <span>
                                                            {option.option}
                                                          </span>
                                                        )}
                                                      {option.optionImage && (
                                                        <img
                                                          src={
                                                            option.optionImage
                                                          }
                                                          alt="Option Image"
                                                          className="h-[5rem] w-auto object-contain rounded-xl ml-5"
                                                        />
                                                      )}
                                                    </div>
                                                    {isCorrect && (
                                                      <CheckCircle
                                                        className="text-green-600"
                                                        size={18}
                                                      />
                                                    )}
                                                  </div>
                                                );
                                              })}
                                            </div>
                                            <div className="mt-6 space-y-4">
                                              <div className="p-4 rounded-xl border bg-blue-50 border-blue-100">
                                                <h4 className="text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2 text-blue-700">
                                                  <Info size={14} />
                                                  Explanation
                                                </h4>
                                                <p className="text-sm text-slate-700 leading-relaxed">
                                                  {q.explanation}
                                                </p>
                                                {q.explanationImage && (
                                                  <img
                                                    src={q.explanationImage}
                                                    alt="Explanation Image"
                                                    className="h-[5rem] w-auto object-contain rounded-xl ml-5"
                                                  />
                                                )}
                                              </div>
                                            </div>
                                          </div>
                                        }
                                      />
                                    );
                                  })}

                                {/* Pagination */}
                                <div className="flex justify-end pb-2">
                                  <Pagination
                                    current={questionPagination.page}
                                    total={questionPagination.total}
                                    pageSize={questionPagination.limit}
                                    onChange={(p, pageSize) => {
                                      setQuestionPagination({
                                        ...questionPagination,
                                        page: p,
                                        limit: pageSize,
                                      });
                                      getPaperQuestions(
                                        openPaperId!,
                                        p,
                                        pageSize,
                                      );
                                    }}
                                    showSizeChanger
                                  />
                                </div>
                              </>
                            )}
                          </Spin>
                        </>
                      }
                    />
                  ))}
                  <div className="flex justify-end pb-2">
                    <Pagination
                      current={paperPagination.page}
                      total={paperPagination.total}
                      pageSize={paperPagination.limit}
                      onChange={(p, pageSize) => {
                        setPaperPagination({
                          ...paperPagination,
                          page: p,
                          limit: pageSize,
                        });
                      }}
                      showSizeChanger
                    />
                  </div>
                </div>
              )}
            </Spin>
          </>
        }
      />
      <Modal
        isOpen={isModalOpen}
        onClose={handleModalClose}
        title={
          editingPaper ? "Edit Old Question Paper" : "Add Old Question Paper"
        }
        className="max-w-[45rem]"
      >
        <Form layout="vertical" onFinish={handleSubmit(onSubmit)}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2">
            <Form.Item
              label={<span className="font-semibold text-slate-700">Exam</span>}
              required
            >
              <Controller
                name="exam"
                control={control}
                render={({ field }) => (
                  <Select
                    {...field}
                    className="w-full"
                    placeholder="Select Exam"
                    options={[
                      {
                        label: exam?.examName,
                        value: exam?.id,
                      },
                    ]}
                    disabled
                  />
                )}
              />
            </Form.Item>

            <Form.Item
              label={<span className="font-semibold text-slate-700">Year</span>}
              required
            >
              <Controller
                name="year"
                control={control}
                render={({ field }) => (
                  <DatePicker
                    {...field}
                    value={field.value ? dayjs(field.value, "YYYY") : null}
                    onChange={(date) =>
                      field.onChange(date ? date.format("YYYY") : "")
                    }
                    picker="year"
                    placeholder="Select Year"
                    className="w-full"
                    maxDate={dayjs().endOf("year")}
                  />
                )}
              />
            </Form.Item>
            <Form.Item
              label={
                <span className="font-semibold text-slate-700">Title</span>
              }
              required
            >
              <Controller
                name="title"
                control={control}
                render={({ field }) => (
                  <Input {...field} className="w-full" placeholder="Title" />
                )}
              />
            </Form.Item>
            {/* 
            <Form.Item
              label={
                <span className="font-semibold text-slate-700">Language</span>
              }
              required
            >
              <Controller
                name="language"
                control={control}
                render={({ field }) => (
                  <Select
                    {...field}
                    className="w-full"
                    placeholder="Select Language"
                    options={languageOptions}
                  />
                )}
              />
            </Form.Item> 
            */}

            <Form.Item
              label={
                <span className="font-semibold text-slate-700">
                  Duration (Minutes)
                </span>
              }
              required
            >
              <Controller
                name="duration"
                control={control}
                render={({ field }) => (
                  <Input
                    {...field}
                    type="number"
                    className="w-full"
                    placeholder="Ex: 60"
                    min={1}
                  />
                )}
              />
            </Form.Item>

            <Form.Item
              label={
                <span className="font-semibold text-slate-700">Marks</span>
              }
              required
            >
              <Controller
                name="marks"
                control={control}
                render={({ field }) => (
                  <Input
                    {...field}
                    type="number"
                    className="w-full"
                    placeholder="Ex: 1"
                    min={1}
                  />
                )}
              />
            </Form.Item>

            {/* <Form.Item
              label={
                <span className="font-semibold text-slate-700">
                  Publish to Students
                </span>
              }
            >
              <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-xl border border-slate-100">
                <Controller
                  name="publish"
                  control={control}
                  render={({ field }) => (
                    <Switch checked={field.value} onChange={field.onChange} />
                  )}
                />
                <span className="text-sm text-slate-500 italic">
                  Mark as public for students to access
                </span>
              </div>
            </Form.Item> */}
          </div>

          <div className="flex justify-end gap-3 mt-8 pt-6 border-t">
            <Button onClick={handleModalClose}>Cancel</Button>
            <Button type="primary" htmlType="submit" loading={isSubmitting}>
              {editingPaper ? "Update Paper" : "Save Paper"}
            </Button>
          </div>
        </Form>
      </Modal>
    </>
  );
};