// ============================================
// Upload Wizard — 5-Step Upload Flow
// ============================================

const UploadWizard = {
    currentStep: 1,
    uploadedFiles: [],
    mappings: [],

    init() {
        this.renderWizardSteps();
        this.bindEvents();
    },

    renderWizardSteps() {
        const container = Helpers.$('#wizard-steps');
        if (!container) return;

        container.innerHTML = MockData.wizardSteps.map(ws => `
            <div class="wizard-step wizard-step--${ws.step === 1 ? 'active' : ''}" data-step="${ws.step}">
                <div class="wizard-step__number">${ws.step}</div>
                <span class="wizard-step__label">${ws.label}</span>
            </div>
        `).join('');
    },

    bindEvents() {
        // Drop zone
        const dropzone = Helpers.$('#upload-dropzone');
        if (dropzone) {
            dropzone.addEventListener('click', () => this.simulateFileSelect());
        }

        // Select folder button
        const selectBtn = Helpers.$('#btn-select-folder');
        if (selectBtn) {
            selectBtn.addEventListener('click', () => this.simulateFileSelect());
        }

        // Wizard navigation
        Helpers.$('#btn-wizard-prev').addEventListener('click', () => this.prevStep());
        Helpers.$('#btn-wizard-next').addEventListener('click', () => this.nextStep());

        // Compliance checkbox
        const checkbox = Helpers.$('#compliance-checkbox');
        if (checkbox) {
            checkbox.addEventListener('change', () => {
                Helpers.$('#btn-submit').disabled = !checkbox.checked;
            });
        }

        // Submit button
        Helpers.$('#btn-submit').addEventListener('click', () => this.submitDataset());
    },

    simulateFileSelect() {
        // Simulate selecting a folder with images
        this.uploadedFiles = MockData.images.slice(0, 8);
        this.renderFileList();
        this.goToStep(2);
        Toast.show('Detected 8 images from 3 camera folders', 'success');
    },

    renderFileList() {
        const container = Helpers.$('#file-list');
        if (!container) return;

        container.classList.remove('hidden');

        container.innerHTML = `
            <div class="file-list__header">
                <h4>Detected Files (${this.uploadedFiles.length})</h4>
                <button class="btn btn--sm btn--outline" onclick="UploadWizard.clearFiles()">Clear All</button>
            </div>
        ` + this.uploadedFiles.map(img => `
            <div class="file-item">
                <div class="file-item__icon"><i class="fa-solid fa-image"></i></div>
                <div class="file-item__info">
                    <div class="file-item__name">${img.filename}</div>
                    <div class="file-item__size">${img.size} · ${img.camera}</div>
                </div>
                <div class="file-item__progress">
                    <div class="file-item__progress-bar" style="width: 100%"></div>
                </div>
            </div>
        `).join('');
    },

    clearFiles() {
        this.uploadedFiles = [];
        Helpers.$('#file-list').classList.add('hidden');
        this.goToStep(1);
    },

    renderCategoryMapping() {
        const container = Helpers.$('#mapping-list');
        if (!container) return;

        const folders = [
            { name: 'C5 — Side View', count: 3 },
            { name: 'C6 — Top View', count: 2 },
            { name: 'C8 — Side View 3', count: 1 }
        ];

        container.innerHTML = folders.map(f => `
            <div class="mapping-item">
                <div class="mapping-item__icon"><i class="fa-solid fa-folder"></i></div>
                <div class="mapping-item__info">
                    <div class="mapping-item__name">${f.name}</div>
                    <div class="mapping-item__count">${f.count} images</div>
                </div>
                <select class="form-select mapping-item__select">
                    <option value="">Select dataset...</option>
                    <option value="good" selected>Good / Reference</option>
                    <option value="d02">D02 — Fibres</option>
                    <option value="d07">D07 — Critical Defects</option>
                    <option value="d08">D08 — Trimming</option>
                </select>
            </div>
        `).join('');
    },

    renderSecurityPipeline() {
        const container = Helpers.$('#processing-pipeline');
        if (!container) return;

        container.innerHTML = MockData.pipelineSteps.map((ps, index) => {
            const status = index < 3 ? 'completed' : (index === 3 ? 'active' : '');
            return `
                <div class="pipeline-step pipeline-step--${status}">
                    <div class="pipeline-step__icon">
                        <i class="fa-solid ${ps.icon}"></i>
                    </div>
                    <span class="pipeline-step__label">${ps.label}</span>
                </div>
                ${index < MockData.pipelineSteps.length - 1 ? '<div class="pipeline-step__connector pipeline-step__connector--completed"></div>' : ''}
            `;
        }).join('');
    },

    renderCategoryBuckets() {
        const container = Helpers.$('#buckets-list');
        if (!container) return;

        const counts = {
            good: MockData.getCategoryCount(this.uploadedFiles, 'good'),
            d02: MockData.getCategoryCount(this.uploadedFiles, 'd02'),
            d07: MockData.getCategoryCount(this.uploadedFiles, 'd07'),
            d08: MockData.getCategoryCount(this.uploadedFiles, 'd08'),
            unsorted: MockData.getCategoryCount(this.uploadedFiles, 'unsorted')
        };

        container.innerHTML = `
            <div class="bucket-grid">
                <div class="bucket-card bucket-card--good">
                    <i class="fa-solid fa-check-circle bucket-card__icon"></i>
                    <div class="bucket-card__name">Good</div>
                    <div class="bucket-card__count">${counts.good}</div>
                </div>
                <div class="bucket-card bucket-card--bad">
                    <i class="fa-solid fa-exclamation-triangle bucket-card__icon"></i>
                    <div class="bucket-card__name">D02 Fibres</div>
                    <div class="bucket-card__count">${counts.d02}</div>
                </div>
                <div class="bucket-card bucket-card--bad">
                    <i class="fa-solid fa-bomb bucket-card__icon"></i>
                    <div class="bucket-card__name">D07 Critical</div>
                    <div class="bucket-card__count">${counts.d07}</div>
                </div>
                <div class="bucket-card bucket-card--unsorted">
                    <i class="fa-solid fa-inbox bucket-card__icon"></i>
                    <div class="bucket-card__name">Unsorted</div>
                    <div class="bucket-card__count">${counts.unsorted}</div>
                </div>
            </div>
        `;
    },

    renderComplianceCheck() {
        const container = Helpers.$('#compliance-check');
        if (!container) return;

        container.innerHTML = `
            <div class="compliance-item">
                <i class="fa-solid fa-check-circle"></i>
                <span>Metadata validation passed for all files</span>
            </div>
            <div class="compliance-item">
                <i class="fa-solid fa-check-circle"></i>
                <span>No corrupted files detected</span>
            </div>
            <div class="compliance-item">
                <i class="fa-solid fa-check-circle"></i>
                <span>Image dimensions verified (${this.uploadedFiles.length} files)</span>
            </div>
            <div class="compliance-item">
                <i class="fa-solid fa-check-circle"></i>
                <span>No duplicates found</span>
            </div>
        `;
    },

    goToStep(step) {
        this.currentStep = step;

        // Update step indicators
        Helpers.$$('.wizard-step').forEach(ws => {
            const stepNum = parseInt(ws.dataset.step);
            ws.classList.remove('wizard-step--active', 'wizard-step--completed');
            if (stepNum === step) ws.classList.add('wizard-step--active');
            if (stepNum < step) ws.classList.add('wizard-step--completed');
        });

        // Show/hide panels
        Helpers.$$('.wizard-panel').forEach(panel => panel.classList.add('hidden'));
        const targetPanel = Helpers.$('#wizard-panel-' + step);
        if (targetPanel) targetPanel.classList.remove('hidden');

        // Update buttons
        Helpers.$('#btn-wizard-prev').disabled = step === 1;
        const nextBtn = Helpers.$('#btn-wizard-next');
        if (step === 5) {
            nextBtn.style.display = 'none';
        } else {
            nextBtn.style.display = '';
            nextBtn.innerHTML = 'Next <i class="fa-solid fa-arrow-right"></i>';
        }

        // Step-specific rendering
        if (step === 2) this.renderCategoryMapping();
        if (step === 3) this.renderSecurityPipeline();
        if (step === 4) this.renderCategoryBuckets();
        if (step === 5) this.renderComplianceCheck();
    },

    nextStep() {
        if (this.currentStep < 5) this.goToStep(this.currentStep + 1);
    },

    prevStep() {
        if (this.currentStep > 1) this.goToStep(this.currentStep - 1);
    },

    submitDataset() {
        Toast.show('Dataset submitted successfully! ' + this.uploadedFiles.length + ' images processed.', 'success');
        this.clearFiles();
        App.navigate('dashboard');
    }
};