import React from 'react';
import { FiAlertCircle } from "react-icons/fi";
import Dropdown from '../Dropdown';
import { errorsByRows, ExcelError } from '@/utils/excel.errors';

const ParseExcelErrors: React.FC<{ errors: ExcelError[] }> = (props) => {
    const errorsByRow = errorsByRows(props.errors);

    const ErrorTitle = (row: string) => (
        <div className="flex gap-2 items-center w-full">
            <FiAlertCircle className="text-red-500 h-5 w-5" />
            <h3 className="text-sm font-medium text-red-800">
                Errors found in row {row}
            </h3>
        </div>
    );

    return (
        <div className="space-y-4">
            {Object.entries(errorsByRow).map(([row, rowErrors]) => (
                <div key={`row-${row}`} className="bg-red-50 rounded-lg">
                    <Dropdown
                        customTitle={ErrorTitle(row)}
                        className="w-full text-left font-semibold flex justify-between items-center p-4"
                        contentWrapperClassName="px-4 pb-4"
                    >
                        <div className="space-y-3">
                            {rowErrors.required.length > 0 && (
                                <div className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors">
                                    <div className="font-medium">
                                        Missing values:
                                    </div>
                                    <div className="text-red-600 mt-1 ml-2">
                                        <span>
                                            On columns:&nbsp;
                                        </span>
                                        <span className="font-mono bg-red-100/50 px-1 rounded">
                                            {rowErrors.required.join(', ')}
                                        </span>
                                    </div>
                                </div>
                            )}

                            {rowErrors.other.length > 0 && (
                                <div className="space-y-2">
                                    {rowErrors.other.map((error, index) => (
                                        <div
                                            key={`validation-${index}`}
                                            className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors"
                                        >
                                            <div className="font-medium">
                                                {error.error}:
                                            </div>
                                            <div className="text-red-600 mt-1 ml-2">
                                                Value
                                                <span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
                                                    {error.value}
                                                </span>
                                                in column
                                                <span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
                                                    {error.column}
                                                </span>
                                                is invalid!
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </Dropdown>
                </div>
            ))}
        </div>
    );
};

export default ParseExcelErrors;