{% extends "base.html" %}
{% from "_macros.html" import flash %}

{% block body_attrs %} class="wizard-mode"{% endblock %}

{% block body %}
<div class="wizard-container active" id="wizardMode">
    <div class="wizard-content">
        <div class="wizard-progress">
            <div class="progress-step active" id="sw-fill-1"></div>
            <div class="progress-step" id="sw-fill-2"></div>
            <div class="progress-step" id="sw-fill-3"></div>
            <div class="progress-step" id="sw-fill-4"></div>
        </div>

        {{ flash(flash_status, flash_message) }}

        <form id="setup-form" method="post" action="/setup">
            <input type="hidden" id="setup_auth_mode" name="setup_auth_mode" value="api_key">
            {# Step 1: Model & API key #}
            <div class="wizard-step active" id="sw-step-1">
                <h2 class="wizard-title">Set up Otto</h2>
                <p class="wizard-desc">Choose the model and credentials for your assistant.</p>

                <div class="form-group">
                    <label class="form-label small-caps" for="setup_model">Model</label>
                    <input id="setup_model" name="model" type="text" class="form-input"
                           value="{{ default_model }}" autocomplete="off" spellcheck="false">
                    <span class="hint" style="font-size: 12px; color: var(--text-muted); margin-top: 4px; display: block;">e.g. <code>anthropic/claude-sonnet-4-5-20250514</code></span>
                </div>

                <div class="form-group">
                    <label class="form-label small-caps" for="setup_api_key" id="setup_api_key_label">
                        API key <span class="hint" style="display:inline; text-transform: none; font-weight: normal;">(optional)</span>
                    </label>
                    <input id="setup_api_key" name="api_key" type="password" class="form-input"
                           placeholder="sk-... or leave blank to use env var" autocomplete="off">
                    <span id="setup_api_key_hint" class="hint" style="font-size: 12px; color: var(--text-muted); margin-top: 4px; display: block;">Used for API-key providers.</span>
                </div>
            </div>

            {# Step 2: Channels #}
            <div class="wizard-step" id="sw-step-2">
                <h2 class="wizard-title">Choose channels</h2>
                <p class="wizard-desc">Start with terminal chat only, or add Telegram too.</p>

                <div class="sw-option-grid" style="display: grid; gap: 16px; margin-bottom: 24px;">
                    <label class="sw-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); cursor: pointer;">
                        <input type="radio" name="_add_telegram" value="no" checked style="margin-top: 4px;">
                        <div>
                            <span class="sw-option-title" style="display: block; font-weight: 500; margin-bottom: 4px;">CLI only</span>
                            <span class="sw-option-desc" style="color: var(--text-muted); font-size: 13px;">Use Otto in your terminal.</span>
                        </div>
                    </label>
                    <label class="sw-option" style="display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); cursor: pointer;">
                        <input type="radio" name="_add_telegram" value="yes" style="margin-top: 4px;">
                        <div>
                            <span class="sw-option-title" style="display: block; font-weight: 500; margin-bottom: 4px;">CLI + Telegram</span>
                            <span class="sw-option-desc" style="color: var(--text-muted); font-size: 13px;">Also chat from your phone.</span>
                        </div>
                    </label>
                </div>

                <div id="sw-tg-fields" hidden>
                    <div class="form-group">
                        <label class="form-label small-caps" for="setup_telegram_token">Telegram bot token</label>
                        <input id="setup_telegram_token" name="telegram_token" type="password"
                               class="form-input" placeholder="123456:ABC-DEF..." autocomplete="off">
                        <span class="hint" style="font-size: 12px; color: var(--text-muted); margin-top: 4px; display: block;">Create a bot with <code>@BotFather</code> on Telegram.</span>
                    </div>
                </div>
            </div>

            {# Step 3: Owner identity #}
            <div class="wizard-step" id="sw-step-3">
                <h2 class="wizard-title">Owner identity</h2>
                <p class="wizard-desc">Set who owns and controls this Otto instance.</p>

                <div class="form-group">
                    <label class="form-label small-caps" for="setup_owner_name">Owner name</label>
                    <input id="setup_owner_name" name="owner_name" type="text" class="form-input"
                           value="owner" autocomplete="off">
                </div>

                <div id="sw-tid-wrap" hidden>
                    <div class="form-group">
                        <label class="form-label small-caps" for="setup_owner_telegram_id">
                            Telegram user ID
                            <span class="hint" style="display:inline; text-transform: none; font-weight: normal;">(optional)</span>
                        </label>
                        <input id="setup_owner_telegram_id" name="owner_telegram_id" type="text"
                               class="form-input" placeholder="Numeric ID from @userinfobot">
                    </div>
                </div>
            </div>

            {# Step 4: Review #}
            <div class="wizard-step" id="sw-step-4">
                <h2 class="wizard-title">Review</h2>
                <p class="wizard-desc">Confirm your configuration before launching Otto.</p>
                <div id="sw-review" style="background: var(--bg-surface); border: 1px solid var(--border); padding: 24px; font-family: monospace; font-size: 13px; color: var(--text-primary); margin-bottom: 24px;"></div>
            </div>

            <div class="wizard-actions">
                <button type="button" class="btn" id="sw-back" hidden onclick="swBack()">Back</button>
                <button type="button" class="btn btn-primary" id="sw-next"
                        onclick="swNext()">Continue</button>
                <button type="submit" class="btn btn-primary" id="sw-submit"
                        hidden>Set up Otto</button>
            </div>
        </form>
    </div>
</div>

<script>window.ottoWizardOAuthState = {{ oauth_state_json | safe }};</script>
{{ wizard_js | safe }}
{% endblock %}