'use client';

import { useState } from 'react';
import { BottomNav } from '@/components/panel/bottom-nav';
import { PanelHeader } from '@/components/panel/panel-header';
import { PanelSidebar } from '@/components/panel/panel-sidebar';
import { FeedbackProvider } from '@/components/ui/feedback-toast';

export type SubscriptionSummary = {
  planName: string;
  statusLabel: string;
  daysRemaining: number | null;
  accessGranted: boolean;
  isTrial: boolean;
} | null;

export type BrokerShellProps = {
  userName: string;
  businessName: string;
  businessSlug: string;
  businessLogoUrl?: string | null;
  subscriptionSummary?: SubscriptionSummary;
  children: React.ReactNode;
};

export function BrokerShell({
  userName,
  businessName,
  businessSlug,
  businessLogoUrl = null,
  subscriptionSummary = null,
  children,
}: BrokerShellProps) {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <FeedbackProvider>
      <div className="flex min-h-dvh bg-background">
        <PanelSidebar
          businessName={businessName}
          businessSlug={businessSlug}
          businessLogoUrl={businessLogoUrl}
          collapsed={collapsed}
          onToggle={() => setCollapsed(value => !value)}
          subscriptionSummary={subscriptionSummary}
        />
        <div className="flex min-w-0 flex-1 flex-col">
          <PanelHeader
            businessName={businessName}
            businessLogoUrl={businessLogoUrl}
            userName={userName}
            subscriptionSummary={subscriptionSummary}
          />
          <main id="main" className="mx-auto w-full max-w-6xl flex-1 px-3 pb-[calc(var(--panel-nav-h)+var(--safe-bottom)+1rem)] pt-4 sm:px-5 sm:pt-6 lg:pb-8">
            {children}
          </main>
          <BottomNav />
        </div>
      </div>
    </FeedbackProvider>
  );
}