'use client';

import { Sidebar } from './sidebar';
import { MobileNav } from './mobile-nav';
import { UserMenu } from './user-menu';
import { NotificationBell } from '@/components/notifications/notification-bell';
import { EmojiSpriteProvider } from '@/components/chat/emoji-sprite-provider';
import { FamilyOverlayProvider } from '@/components/family/family-overlay-provider';
import { MiniFamilyChat } from '@/components/family/mini-family-chat';
import { BrandLogo } from '@/components/id/brand-logo';
import Link from 'next/link';
import { cn } from '@/lib/utils';

const MOBILE_HEADER_HEIGHT = 'calc(3.5rem + env(safe-area-inset-top))';

export function IdShell({
  active,
  children,
  wide = false,
  fullBleed = false
}: {
  active: string;
  children: React.ReactNode;
  wide?: boolean;
  fullBleed?: boolean;
}) {
  return (
    <FamilyOverlayProvider>
      <EmojiSpriteProvider />
      <div className="min-h-screen bg-white">
        <Sidebar active={active} />
        {!fullBleed ? (
          <div
            className="fixed left-0 right-0 top-0 z-40 flex h-[var(--mobile-header-height)] items-center justify-between border-b border-[#eceef4] bg-white/95 px-4 backdrop-blur lg:hidden"
            style={{ ['--mobile-header-height' as string]: MOBILE_HEADER_HEIGHT, paddingTop: 'env(safe-area-inset-top)' }}
          >
            <Link href="/" className="shrink-0">
              <BrandLogo size="sm" variant="dark" />
            </Link>
            <div className="flex items-center gap-2">
              <NotificationBell />
              <UserMenu />
            </div>
          </div>
        ) : null}
        <div className="fixed right-4 top-4 z-40 hidden items-center gap-2 lg:right-8 lg:top-6 lg:flex">
          <NotificationBell />
          <UserMenu />
        </div>
        <main
          className={cn(
            'min-w-0 pb-[calc(4.5rem+env(safe-area-inset-bottom))] lg:pb-8 lg:pl-[220px] lg:pr-8',
            fullBleed ? 'px-0 pt-0 lg:pt-8' : 'px-0 pt-[var(--mobile-header-height)] lg:pt-8'
          )}
          style={fullBleed ? undefined : ({ ['--mobile-header-height' as string]: MOBILE_HEADER_HEIGHT } as React.CSSProperties)}
        >
          <div
            className={cn(
              'mx-auto w-full min-w-0',
              fullBleed ? 'max-w-none' : wide ? 'max-w-[920px] px-4 sm:px-5 lg:px-0' : 'max-w-[560px] px-4 sm:px-5 lg:px-0'
            )}
          >
            {children}
          </div>
        </main>
        <MobileNav active={active} />
        <MiniFamilyChat />
      </div>
    </FamilyOverlayProvider>
  );
}
