import { useEffect, useState } from "react";
import Button from "../Low/Button";
import Modal from "../Modal";
import { useFilePicker } from "use-file-picker";
import readXlsxFile from "read-excel-file";
import countryCodes from "country-codes-list";
import { ExcelUserDuplicatesMap } from "../ImportSummaries/User";
import { UserImport } from "@/interfaces/IUserImport";
import axios from "axios";
import { toast } from "react-toastify";
import { HiOutlineDocumentText } from "react-icons/hi";
import { IoInformationCircleOutline } from "react-icons/io5";
import { FaFileDownload } from "react-icons/fa";
import clsx from "clsx";
import { checkAccess } from "@/utils/permissions";
import { Group, User } from "@/interfaces/user";
import UserTable from "../Tables/UserTable";
import ClassroomImportSummary from "../ImportSummaries/Classroom";
import Select from "../Low/Select";
import { EntityWithRoles } from "@/interfaces/entity";
import { useRouter } from "next/router";


const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);

export interface DuplicateClassroom {
    rowNumber: number;
    email: string;
    classroom: string;
}

export interface Mismatches {
    email: string;
    rows: number[];
    mismatches: {
        field: string;
        values: any[];
    }[];
}

export interface ClassroomTransferState {
    stage: number;
    parsedExcel: { rows?: any[]; errors?: any[] } | undefined;
    duplicatedRows: DuplicateClassroom[];
    userMismatches: Mismatches[];
    imports: UserImport[];
    notFoundUsers: UserImport[];
    otherEntityUsers: UserImport[];
    alreadyInClass: UserImport[];
    notOwnedClassrooms: string[];
    validClassrooms: string[];
}


const StudentClassroomTransfer: React.FC<{ user: User; entities?: EntityWithRoles[], onFinish: () => void; }> = ({ user, entities = [], onFinish }) => {
    const [isLoading, setIsLoading] = useState(false);
    const [entity, setEntity] = useState((entities || [])[0]?.id || undefined);
    const [showHelp, setShowHelp] = useState(false);

    const [classroomTransferState, setClassroomTransferState] = useState<ClassroomTransferState>({
        stage: 0,
        parsedExcel: undefined,
        duplicatedRows: [],
        userMismatches: [],
        imports: [],
        notFoundUsers: [],
        otherEntityUsers: [],
        alreadyInClass: [],
        notOwnedClassrooms: [],
        validClassrooms: []
    })

    const router = useRouter();
    
    const { openFilePicker, filesContent, clear } = useFilePicker({
        accept: ".xlsx",
        multiple: false,
        readAs: "ArrayBuffer",
    });

    const schema = {
        'First Name': {
            prop: 'firstName',
            type: String,
            required: true,
            validate: (value: string) => {
                if (!value || value.trim() === '') {
                    throw new Error('First Name cannot be empty')
                }
                return true
            }
        },
        'Last Name': {
            prop: 'lastName',
            type: String,
            required: true,
            validate: (value: string) => {
                if (!value || value.trim() === '') {
                    throw new Error('Last Name cannot be empty')
                }
                return true
            }
        },
        'Student ID': {
            prop: 'studentID',
            type: String,
            required: true,
            validate: (value: string) => {
                if (!value || value.trim() === '') {
                    throw new Error('Student ID cannot be empty')
                }
                return true
            }
        },
        'Passport/National ID': {
            prop: 'passport_id',
            type: String,
            required: true,
            validate: (value: string) => {
                if (!value || value.trim() === '') {
                    throw new Error('Passport/National ID cannot be empty')
                }
                return true
            }
        },
        'E-mail': {
            prop: 'email',
            required: true,
            type: (value: any) => {
                if (!value || value.trim() === '') {
                    throw new Error('Email cannot be empty')
                }
                if (!EMAIL_REGEX.test(value.trim())) {
                    throw new Error('Invalid Email')
                }
                return value
            }
        },
        'Phone Number': {
            prop: 'phone',
            type: Number,
            required: true,
            validate: (value: number) => {
                if (value === null || value === undefined || String(value).trim() === '') {
                    throw new Error('Phone Number cannot be empty')
                }
                return true
            }
        },
        'Classroom Name': {
            prop: 'group',
            type: String,
            required: true,
            validate: (value: string) => {
                if (!value || value.trim() === '') {
                    throw new Error('Classroom Name cannot be empty')
                }
                return true
            }
        },
        'Country': {
            prop: 'country',
            type: (value: any) => {
                if (!value || value.trim() === '') {
                    throw new Error('Country cannot be empty')
                }
                const validCountry = countryCodes.findOne("countryCode" as any, value.toUpperCase()) ||
                    countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === value.toLowerCase());
                if (!validCountry) {
                    throw new Error('Invalid Country/Country Code')
                }
                return validCountry;
            },
            required: true
        }
    }

    useEffect(() => {
        if (filesContent.length > 0) {
            const file = filesContent[0];
            readXlsxFile(
                file.content, { schema, ignoreEmptyRows: false })
                .then((data) => {
                    setClassroomTransferState((prev) => ({ ...prev, parsedExcel: data }))
                });

        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [filesContent, entity]);

    // Stage 1 - Excel Parsing
    // - Group rows by emails
    // - Find duplicate rows (email + classroom)
    // - Find email and other fields mismatch except classroom
    // - Parsing errors 
    // - Set the data
    useEffect(() => {
        if (classroomTransferState.parsedExcel && classroomTransferState.parsedExcel.rows) {
            const errorRowIndices = new Set(
                classroomTransferState.parsedExcel.errors?.map(error => error.row) || []
            );
    
            const emailClassroomMap = new Map<string, Map<string, number[]>>(); // email -> (group -> row numbers)
            const emailRowMap = new Map<string, Map<number, any>>(); // email -> (row number -> row data)
            
            // Group rows by email and assign row data
            classroomTransferState.parsedExcel.rows.forEach((row, index) => {
                const rowNum = index + 2;
                if (!errorRowIndices.has(rowNum) && row !== null) {
                    const email = row.email.toString().trim().toLowerCase();
                    const classroom = row.group;
    
                    if (!emailRowMap.has(email)) {
                        emailRowMap.set(email, new Map());
                    }
                    emailRowMap.get(email)!.set(rowNum, row);
    
                    if (!emailClassroomMap.has(email)) {
                        emailClassroomMap.set(email, new Map());
                    }
                    const classroomMap = emailClassroomMap.get(email)!;
                    if (!classroomMap.has(classroom)) {
                        classroomMap.set(classroom, []);
                    }
                    classroomMap.get(classroom)!.push(rowNum);
                }
            });
    
            const duplicatedRows: DuplicateClassroom[] = [];
            const userMismatches: Mismatches[] = [];
            const validRows = [];
    
            for (const [email, classroomMap] of emailClassroomMap) {
                const rowDataMap = emailRowMap.get(email)!;
                const allRowsForEmail = Array.from(rowDataMap.keys());
                
                // Check for duplicates (same email + classroom)
                for (const [classroom, rowNumbers] of classroomMap) {
                    if (rowNumbers.length > 1) {
                        rowNumbers.forEach(row => duplicatedRows.push({
                            rowNumber: row,
                            email,
                            classroom
                        }));
                    } else {
                        validRows.push(rowNumbers[0]);
                    }
                }
    
                // Check for mismatches in other fields
                if (allRowsForEmail.length > 1) {
                    const fields = ['firstName', 'lastName', 'studentID', 'passport_id', 'phone'];
                    const mismatches: {field: string; values: any[]}[] = [];
    
                    fields.forEach(field => {
                        const uniqueValues = new Set(
                            allRowsForEmail.map(rowNum => rowDataMap.get(rowNum)![field])
                        );
                        if (uniqueValues.size > 1) {
                            mismatches.push({
                                field,
                                values: Array.from(uniqueValues)
                            });
                        }
                    });
    
                    if (mismatches.length > 0) {
                        userMismatches.push({
                            email,
                            rows: allRowsForEmail,
                            mismatches
                        });
                    }
                }
            }
    
            const imports = validRows
                .map(rowNum => classroomTransferState.parsedExcel!.rows![rowNum - 2])
                .filter((row): row is any => row !== null)
                .map(row => ({
                    email: row.email.toString().trim().toLowerCase(),
                    name: `${row.firstName ?? ""} ${row.lastName ?? ""}`.trim(),
                    passport_id: row.passport_id?.toString().trim() || undefined,
                    groupName: row.group,
                    studentID: row.studentID,
                    demographicInformation: {
                        country: row.country?.countryCode,
                        passport_id: row.passport_id?.toString().trim() || undefined,
                        phone: row.phone.toString(),
                    },
                    entity: undefined,
                    type: undefined
                } as UserImport));

            // On import reset state except excel parsing
            setClassroomTransferState((prev) => ({
                ...prev,
                stage: 1,
                duplicatedRows,
                userMismatches,
                imports,
                notFoundUsers: [],
                otherEntityUsers: [],
                notOwnedClassrooms: [],
                validClassrooms: [],
            }));
        }
    }, [classroomTransferState.parsedExcel, entity]);

    // Stage 2 - Student Filter
    //  - Filter non existant students
    //  - Filter non entity students
    //  - Filter already in classroom students
    useEffect(() => {
        const emails = classroomTransferState.imports.map((i) => i.email);
        const crossRefUsers = async () => {
            try {
                const { data: nonExistantUsers } = await axios.post("/api/users/controller?op=dontExist", { emails });
                const { data: nonEntityUsers } = await axios.post("/api/users/controller?op=entityCheck", { entities: user.entities, emails });
                const { data: alreadyPlaced } = await axios.post("/api/users/controller?op=crossRefClassrooms", {
                    sets: classroomTransferState.imports.map((info) => ({
                        email: info.email,
                        classroom: info.groupName
                    })),
                    entity
                });

                const excludeEmails = new Set([
                    ...nonExistantUsers,
                    ...nonEntityUsers.map((o: any) => o.email),
                    ...alreadyPlaced
                ]);

                const filteredImports = classroomTransferState.imports.filter(i => !excludeEmails.has(i.email));

                const nonExistantEmails = new Set(nonExistantUsers);
                const nonEntityEmails = new Set(nonEntityUsers.map((o: any) => o.email));
                const alreadyPlacedEmails = new Set(alreadyPlaced);

                setClassroomTransferState((prev) => ({
                    ...prev,
                    stage: 2,
                    imports: filteredImports,
                    notFoundUsers: classroomTransferState.imports.filter(i => nonExistantEmails.has(i.email)),
                    otherEntityUsers: classroomTransferState.imports.filter(i => nonEntityEmails.has(i.email))
                        .map(user => {
                            const nonEntityUser = nonEntityUsers.find((o: any) => o.email === user.email);
                            return {
                                ...user,
                                entityLabels: nonEntityUser?.names || []
                            };
                        }),
                    alreadyInClass: classroomTransferState.imports.filter(i => alreadyPlacedEmails.has(i.email)),
                }));
            } catch (error) {
                toast.error("Something went wrong, please try again later!");
            }
        }

        if (classroomTransferState.imports.length > 0 && classroomTransferState.stage === 1) {
            crossRefUsers();
        }

    }, [classroomTransferState.imports, user.entities, classroomTransferState.stage, entity])

    // Stage 3 - Classroom Filter
    //  - See if there are classrooms with same name but different admin
    //  - Find which new classrooms need to be created
    useEffect(() => {
        const crossRefClassrooms = async () => {
            const classrooms = Array.from(new Set(classroomTransferState.imports.map((i) => i.groupName)));

            try {
                const { data: notOwnedClassroomsSameName } = await axios.post("/api/groups/controller?op=crossRefOwnership", {
                    userId: user.id,
                    classrooms
                });

                setClassroomTransferState((prev) => ({
                    ...prev,
                    stage: 3,
                    notOwnedClassrooms: notOwnedClassroomsSameName,
                    validClassrooms: Array.from(classrooms).filter(
                        (name) => !new Set(notOwnedClassroomsSameName).has(name)
                    )
                }))
            } catch (error) {
                toast.error("Something went wrong, please try again later!");
            }
        };
        if (classroomTransferState.imports.length > 0 && classroomTransferState.stage === 2) {
            crossRefClassrooms();
        }
    }, [classroomTransferState.imports, classroomTransferState.stage, user.id, entity])


    const clearAndReset = () => {
        setIsLoading(false);
        setClassroomTransferState({
            stage: 0,
            parsedExcel: undefined,
            duplicatedRows: [],
            userMismatches: [],
            imports: [],
            notFoundUsers: [],
            otherEntityUsers: [],
            alreadyInClass: [],
            notOwnedClassrooms: [],
            validClassrooms: []
        });
        clear();
    };


    const createNewGroupsAndAssignStudents = async () => {
        if (!confirm(`You are about to assign ${classroomTransferState.imports.length} to new classrooms, are you sure you want to continue?`)) {
            return;
        }

        if (classroomTransferState.imports.length === 0) {
            clearAndReset();
            return;
        }

        try {
            setIsLoading(true);

            const getIds = async () => {
                try {
                    const { data: emailIdMap } = await axios.post("/api/users/controller?op=getIds", {
                        emails: classroomTransferState.imports.map((u) => u.email)
                    });

                    return classroomTransferState.imports.map(importUser => {
                        const matchingUser = emailIdMap.find((mapping: any) => mapping.email === importUser.email);
                        return {
                            ...importUser,
                            id: matchingUser?.id || undefined
                        };
                    });
                } catch (error) {
                    toast.error("Something went wrong, please try again later!");
                }
            };

            const imports = await getIds();

            if (!imports) return;

            await axios.post("/api/groups/controller?op=deletePriorEntitiesGroups", {
                ids: imports.map((u) => u.id),
                entity
            });

            await axios.post("/api/users/controller?op=assignToEntity", {
                ids: imports.map((u) => u.id),
                entity
            });
            
            const { data: existingGroupsMap } = await axios.post("/api/groups/controller?op=existantGroupIds", {
                names: classroomTransferState.validClassrooms
            });

            const groupedUsers = imports.reduce((acc, user) => {
                if (!acc[user.groupName]) {
                    acc[user.groupName] = [];
                }
                acc[user.groupName].push(user);
                return acc;
            }, {} as Record<string, UserImport[]>);
            
            // ##############
            // # New Groups #
            // ##############
            const newGroupUsers = Object.fromEntries(
                Object.entries(groupedUsers)
                    .filter(([groupName]) => 
                        classroomTransferState.validClassrooms.includes(groupName) && 
                        !existingGroupsMap[groupName]
                    )
            );
            
            const createGroupPromises = Object.entries(newGroupUsers).map(([groupName, users]) => {
                const groupData: Partial<Group> = {
                    admin: user.id,
                    name: groupName,
                    participants: users.map(user => user.id),
                    entity: entity
                };
                return axios.post('/api/groups', groupData);
            });
            
            // ###################
            // # Existant Groups #
            // ###################
            const allExistingUsers = Object.fromEntries(
                Object.entries(groupedUsers)
                    .filter(([groupName]) => 
                        !classroomTransferState.validClassrooms.includes(groupName) || 
                        existingGroupsMap[groupName]
                    )
            );
            
            let updatePromises: Promise<any>[] = [];
            
            if (Object.keys(allExistingUsers).length > 0) {
                const { data: { groups: groupNameToId, users: userEmailToId } } = await axios.post('/api/groups/controller?op=getIds', {
                    names: Object.keys(allExistingUsers),
                    userEmails: Object.values(allExistingUsers).flat().map(user => user.email)
                });

                const existingGroupsWithIds = Object.entries(allExistingUsers).reduce((acc, [groupName, users]) => {
                    const groupId = groupNameToId[groupName];
                    if (groupId) {
                        acc[groupId] = users;
                    }
                    return acc;
                }, {} as Record<string, UserImport[]>);

                updatePromises = Object.entries(existingGroupsWithIds).map(([groupId, users]) => {
                    const userIds = users.map(user => userEmailToId[user.email]);
                    return axios.patch(`/api/groups/${groupId}`, {
                        participants: userIds
                    });
                });
            }
            
            await Promise.all([
                ...createGroupPromises,
                ...updatePromises
            ]);
            
            toast.success(`Successfully assigned all ${classroomTransferState.imports.length} user(s)!`);
            router.replace("/classrooms");
            onFinish();
        } catch (error) {
            console.error(error);
            toast.error("Something went wrong, please try again later!");
        } finally {
            clearAndReset();
        }
    };

    const handleTemplateDownload = () => {
        const fileName = "UsersTemplate.xlsx";
        const url = `https://firebasestorage.googleapis.com/v0/b/encoach-staging.appspot.com/o/import_templates%2F${fileName}?alt=media&token=b771a535-bf95-4060-889c-a086df65d480`;

        const link = document.createElement('a');
        link.href = url;

        link.download = fileName;

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

    return (
        <>
            <Modal isOpen={showHelp} onClose={() => setShowHelp(false)}>
                <>
                    <div className="flex font-bold text-xl justify-center text-gray-700"><span>Excel File Format</span></div>
                    <div className="mt-4 flex flex-col gap-4">
                        <div className="flex flex-col gap-3 bg-gray-100 rounded-lg p-4">
                            <div className="flex items-center gap-2">
                                <HiOutlineDocumentText className={`w-5 h-5 text-mti-purple-light`} />
                                <h2 className="text-lg font-semibold">
                                    The uploaded document must:
                                </h2>
                            </div>
                            <ul className="flex flex-col pl-10 gap-2">
                                <li className="text-gray-700 list-disc">
                                    be an Excel .xlsx document.
                                </li>
                                <li className="text-gray-700 list-disc">
                                    only have a single spreadsheet with the following <b>exact same name</b> columns:
                                    <div className="py-4 pr-4">
                                        <table className="w-full bg-white">
                                            <thead>
                                                <tr>
                                                    <th className="border border-neutral-200 px-2 py-1">First Name</th>
                                                    <th className="border border-neutral-200 px-2 py-1">Last Name</th>
                                                    <th className="border border-neutral-200 px-2 py-1">Student ID</th>
                                                    <th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
                                                    <th className="border border-neutral-200 px-2 py-1">E-mail</th>
                                                    <th className="border border-neutral-200 px-2 py-1">Phone Number</th>
                                                    <th className="border border-neutral-200 px-2 py-1">Classroom Name</th>
                                                    <th className="border border-neutral-200 px-2 py-1">Country</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div className="flex flex-col gap-3 bg-gray-100 rounded-lg p-4">
                            <div className="flex items-center gap-2">
                                <IoInformationCircleOutline className={`w-5 h-5 text-mti-purple-light`} />
                                <h2 className="text-lg font-semibold">
                                    Note that:
                                </h2>
                            </div>
                            <ul className="flex flex-col pl-10 gap-2">
                                <li className="text-gray-700 list-disc">
                                    all incorrect e-mails will be ignored.
                                </li>
                                <li className="text-gray-700 list-disc">
                                    all non registered users will be ignored.
                                </li>
                                <li className="text-gray-700 list-disc">
                                    all students that already are present in the destination classroom will be ignored.
                                </li>
                                <li className="text-gray-700 list-disc">
                                    all registered students that are not associated to your institution will be ignored.
                                </li>
                                <li className="text-gray-700 list-disc">
                                    all rows which contain duplicate values in the columns: &quot;Student ID&quot;, &quot;Passport/National ID&quot;, &quot;E-mail&quot;, will be ignored.
                                </li>
                            </ul>
                        </div>
                        <div className="bg-gray-100 rounded-lg p-4">
                            <p className="text-gray-600">
                                {`The downloadable template is an example of a file that can be imported. Your document doesn't need to be a carbon copy of the template - it can have different styling but it must adhere to the previous requirements.`}
                            </p>
                        </div>
                        <div className="w-full flex justify-between mt-6 gap-8">
                            <Button color="purple" onClick={() => setShowHelp(false)} variant="outline" className="self-end w-full bg-white">
                                Close
                            </Button>

                            <Button color="purple" onClick={handleTemplateDownload} variant="solid" className="self-end w-full">
                                <div className="flex items-center gap-2">
                                    <FaFileDownload size={24} />
                                    Download Template
                                </div>
                            </Button>
                        </div>
                    </div>
                </>
            </Modal>
            <div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
                <div className="grid grid-cols-2 -md:grid-cols-1 gap-4">
                    <div className="flex flex-col gap-4">
                        <div className="flex items-end justify-between">
                            <label className="text-mti-gray-dim text-base font-normal">Choose an Excel file</label>
                            <button
                                onClick={() => setShowHelp(true)}
                                className="tooltip cursor-pointer p-1.5 hover:bg-gray-200 rounded-full transition-colors duration-200"
                                data-tip="Excel File Format"
                            >
                                <IoInformationCircleOutline size={24} />
                            </button>
                        </div>
                        <Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
                            {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
                        </Button>
                    </div>
                    <div className={clsx("flex flex-col gap-4")}>
                        <label className="font-normal text-base text-mti-gray-dim">Entity</label>
                        <Select
                            defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
                            options={entities.map((e) => ({ value: e.id, label: e.label }))}
                            onChange={(e) => setEntity(e?.value || undefined)}
                            isClearable={checkAccess(user, ["admin", "developer"])}
                        />
                    </div>
                </div>
                {classroomTransferState.parsedExcel?.rows !== undefined && (
                    <ClassroomImportSummary state={classroomTransferState} />
                )}
                {classroomTransferState.imports.length !== 0 && (
                    <div className="flex w-full flex-col gap-4">
                        <span className="text-mti-gray-dim text-base font-normal">New Classroom Assignments:</span>
                        <UserTable users={classroomTransferState.imports} />
                    </div>
                )}
                <Button className="my-auto mt-4" onClick={createNewGroupsAndAssignStudents} disabled={classroomTransferState.imports.length === 0}>
                    Assign {classroomTransferState.imports.length !== 0 ? `${classroomTransferState.imports.length} user${classroomTransferState.imports.length > 1 ? 's' : ''}` : ''} to {`${new Set(classroomTransferState.imports.map((i) => i.groupName)).size} classrooms`}
                </Button>
            </div>
        </>
    );
}

export default StudentClassroomTransfer;