motovaultpro/frontend/src/features/settings/components/ImportDialog.tsx

/**
 * @ai-summary Import dialog component
 * @ai-context Multi-step dialog: upload -> preview -> confirm -> progress -> results
 */

import React, { useState, useEffect } from 'react';
import { useImportPreview, useImportUserData } from '../hooks/useImportUserData';
import { ImportPreview, ImportResult } from '../types/import.types';

interface ImportDialogProps {
  isOpen: boolean;
  onClose: () => void;
  file: File | null;
}

type ImportStep = 'upload' | 'preview' | 'confirm' | 'progress' | 'results';

export const ImportDialog: React.FC<ImportDialogProps> = ({
  isOpen,
  onClose,
  file,
}) => {
  const [step, setStep] = useState<ImportStep>('upload');
  const [preview, setPreview] = useState<ImportPreview | null>(null);
  const [mode, setMode] = useState<'merge' | 'replace'>('merge');
  const [result, setResult] = useState<ImportResult | null>(null);

  const previewMutation = useImportPreview();
  const importMutation = useImportUserData();

  const handleGeneratePreview = async () => {
    if (!file) return;

    setStep('preview');
    try {
      const previewData = await previewMutation.mutateAsync(file);
      setPreview(previewData);
      setStep('confirm');
    } catch {
      // Error handled by mutation hook
      setStep('upload');
    }
  };

  const handleConfirmImport = async () => {
    if (!file) return;

    setStep('progress');
    try {
      const importResult = await importMutation.mutateAsync({ file, mode });
      setResult(importResult);
      setStep('results');
    } catch {
      // Error handled by mutation hook
      setStep('confirm');
    }
  };

  // Reset state when dialog opens
  useEffect(() => {
    if (isOpen && file) {
      setStep('upload');
      setPreview(null);
      setMode('merge');
      setResult(null);
      // Automatically start preview generation
      handleGeneratePreview();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen, file]);

  const handleClose = () => {
    setStep('upload');
    setPreview(null);
    setMode('merge');
    setResult(null);
    onClose();
  };

  if (!isOpen) return null;

  const formatBytes = (bytes: number): string => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-black/70 flex items-center justify-center z-50 p-4">
      <div className="bg-white dark:bg-scuro rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <h3 className="text-lg font-semibold text-slate-800 dark:text-avus mb-4">
          Import Data
        </h3>

        {/* Step 1: Upload */}
        {step === 'upload' && file && (
          <div>
            <p className="text-slate-600 dark:text-titanio mb-4">
              File selected: {file.name} ({formatBytes(file.size)})
            </p>
            <div className="flex justify-end space-x-3 mt-6">
              <button
                onClick={handleClose}
                className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg font-medium"
                style={{ minHeight: '44px', minWidth: '44px' }}
              >
                Cancel
              </button>
            </div>
          </div>
        )}

        {/* Step 2: Preview (Loading) */}
        {step === 'preview' && (
          <div>
            <div className="flex flex-col items-center justify-center py-8">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mb-4"></div>
              <p className="text-slate-600 dark:text-titanio">
                Analyzing import file...
              </p>
            </div>
          </div>
        )}

        {/* Step 3: Confirm */}
        {step === 'confirm' && preview && (
          <div>
            <div className="mb-6">
              <h4 className="font-semibold text-slate-800 dark:text-avus mb-3">
                Import Summary
              </h4>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-600 dark:text-titanio">Vehicles:</span>
                  <span className="font-medium text-slate-800 dark:text-avus">
                    {preview.manifest.contents.vehicles.count}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-600 dark:text-titanio">Fuel Logs:</span>
                  <span className="font-medium text-slate-800 dark:text-avus">
                    {preview.manifest.contents.fuelLogs.count}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-600 dark:text-titanio">
                    Maintenance Records:
                  </span>
                  <span className="font-medium text-slate-800 dark:text-avus">
                    {preview.manifest.contents.maintenanceRecords.count}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-600 dark:text-titanio">
                    Maintenance Schedules:
                  </span>
                  <span className="font-medium text-slate-800 dark:text-avus">
                    {preview.manifest.contents.maintenanceSchedules.count}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-600 dark:text-titanio">Documents:</span>
                  <span className="font-medium text-slate-800 dark:text-avus">
                    {preview.manifest.contents.documents.count}
                  </span>
                </div>
              </div>

              {preview.conflicts.vehicles > 0 && (
                <div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
                  <p className="text-sm text-yellow-800 dark:text-yellow-300">
                    <strong>Conflicts detected:</strong> {preview.conflicts.vehicles}{' '}
                    vehicle(s) with matching VINs already exist.
                  </p>
                </div>
              )}

              {preview.manifest.warnings.length > 0 && (
                <div className="mt-4 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
                  <p className="text-sm font-medium text-orange-800 dark:text-orange-300 mb-2">
                    Warnings:
                  </p>
                  <ul className="text-sm text-orange-700 dark:text-orange-400 list-disc list-inside">
                    {preview.manifest.warnings.map((warning, idx) => (
                      <li key={idx}>{warning}</li>
                    ))}
                  </ul>
                </div>
              )}
            </div>

            <div className="mb-6">
              <h4 className="font-semibold text-slate-800 dark:text-avus mb-3">
                Import Mode
              </h4>
              <div className="space-y-3">
                <label className="flex items-start space-x-3 cursor-pointer">
                  <input
                    type="radio"
                    name="mode"
                    value="merge"
                    checked={mode === 'merge'}
                    onChange={() => setMode('merge')}
                    className="mt-1"
                    style={{ minWidth: '20px', minHeight: '20px' }}
                  />
                  <div className="flex-1">
                    <p className="font-medium text-slate-800 dark:text-avus">
                      Merge (Recommended)
                    </p>
                    <p className="text-sm text-slate-600 dark:text-titanio">
                      Keep existing data and add new items. Update matching VINs.
                    </p>
                  </div>
                </label>
                <label className="flex items-start space-x-3 cursor-pointer">
                  <input
                    type="radio"
                    name="mode"
                    value="replace"
                    checked={mode === 'replace'}
                    onChange={() => setMode('replace')}
                    className="mt-1"
                    style={{ minWidth: '20px', minHeight: '20px' }}
                  />
                  <div className="flex-1">
                    <p className="font-medium text-slate-800 dark:text-avus">
                      Replace All
                    </p>
                    <p className="text-sm text-slate-600 dark:text-titanio">
                      Delete all existing data and replace with imported data.
                    </p>
                  </div>
                </label>
              </div>
            </div>

            <div className="flex justify-end space-x-3 mt-6">
              <button
                onClick={handleClose}
                className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg font-medium"
                style={{ minHeight: '44px', minWidth: '44px' }}
              >
                Cancel
              </button>
              <button
                onClick={handleConfirmImport}
                className="px-4 py-2 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors dark:bg-primary-600 dark:hover:bg-primary-700"
                style={{ minHeight: '44px', minWidth: '44px' }}
              >
                {mode === 'replace' ? 'Replace All Data' : 'Import'}
              </button>
            </div>
          </div>
        )}

        {/* Step 4: Progress */}
        {step === 'progress' && (
          <div>
            <div className="flex flex-col items-center justify-center py-8">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mb-4"></div>
              <p className="text-slate-600 dark:text-titanio">
                Importing data... This may take a few minutes.
              </p>
            </div>
          </div>
        )}

        {/* Step 5: Results */}
        {step === 'results' && result && (
          <div>
            <div className="mb-6">
              <div
                className={`p-4 rounded-lg mb-4 ${
                  result.success
                    ? 'bg-green-50 dark:bg-green-900/20'
                    : 'bg-red-50 dark:bg-red-900/20'
                }`}
              >
                <p
                  className={`font-semibold ${
                    result.success
                      ? 'text-green-800 dark:text-green-300'
                      : 'text-red-800 dark:text-red-300'
                  }`}
                >
                  {result.success
                    ? 'Import completed successfully!'
                    : 'Import completed with errors'}
                </p>
              </div>

              <h4 className="font-semibold text-slate-800 dark:text-avus mb-3">
                Import Summary
              </h4>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-600 dark:text-titanio">
                    Mode:
                  </span>
                  <span className="font-medium text-slate-800 dark:text-avus capitalize">
                    {result.mode}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-600 dark:text-titanio">
                    Imported:
                  </span>
                  <span className="font-medium text-green-600 dark:text-green-400">
                    {result.summary.imported}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-600 dark:text-titanio">
                    Updated:
                  </span>
                  <span className="font-medium text-blue-600 dark:text-blue-400">
                    {result.summary.updated}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-600 dark:text-titanio">
                    Skipped:
                  </span>
                  <span className="font-medium text-gray-600 dark:text-gray-400">
                    {result.summary.skipped}
                  </span>
                </div>
              </div>

              {result.summary.errors.length > 0 && (
                <div className="mt-4 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
                  <p className="text-sm font-medium text-red-800 dark:text-red-300 mb-2">
                    Errors:
                  </p>
                  <ul className="text-sm text-red-700 dark:text-red-400 list-disc list-inside max-h-40 overflow-y-auto">
                    {result.summary.errors.map((error, idx) => (
                      <li key={idx}>{error}</li>
                    ))}
                  </ul>
                </div>
              )}

              {result.warnings.length > 0 && (
                <div className="mt-4 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
                  <p className="text-sm font-medium text-orange-800 dark:text-orange-300 mb-2">
                    Warnings:
                  </p>
                  <ul className="text-sm text-orange-700 dark:text-orange-400 list-disc list-inside">
                    {result.warnings.map((warning, idx) => (
                      <li key={idx}>{warning}</li>
                    ))}
                  </ul>
                </div>
              )}
            </div>

            <div className="flex justify-end mt-6">
              <button
                onClick={handleClose}
                className="px-4 py-2 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors dark:bg-primary-600 dark:hover:bg-primary-700"
                style={{ minHeight: '44px', minWidth: '44px' }}
              >
                Done
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};