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

<div class="wizard-step">
    <h2 class="subtitle-h2">Appearance</h2>
    <p class="step-description">Upload a project image. This appears on your project page and in search results.</p>

    <form hx-post="/dashboard/new-project/{{ slug }}/step/appearance"
          hx-target="#wizard-step" hx-swap="innerHTML"
          hx-push-url="/dashboard/new-project/{{ slug }}/step/monetization">

        <div class="form-group">
            <label>Project Image</label>

            <div class="project-image-upload" id="image-upload-area">
                <div class="project-image-dropzone" id="image-dropzone">
                    {% if let Some(url) = cover_image_url %}
                    <div class="project-image-current" id="image-current">
                        <img src="{{ url }}" alt="Project image" class="wizard-cover-img">
                    </div>
                    {% else %}
                    <div class="project-image-placeholder" id="image-placeholder">
                        <p>Square, at least 400x400px</p>
                        <p class="hint">JPG, PNG, or WebP. Max 10 MB.</p>
                    </div>
                    {% endif %}
                    <input type="file" id="image-file-input" accept="image/jpeg,image/png,image/webp" class="sr-only">
                </div>

                <button type="button" class="btn-secondary" id="choose-image-btn"
                        onclick="document.getElementById('image-file-input').click()">Choose File</button>

                <div class="upload-status" id="image-upload-status">
                    <div class="upload-progress-inline hidden" id="image-upload-progress">
                        <span id="image-upload-filename"></span>
                        <span id="image-upload-percent">0%</span>
                        <div class="progress-bar-container">
                            <div class="progress-bar" id="image-progress-bar"></div>
                        </div>
                    </div>
                    <div class="upload-error-inline hidden" id="image-upload-error">
                        <span class="error-message" id="image-error-message"></span>
                    </div>
                </div>
            </div>

            <input type="hidden" name="cover_image_url" id="cover-image-url"
                   value="{% if let Some(url) = cover_image_url %}{{ url }}{% endif %}">
        </div>

        <div class="form-group">
            <label>Preview</label>
            <div class="project-card-preview">
                <div class="preview-cover" id="preview-cover">
                    {% if let Some(url) = cover_image_url %}
                    <img src="{{ url }}" alt="Preview" class="wizard-cover-img">
                    {% else %}
                    <div class="preview-cover-empty">No image</div>
                    {% endif %}
                </div>
                <div class="preview-info">
                    <strong>{{ project_title }}</strong>
                </div>
            </div>
        </div>

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

<script>
(function() {
    var projectId = '{{ project_id }}';
    var dropzone = document.getElementById('image-dropzone');
    var fileInput = document.getElementById('image-file-input');
    var hiddenUrl = document.getElementById('cover-image-url');
    var progressEl = document.getElementById('image-upload-progress');
    var errorEl = document.getElementById('image-upload-error');
    var placeholder = document.getElementById('image-placeholder');
    var currentImg = document.getElementById('image-current');
    var chooseBtn = document.getElementById('choose-image-btn');

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

    initDropzone(dropzone, fileInput, function(file) {
        uploadProjectImage(file);
    });

    function uploadProjectImage(file) {
        errorEl.classList.add('hidden');
        progressEl.classList.remove('hidden');
        chooseBtn.disabled = true;

        fetch('/api/projects/image/presign', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', ...csrfHeaders() },
            body: JSON.stringify({
                project_id: projectId,
                file_name: file.name,
                content_type: file.type || 'image/jpeg'
            })
        })
        .then(function(res) {
            if (!res.ok) return res.text().then(function(body) {
                try { var d = JSON.parse(body); throw new Error(d.error || 'Failed to get upload URL'); }
                catch(e) { if (e.message && e.message !== body) throw e; throw new Error('Failed to get upload URL'); }
            });
            return res.json();
        })
        .then(function(data) {
            return uploader.upload(data.upload_url, file, data.s3_key, file.type || 'image/jpeg', data.cache_control);
        })
        .then(function(s3Key) {
            return fetch('/api/projects/image/confirm', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', ...csrfHeaders() },
                body: JSON.stringify({
                    project_id: projectId,
                    s3_key: s3Key
                })
            });
        })
        .then(function(res) {
            if (!res.ok) return res.text().then(function(body) {
                try { var d = JSON.parse(body); throw new Error(d.error || 'Failed to confirm upload'); }
                catch(e) { if (e.message && e.message !== body) throw e; throw new Error('Failed to confirm upload'); }
            });
            return res.json();
        })
        .then(function(data) {
            hiddenUrl.value = data.image_url;
            progressEl.classList.add('hidden');
            chooseBtn.disabled = false;
            showUploadedImage(data.image_url);
        })
        .catch(function(err) {
            progressEl.classList.add('hidden');
            chooseBtn.disabled = false;
            showError(err.message || 'Upload failed. Please try again.');
        });
    }

    function showUploadedImage(url) {
        if (placeholder) placeholder.classList.add('hidden');
        if (currentImg) {
            currentImg.querySelector('img').src = url;
            currentImg.classList.remove('hidden');
        } else {
            var div = document.createElement('div');
            div.className = 'project-image-current';
            div.id = 'image-current';
            div.innerHTML = '<img src="' + url + '" alt="Project image" class="wizard-cover-img">';
            dropzone.insertBefore(div, fileInput);
            currentImg = div;
        }
        var preview = document.getElementById('preview-cover');
        preview.innerHTML = '<img src="' + url + '" alt="Preview" class="wizard-cover-img">';
    }

    function showError(message) {
        errorEl.classList.remove('hidden');
        document.getElementById('image-error-message').textContent = message;
    }
})();
</script>