{% include "wizards/partials/step_nav.html" %}

<div class="wizard-step">
    <h2 class="subtitle-h2">Content</h2>
    <p class="step-description">
        {% if item_type == "text" %}Write your text content below.
        {% else if item_type == "audio" %}Upload your audio file.
        {% else if item_type == "video" %}Upload your video file.
        {% else if item_type == "bundle" %}Select items to include in this bundle.
        {% else %}Upload your file.
        {% endif %}
    </p>

    <form hx-post="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/content"
          hx-target="#wizard-step" hx-swap="innerHTML"
          hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/pricing">

        {% if item_type == "text" %}
        <div class="form-group">
            <label for="wiz-body">Content</label>
            <textarea id="wiz-body" name="body" rows="15" class="monospace-input"
                      placeholder="Write your content here... Markdown is supported.">{{ body }}</textarea>
            <div class="hint">Supports Markdown formatting.</div>
        </div>

        {% else if item_type == "audio" %}
        <div class="form-group">
            <label>Audio File</label>
            <div class="upload-area" id="audio-upload-area">
                <p>Drag and drop an audio file here, or click to browse</p>
                <p class="hint">MP3, WAV, FLAC, OGG, AAC</p>
                <input type="file" id="audio-file-input" class="sr-only"
                       accept="audio/mpeg,audio/wav,audio/flac,audio/ogg,audio/aac">
            </div>
            <div id="audio-upload-status"></div>
            <button type="button" class="btn-secondary mt-2"
                    onclick="document.getElementById('audio-file-input').click()">Choose File</button>
        </div>

        {% else if item_type == "video" %}
        <div class="form-group">
            <label>Video File</label>
            <div class="upload-area" id="video-upload-area">
                <p>Drag and drop a video file here, or click to browse</p>
                <p class="hint">MP4, WebM, MOV</p>
                <input type="file" id="video-file-input" class="sr-only"
                       accept="video/mp4,video/webm,video/quicktime">
            </div>
            <div id="video-upload-status"></div>
            <button type="button" class="btn-secondary mt-2"
                    onclick="document.getElementById('video-file-input').click()">Choose File</button>
        </div>
        <script>
        (function() {
            'use strict';
            var itemId = '{{ item_id }}';
            var dropArea = document.getElementById('video-upload-area');
            var fileInput = document.getElementById('video-file-input');
            var statusEl = document.getElementById('video-upload-status');

            initDropzone(dropArea, fileInput, function(file) {
                if (file.type.startsWith('video/') || file.name.match(/\.(mp4|webm|mov)$/i)) {
                    uploadVideo(file);
                }
            });

            function uploadVideo(file) {
                var contentType = file.type || 'video/mp4';
                statusEl.innerHTML =
                    '<div class="upload-status">' +
                    '<div class="upload-status-row">' +
                    '<span id="video-upload-filename"></span>' +
                    '<span id="video-upload-percent">0%</span></div>' +
                    '<div class="progress-bar-container progress-bar-container--slim progress-bar-container--rounded">' +
                    '<div id="video-progress-bar" class="progress-bar progress-bar--highlight"></div></div></div>';

                var uploader = new S3Uploader({
                    filenameEl:  document.getElementById('video-upload-filename'),
                    percentEl:   document.getElementById('video-upload-percent'),
                    progressBar: document.getElementById('video-progress-bar'),
                });

                fetch('/api/upload/presign', {
                    method: 'POST',
                    headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                    body: JSON.stringify({ item_id: itemId, file_type: 'video', file_name: file.name, content_type: contentType, file_size_bytes: file.size })
                })
                .then(function(res) {
                    if (!res.ok) return res.json().catch(function() { return {}; }).then(function(d) {
                        throw new Error(d.error || 'Failed to get upload URL');
                    });
                    return res.json();
                })
                .then(function(data) {
                    return uploader.upload(data.upload_url, file, data.s3_key, contentType, data.cache_control);
                })
                .then(function(s3Key) {
                    return fetch('/api/upload/confirm', {
                        method: 'POST',
                        headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                        body: JSON.stringify({ item_id: itemId, file_type: 'video', s3_key: s3Key })
                    });
                })
                .then(function(res) {
                    if (!res.ok) return res.json().catch(function() { return {}; }).then(function(d) {
                        throw new Error(d.error || 'Failed to confirm upload');
                    });
                    return res.json().catch(function() { return {}; });
                })
                .then(function(result) {
                    if (result && result.pending_review) {
                        statusEl.innerHTML = '<div class="upload-status-msg is-warning">Upload accepted but held for review — our scanner flagged it.</div>';
                    } else {
                        statusEl.innerHTML = '<div class="upload-status-msg is-success">Upload complete</div>';
                    }
                })
                .catch(function(err) {
                    statusEl.innerHTML = '<div class="upload-status-msg is-error">' + (err.message || 'Upload failed') + '</div>';
                });
            }
        })();
        </script>

        {% else if item_type == "bundle" %}
        <div class="form-group">
            <label>Add New Files</label>
            <div class="hint mb-2">Drop files to create new items and add them to this bundle automatically.</div>
            <div class="upload-area" id="batch-upload-area">
                <p>Drag files here, or click to browse</p>
                <p class="hint">Supports multiple files</p>
                <input type="file" id="batch-file-input" class="sr-only" multiple>
            </div>
            <button type="button" class="btn-secondary mt-2"
                    onclick="document.getElementById('batch-file-input').click()">Choose Files</button>

            <div id="batch-file-queue" class="hidden mt-4">
                <table class="batch-queue-table">
                    <thead>
                        <tr>
                            <th>File</th>
                            <th>Title</th>
                            <th>Type</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody id="batch-file-rows"></tbody>
                </table>
                <button type="button" class="btn-primary mt-3" id="batch-upload-btn">Upload All</button>
            </div>
        </div>

        <div class="form-group mt-5">
            <label>Select Items</label>
            {% if bundleable_items.is_empty() %}
            <p class="hint">No existing items to select. Upload files above or create items from the project dashboard.</p>
            {% else %}
            <div class="hint mb-2">Select items to include. Check "Unlisted" to hide an item from the project page (only accessible through this bundle).</div>
            {% endif %}
            <input type="hidden" name="bundle_item_ids" id="bundle-item-ids" value="">
            <input type="hidden" name="unlisted_item_ids" id="unlisted-item-ids" value="">
            <div id="bundle-picker">
            {% for bi in bundleable_items %}
            <div class="bundle-picker-row">
                <input type="checkbox" class="bundle-check" data-item-id="{{ bi.id }}"
                       {% if selected_bundle_ids.contains(&bi.id.to_string()) %}checked{% endif %}>
                <span class="bundle-picker-row-title">{{ bi.title }}</span>
                <span class="bundle-picker-row-type">{{ bi.item_type }}</span>
                <label class="bundle-picker-row-unlisted">
                    <input type="checkbox" class="unlisted-check" data-item-id="{{ bi.id }}"
                           {% if unlisted_ids.contains(&bi.id.to_string()) %}checked{% endif %}>
                    Unlisted
                </label>
            </div>
            {% endfor %}
            </div>
        </div>
        <script>
        (function() {
            'use strict';
            var projectId = '{{ project_id }}';
            var fileQueue = [];
            var nextIdx = 0;

            var AUDIO_EXTS = ['mp3', 'wav', 'flac', 'ogg', 'aac', 'm4a'];

            function getExt(name) {
                var dot = name.lastIndexOf('.');
                return dot > 0 ? name.substring(dot + 1).toLowerCase() : '';
            }

            function titleFromFilename(name) {
                var dot = name.lastIndexOf('.');
                var base = dot > 0 ? name.substring(0, dot) : name;
                return base.replace(/[_\-]/g, ' ').replace(/\s+/g, ' ').trim();
            }

            function detectType(name) {
                return AUDIO_EXTS.indexOf(getExt(name)) !== -1 ? 'audio' : 'digital';
            }

            function addFiles(fileList) {
                var queueEl = document.getElementById('batch-file-queue');
                var tbody = document.getElementById('batch-file-rows');
                for (var i = 0; i < fileList.length; i++) {
                    var f = fileList[i];
                    var idx = nextIdx++;
                    var entry = { file: f, title: titleFromFilename(f.name), type: detectType(f.name), status: 'ready', idx: idx };
                    fileQueue.push(entry);

                    var tr = document.createElement('tr');
                    tr.id = 'batch-row-' + idx;
                    tr.innerHTML =
                        '<td class="batch-queue-name" title="' + f.name.replace(/"/g, '&quot;') + '">' + escapeHtml(f.name) + '</td>' +
                        '<td><input type="text" class="batch-title batch-queue-title-input input--xs w-full" data-idx="' + idx + '" value="' + escapeAttr(entry.title) + '"></td>' +
                        '<td><select class="batch-type batch-queue-type-select input--xs" data-idx="' + idx + '"><option value="audio"' + (entry.type === 'audio' ? ' selected' : '') + '>Audio</option><option value="digital"' + (entry.type === 'digital' ? ' selected' : '') + '>Digital</option></select></td>' +
                        '<td class="batch-status" data-idx="' + idx + '">Ready</td>';
                    tbody.appendChild(tr);
                }
                queueEl.classList.remove('hidden');
            }

            function escapeHtml(s) {
                var d = document.createElement('div');
                d.textContent = s;
                return d.innerHTML;
            }

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

            function setStatus(idx, text, variant) {
                var el = document.querySelector('.batch-status[data-idx="' + idx + '"]');
                if (el) {
                    el.textContent = text;
                    el.classList.remove('is-success', 'is-error');
                    if (variant) el.classList.add(variant);
                }
            }

            function setProgressBar(idx) {
                var el = document.querySelector('.batch-status[data-idx="' + idx + '"]');
                if (!el) return {};
                el.classList.remove('is-success', 'is-error');
                el.innerHTML =
                    '<div class="upload-progress-row">' +
                    '<div class="progress-bar-container progress-bar-container--slim progress-bar-container--rounded">' +
                    '<div class="bp-fill progress-bar progress-bar--highlight"></div></div>' +
                    '<span class="bp-pct upload-progress-pct">0%</span></div>';
                return { percentEl: el.querySelector('.bp-pct'), progressBar: el.querySelector('.bp-fill') };
            }

            function appendBundleRow(itemId, title, typeLabel) {
                var picker = document.getElementById('bundle-picker');
                var row = document.createElement('div');
                row.className = 'bundle-picker-row';
                row.innerHTML =
                    '<input type="checkbox" class="bundle-check" data-item-id="' + itemId + '" checked>' +
                    '<span class="bundle-picker-row-title">' + escapeHtml(title) + '</span>' +
                    '<span class="bundle-picker-row-type">' + escapeHtml(typeLabel) + '</span>' +
                    '<label class="bundle-picker-row-unlisted">' +
                    '<input type="checkbox" class="unlisted-check" data-item-id="' + itemId + '" checked> Unlisted</label>';
                picker.appendChild(row);
            }

            async function uploadOne(entry) {
                var titleInput = document.querySelector('.batch-title[data-idx="' + entry.idx + '"]');
                var typeSelect = document.querySelector('.batch-type[data-idx="' + entry.idx + '"]');
                if (titleInput) entry.title = titleInput.value.trim() || entry.title;
                if (typeSelect) entry.type = typeSelect.value;

                // 1. Create item
                setStatus(entry.idx, 'Creating...', '');
                var createRes;
                try {
                    createRes = await fetch('/api/projects/' + projectId + '/items', {
                        method: 'POST',
                        headers: Object.assign({'Content-Type': 'application/x-www-form-urlencoded'}, csrfHeaders()),
                        body: new URLSearchParams({ title: entry.title, item_type: entry.type, price_cents: '0' })
                    });
                } catch (e) {
                    setStatus(entry.idx, 'Error: network', 'is-error');
                    return;
                }
                if (!createRes.ok) {
                    var errBody = await createRes.text().catch(function() { return ''; });
                    var errMsg = '';
                    try { errMsg = JSON.parse(errBody).error || errBody; } catch (_) { errMsg = errBody; }
                    setStatus(entry.idx, 'Error: ' + (errMsg || createRes.status), 'is-error');
                    return;
                }
                var itemData;
                try {
                    itemData = await createRes.json();
                } catch (e) {
                    setStatus(entry.idx, 'Error: bad response', 'is-error');
                    return;
                }
                var itemId = itemData.id;
                entry.itemId = itemId;

                // 2. Upload file
                var progressEls = setProgressBar(entry.idx);
                try {
                    if (entry.type === 'audio') {
                        await uploadAudio(entry, itemId, progressEls);
                    } else {
                        await uploadVersion(entry, itemId, progressEls);
                    }
                } catch (e) {
                    setStatus(entry.idx, e.message || 'Upload failed', 'is-error');
                    return;
                }

                // 3. Done — only add to picker on success
                setStatus(entry.idx, 'Done', 'is-success');
                appendBundleRow(itemId, entry.title, entry.type === 'audio' ? 'Audio' : 'Digital');
            }

            async function extractError(res, fallback) {
                var text = await res.text().catch(function() { return ''; });
                try { return JSON.parse(text).error || fallback; } catch (_) { return text || fallback; }
            }

            async function uploadAudio(entry, itemId, progressEls) {
                var file = entry.file;
                var contentType = file.type || 'audio/mpeg';
                var presignRes = await fetch('/api/upload/presign', {
                    method: 'POST',
                    headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                    body: JSON.stringify({ item_id: itemId, file_type: 'audio', file_name: file.name, content_type: contentType, file_size_bytes: file.size })
                });
                if (!presignRes.ok) throw new Error(await extractError(presignRes, 'Presign failed'));
                var presignData = await presignRes.json();

                var uploader = new S3Uploader(progressEls);
                await uploader.upload(presignData.upload_url, file, presignData.s3_key, contentType, presignData.cache_control);

                var confirmRes = await fetch('/api/upload/confirm', {
                    method: 'POST',
                    headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                    body: JSON.stringify({ item_id: itemId, file_type: 'audio', s3_key: presignData.s3_key })
                });
                if (!confirmRes.ok) throw new Error(await extractError(confirmRes, 'Confirm failed'));
                var confirmData = await confirmRes.json().catch(function() { return {}; });
                if (confirmData && confirmData.pending_review) {
                    showToast('Upload held for review — our scanner flagged it.', 'warning');
                }
            }

            async function uploadVersion(entry, itemId, progressEls) {
                var file = entry.file;
                var contentType = file.type || 'application/octet-stream';
                var verRes = await fetch('/api/items/' + itemId + '/versions', {
                    method: 'POST',
                    headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                    body: JSON.stringify({ version_number: '1.0', changelog: null })
                });
                if (!verRes.ok) throw new Error(await extractError(verRes, 'Version creation failed'));
                var verData = await verRes.json();
                var versionId = verData.id;

                var presignRes = await fetch('/api/versions/' + versionId + '/upload/presign', {
                    method: 'POST',
                    headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                    body: JSON.stringify({ file_name: file.name, content_type: contentType })
                });
                if (!presignRes.ok) throw new Error(await extractError(presignRes, 'Presign failed'));
                var presignData = await presignRes.json();

                var uploader = new S3Uploader(progressEls);
                await uploader.upload(presignData.upload_url, file, presignData.s3_key, contentType, presignData.cache_control);

                var confirmRes = await fetch('/api/versions/' + versionId + '/upload/confirm', {
                    method: 'POST',
                    headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                    body: JSON.stringify({ s3_key: presignData.s3_key, file_size_bytes: file.size })
                });
                if (!confirmRes.ok) throw new Error(await extractError(confirmRes, 'Confirm failed'));
                var confirmData = await confirmRes.json().catch(function() { return {}; });
                if (confirmData && confirmData.pending_review) {
                    showToast('Version upload held for review — our scanner flagged it.', 'warning');
                }
            }

            async function uploadAll() {
                var btn = document.getElementById('batch-upload-btn');
                btn.disabled = true;
                btn.textContent = 'Uploading...';

                for (var i = 0; i < fileQueue.length; i++) {
                    if (fileQueue[i].status === 'ready') {
                        fileQueue[i].status = 'uploading';
                        await uploadOne(fileQueue[i]);
                        fileQueue[i].status = 'done';
                    }
                }

                btn.disabled = false;
                btn.textContent = 'Upload All';
            }

            // Wire up multi-file dropzone (can't use initDropzone — it only passes one file)
            var dropArea = document.getElementById('batch-upload-area');
            var fileInput = document.getElementById('batch-file-input');
            dropArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                dropArea.classList.add('dragover');
            });
            dropArea.addEventListener('dragleave', function() {
                dropArea.classList.remove('dragover');
            });
            dropArea.addEventListener('drop', function(e) {
                e.preventDefault();
                dropArea.classList.remove('dragover');
                if (e.dataTransfer.files.length > 0) addFiles(e.dataTransfer.files);
            });
            dropArea.addEventListener('click', function() { fileInput.click(); });
            fileInput.addEventListener('change', function() {
                if (this.files.length > 0) addFiles(this.files);
                this.value = '';
            });

            document.getElementById('batch-upload-btn').addEventListener('click', uploadAll);

            // Collect bundle IDs on form submit
            function collectBundleIds() {
                var ids = [];
                document.querySelectorAll('.bundle-check:checked').forEach(function(cb) {
                    ids.push(cb.dataset.itemId);
                });
                document.getElementById('bundle-item-ids').value = ids.join(',');
                var uids = [];
                document.querySelectorAll('.unlisted-check:checked').forEach(function(cb) {
                    uids.push(cb.dataset.itemId);
                });
                document.getElementById('unlisted-item-ids').value = uids.join(',');
            }
            document.querySelector('form').addEventListener('submit', collectBundleIds);
            document.querySelector('form').addEventListener('htmx:configRequest', collectBundleIds);
        })();
        </script>

        {% else %}
        <div class="form-group">
            <label>File</label>
            <div class="upload-area" id="file-upload-area">
                <p>Drag and drop your file here, or click to browse</p>
                <p class="hint">Upload your content file. You can also add versions from the item dashboard.</p>
                <input type="file" id="file-input" class="sr-only">
            </div>
            <div id="file-upload-status"></div>
            <button type="button" class="btn-secondary mt-2"
                    onclick="document.getElementById('file-input').click()">Choose File</button>
        </div>
        <script>
        (function() {
            'use strict';
            var itemId = '{{ item_id }}';
            var dropArea = document.getElementById('file-upload-area');
            var fileInput = document.getElementById('file-input');
            var statusEl = document.getElementById('file-upload-status');

            initDropzone(dropArea, fileInput, function(file) {
                uploadFile(file);
            });

            function uploadFile(file) {
                var contentType = file.type || 'application/octet-stream';
                statusEl.innerHTML =
                    '<div class="upload-status">' +
                    '<div class="upload-status-row">' +
                    '<span id="file-upload-filename"></span>' +
                    '<span id="file-upload-percent">0%</span></div>' +
                    '<div class="progress-bar-container progress-bar-container--slim progress-bar-container--rounded">' +
                    '<div id="file-progress-bar" class="progress-bar progress-bar--highlight"></div></div></div>';

                var uploader = new S3Uploader({
                    filenameEl:  document.getElementById('file-upload-filename'),
                    percentEl:   document.getElementById('file-upload-percent'),
                    progressBar: document.getElementById('file-progress-bar'),
                });

                // Create version then upload
                fetch('/api/items/' + itemId + '/versions', {
                    method: 'POST',
                    headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                    body: JSON.stringify({ version_number: '1.0', changelog: null })
                })
                .then(function(res) {
                    if (!res.ok) return res.json().catch(function() { return {}; }).then(function(d) {
                        throw new Error(d.error || 'Failed to create version');
                    });
                    return res.json();
                })
                .then(function(verData) {
                    return fetch('/api/versions/' + verData.id + '/upload/presign', {
                        method: 'POST',
                        headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                        body: JSON.stringify({ file_name: file.name, content_type: contentType })
                    }).then(function(res) {
                        if (!res.ok) return res.json().catch(function() { return {}; }).then(function(d) {
                            throw new Error(d.error || 'Failed to get upload URL');
                        });
                        return res.json();
                    }).then(function(data) {
                        return uploader.upload(data.upload_url, file, data.s3_key, contentType, data.cache_control)
                            .then(function(s3Key) { return { s3Key: s3Key, versionId: verData.id }; });
                    });
                })
                .then(function(result) {
                    return fetch('/api/versions/' + result.versionId + '/upload/confirm', {
                        method: 'POST',
                        headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
                        body: JSON.stringify({ s3_key: result.s3Key, file_size_bytes: file.size })
                    });
                })
                .then(function(res) {
                    if (!res.ok) return res.json().catch(function() { return {}; }).then(function(d) {
                        throw new Error(d.error || 'Failed to confirm upload');
                    });
                    statusEl.innerHTML = '<div class="upload-status-msg">Upload complete.</div>';
                })
                .catch(function(err) {
                    statusEl.innerHTML = '<div class="upload-status-msg is-error">' + (err.message || 'Upload failed') + '</div>';
                });
            }
        })();
        </script>
        {% endif %}

        <div class="wizard-actions">
            <button type="button" class="btn-secondary"
                    hx-get="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/details"
                    hx-target="#wizard-step" hx-swap="innerHTML"
                    hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/details">Back</button>
            <button type="button" class="btn-secondary"
                    hx-get="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/pricing"
                    hx-target="#wizard-step" hx-swap="innerHTML"
                    hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/pricing">Skip</button>
            <button type="submit" class="btn-primary">Continue</button>
        </div>
    </form>
</div>