import React, { useState, useMemo } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import {
    FaCheckCircle,
    FaTimesCircle,
    FaExclamationCircle,
    FaInfoCircle,
    FaUsers,
    FaExclamationTriangle
} from 'react-icons/fa';
import { UserImport } from '@/interfaces/IUserImport';
import Modal from '../Modal';
import ParseExcelErrors from './ExcelError';
import { errorsByRows, ExcelError } from '@/utils/excel.errors';
import UserTable from '../Tables/UserTable';

interface Props {
    parsedExcel: { rows?: any[]; errors?: any[] },
    newUsers: UserImport[],
    enlistedUsers: UserImport[],
    duplicateRows?: { duplicates: ExcelUserDuplicatesMap, count: number }
}

export interface ExcelUserDuplicatesMap {
    studentID: Map<string, number[]>;
    email: Map<string, number[]>;
    passport_id: Map<string, number[]>;
    phone: Map<string, number[]>;
}

interface ClassroomCounts {
    [key: string]: number;
}


const UserImportSummary: React.FC<Props> = ({ parsedExcel, newUsers, enlistedUsers, duplicateRows }) => {
    const [showErrorsModal, setShowErrorsModal] = useState(false);
    const [showDuplicatesModal, setShowDuplicatesModal] = useState(false);
    const [showEnlistedModal, setShowEnlistedModal] = useState(false);
    const [showClassroomModal, setShowClassromModal] = useState(false);

    const classroomCounts = useMemo(() => {
        return newUsers.reduce((acc: ClassroomCounts, user) => {
            const group = user.groupName;
            acc[group] = (acc[group] || 0) + 1;
            return acc;
        }, {});
    }, [newUsers]);

    const errorCount = Object.entries(errorsByRows(parsedExcel.errors as ExcelError[])).length || 0;

    const fieldMapper = {
        "studentID": "Student ID",
        "passport_id": "Passport/National ID",
        "phone": "Phone Number",
        "email": "E-mail"
    }

    return (
        <>
            <Card>
                <CardHeader>
                    <CardTitle className='flex justify-center font-semibold text-xl'>Import Summary</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="space-y-4">
                        <div className="flex items-center gap-2">
                            <FaInfoCircle className="h-5 w-5 text-blue-500" />
                            <span>
                                {`${parsedExcel.rows?.length} total spreadsheet rows`}
                                {parsedExcel.rows && parsedExcel.rows.filter(row => row === null).length > 0 && (
                                    <span className="text-gray-500">
                                        {` (${parsedExcel.rows.filter(row => row === null).length} empty)`}
                                    </span>
                                )}
                            </span>
                        </div>
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                                {newUsers.length > 0 ? (
                                    <FaCheckCircle className="h-5 w-5 text-green-500" />
                                ) : (
                                    <FaTimesCircle className="h-5 w-5 text-red-500" />
                                )}
                                <span>{`${newUsers.length} new user${newUsers.length > 1 ? "s" : ''} to import`}</span>
                            </div>
                            {newUsers.length > 0 && (
                                <button
                                    onClick={() => setShowClassromModal(true)}
                                    className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
                                >
                                    View by classroom
                                </button>
                            )}
                        </div>

                        {enlistedUsers.length > 0 && (
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                    <FaUsers className="h-5 w-5 text-blue-500" />
                                    <span>{`${enlistedUsers.length} already registered user${enlistedUsers.length > 1 ? "s" : ''}`}</span>
                                </div>
                                <button
                                    onClick={() => setShowEnlistedModal(true)}
                                    className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
                                >
                                    View details
                                </button>
                            </div>
                        )}

                        {(duplicateRows && duplicateRows.count > 0) && (
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                    <FaExclamationCircle className="h-5 w-5 text-yellow-500" />
                                    <span>{duplicateRows.count} duplicate entries in file</span>
                                </div>
                                <button
                                    onClick={() => setShowDuplicatesModal(true)}
                                    className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
                                >
                                    View duplicates
                                </button>
                            </div>
                        )}

                        {errorCount > 0 && (
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                    <FaTimesCircle className="h-5 w-5 text-red-500" />
                                    <span>{errorCount} invalid rows</span>
                                </div>
                                <button
                                    onClick={() => setShowErrorsModal(true)}
                                    className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
                                >
                                    View errors
                                </button>
                            </div>
                        )}
                    </div>
                    {((duplicateRows && duplicateRows.count > 0) || errorCount > 0) && (
                        <div className="mt-6 rounded-lg border border-red-100 bg-white p-6">
                            <div className="flex items-start gap-4">
                                <div className="mt-1">
                                    <FaExclamationTriangle className="h-5 w-5 text-red-400" />
                                </div>
                                <div className="flex-1 space-y-3">
                                    <p className="font-medium text-gray-900">
                                        The following will be excluded from import:
                                    </p>
                                    <ul className="space-y-4">
                                        {duplicateRows && duplicateRows.count > 0 && (
                                            <li>
                                                <div className="text-gray-700">
                                                    <span className="font-medium">{duplicateRows.count}</span> rows with duplicate values
                                                </div>
                                                <div className="mt-2 space-y-1.5">
                                                    {(Object.keys(duplicateRows.duplicates) as Array<keyof ExcelUserDuplicatesMap>).map(field => {
                                                        const duplicates = Array.from(duplicateRows.duplicates[field].entries())
                                                            .filter((entry) => entry[1].length > 1);
                                                        if (duplicates.length === 0) return null;
                                                        return (
                                                            <div key={field} className="ml-4 text-sm text-gray-600">
                                                                <span className="text-gray-500">{field}:</span> rows {
                                                                    duplicates.map(([_, rows]) => rows.join(', ')).join('; ')
                                                                }
                                                            </div>
                                                        );
                                                    })}
                                                </div>
                                            </li>
                                        )}
                                        {errorCount > 0 && (
                                            <li>
                                                <div className="text-gray-700">
                                                    <span className="font-medium">{errorCount}</span> rows with invalid or missing information
                                                </div>
                                                <div className="mt-1 ml-4 text-sm text-gray-600">
                                                    Rows: {Object.keys(errorsByRows(parsedExcel.errors || [])).join(', ')}
                                                </div>
                                            </li>
                                        )}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    )}
                </CardContent>
            </Card>

            <Modal isOpen={showErrorsModal} onClose={() => setShowErrorsModal(false)}>
                <>
                    <div className="flex items-center gap-2 mb-6">
                        <FaTimesCircle className="w-5 h-5 text-red-500" />
                        <h2 className="text-lg font-semibold text-gray-900">Validation Errors</h2>
                    </div>
                    <ParseExcelErrors errors={parsedExcel.errors!} />
                </>
            </Modal>

            <Modal isOpen={showEnlistedModal} onClose={() => setShowEnlistedModal(false)} maxWidth='max-w-[85%]'>
                <>
                    <div className="flex items-center gap-2 mb-6">
                        <FaUsers className="w-5 h-5 text-blue-500" />
                        <h2 className="text-lg font-semibold text-gray-900">Already Registered Users</h2>
                    </div>
                    <div className="flex w-full flex-col gap-4">
                        <UserTable users={enlistedUsers} />
                    </div>
                </>
            </Modal>

            <Modal isOpen={showDuplicatesModal} onClose={() => setShowDuplicatesModal(false)}>
                <>
                    <div className="flex items-center gap-2 mb-6">
                        <FaExclamationCircle className="w-5 h-5 text-amber-500" />
                        <h2 className="text-lg font-semibold text-gray-900">Duplicate Entries</h2>
                    </div>
                    {duplicateRows &&
                        < div className="space-y-6">
                            {(Object.keys(duplicateRows.duplicates) as Array<keyof ExcelUserDuplicatesMap>).map(field => {
                                const duplicates = Array.from(duplicateRows!.duplicates[field].entries())
                                    .filter((entry): entry is [string, number[]] => entry[1].length > 1);

                                if (duplicates.length === 0) return null;

                                return (
                                    <div key={field} className="relative">
                                        <div className="flex items-center gap-2 mb-3">
                                            <h2 className="text-md font-medium text-gray-700">
                                                {fieldMapper[field]} duplicates
                                            </h2>
                                            <span className="text-xs text-gray-500 ml-auto">
                                                {duplicates.length} {duplicates.length === 1 ? 'duplicate' : 'duplicates'}
                                            </span>
                                        </div>

                                        <div className="space-y-2">
                                            {duplicates.map(([value, rows]) => (
                                                <div
                                                    key={value}
                                                    className="group relative rounded-lg border border-gray-200 bg-gray-50 p-3 hover:bg-gray-100 transition-colors"
                                                >
                                                    <div className="flex items-start justify-between">
                                                        <div>
                                                            <span className="font-medium text-gray-900">{value}</span>
                                                            <div className="mt-1 text-sm text-gray-600">
                                                                Appears in rows:
                                                                <span className="ml-1 text-blue-600 font-medium">
                                                                    {rows.join(', ')}
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <span className="text-xs text-gray-500">
                                                            {rows.length} occurrences
                                                        </span>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    }
                </>
            </Modal >

            <Modal isOpen={showClassroomModal} onClose={() => setShowClassromModal(false)}>
                <>
                    <div className="flex items-center gap-2 mb-6">
                        <FaCheckCircle className="w-5 h-5 text-green-500" />
                        <h2 className="text-lg font-semibold text-gray-900">Students by Classroom</h2>
                    </div>
                    <div className="space-y-3">
                        {Object.entries(classroomCounts).map(([classroom, count]) => (
                            <div
                                key={classroom}
                                className="flex justify-between items-center rounded-lg border border-gray-200 bg-gray-50 p-3 hover:bg-gray-100 transition-colors"
                            >
                                <div className="flex items-center gap-2">
                                    <span className="text-gray-700">{classroom}</span>
                                </div>
                                <div className="flex items-center gap-1">
                                    <span className="text-sm font-medium text-gray-900">{count}</span>
                                    <span className="text-sm text-gray-500">students</span>
                                </div>
                            </div>
                        ))}
                    </div>
                </>
            </Modal>
        </>
    );
};

export default UserImportSummary;