/**
 * MainLayout — Shell principal do SpotOnFide
 *
 * ESTRUTURA DEFINITIVA (não alterar sem aprovação do Arquiteto):
 *
 * Desktop (lg+):
 *   ┌─────────────────────────────────────────┐
 *   │            TOPBAR (h-16, fixo)          │
 *   ├──────────┬──────────────────────────────┤
 *   │          │                              │
 *   │ SIDEBAR  │     CONTEÚDO (scroll)        │
 *   │  (w-64)  │                              │
 *   │          │                              │
 *   ├──────────┴──────────────────────────────┤
 *   │         PLAYER DESKTOP (h-24, fixo)     │
 *   └─────────────────────────────────────────┘
 *
 * Mobile (< lg):
 *   ┌─────────────────────────────────────────┐
 *   │            TOPBAR (h-16, fixo)          │
 *   ├─────────────────────────────────────────┤
 *   │                                         │
 *   │        CONTEÚDO (scroll)                │
 *   │                                         │
 *   ├─────────────────────────────────────────┤
 *   │       MINI-PLAYER (~86px, fixo)         │
 *   ├─────────────────────────────────────────┤
 *   │       BOTTOM NAV (h-14, fixo)           │
 *   │       + safe-area-inset-bottom          │
 *   └─────────────────────────────────────────┘
 *
 * ESPAÇAMENTO DO CONTEÚDO:
 *   mt-16       = Topbar (h-16 = 64px)
 *   mb-[160px]  = MiniPlayer ampliado (~86px)
 *                + BottomNav (56px)
 *                + margem/safe area (~18px)
 *   lg:mb-24    = Desktop: Player (h-24 = 96px)
 *
 * PADDING GLOBAL:
 *   px-5        = Mobile (20px)
 *   lg:px-8     = Desktop (32px)
 *
 * O padding horizontal é aplicado no shell para que
 * todas as páginas herdem automaticamente o mesmo
 * espaçamento visual, semelhante ao YouTube Music.
 *
 * FASES FUTURAS:
 *   Fase 2 (Música): nenhuma mudança aqui
 *   Fase 3 (Rádio): nenhuma mudança aqui
 *   Fase 4 (Audiolivros): nenhuma mudança aqui
 *   Fase 7 (SSO): nenhuma mudança aqui
 */

import { type ReactNode } from "react";
import BottomNav from "./BottomNav";
import Player from "./Player";
import Sidebar from "./Sidebar";
import Topbar from "./Topbar";

interface MainLayoutProps {
  children: ReactNode;
}

export default function MainLayout({
  children,
}: MainLayoutProps) {
  return (
    <div className="flex h-[100dvh] bg-sof-app overflow-hidden">
      {/* Sidebar — visível apenas em desktop (lg+) */}
      <Sidebar />

      {/* Área principal — ocupa todo o espaço restante */}
      <div className="flex-1 flex flex-col lg:ml-64 min-w-0">
        {/* Topbar — fixo no topo, h-16 */}
        <Topbar />

        {/*
         * Área de conteúdo com scroll
         *
         * mt-16       → compensa o Topbar fixo (h-16)
         * mb-[160px]  → mobile: MiniPlayer ampliado + BottomNav + safe area
         * lg:mb-24    → desktop: Player fixo (h-24)
         *
         * px-5 / lg:px-8
         * → adiciona respiro horizontal global semelhante ao YouTube Music.
         *
         * overflow-x-hidden
         * → previne scroll horizontal.
         */}
        <main className="flex-1 overflow-y-auto overflow-x-hidden mt-16 mb-[160px] lg:mb-24 px-5 lg:px-8">
          {children}
        </main>

        {/*
         * Player — renderiza ambos os estados
         * (MiniPlayer mobile + Player desktop).
         *
         * O elemento <audio> vive dentro do Player
         * e nunca desmonta (ADR-004).
         */}
        <Player />
      </div>

      {/*
       * BottomNav — visível apenas em mobile (< lg)
       * Posicionado fora do flex-col para ser fixed
       * independente do scroll.
       *
       * lg:hidden está declarado dentro do próprio
       * BottomNav.
       */}
      <BottomNav />
    </div>
  );
}