{{--
    Modal crop foto produk sebelum upload.

    Alur:
    1. Admin memilih file lewat input#image-input.
    2. File dibaca sebagai data URL.
    3. Cropper.js dibuka dengan rasio 4:3.
    4. Hasil crop dikonversi ke JPEG kualitas 0.85.
    5. File hasil crop dipasang kembali ke input lewat DataTransfer.
--}}
<div
    id="crop-modal"
    class="admin-crop-modal hidden"
    role="dialog"
    aria-modal="true"
    aria-labelledby="crop-modal-title"
    aria-hidden="true"
>
    <button
        type="button"
        class="admin-crop-backdrop"
        data-crop-close
        aria-label="Tutup crop foto"
    ></button>

    <div class="admin-crop-shell" role="document">
        <header class="admin-crop-header">
            <div class="admin-crop-heading">
                <span class="admin-crop-heading-icon">
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.7"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M6 3v12a3 3 0 0 0 3 3h12M18 21V9a3 3 0 0 0-3-3H3"
                        />
                    </svg>
                </span>

                <div>
                    <span class="admin-panel-eyebrow">
                        Image Adjustment
                    </span>

                    <h3
                        id="crop-modal-title"
                        class="admin-crop-title font-display"
                    >
                        Sesuaikan Foto Produk
                    </h3>
                </div>
            </div>

            <button
                type="button"
                class="admin-crop-close"
                data-crop-close
                aria-label="Tutup modal"
            >
                <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.8"
                    aria-hidden="true"
                >
                    <path
                        stroke-linecap="round"
                        d="M6 6l12 12M18 6 6 18"
                    />
                </svg>
            </button>
        </header>

        <div class="admin-crop-body">
            <div class="admin-crop-canvas-wrap">
                <div class="admin-crop-ratio-badge">
                    4:3
                </div>

                <img
                    id="crop-target-image"
                    class="admin-crop-target"
                    alt="Pratinjau foto yang akan dipotong"
                >
            </div>

            <div class="admin-crop-help">
                <span class="admin-crop-help-icon">
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.7"
                        aria-hidden="true"
                    >
                        <circle cx="12" cy="12" r="9"></circle>
                        <path
                            stroke-linecap="round"
                            d="M12 11v5M12 8h.01"
                        />
                    </svg>
                </span>

                <p>
                    Geser posisi gambar dan gunakan zoom untuk menentukan area
                    crop. Rasio dikunci 4:3 agar konsisten dengan tampilan produk.
                </p>
            </div>
        </div>

        <footer class="admin-crop-footer">
            <button
                type="button"
                id="crop-cancel-btn"
                class="admin-button admin-button-ghost"
            >
                Batal
            </button>

            <button
                type="button"
                id="crop-apply-btn"
                class="admin-button admin-button-primary admin-crop-apply"
            >
                <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.8"
                    aria-hidden="true"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="m5 13 4 4L19 7"
                    />
                </svg>

                <span>Gunakan Foto Ini</span>
            </button>
        </footer>
    </div>
</div>

<script>
(function () {
    const imageInput = document.getElementById('image-input');

    if (!imageInput) {
        return;
    }

    const modal = document.getElementById('crop-modal');
    const targetImage = document.getElementById('crop-target-image');
    const cancelButton = document.getElementById('crop-cancel-btn');
    const applyButton = document.getElementById('crop-apply-btn');
    const closeButtons = modal?.querySelectorAll('[data-crop-close]') ?? [];

    let cropper = null;
    let cropperCssLoaded = false;
    let cropperJsLoaded = false;
    let cropperLoading = false;
    let pendingReadyCallbacks = [];

    function runReadyCallbacks() {
        pendingReadyCallbacks.forEach((callback) => callback());
        pendingReadyCallbacks = [];
    }

    function loadCropperAssets(onReady) {
        if (
            cropperCssLoaded &&
            cropperJsLoaded &&
            typeof Cropper !== 'undefined'
        ) {
            onReady();
            return;
        }

        pendingReadyCallbacks.push(onReady);

        if (!cropperCssLoaded) {
            const existingCss = document.querySelector(
                'link[data-cropper-styles]'
            );

            if (existingCss) {
                cropperCssLoaded = true;
            } else {
                const link = document.createElement('link');

                link.rel = 'stylesheet';
                link.href =
                    'https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css';
                link.dataset.cropperStyles = 'true';
                link.onload = function () {
                    cropperCssLoaded = true;
                };

                document.head.appendChild(link);
            }
        }

        if (typeof Cropper !== 'undefined') {
            cropperJsLoaded = true;
            runReadyCallbacks();
            return;
        }

        if (cropperLoading) {
            return;
        }

        cropperLoading = true;

        function tryLoad(sources) {
            if (!sources.length) {
                cropperLoading = false;

                if (typeof pushToast === 'function') {
                    pushToast(
                        'Library crop gagal dimuat. Periksa koneksi internet.',
                        'error'
                    );
                }

                return;
            }

            const script = document.createElement('script');

            script.src = sources[0];
            script.dataset.cropperScript = 'true';

            script.onload = function () {
                cropperLoading = false;
                cropperJsLoaded = true;
                runReadyCallbacks();
            };

            script.onerror = function () {
                script.remove();
                tryLoad(sources.slice(1));
            };

            document.head.appendChild(script);
        }

        tryLoad([
            'https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js',
            'https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.js',
        ]);
    }

    function setModalOpen(isOpen) {
        if (!modal) {
            return;
        }

        modal.classList.toggle('hidden', !isOpen);
        modal.classList.toggle('is-open', isOpen);
        modal.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
        document.documentElement.classList.toggle(
            'admin-crop-open',
            isOpen
        );
    }

    function openModalWithFile(file) {
        if (!modal || !targetImage) {
            return;
        }

        const reader = new FileReader();

        reader.onload = function (event) {
            targetImage.src = event.target.result;
            setModalOpen(true);

            loadCropperAssets(function () {
                if (cropper) {
                    cropper.destroy();
                }

                cropper = new Cropper(targetImage, {
                    aspectRatio: 4 / 3,
                    viewMode: 1,
                    autoCropArea: 1,
                    background: false,
                    responsive: true,
                    restore: false,
                    guides: true,
                    center: true,
                    highlight: false,
                    movable: true,
                    zoomable: true,
                    scalable: false,
                    rotatable: false,
                    toggleDragModeOnDblclick: false,
                });
            });
        };

        reader.readAsDataURL(file);
    }

    function closeModal(options = {}) {
        const resetInput = options.resetInput ?? false;

        if (resetInput) {
            imageInput.value = '';
        }

        setModalOpen(false);

        if (cropper) {
            cropper.destroy();
            cropper = null;
        }

        if (targetImage) {
            targetImage.removeAttribute('src');
        }
    }

    imageInput.addEventListener('change', function () {
        const selectedFile = imageInput.files?.[0];

        if (!selectedFile) {
            return;
        }

        openModalWithFile(selectedFile);
    });

    cancelButton?.addEventListener('click', function () {
        closeModal({ resetInput: true });
    });

    closeButtons.forEach((button) => {
        button.addEventListener('click', function () {
            closeModal({ resetInput: true });
        });
    });

    document.addEventListener('keydown', function (event) {
        if (
            event.key === 'Escape' &&
            modal?.classList.contains('is-open')
        ) {
            closeModal({ resetInput: true });
        }
    });

    applyButton?.addEventListener('click', function () {
        if (!cropper || !applyButton) {
            return;
        }

        applyButton.disabled = true;

        const label = applyButton.querySelector('span');

        if (label) {
            label.textContent = 'Memproses...';
        }

        const canvas = cropper.getCroppedCanvas({
            width: 1200,
            height: 900,
            imageSmoothingEnabled: true,
            imageSmoothingQuality: 'high',
        });

        canvas.toBlob(
            function (blob) {
                if (!blob) {
                    applyButton.disabled = false;

                    if (label) {
                        label.textContent = 'Gunakan Foto Ini';
                    }

                    if (typeof pushToast === 'function') {
                        pushToast(
                            'Gagal memproses hasil crop.',
                            'error'
                        );
                    }

                    return;
                }

                const croppedFile = new File(
                    [blob],
                    'product-photo.jpg',
                    {
                        type: 'image/jpeg',
                        lastModified: Date.now(),
                    }
                );

                const dataTransfer = new DataTransfer();

                dataTransfer.items.add(croppedFile);
                imageInput.files = dataTransfer.files;

                closeModal();

                applyButton.disabled = false;

                if (label) {
                    label.textContent = 'Gunakan Foto Ini';
                }

                if (typeof pushToast === 'function') {
                    pushToast(
                        'Foto berhasil disesuaikan.',
                        'success'
                    );
                }
            },
            'image/jpeg',
            0.85
        );
    });
})();
</script>