/**
 * Canvas editor for Scenar Creator v4.
 * Horizontal layout: X = time, Y = days.
 * interact.js for drag (horizontal) and resize (right edge).
 */

const Canvas = {
    GRID_MINUTES: 15,
    ROW_H: 52,          // px height of one day row
    TIME_LABEL_W: 110,  // px width of date label column (Czech day names: "Pondělí (20.2)")
    HEADER_H: 28,       // px height of time axis header
    MIN_BLOCK_MIN: 15,  // minimum block duration in minutes

    // Time range (auto-derived from blocks, with fallback)
    _startMin: 7 * 60,
    _endMin: 22 * 60,

    get pxPerMinute() {
        const slots = (this._endMin - this._startMin) / this.GRID_MINUTES;
        const container = document.getElementById('canvasScrollArea');
        if (!container) return 2;
        const avail = container.clientWidth - this.TIME_LABEL_W - 4;
        return avail / ((this._endMin - this._startMin));
    },

    minutesToPx(minutes) {
        return (minutes - this._startMin) * this.pxPerMinute;
    },

    pxToMinutes(px) {
        return px / this.pxPerMinute + this._startMin;
    },

    snapMinutes(minutes) {
        return Math.round(minutes / this.GRID_MINUTES) * this.GRID_MINUTES;
    },

    formatTime(totalMinutes) {
        const norm = ((totalMinutes % 1440) + 1440) % 1440;
        const h = Math.floor(norm / 60);
        const m = norm % 60;
        return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
    },

    parseTime(str) {
        if (!str) return 0;
        const [h, m] = str.split(':').map(Number);
        return (h || 0) * 60 + (m || 0);
    },

    isLightColor(hex) {
        const h = (hex || '#888888').replace('#', '');
        const r = parseInt(h.substring(0, 2), 16) || 128;
        const g = parseInt(h.substring(2, 4), 16) || 128;
        const b = parseInt(h.substring(4, 6), 16) || 128;
        return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6;
    },

    // Derive time range from blocks (with default fallback)
    _computeRange(blocks) {
        if (!blocks || blocks.length === 0) {
            this._startMin = 7 * 60;
            this._endMin = 22 * 60;
            return;
        }
        let minStart = 24 * 60;
        let maxEnd = 0;
        for (const b of blocks) {
            const s = this.parseTime(b.start);
            let e = this.parseTime(b.end);
            if (e <= s) e += 24 * 60; // overnight
            if (s < minStart) minStart = s;
            if (e > maxEnd) maxEnd = e;
        }
        // Round to hour boundaries, add small padding
        this._startMin = Math.max(0, Math.floor(minStart / 60) * 60);
        this._endMin = Math.min(48 * 60, Math.ceil(maxEnd / 60) * 60);
        // Ensure minimum range of 2h
        if (this._endMin - this._startMin < 120) {
            this._endMin = this._startMin + 120;
        }
    },

    render(state) {
        const dates = App.getDates();
        this._computeRange(state.blocks);

        const timeAxisEl = document.getElementById('timeAxis');
        const dayRowsEl = document.getElementById('dayRows');
        if (!timeAxisEl || !dayRowsEl) return;

        timeAxisEl.innerHTML = '';
        dayRowsEl.innerHTML = '';

        this._renderTimeAxis(timeAxisEl, dates);
        this._renderDayRows(dayRowsEl, dates, state);
    },

    _renderTimeAxis(container, dates) {
        container.style.display = 'flex';
        container.style.alignItems = 'stretch';
        container.style.height = this.HEADER_H + 'px';
        container.style.minWidth = (this.TIME_LABEL_W + this._canvasWidth()) + 'px';

        // Date label placeholder
        const corner = document.createElement('div');
        corner.className = 'time-corner';
        corner.style.cssText = `width:${this.TIME_LABEL_W}px;min-width:${this.TIME_LABEL_W}px;`;
        container.appendChild(corner);

        // Time labels wrapper
        const labelsWrap = document.createElement('div');
        labelsWrap.style.cssText = `position:relative;flex:1;height:${this.HEADER_H}px;`;

        const totalMin = this._endMin - this._startMin;
        for (let m = this._startMin; m <= this._endMin; m += 60) {
            const pct = (m - this._startMin) / totalMin * 100;
            const label = document.createElement('div');
            label.className = 'time-tick';
            label.style.left = `calc(${pct}% - 1px)`;
            label.textContent = this.formatTime(m);
            labelsWrap.appendChild(label);
        }
        container.appendChild(labelsWrap);
    },

    _canvasWidth() {
        const container = document.getElementById('canvasScrollArea');
        if (!container) return 800;
        return Math.max(600, container.clientWidth - this.TIME_LABEL_W - 20);
    },

    _renderDayRows(container, dates, state) {
        const typeMap = {};
        for (const pt of state.program_types) typeMap[pt.id] = pt;

        for (const date of dates) {
            const row = document.createElement('div');
            row.className = 'day-row';
            row.style.height = this.ROW_H + 'px';
            row.dataset.date = date;

            // Date label
            const label = document.createElement('div');
            label.className = 'day-label';
            label.style.width = this.TIME_LABEL_W + 'px';
            label.style.minWidth = this.TIME_LABEL_W + 'px';
            label.textContent = this._formatDate(date);
            row.appendChild(label);

            // Timeline area
            const timeline = document.createElement('div');
            timeline.className = 'day-timeline';
            timeline.style.position = 'relative';
            timeline.dataset.date = date;

            // Grid lines (every hour)
            const totalMin = this._endMin - this._startMin;
            for (let m = this._startMin; m < this._endMin; m += 60) {
                const line = document.createElement('div');
                line.className = 'grid-line';
                line.style.left = ((m - this._startMin) / totalMin * 100) + '%';
                timeline.appendChild(line);
            }

            // Click on empty timeline to add block
            timeline.addEventListener('click', (e) => {
                if (e.target !== timeline) return;
                const rect = timeline.getBoundingClientRect();
                const relX = e.clientX - rect.left;
                const totalW = rect.width;
                const clickMin = this._startMin + (relX / totalW) * (this._endMin - this._startMin);
                const snapStart = this.snapMinutes(clickMin);
                const snapEnd = snapStart + 60; // default 1h
                App.openNewBlockModal(date, this.formatTime(snapStart), this.formatTime(Math.min(snapEnd, this._endMin)));
            });

            // Render blocks for this date
            const dayBlocks = state.blocks.filter(b => b.date === date);
            for (const block of dayBlocks) {
                const el = this._createBlockEl(block, typeMap, totalMin);
                if (el) timeline.appendChild(el);
            }

            row.appendChild(timeline);
            container.appendChild(row);
        }
    },

    _formatDate(dateStr) {
        const d = new Date(dateStr + 'T12:00:00');
        const weekday = d.toLocaleDateString('cs-CZ', { weekday: 'long' });
        // Capitalize first letter
        const weekdayCap = weekday.charAt(0).toUpperCase() + weekday.slice(1);
        const day = d.getDate();
        const month = d.getMonth() + 1;
        return `${weekdayCap} (${day}.${month})`;
    },

    _createBlockEl(block, typeMap, totalMin) {
        const pt = typeMap[block.type_id];
        const color = pt ? pt.color : '#888888';
        const light = this.isLightColor(color);

        const s = this.parseTime(block.start);
        let e = this.parseTime(block.end);
        const isOvernight = e <= s;
        if (isOvernight) e = this._endMin; // clip to end of day

        // Clamp to time range
        const cs = Math.max(s, this._startMin);
        const ce = Math.min(e, this._endMin);
        if (ce <= cs) return null;

        const totalRange = this._endMin - this._startMin;
        const leftPct = (cs - this._startMin) / totalRange * 100;
        const widthPct = (ce - cs) / totalRange * 100;

        const el = document.createElement('div');
        el.className = 'block-el' + (isOvernight ? ' overnight' : '');
        el.dataset.id = block.id;
        el.style.cssText = `
            left:${leftPct}%;
            width:${widthPct}%;
            background:${color};
            color:${light ? '#1a1a1a' : '#ffffff'};
            top:4px;
            height:${this.ROW_H - 8}px;
            position:absolute;
        `;

        // Block label
        const inner = document.createElement('div');
        inner.className = 'block-inner';
        const timeLabel = `${block.start}–${block.end}`;

        const nameEl = document.createElement('span');
        nameEl.className = 'block-title';
        nameEl.textContent = block.title + (block.notes ? ' *' : '');

        const timeEl = document.createElement('span');
        timeEl.className = 'block-time';
        timeEl.textContent = timeLabel + (isOvernight ? ' →' : '');

        inner.appendChild(nameEl);
        inner.appendChild(timeEl);

        if (block.responsible) {
            const respEl = document.createElement('span');
            respEl.className = 'block-responsible';
            respEl.textContent = block.responsible;
            inner.appendChild(respEl);
        }
        el.appendChild(inner);

        // Click to edit
        el.addEventListener('click', (e) => {
            e.stopPropagation();
            App.openBlockModal(block.id);
        });

        // interact.js drag (X = time, Y = cross-day)
        if (window.interact) {
            interact(el)
                .draggable({
                    listeners: {
                        start: (event) => this._onDragStart(event, block),
                        move:  (event) => this._onDragMove(event, block),
                        end:   (event) => this._onDragEnd(event, block),
                    },
                    modifiers: [
                        interact.modifiers.snap({
                            targets: [interact.snappers.grid({ x: this._minutesPx(this.GRID_MINUTES), y: 10000 })],
                            range: Infinity,
                            relativePoints: [{ x: 0, y: 0 }],
                        }),
                    ],
                    inertia: false,
                })
                .resizable({
                    edges: { right: true },
                    listeners: {
                        move: (event) => this._onResizeMove(event, block),
                        end: (event) => this._onResizeEnd(event, block),
                    },
                    modifiers: [
                        interact.modifiers.snapSize({
                            targets: [interact.snappers.grid({ width: this._minutesPx(this.GRID_MINUTES) })]
                        }),
                        interact.modifiers.restrictSize({ minWidth: this._minutesPx(this.MIN_BLOCK_MIN) })
                    ],
                });
        }

        return el;
    },

    _minutesPx(minutes) {
        return minutes * this.pxPerMinute;
    },

    _onDragStart(event, block) {
        const target = event.target;
        target.dataset.dy = '0';
        target.style.zIndex = '500';
        // Enable cross-row overflow while dragging
        const dayRows = document.getElementById('dayRows');
        if (dayRows) dayRows.classList.add('dragging');
    },

    _onDragMove(event, block) {
        const target = event.target;

        // ── X axis: update time ──────────────────────────────────────
        const deltaMin = event.dx / this.pxPerMinute;
        const duration = this.parseTime(block.end) - this.parseTime(block.start);
        const newStartMin = this.snapMinutes(this.parseTime(block.start) + deltaMin);
        const clampedStart = Math.max(this._startMin, Math.min(this._endMin - duration, newStartMin));
        block.start = this.formatTime(clampedStart);
        block.end   = this.formatTime(clampedStart + duration);
        const totalRange = this._endMin - this._startMin;
        target.style.left = ((clampedStart - this._startMin) / totalRange * 100) + '%';

        // ── Y axis: visual shift + row highlight ─────────────────────
        const dy = (parseFloat(target.dataset.dy) || 0) + event.dy;
        target.dataset.dy = dy;
        target.style.transform = `translateY(${dy}px)`;

        this._highlightTargetRow(target);
    },

    _onDragEnd(event, block) {
        const target = event.target;

        // Detect which day-timeline the block's vertical center is over
        const rect = target.getBoundingClientRect();
        const centerY = rect.top + rect.height / 2;
        for (const row of document.querySelectorAll('.day-timeline')) {
            const rr = row.getBoundingClientRect();
            if (centerY >= rr.top && centerY <= rr.bottom) {
                block.date = row.dataset.date;
                break;
            }
        }

        // Cleanup
        document.querySelectorAll('.day-timeline.drag-target')
            .forEach(r => r.classList.remove('drag-target'));
        const dayRows = document.getElementById('dayRows');
        if (dayRows) dayRows.classList.remove('dragging');
        target.style.transform = '';
        target.style.zIndex = '';
        delete target.dataset.dy;

        App.renderCanvas();
    },

    _highlightTargetRow(el) {
        const rect = el.getBoundingClientRect();
        const centerY = rect.top + rect.height / 2;
        document.querySelectorAll('.day-timeline').forEach(row => {
            const rr = row.getBoundingClientRect();
            const isTarget = centerY >= rr.top && centerY <= rr.bottom;
            row.classList.toggle('drag-target', isTarget);
        });
    },

    _onResizeMove(event, block) {
        const target = event.target;
        const newWidthPx = event.rect.width;
        const totalRange = this._endMin - this._startMin;
        const containerW = target.parentElement.clientWidth;
        const minutesPerPx = totalRange / containerW;
        const newDuration = this.snapMinutes(Math.round(newWidthPx * minutesPerPx));
        const clampedDuration = Math.max(this.MIN_BLOCK_MIN, newDuration);
        const startMin = this.parseTime(block.start);
        const endMin = Math.min(this._endMin, startMin + clampedDuration);

        block.end = this.formatTime(endMin);
        const widthPct = (endMin - startMin) / totalRange * 100;
        target.style.width = widthPct + '%';
    },

    _onResizeEnd(event, block) {
        App.renderCanvas();
    },
};