import { Controller } from "@hotwired/stimulus"
import { showToast } from "../services/toast";

export default class PagelistController extends Controller {
    static values = {
        siteId: Number,
    };

    static targets = ["list"];

    dragStart(ev) {
        this.draggedRow = ev.currentTarget;
        ev.currentTarget.classList.add("opacity-50");
        ev.dataTransfer.effectAllowed = "move";
    }

    dragOver(ev) {
        ev.preventDefault();
        ev.dataTransfer.dropEffect = "move";
    }

    drop(ev) {
        ev.preventDefault();
        const targetRow = ev.currentTarget;
        if (this.draggedRow && this.draggedRow !== targetRow) {
            const rows = [...this.listTarget.children];
            const draggedIdx = rows.indexOf(this.draggedRow);
            const targetIdx = rows.indexOf(targetRow);
            if (draggedIdx < targetIdx) {
                targetRow.after(this.draggedRow);
            } else {
                targetRow.before(this.draggedRow);
            }
            this.saveOrder();
        }
    }

    dragEnd(ev) {
        ev.currentTarget.classList.remove("opacity-50");
        this.draggedRow = null;
    }

    async saveOrder() {
        const rows = [...this.listTarget.children];
        const pageIds = rows.map(row => parseInt(row.dataset.pageId, 10));

        try {
            await fetch(`/sites/${this.siteIdValue}/pages/reorder`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                },
                body: JSON.stringify({ page_ids: pageIds }),
            });
        } catch (error) {
            showToast({
                title: "Error",
                body: "Failed to reorder pages.",
            });
        }
    }
}