/**
 * InitializingOverlay Component
 *
 * Displays a loading state while the validation step is initializing.
 * Shows the current initialization phase to keep users informed.
 */

import { Loader2 } from 'lucide-react';
import { Progress } from '@/components/ui/progress';
import type { InitPhase } from '../store/types';

interface InitializingOverlayProps {
  phase: InitPhase;
  message?: string;
}

const phaseMessages: Record<InitPhase, string> = {
  idle: 'Preparing...',
  'loading-options': 'Loading field options...',
  'loading-templates': 'Loading templates...',
  'validating-upcs': 'Checking UPCs and creating item numbers...',
  'validating-fields': 'Checking for field errors...',
  ready: 'Ready',
};

const phaseProgress: Record<InitPhase, number> = {
  idle: 0,
  'loading-options': 20,
  'loading-templates': 40,
  'validating-upcs': 60,
  'validating-fields': 80,
  ready: 100,
};

export const InitializingOverlay = ({ phase, message }: InitializingOverlayProps) => {
  const displayMessage = message || phaseMessages[phase];
  const progress = phaseProgress[phase];

  return (
    <div className="flex flex-col items-center justify-center h-[calc(100vh-9.5rem)] gap-6">
      <div className="flex flex-col items-center gap-4">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <div className="text-lg font-medium">{displayMessage}</div>
      </div>

      <div className="w-64">
        <Progress value={progress} className="h-2" />
      </div>

      <div className="text-sm text-muted-foreground">
        This may take a moment for large imports
      </div>
    </div>
  );
};
