Stirling-PDF/frontend/src/core/components/tools/ToolPanelModePrompt.tsx

import { useEffect, useState } from 'react';
import { Badge, Button, Card, Group, Modal, Stack, Text } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
import { usePreferences } from '@app/contexts/PreferencesContext';
import { useOnboarding } from '@app/contexts/OnboardingContext';
import '@app/components/tools/ToolPanelModePrompt.css';
import { type ToolPanelMode } from '@app/constants/toolPanel';
import { useAppConfig } from '@app/contexts/AppConfigContext';

interface ToolPanelModePromptProps {
  onComplete?: () => void;
}

const ToolPanelModePrompt = ({ onComplete }: ToolPanelModePromptProps = {}) => {
  const { t } = useTranslation();
  const { toolPanelMode, setToolPanelMode } = useToolWorkflow();
  const { preferences, updatePreference } = usePreferences();
  const {
    startTour,
    startAfterToolModeSelection,
    setStartAfterToolModeSelection,
    pendingTourRequest,
  } = useOnboarding();
  const [opened, setOpened] = useState(false);
  const { config } = useAppConfig();
  const isAdmin = !!config?.isAdmin;

  // Only show after the new 3-slide onboarding has been completed
  const shouldShowPrompt = !preferences.toolPanelModePromptSeen && preferences.hasSeenIntroOnboarding;

  useEffect(() => {
    if (shouldShowPrompt) {
      setOpened(true);
    }
  }, [shouldShowPrompt]);

  const resolveRequestedTourType = (): 'admin' | 'tools' => {
    if (pendingTourRequest?.type) {
      return pendingTourRequest.type;
    }
    if (pendingTourRequest?.metadata && 'selfReportedAdmin' in pendingTourRequest.metadata) {
      return pendingTourRequest.metadata.selfReportedAdmin ? 'admin' : 'tools';
    }
    return isAdmin ? 'admin' : 'tools';
  };

  const resumeDeferredTour = (context?: { selection?: ToolPanelMode; dismissed?: boolean }) => {
    if (!startAfterToolModeSelection) {
      return;
    }
    setStartAfterToolModeSelection(false);
    const targetType = resolveRequestedTourType();
    startTour(targetType, {
      skipToolPromptRequirement: true,
      source: 'tool-panel-mode-prompt',
      metadata: {
        ...pendingTourRequest?.metadata,
        resumedFromToolPrompt: true,
        ...(context?.selection ? { selection: context.selection } : {}),
        ...(context?.dismissed ? { dismissed: true } : {}),
      },
    });
  };

  const handleSelect = (mode: ToolPanelMode) => {
    setToolPanelMode(mode);
    updatePreference('defaultToolPanelMode', mode);
    updatePreference('toolPanelModePromptSeen', true);
    updatePreference('hasSelectedToolPanelMode', true);
    setOpened(false);

    resumeDeferredTour({ selection: mode });
    onComplete?.();
  };

  const handleDismiss = () => {
    const defaultMode: ToolPanelMode = 'sidebar';
    if (toolPanelMode !== defaultMode) {
      setToolPanelMode(defaultMode);
      updatePreference('defaultToolPanelMode', defaultMode);
    }
    updatePreference('hasSelectedToolPanelMode', true);
    updatePreference('toolPanelModePromptSeen', true);
    setOpened(false);
    resumeDeferredTour({ dismissed: true });
    onComplete?.();
  };

  return (
    <Modal
      opened={opened}
      onClose={handleDismiss}
      centered
      size="xl"
      radius="lg"
      overlayProps={{ blur: 6, opacity: 0.35 }}
      classNames={{ content: 'tool-panel-mode-prompt__modal' }}
      title={t('toolPanel.modePrompt.title', 'Choose how you browse tools')}
    >
      <Stack gap="lg">
        <Text size="sm" c="dimmed">
          {t('toolPanel.modePrompt.description', 'Preview both layouts and decide how you want to explore Stirling PDF tools.')}
        </Text>
        <div className="tool-panel-mode-prompt__options">
          <Card withBorder radius="lg" shadow="sm" padding="lg" className="tool-panel-mode-prompt__card tool-panel-mode-prompt__card--sidebar">
            <Stack gap="md" className="tool-panel-mode-prompt__card-content">
              <Group justify="space-between">
                <Stack gap={2}>
                <Text fw={600}>{t('toolPanel.modePrompt.sidebarTitle', 'Sidebar mode')}</Text>
                <Text size="sm" c="dimmed">
                  {t('toolPanel.modePrompt.sidebarDescription', 'Keep tools alongside your workspace for quick switching.')}
                </Text>
                </Stack>
                <Badge color="blue" variant="filled">
                  {t('toolPanel.modePrompt.recommended', 'Recommended')}
                </Badge>
              </Group>
              <div className="tool-panel-mode-prompt__preview tool-panel-mode-prompt__preview--sidebar" aria-hidden>
                <div className="tool-panel-mode-prompt__sidebar-panel">
                  <span className="tool-panel-mode-prompt__sidebar-search" />
                  <span className="tool-panel-mode-prompt__sidebar-item" />
                  <span className="tool-panel-mode-prompt__sidebar-item" />
                  <span className="tool-panel-mode-prompt__sidebar-item" />
                  <span className="tool-panel-mode-prompt__sidebar-item tool-panel-mode-prompt__sidebar-item--muted" />
                </div>
                <div className="tool-panel-mode-prompt__workspace" aria-hidden>
                  <div className="tool-panel-mode-prompt__workspace-page" />
                  <div className="tool-panel-mode-prompt__workspace-page tool-panel-mode-prompt__workspace-page--secondary" />
                </div>
              </div>
              <Button
                variant={toolPanelMode === 'sidebar' ? 'filled' : 'light'}
                color="blue"
                radius="md"
                className="tool-panel-mode-prompt__action"
                onClick={() => handleSelect('sidebar')}
              >
                {t('toolPanel.modePrompt.chooseSidebar', 'Use sidebar mode')}
              </Button>
            </Stack>
          </Card>
          <Card withBorder radius="lg" shadow="xs" padding="lg" className="tool-panel-mode-prompt__card">
            <Stack gap="md" className="tool-panel-mode-prompt__card-content">
              <Stack gap={2}>
                <Text fw={600}>{t('toolPanel.modePrompt.fullscreenTitle', 'Fullscreen mode')}</Text>
                <Text size="sm" c="dimmed">
                  {t('toolPanel.modePrompt.fullscreenDescription', 'Browse every tool in a catalogue that covers the workspace until you pick one.')}
                </Text>
              </Stack>
              <div className="tool-panel-mode-prompt__preview tool-panel-mode-prompt__preview--fullscreen" aria-hidden>
                <div className="tool-panel-mode-prompt__fullscreen-columns">
                  <div className="tool-panel-mode-prompt__fullscreen-column">
                    <span className="tool-panel-mode-prompt__fullscreen-card" />
                    <span className="tool-panel-mode-prompt__fullscreen-card" />
                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
                  </div>
                  <div className="tool-panel-mode-prompt__fullscreen-column">
                    <span className="tool-panel-mode-prompt__fullscreen-card" />
                    <span className="tool-panel-mode-prompt__fullscreen-card" />
                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
                  </div>
                  <div className="tool-panel-mode-prompt__fullscreen-column">
                    <span className="tool-panel-mode-prompt__fullscreen-card" />
                    <span className="tool-panel-mode-prompt__fullscreen-card" />
                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
                  </div>
                </div>
              </div>
              <Button
                variant={toolPanelMode === 'fullscreen' ? 'filled' : 'outline'}
                color="blue"
                radius="md"
                className="tool-panel-mode-prompt__action"
                onClick={() => handleSelect('fullscreen')}
              >
                {t('toolPanel.modePrompt.chooseFullscreen', 'Use fullscreen mode')}
              </Button>
            </Stack>
          </Card>
        </div>
        <Button
          variant="subtle"
          color="gray"
          radius="md"
          className="tool-panel-mode-prompt__maybe-later"
          onClick={handleDismiss}
        >
          {t('toolPanel.modePrompt.dismiss', 'Maybe later')}
        </Button>
      </Stack>
    </Modal>
  );
};

export default ToolPanelModePrompt;