import React, { useEffect, useState } from "react";
import { ClipboardClock, CirclePlus, Search, Plus } from "lucide-react";
import { Button, Empty, Input, Modal as AntModal, Form, Popconfirm, Spin, Select, Tag, Tabs } from "antd";
import { Accordion, AccordionRow } from "../shared/Accordion";
import { Pagination } from "antd";
import {
  CheckCircle,
  ChevronDown,
  ChevronRight,
  ClipboardList,
  Clock,
  Info,
  Pencil,
  Trash2,
} from "lucide-react";
import { difficultyColor, getAxiosErrorMessage } from "@/utils/index.utils";
import {
  Difficulty,
  IQuestion,
  ISubjectQuestions,
  ISubjectTopicQuestions,
} from "@/types";
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 ROUTE_CONSTANTS from "@/constants/route.constants";
import { useDebounce } from "@/hooks/useDebounce";
import { fetchLanguageOptions } from "@/hooks/useLanguageOptions";
import { useSearchParams, useNavigate } from "react-router-dom";
import { SubjectTestsTab } from "./SubjectTestsTab";

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

const filterInitial = {
  topicSearch: "",
  questionSearch: "",
  language: undefined as string | undefined,
};

export const QuestionTreeCard = ({
  subject,
  isOpen,
  onToggle,
  disabled,
}: {
  subject: ISubjectQuestions;
  isOpen?: boolean;
  onToggle?: () => void;
  disabled?: boolean;
}) => {
  const [searchParams, setSearchParams] = useSearchParams();
  const openTopicId = searchParams.get("topicId");

  const [openQuestionId, setOpenQuestionId] = useState<string | null>(null);
  const [topics, setTopics] = useState<ISubjectTopicQuestions[]>([]);
  const [questions, setQuestions] = useState<IQuestion[]>([]);
  const [topicPagination, setTopicPagination] = useState(initialPagination);
  const [questionPagination, setQuestionPagination] =
    useState(initialPagination);
  const [loading, setLoading] = useState(false);
  const [topicLoading, setTopicLoading] = useState(false);
  const [filterValues, setFilterValues] = useState(filterInitial);
  const [languageOptions, setLanguageOptions] = useState<{label: string, value: string}[]>([]);
  const debouncedTopicSearch = useDebounce(filterValues.topicSearch, 600);
  const debouncedQuestionSearch = useDebounce(filterValues.questionSearch, 600);
  const navigate = useNavigate();

  const toggleTopic = (topic: string) => {
    const isSame = openTopicId === topic;
    const newParams = new URLSearchParams(searchParams);

    if (isSame) {
      newParams.delete("topicId");
      setOpenQuestionId(null);
      setQuestions([]);
    } else {
      newParams.set("topicId", topic);
      setQuestions([]);
      setQuestionPagination(initialPagination);
    }
    setSearchParams(newParams, { replace: true });
  };

  const toggleQuestion = (id: string) => {
    const isSame = openQuestionId === id;
    setOpenQuestionId(isSame ? null : id);
  };

  const getTopics = async (
    page: number = initialPagination.page,
    limit: number = initialPagination.limit,
    search: string = debouncedTopicSearch,
  ) => {
    setOpenQuestionId(null);
    setTopicLoading(true);
    try {
      const response = await API_Instance.get(
        `${API_Constants.subjects}/${subject.id}/topics?page=${page}&limit=${limit}&search=${search}`,
      );
      const data = await response.data;
      setTopics(data.topics);
      setTopicPagination(data.meta);
    } catch (error) {
      toast.error(getAxiosErrorMessage(error));
    } finally {
      setTopicLoading(false);
    }
  };

  const getQuestions = async (
    page: number = initialPagination.page,
    limit: number = initialPagination.limit,
    topic?: string,
  ) => {
    if (!topic) return;
    setLoading(true);
    try {
      const response = await API_Instance.get(`${API_Constants.questionBank}`, {
        params: {
          page,
          limit,
          subject: subject.id,
          topic,
          search: debouncedQuestionSearch,
          language: filterValues.language,
        },
      });
      const data = response.data;
      setQuestions(data.data);
      setQuestionPagination(data.meta);
    } catch (error) {
      toast.error(getAxiosErrorMessage(error));
    } finally {
      setLoading(false);
    }
  };

  const handleDeleteQuestion = async (id: string) => {
    try {
      await API_Instance.delete(`${API_Constants.questionBank}/${id}`);
      toast.success("Question deleted successfully");
      getQuestions(
        questionPagination.page,
        questionPagination.limit,
        openTopicId!,
      );
    } catch (error) {
      toast.error(getAxiosErrorMessage(error));
    }
  };

  const toggleSubject = () => {
    onToggle?.();
    setOpenQuestionId(null);
    setTopics([]);
    setQuestions([]);
    setFilterValues(filterInitial);
    if (!isOpen) getTopics();
  };

  useEffect(() => {
    if (openTopicId && isOpen) {
      getQuestions(
        questionPagination.page,
        questionPagination.limit,
        openTopicId,
      );
    }
  }, [debouncedQuestionSearch, filterValues.language, openTopicId, isOpen]);

  useEffect(() => {
    getTopics();
  }, [debouncedTopicSearch]);

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

  return (
    <>
      <Accordion
      defaultExpanded={false}
      leftIcon={<ClipboardClock size={24} />}
      disabled={disabled}
      title={
        <div>
          <h2 className="text-md font-semibold text-slate-900 flex items-center">
            {subject.subjectName}
            {subject.language && <Tag color="blue" className="ml-2 mb-0">{subject.language}</Tag>}
          </h2>
          <p className="text-xs text-slate-500 mt-0.5 flex items-center gap-2">
            <span>{subject.topicsCount} Topics</span>
            <span className="w-1 h-1 rounded-full bg-slate-300"></span>
            <span>{subject.questionsCount} Questions</span>
            <span className="w-1 h-1 rounded-full bg-slate-300"></span>
            <span>{subject?.testsCount || 0} Created Tests</span>
          </p>
        </div>
      }
      rightActions={
        <div
          className="flex items-center gap-1 pl-2 border-slate-200 ml-2"
          onClick={(e) => e.stopPropagation()}
        >
          <Button
            type="primary"
            ghost
            onClick={() =>
              navigate(ROUTE_CONSTANTS.TestsCreate, {
                state: { subject: subject.id, subjectName: subject.subjectName, subjectLanguage: subject.language },
              })
            }
          >
            Add New Test
          </Button>
        </div>
      }
      isOpen={isOpen}
      onToggle={() => toggleSubject()}
      content={
        <Tabs
          defaultActiveKey="1"
          items={[
            {
              key: "1",
              label: "Questions",
              children: (
                <>
                  <div className="mt-2 flex gap-3 items-end w-[18rem]">
            <Input
              placeholder={"Search topic"}
              prefix={<Search size={16} />}
              autoComplete="off"
              allowClear
              onChange={(e) => {
                setFilterValues({
                  ...filterValues,
                  topicSearch: e.target.value,
                });
              }}
            />
          </div>
          <Spin spinning={topicLoading}>
            {topics.length === 0 && !topicLoading ? (
              <div className="min-h-[300px] flex items-center justify-center">
                <Empty
                  description={
                    debouncedTopicSearch
                      ? "No topic found for your search"
                      : "No topic available"
                  }
                />
              </div>
            ) : (
              <div className="pt-4 pl-2 border-l-2 border-slate-200 ml-6 space-y-1">
                {topics.length > 0 &&
                  topics.map((cat) => (
                    <AccordionRow
                      key={cat.topic}
                      title={
                        <div className="w-full flex items-center justify-between gap-3">
                          <div className="flex items-center gap-2">
                            <h2 className="text-md font-semibold text-slate-900">
                              {cat.topic}
                            </h2>
                            <p className="text-xs text-slate-500 mt-0.5 flex items-center gap-2">
                              <span>{cat.questionsCount} Questions</span>
                            </p>
                          </div>
                          {/* Action Buttons */}
                          <div
                            className="flex items-center gap-1 pl-2 border-l border-slate-200 ml-2"
                            onClick={(e) => e.stopPropagation()}
                          >
                            <Button
                              onClick={() =>
                                navigate(ROUTE_CONSTANTS.QuestionBankCreate, {
                                  state: {
                                    subject: subject.id,
                                    subjectName: subject.subjectName,
                                    topic: cat.topic,
                                    language: subject.language,
                                  },
                                })
                              }
                            >
                              Add New Question
                            </Button>
                          </div>
                        </div>
                      }
                      isOpen={openTopicId === cat.topic}
                      onToggle={() => {
                        toggleTopic(cat.topic);
                      }}
                      disabled={cat.questionsCount === 0}
                      content={
                        <>
                          <div className="mt-2 flex gap-3 items-center w-full max-w-[32rem]">
                            <Input
                              placeholder={"Search Questions"}
                              prefix={<Search size={16} />}
                              autoComplete="off"
                              allowClear
                              onChange={(e) => {
                                setFilterValues({
                                  ...filterValues,
                                  questionSearch: e.target.value,
                                });
                              }}
                              style={{ flex: 2 }}
                            />
                            <Select
                              allowClear
                              placeholder="Language"
                              options={languageOptions}
                              value={filterValues.language}
                              onChange={(val) => setFilterValues({ ...filterValues, language: val })}
                              style={{ flex: 1 }}
                            />
                          </div>
                          <Spin spinning={loading}>
                            {questions.length === 0 && !loading ? (
                              <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>

                                            {/* Content Grid - Matching Header from App.tsx */}
                                            <div className="flex-1 grid grid-cols-1 xl:grid-cols-12 gap-4 items-center">
                                              {/* Question Text Column */}
                                              <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">

                                                {/* Last Updated */}
                                                {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>
                                                )}

                                                {/* Language Badge */}
                                                {q.language && (
                                                  <span className="text-[10px] px-2.5 py-0.5 rounded-full font-semibold border border-indigo-200 bg-indigo-50 text-indigo-600 text-center">
                                                    {q.language}
                                                  </span>
                                                )}

                                                {/* Difficulty Badge */}
                                                <span
                                                  className={`text-[10px] px-2.5 py-0.5 rounded-full font-semibold border min-w-[60px] text-center ${difficultyColor(
                                                    q.difficulty === "Easy"
                                                      ? Difficulty.Easy
                                                      : q.difficulty ===
                                                          "Medium"
                                                        ? Difficulty.Medium
                                                        : Difficulty.Hard,
                                                  )}`}
                                                >
                                                  {q.difficulty}
                                                </span>
                                                <div
                                                  className="flex items-center gap-1 pl-2 border-l border-slate-200 ml-2"
                                                  onClick={(e) =>
                                                    e.stopPropagation()
                                                  }
                                                >
                                                  <button
                                                    className="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-colors"
                                                    title="Edit Question"
                                                    onClick={() =>
                                                      navigate(
                                                        ROUTE_CONSTANTS.QuestionBankEdit,
                                                        {
                                                          state: {
                                                            ...q,
                                                            subjectName:
                                                              subject.subjectName,
                                                          },
                                                        },
                                                      )
                                                    }
                                                  >
                                                    <Pencil size={15} />
                                                  </button>
                                                  <Popconfirm
                                                    title="Delete the Question"
                                                    description="Are you sure to delete this question?"
                                                    onConfirm={() =>
                                                      handleDeleteQuestion(q.id)
                                                    }
                                                    okText="Yes"
                                                    cancelText="No"
                                                  >
                                                    <button
                                                      className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors"
                                                      title="Delete Question"
                                                    >
                                                      <Trash2 size={15} />
                                                    </button>
                                                  </Popconfirm>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        }
                                        isOpen={openQuestionId === q.id}
                                        onToggle={() => toggleQuestion(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,
                                      });
                                      getQuestions(p, pageSize, openTopicId!);
                                    }}
                                    showSizeChanger
                                  />
                                </div>
                              </>
                            )}
                          </Spin>
                        </>
                      }
                    />
                  ))}
                <div className="flex justify-end pb-2">
                  <Pagination
                    current={topicPagination.page}
                    total={topicPagination.total}
                    pageSize={topicPagination.limit}
                    onChange={(p, pageSize) => {
                      setTopicPagination({
                        ...topicPagination,
                        page: p,
                        limit: pageSize,
                      });
                      getTopics(p, pageSize);
                    }}
                  />
                </div>
              </div>
            )}
          </Spin>
                </>
              ),
            },
            {
              key: "2",
              label: "Created Test",
              children: <SubjectTestsTab subject={subject} />,
            },
          ]}
        />
      }
    />
    </>
  );
};