import { Component, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { SidebarComponent } from '../sidebar/sidebar.component';
import { HeaderComponent } from '../header/header.component';
import { MobileFooterMenuComponent } from '../mobile-footer-menu/mobile-footer-menu.component';


@Component({
  selector: 'app-main-layout',
  standalone: true,
  imports: [CommonModule, RouterOutlet, SidebarComponent, HeaderComponent, MobileFooterMenuComponent],
  template: `
    <div class="app-container">
      <!-- Header sempre no topo -->
      <app-header class="app-header"></app-header>
      
      <!-- Container para sidebar e conteúdo principal -->
      <div class="content-container">
        <app-sidebar #sidebar (collapsedChange)="onSidebarCollapsed($event)"></app-sidebar>
        <div class="main-content" 
             [class.expanded]="!sidebar.isCollapsed && !sidebar.isMobile"
             [class.collapsed]="sidebar.isCollapsed && !sidebar.isMobile"
             [class.mobile-full]="sidebar.isMobile">
          <div class="page-content">
            <router-outlet></router-outlet>
          </div>
        </div>
      </div>
      
      <!-- Menu Mobile Flutuante -->
      <app-mobile-footer-menu 
        (sidebarToggle)="toggleSidebar()">
      </app-mobile-footer-menu>
    </div>
  `,
  styles: [`
    .app-container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background-color: var(--background);
      color: var(--text-primary);
    }

    .app-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1001;
      height: 60px;
    }

    .content-container {
      display: flex;
      flex: 1;
      margin-top: 68px; /* Altura do header + espaçamento sutil para destacar o header */
      height: calc(100vh - 68px);
    }

    .main-content {
      flex: 1;
      margin-left: 80px; /* ✅ Sidebar colapsada */
      transition: margin-left 0.3s ease;
      overflow-x: hidden;
    }

    .main-content.expanded {
      margin-left: 248px; /* ✅ Sidebar expandida (240px + 8px margem) */
    }

    .main-content.collapsed {
      margin-left: 88px; /* ✅ Sidebar colapsada (80px + 8px margem) */
    }

    /* ✅ NOVO: Largura total em mobile (sidebar oculta) */
    .main-content.mobile-full {
      margin-left: 0; /* Sem margem em mobile, sidebar está oculta */
    }

    .page-content {
      padding: 0.5rem;
      background-color: var(--background);
      height: 100%;
      max-height: 100%;
      
      /* Prevenir scroll horizontal */
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      
      /* Garantir que elementos filhos respeitem os limites */
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    /* Responsividade para mobile */
    @media (max-width: 768px) {
      .main-content {
        margin-left: 0; /* ✅ Sempre sem margem em mobile */
      }

      .main-content.expanded {
        margin-left: 0; /* ✅ Mesmo expandido, sem margem em mobile */
      }

      .main-content.mobile-full {
        margin-left: 0; /* ✅ Garantir largura total */
      }

      .content-container {
        height: calc(100vh - 68px - 80px); /* Header + espaçamento sutil + footer menu mobile */
      }

      .page-content {
        padding: 0;
        padding-bottom: 80px; /* ✅ Apenas padding-bottom para o menu mobile */
      }
    }
  `]
})
export class MainLayoutComponent {
  @ViewChild('sidebar') sidebar!: SidebarComponent;

  onSidebarCollapsed(collapsed: boolean) {
    console.log('Sidebar collapsed:', collapsed);
  }

  toggleSidebar() {
    console.log('🔧 Toggling sidebar from mobile menu...');
    if (this.sidebar) {
      // ✅ Usar sempre toggleSidebar() - já tem lógica correta para mobile e desktop
      this.sidebar.toggleSidebar();
    }
  }
}  