import { IExam } from "@/types";
import toast from "react-hot-toast";
import { RotateCcw, Search } from "lucide-react";
import { useDebounce } from "@/hooks/useDebounce";
import React, { useEffect, useState } from "react";
import { Card, Pagination, Input, Spin } from "antd";
import { API_Instance } from "../../api/axios.instance";
import API_Constants from "../../constants/api.constants";
import { getAxiosErrorMessage } from "@/utils/index.utils";
import MockTestTreeCard from "@/components/tree/MockTestTreeCard"; 

const filterInitial = {
  search: "",
  exam: undefined,
  subCategory: undefined,
  difficulty: undefined,
};

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

const MockTestTree: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [filterValues, setFilterValues] = useState(filterInitial);
  const [openTestId, setOpenTestId] = useState<string | null>(null);
  const [exams, setExams] = useState<IExam[]>([]);
  const [pagination, setPagination] = useState(paginationInitial);
  const debouncedSearch = useDebounce(filterValues.search, 600);

  const toggleExam = (id: string) => {
    setOpenTestId((prev) => (prev === id ? null : id));
  };

  const fetchExams = async (page = 1, limit = 10) => {
    setLoading(true);
    try {
      const res = await API_Instance.get(
        API_Constants.exams +
          `?page=${page}&limit=${limit}&search=${debouncedSearch}`,
      );
      setExams(res.data.data || []);
      setPagination(res.data.meta || paginationInitial);
    } catch (err) {
      toast.error(getAxiosErrorMessage(err));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchExams();
  }, []);

  useEffect(() => {
    fetchExams(1, pagination.limit);
  }, [debouncedSearch]);

  return (
    <div className="flex flex-col gap-4 px-4 py-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
            <RotateCcw className="text-blue-600" /> Mock Test Management
          </h2>
          <p className="text-slate-500 text-sm mt-1">
            Add/Manage Mock Tests by dynamic blueprint layout tree.
          </p>
        </div>
      </div>

      <Card className="shadow-sm border border-slate-200 rounded-xl">
        <div className="flex justify-between items-center mb-4">
          <div className="w-full md:w-72">
            <Input
              placeholder="Search Exams..."
              prefix={<Search size={16} className="text-slate-400" />}
              allowClear
              value={filterValues.search}
              onChange={(e) => {
                setFilterValues({
                  ...filterValues,
                  search: e.target.value,
                });
              }}
            />
          </div>
          <div className="text-slate-500 text-sm">
            Total Exams:{" "}
            <span className="font-semibold text-slate-800">
              {pagination.total}
            </span>
          </div>
        </div>

        <Spin spinning={loading}>
          {exams.length === 0 && !loading ? (
            <div className="min-h-[300px] flex flex-col items-center justify-center text-slate-400 border-2 border-dashed border-slate-100 rounded-xl">
              <div className="bg-slate-50 p-4 rounded-full mb-4">
                <Search size={32} className="text-slate-300" />
              </div>
              <p>
                {filterValues.search
                  ? "No exams found matching your search"
                  : "No exams available"}
              </p>
            </div>
          ) : (
            <div className="space-y-3 min-h-[200px]">
              {exams.map((exam) => (
                <MockTestTreeCard
                  key={exam.id}
                  exam={exam}
                  isOpen={openTestId === exam.id}
                  onToggle={() => toggleExam(exam.id)}
                />
              ))}
            </div>
          )}
        </Spin>

        <div className="flex justify-end mt-6">
          <Pagination
            current={pagination.page}
            total={pagination.total}
            pageSize={pagination.limit}
            onChange={(p, pageSize) => {
              setPagination({
                ...pagination,
                page: p,
                limit: pageSize,
              });
              fetchExams(p, pageSize);
            }}
            showSizeChanger
            showTotal={(total) => `Total ${total} items`}
          />
        </div>
      </Card>
    </div>
  );
};

export default MockTestTree;