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

interface Props {
    parsedExcel: { rows?: any[]; errors?: any[] },
    duplicateRows?: { duplicates: ExcelCodegenDuplicatesMap, count: number },
    infos: { email: string; name: string; passport_id: string }[];
}

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

const CodeGenImportSummary: React.FC<Props> = ({ infos, parsedExcel, duplicateRows }) => {
    const [showErrorsModal, setShowErrorsModal] = useState(false);
    const [showDuplicatesModal, setShowDuplicatesModal] = useState(false);

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

    const fieldMapper = {
        "passport_id": "Passport/National ID",
        "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">
                                {infos.length > 0 ? (
                                    <FaCheckCircle className="h-5 w-5 text-green-500" />
                                ) : (
                                    <FaTimesCircle className="h-5 w-5 text-red-500" />
                                )}
                                <span>{`${infos.length} new code${infos.length > 1 ? "s" : ''} to generate`}</span>
                            </div>
                        </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 ExcelCodegenDuplicatesMap>).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">{fieldMapper[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={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 ExcelCodegenDuplicatesMap>).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 >
        </>
    );
};

export default CodeGenImportSummary;