/**
 * photo-crop.js — reusable drag-to-pan + zoom photo crop editor.
 *
 * Usage:
 *   PhotoCrop.open({
 *     imageUrl: '/uploads/xyz.jpg',
 *     focalX: 50, focalY: 50, zoom: 1,      // current stored values (0-100, 0-100, 1-2.5)
 *     onApply: function (focalX, focalY, zoom) { ... }
 *   });
 *
 * The crop frame uses the exact same CSS recipe (object-position + transform
 * scale/transform-origin) that final card thumbnails use elsewhere in the
 * app, so what you see here is what renders everywhere else.
 *
 * All math reads the frame/reference boxes' *actual rendered* size
 * (getBoundingClientRect) rather than assuming fixed pixel dimensions —
 * the boxes are responsive (aspect-ratio + max-width:100%), so this must
 * hold at any viewport size, mobile included.
 */
var PhotoCrop = (function () {
    'use strict';

    var FRAME_DEFAULT_W = 320, FRAME_DEFAULT_H = 160; // initial size hint only
    var REF_DEFAULT_W = 160, REF_DEFAULT_H = 160;
    var ZOOM_MIN = 1, ZOOM_MAX = 2.5;

    var els = null;       // DOM refs, built once
    var state = null;     // { naturalW, naturalH, focalX, focalY, zoom, onApply }
    var drag = null;      // { startX, startY, startFocalX, startFocalY } while dragging

    function ensureBuilt() {
        if (els) return;

        var overlay = document.createElement('div');
        overlay.className = 'photo-crop-overlay';
        overlay.innerHTML =
            '<div class="photo-crop-box">' +
            '  <h3>Reposition Photo</h3>' +
            '  <div class="photo-crop-main">' +
            '    <div class="photo-crop-frame" style="width:' + FRAME_DEFAULT_W + 'px;height:' + FRAME_DEFAULT_H + 'px">' +
            '      <img class="photo-crop-frame-img" alt="">' +
            '    </div>' +
            '    <div class="photo-crop-ref" style="width:' + REF_DEFAULT_W + 'px;height:' + REF_DEFAULT_H + 'px">' +
            '      <img class="photo-crop-ref-img" alt="">' +
            '      <div class="photo-crop-ref-rect"></div>' +
            '    </div>' +
            '  </div>' +
            '  <div class="photo-crop-zoom-row">' +
            '    <label>Zoom</label>' +
            '    <input type="range" class="photo-crop-zoom-slider" min="' + ZOOM_MIN + '" max="' + ZOOM_MAX + '" step="0.05">' +
            '  </div>' +
            '  <p class="photo-crop-hint">Drag the photo to reposition it. Scroll or use the slider to zoom.</p>' +
            '  <div class="photo-crop-actions">' +
            '    <button type="button" class="btn btn-ghost photo-crop-reset">Reset</button>' +
            '    <div style="flex:1"></div>' +
            '    <button type="button" class="btn btn-ghost photo-crop-cancel">Cancel</button>' +
            '    <button type="button" class="btn btn-primary photo-crop-apply">Apply</button>' +
            '  </div>' +
            '</div>';
        document.body.appendChild(overlay);

        els = {
            overlay:    overlay,
            frame:      overlay.querySelector('.photo-crop-frame'),
            frameImg:   overlay.querySelector('.photo-crop-frame-img'),
            ref:        overlay.querySelector('.photo-crop-ref'),
            refImg:     overlay.querySelector('.photo-crop-ref-img'),
            refRect:    overlay.querySelector('.photo-crop-ref-rect'),
            zoomSlider: overlay.querySelector('.photo-crop-zoom-slider'),
        };

        overlay.addEventListener('click', function (e) {
            if (e.target === overlay) close();
        });
        overlay.querySelector('.photo-crop-cancel').addEventListener('click', close);
        overlay.querySelector('.photo-crop-reset').addEventListener('click', function () {
            state.focalX = 50; state.focalY = 50; state.zoom = 1;
            render();
        });
        overlay.querySelector('.photo-crop-apply').addEventListener('click', function () {
            var cb = state.onApply;
            var fx = state.focalX, fy = state.focalY, z = state.zoom;
            close();
            if (cb) cb(fx, fy, z);
        });

        els.zoomSlider.addEventListener('input', function () {
            state.zoom = parseFloat(els.zoomSlider.value);
            clampFocal();
            render();
        });

        els.frame.addEventListener('wheel', function (e) {
            e.preventDefault();
            var delta = e.deltaY < 0 ? 0.1 : -0.1;
            state.zoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, state.zoom + delta));
            clampFocal();
            render();
        }, { passive: false });

        els.frame.addEventListener('pointerdown', function (e) {
            drag = { startX: e.clientX, startY: e.clientY, startFocalX: state.focalX, startFocalY: state.focalY };
            els.frame.setPointerCapture(e.pointerId);
        });
        els.frame.addEventListener('pointermove', function (e) {
            if (!drag) return;
            var f = frameSize();
            var coverScale = Math.max(f.w / state.naturalW, f.h / state.naturalH);
            var effW = state.naturalW * coverScale * state.zoom;
            var effH = state.naturalH * coverScale * state.zoom;
            var dxPct = -((e.clientX - drag.startX) / effW) * 100;
            var dyPct = -((e.clientY - drag.startY) / effH) * 100;
            state.focalX = drag.startFocalX + dxPct;
            state.focalY = drag.startFocalY + dyPct;
            clampFocal();
            render();
        });
        var endDrag = function () { drag = null; };
        els.frame.addEventListener('pointerup', endDrag);
        els.frame.addEventListener('pointercancel', endDrag);
    }

    function frameSize() {
        var r = els.frame.getBoundingClientRect();
        return { w: r.width, h: r.height };
    }
    function refSize() {
        var r = els.ref.getBoundingClientRect();
        return { w: r.width, h: r.height };
    }

    /** Keep the crop window within the image's natural bounds. */
    function clampFocal() {
        var f = frameSize();
        var coverScale = Math.max(f.w / state.naturalW, f.h / state.naturalH);
        var cropW = f.w / (coverScale * state.zoom);
        var cropH = f.h / (coverScale * state.zoom);
        var minX = (cropW / 2) / state.naturalW * 100;
        var maxX = 100 - minX;
        var minY = (cropH / 2) / state.naturalH * 100;
        var maxY = 100 - minY;
        // If the crop window is bigger than the image on an axis (zoom≈min),
        // min > max — just center it.
        state.focalX = minX <= maxX ? Math.max(minX, Math.min(maxX, state.focalX)) : 50;
        state.focalY = minY <= maxY ? Math.max(minY, Math.min(maxY, state.focalY)) : 50;
    }

    function render() {
        var fx = state.focalX.toFixed(2), fy = state.focalY.toFixed(2), z = state.zoom.toFixed(3);
        var cropStyle = 'object-position:' + fx + '% ' + fy + '%;transform:scale(' + z + ');transform-origin:' + fx + '% ' + fy + '%;';
        els.frameImg.style.cssText = cropStyle;
        els.zoomSlider.value = state.zoom;

        // Reference thumbnail: full image, contain-fit, with a rectangle
        // overlay marking the current crop window (dimmed outside it via
        // a CSS box-shadow "spotlight").
        var f = frameSize(), rf = refSize();
        var containScale = Math.min(rf.w / state.naturalW, rf.h / state.naturalH);
        var imgW = state.naturalW * containScale, imgH = state.naturalH * containScale;
        var offX = (rf.w - imgW) / 2, offY = (rf.h - imgH) / 2;

        var coverScale = Math.max(f.w / state.naturalW, f.h / state.naturalH);
        var cropNatW = f.w / (coverScale * state.zoom);
        var cropNatH = f.h / (coverScale * state.zoom);
        var centerXnat = (state.focalX / 100) * state.naturalW;
        var centerYnat = (state.focalY / 100) * state.naturalH;
        var cropLeftNat = centerXnat - cropNatW / 2;
        var cropTopNat  = centerYnat - cropNatH / 2;

        var rectLeft = offX + cropLeftNat * containScale;
        var rectTop  = offY + cropTopNat * containScale;
        var rectW    = cropNatW * containScale;
        var rectH    = cropNatH * containScale;

        els.refRect.style.left   = rectLeft + 'px';
        els.refRect.style.top    = rectTop + 'px';
        els.refRect.style.width  = rectW + 'px';
        els.refRect.style.height = rectH + 'px';
    }

    function open(opts) {
        ensureBuilt();
        state = {
            naturalW: 0, naturalH: 0,
            focalX: opts.focalX != null ? opts.focalX : 50,
            focalY: opts.focalY != null ? opts.focalY : 50,
            zoom:   opts.zoom   != null ? opts.zoom   : 1,
            onApply: opts.onApply,
        };
        els.overlay.classList.add('open');
        els.frameImg.style.cssText = '';
        els.refRect.style.display = 'none';

        var loader = new Image();
        loader.onload = function () {
            state.naturalW = loader.naturalWidth;
            state.naturalH = loader.naturalHeight;
            els.frameImg.src = opts.imageUrl;
            els.refImg.src   = opts.imageUrl;
            els.refRect.style.display = '';
            clampFocal();
            render();
        };
        loader.src = opts.imageUrl;
    }

    function close() {
        if (els) els.overlay.classList.remove('open');
        drag = null;
    }

    return { open: open, close: close };
})();