import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Tabs, Select } from "antd";
import { ChartLine, FileText } from "lucide-react";
import { useDebounce } from "@/hooks/useDebounce";
import { API_Instance } from "@/api/axios.instance";
import API_Constants from "@/constants/api.constants";
import PracticeTestOverallTrend from "./PracticeTestOverallTrend";
import PracticeTestSubjectPerformance from "./PracticeTestSubjectPerformance";
import PracticeTestSubjectTrend from "./PracticeTestSubjectTrend";
import PracticeTestSubjectWiseStudents from "./PracticeTestSubjectWiseStudents";

const PracticeTestReport: React.FC = () => {
    // Tab 1 States
    const [exams, setExams] = useState<{ id: string; examName: string }[]>([]);
    const [selectedExamId, setSelectedExamId] = useState<string>("");
    const [examSearch, setExamSearch] = useState("");
    const debouncedExamSearch = useDebounce(examSearch, 500);
    const [examPage, setExamPage] = useState(1);
    const [hasMoreExams, setHasMoreExams] = useState(true);
    const [loadingExams, setLoadingExams] = useState(false);

    // Tab 2 States
    const [tab2Exams, setTab2Exams] = useState<{ id: string; examName: string }[]>([]);
    const [selectedTab2ExamId, setSelectedTab2ExamId] = useState<string>("");
    const [tab2ExamSearch, setTab2ExamSearch] = useState("");
    const debouncedTab2ExamSearch = useDebounce(tab2ExamSearch, 500);
    const [tab2ExamPage, setTab2ExamPage] = useState(1);
    const [hasMoreTab2Exams, setHasMoreTab2Exams] = useState(true);
    const [loadingTab2Exams, setLoadingTab2Exams] = useState(false);

    const [tab2Subjects, setTab2Subjects] = useState<{ subjectId: string; subjectName: string }[]>([]);
    const [selectedTab2SubjectId, setSelectedTab2SubjectId] = useState<string>("");
    const [loadingTab2Subjects, setLoadingTab2Subjects] = useState(false);

    // Tab 1 Fetching
    const fetchExamsList = useCallback(async (search = "", page = 1) => {
        setLoadingExams(true);
        try {
            const res = await API_Instance.get(API_Constants.exams, {
                params: { search, page, limit: 10, isPublished: true }
            });
            const newExams = res.data.data || [];
            setExams((prev) => (page === 1 ? newExams : [...prev, ...newExams]));
            setHasMoreExams(newExams.length === 10);
            if (page === 1 && newExams.length > 0 && !selectedExamId) {
                setSelectedExamId(newExams[0].id);
            }
        } catch (e) {
            console.error("Failed to load exams list", e);
        } finally {
            setLoadingExams(false);
        }
    }, [selectedExamId]);

    useEffect(() => {
        setExamPage(1);
        fetchExamsList(debouncedExamSearch, 1);
    }, [debouncedExamSearch]);

    useEffect(() => {
        if (examPage > 1) {
            fetchExamsList(debouncedExamSearch, examPage);
        }
    }, [examPage, debouncedExamSearch]);

    const selectedExamName = useMemo(() => {
        const found = exams.find((e) => e.id === selectedExamId);
        return found ? found.examName : "";
    }, [exams, selectedExamId]);

    const examOptions = useMemo(() => {
        return exams.map((e) => ({ label: e.examName, value: e.id }));
    }, [exams]);

    const handleExamPopupScroll = (e: React.UIEvent<HTMLElement>) => {
        const target = e.target as HTMLElement;
        const currentScroll = Math.ceil(target.scrollTop + target.clientHeight);
        const scrollThreshold = target.scrollHeight - 15;

        if (currentScroll >= scrollThreshold && hasMoreExams && !loadingExams) {
            setExamPage((prev) => prev + 1);
        }
    };

    // Tab 2 Fetching
    const fetchTab2Exams = useCallback(async (search = "", page = 1) => {
        setLoadingTab2Exams(true);
        try {
            const res = await API_Instance.get(API_Constants.exams, {
                params: { search, page, limit: 10, isPublished: true }
            });
            const newExams = res.data.data || [];
            setTab2Exams((prev) => (page === 1 ? newExams : [...prev, ...newExams]));
            setHasMoreTab2Exams(newExams.length === 10);
            if (page === 1 && newExams.length > 0 && !selectedTab2ExamId) {
                setSelectedTab2ExamId(newExams[0].id);
            }
        } catch (e) {
            console.error("Failed to load tab2 exams", e);
        } finally {
            setLoadingTab2Exams(false);
        }
    }, [selectedTab2ExamId]);

    useEffect(() => {
        setTab2ExamPage(1);
        fetchTab2Exams(debouncedTab2ExamSearch, 1);
    }, [debouncedTab2ExamSearch]);

    useEffect(() => {
        if (tab2ExamPage > 1) {
            fetchTab2Exams(debouncedTab2ExamSearch, tab2ExamPage);
        }
    }, [tab2ExamPage, debouncedTab2ExamSearch]);

    const fetchTab2Subjects = useCallback(async () => {
        if (!selectedTab2ExamId) {
            setTab2Subjects([]);
            setSelectedTab2SubjectId("");
            return;
        }
        setLoadingTab2Subjects(true);
        try {
            const res = await API_Instance.get(`${API_Constants.reports}/overall/practice-test-subjects`, {
                params: {
                    examId: selectedTab2ExamId,
                    page: 1,
                    limit: 1000
                }
            });
            const fetched = res.data?.data || [];
            setTab2Subjects(fetched);
            if (fetched.length > 0) {
                setSelectedTab2SubjectId(fetched[0].subjectId);
            } else {
                setSelectedTab2SubjectId("");
            }
        } catch (e) {
            console.error("Failed to fetch tab2 subjects", e);
        } finally {
            setLoadingTab2Subjects(false);
        }
    }, [selectedTab2ExamId]);

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

    const selectedTab2ExamName = useMemo(() => {
        const found = tab2Exams.find((e) => e.id === selectedTab2ExamId);
        return found ? found.examName : "";
    }, [tab2Exams, selectedTab2ExamId]);

    const selectedTab2SubjectName = useMemo(() => {
        const found = tab2Subjects.find((s) => s.subjectId === selectedTab2SubjectId);
        return found ? found.subjectName : "";
    }, [tab2Subjects, selectedTab2SubjectId]);

    const tab2ExamOptions = useMemo(() => {
        return tab2Exams.map((e) => ({ label: e.examName, value: e.id }));
    }, [tab2Exams]);

    const tab2SubjectOptions = useMemo(() => {
        return tab2Subjects.map((s) => ({
            name: s.subjectName,
            label: s.subjectName,
            value: s.subjectId
        }));
    }, [tab2Subjects]);

    return (
        <div className="flex flex-col gap-6 p-4">
            <div>
                <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
                    Practice Test Reports
                </h2>
                <p className="text-slate-500 text-sm mt-1">
                    View overall and subject-wise performance trends across practice tests.
                </p>
            </div>

            <Tabs
                defaultActiveKey="1"
                className="custom-tabs"
                destroyInactiveTabPane={true}
                items={[
                    {
                        key: "1",
                        label: (
                            <span className="flex items-center gap-2 text-sm font-medium px-1 py-0.5">
                                <FileText size={16} />
                                Overall Performance Trend
                            </span>
                        ),
                        children: (
                            <div className="flex flex-col gap-6">
                                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white p-4 rounded-xl border border-slate-200/80 shadow-sm w-full">
                                    <div className="flex flex-col">
                                        <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400">Selected Exam</span>
                                        <span className="text-base font-bold text-[#1677ff] mt-0.5">
                                            {selectedExamName || "No Exam Selected"}
                                        </span>
                                    </div>
                                    <div className="flex items-center gap-3 w-full sm:w-auto justify-end">
                                        <span className="font-semibold text-sm text-slate-600 whitespace-nowrap">Select Exam:</span>
                                        <div className="w-full sm:w-80">
                                            <Select
                                                className="w-full"
                                                showSearch
                                                filterOption={false}
                                                placeholder="Select Exam"
                                                onSearch={(val) => setExamSearch(val)}
                                                onDropdownVisibleChange={(open) => {
                                                    if (!open) setExamSearch("");
                                                }}
                                                onPopupScroll={handleExamPopupScroll}
                                                value={selectedExamId || undefined}
                                                onChange={(val) => setSelectedExamId(val || "")}
                                                options={examOptions}
                                                loading={loadingExams}
                                            />
                                        </div>
                                    </div>
                                </div>
                                <PracticeTestOverallTrend selectedExamId={selectedExamId} selectedExamName={selectedExamName} />
                                <div className="border-t border-slate-200" />
                                <PracticeTestSubjectPerformance selectedExamId={selectedExamId} selectedExamName={selectedExamName} />
                            </div>
                        ),
                    },
                    {
                        key: "2",
                        label: (
                            <span className="flex items-center gap-2 text-sm font-medium px-1 py-0.5">
                                <ChartLine size={16} />
                                Subject Trend & Students
                            </span>
                        ),
                        children: (
                            <div className="flex flex-col gap-6">
                                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white p-4 rounded-xl border border-slate-200/80 shadow-sm w-full">
                                    <div className="flex flex-col gap-0.5">
                                        <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400">Selected Exam & Subject</span>
                                        <span className="text-base font-bold text-[#1677ff]">
                                            {selectedTab2ExamName || "No Exam Selected"}
                                            {selectedTab2SubjectName && ` • ${selectedTab2SubjectName}`}
                                        </span>
                                    </div>
                                    <div className="flex flex-col sm:flex-row items-center gap-3 w-full sm:w-auto justify-end">
                                        <div className="w-full sm:w-60">
                                            <Select
                                                className="w-full"
                                                showSearch
                                                filterOption={false}
                                                placeholder="Select Exam"
                                                onSearch={(val) => setTab2ExamSearch(val)}
                                                onDropdownVisibleChange={(open) => {
                                                    if (!open) setTab2ExamSearch("");
                                                }}
                                                onPopupScroll={(e) => {
                                                    const target = e.target as HTMLElement;
                                                    const currentScroll = Math.ceil(target.scrollTop + target.clientHeight);
                                                    const scrollThreshold = target.scrollHeight - 15;
                                                    if (currentScroll >= scrollThreshold && hasMoreTab2Exams && !loadingTab2Exams) {
                                                        setTab2ExamPage((prev) => prev + 1);
                                                    }
                                                }}
                                                value={selectedTab2ExamId || undefined}
                                                onChange={(val) => {
                                                    setSelectedTab2ExamId(val || "");
                                                    setSelectedTab2SubjectId("");
                                                }}
                                                options={tab2ExamOptions}
                                                loading={loadingTab2Exams}
                                            />
                                        </div>
                                        <div className="w-full sm:w-60">
                                            <Select
                                                className="w-full"
                                                placeholder="Select Subject"
                                                value={selectedTab2SubjectId || undefined}
                                                onChange={(val) => setSelectedTab2SubjectId(val || "")}
                                                options={tab2SubjectOptions}
                                                loading={loadingTab2Subjects}
                                                disabled={!selectedTab2ExamId || tab2Subjects.length === 0}
                                            />
                                        </div>
                                    </div>
                                </div>
                                <PracticeTestSubjectTrend 
                                    selectedExamId={selectedTab2ExamId} 
                                    selectedSubjectId={selectedTab2SubjectId} 
                                    selectedExamName={selectedTab2ExamName}
                                    selectedSubjectName={selectedTab2SubjectName}
                                />
                                <div className="border-t border-slate-200" />
                                <PracticeTestSubjectWiseStudents 
                                    selectedExamId={selectedTab2ExamId} 
                                    selectedSubjectId={selectedTab2SubjectId} 
                                    selectedExamName={selectedTab2ExamName}
                                    selectedSubjectName={selectedTab2SubjectName}
                                />
                            </div>
                        ),
                    },
                ]}
            />
        </div>
    );
};

export default PracticeTestReport;