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

{% block title %}Reset Password - {{ login_brand_name }}{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/forgot_password.css">
{% endblock %}
{% block content %}
<div class="fp-shell">
    <div class="fp-card">
        <h1>Reset Password</h1>
        <p>Follow the steps below to reset your password using email or SMS verification.</p>

        {% if error %}
            <div class="error">{{ error }}</div>
        {% endif %}

        {% if success %}
            <div class="success-box">
                <strong>{{ success_title }}</strong>
                {{ success_message }}
            </div>
            <a href="/login" class="back-link">&larr; Back to Login</a>
        {% else %}

        {% if step == 1 %}
            <div class="step-indicator">
                <div class="step-dot active"></div>
                <div class="step-dot"></div>
                <div class="step-dot"></div>
            </div>
            <form method="POST" action="/forgot-password">
                <input type="hidden" name="step" value="1">
                <div class="form-group">
                    <label for="shop_code">Shop Code</label>
                    <input id="shop_code" name="shop_code" placeholder="Enter your shop code" required value="{{ prefill_shop_code or '' }}">
                </div>
                <div class="form-group">
                    <label for="username">Username</label>
                    <input id="username" name="username" placeholder="Enter your username" required value="{{ prefill_username or '' }}">
                </div>
                <button type="submit">Find My Account</button>
            </form>

        {% elif step == 2 %}
            <div class="step-indicator">
                <div class="step-dot done"></div>
                <div class="step-dot active"></div>
                <div class="step-dot"></div>
            </div>
            <p class="hil-inline-2a326cd784">
                Account found: <strong>{{ username }}</strong> at <strong>{{ shop_name }}</strong>
            </p>
            <form method="POST" action="/forgot-password">
                <input type="hidden" name="step" value="2">
                <input type="hidden" name="shop_code" value="{{ shop_code }}">
                <input type="hidden" name="username" value="{{ username }}">
                <input type="hidden" name="method" id="selected-method" value="">

                <label class="hil-inline-5c96b025bc">Choose verification method:</label>
                <div class="method-box">
                    {% if user_email %}
                    <div class="method-option" onclick="selectMethod('email', this)">
                        <div class="icon">&#9993;</div>
                        <div class="label">Email</div>
                        <div class="detail">{{ user_email }}</div>
                    </div>
                    {% endif %}
                    {% if user_phone %}
                    <div class="method-option" onclick="selectMethod('sms', this)">
                        <div class="icon">&#128241;</div>
                        <div class="label">SMS</div>
                        <div class="detail">{{ user_phone }}</div>
                    </div>
                    {% endif %}
                </div>

                {% if not user_email and not user_phone %}
                    <div class="error">
                        No email or phone number is associated with this account.
                        Please contact your shop admin or server owner to reset your password.
                    </div>
                {% endif %}

                <button type="submit" id="send-code-btn" disabled>Send Verification Code</button>
            </form>

            {% if code_display %}
            <div class="code-display">
                <div class="label">Your verification code ({{ code_method }}):</div>
                <div class="code">{{ code_display }}</div>
                <div class="hil-inline-0479c29699">
                    This code expires in 10 minutes. In production, this would be sent to your {{ code_method }}.
                </div>
            </div>
            {% endif %}

        {% elif step == 3 %}
            <div class="step-indicator">
                <div class="step-dot done"></div>
                <div class="step-dot done"></div>
                <div class="step-dot active"></div>
            </div>
            <p class="hil-inline-2a326cd784">
                A 6-digit code was sent via <strong>{{ method_label }}</strong>.
            </p>
            <form method="POST" action="/forgot-password">
                <input type="hidden" name="step" value="3">
                <input type="hidden" name="shop_code" value="{{ shop_code }}">
                <input type="hidden" name="username" value="{{ username }}">
                <input type="hidden" name="method" value="{{ method }}">
                <div class="form-group">
                    <label for="code">Verification Code</label>
                    <input id="code" name="code" placeholder="Enter 6-digit code" maxlength="6" required autocomplete="off" class="hil-inline-7842075fd8">
                </div>
                <button type="submit">Verify Code</button>
            </form>
            {% if code_display %}
            <div class="code-display">
                <div class="label">Your verification code ({{ code_method or method }}):</div>
                <div class="code">{{ code_display }}</div>
                <div class="hil-inline-0479c29699">
                    This code expires in 10 minutes.
                </div>
            </div>
            {% endif %}
            <form method="POST" action="/forgot-password" class="hil-inline-8a77e5a311">
                <input type="hidden" name="step" value="2">
                <input type="hidden" name="shop_code" value="{{ shop_code }}">
                <input type="hidden" name="username" value="{{ username }}">
                <input type="hidden" name="method" value="{{ method }}">
                <button type="submit" class="secondary">Resend Code</button>
            </form>

        {% elif step == 4 %}
            <div class="step-indicator">
                <div class="step-dot done"></div>
                <div class="step-dot done"></div>
                <div class="step-dot done"></div>
            </div>
            <p class="hil-inline-2a326cd784">
                Code verified! Set your new password below.
            </p>
            <form method="POST" action="/forgot-password">
                <input type="hidden" name="step" value="4">
                <input type="hidden" name="shop_code" value="{{ shop_code }}">
                <input type="hidden" name="username" value="{{ username }}">
                <div class="form-group">
                    <label for="new_password">New Password</label>
                    <input id="new_password" name="new_password" type="password" placeholder="Min 8 chars, letter + number" required minlength="8">
                </div>
                <div class="form-group">
                    <label for="confirm_password">Confirm Password</label>
                    <input id="confirm_password" name="confirm_password" type="password" placeholder="Re-enter password" required minlength="8">
                </div>
                <button type="submit">Reset Password</button>
            </form>
        {% endif %}

        <a href="/login" class="back-link">&larr; Back to Login</a>
        {% endif %}
    </div>

<script>
function selectMethod(method, element) {
    document.getElementById('selected-method').value = method;
    document.getElementById('send-code-btn').disabled = false;
    document.querySelectorAll('.method-option').forEach(function(el) {
        el.classList.remove('selected');
    });
    element.classList.add('selected');
}
</script>
{% endblock %}