import { OverlayTrigger, Tooltip } from "react-bootstrap";
import { MdCheckBox, MdCheckBoxOutlineBlank, MdWarning } from "react-icons/md";

interface ValidationStatusBadgeProps {
    isValid: boolean;
    validationErrors?: Record<string, string>;
    variant?: 'icon' | 'badge' | 'detailed';
    className?: string;
}

export default function ValidationStatusBadge({
    isValid,
    validationErrors = {},
    variant = 'icon',
    className = ''
}: ValidationStatusBadgeProps) {
    const errorCount = Object.keys(validationErrors).length;

    const getTooltipContent = () => {
        if (isValid) {
            return "Data sudah lengkap dan valid";
        }

        if (errorCount === 0) {
            return "Data belum lengkap";
        }

        return (
            <div className="text-start">
                <div className="fw-bold mb-1">
                    Data belum lengkap ({errorCount} masalah):
                </div>
                {Object.entries(validationErrors).slice(0, 8).map(([field, message]) => (
                    <div key={field} className="small mb-1">
                        • {message}
                    </div>
                ))}
                {errorCount > 8 && (
                    <div className="small text-muted">
                        ... dan {errorCount - 8} masalah lainnya
                    </div>
                )}
            </div>
        );
    };

    const getIconContent = () => {
        if (variant === 'icon') {
            return (
                <div className={`text-center ${className}`}>
                    {isValid ?
                        <MdCheckBox className="text-success" title="Valid" /> :
                        <MdCheckBoxOutlineBlank className="text-warning" title="Invalid" />
                    }
                </div>
            );
        }

        if (variant === 'badge') {
            return (
                <span className={`badge ${isValid ? 'bg-success' : 'bg-warning text-dark'} ${className}`}>
                    {isValid ? 'Valid' : 'Incomplete'}
                </span>
            );
        }

        // detailed variant
        return (
            <div className={`d-flex align-items-center gap-2 ${className}`}>
                {isValid ? (
                    <>
                        <MdCheckBox className="text-success" />
                        <span className="text-success small">Valid</span>
                    </>
                ) : (
                    <>
                        <MdWarning className="text-warning" />
                        <span className="text-warning small">
                            {errorCount > 0 ? `${errorCount} masalah` : 'Incomplete'}
                        </span>
                    </>
                )}
            </div>
        );
    };

    return (
        <OverlayTrigger
            placement="top"
            overlay={<Tooltip>{getTooltipContent()}</Tooltip>}
        >
            {getIconContent()}
        </OverlayTrigger>
    );
}