'use client';

import React, { useState } from 'react';
import { Club, UserPortalPermissions, ClubRole } from './types';
import { FounderSidebar } from './founder-sidebar';
import { FounderTopBar } from './founder-top-bar';

interface FounderPortalShellProps {
  club: Club;
  permissions: UserPortalPermissions;
  activeNav?: string;
  onNavSelect?: (nav: string) => void;
  onPlanRide?: () => void;
  onPostAnnouncement?: () => void;
  onSwitchRole?: (role: ClubRole) => void;
  onSwitchClub?: () => void;
  pendingApplicationsCount?: number;
  upcomingRidesCount?: number;
  children: React.ReactNode;
}

export function FounderPortalShell({
  club,
  permissions,
  activeNav = 'overview',
  onNavSelect,
  onPlanRide,
  onPostAnnouncement,
  onSwitchRole,
  onSwitchClub,
  pendingApplicationsCount = 0,
  upcomingRidesCount = 0,
  children,
}: FounderPortalShellProps) {
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);

  return (
    <div className="founder-portal-root min-h-screen bg-brand-bg telemetry-grid-bg font-body text-sm text-slate-200 antialiased selection:bg-primary-container selection:text-on-primary-container">
      {/* Sidebar (Desktop persistent + Mobile off-canvas drawer) */}
      <FounderSidebar
        club={club}
        permissions={permissions}
        activeNav={activeNav}
        onNavSelect={onNavSelect}
        pendingApplicationsCount={pendingApplicationsCount}
        upcomingRidesCount={upcomingRidesCount}
        isOpenOnMobile={mobileSidebarOpen}
        onCloseMobile={() => setMobileSidebarOpen(false)}
      />

      {/* Main Layout Area */}
      <div className="lg:pl-72 flex flex-col min-h-screen">
        {/* Top App Bar */}
        <FounderTopBar
          club={club}
          permissions={permissions}
          activeNav={activeNav}
          onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
          onPlanRide={onPlanRide}
          onPostAnnouncement={onPostAnnouncement}
          onSwitchRole={onSwitchRole}
          onSwitchClub={onSwitchClub}
          pendingApplicationsCount={pendingApplicationsCount}
          upcomingRidesCount={upcomingRidesCount}
        />

        {/* Content Body Container */}
        <main className="relative pt-24 pb-16 px-6 sm:px-8 lg:px-8 w-full max-w-[1536px] mx-auto flex-1">
          {children}
        </main>
      </div>
    </div>
  );
}