var _useState_IU = React.useState;
var _useRef_IU = React.useRef;
var _useCallback_IU = React.useCallback;
var _useEffect_IU = React.useEffect;

/**
 * ImageUpload — Drag-and-drop / tap-to-upload image component.
 *
 * Props:
 *   onImageReady (func)  — Called with { file, dataURL, previewURL } after successful load
 *   maxSizeMB    (num)   — Max file size in MB (default: 10)
 *   accept       (str)   — File input accept attribute (default: "image/*")
 */
var ImageUpload = function (props) {
    var onImageReady = props.onImageReady;
    var maxSizeMB = props.maxSizeMB || 10;
    var accept = props.accept || 'image/*';

    var dragState = _useState_IU(false);
    var isDragging = dragState[0]; var setIsDragging = dragState[1];
    var errorState = _useState_IU(null);
    var error = errorState[0]; var setError = errorState[1];
    var procState = _useState_IU(false);
    var isProcessing = procState[0]; var setIsProcessing = procState[1];
    var inputRef = _useRef_IU(null);
    var mountedRef = _useRef_IU(true);

    _useEffect_IU(function () {
        return function () { mountedRef.current = false; };
    }, []);

    var validate = _useCallback_IU(function (file) {
        if (!file.type.startsWith('image/')) return 'Please select a valid image file.';
        if (file.size > maxSizeMB * 1024 * 1024) return 'Image too large. Please use images under ' + maxSizeMB + 'MB.';
        return null;
    }, [maxSizeMB]);

    var processFile = _useCallback_IU(function (file) {
        var err = validate(file);
        if (err) { setError(err); return; }

        setError(null);
        setIsProcessing(true);

        var reader = new FileReader();
        reader.onload = function (e) {
            MouldDetectService.compressForPreview(e.target.result).then(function (previewURL) {
                if (!mountedRef.current) return;
                setIsProcessing(false);
                if (onImageReady) onImageReady({ file: file, dataURL: e.target.result, previewURL: previewURL });
            })['catch'](function () {
                if (!mountedRef.current) return;
                setError('Failed to process image. Please try a smaller file.');
                setIsProcessing(false);
            });
        };
        reader.onerror = function () {
            if (!mountedRef.current) return;
            // LR-02 FIX: plain-English message with actionable next step
            setError('Could not open this image. Please try selecting it again, or choose a different photo.');
            setIsProcessing(false);
        };
        reader.readAsDataURL(file);
    }, [validate, onImageReady]);

    var handleDrop = _useCallback_IU(function (e) {
        e.preventDefault();
        setIsDragging(false);
        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) processFile(e.dataTransfer.files[0]);
    }, [processFile]);

    var handleDragOver = _useCallback_IU(function (e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
        setIsDragging(true);
    }, []);

    var handleDragLeave = _useCallback_IU(function () { setIsDragging(false); }, []);

    var handleChange = _useCallback_IU(function (e) {
        if (e.target.files && e.target.files.length > 0) processFile(e.target.files[0]);
    }, [processFile]);

    return (
        <div className="space-y-3 bio-bg bio-bg-20 rounded-2xl shadow-soft">
            <label
                className={'flex flex-col items-center justify-center rounded-2xl border-2 border-dashed p-6 cursor-pointer transition-all ' + (isDragging ? 'border-primary bg-primary/5 scale-[1.01]' : 'border-sage/30 bg-surface/50 hover:border-primary/40 hover:bg-primary/5')}
                onDrop={handleDrop}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
            >
                <input
                    ref={inputRef}
                    type="file"
                    accept={accept}
                    capture="environment"
                    className="hidden"
                    onChange={handleChange}
                />
                {isProcessing ? (
                    <div className="flex flex-col items-center gap-2 py-4">
                        <div className="w-8 h-8 border-3 border-primary/30 border-t-primary rounded-full animate-spin"></div>
                        <p className="text-sm font-semibold text-muted">Processing image...</p>
                    </div>
                ) : (
                    <div className="flex flex-col items-center gap-3 text-center">
                        <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
                            <span className="material-symbols-outlined text-primary text-3xl">add_a_photo</span>
                        </div>
                        <div>
                            <p className="text-sm font-bold text-forest">
                                Drag & drop a photo here
                            </p>
                            <p className="text-sm text-forest/70 font-medium mt-1">
                                or <span className="text-forest font-bold">tap to capture or upload</span>
                            </p>
                        </div>
                        <p className="text-xs text-forest leading-relaxed max-w-[260px]">
                            Best results from clear, well-lit images of walls, ceilings, corners, or damp-prone areas.
                        </p>
                    </div>
                )}
            </label>
            {error && (
                <div className="bg-warning-light rounded-xl p-3 flex items-start gap-2">
                    <span className="material-symbols-outlined text-warning text-lg mt-0.5">error</span>
                    <p className="text-sm text-warning font-medium">{error}</p>
                </div>
            )}
        </div>
    );
};

window.ImageUpload = ImageUpload;