'use strict';

var React = require('react');
var i18n = require('../core/i18n.js');
var photoFilters = require('./photoFilters.js');
var photoOverlays = require('./photoOverlays.js');
var photoEditorActions = require('./photoEditorActions.js');

/**
 * usePhotoEditor.ts — Custom hook encapsulating all PhotoEditor state & logic.
 *
 * Extracts ~500 lines of state, effects, callbacks, and memoised values
 * out of the god-component so that the main component file is pure composition.
 */
// ── Hook ──
function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initialState }) {
    const { t: _t } = i18n.useNiceTranslation();
    const t = (key, def) => _t(key, def);
    // ── State ──
    // Image
    const [image, setImage] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    // Tabs
    const [activeTab, setActiveTabRaw] = React.useState("filters");
    const [cropMode, setCropMode] = React.useState(false);
    // Filter
    const [selectedFilter, setSelectedFilter] = React.useState("none");
    const [filterIntensity, setFilterIntensity] = React.useState(1);
    const [filterCategory, setFilterCategory] = React.useState("all");
    const [filterParams] = React.useState({});
    // Adjustments
    const [adjustments, setAdjustments] = React.useState({ ...photoFilters.DEFAULT_ADJUSTMENTS });
    // Transform
    const [rotation, setRotation] = React.useState(0);
    const [flipH, setFlipH] = React.useState(false);
    const [flipV, setFlipV] = React.useState(false);
    // Crop
    const [cropRect, setCropRect] = React.useState(null);
    const [cropAspect, setCropAspect] = React.useState(null);
    const [cropDragging, setCropDragging] = React.useState(null);
    const [cropStart, setCropStart] = React.useState(null);
    // Compare
    const [showCompare, setShowCompare] = React.useState(false);
    const [comparePosition, setComparePosition] = React.useState(50);
    const [compareDragging, setCompareDragging] = React.useState(false);
    // Zoom
    const [zoom, setZoom] = React.useState(1);
    // Overlays
    const [overlays, setOverlays] = React.useState([]);
    const [selectedOverlayId, setSelectedOverlayId] = React.useState(null);
    const [overlayDragging, setOverlayDragging] = React.useState(false);
    const [overlayDragStart, setOverlayDragStart] = React.useState(null);
    // Sticker / emoji
    const [emojiCat, setEmojiCat] = React.useState(photoOverlays.EMOJI_CATALOG[0].id);
    // Text overlay
    const [textDraft, setTextDraft] = React.useState("Tekst");
    const [textColor, setTextColor] = React.useState("#ffffff");
    const [textBold, setTextBold] = React.useState(true);
    const [textItalic, setTextItalic] = React.useState(false);
    const [textOutline, setTextOutline] = React.useState(true);
    const [textFontSize, setTextFontSize] = React.useState(36);
    const [textBg, setTextBg] = React.useState(false);
    // Shape
    const [shapeStroke, setShapeStroke] = React.useState("#ffffff");
    const [shapeFill, setShapeFill] = React.useState("");
    const [shapeStrokeW, setShapeStrokeW] = React.useState(3);
    // Frame
    const [frameColor, setFrameColor] = React.useState("#ffffff");
    const [frameThick, setFrameThick] = React.useState(3);
    // Drawing
    const [drawColor, setDrawColor] = React.useState("#ff0000");
    const [drawWidth, setDrawWidth] = React.useState(4);
    const [isDrawing, setIsDrawing] = React.useState(false);
    const [livePoints, setLivePoints] = React.useState([]);
    const drawingOverlayRef = React.useRef(null);
    // History
    const [history, setHistory] = React.useState([]);
    const [historyIdx, setHistoryIdx] = React.useState(-1);
    const suppressHistoryRef = React.useRef(false);
    // Canvas refs
    const mainCanvasRef = React.useRef(null);
    const compareCanvasRef = React.useRef(null);
    const containerRef = React.useRef(null);
    // ── Derived ──
    const accent = playerColor;
    const accentDim = playerColor + "55";
    const selectedOverlay = React.useMemo(() => { var _a; return (_a = overlays.find(o => o.id === selectedOverlayId)) !== null && _a !== void 0 ? _a : null; }, [overlays, selectedOverlayId]);
    // Tab setter (auto-toggle cropMode)
    const setActiveTab = React.useCallback((tab) => {
        setActiveTabRaw(tab);
        setCropMode(tab === "crop");
    }, []);
    // ── History ──
    const pushHistory = React.useCallback(() => {
        if (suppressHistoryRef.current)
            return;
        const state = {
            selectedFilter,
            filterIntensity,
            adjustments: { ...adjustments },
            rotation,
            flipH,
            flipV,
            cropRect: cropRect ? { ...cropRect } : null,
            overlays: overlays.map(o => ({ ...o })),
        };
        setHistory(prev => [...prev.slice(0, historyIdx + 1), state]);
        setHistoryIdx(prev => prev + 1);
    }, [selectedFilter, filterIntensity, adjustments, rotation, flipH, flipV, cropRect, overlays, historyIdx]);
    const restoreState = React.useCallback((s) => {
        suppressHistoryRef.current = true;
        setSelectedFilter(s.selectedFilter);
        setFilterIntensity(s.filterIntensity);
        setAdjustments({ ...s.adjustments });
        setRotation(s.rotation);
        setFlipH(s.flipH);
        setFlipV(s.flipV);
        setCropRect(s.cropRect ? { ...s.cropRect } : null);
        setOverlays(s.overlays.map(o => ({ ...o })));
        setSelectedOverlayId(null);
        setTimeout(() => { suppressHistoryRef.current = false; }, 50);
    }, []);
    const undo = React.useCallback(() => {
        if (historyIdx > 0) {
            const newIdx = historyIdx - 1;
            setHistoryIdx(newIdx);
            restoreState(history[newIdx]);
        }
    }, [historyIdx, history, restoreState]);
    const redo = React.useCallback(() => {
        if (historyIdx < history.length - 1) {
            const newIdx = historyIdx + 1;
            setHistoryIdx(newIdx);
            restoreState(history[newIdx]);
        }
    }, [historyIdx, history, restoreState]);
    // ── Load image ──
    React.useEffect(() => {
        const img = new Image();
        img.onload = () => {
            setImage(img);
            setLoading(false);
            setCropRect({ x: 0, y: 0, w: img.naturalWidth, h: img.naturalHeight });
        };
        img.onerror = () => setLoading(false);
        if (src instanceof File || src instanceof Blob) {
            img.src = URL.createObjectURL(src);
        }
        else {
            img.crossOrigin = "anonymous";
            img.src = src;
        }
        return () => {
            if (img.src.startsWith("blob:"))
                URL.revokeObjectURL(img.src);
        };
    }, [src]);
    // Push initial history once image loads
    React.useEffect(() => {
        if (image && history.length === 0) {
            if (initialState) {
                const prev = photoOverlays.deserializeEditorState(initialState);
                if (prev) {
                    suppressHistoryRef.current = true;
                    setSelectedFilter(prev.filter);
                    setFilterIntensity(prev.filterIntensity);
                    setAdjustments({ ...prev.adjustments });
                    setRotation(prev.rotation);
                    setFlipH(prev.flipH);
                    setFlipV(prev.flipV);
                    if (prev.cropRect)
                        setCropRect(prev.cropRect);
                    if (prev.overlays)
                        setOverlays(prev.overlays);
                    setTimeout(() => { suppressHistoryRef.current = false; }, 50);
                }
            }
            pushHistory();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [image]);
    // ── Render main canvas ──
    const renderMain = React.useCallback(() => {
        if (!image || !mainCanvasRef.current)
            return;
        photoFilters.renderToCanvas(mainCanvasRef.current, image, selectedFilter, { ...filterParams, intensity: filterIntensity }, adjustments, cropMode ? null : cropRect, rotation, flipH, flipV);
        if (overlays.length > 0 || livePoints.length > 1) {
            const ctx = mainCanvasRef.current.getContext("2d");
            if (ctx) {
                const cw = mainCanvasRef.current.width;
                const ch = mainCanvasRef.current.height;
                if (overlays.length > 0)
                    photoOverlays.renderAllOverlays(ctx, overlays, cw, ch);
                if (livePoints.length > 1)
                    photoOverlays.renderLiveStroke(ctx, livePoints, drawColor, drawWidth, cw, ch);
            }
        }
    }, [image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, cropMode, rotation, flipH, flipV, overlays, livePoints, drawColor, drawWidth]);
    React.useEffect(() => { renderMain(); }, [renderMain]);
    // Render compare canvas (original)
    React.useEffect(() => {
        if (!image || !compareCanvasRef.current || !showCompare)
            return;
        const canvas = compareCanvasRef.current;
        const ctx = canvas.getContext("2d");
        if (!ctx)
            return;
        const crop = cropRect !== null && cropRect !== void 0 ? cropRect : { x: 0, y: 0, w: image.naturalWidth, h: image.naturalHeight };
        canvas.width = crop.w;
        canvas.height = crop.h;
        ctx.drawImage(image, crop.x, crop.y, crop.w, crop.h, 0, 0, crop.w, crop.h);
    }, [image, showCompare, cropRect]);
    // ── Filter thumbnails ──
    const filteredList = React.useMemo(() => {
        if (filterCategory === "all")
            return photoFilters.PHOTO_FILTERS;
        return photoFilters.PHOTO_FILTERS.filter(f => f.category === filterCategory || f.id === "none");
    }, [filterCategory]);
    const generateThumbnail = React.useCallback((canvas, filter) => {
        if (!image)
            return;
        const size = 64;
        canvas.width = size;
        canvas.height = size;
        const ctx = canvas.getContext("2d", { willReadFrequently: true });
        if (!ctx)
            return;
        const s = Math.min(image.naturalWidth, image.naturalHeight);
        const sx = (image.naturalWidth - s) / 2;
        const sy = (image.naturalHeight - s) / 2;
        ctx.drawImage(image, sx, sy, s, s, 0, 0, size, size);
        if (filter.id !== "none") {
            const imgData = ctx.getImageData(0, 0, size, size);
            const filtered = filter.apply(imgData, { intensity: 1 });
            ctx.putImageData(filtered, 0, 0);
        }
    }, [image]);
    // ── Crop interaction ──
    const getCanvasScale = React.useCallback(() => {
        if (!mainCanvasRef.current || !containerRef.current || !image)
            return { sx: 1, sy: 1, ox: 0, oy: 0 };
        const rect = mainCanvasRef.current.getBoundingClientRect();
        const cw = mainCanvasRef.current.width;
        const ch = mainCanvasRef.current.height;
        return { sx: cw / rect.width, sy: ch / rect.height, ox: rect.left, oy: rect.top };
    }, [image]);
    const handleCropMouseDown = React.useCallback((e, handle) => {
        e.preventDefault();
        e.stopPropagation();
        setCropDragging(handle);
        setCropStart({ mx: e.clientX, my: e.clientY, rect: { ...cropRect } });
    }, [cropRect]);
    React.useEffect(() => {
        if (!cropDragging || !cropStart || !cropRect || !image)
            return;
        const handleMove = (e) => {
            const scale = getCanvasScale();
            const dx = (e.clientX - cropStart.mx) * scale.sx;
            const dy = (e.clientY - cropStart.my) * scale.sy;
            const r = { ...cropStart.rect };
            const minSize = 20;
            if (cropDragging === "move") {
                r.x = Math.max(0, Math.min(image.naturalWidth - r.w, r.x + dx));
                r.y = Math.max(0, Math.min(image.naturalHeight - r.h, r.y + dy));
            }
            else {
                if (cropDragging.includes("w")) {
                    r.x += dx;
                    r.w -= dx;
                }
                if (cropDragging.includes("e")) {
                    r.w += dx;
                }
                if (cropDragging.includes("n")) {
                    r.y += dy;
                    r.h -= dy;
                }
                if (cropDragging.includes("s")) {
                    r.h += dy;
                }
                if (r.w < minSize) {
                    r.w = minSize;
                }
                if (r.h < minSize) {
                    r.h = minSize;
                }
                if (cropAspect) {
                    if (cropDragging.includes("w") || cropDragging.includes("e")) {
                        r.h = r.w / cropAspect;
                    }
                    else {
                        r.w = r.h * cropAspect;
                    }
                }
                r.x = Math.max(0, r.x);
                r.y = Math.max(0, r.y);
                r.w = Math.min(r.w, image.naturalWidth - r.x);
                r.h = Math.min(r.h, image.naturalHeight - r.y);
            }
            setCropRect(r);
            setCropStart({ mx: e.clientX, my: e.clientY, rect: r });
        };
        const handleUp = () => {
            setCropDragging(null);
            setCropStart(null);
            pushHistory();
        };
        window.addEventListener("mousemove", handleMove);
        window.addEventListener("mouseup", handleUp);
        return () => {
            window.removeEventListener("mousemove", handleMove);
            window.removeEventListener("mouseup", handleUp);
        };
    }, [cropDragging, cropStart, cropRect, image, cropAspect, getCanvasScale, pushHistory]);
    // Compare slider drag
    React.useEffect(() => {
        if (!compareDragging)
            return;
        const handleMove = (e) => {
            if (!containerRef.current)
                return;
            const rect = containerRef.current.getBoundingClientRect();
            const pct = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
            setComparePosition(pct);
        };
        const handleUp = () => setCompareDragging(false);
        window.addEventListener("mousemove", handleMove);
        window.addEventListener("mouseup", handleUp);
        return () => {
            window.removeEventListener("mousemove", handleMove);
            window.removeEventListener("mouseup", handleUp);
        };
    }, [compareDragging]);
    // ── Keyboard shortcuts ──
    React.useEffect(() => {
        const handleKey = (e) => {
            if (e.ctrlKey && e.key === "z") {
                e.preventDefault();
                undo();
            }
            if (e.ctrlKey && e.key === "y") {
                e.preventDefault();
                redo();
            }
        };
        window.addEventListener("keydown", handleKey);
        return () => window.removeEventListener("keydown", handleKey);
    }, [undo, redo]);
    // ── Adjustments ──
    const handleAdjChange = React.useCallback((key, value) => {
        setAdjustments(prev => ({ ...prev, [key]: value }));
    }, []);
    const handleAdjChangeEnd = React.useCallback(() => pushHistory(), [pushHistory]);
    // ── Overlay helpers ──
    const addOverlay = React.useCallback((ov) => {
        setOverlays(prev => [...prev, ov]);
        setSelectedOverlayId(ov.id);
        setTimeout(() => pushHistory(), 30);
    }, [pushHistory]);
    const updateOverlay = React.useCallback((id, patch) => {
        setOverlays(prev => prev.map(o => o.id === id ? { ...o, ...patch } : o));
    }, []);
    const deleteOverlay = React.useCallback((id) => {
        setOverlays(prev => prev.filter(o => o.id !== id));
        if (selectedOverlayId === id)
            setSelectedOverlayId(null);
        setTimeout(() => pushHistory(), 30);
    }, [selectedOverlayId, pushHistory]);
    const moveOverlayForward = React.useCallback((id) => {
        setOverlays(prev => {
            const idx = prev.findIndex(o => o.id === id);
            if (idx < 0 || idx >= prev.length - 1)
                return prev;
            const copy = [...prev];
            [copy[idx], copy[idx + 1]] = [copy[idx + 1], copy[idx]];
            return copy;
        });
    }, []);
    const moveOverlayBack = React.useCallback((id) => {
        setOverlays(prev => {
            const idx = prev.findIndex(o => o.id === id);
            if (idx <= 0)
                return prev;
            const copy = [...prev];
            [copy[idx - 1], copy[idx]] = [copy[idx], copy[idx - 1]];
            return copy;
        });
    }, []);
    // ── Canvas fraction from mouse event ──
    const getCanvasFraction = React.useCallback((e) => {
        if (!mainCanvasRef.current)
            return { fx: 0.5, fy: 0.5 };
        const rect = mainCanvasRef.current.getBoundingClientRect();
        return {
            fx: Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)),
            fy: Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height)),
        };
    }, []);
    // ── Canvas mouse handlers ──
    const handleCanvasMouseDown = React.useCallback((e) => {
        var _a, _b, _c, _d;
        if (cropMode)
            return;
        const { fx, fy } = getCanvasFraction(e);
        if (activeTab === "draw") {
            e.preventDefault();
            setIsDrawing(true);
            setLivePoints([[fx, fy]]);
            return;
        }
        for (let i = overlays.length - 1; i >= 0; i--) {
            const cw = (_b = (_a = mainCanvasRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 1;
            const ch = (_d = (_c = mainCanvasRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 1;
            if (photoOverlays.hitTestOverlay(overlays[i], fx, fy, cw, ch)) {
                setSelectedOverlayId(overlays[i].id);
                setOverlayDragging(true);
                setOverlayDragStart({ mx: fx, my: fy, ox: overlays[i].x, oy: overlays[i].y });
                e.preventDefault();
                return;
            }
        }
        setSelectedOverlayId(null);
    }, [cropMode, activeTab, getCanvasFraction, overlays]);
    const handleCanvasMouseMove = React.useCallback((e) => {
        const { fx, fy } = getCanvasFraction(e);
        if (isDrawing) {
            setLivePoints(prev => [...prev, [fx, fy]]);
            return;
        }
        if (overlayDragging && overlayDragStart && selectedOverlayId) {
            const dx = fx - overlayDragStart.mx;
            const dy = fy - overlayDragStart.my;
            updateOverlay(selectedOverlayId, {
                x: Math.max(0, Math.min(1, overlayDragStart.ox + dx)),
                y: Math.max(0, Math.min(1, overlayDragStart.oy + dy)),
            });
        }
    }, [getCanvasFraction, isDrawing, overlayDragging, overlayDragStart, selectedOverlayId, updateOverlay]);
    const handleCanvasMouseUp = React.useCallback(() => {
        if (isDrawing && livePoints.length > 1) {
            const stroke = { points: [...livePoints], color: drawColor, width: drawWidth, opacity: 1 };
            if (!drawingOverlayRef.current) {
                const dOv = photoOverlays.createDrawingOverlay();
                dOv.strokes.push(stroke);
                drawingOverlayRef.current = dOv;
                setOverlays(prev => [...prev, dOv]);
            }
            else {
                const id = drawingOverlayRef.current.id;
                setOverlays(prev => prev.map(o => o.id === id && o.type === "drawing"
                    ? { ...o, strokes: [...o.strokes, stroke] }
                    : o));
            }
            setLivePoints([]);
            setIsDrawing(false);
            pushHistory();
            return;
        }
        setIsDrawing(false);
        setLivePoints([]);
        if (overlayDragging) {
            setOverlayDragging(false);
            setOverlayDragStart(null);
            pushHistory();
        }
    }, [isDrawing, livePoints, drawColor, drawWidth, overlayDragging, pushHistory]);
    // ── Actions ──
    const buildExportParams = React.useCallback(() => {
        if (!image)
            return null;
        return { image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays };
    }, [image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays]);
    const handleSave = React.useCallback(async () => {
        if (!image || !mainCanvasRef.current)
            return;
        const exportCanvas = document.createElement("canvas");
        photoFilters.renderToCanvas(exportCanvas, image, selectedFilter, { ...filterParams, intensity: filterIntensity }, adjustments, cropRect, rotation, flipH, flipV);
        if (overlays.length > 0) {
            const ctx = exportCanvas.getContext("2d");
            if (ctx)
                photoOverlays.renderAllOverlays(ctx, overlays, exportCanvas.width, exportCanvas.height);
        }
        const file = await photoFilters.canvasToFile(exportCanvas, "player-photo.jpg", 0.92);
        const editorState = photoOverlays.serializeEditorState({
            filter: selectedFilter,
            filterIntensity,
            adjustments: { ...adjustments },
            rotation,
            flipH,
            flipV,
            cropRect: cropRect ? { ...cropRect } : null,
            overlays,
        });
        onSave(file, editorState);
    }, [image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays, onSave]);
    const handleReset = React.useCallback(() => {
        setSelectedFilter("none");
        setFilterIntensity(1);
        setAdjustments({ ...photoFilters.DEFAULT_ADJUSTMENTS });
        setRotation(0);
        setFlipH(false);
        setFlipV(false);
        setOverlays([]);
        setSelectedOverlayId(null);
        if (image) {
            setCropRect({ x: 0, y: 0, w: image.naturalWidth, h: image.naturalHeight });
        }
        setCropMode(false);
        setZoom(1);
        pushHistory();
    }, [image, pushHistory]);
    const handleDownload = React.useCallback(async () => {
        const p = buildExportParams();
        if (!p)
            return;
        const blob = await photoEditorActions.getExportBlob(p);
        if (blob)
            photoEditorActions.handleDownloadBlob(blob);
    }, [buildExportParams]);
    const handleCopyToClipboard = React.useCallback(async () => {
        const p = buildExportParams();
        if (!p)
            return;
        await photoEditorActions.handleCopyImageToClipboard(p);
    }, [buildExportParams]);
    const handleShareNative = React.useCallback(async () => {
        const p = buildExportParams();
        if (!p)
            return;
        const blob = await photoEditorActions.getExportBlob(p);
        if (blob)
            await photoEditorActions.handleNativeShare(blob);
    }, [buildExportParams]);
    // ── Return ──
    return {
        t,
        playerColor,
        onCancel,
        accent,
        accentDim,
        image,
        loading,
        activeTab,
        setActiveTab,
        setCropMode,
        selectedFilter,
        setSelectedFilter,
        filterIntensity,
        setFilterIntensity,
        filterCategory,
        setFilterCategory,
        filteredList,
        generateThumbnail,
        adjustments,
        handleAdjChange,
        handleAdjChangeEnd,
        rotation,
        setRotation,
        flipH,
        setFlipH,
        flipV,
        setFlipV,
        zoom,
        setZoom,
        cropMode,
        cropRect,
        setCropRect,
        cropAspect,
        setCropAspect,
        handleCropMouseDown,
        showCompare,
        setShowCompare,
        comparePosition,
        setCompareDragging,
        overlays,
        setOverlays,
        selectedOverlayId,
        setSelectedOverlayId,
        selectedOverlay,
        addOverlay,
        updateOverlay,
        deleteOverlay,
        moveOverlayForward,
        moveOverlayBack,
        emojiCat,
        setEmojiCat,
        textDraft,
        setTextDraft,
        textColor,
        setTextColor,
        textBold,
        setTextBold,
        textItalic,
        setTextItalic,
        textOutline,
        setTextOutline,
        textFontSize,
        setTextFontSize,
        textBg,
        setTextBg,
        shapeStroke,
        setShapeStroke,
        shapeFill,
        setShapeFill,
        shapeStrokeW,
        setShapeStrokeW,
        frameColor,
        setFrameColor,
        frameThick,
        setFrameThick,
        drawColor,
        setDrawColor,
        drawWidth,
        setDrawWidth,
        drawingOverlayRef,
        historyIdx,
        historyLength: history.length,
        undo,
        redo,
        pushHistory,
        handleSave,
        handleReset,
        handleDownload,
        handleCopyToClipboard,
        handleShareNative,
        mainCanvasRef,
        compareCanvasRef,
        containerRef,
        handleCanvasMouseDown,
        handleCanvasMouseMove,
        handleCanvasMouseUp,
        createEmojiOverlay: photoOverlays.createEmojiOverlay,
        createTextOverlay: photoOverlays.createTextOverlay,
        createShapeOverlay: photoOverlays.createShapeOverlay,
        createFrameOverlay: photoOverlays.createFrameOverlay,
    };
}

exports.usePhotoEditor = usePhotoEditor;
//# sourceMappingURL=usePhotoEditor.js.map
