<template>
  <div class="app-layout">
    <!-- Header -->
    <Header />
    
    <!-- Left Navigation Panel -->
    <NavigationPanel />
    
    <!-- Right AI Panel -->
    <AIPanel />
    
    <!-- Bottom Panel -->
    <BottomPanel
      :left-panel-size="leftPanelSize"
      :right-panel-size="rightPanelSize"
      :left-panel-collapsed="leftPanelCollapsed"
      :right-panel-collapsed="rightPanelCollapsed"
    />
    
    <!-- Main Content Area -->
    <main
      id="main-content"
      class="main-content"
      :style="mainContentStyle"
      role="main"
      aria-label="Main content area"
      tabindex="-1"
    >
      <slot></slot>
    </main>
    
    <!-- Footer -->
    <footer class="app-footer" role="contentinfo">
      <div class="footer-content">
        <span class="footer-text">
          Multi-Cloud Orchestration Portal © 2024
        </span>
        <div class="footer-links">
          <a href="#" class="footer-link" aria-label="Documentation">Documentation</a>
          <a href="#" class="footer-link" aria-label="Support">Support</a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, provide, watch } from 'vue';
import Header from './Header.vue';
import NavigationPanel from './NavigationPanel.vue';
import AIPanel from './AIPanel.vue';
import BottomPanel from './BottomPanel.vue';

const leftPanelSize = ref(250);
const rightPanelSize = ref(300);
const bottomPanelSize = ref(200);
const leftPanelCollapsed = ref(false);
const rightPanelCollapsed = ref(false);
const bottomPanelCollapsed = ref(false);

const mainContentStyle = computed(() => {
  const left = leftPanelCollapsed.value ? 0 : leftPanelSize.value;
  const right = rightPanelCollapsed.value ? 0 : rightPanelSize.value;
  const bottom = bottomPanelCollapsed.value ? 0 : bottomPanelSize.value;
  
  return {
    marginLeft: `${left}px`,
    marginRight: `${right}px`,
    marginTop: '64px', // Header height
    marginBottom: `${bottom + 15}px`, // Footer height
    transition: 'margin 0.2s ease',
  };
});

// Provide panel sizes to child components
provide('panelSizes', {
  left: leftPanelSize,
  right: rightPanelSize,
  bottom: bottomPanelSize,
  leftCollapsed: leftPanelCollapsed,
  rightCollapsed: rightPanelCollapsed,
  bottomCollapsed: bottomPanelCollapsed,
});


// Load saved panel states
onMounted(() => {
  try {
    const savedLeftSize = localStorage.getItem('panel-size-left');
    const savedRightSize = localStorage.getItem('panel-size-right');
    const savedBottomSize = localStorage.getItem('panel-size-bottom');
    const savedLeftCollapsed = localStorage.getItem('panel-collapsed-left');
    const savedRightCollapsed = localStorage.getItem('panel-collapsed-right');
    const savedBottomCollapsed = localStorage.getItem('panel-collapsed-bottom');
    
    if (savedLeftSize) {
      const size = parseInt(savedLeftSize, 10);
      if (!isNaN(size) && size >= 100 && size <= 800) {
        leftPanelSize.value = size;
      }
    }
    
    if (savedRightSize) {
      const size = parseInt(savedRightSize, 10);
      if (!isNaN(size) && size >= 100 && size <= 800) {
        rightPanelSize.value = size;
      }
    }
    
    if (savedBottomSize) {
      const size = parseInt(savedBottomSize, 10);
      if (!isNaN(size) && size >= 100 && size <= 800) {
        bottomPanelSize.value = size;
      }
    }
    
    if (savedLeftCollapsed === 'true') {
      leftPanelCollapsed.value = true;
    }
    
    if (savedRightCollapsed === 'true') {
      rightPanelCollapsed.value = true;
    }
    
    if (savedBottomCollapsed === 'true') {
      bottomPanelCollapsed.value = true;
    }
  } catch (error) {
    console.warn('Failed to load panel states from localStorage:', error);
  }
});

// Save panel collapsed states
watch([leftPanelCollapsed, rightPanelCollapsed, bottomPanelCollapsed], () => {
  try {
    localStorage.setItem('panel-collapsed-left', leftPanelCollapsed.value.toString());
    localStorage.setItem('panel-collapsed-right', rightPanelCollapsed.value.toString());
    localStorage.setItem('panel-collapsed-bottom', bottomPanelCollapsed.value.toString());
  } catch (error) {
    console.warn('Failed to save panel states to localStorage:', error);
  }
});
</script>

<style scoped>
.app-layout {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  background: #f9fafb;
  min-height: calc(100vh - 79px);
  overscroll-behavior: contain;
}

.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer-text {
  font-weight: 500;
}

.footer-links {
  display: flex;
  gap: 1rem;
}

.footer-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover {
  color: white;
}

.footer-link:focus {
  outline: 1px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
</style>
