'use client';

import { useState, type ReactNode } from 'react';

import { MobileLayoutProvider } from './mobile-layout-provider';
import { MobileTopbar } from './mobile-topbar';
import { MobileBottomTabs } from './mobile-bottom-tabs';
import { MoreSheet } from './more-sheet';

/**
 * Mobile shell: fixed compact topbar + scrollable content + fixed bottom tab
 * bar. Renders only when CSS reveals it (data-shell="mobile") — both shells
 * are in the DOM, see src/app/globals.css. The bottom tabs and More sheet
 * derive the active port slug from the URL themselves, so this layout takes
 * no portSlug prop.
 */
export function MobileLayout({ children }: { children: ReactNode }) {
  const [moreOpen, setMoreOpen] = useState(false);

  return (
    <div data-shell="mobile" className="min-h-screen bg-background">
      <MobileLayoutProvider>
        <MobileTopbar />
        <main className="px-4 pt-[calc(52px+env(safe-area-inset-top))] pb-[calc(56px+env(safe-area-inset-bottom))] min-h-screen">
          {children}
        </main>
        <MobileBottomTabs onMoreClick={() => setMoreOpen(true)} />
        <MoreSheet open={moreOpen} onOpenChange={setMoreOpen} />
      </MobileLayoutProvider>
    </div>
  );
}
