/**
 * CSV/Bank Statement Import Module for FINA PWA
 * Handles file upload, parsing, duplicate detection, and category mapping
 */

class CSVImporter {
    constructor() {
        this.parsedTransactions = [];
        this.duplicates = [];
        this.categoryMapping = {};
        this.userCategories = [];
        this.currentStep = 1;
    }

    /**
     * Initialize the importer
     */
    async init() {
        await this.loadUserProfile();
        await this.loadUserCategories();
        this.renderImportUI();
        this.setupEventListeners();
    }

    /**
     * Load user profile to get currency
     */
    async loadUserProfile() {
        try {
            const response = await window.apiCall('/api/settings/profile');
            window.userCurrency = response.profile?.currency || 'USD';
        } catch (error) {
            console.error('Failed to load user profile:', error);
            window.userCurrency = 'USD';
        }
    }

    /**
     * Load user's categories from API
     */
    async loadUserCategories() {
        try {
            const response = await window.apiCall('/api/expenses/categories');
            this.userCategories = response.categories || [];
        } catch (error) {
            console.error('Failed to load categories:', error);
            this.userCategories = [];
            window.showToast(window.getTranslation('import.errorLoadingCategories', 'Failed to load categories'), 'error');
        }
    }

    /**
     * Setup event listeners
     */
    setupEventListeners() {
        // File input change
        const fileInput = document.getElementById('csvFileInput');
        if (fileInput) {
            fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
        }

        // Drag and drop
        const dropZone = document.getElementById('csvDropZone');
        if (dropZone) {
            dropZone.addEventListener('dragover', (e) => {
                e.preventDefault();
                dropZone.classList.add('border-primary', 'bg-primary/5');
            });

            dropZone.addEventListener('dragleave', () => {
                dropZone.classList.remove('border-primary', 'bg-primary/5');
            });

            dropZone.addEventListener('drop', (e) => {
                e.preventDefault();
                dropZone.classList.remove('border-primary', 'bg-primary/5');
                
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    this.handleFile(files[0]);
                }
            });
        }
    }

    /**
     * Render the import UI
     */
    renderImportUI() {
        const container = document.getElementById('importContainer');
        if (!container) return;

        container.innerHTML = `
            <div class="max-w-4xl mx-auto">
                <!-- Progress Steps -->
                <div class="mb-8">
                    <div class="flex items-center justify-between">
                        ${this.renderStep(1, 'import.stepUpload', 'Upload CSV')}
                        ${this.renderStep(2, 'import.stepReview', 'Review')}
                        ${this.renderStep(3, 'import.stepMap', 'Map Categories')}
                        ${this.renderStep(4, 'import.stepImport', 'Import')}
                    </div>
                </div>

                <!-- Step Content -->
                <div id="stepContent" class="bg-white dark:bg-[#0f1921] rounded-xl p-6 border border-border-light dark:border-[#233648]">
                    ${this.renderCurrentStep()}
                </div>
            </div>
        `;
    }

    /**
     * Render a progress step
     */
    renderStep(stepNum, translationKey, fallback) {
        const isActive = this.currentStep === stepNum;
        const isComplete = this.currentStep > stepNum;
        
        return `
            <div class="flex items-center ${stepNum < 4 ? 'flex-1' : ''}">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-semibold
                                ${isComplete ? 'bg-green-500 text-white' : ''}
                                ${isActive ? 'bg-primary text-white' : ''}
                                ${!isActive && !isComplete ? 'bg-slate-200 dark:bg-[#233648] text-text-muted' : ''}">
                        ${isComplete ? '<span class="material-symbols-outlined text-[20px]">check</span>' : stepNum}
                    </div>
                    <span class="ml-2 text-sm font-medium ${isActive ? 'text-primary' : 'text-text-muted dark:text-[#92adc9]'}">
                        ${window.getTranslation(translationKey, fallback)}
                    </span>
                </div>
                ${stepNum < 4 ? '<div class="flex-1 h-0.5 bg-slate-200 dark:bg-[#233648] mx-4"></div>' : ''}
            </div>
        `;
    }

    /**
     * Render content for current step
     */
    renderCurrentStep() {
        switch (this.currentStep) {
            case 1:
                return this.renderUploadStep();
            case 2:
                return this.renderReviewStep();
            case 3:
                return this.renderMappingStep();
            case 4:
                return this.renderImportStep();
            default:
                return '';
        }
    }

    /**
     * Render upload step
     */
    renderUploadStep() {
        return `
            <div class="text-center">
                <h2 class="text-2xl font-bold mb-4 text-text-main dark:text-white">
                    ${window.getTranslation('import.uploadTitle', 'Upload CSV File')}
                </h2>
                <p class="text-text-muted dark:text-[#92adc9] mb-6">
                    ${window.getTranslation('import.uploadDesc', 'Upload your bank statement or expense CSV file')}
                </p>

                <!-- Drop Zone -->
                <div id="csvDropZone" 
                     class="border-2 border-dashed border-border-light dark:border-[#233648] rounded-xl p-12 cursor-pointer hover:border-primary/50 transition-colors"
                     onclick="document.getElementById('csvFileInput').click()">
                    <span class="material-symbols-outlined text-6xl text-text-muted dark:text-[#92adc9] mb-4">cloud_upload</span>
                    <p class="text-lg font-medium text-text-main dark:text-white mb-2">
                        ${window.getTranslation('import.dragDrop', 'Drag and drop your CSV file here')}
                    </p>
                    <p class="text-sm text-text-muted dark:text-[#92adc9] mb-4">
                        ${window.getTranslation('import.orClick', 'or click to browse')}
                    </p>
                    <input type="file" 
                           id="csvFileInput" 
                           accept=".csv" 
                           class="hidden">
                </div>

                <!-- Format Info -->
                <div class="mt-8 text-left bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
                    <h3 class="font-semibold text-text-main dark:text-white mb-2 flex items-center">
                        <span class="material-symbols-outlined text-[20px] mr-2">info</span>
                        ${window.getTranslation('import.supportedFormats', 'Supported Formats')}
                    </h3>
                    <ul class="text-sm text-text-muted dark:text-[#92adc9] space-y-1">
                        <li>• ${window.getTranslation('import.formatRequirement1', 'CSV files with Date, Description, and Amount columns')}</li>
                        <li>• ${window.getTranslation('import.formatRequirement2', 'Supports comma, semicolon, or tab delimiters')}</li>
                        <li>• ${window.getTranslation('import.formatRequirement3', 'Date formats: DD/MM/YYYY, YYYY-MM-DD, etc.')}</li>
                        <li>• ${window.getTranslation('import.formatRequirement4', 'Maximum file size: 10MB')}</li>
                    </ul>
                </div>
            </div>
        `;
    }

    /**
     * Handle file selection
     */
    async handleFileSelect(event) {
        const file = event.target.files[0];
        if (file) {
            await this.handleFile(file);
        }
    }

    /**
     * Handle file upload and parsing
     */
    async handleFile(file) {
        // Validate file
        if (!file.name.toLowerCase().endsWith('.csv')) {
            window.showToast(window.getTranslation('import.errorInvalidFile', 'Please select a CSV file'), 'error');
            return;
        }

        if (file.size > 10 * 1024 * 1024) {
            window.showToast(window.getTranslation('import.errorFileTooLarge', 'File too large. Maximum 10MB'), 'error');
            return;
        }

        // Show loading
        const stepContent = document.getElementById('stepContent');
        stepContent.innerHTML = `
            <div class="text-center py-12">
                <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary mb-4"></div>
                <p class="text-text-muted dark:text-[#92adc9]">${window.getTranslation('import.parsing', 'Parsing CSV file...')}</p>
            </div>
        `;

        try {
            // Upload and parse
            const formData = new FormData();
            formData.append('file', file);

            const response = await fetch('/api/import/parse-csv', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (!result.success) {
                throw new Error(result.error || 'Failed to parse CSV');
            }

            this.parsedTransactions = result.transactions;

            // Check for duplicates
            await this.checkDuplicates();

            // Move to review step
            this.currentStep = 2;
            this.renderImportUI();

        } catch (error) {
            console.error('Failed to parse CSV:', error);
            window.showToast(error.message || window.getTranslation('import.errorParsing', 'Failed to parse CSV file'), 'error');
            this.currentStep = 1;
            this.renderImportUI();
        }
    }

    /**
     * Check for duplicate transactions
     */
    async checkDuplicates() {
        try {
            const response = await fetch('/api/import/detect-duplicates', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    transactions: this.parsedTransactions
                })
            });

            const result = await response.json();

            if (result.success) {
                this.duplicates = result.duplicates || [];
                
                // Mark transactions as duplicates
                this.parsedTransactions.forEach((trans, idx) => {
                    const isDuplicate = this.duplicates.some(d => 
                        d.transaction.date === trans.date && 
                        d.transaction.amount === trans.amount &&
                        d.transaction.description === trans.description
                    );
                    this.parsedTransactions[idx].is_duplicate = isDuplicate;
                });
            }
        } catch (error) {
            console.error('Failed to check duplicates:', error);
        }
    }

    /**
     * Render review step
     */
    renderReviewStep() {
        const duplicateCount = this.parsedTransactions.filter(t => t.is_duplicate).length;
        const newCount = this.parsedTransactions.length - duplicateCount;

        return `
            <div>
                <h2 class="text-2xl font-bold mb-4 text-text-main dark:text-white">
                    ${window.getTranslation('import.reviewTitle', 'Review Transactions')}
                </h2>
                
                <!-- Summary -->
                <div class="grid grid-cols-3 gap-4 mb-6">
                    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
                        <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">${this.parsedTransactions.length}</div>
                        <div class="text-sm text-text-muted dark:text-[#92adc9]">${window.getTranslation('import.totalFound', 'Total Found')}</div>
                    </div>
                    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
                        <div class="text-2xl font-bold text-green-600 dark:text-green-400">${newCount}</div>
                        <div class="text-sm text-text-muted dark:text-[#92adc9]">${window.getTranslation('import.newTransactions', 'New')}</div>
                    </div>
                    <div class="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-4">
                        <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">${duplicateCount}</div>
                        <div class="text-sm text-text-muted dark:text-[#92adc9]">${window.getTranslation('import.duplicates', 'Duplicates')}</div>
                    </div>
                </div>

                <!-- Transactions List -->
                <div class="mb-6 max-h-96 overflow-y-auto">
                    ${this.parsedTransactions.map((trans, idx) => this.renderTransactionRow(trans, idx)).join('')}
                </div>

                <!-- Actions -->
                <div class="flex justify-between">
                    <button onclick="csvImporter.goToStep(1)" 
                            class="px-6 py-2 border border-border-light dark:border-[#233648] rounded-lg text-text-main dark:text-white hover:bg-slate-100 dark:hover:bg-[#111a22]">
                        ${window.getTranslation('common.back', 'Back')}
                    </button>
                    <button onclick="csvImporter.goToStep(3)" 
                            class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90">
                        ${window.getTranslation('import.nextMapCategories', 'Next: Map Categories')}
                    </button>
                </div>
            </div>
        `;
    }

    /**
     * Render a transaction row
     */
    renderTransactionRow(trans, idx) {
        const isDuplicate = trans.is_duplicate;
        
        return `
            <div class="flex items-center justify-between p-3 border-b border-border-light dark:border-[#233648] ${isDuplicate ? 'bg-yellow-50/50 dark:bg-yellow-900/10' : ''}">
                <div class="flex items-center gap-4 flex-1">
                    <input type="checkbox" 
                           id="trans_${idx}" 
                           ${isDuplicate ? '' : 'checked'}
                           onchange="csvImporter.toggleTransaction(${idx})"
                           class="w-5 h-5 rounded border-border-light dark:border-[#233648]">
                    <div class="flex-1">
                        <div class="flex items-center gap-2">
                            <span class="font-medium text-text-main dark:text-white">${trans.description}</span>
                            ${isDuplicate ? '<span class="px-2 py-0.5 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs rounded-full">' + window.getTranslation('import.duplicate', 'Duplicate') + '</span>' : ''}
                        </div>
                        <div class="text-sm text-text-muted dark:text-[#92adc9]">${trans.date}</div>
                    </div>
                </div>
                <div class="font-semibold text-text-main dark:text-white">${window.formatCurrency(trans.amount, trans.currency || window.userCurrency || 'GBP')}</div>
            </div>
        `;
    }

    /**
     * Check for missing categories and offer to create them
     */
    async checkAndCreateCategories() {
        const selectedTransactions = this.parsedTransactions.filter(t => {
            const checkbox = document.getElementById(`trans_${this.parsedTransactions.indexOf(t)}`);
            return !checkbox || checkbox.checked;
        });

        // Get unique bank categories (skip generic payment types)
        const paymentTypes = ['pot transfer', 'card payment', 'direct debit', 'monzo_paid', 
                             'faster payment', 'bacs (direct credit)', 'bacs', 'standing order'];
        const bankCategories = new Set();
        selectedTransactions.forEach(trans => {
            if (trans.bank_category && trans.bank_category.trim()) {
                const catLower = trans.bank_category.trim().toLowerCase();
                // Skip if it's a generic payment type
                if (!paymentTypes.includes(catLower)) {
                    bankCategories.add(trans.bank_category.trim());
                }
            }
        });

        if (bankCategories.size === 0) {
            return; // No bank categories to create
        }

        // Find which categories don't exist
        const existingCatNames = new Set(this.userCategories.map(c => c.name.toLowerCase()));
        const missingCategories = Array.from(bankCategories).filter(
            cat => !existingCatNames.has(cat.toLowerCase())
        );

        if (missingCategories.length > 0) {
            // Show confirmation dialog
            const confirmCreate = confirm(
                window.getTranslation(
                    'import.createMissingCategories',
                    `Found ${missingCategories.length} new categories from your CSV:\n\n${missingCategories.join('\n')}\n\nWould you like to create these categories automatically?`
                )
            );

            if (confirmCreate) {
                try {
                    const response = await window.apiCall('/api/import/create-categories', {
                        method: 'POST',
                        body: JSON.stringify({
                            bank_categories: missingCategories
                        })
                    });

                    if (response.success) {
                        window.showToast(
                            window.getTranslation(
                                'import.categoriesCreated',
                                `Created ${response.created.length} new categories`
                            ),
                            'success'
                        );

                        // Update category mapping with new categories
                        Object.assign(this.categoryMapping, response.mapping);

                        // Reload categories
                        await this.loadUserCategories();
                        this.renderImportUI();
                        this.setupEventListeners();
                    }
                } catch (error) {
                    console.error('Failed to create categories:', error);
                    window.showToast(
                        window.getTranslation('import.errorCreatingCategories', 'Failed to create categories'),
                        'error'
                    );
                }
            }
        }
    }

    /**
     * Toggle transaction selection
     */
    toggleTransaction(idx) {
        const checkbox = document.getElementById(`trans_${idx}`);
        this.parsedTransactions[idx].selected = checkbox.checked;
    }

    /**
     * Render mapping step
     */
    renderMappingStep() {
        const selectedTransactions = this.parsedTransactions.filter(t => {
            const checkbox = document.getElementById(`trans_${this.parsedTransactions.indexOf(t)}`);
            return !checkbox || checkbox.checked;
        });

        // Get unique bank categories or descriptions for mapping (skip payment types)
        const paymentTypes = ['pot transfer', 'card payment', 'direct debit', 'monzo_paid', 
                             'faster payment', 'bacs (direct credit)', 'bacs', 'standing order'];
        const needsMapping = new Set();
        selectedTransactions.forEach(trans => {
            if (trans.bank_category) {
                const catLower = trans.bank_category.toLowerCase();
                // Skip generic payment types
                if (!paymentTypes.includes(catLower)) {
                    needsMapping.add(trans.bank_category);
                }
            }
        });

        return `
            <div>
                <h2 class="text-2xl font-bold mb-4 text-text-main dark:text-white">
                    ${window.getTranslation('import.mapCategories', 'Map Categories')}
                </h2>
                <p class="text-text-muted dark:text-[#92adc9] mb-6">
                    ${window.getTranslation('import.mapCategoriesDesc', 'Assign categories to your transactions')}
                </p>

                ${needsMapping.size > 0 ? `
                    <div class="mb-6">
                        <h3 class="font-semibold mb-4 text-text-main dark:text-white">${window.getTranslation('import.bankCategoryMapping', 'Bank Category Mapping')}</h3>
                        ${Array.from(needsMapping).map(bankCat => this.renderCategoryMapping(bankCat)).join('')}
                    </div>
                ` : ''}

                <div class="mb-6">
                    <h3 class="font-semibold mb-4 text-text-main dark:text-white">${window.getTranslation('import.defaultCategory', 'Default Category')}</h3>
                    <select id="defaultCategory" class="w-full px-4 py-2 border border-border-light dark:border-[#233648] rounded-lg bg-white dark:bg-[#111a22] text-text-main dark:text-white">
                        ${this.userCategories.map(cat => `
                            <option value="${cat.id}">${cat.name}</option>
                        `).join('')}
                    </select>
                    <p class="text-xs text-text-muted dark:text-[#92adc9] mt-2">
                        ${window.getTranslation('import.defaultCategoryDesc', 'Used for transactions without bank category')}
                    </p>
                </div>

                <!-- Actions -->
                <div class="flex justify-between">
                    <button onclick="csvImporter.goToStep(2)" 
                            class="px-6 py-2 border border-border-light dark:border-[#233648] rounded-lg text-text-main dark:text-white hover:bg-slate-100 dark:hover:bg-[#111a22]">
                        ${window.getTranslation('common.back', 'Back')}
                    </button>
                    <button onclick="csvImporter.startImport()" 
                            class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 flex items-center gap-2">
                        <span class="material-symbols-outlined text-[20px]">download</span>
                        ${window.getTranslation('import.startImport', 'Import Transactions')}
                    </button>
                </div>
            </div>
        `;
    }

    /**
     * Render category mapping dropdown
     */
    renderCategoryMapping(bankCategory) {
        return `
            <div class="mb-4 flex items-center gap-4">
                <div class="flex-1">
                    <div class="font-medium text-text-main dark:text-white mb-1">${bankCategory}</div>
                    <div class="text-sm text-text-muted dark:text-[#92adc9]">${window.getTranslation('import.bankCategory', 'Bank Category')}</div>
                </div>
                <span class="text-text-muted">→</span>
                <select id="mapping_${bankCategory.replace(/[^a-zA-Z0-9]/g, '_')}" 
                        onchange="csvImporter.setMapping('${bankCategory}', this.value)"
                        class="flex-1 px-4 py-2 border border-border-light dark:border-[#233648] rounded-lg bg-white dark:bg-[#111a22] text-text-main dark:text-white">
                    ${this.userCategories.map(cat => `
                        <option value="${cat.id}">${cat.name}</option>
                    `).join('')}
                </select>
            </div>
        `;
    }

    /**
     * Set category mapping
     */
    setMapping(bankCategory, categoryId) {
        this.categoryMapping[bankCategory] = parseInt(categoryId);
    }

    /**
     * Start import process
     */
    async startImport() {
        const selectedTransactions = this.parsedTransactions.filter((t, idx) => {
            const checkbox = document.getElementById(`trans_${idx}`);
            return !checkbox || checkbox.checked;
        });

        if (selectedTransactions.length === 0) {
            window.showToast(window.getTranslation('import.noTransactionsSelected', 'No transactions selected'), 'error');
            return;
        }

        // Show loading
        this.currentStep = 4;
        this.renderImportUI();

        try {
            const response = await window.apiCall('/api/import/import', {
                method: 'POST',
                body: JSON.stringify({
                    transactions: selectedTransactions,
                    category_mapping: this.categoryMapping,
                    skip_duplicates: true
                })
            });

            if (response.success) {
                this.renderImportComplete(response);
            } else {
                throw new Error(response.error || 'Import failed');
            }
        } catch (error) {
            console.error('Import failed:', error);
            window.showToast(error.message || window.getTranslation('import.errorImporting', 'Failed to import transactions'), 'error');
            this.goToStep(3);
        }
    }

    /**
     * Render import complete step
     */
    renderImportStep() {
        return `
            <div class="text-center py-12">
                <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary mb-4"></div>
                <p class="text-text-muted dark:text-[#92adc9]">${window.getTranslation('import.importing', 'Importing transactions...')}</p>
            </div>
        `;
    }

    /**
     * Render import complete
     */
    renderImportComplete(result) {
        const stepContent = document.getElementById('stepContent');
        const hasErrors = result.errors && result.errors.length > 0;
        
        stepContent.innerHTML = `
            <div class="text-center">
                <div class="inline-block w-20 h-20 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-6">
                    <span class="material-symbols-outlined text-5xl text-green-600 dark:text-green-400">check_circle</span>
                </div>
                
                <h2 class="text-2xl font-bold mb-4 text-text-main dark:text-white">
                    ${window.getTranslation('import.importComplete', 'Import Complete!')}
                </h2>
                
                <div class="grid grid-cols-3 gap-4 mb-8 max-w-2xl mx-auto">
                    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
                        <div class="text-2xl font-bold text-green-600 dark:text-green-400">${result.imported_count}</div>
                        <div class="text-sm text-text-muted dark:text-[#92adc9]">${window.getTranslation('import.imported', 'Imported')}</div>
                    </div>
                    <div class="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-4">
                        <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">${result.skipped_count}</div>
                        <div class="text-sm text-text-muted dark:text-[#92adc9]">${window.getTranslation('import.skipped', 'Skipped')}</div>
                    </div>
                    <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
                        <div class="text-2xl font-bold text-red-600 dark:text-red-400">${result.error_count}</div>
                        <div class="text-sm text-text-muted dark:text-[#92adc9]">${window.getTranslation('import.errors', 'Errors')}</div>
                    </div>
                </div>

                ${hasErrors ? `
                    <div class="mb-6 text-left max-w-2xl mx-auto">
                        <details class="bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-900/20 rounded-lg p-4">
                            <summary class="cursor-pointer font-semibold text-red-600 dark:text-red-400 mb-2">
                                ${window.getTranslation('import.viewErrors', 'View Error Details')} (${result.error_count})
                            </summary>
                            <div class="mt-4 space-y-2 max-h-64 overflow-y-auto">
                                ${result.errors.slice(0, 20).map((err, idx) => `
                                    <div class="text-sm p-3 bg-white dark:bg-[#111a22] border border-red-100 dark:border-red-900/30 rounded">
                                        <div class="font-medium text-text-main dark:text-white mb-1">
                                            ${err.transaction?.description || 'Transaction ' + (idx + 1)}
                                        </div>
                                        <div class="text-red-600 dark:text-red-400 text-xs">${err.error}</div>
                                    </div>
                                `).join('')}
                                ${result.errors.length > 20 ? `
                                    <div class="text-sm text-text-muted dark:text-[#92adc9] italic p-2">
                                        ... and ${result.errors.length - 20} more errors
                                    </div>
                                ` : ''}
                            </div>
                        </details>
                    </div>
                ` : ''}

                <div class="flex gap-4 justify-center">
                    <button onclick="window.location.href='/transactions'" 
                            class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90">
                        ${window.getTranslation('import.viewTransactions', 'View Transactions')}
                    </button>
                    <button onclick="csvImporter.reset()" 
                            class="px-6 py-2 border border-border-light dark:border-[#233648] rounded-lg text-text-main dark:text-white hover:bg-slate-100 dark:hover:bg-[#111a22]">
                        ${window.getTranslation('import.importAnother', 'Import Another File')}
                    </button>
                </div>
            </div>
        `;
    }

    /**
     * Go to a specific step
     */
    async goToStep(step) {
        this.currentStep = step;
        
        // If going to mapping step, check for missing categories
        if (step === 3) {
            await this.checkAndCreateCategories();
        }
        
        this.renderImportUI();
        this.setupEventListeners();
    }

    /**
     * Reset importer
     */
    reset() {
        this.parsedTransactions = [];
        this.duplicates = [];
        this.categoryMapping = {};
        this.currentStep = 1;
        this.renderImportUI();
    }
}

// Create global instance
window.csvImporter = new CSVImporter();

// Initialize on import page
if (window.location.pathname === '/import' || window.location.pathname.includes('import')) {
    document.addEventListener('DOMContentLoaded', () => {
        window.csvImporter.init();
    });
}