Simpl-Resultat/src/pages/ImportPage.tsx

import { useTranslation } from "react-i18next";
import { useImportWizard } from "../hooks/useImportWizard";
import ImportFolderConfig from "../components/import/ImportFolderConfig";
import SourceList from "../components/import/SourceList";
import SourceConfigPanel from "../components/import/SourceConfigPanel";
import FilePreviewTable from "../components/import/FilePreviewTable";
import FormatDriftPanel from "../components/import/FormatDriftPanel";
import DuplicateCheckPanel from "../components/import/DuplicateCheckPanel";
import ImportConfirmation from "../components/import/ImportConfirmation";
import ImportProgress from "../components/import/ImportProgress";
import ImportReportPanel from "../components/import/ImportReportPanel";
import WizardNavigation from "../components/import/WizardNavigation";
import ImportHistoryPanel from "../components/import/ImportHistoryPanel";
import { AlertCircle } from "lucide-react";
import { PageHelp } from "../components/shared/PageHelp";

export default function ImportPage() {
  const { t } = useTranslation();
  const {
    state,
    browseFolder,
    refreshFolder,
    selectSource,
    updateConfig,
    toggleFile,
    selectAllFiles,
    parseAndPreview,
    checkDuplicates,
    flipSignConvention,
    executeImport,
    goToStep,
    reset,
    adoptDriftFormat,
    keepCurrentFormat,
    autoDetectConfig,
    saveConfigAsTemplate,
    applyConfigTemplate,
    updateConfigTemplate,
    deleteConfigTemplate,
    toggleDuplicateRow,
    setSkipAllDuplicates,
  } = useImportWizard();

  const nextDisabled = state.selectedFiles.length === 0 || !state.sourceConfig.name;

  return (
    <div>
      <div className="relative flex items-center gap-3 mb-6">
        <h1 className="text-2xl font-bold">{t("import.title")}</h1>
        <PageHelp helpKey="import" />
      </div>

      {/* Error banner */}
      {state.error && (
        <div className="mb-4 p-3 rounded-xl bg-[var(--card)] border-2 border-[var(--negative)] flex items-center gap-2">
          <AlertCircle size={16} className="text-[var(--negative)] shrink-0" />
          {/*
            The wizard reports a translation key when it has one (a stored
            format it cannot decode) and a raw message otherwise; `defaultValue`
            renders the latter unchanged.
          */}
          <p className="text-sm text-[var(--foreground)]">
            {t(state.error, { defaultValue: state.error })}
          </p>
        </div>
      )}

      {/* Folder config - always visible */}
      <ImportFolderConfig
        folderPath={state.importFolder}
        onBrowse={browseFolder}
        onRefresh={refreshFolder}
        isLoading={state.isLoading}
      />

      {/* Wizard steps */}
      {state.step === "source-list" && (
        <>
          <SourceList
            sources={state.scannedSources}
            configuredSourceNames={state.configuredSourceNames}
            importedFileNames={state.importedFilesBySource}
            onSelectSource={selectSource}
          />
          <ImportHistoryPanel onChanged={refreshFolder} />
        </>
      )}

      {state.step === "source-config" && state.selectedSource && (
        <div className="space-y-6">
          <SourceConfigPanel
            source={state.selectedSource}
            config={state.sourceConfig}
            selectedFiles={state.selectedFiles}
            importedFileNames={state.importedFilesBySource.get(state.selectedSource.folder_name)}
            headers={state.previewHeaders}
            configTemplates={state.configTemplates}
            onConfigChange={updateConfig}
            onFileToggle={toggleFile}
            onSelectAllFiles={selectAllFiles}
            onAutoDetect={autoDetectConfig}
            onSaveAsTemplate={saveConfigAsTemplate}
            onApplyTemplate={applyConfigTemplate}
            onUpdateTemplate={updateConfigTemplate}
            onDeleteTemplate={deleteConfigTemplate}
            selectedTemplateId={state.selectedTemplateId}
            detectionScore={state.detectionScore}
            detectedBank={state.detectedBank}
            isLoading={state.isLoading}
          />
          {/*
            One way forward, and it goes through the preview (#329). The pair of
            buttons this replaces offered "Aperçu" as an optional detour and
            "Vérifier les doublons" as the real path, so the totals were the one
            screen an import never had to show.
          */}
          <WizardNavigation
            onBack={() => goToStep("source-list")}
            onNext={parseAndPreview}
            onCancel={reset}
            nextLabel={t("import.wizard.preview")}
            nextDisabled={nextDisabled || state.isLoading}
          />
        </div>
      )}

      {state.step === "file-preview" && (
        <div className="space-y-6">
          {/*
            Format drift (#330) — ABOVE the table, because it tells the user
            whether the table below is worth reading. Present only when the
            header row moved since the last successful import of this source.
          */}
          {state.formatDrift && (
            <FormatDriftPanel
              entries={state.formatDrift}
              canAdopt={state.driftConfig !== null}
              onAdopt={adoptDriftFormat}
              onKeep={keepCurrentFormat}
              isBusy={state.isLoading}
            />
          )}
          <FilePreviewTable
            rows={state.parsedPreview}
            onFlipSigns={flipSignConvention}
            isFlipping={state.isLoading}
          />
          <WizardNavigation
            onBack={() => goToStep("source-config")}
            onNext={checkDuplicates}
            onCancel={reset}
            nextLabel={t("import.wizard.checkDuplicates")}
            nextDisabled={state.isLoading}
          />
        </div>
      )}

      {state.step === "duplicate-check" && state.duplicateResult && (
        <div className="space-y-6">
          <DuplicateCheckPanel
            result={state.duplicateResult}
            excludedIndices={state.excludedDuplicateIndices}
            onToggleRow={toggleDuplicateRow}
            onSkipAll={() => setSkipAllDuplicates(true)}
            onIncludeAll={() => setSkipAllDuplicates(false)}
          />
          <WizardNavigation
            onBack={() => goToStep("file-preview")}
            onNext={() => goToStep("confirm")}
            onCancel={reset}
            nextLabel={t("import.wizard.confirm")}
          />
        </div>
      )}

      {state.step === "confirm" && state.duplicateResult && (
        <div className="space-y-6">
          <ImportConfirmation
            sourceName={state.sourceConfig.name}
            config={state.sourceConfig}
            headers={state.previewHeaders}
            selectedFiles={state.selectedFiles}
            duplicateResult={state.duplicateResult}
            excludedCount={state.excludedDuplicateIndices.size}
          />
          <WizardNavigation
            onBack={() => goToStep("duplicate-check")}
            onNext={executeImport}
            onCancel={reset}
            nextLabel={t("import.wizard.import")}
            showCancel={false}
          />
        </div>
      )}

      {state.step === "importing" && (
        <ImportProgress
          currentFile={state.importProgress.file}
          progress={state.importProgress.current}
          total={state.importProgress.total}
        />
      )}

      {state.step === "report" && state.importReport && (
        <ImportReportPanel report={state.importReport} onDone={reset} />
      )}
    </div>
  );
}