import React from 'react';
import { Button, Stack, Text } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import DownloadIcon from '@mui/icons-material/Download';
import ErrorNotification from './ErrorNotification';
import ResultsPreview from './ResultsPreview';
import { SuggestedToolsSection } from './SuggestedToolsSection';
import { ToolOperationHook } from '../../../hooks/tools/shared/useToolOperation';

export interface ReviewToolStepProps<TParams = unknown> {
  isVisible: boolean;
  operation: ToolOperationHook<TParams>;
  title?: string;
  onFileClick?: (file: File) => void;
}

export function createReviewToolStep<TParams = unknown>(
  createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement,
  props: ReviewToolStepProps<TParams>
): React.ReactElement {
  const { t } = useTranslation();
  const { operation } = props;

  const previewFiles = operation.files?.map((file, index) => ({
    file,
    thumbnail: operation.thumbnails[index]
  })) || [];

  return createStep(t("review", "Review"), {
    isVisible: props.isVisible,
    _excludeFromCount: true,
    _noPadding: true
  }, (
    <Stack gap="sm" >
      <ErrorNotification
        error={operation.errorMessage}
        onClose={operation.clearError}
      />

      {previewFiles.length > 0 && (
        <ResultsPreview
          files={previewFiles}
          onFileClick={props.onFileClick}
          isGeneratingThumbnails={operation.isGeneratingThumbnails}
        />
      )}

       {operation.downloadUrl && (
        <Button
          component="a"
          href={operation.downloadUrl}
          download={operation.downloadFilename}
          leftSection={<DownloadIcon />}
          color="blue"
          fullWidth
          mb="md"
        >
          {t("download", "Download")}
        </Button>
      )}

      <SuggestedToolsSection />
    </Stack>
  ));
}