<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="encoach_portal.OnboardingWizard">
        <div class="ec-wizard" t-ref="root">

            <!-- Progress Bar -->
            <div class="ec-wizard-progress mb-4">
                <div class="d-flex justify-content-between mb-2">
                    <t t-foreach="steps" t-as="step" t-key="step.key">
                        <div t-attf-class="ec-wizard-step text-center flex-fill #{step_index &lt;= state.currentStep ? 'active' : ''} #{step_index &lt; state.currentStep ? 'completed' : ''}">
                            <span t-attf-class="d-inline-flex align-items-center justify-content-center rounded-circle mb-1 #{step_index &lt;= state.currentStep ? 'bg-primary text-white' : 'bg-light text-muted'}" style="width:36px;height:36px;">
                                <i t-attf-class="fa #{step_index &lt; state.currentStep ? 'fa-check' : step.icon}"/>
                            </span>
                            <small class="d-block" t-esc="step.title"/>
                        </div>
                    </t>
                </div>
                <div class="progress rounded-pill" style="height:6px;">
                    <div class="progress-bar bg-primary rounded-pill" t-attf-style="width: #{progressPercent}%;"/>
                </div>
            </div>

            <!-- Step 1: Learning Goal -->
            <div t-if="state.currentStep === 0" class="ec-wizard-panel">
                <h4 class="fw-bold mb-1 text-center">What would you like to learn?</h4>
                <p class="text-muted text-center mb-4">Choose your primary learning goal</p>
                <div class="row g-3">
                    <t t-foreach="goals" t-as="goal" t-key="goal.id">
                        <div class="col-md-6">
                            <div t-attf-class="card border-2 rounded-4 h-100 ec-selectable-card #{state.selectedGoal === goal.id ? 'border-primary shadow-sm' : 'border-light'}"
                                 t-on-click="() => this.selectGoal(goal.id)" role="button">
                                <div class="card-body p-3 d-flex align-items-center">
                                    <span t-attf-class="d-inline-flex align-items-center justify-content-center rounded-3 me-3 #{state.selectedGoal === goal.id ? 'bg-primary text-white' : 'bg-light text-muted'}" style="width:44px;height:44px;">
                                        <i t-attf-class="fa #{goal.icon}"/>
                                    </span>
                                    <div>
                                        <h6 class="fw-bold mb-0" t-esc="goal.label"/>
                                        <small class="text-muted" t-esc="goal.desc"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </t>
                </div>
            </div>

            <!-- Step 2: Target Level -->
            <div t-if="state.currentStep === 1" class="ec-wizard-panel">
                <h4 class="fw-bold mb-1 text-center">What level are you aiming for?</h4>
                <p class="text-muted text-center mb-4">Select your target proficiency</p>
                <div class="row g-2 justify-content-center">
                    <t t-foreach="levels" t-as="lvl" t-key="lvl.id">
                        <div class="col-sm-6 col-md-4">
                            <div t-attf-class="card border-2 rounded-3 ec-selectable-card #{state.selectedLevel === lvl.id ? 'border-primary shadow-sm' : 'border-light'}"
                                 t-on-click="() => this.selectLevel(lvl.id)" role="button">
                                <div class="card-body p-3 text-center">
                                    <span class="fw-semibold" t-esc="lvl.label"/>
                                </div>
                            </div>
                        </div>
                    </t>
                </div>
            </div>

            <!-- Step 3: Study Preferences -->
            <div t-if="state.currentStep === 2" class="ec-wizard-panel">
                <h4 class="fw-bold mb-1 text-center">How do you prefer to study?</h4>
                <p class="text-muted text-center mb-4">Pick the style that suits you best</p>
                <div class="row g-3 justify-content-center">
                    <t t-foreach="studyPrefs" t-as="pref" t-key="pref.id">
                        <div class="col-md-4">
                            <div t-attf-class="card border-2 rounded-4 h-100 ec-selectable-card #{state.selectedPref === pref.id ? 'border-primary shadow-sm' : 'border-light'}"
                                 t-on-click="() => this.selectPref(pref.id)" role="button">
                                <div class="card-body p-4 text-center">
                                    <span t-attf-class="d-inline-flex align-items-center justify-content-center rounded-circle mb-2 #{state.selectedPref === pref.id ? 'bg-primary text-white' : 'bg-light text-muted'}" style="width:52px;height:52px;">
                                        <i t-attf-class="fa fa-lg #{pref.icon}"/>
                                    </span>
                                    <h6 class="fw-bold mb-1" t-esc="pref.label"/>
                                    <small class="text-muted" t-esc="pref.desc"/>
                                </div>
                            </div>
                        </div>
                    </t>
                </div>
            </div>

            <!-- Step 4: Placement Test -->
            <div t-if="state.currentStep === 3" class="ec-wizard-panel">
                <h4 class="fw-bold mb-1 text-center">Take Your Placement Test</h4>
                <p class="text-muted text-center mb-4">We recommend a quick placement test to personalise your learning path</p>

                <div class="card border-0 bg-light rounded-4 mb-4">
                    <div class="card-body p-4">
                        <div class="row g-3">
                            <div class="col-sm-4 text-center">
                                <small class="text-muted d-block mb-1">Goal</small>
                                <span class="fw-bold" t-esc="state.selectedGoal"/>
                            </div>
                            <div class="col-sm-4 text-center">
                                <small class="text-muted d-block mb-1">Target Level</small>
                                <span class="fw-bold" t-esc="state.selectedLevel"/>
                            </div>
                            <div class="col-sm-4 text-center">
                                <small class="text-muted d-block mb-1">Study Style</small>
                                <span class="fw-bold" t-esc="state.selectedPref"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-2 border-primary rounded-4 mb-3">
                    <div class="card-body p-4 text-center">
                        <span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary bg-opacity-10 text-primary mb-3" style="width:56px;height:56px;">
                            <i class="fa fa-tasks fa-lg"/>
                        </span>
                        <h5 class="fw-bold mb-2">Adaptive Placement Test</h5>
                        <p class="text-muted mb-0">20-30 minutes — covers Grammar, Vocabulary, Reading, and Speaking</p>
                        <p class="text-muted">Your results will unlock a personalised course tailored to your level</p>
                    </div>
                </div>

                <t t-if="state.error">
                    <div class="alert alert-danger rounded-3 mt-3" t-esc="state.error"/>
                </t>
            </div>

            <!-- Navigation Buttons -->
            <div class="d-flex justify-content-between mt-4">
                <button t-attf-class="btn btn-outline-secondary rounded-3 px-4 #{isFirstStep ? 'invisible' : ''}"
                        t-on-click="prevStep">
                    <i class="fa fa-arrow-left me-2"/>Back
                </button>
                <t t-if="!isLastStep">
                    <button class="btn btn-primary rounded-3 px-4"
                            t-att-disabled="!canProceed"
                            t-on-click="nextStep">
                        Next<i class="fa fa-arrow-right ms-2"/>
                    </button>
                </t>
                <t t-else="">
                    <div class="d-flex gap-2">
                        <button class="btn btn-outline-secondary rounded-3 px-4"
                                t-att-disabled="state.saving"
                                t-on-click="skipPlacement">
                            <t t-if="state.saving">
                                <span class="spinner-border spinner-border-sm me-2"/>
                            </t>
                            <t t-else="">Skip for now</t>
                        </button>
                        <button class="btn btn-primary rounded-3 px-4"
                                t-att-disabled="state.saving"
                                t-on-click="takePlacement">
                            <t t-if="state.saving">
                                <span class="spinner-border spinner-border-sm me-2"/>Saving…
                            </t>
                            <t t-else="">
                                <i class="fa fa-play me-2"/>Take Placement Test
                            </t>
                        </button>
                    </div>
                </t>
            </div>

        </div>
    </t>

</templates>
