{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Onboarding - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
{% endblock %}
{% block content %}
<main class="ops-shell">
    <header class="ops-header">
        <div>
            <h1>First-Time Setup</h1>
            <div class="ops-subtitle">Guided setup for real shop owners, branches, cashiers, inventory, payments, and receipts.</div>
        </div>
        <div class="ops-actions">
            <a class="ops-button secondary" href="/business-transformation">Transformation</a>
            <a class="ops-button secondary" href="/operations-mode">Operations</a>
            <a class="ops-button secondary" href="/trust">Trust</a>
        </div>
    </header>

    <section class="ops-panel">
        <h2>{{ snapshot.percent }}% Complete</h2>
        <div class="ops-progress"><span style="width: {{ snapshot.percent }}%"></span></div>
    </section>

    <section class="ops-grid">
        <div class="ops-panel">
            <h2>AI Assistant</h2>
            <h3>{{ assistant.title }}</h3>
            <p>{{ assistant.message }}</p>
        </div>
        <div class="ops-panel">
            <h2>Smart Defaults</h2>
            <p>Country {{ snapshot.smart_defaults.country }}, currency {{ snapshot.smart_defaults.currency }}, low-stock alert at {{ snapshot.smart_defaults.low_stock_threshold }} units.</p>
        </div>
    </section>

    <section class="ops-panel">
        <h2>Guided Shop Setup</h2>
        <form class="ops-form-grid" method="post" action="/onboarding/setup">
            <label>Shop name <input name="shop_name" placeholder="e.g. Gvelo Mini Mart"></label>
            <label>Country <input name="country" value="{{ snapshot.smart_defaults.country }}"></label>
            <label>Currency <input name="currency" value="{{ snapshot.smart_defaults.currency }}"></label>
            <label>Branch name <input name="branch_name" value="Main Branch"></label>
            <label>Branch location <input name="branch_location" placeholder="Town, street, estate"></label>
            <label>Receipt footer <input name="receipt_footer" value="{{ snapshot.smart_defaults.receipt_footer }}"></label>
            <button type="submit">Apply Setup</button>
        </form>
    </section>

    <section class="ops-grid">
        {% for step in snapshot.steps %}
        <div class="ops-panel">
            <span class="ops-badge {{ '' if step.status == 'completed' else 'warn' }}">{{ step.status|title }}</span>
            <h3>{{ step.title }}</h3>
            <p>{{ step.detail }}</p>
            {% if step.status != 'completed' %}
            <button type="button" onclick="completeStep('{{ step.key }}')">Mark Done</button>
            {% endif %}
        </div>
        {% endfor %}
    </section>

    <section class="ops-panel">
        <h2>Recommendations</h2>
        <div class="ops-list">
            {% for rec in snapshot.recommendations %}
            <div class="ops-list-item">
                <span class="ops-badge {{ 'warn' if rec.priority == 'high' else 'info' }}">{{ rec.priority|title }}</span>
                <strong>{{ rec.title }}</strong>
                <p>{{ rec.message }}</p>
            </div>
            {% else %}
            <div class="ops-list-item">No open recommendations.</div>
            {% endfor %}
        </div>
    </section>
</main>
<script>
async function completeStep(step) {
  await fetch(`/api/onboarding/step/${step}/complete`, {method: "POST", headers: {"Content-Type": "application/json"}, body: "{}"});
  location.reload();
}
</script>
{% endblock %}