<template>
    <div class="p-4">
        <h1 class="title mb-4">Welcome to Eira</h1>
        <div ref="grid" class="grid-stack" style="min-height: 500px;">
            <div v-for="(text, n) in cardTexts" :key="`card-${n}`" class="grid-stack-item" :id="`card-${n}`">
                <div class="grid-stack-item-content card">
                    <h2>Card #{{ n + 1 }}</h2>
                    <p>{{ text }}</p>
                </div>
            </div>
        </div>
        <button class="fab" @click="toggleEditMode" :title="editMode ? 'Disable Edit' : 'Enable Edit'">
            <span v-if="editMode">🔒</span>
            <span v-else>✏️</span>
        </button>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { GridStack } from 'gridstack'
import 'gridstack/dist/gridstack.min.css'

const grid = ref(null)
const editMode = ref(false)

const cardTexts = [
    'Short text.',
    'More content to test layout.',
    'A longer paragraph to test behavior.',
    'Tiny.',
    'Medium length.',
    'Very long content. Lorem ipsum dolor sit amet...'
]

onMounted(() => {
    const gridInstance = GridStack.init({
            column: 12,
            float: true,
            cellHeight: 80,
            margin: 10,
            resizable: { handles: 'se' },
            draggable: { handle: '.grid-stack-item-content' },
            disableDrag: true,
            disableResize: true
        },
        grid.value
    )

    const positions = [
        { x: 0, y: 0, w: 4, h: 2 },
        { x: 4, y: 0, w: 4, h: 2 },
        { x: 8, y: 0, w: 4, h: 2 },
        { x: 0, y: 2, w: 4, h: 2 },
        { x: 4, y: 2, w: 4, h: 2 },
        { x: 8, y: 2, w: 4, h: 2 }
    ]

    positions.forEach((pos, i) => {
        gridInstance.update(grid.value.children[i], pos)
    })

    // Store it for toggleEditMode
    grid.value.__gridInstance = gridInstance
})

function toggleEditMode() {
    editMode.value = !editMode.value
    const instance = grid.value.__gridInstance
    instance.enableMove(editMode.value)
    instance.enableResize(editMode.value)
}
</script>
<style scoped>
.title {
    font-size: 1.75rem;
    font-weight: bold;
    color: #6b46c1;
}

.card {
    background: white;
    border-left: 5px solid #6b46c1;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    height: 100%;
    overflow: auto;
}

.fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #6b46c1;
    color: white;
    border: none;
    font-size: 1.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
}

.fab:hover {
    background-color: #5930a3;
}
</style>