import * as Notifications from 'expo-notifications';
import { StatusBar, View } from 'react-native';
import ViewShot from 'react-native-view-shot';
import { AuthProvider, useAuth } from '../src/context/AuthContext';
import { AppProvider, useApp } from '../src/context/AppContext';
import { useNetworkStatus } from '../src/hooks/useNetworkStatus';

// Components
import { OnboardingScreen } from '../src/components/OnboardingScreen';
import { OrderList } from '../src/components/OrderList';
import { OrderDetail } from '../src/components/OrderDetail';
import { PickList } from '../src/components/PickList';
import { Scanner } from '../src/components/Scanner';
import { QuantityModal } from '../src/components/QuantityModal';
import { LabelModal } from '../src/components/LabelModal';
import { LabelPreviewModal } from '../src/components/LabelPreviewModal';
import { AddressModal } from '../src/components/AddressModal';
import { SettingsModal } from '../src/components/SettingsModal';
import { ColorPickerModal } from '../src/components/ColorPickerModal';
import { AccountModal } from '../src/components/AccountModal';
import { AdminModal } from '../src/components/AdminModal';
import { WhoIsPackingModal } from '../src/components/WhoIsPackingModal';
import { PinLockScreen } from '../src/components/PinLockScreen';
import { LockOverrideModal } from '../src/components/LockOverrideModal';
import { ErrorBanner } from '../src/components/ErrorBanner';
import { OfflineBanner } from '../src/components/OfflineBanner';
import { ShippingLabelView } from '../src/components/ShippingLabelView';

// Configure push notifications handler at module scope
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});

function AppShell() {
  const { appScreen, securityMode } = useAuth();
  const { themeColor, viewShotRef, labelPrintData } = useApp();
  const { isOnline } = useNetworkStatus();

  if (appScreen === 'loading' || appScreen === 'onboarding') {
    return <OnboardingScreen />;
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#f4f6f8' }}>
      <StatusBar barStyle="light-content" backgroundColor={themeColor} />

      <ErrorBanner />
      <OfflineBanner isOnline={isOnline} />

      <OrderList />

      {/* Modals */}
      <OrderDetail />
      <PickList />
      <Scanner />
      <QuantityModal />
      <LabelModal />
      <LabelPreviewModal />
      <AddressModal />
      <SettingsModal />
      <ColorPickerModal />
      <AccountModal />
      <AdminModal />
      {securityMode === 'shared_honor' ? <WhoIsPackingModal /> : null}
      {securityMode === 'individual_pin' ? <PinLockScreen /> : null}
      <LockOverrideModal />

      {/* Off-screen label renderer for Brother QL printing */}
      <ViewShot
        ref={viewShotRef}
        options={{ format: 'png', quality: 1.0, result: 'tmpfile' }}
        collapsable={false}
        style={{ position: 'absolute', left: -9999, top: -9999, opacity: 0, width: 580 }}
      >
        {labelPrintData ? <ShippingLabelView {...labelPrintData} /> : <View style={{ width: 1, height: 1 }} />}
      </ViewShot>
    </View>
  );
}

export default function App() {
  return (
    <AuthProvider>
      <AppProvider>
        <AppShell />
      </AppProvider>
    </AuthProvider>
  );
}
