/**
 * TabbedLayout - Main layout with project-centric sidebar and multi-pane tabbed content.
 *
 * Layout structure:
 * - Sidebar (280px): Project dropdown + date-grouped sessions
 * - Main content: PaneContainer with one or more panes, each with TabBar + content
 */

import { isElectronMode } from '@renderer/api';
import { getTrafficLightPaddingForZoom } from '@renderer/constants/layout';
import { useFullScreen } from '@renderer/hooks/useFullScreen';
import { useKeyboardShortcuts } from '@renderer/hooks/useKeyboardShortcuts';
import { useZoomFactor } from '@renderer/hooks/useZoomFactor';

import { UpdateBanner } from '../common/UpdateBanner';
import { UpdateDialog } from '../common/UpdateDialog';
import { WorkspaceIndicator } from '../common/WorkspaceIndicator';
import { CommandPalette } from '../search/CommandPalette';
import { GlobalTaskDetailDialog } from '../team/dialogs/GlobalTaskDetailDialog';

import { CustomTitleBar } from './CustomTitleBar';
import { PaneContainer } from './PaneContainer';
import { Sidebar } from './Sidebar';

export const TabbedLayout = (): React.JSX.Element => {
  useKeyboardShortcuts();
  const zoomFactor = useZoomFactor();
  const isFullScreen = useFullScreen();
  const trafficLightPadding = !isElectronMode()
    ? 0
    : isFullScreen
      ? 8
      : getTrafficLightPaddingForZoom(zoomFactor);

  return (
    <div
      className="flex h-screen flex-col bg-claude-dark-bg text-claude-dark-text"
      style={
        { '--macos-traffic-light-padding-left': `${trafficLightPadding}px` } as React.CSSProperties
      }
    >
      <CustomTitleBar />
      <UpdateBanner />
      <div className="flex flex-1 overflow-hidden">
        {/* Command Palette (Cmd+K) */}
        <CommandPalette />

        {/* Sidebar - Project dropdown + Sessions (280px) */}
        <Sidebar />

        {/* Multi-pane content area */}
        <PaneContainer />
      </div>
      <GlobalTaskDetailDialog />
      <UpdateDialog />
      <WorkspaceIndicator />
    </div>
  );
};