{# Onboarding Checklist Macro - Phase 5 Navigation & Progress Tracking #}

{% macro onboarding_checklist(status, collapsible=True) %}
{# Renders the onboarding progress checklist sidebar.

Args:
    status: Dict with setup completion flags from get_setup_status()
    collapsible: Whether the checklist can be collapsed (default True)
#}
<div class="onboarding-checklist {% if collapsible %}collapsible{% endif %}" id="onboarding-sidebar">
    <div class="checklist-header">
        <h4>Getting Started</h4>
        <div class="checklist-progress-bar">
            <div class="checklist-progress-fill" style="width: {{ status.percent }}%"></div>
        </div>
        <span class="progress-text">{{ status.percent }}%</span>
        {% if collapsible %}
        <button class="collapse-btn" aria-label="Toggle checklist" onclick="toggleChecklist()">
            <svg width="12" height="12" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
            </svg>
        </button>
        {% endif %}
    </div>

    <ul class="checklist-items">
        {# Step 1: Database Connection #}
        <li class="{% if status.db_configured %}completed{% endif %}">
            <span class="check-icon">
                {% if status.db_configured %}
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="color: var(--success);">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                {% else %}
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="color: var(--text-muted);">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
                </svg>
                {% endif %}
            </span>
            <span class="item-text">Connect database</span>
            {% if not status.db_configured %}
            <a href="{{ url_for('dashboard.setup') }}#step-1" class="action-link">Set up</a>
            {% endif %}
        </li>

        {# Step 2: Google Credentials #}
        <li class="{% if status.credentials_present %}completed{% endif %}">
            <span class="check-icon">
                {% if status.credentials_present %}
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="color: var(--success);">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                {% else %}
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="color: var(--text-muted);">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
                </svg>
                {% endif %}
            </span>
            <span class="item-text">Add Google credentials</span>
            {% if not status.credentials_present %}
            <a href="{{ url_for('dashboard.setup') }}#step-2" class="action-link">Set up</a>
            {% endif %}
        </li>

        {# Step 3: Google Sheet Configuration #}
        <li class="{% if status.sheets_configured %}completed{% endif %}">
            <span class="check-icon">
                {% if status.sheets_configured %}
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="color: var(--success);">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                {% else %}
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="color: var(--text-muted);">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
                </svg>
                {% endif %}
            </span>
            <span class="item-text">Configure Google Sheet</span>
            {% if not status.sheets_configured %}
            <a href="{{ url_for('dashboard.setup') }}#step-2" class="action-link">Set up</a>
            {% endif %}
        </li>

        {# Step 4: First Sync #}
        <li class="{% if status.first_sync_complete %}completed{% endif %}">
            <span class="check-icon">
                {% if status.first_sync_complete %}
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="color: var(--success);">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                {% else %}
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="color: var(--text-muted);">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
                </svg>
                {% endif %}
            </span>
            <span class="item-text">Run first sync</span>
            {% if not status.first_sync_complete and status.sheets_configured %}
            <a href="{{ url_for('dashboard.index') }}" class="action-link">Run now</a>
            {% endif %}
        </li>

        {# Step 5: Create Schedule #}
        <li class="{% if status.schedule_created %}completed{% endif %}">
            <span class="check-icon">
                {% if status.schedule_created %}
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="color: var(--success);">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                {% else %}
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="color: var(--text-muted);">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
                </svg>
                {% endif %}
            </span>
            <span class="item-text">Create a schedule</span>
            {% if not status.schedule_created and status.first_sync_complete %}
            <a href="{{ url_for('dashboard.schedules') }}" class="action-link">Create</a>
            {% endif %}
        </li>
    </ul>

    {% if status.percent == 100 %}
    <div class="completion-message">
        🎉 Setup complete! You're all set.
        <button class="btn-link dismiss-checklist" onclick="dismissChecklist()">Hide this</button>
    </div>
    {% endif %}
</div>

<script>
function toggleChecklist() {
    const checklist = document.getElementById('onboarding-sidebar');
    if (checklist) {
        checklist.classList.toggle('collapsed');
        // Save preference
        localStorage.setItem('onboarding_collapsed', checklist.classList.contains('collapsed'));
    }
}

function dismissChecklist() {
    const checklist = document.getElementById('onboarding-sidebar');
    if (checklist) {
        checklist.style.display = 'none';
        localStorage.setItem('onboarding_dismissed', 'true');
    }
}

// Restore state on page load
document.addEventListener('DOMContentLoaded', function() {
    const checklist = document.getElementById('onboarding-sidebar');
    if (checklist) {
        if (localStorage.getItem('onboarding_dismissed') === 'true') {
            checklist.style.display = 'none';
        } else if (localStorage.getItem('onboarding_collapsed') === 'true') {
            checklist.classList.add('collapsed');
        }
    }
});
</script>
{% endmacro %}


{# Import breadcrumb from nav.html to avoid duplication #}
{% from "macros/nav.html" import breadcrumb %}