import React, { useState, useEffect } from 'react';
import Header from './Header';
import NavigationPanel from './NavigationPanel';
import AIPanel from './AIPanel';
import BottomPanel from './BottomPanel';

interface AppLayoutProps {
  children: React.ReactNode;
}

const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
  const [leftPanelSize, setLeftPanelSize] = useState(250);
  const [rightPanelSize, setRightPanelSize] = useState(300);
  const [bottomPanelSize, setBottomPanelSize] = useState(200);
  const [leftPanelCollapsed, setLeftPanelCollapsed] = useState(false);
  const [rightPanelCollapsed, setRightPanelCollapsed] = useState(false);
  const [bottomPanelCollapsed, setBottomPanelCollapsed] = useState(false);

  useEffect(() => {
    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) {
          setLeftPanelSize(size);
        }
      }
      
      if (savedRightSize) {
        const size = parseInt(savedRightSize, 10);
        if (!isNaN(size) && size >= 100 && size <= 800) {
          setRightPanelSize(size);
        }
      }
      
      if (savedBottomSize) {
        const size = parseInt(savedBottomSize, 10);
        if (!isNaN(size) && size >= 100 && size <= 800) {
          setBottomPanelSize(size);
        }
      }
      
      if (savedLeftCollapsed === 'true') {
        setLeftPanelCollapsed(true);
      }
      
      if (savedRightCollapsed === 'true') {
        setRightPanelCollapsed(true);
      }
      
      if (savedBottomCollapsed === 'true') {
        setBottomPanelCollapsed(true);
      }
    } catch (error) {
      console.warn('Failed to load panel states from localStorage:', error);
    }
  }, []);

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

  const mainContentStyle: React.CSSProperties = {
    marginLeft: leftPanelCollapsed ? 0 : leftPanelSize,
    marginRight: rightPanelCollapsed ? 0 : rightPanelSize,
    marginTop: 64, // Header height
    marginBottom: (bottomPanelCollapsed ? 0 : bottomPanelSize) + 15,
    transition: 'margin 0.2s ease',
    padding: '2rem',
    overflowY: 'auto',
    background: '#f9fafb',
    minHeight: 'calc(100vh - 79px)', // Header + Footer
  };

  return (
    <div className="app-layout">
      <Header />
      <NavigationPanel />
      <AIPanel />
      <BottomPanel
        leftPanelSize={leftPanelSize}
        rightPanelSize={rightPanelSize}
        leftPanelCollapsed={leftPanelCollapsed}
        rightPanelCollapsed={rightPanelCollapsed}
      />
      
      <main 
        id="main-content"
        className="main-content" 
        style={mainContentStyle} 
        role="main" 
        aria-label="Main content area"
        tabIndex={-1}
      >
        {children}
      </main>
      
      <footer className="app-footer" role="contentinfo">
        <div className="footer-content">
          <span className="footer-text">
            Multi-Cloud Orchestration Portal © 2024
          </span>
          <div className="footer-links">
            <a href="#" className="footer-link" aria-label="Documentation">Documentation</a>
            <a href="#" className="footer-link" aria-label="Support">Support</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default AppLayout;

