<script setup lang="ts">
import { ref, computed, watch, type Ref, nextTick } from 'vue'; // Import nextTick
import { useI18n } from 'vue-i18n';
import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store';
import draggable from 'vuedraggable';
import LayoutNodeEditor from './LayoutNodeEditor.vue';

// --- Props ---
const props = defineProps({
  isVisible: {
    type: Boolean,
    required: true,
  },
});

// --- Emits ---
const emit = defineEmits(['close']);

// --- Setup ---
const { t } = useI18n();
const layoutStore = useLayoutStore();

// --- State ---
const localLayoutTree: Ref<LayoutNode | null> = ref(null);
// State for current edits
// const localLayoutTree: Ref<LayoutNode | null> = ref(null); // REMOVE DUPLICATE
const localSidebarPanes: Ref<{ left: PaneName[], right: PaneName[] }> = ref({ left: [], right: [] });
const localAvailablePanes: Ref<PaneName[]> = ref([]);

// State for original values to compare against
const originalLayoutTree: Ref<LayoutNode | null> = ref(null);
const originalSidebarPanes: Ref<{ left: PaneName[], right: PaneName[] }> = ref({ left: [], right: [] });

// --- Dialog State ---
const dialogRef = ref<HTMLElement | null>(null);

// --- Watchers ---
watch(() => props.isVisible, (newValue) => {
  if (newValue) {
    // --- Load initial data and create original copies ---
    // Main layout
    const initialLayout = layoutStore.layoutTree ? JSON.parse(JSON.stringify(layoutStore.layoutTree)) : null;
    localLayoutTree.value = initialLayout;
    originalLayoutTree.value = JSON.parse(JSON.stringify(initialLayout)); // Deep copy for original

    // Sidebar config
    const initialSidebars = layoutStore.sidebarPanes ? JSON.parse(JSON.stringify(layoutStore.sidebarPanes)) : { left: [], right: [] };
    localSidebarPanes.value = initialSidebars;
    originalSidebarPanes.value = JSON.parse(JSON.stringify(initialSidebars)); // Deep copy for original

    // Initialize available panes: Include 'terminal' only if it's not already used.
    const initialUsed = getAllLocalUsedPaneNames(localLayoutTree.value, localSidebarPanes.value);
    if (initialUsed.has('terminal')) {
        // Terminal is used, available list excludes it
        localAvailablePanes.value = layoutStore.allPossiblePanes.filter(p => p !== 'terminal');
    } else {
        // Terminal is not used, available list includes all
        localAvailablePanes.value = [...layoutStore.allPossiblePanes];
    }
    // Ensure original order is maintained
    localAvailablePanes.value.sort((a, b) =>
        layoutStore.allPossiblePanes.indexOf(a) - layoutStore.allPossiblePanes.indexOf(b)
    );

    console.log('[LayoutConfigurator] Dialog opened, initial data loaded and original copies created.');

  } else {
    // --- Clear all state on close ---
    localLayoutTree.value = null;
    originalLayoutTree.value = null;
    localSidebarPanes.value = { left: [], right: [] };
    originalSidebarPanes.value = { left: [], right: [] };
    localAvailablePanes.value = [];
    console.log('[LayoutConfigurator] Dialog closed, state cleared.');
  }
});

// --- Helper Functions ---
function getMainLayoutUsedPaneNames(node: LayoutNode | null): Set<PaneName> {
  const usedNames = new Set<PaneName>();
  if (!node) return usedNames;
  function traverse(currentNode: LayoutNode) {
    if (currentNode.type === 'pane' && currentNode.component) {
      usedNames.add(currentNode.component);
    } else if (currentNode.type === 'container' && currentNode.children) {
      currentNode.children.forEach(traverse);
    }
  }
  traverse(node);
  return usedNames;
}

function getAllLocalUsedPaneNames(mainNode: LayoutNode | null, sidebars: { left: PaneName[], right: PaneName[] }): Set<PaneName> {
  const usedNames = getMainLayoutUsedPaneNames(mainNode);
  sidebars.left.forEach(pane => usedNames.add(pane));
  sidebars.right.forEach(pane => usedNames.add(pane));
  return usedNames;
}

// --- Restore Helper Functions for Terminal ---
// Helper to add 'terminal' back to available list if not present
function addPaneToAvailableList(paneName: PaneName) {
   // Only act if the pane is 'terminal' and it's not already available
   if (paneName === 'terminal' && !localAvailablePanes.value.includes('terminal')) {
       // Maintain original order if possible
       const originalIndex = layoutStore.allPossiblePanes.indexOf('terminal');
       let inserted = false;
       for (let i = 0; i < localAvailablePanes.value.length; i++) {
           const currentAvailablePane = localAvailablePanes.value[i];
           const currentOriginalIndex = layoutStore.allPossiblePanes.indexOf(currentAvailablePane);
           if (originalIndex < currentOriginalIndex) {
               localAvailablePanes.value.splice(i, 0, 'terminal');
               inserted = true;
               break;
           }
       }
       if (!inserted) {
            localAvailablePanes.value.push('terminal'); // Add to end if no suitable spot found
       }
       console.log(`[LayoutConfigurator] Added 'terminal' back to available panes.`);
   }
}

// Helper to remove 'terminal' from available list
function removePaneFromAvailableList(paneName: PaneName) {
    if (paneName === 'terminal') {
        const index = localAvailablePanes.value.indexOf('terminal');
        if (index > -1) {
            localAvailablePanes.value.splice(index, 1);
            console.log(`[LayoutConfigurator] Removed 'terminal' from available panes.`);
        }
    }
}
// --- Computed ---
// Panel Labels for display
// Real-time comparison to determine if changes exist
const isModified = computed(() => {
  // Compare current local state with the original snapshot
  const currentLayoutJson = JSON.stringify(localLayoutTree.value);
  const originalLayoutJson = JSON.stringify(originalLayoutTree.value);
  const currentSidebarJson = JSON.stringify(localSidebarPanes.value);
  const originalSidebarJson = JSON.stringify(originalSidebarPanes.value);

  // Return true if either layout or sidebars differ from the original
  const modified = currentLayoutJson !== originalLayoutJson || currentSidebarJson !== originalSidebarJson;
  // console.log(`[LayoutConfigurator] isModified computed: ${modified}`); // Debug log
  return modified;
});

const paneLabels = computed(() => ({ // Assuming labels might depend on i18n
  connections: t('layout.pane.connections', '连接列表'),
  terminal: t('layout.pane.terminal', '终端'),
  commandBar: t('layout.pane.commandBar', '命令栏'),
  fileManager: t('layout.pane.fileManager', '文件管理器'),
  editor: t('layout.pane.editor', '编辑器'),
  statusMonitor: t('layout.pane.statusMonitor', '状态监视器'),
  commandHistory: t('layout.pane.commandHistory', '命令历史'),
  quickCommands: t('layout.pane.quickCommands', '快捷指令'),
  dockerManager: t('layout.pane.dockerManager', 'Docker 管理器'),
}));

// --- Methods ---
const closeDialog = () => {
  // Use the computed property for the check
  if (isModified.value) {
    if (confirm(t('layoutConfigurator.confirmClose', '有未保存的更改，确定要关闭吗？'))) {
      emit('close');
    }
  } else {
    emit('close');
  }
};

const saveLayout = async () => { // Make async
  console.log('[LayoutConfigurator] Attempting to save layout...');
  try {
    // Save main layout and wait for persistence
    console.log('[LayoutConfigurator] Updating main layout tree in store...');
    await layoutStore.updateLayoutTree(localLayoutTree.value); // Await the async action
    console.log('[LayoutConfigurator] Main layout tree update awaited.');

    // Save sidebar config and wait for persistence
    const sidebarConfigToSave = JSON.parse(JSON.stringify(localSidebarPanes.value));
    console.log('[LayoutConfigurator] Updating sidebar panes in store:', sidebarConfigToSave);
    await layoutStore.updateSidebarPanes(sidebarConfigToSave); // Await the async action
    console.log('[LayoutConfigurator] Sidebar panes update awaited.');

    // isModified will update automatically based on comparison with original state after save
    emit('close'); // Close dialog *after* save is complete
    console.log('[LayoutConfigurator] Layout saved successfully, dialog closed.');
  } catch (error) {
      console.error('[LayoutConfigurator] Error saving layout:', error);
      // Optionally notify the user about the error
      alert(t('layoutConfigurator.saveError', '保存布局时出错，请稍后再试。'));
  }
};

const resetToDefault = () => {
  if (confirm(t('layoutConfigurator.confirmReset', '确定要恢复默认布局和侧栏配置吗？当前更改将丢失。'))) {
    // Reset main layout
    const defaultLayout = layoutStore.getSystemDefaultLayout();
    localLayoutTree.value = JSON.parse(JSON.stringify(defaultLayout));

    // Reset sidebar config
    const defaultSidebarPanes = layoutStore.getSystemDefaultSidebarPanes();
    localSidebarPanes.value = JSON.parse(JSON.stringify(defaultSidebarPanes));

    // Reset available panes: Include 'terminal' only if it's not used in the default layout.
    const defaultUsed = getAllLocalUsedPaneNames(localLayoutTree.value, localSidebarPanes.value);
    if (defaultUsed.has('terminal')) {
        localAvailablePanes.value = layoutStore.allPossiblePanes.filter(p => p !== 'terminal');
    } else {
        localAvailablePanes.value = [...layoutStore.allPossiblePanes];
    }
    // Ensure original order
    localAvailablePanes.value.sort((a, b) =>
        layoutStore.allPossiblePanes.indexOf(a) - layoutStore.allPossiblePanes.indexOf(b)
    );

    console.log('[LayoutConfigurator] Reset to default layout, sidebar panes, and available panes.');
    // isModified computed property will detect the change automatically by comparing with original state
  }
};

// Clone function for dragging available panes
const clonePane = (paneName: PaneName): LayoutNode => {
  console.log(`[LayoutConfigurator] Cloning pane: ${paneName}`);
  return {
    id: layoutStore.generateId(),
    type: 'pane',
    component: paneName,
    size: 50, // Default size, can be adjusted later
  };
};

// Handle updates from LayoutNodeEditor (for main layout)
const handleNodeUpdate = (updatedNode: LayoutNode) => {
  console.log('[LayoutConfigurator] Received node update from editor:', updatedNode);
  // Assuming the update is for the root node for simplicity
  // v-model on LayoutNodeEditor might handle this, but explicit update is safer
  // Update the local tree; isModified will react automatically
  localLayoutTree.value = updatedNode;
};

// Handle remove requests from LayoutNodeEditor (for main layout) - CORRECTED VERSION
function findAndRemoveNode(node: LayoutNode | null, parentNodeId: string | undefined, nodeIndex: number): LayoutNode | null {
    if (!node) return null;

    // Case 1: Found the parent container
    if (node.id === parentNodeId && node.type === 'container' && node.children && node.children[nodeIndex]) {
        const updatedChildren = [...node.children];
        const removedNode = updatedChildren.splice(nodeIndex, 1)[0]; // Remove and get the node
        console.log(`[LayoutConfigurator] Removing node at index ${nodeIndex} from parent ${parentNodeId}`);

        // If the removed node was the terminal pane, add it back to available list
        if (removedNode.type === 'pane' && removedNode.component === 'terminal') {
            addPaneToAvailableList('terminal');
        }
        // No need to handle containers specifically for adding back, only terminal matters.
        return { ...node, children: updatedChildren };
    }

    // Case 2: Traverse deeper
    if (node.type === 'container' && node.children) {
        const updatedChildren = node.children.map(child => findAndRemoveNode(child, parentNodeId, nodeIndex));
        // Check if any child subtree was modified
        if (updatedChildren.some((child, index) => child !== node.children![index])) {
            return { ...node, children: updatedChildren.filter(Boolean) as LayoutNode[] };
        }
    }

    // Case 3: No match or not a container
    return node;
}

// CORRECTED handleNodeRemove
const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex: number }) => {
  console.log('[LayoutConfigurator] Received node remove request:', payload);
  if (payload.parentNodeId === undefined && payload.nodeIndex === 0) {
     if (confirm(t('layoutConfigurator.confirmClearLayout', '确定要清空整个布局吗？所有面板将返回可用列表。'))) {
       // Add all panes from the tree back to available list before clearing - REMOVED, no longer needed
       // const usedInTree = getMainLayoutUsedPaneNames(localLayoutTree.value);
       // usedInTree.forEach(paneName => addPaneToAvailableList(paneName));
       // Clear the tree
       // Update the local tree; isModified will react automatically
       localLayoutTree.value = null;
     }
  } else if (payload.parentNodeId) {
     // Update the local tree; isModified will react automatically
     localLayoutTree.value = findAndRemoveNode(localLayoutTree.value, payload.parentNodeId, payload.nodeIndex);
  } else {
     console.warn('[LayoutConfigurator] Invalid remove payload:', payload);
  }
};

// Remove pane from sidebar list
const removeSidebarPane = (side: 'left' | 'right', index: number) => {
   const removedPane = localSidebarPanes.value[side].splice(index, 1)[0]; // Remove and get pane name
   if (removedPane) {
       console.log(`[LayoutConfigurator] Removed pane '${removedPane}' from ${side} sidebar at index ${index}.`);
       // If the removed pane was 'terminal', add it back to available list
       if (removedPane === 'terminal') {
           addPaneToAvailableList('terminal');
       }
   }
   // isModified will react automatically
};

// Handler for vuedraggable end event to ensure changes flag is set and handle added items
const onDraggableChange = (event: any, side: 'left' | 'right') => { // Add side parameter
    console.log(`[LayoutConfigurator] Draggable change event detected on ${side} sidebar:`, event);

    // Check if an element was added to the sidebar list
    if (event.added) {
        const addedElement = event.added.element;
        const targetList = localSidebarPanes.value[side]; // Use the side parameter directly
        const addedIndex = event.added.newIndex;

        // Check if the added element is a LayoutNode object (dragged from available panes)
        if (targetList && typeof addedElement === 'object' && addedElement !== null && addedElement.type === 'pane' && typeof addedElement.component === 'string') {
            // Replace the added LayoutNode object with its component name (PaneName)
            targetList.splice(addedIndex, 1, addedElement.component);
            console.log(`[LayoutConfigurator] Replaced added LayoutNode at index ${addedIndex} on ${side} sidebar with PaneName: ${addedElement.component}`);
        } else {
             console.log(`[LayoutConfigurator] Added event detected on ${side} sidebar, but element was not a LayoutNode:`, addedElement);
        }
    } else if (event.moved || event.removed) {
         console.log(`[LayoutConfigurator] Item moved or removed within/from ${side} sidebar.`);
    }

    // isModified will react automatically
};

// Handle drag end from the available panes list
const handleAvailablePaneDragEnd = (event: any) => {
    // Check if the item was dropped into a different list
    if (event.to !== event.from) {
        const paneName = event.oldIndex !== undefined ? localAvailablePanes.value[event.oldIndex] : null;

        // If 'terminal' was dragged out, remove it from the available list
        if (paneName === 'terminal') {
            removePaneFromAvailableList('terminal');
        } else if (paneName) {
             console.log(`[LayoutConfigurator] Non-terminal pane "${paneName}" dropped elsewhere (clone).`);
             // Other panes are clones, do nothing to the available list
        } else {
             console.error('[LayoutConfigurator] Could not determine dragged pane name in handleAvailablePaneDragEnd.');
        }
    } else {
         console.log('[LayoutConfigurator] Item dropped back into available list or drag cancelled.');
    }
};

</script>

<template>
  <div v-if="isVisible" class="layout-configurator-overlay" @click.self="closeDialog">
    <div ref="dialogRef" class="layout-configurator-dialog">

      <header class="dialog-header">
        <h2>{{ t('layoutConfigurator.title', '布局管理器') }}</h2>
        <button class="close-button" @click="closeDialog" :title="t('common.close', '关闭')">&times;</button>
      </header>

      <!-- Grid Layout -->
      <main class="dialog-content-grid">

        <!-- Available Panes -->
        <section class="available-panes-section">
          <h3>{{ t('layoutConfigurator.availablePanes', '可用面板') }}</h3>
          <draggable
            :list="localAvailablePanes"
            tag="ul"
            class="available-panes-list"
            @end="handleAvailablePaneDragEnd"
            :item-key="(element: PaneName) => element"
            :group="{ name: 'layout-items', pull: 'clone', put: false }"
            :sort="false"
            :clone="clonePane"
          >
            <template #item="{ element }: { element: PaneName }">
              <li class="available-pane-item">
                <i class="fas fa-grip-vertical drag-handle"></i>
                {{ paneLabels[element] || element }}
              </li>
            </template>
            <template #footer>
              <li v-if="localAvailablePanes.length === 0" class="no-available-panes">
                {{ t('layoutConfigurator.noAvailablePanes', '所有面板都已在布局中') }}
              </li>
            </template>
          </draggable>
        </section>

        <!-- Main Layout Preview -->
        <section class="layout-preview-section">
          <h3>{{ t('layoutConfigurator.layoutPreview', '主布局预览（拖拽到此处）') }}</h3>
          <div class="preview-area main-layout-area">
            <LayoutNodeEditor
              v-if="localLayoutTree"
              :node="localLayoutTree"
              :parent-node="null"
              :node-index="0"
              :pane-labels="paneLabels"
              @update:node="handleNodeUpdate"
              @removeNode="handleNodeRemove"
              :group="'layout-items'"
            />
            <p v-else class="empty-placeholder">
              {{ t('layoutConfigurator.emptyLayout', '布局为空，请从左侧拖拽面板或添加容器。') }}
            </p>
          </div>
          <div class="preview-actions">
             <button @click="resetToDefault" class="button-secondary">
               {{ t('layoutConfigurator.resetDefault', '恢复默认') }}
             </button>
           </div>
        </section>

        <!-- Sidebar Configuration Container -->
        <div class="sidebar-container">
            <!-- Left Sidebar Config -->
            <section class="sidebar-config-section left-sidebar-section">
                <h3>{{ t('layoutConfigurator.leftSidebar', '左侧栏面板') }}</h3>
                <draggable
                    :list="localSidebarPanes.left"
                    tag="ul"
                    class="sidebar-panes-list"
                    :item-key="(element: PaneName) => `left-${element}`"
                    group="layout-items"
                    :sort="true"
                    @change="(event) => onDraggableChange(event, 'left')"
                >
                    <template #item="{ element, index }: { element: PaneName, index: number }">
                        <li class="sidebar-pane-item">
                            <i class="fas fa-grip-vertical drag-handle"></i>
                            <!-- Correctly display translated label -->
                            <span>{{ paneLabels[element] || element }}</span>
                            <button @click="removeSidebarPane('left', index)" class="remove-sidebar-btn" :title="t('common.remove', '移除')">&times;</button>
                        </li>
                    </template>
                    <template #footer>
                        <li v-if="localSidebarPanes.left.length === 0" class="empty-placeholder sidebar-empty">
                            {{ t('layoutConfigurator.dropHere', '从可用面板拖拽到此处') }}
                        </li>
                    </template>
                </draggable>
            </section>

            <!-- Right Sidebar Config -->
            <section class="sidebar-config-section right-sidebar-section">
                <h3>{{ t('layoutConfigurator.rightSidebar', '右侧栏面板') }}</h3>
                 <draggable
                    :list="localSidebarPanes.right"
                    tag="ul"
                    class="sidebar-panes-list"
                    :item-key="(element: PaneName) => `right-${element}`"
                    group="layout-items"
                    :sort="true"
                    @change="(event) => onDraggableChange(event, 'right')"
                >
                    <template #item="{ element, index }: { element: PaneName, index: number }">
                         <li class="sidebar-pane-item">
                            <i class="fas fa-grip-vertical drag-handle"></i>
                            <!-- Correctly display translated label -->
                            <span>{{ paneLabels[element] || element }}</span>
                            <button @click="removeSidebarPane('right', index)" class="remove-sidebar-btn" :title="t('common.remove', '移除')">&times;</button>
                        </li>
                    </template>
                     <template #footer>
                        <li v-if="localSidebarPanes.right.length === 0" class="empty-placeholder sidebar-empty">
                             {{ t('layoutConfigurator.dropHere', '从可用面板拖拽到此处') }}
                        </li>
                    </template>
                </draggable>
            </section>
        </div>

      </main>

      <footer class="dialog-footer">
        <button @click="closeDialog" class="button-secondary">{{ t('common.cancel', '取消') }}</button>
        <button @click="saveLayout" class="button-primary" :disabled="!isModified">
          {{ t('common.save', '保存') }}{{ isModified ? '*' : '' }}
        </button>
      </footer>
    </div>
  </div>
</template>

<style scoped>
.layout-configurator-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.layout-configurator-dialog {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  width: auto;
  height: auto;
  min-width: 800px; /* Adjusted min-width */
  min-height: 600px; /* Adjusted min-height */
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  pointer-events: auto;
  cursor: default;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eee;
  background-color: #f8f9fa;
}

.dialog-header h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #aaa;
  line-height: 1;
  padding: 0;
}
.close-button:hover {
  color: #333;
}

/* Grid Layout for Dialog Content */
.dialog-content-grid {
  flex-grow: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "available main"
    "available sidebars";
  gap: 1.5rem;
  min-height: 450px;
}

.available-panes-section {
  grid-area: available;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid #eee;
  padding-right: 1.5rem;
  min-width: 200px; /* Ensure minimum width */
}

.layout-preview-section {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 350px;
  min-height: 250px;
}

.sidebar-container {
   grid-area: sidebars;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.5rem;
   border-top: 1px solid #eee;
   padding-top: 1rem;
   margin-top: 1rem;
   min-height: 150px;
}

.sidebar-config-section {
  display: flex;
  flex-direction: column;
}

h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #495057;
}

.available-panes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1; /* Allow list to take available space */
}

.available-pane-item {
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: grab;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
}
.available-pane-item:hover {
  background-color: #e9ecef;
}
.available-pane-item:active {
  cursor: grabbing;
  background-color: #ced4da;
}

.drag-handle {
  margin-right: 0.5rem;
  color: #adb5bd;
  cursor: grab;
}
.available-pane-item:active .drag-handle {
  cursor: grabbing;
}

.no-available-panes {
  color: #6c757d;
  font-style: italic;
  padding: 0.5rem 0;
}

.preview-area.main-layout-area {
  flex-grow: 1;
  border: 2px dashed #ced4da;
  border-radius: 4px;
  padding: 1rem;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.preview-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

.dialog-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  background-color: #f8f9fa;
}

/* Button Styles */
.button-primary,
.button-secondary {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.button-primary {
  background-color: #007bff;
  color: white;
}
.button-primary:hover {
  background-color: #0056b3;
}
.button-primary:disabled {
  background-color: #6c757d;
  opacity: 0.7;
  cursor: not-allowed;
}

.button-secondary {
  background-color: #e9ecef;
  color: #343a40;
  border: 1px solid #ced4da;
}
.button-secondary:hover {
  background-color: #dee2e6;
}

/* Sidebar List Styles */
.sidebar-panes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 120px;
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 4px;
    padding: 0.5rem;
    flex-grow: 1;
    overflow-y: auto;
}

.sidebar-pane-item {
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.5rem;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
}
.sidebar-pane-item:hover {
    background-color: #d8dde2;
}
.sidebar-pane-item:active {
    cursor: grabbing;
    background-color: #ced4da;
}

.sidebar-pane-item .drag-handle {
    margin-right: 0.5rem;
    color: #6c757d;
    cursor: grab;
}
.sidebar-pane-item:active .drag-handle {
    cursor: grabbing;
}
/* Ensure text span takes available space */
.sidebar-pane-item span {
    flex-grow: 1; /* Allow text to take space */
    margin-right: 0.5rem; /* Space before remove button */
    overflow: hidden; /* Prevent long text overflow */
    text-overflow: ellipsis;
    white-space: nowrap;
}


.remove-sidebar-btn {
    background: none;
    border: none;
    color: #adb5bd;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
    flex-shrink: 0; /* Prevent button from shrinking */
}
.remove-sidebar-btn:hover {
    color: #dc3545; /* Red on hover */
}

.empty-placeholder {
    text-align: center;
    color: #aaa;
    padding: 2rem 1rem;
    font-style: italic;
    font-size: 0.9em;
    width: 100%;
}
.sidebar-empty {
    padding: 1rem;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>
