<script setup>
import { onMounted, nextTick, ref, onUnmounted } from 'vue'
import { GridStack } from 'gridstack'

import ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
import AnalysisCard from "@/components/AnalysisCard.vue";
import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
import CostOverview from "@/components/CostOverview.vue";
import TasksTable from "./task.vue";
import ResourcesTable from "./resource.vue";
import GanttChart from './gantt.vue'

const isEditMode = ref(false)
const autoCompact = ref(true)
let grid = null

const handleEditModeChange = (event) => {
  if (event.detail) {
    isEditMode.value = event.detail.isActive;
    if (grid) {
      if (isEditMode.value) {
        grid.enableMove(true)
        grid.enableResize(true)
      } else {
        grid.enableMove(false)
        grid.enableResize(false)
      }
    }
  }
}

const handleDeleteCard = (cardId) => {
  const element = document.querySelector(`[data-card-id="${cardId}"]`)
  if (element && grid) {
    grid.removeWidget(element)
    if (autoCompact.value) {
      grid.compact()
    }
  }
}

onMounted(async () => {
  grid = GridStack.init({
    column: 12,
    cellHeight: '105',
    float: true,
    draggable: { handle: '.grid-stack-item-content' },
    resizable: true,
    disableOneColumnMode: true,
    animate: true,
    columnOpts: {
      breakpoints: [
        { w: 768, c: 1 },
        { w: 992, c: 12 }
      ]
    }
  })

  grid.enableMove(false)
  grid.enableResize(false)

  window.addEventListener("crm-edit-mode-changed", handleEditModeChange)

  await nextTick()
})

onUnmounted(() => {
  window.removeEventListener("crm-edit-mode-changed", handleEditModeChange)
  if (grid) {
    grid.destroy(false)
  }
})
</script>

<template>
  <div class="grid-stack-container" :class="{ 'edit-mode-active': isEditMode }">
    <VCol v-if="isEditMode" cols="12" class="pb-0">
      <div class="edit-mode-banner">
        <div class="banner-background">
          <div class="banner-glow"></div>
          <div class="banner-particles"></div>
        </div>

        <div class="banner-content">
          <div class="banner-header">
            <div class="banner-icon">
              <VIcon icon="tabler-edit" size="24" class="edit-icon" />
              <div class="icon-pulse"></div>
            </div>
            <div class="banner-text">
              <h3 class="banner-title">✨ Edit Mode Enabled</h3>
              <p class="banner-subtitle">
                Customize your dashboard with drag & drop, resize, and delete features
              </p>
            </div>
          </div>
          
          <div class="banner-controls">
            <VSwitch
              v-model="autoCompact"
              label="Auto Compact"
              class="auto-compact-switch"
              hide-details
              inset
            />
          </div>
        </div>

        <div class="banner-decorations">
          <div class="decoration decoration-1"></div>
          <div class="decoration decoration-2"></div>
          <div class="decoration decoration-3"></div>
        </div>
      </div>
    </VCol>

    <div class="grid-stack">
      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-min-h="2" gs-max-h="2"
        data-card-id="leads1">
        <div class="grid-stack-item-content">
          <div v-if="isEditMode" class="drag-handle" title="Move leads1">
            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
          </div>
          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
            title="Delete leads1" @click.stop="handleDeleteCard('leads1')">
            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
            Delete
          </VBtn>
          <GeneratedLeadsCard :progress="32" />
        </div>
      </div>

      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-h="2" gs-max-h="2"
        data-card-id="leads2">
        <div class="grid-stack-item-content">
          <div v-if="isEditMode" class="drag-handle" title="Move leads2">
            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
          </div>
          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
            title="Delete leads2" @click.stop="handleDeleteCard('leads2')">
            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
            Delete
          </VBtn>
          <GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
        </div>
      </div>

      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-h="2" gs-max-h="2"
        data-card-id="leads3">
        <div class="grid-stack-item-content">
          <div v-if="isEditMode" class="drag-handle" title="Move leads3">
            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
          </div>
          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
            title="Delete leads3" @click.stop="handleDeleteCard('leads3')">
            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
            Delete
          </VBtn>
          <GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
        </div>
      </div>

      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="8" gs-h="7" gs-max-h="7"
        data-card-id="project-activity">
        <div class="grid-stack-item-content">
          <div v-if="isEditMode" class="drag-handle" title="Move project-activity">
            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
          </div>
          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
            title="Delete project-activity" @click.stop="handleDeleteCard('project-activity')">
            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
            Delete
          </VBtn>
          <ProjectActivityBarChart />
        </div>
      </div>

      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="4" gs-h="7" gs-max-h="7"
        data-card-id="analysis">
        <div class="grid-stack-item-content">
          <div v-if="isEditMode" class="drag-handle" title="Move analysis">
            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
          </div>
          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
            title="Delete analysis" @click.stop="handleDeleteCard('analysis')">
            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
            Delete
          </VBtn>
          <AnalysisCard />
        </div>
      </div>

      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
        data-card-id="tasks">
        <div class="grid-stack-item-content">
          <div v-if="isEditMode" class="drag-handle" title="Move tasks">
            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
          </div>
          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
            title="Delete tasks" @click.stop="handleDeleteCard('tasks')">
            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
            Delete
          </VBtn>
          <TasksTable />
        </div>
      </div>

      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="4" gs-h="7" gs-max-h="7"
        data-card-id="analysis2">
        <div class="grid-stack-item-content">
          <div v-if="isEditMode" class="drag-handle" title="Move analysis2">
            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
          </div>
          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
            title="Delete analysis2" @click.stop="handleDeleteCard('analysis2')">
            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
            Delete
          </VBtn>
          <AnalysisCard />
        </div>
      </div>

      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="8" gs-h="7" gs-max-h="7"
        data-card-id="cost-overview">
        <div class="grid-stack-item-content">
          <div v-if="isEditMode" class="drag-handle" title="Move cost-overview">
            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
          </div>
          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
            title="Delete cost-overview" @click.stop="handleDeleteCard('cost-overview')">
            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
            Delete
          </VBtn>
          <CostOverview />
        </div>
      </div>

      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
        data-card-id="resources">
        <div class="grid-stack-item-content">
          <div v-if="isEditMode" class="drag-handle" title="Move resources">
            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
          </div>
          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
            title="Delete resources" @click.stop="handleDeleteCard('resources')">
            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
            Delete
          </VBtn>
          <ResourcesTable />
        </div>
      </div>

      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
        data-card-id="gantt-chart">
        <div class="grid-stack-item-content">
          <div v-if="isEditMode" class="drag-handle" title="Move gantt-chart">
            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
          </div>
          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
            title="Delete gantt-chart" @click.stop="handleDeleteCard('gantt-chart')">
            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
            Delete
          </VBtn>
          <GanttChart />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import "../../../styles/overview.scss";
</style>