import { ScrollView, View } from 'react-native';
import { HStack, ScopedTheme, VStack } from '@cdx-ui/components';
import {
  AccountsCard,
  ActivityCard,
  AlertsCard,
  BillStatusChips,
  ButtonVariantsShowcase,
  CANVAS_WIDTH,
  CashbackPromoCard,
  CategorySelectionChips,
  CreateCategoryCard,
  DocumentReviewCard,
  HeroSection,
  MobileDepositTerms,
  MonthlyBudgetSection,
  QuickActionsRow,
  RewardsCard,
  SavingsGoalPrompt,
  SettingsCard,
  TransferToSection,
  VerifyCard,
} from './previews';

/**
 * Live preview surface for the theme editor — everything inside the scroll
 * canvas is Forge UI rendered on the real `surface-background` token, so the
 * preview is an honest reflection of the active theme.
 *
 * The canvas is a fixed-width banking "artboard" laid out as a three-column
 * bento (flex 4 / 4 / 3): hero, quick actions, and showcase sections sit
 * directly on the background, with cards reserved for genuinely contained
 * surfaces. It pans on both axes. Individual sections live in `./previews`.
 *
 * `ScopedTheme` forces the canvas into the editor's selected light/dark mode.
 * The `key={theme}` remount is the documented workaround for dynamically
 * switching a scoped theme on web.
 *
 * `bg-surface-background` lives on a `flex: 1` wrapper so it always fills the
 * panel (no white gutter on screens wider than `CANVAS_WIDTH`); the columns
 * stay at their fixed `CANVAS_WIDTH` and pan horizontally on narrower screens.
 */
interface PreviewPanelProps {
  theme: 'light' | 'dark';
}

export function PreviewPanel({ theme }: Readonly<PreviewPanelProps>) {
  return (
    <View style={{ flex: 1, minHeight: 0 }}>
      <ScopedTheme key={theme} theme={theme}>
        <View className="bg-surface-background" style={{ flex: 1 }}>
          <ScrollView showsVerticalScrollIndicator style={{ flex: 1 }}>
            <ScrollView horizontal showsHorizontalScrollIndicator nestedScrollEnabled>
              <View className="p-5" style={{ width: CANVAS_WIDTH }}>
                <HStack className="gap-6 items-start">
                  <VStack className="gap-8" style={{ flex: 4 }}>
                    <HeroSection />
                    <QuickActionsRow />
                    <AccountsCard />
                    <CashbackPromoCard />
                    <CreateCategoryCard />
                  </VStack>

                  <VStack className="gap-8" style={{ flex: 4 }}>
                    <DocumentReviewCard />
                    <RewardsCard />
                    <MonthlyBudgetSection />
                    <SettingsCard />
                    <BillStatusChips />
                    <ActivityCard />

                    <View className="h-full justify-center items-center" style={{ flex: 5 }}>
                      <VerifyCard />
                    </View>

                    <MobileDepositTerms />
                  </VStack>

                  <VStack className="gap-8" style={{ flex: 3 }}>
                    <SavingsGoalPrompt />
                    <ButtonVariantsShowcase />
                    <TransferToSection />
                    <AlertsCard />
                    <CategorySelectionChips />
                  </VStack>
                </HStack>
              </View>
            </ScrollView>
          </ScrollView>
        </View>
      </ScopedTheme>
    </View>
  );
}