{% extends "base.html" %}

{% block title %}Import Data - Makenot.work{% endblock %}
{% block body_attrs %} class="padded-page import-page"{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="container">
        <a href="/dashboard" class="back-link">&larr; Back to Dashboard</a>

        <header>
            <h1 class="page-title">Import Data</h1>
            <p class="subtitle">Import subscribers, items, and transaction history from other platforms.</p>
        </header>

        <div class="import-form">
            <div class="form-group">
                <label for="import-project">Project</label>
                <select id="import-project">
                    {% for p in projects %}
                    <option value="{{ p.id }}">{{ p.title }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label for="import-file">CSV File</label>
                <input type="file" id="import-file" accept=".csv,text/csv">
            </div>

            <div class="csv-preview hidden" id="csv-preview">
                <p class="import-preview-label">Preview (first 3 rows):</p>
                <table id="preview-table"></table>
            </div>

            <div class="column-mapping hidden" id="column-mapping">
                <p class="import-mapping-label">Map CSV columns to fields:</p>
                <div class="mapping-row">
                    <label>Email</label>
                    <select id="map-email"><option value="">-- skip --</option></select>
                </div>
                <div class="mapping-row">
                    <label>Name</label>
                    <select id="map-name"><option value="">-- skip --</option></select>
                </div>
                <div class="mapping-row">
                    <label>Amount</label>
                    <select id="map-amount"><option value="">-- skip --</option></select>
                </div>
                <div class="mapping-row">
                    <label>Date</label>
                    <select id="map-date"><option value="">-- skip --</option></select>
                </div>
                <div class="mapping-row">
                    <label>Item Title</label>
                    <select id="map-item-title"><option value="">-- skip --</option></select>
                </div>
                <div class="mapping-row">
                    <label>Tier</label>
                    <select id="map-tier"><option value="">-- skip --</option></select>
                </div>
                <div class="mapping-row">
                    <label>Status</label>
                    <select id="map-status"><option value="">-- skip --</option></select>
                </div>

                <button id="start-import-btn" class="import-start-btn">Start Import</button>
            </div>
        </div>

        <div class="import-progress hidden" id="import-progress">
            <p class="import-progress-label">Importing...</p>
            <div class="progress-bar-container my-4">
                <div class="progress-bar progress-bar--highlight" id="progress-bar"></div>
            </div>
            <div class="progress-stats">
                <span>Processed: <span class="stat-value" id="stat-processed">0</span></span>
                <span>Created: <span class="stat-value" id="stat-created">0</span></span>
                <span>Skipped: <span class="stat-value" id="stat-skipped">0</span></span>
            </div>
        </div>

        <div class="import-result hidden" id="import-result"></div>

        {% if !jobs.is_empty() %}
        <div class="import-history">
            <h2 class="import-history-heading">Import History</h2>
            <table class="history-table">
                <thead>
                    <tr>
                        <th>Source</th>
                        <th>Status</th>
                        <th>Rows</th>
                        <th>Created</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    {% for j in jobs %}
                    <tr>
                        <td>{{ j.source }}</td>
                        <td><span class="status-badge {{ j.status }}">{{ j.status }}</span></td>
                        <td>{{ j.total_rows }}</td>
                        <td>{{ j.created_rows }}</td>
                        <td>{{ j.created_at.format("%Y-%m-%d %H:%M") }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}

        <div class="import-note">
            <h3>Supported Formats</h3>
            <p>Currently supports generic CSV files. Upload a CSV with subscriber emails, transaction amounts, or item data, then map columns to the right fields. Coming soon: direct Substack, Ghost, Gumroad, Bandcamp, and Patreon imports.</p>
        </div>
    </div>

    <script>
    (function() {
        const fileInput = document.getElementById('import-file');
        const previewEl = document.getElementById('csv-preview');
        const previewTable = document.getElementById('preview-table');
        const mappingEl = document.getElementById('column-mapping');
        const startBtn = document.getElementById('start-import-btn');
        const progressEl = document.getElementById('import-progress');
        const resultEl = document.getElementById('import-result');

        let csvBase64 = '';
        let csvHeaders = [];

        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(ev) {
                const text = ev.target.result;
                csvBase64 = btoa(unescape(encodeURIComponent(text)));

                const lines = text.split('\n').filter(l => l.trim());
                if (lines.length < 2) {
                    alert('CSV must have a header row and at least one data row.');
                    return;
                }

                csvHeaders = parseCSVLine(lines[0]);

                // Build preview table
                let html = '<thead><tr>';
                csvHeaders.forEach(h => { html += '<th>' + escapeHtml(h) + '</th>'; });
                html += '</tr></thead><tbody>';
                for (let i = 1; i < Math.min(lines.length, 4); i++) {
                    const cols = parseCSVLine(lines[i]);
                    html += '<tr>';
                    csvHeaders.forEach((_, ci) => {
                        html += '<td>' + escapeHtml(cols[ci] || '') + '</td>';
                    });
                    html += '</tr>';
                }
                html += '</tbody>';
                previewTable.innerHTML = html;
                previewEl.classList.remove('hidden');

                // Populate mapping selects
                const selects = mappingEl.querySelectorAll('select');
                selects.forEach(sel => {
                    const current = sel.value;
                    sel.innerHTML = '<option value="">-- skip --</option>';
                    csvHeaders.forEach((h, i) => {
                        const opt = document.createElement('option');
                        opt.value = i;
                        opt.textContent = h;
                        sel.appendChild(opt);
                    });
                    // Auto-detect common column names
                    autoDetectColumn(sel, csvHeaders);
                });
                mappingEl.classList.remove('hidden');
            };
            reader.readAsText(file);
        });

        function autoDetectColumn(select, headers) {
            const id = select.id;
            const lower = headers.map(h => h.toLowerCase().trim());
            const patterns = {
                'map-email': ['email', 'e-mail', 'email_address', 'subscriber_email'],
                'map-name': ['name', 'full_name', 'display_name', 'subscriber_name'],
                'map-amount': ['amount', 'total', 'price', 'payment', 'lifetime_amount'],
                'map-date': ['date', 'created_at', 'joined', 'start_date', 'signup_date'],
                'map-item-title': ['item', 'product', 'title', 'item_title', 'product_name'],
                'map-tier': ['tier', 'plan', 'level', 'membership'],
                'map-status': ['status', 'state', 'active']
            };
            const p = patterns[id] || [];
            for (let i = 0; i < lower.length; i++) {
                if (p.includes(lower[i])) {
                    select.value = i;
                    return;
                }
            }
        }

        startBtn.addEventListener('click', function() {
            const projectId = document.getElementById('import-project').value;
            if (!csvBase64) {
                alert('Please select a CSV file first.');
                return;
            }

            const mapping = {};
            const mapEmail = document.getElementById('map-email').value;
            const mapName = document.getElementById('map-name').value;
            const mapAmount = document.getElementById('map-amount').value;
            const mapDate = document.getElementById('map-date').value;
            const mapItem = document.getElementById('map-item-title').value;
            const mapTier = document.getElementById('map-tier').value;
            const mapStatus = document.getElementById('map-status').value;

            if (mapEmail) mapping.email = parseInt(mapEmail);
            if (mapName) mapping.name = parseInt(mapName);
            if (mapAmount) mapping.amount = parseInt(mapAmount);
            if (mapDate) mapping.date = parseInt(mapDate);
            if (mapItem) mapping.item_title = parseInt(mapItem);
            if (mapTier) mapping.tier = parseInt(mapTier);
            if (mapStatus) mapping.status = parseInt(mapStatus);

            if (!mapping.email && !mapping.amount) {
                alert('Please map at least an email or amount column.');
                return;
            }

            startBtn.disabled = true;
            startBtn.textContent = 'Starting...';

            fetch('/api/users/me/import', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': '{{ csrf_token.as_deref().unwrap_or_default() }}'
                },
                body: JSON.stringify({
                    project_id: projectId,
                    source: 'generic_csv',
                    csv_data: csvBase64,
                    column_mapping: mapping
                })
            })
            .then(r => r.json())
            .then(data => {
                if (data.error) {
                    resultEl.className = 'import-result error';
                    resultEl.textContent = data.error;
                    startBtn.disabled = false;
                    startBtn.textContent = 'Start Import';
                    return;
                }
                progressEl.classList.remove('hidden');
                pollProgress(data.job_id);
            })
            .catch(err => {
                resultEl.className = 'import-result error';
                resultEl.textContent = 'Failed to start import: ' + err.message;
                startBtn.disabled = false;
                startBtn.textContent = 'Start Import';
            });
        });

        function pollProgress(jobId) {
            const interval = setInterval(() => {
                fetch('/api/users/me/import/' + jobId)
                    .then(r => r.json())
                    .then(data => {
                        const pct = data.total_rows > 0
                            ? Math.round((data.processed_rows / data.total_rows) * 100)
                            : 0;
                        document.getElementById('progress-bar').style.width = pct + '%';
                        document.getElementById('stat-processed').textContent = data.processed_rows;
                        document.getElementById('stat-created').textContent = data.created_rows;
                        document.getElementById('stat-skipped').textContent = data.skipped_rows;

                        if (data.status === 'completed' || data.status === 'failed') {
                            clearInterval(interval);
                            progressEl.classList.add('hidden');

                            resultEl.classList.remove('hidden');
                            if (data.status === 'completed') {
                                resultEl.className = 'import-result success';
                                resultEl.innerHTML = '<strong>Import complete.</strong> ' +
                                    data.created_rows + ' created, ' +
                                    data.skipped_rows + ' skipped.';
                            } else {
                                resultEl.className = 'import-result error';
                                resultEl.innerHTML = '<strong>Import failed.</strong>';
                            }
                            if (data.error_log) {
                                resultEl.innerHTML += '<div class="error-log">' +
                                    escapeHtml(data.error_log) + '</div>';
                            }
                            startBtn.disabled = false;
                            startBtn.textContent = 'Start Import';
                        }
                    });
            }, 2000);
        }

        function parseCSVLine(line) {
            const result = [];
            let current = '';
            let inQuotes = false;
            for (let i = 0; i < line.length; i++) {
                const ch = line[i];
                if (inQuotes) {
                    if (ch === '"' && line[i+1] === '"') { current += '"'; i++; }
                    else if (ch === '"') { inQuotes = false; }
                    else { current += ch; }
                } else {
                    if (ch === '"') { inQuotes = true; }
                    else if (ch === ',') { result.push(current.trim()); current = ''; }
                    else { current += ch; }
                }
            }
            result.push(current.trim());
            return result;
        }

        function escapeHtml(s) {
            return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
        }
    })();
    </script>
{% endblock %}