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

<div class="wizard-step">
    <h2 class="subtitle-h2">Basics</h2>
    <p class="step-description">Name your project, set a URL name, and choose the tools you will use.</p>
    <p class="form-hint">A <strong>project</strong> groups related work &mdash; an album, podcast, course, or product line. You'll add individual <strong>items</strong> (tracks, episodes, files) inside it.</p>

    <form hx-post="/dashboard/new-project/{{ slug }}/step/basics"
          hx-target="#wizard-step" hx-swap="innerHTML"
          hx-push-url="/dashboard/new-project/{{ slug }}/step/appearance">
        <div class="form-group">
            <label for="wiz-title">Title</label>
            <input type="text" id="wiz-title" name="title" required value="{{ title }}"
                   placeholder="My Awesome Project" autocomplete="off">
        </div>

        <div class="form-group">
            <label for="wiz-slug">URL name</label>
            <input type="text" id="wiz-slug" name="slug" value="{{ slug }}" readonly
                   class="readonly-field">
            <div class="hint">The URL name is locked after the project is created.</div>
        </div>

        <div class="form-group">
            <label>What tools will you use?</label>
            <div class="hint wizard-hint-gap-md">Select all that apply. You can change these anytime.</div>
            <div class="type-grid">
            {% for (value, label, desc) in project_features %}
                <label class="type-card">
                    <input type="checkbox" name="features" value="{{ value }}"
                           {% if features.contains(&value.to_string()) %}checked{% endif %}>
                    <span class="type-card-inner">
                        <span class="type-card-label">{{ label }}</span>
                        <span class="type-card-desc">{{ desc }}</span>
                    </span>
                </label>
            {% endfor %}
            </div>
        </div>

        <div class="form-group">
            <label for="wiz-category">Category</label>
            <div class="suggestion-input" id="category-suggestion">
                <input type="text" id="wiz-category" name="category"
                       value="{{ category_name }}"
                       placeholder="What kind of project is this?"
                       autocomplete="off">
                <div class="suggestion-dropdown" id="category-dropdown"></div>
            </div>
            <div class="hint">Choose an existing category or type a new one.</div>
        </div>

        <div class="form-group">
            <label for="wiz-description">Description</label>
            <textarea id="wiz-description" name="description" rows="4"
                      placeholder="Describe your project...">{{ description }}</textarea>
        </div>

        <div class="form-group">
            <label>AI Disclosure</label>
            <div class="hint wizard-hint-gap-sm">How was AI used in creating this project's content?</div>
            <div class="wizard-radio-group">
                <label class="wizard-radio-option">
                    <input type="radio" name="ai_tier" value="handmade" required
                           {% if ai_tier == "handmade" %}checked{% endif %}>
                    <span><strong>Handmade</strong> — no AI tools used in content creation</span>
                </label>
                <label class="wizard-radio-option">
                    <input type="radio" name="ai_tier" value="assisted" required
                           {% if ai_tier == "assisted" %}checked{% endif %}>
                    <span><strong>AI-Assisted</strong> — AI tools used as part of the creative process</span>
                </label>
                <label class="wizard-radio-option">
                    <input type="radio" name="ai_tier" value="generated" required
                           {% if ai_tier == "generated" %}checked{% endif %}>
                    <span><strong>AI-Generated</strong> — content primarily generated by AI</span>
                </label>
            </div>
        </div>

        <div class="form-group{% if ai_tier != "assisted" %} hidden{% endif %}" id="ai-disclosure-group">
            <label for="wiz-ai-disclosure">Disclosure Details</label>
            <textarea id="wiz-ai-disclosure" name="ai_disclosure" rows="2"
                      placeholder="Describe how AI was used (e.g., code suggestions, image generation, etc.)">{{ ai_disclosure }}</textarea>
        </div>

        <div class="wizard-actions">
            <a href="/dashboard" class="btn-secondary">Cancel</a>
            <button type="submit" class="btn-primary">Continue</button>
        </div>
    </form>
</div>
<script>
(function() {
    var input = document.getElementById('wiz-category');
    var dropdown = document.getElementById('category-dropdown');
    if (!input || !dropdown) return;
    var debounce;

    function showDropdown(items, query) {
        dropdown.innerHTML = '';
        items.forEach(function(c) {
            var div = document.createElement('div');
            div.className = 'suggestion-item';
            div.textContent = c.name;
            div.addEventListener('mousedown', function(e) {
                e.preventDefault();
                input.value = c.name;
                dropdown.classList.remove('open');
            });
            dropdown.appendChild(div);
        });
        var q = query.trim();
        if (q.length > 0 && !items.some(function(c) { return c.name.toLowerCase() === q.toLowerCase(); })) {
            var create = document.createElement('div');
            create.className = 'suggestion-item suggestion-create';
            create.textContent = 'Create: ' + q;
            create.addEventListener('mousedown', function(e) {
                e.preventDefault();
                input.value = q;
                dropdown.classList.remove('open');
            });
            dropdown.appendChild(create);
        }
        if (dropdown.children.length > 0) {
            dropdown.classList.add('open');
        } else {
            dropdown.classList.remove('open');
        }
    }

    input.addEventListener('input', function() {
        clearTimeout(debounce);
        var q = input.value.trim();
        if (q.length < 1) { dropdown.classList.remove('open'); return; }
        debounce = setTimeout(function() {
            fetch('/api/categories/search?q=' + encodeURIComponent(q))
                .then(function(r) { return r.json(); })
                .then(function(cats) { showDropdown(cats, q); })
                .catch(function() {});
        }, 200);
    });

    input.addEventListener('focus', function() {
        if (dropdown.children.length > 0) dropdown.classList.add('open');
    });

    input.addEventListener('blur', function() {
        setTimeout(function() { dropdown.classList.remove('open'); }, 150);
    });

    // AI tier toggle
    document.querySelectorAll('input[name="ai_tier"]').forEach(function(r) {
        r.addEventListener('change', function() {
            var group = document.getElementById('ai-disclosure-group');
            group.classList.toggle('hidden', this.value !== 'assisted');
        });
    });
})();
</script>