Stirling-PDF/frontend/src/core/components/onboarding/OnboardingModalSlide.tsx

/**
 * OnboardingModalSlide Component
 * 
 * Renders a single modal slide in the onboarding flow.
 * Handles the hero image, content, stepper, and button actions.
 */

import React from 'react';
import { Modal, Stack, ActionIcon } from '@mantine/core';
import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
import CloseIcon from '@mui/icons-material/Close';

import type { SlideDefinition, ButtonAction } from '@app/components/onboarding/onboardingFlowConfig';
import type { OnboardingRuntimeState } from '@app/components/onboarding/orchestrator/onboardingConfig';
import type { SlideConfig } from '@app/types/types';
import AnimatedSlideBackground from '@app/components/onboarding/slides/AnimatedSlideBackground';
import OnboardingStepper from '@app/components/onboarding/OnboardingStepper';
import { SlideButtons } from '@app/components/onboarding/InitialOnboardingModal/renderButtons';
import LocalIcon from '@app/components/shared/LocalIcon';
import { BASE_PATH } from '@app/constants/app';
import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';

interface OnboardingModalSlideProps {
  slideDefinition: SlideDefinition;
  slideContent: SlideConfig;
  runtimeState: OnboardingRuntimeState;
  modalSlideCount: number;
  currentModalSlideIndex: number;
  onSkip: () => void;
  onAction: (action: ButtonAction) => void;
  allowDismiss?: boolean;
}

export default function OnboardingModalSlide({
  slideDefinition,
  slideContent,
  runtimeState,
  modalSlideCount,
  currentModalSlideIndex,
  onSkip,
  onAction,
  allowDismiss = true,
}: OnboardingModalSlideProps) {

  const renderHero = () => {
    if (slideDefinition.hero.type === 'dual-icon') {
      return (
        <div className={styles.heroIconsContainer}>
          <div className={styles.iconWrapper}>
            <img src={`${BASE_PATH}/modern-logo/logo512.png`} alt="Stirling icon" className={styles.downloadIcon} />
          </div>
        </div>
      );
    }

    return (
      <div className={styles.heroLogoCircle}>
        {slideDefinition.hero.type === 'rocket' && (
          <LocalIcon icon="rocket-launch" width={64} height={64} className={styles.heroIcon} />
        )}
        {slideDefinition.hero.type === 'shield' && (
          <LocalIcon icon="verified-user-outline" width={64} height={64} className={styles.heroIcon} />
        )}
        {slideDefinition.hero.type === 'lock' && (
          <LocalIcon icon="lock-outline" width={64} height={64} className={styles.heroIcon} />
        )}
        {slideDefinition.hero.type === 'analytics' && (
          <LocalIcon icon="analytics" width={64} height={64} className={styles.heroIcon} />
        )}
        {slideDefinition.hero.type === 'diamond' && <DiamondOutlinedIcon sx={{ fontSize: 64, color: '#000000' }} />}
        {slideDefinition.hero.type === 'logo' && (
          <img src={`${BASE_PATH}/branding/StirlingPDFLogoNoTextLightHC.svg`} alt="Stirling logo" />
        )}
      </div>
    );
  };

  return (
    <Modal
      opened={true}
      onClose={onSkip}
      closeOnClickOutside={false}
      closeOnEscape={allowDismiss}
      centered
      size="lg"
      radius="lg"
      withCloseButton={false}
      zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
      styles={{
        body: { padding: 0, maxHeight: '90vh', overflow: 'hidden' },
        content: { overflow: 'hidden', border: 'none', background: 'var(--bg-surface)', maxHeight: '90vh' },
      }}
    >
      <Stack gap={0} className={styles.modalContent}>
        <div className={styles.heroWrapper}>
          <AnimatedSlideBackground
            gradientStops={slideContent.background.gradientStops}
            circles={slideContent.background.circles}
            isActive
            slideKey={slideContent.key}
          />
          {allowDismiss && (
            <ActionIcon
              onClick={onSkip}
              radius="md"
              size={36}
              style={{
                position: 'absolute',
                top: 16,
                right: 16,
                backgroundColor: 'rgba(255, 255, 255, 0.2)',
                color: 'white',
                backdropFilter: 'blur(4px)',
                zIndex: 10,
              }}
              styles={{
                root: {
                  '&:hover': {
                    backgroundColor: 'rgba(255, 255, 255, 0.3)',
                  },
                },
              }}
            >
              <CloseIcon fontSize="small" />
            </ActionIcon>
          )}
          <div className={styles.heroLogo} key={`logo-${slideContent.key}`}>
            {renderHero()}
          </div>
        </div>

        <div className={styles.modalBody} style={{ overflowY: 'auto', maxHeight: 'calc(90vh - 220px)' }}>
          <Stack gap={16}>
            <div
              key={`title-${slideContent.key}`}
              className={`${styles.title} ${styles.titleText}`}
            >
              {slideContent.title}
            </div>

            <div className={styles.bodyText}>
              <div key={`body-${slideContent.key}`} className={`${styles.bodyCopy} ${styles.bodyCopyInner}`}>
                {slideContent.body}
              </div>
              <style>{`div strong{color: var(--onboarding-title); font-weight: 600;}`}</style>
            </div>

            {modalSlideCount > 1 && (
              <OnboardingStepper totalSteps={modalSlideCount} activeStep={currentModalSlideIndex} />
            )}

            <div className={styles.buttonContainer}>
              <SlideButtons
                slideDefinition={slideDefinition}
                licenseNotice={runtimeState.licenseNotice}
                flowState={{ selectedRole: runtimeState.selectedRole }}
                onAction={onAction}
              />
            </div>
          </Stack>
        </div>
      </Stack>
    </Modal>
  );
}