{% extends 'main/base.html' %}
{% load i18n %}

{% block title %}{% trans "Withdrawal" %} - ODEON{% endblock %}

{% block top_icon %}
    <a href="/personal/" id="menu-button" style="width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: transparent; border: 2px solid rgba(255,255,255,0.2); color: var(--text-muted); font-size: 1.4rem; text-decoration: none;">👤</a>
{% endblock %}

{% block content %}
    <div style="position: relative;">
        {% include 'main/_subheader.html' with title=_("Withdrawal") back="/personal/" %}

        {% if error %}
        <div style="padding: 0.85rem 1rem; border-radius: 12px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; font-size: 0.9rem; margin-bottom: 1.25rem;">{{ error }}</div>
        {% endif %}

        {% if withdraw_locked %}
        <div style="padding: 1rem; border-radius: 12px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.35); margin-bottom: 1.25rem;">
            <p style="margin: 0 0 0.5rem; color: #f87171; font-weight: 800; font-size: 0.9rem;">🔒 {% trans "Withdrawal locked" %}</p>
            <p style="margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5;">{{ withdraw_lock_reason }}</p>
        </div>
        {% elif not progress.can_withdraw %}
        <!-- Commission locked until the ticketing sets are complete -->
        <div style="padding: 1rem; border-radius: 12px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.35); margin-bottom: 1.25rem;">
            <p style="margin: 0 0 0.5rem; color: #fbbf24; font-weight: 800; font-size: 0.9rem;">🔒 {% trans "Commission locked" %}</p>
            <p style="margin: 0 0 0.75rem; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5;">
                {% blocktrans with sets=progress.required_sets total=progress.required_tickets %}Complete {{ sets }} sets ({{ total }} rated movies) to unlock withdrawals.{% endblocktrans %}
            </p>
            <div style="height: 8px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden;">
                <div style="height: 100%; width: {{ progress.percent }}%; background: #fbbf24;"></div>
            </div>
            <p style="margin: 0.6rem 0 0; color: var(--text-main); font-size: 0.78rem; font-weight: 600;">
                {{ progress.completed_capped }} / {{ progress.required_tickets }} — {{ progress.remaining }} {% trans "more to go" %}.
                <a href="/task/" style="color: #38bdf8; text-decoration: none;">{% trans "Go to tasks ›" %}</a>
            </p>
        </div>
        {% endif %}

        <form method="post" action="{% url 'withdrawal' %}" id="withdrawal-form">
            {% csrf_token %}

            <!-- Withdrawal method -->
            <p style="margin: 0 0 0.85rem; color: var(--text-main); font-weight: 700;">{% trans "Withdrawal method" %}</p>
            <div style="display: grid; gap: 0.75rem; margin-bottom: 1.25rem;">
                {% for m in methods %}
                <label style="display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); cursor: pointer;">
                    <span style="width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: {{ m.color }}; color: #fff; font-size: 1.1rem; font-weight: 800;">{{ m.icon }}</span>
                    <span style="color: var(--text-main); font-weight: 700; flex: 1;">{{ m.label }}</span>
                    <input type="radio" name="method" value="{{ m.id }}"
                           data-label="{{ m.label }}" data-address="{{ m.address }}"
                           {% if selected_method == m.id %}checked{% elif not selected_method and forloop.first %}checked{% endif %}
                           style="width: 20px; height: 20px; accent-color: #f97316;" />
                </label>
                {% endfor %}
            </div>

            <!-- Withdrawal address (auto-filled from the selected method's bound wallet) -->
            <p style="margin: 0 0 0.35rem; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "Withdrawal address" %}</p>
            <p id="withdrawal-address" style="margin: 0 0 1.25rem; color: var(--text-muted); font-size: 0.9rem; word-break: break-all; min-height: 1.2rem;"></p>

            <!-- Amount -->
            <p style="margin: 0 0 0.5rem; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "Withdrawal Amount" %}</p>
            <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); margin-bottom: 0.75rem;">
                <span style="color: var(--text-muted); font-size: 1rem;">€</span>
                <input type="number" id="amount" name="amount" min="{{ min_withdrawal }}" step="0.01" required
                       placeholder="{% trans 'Enter The Withdrawal Amount' %}" value="{{ amount|default:'' }}"
                       style="flex: 1; min-width: 0; padding: 1rem 0; border: none; background: transparent; color: var(--text-main); font-size: 1rem; outline: none;" />
            </div>
            <div style="padding: 0.9rem 1rem; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); color: #93c5fd; font-weight: 700; font-size: 0.9rem; margin-bottom: 1.25rem;">
                <span id="selected-method-label"></span>
            </div>

            <!-- Summary -->
            <div style="border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); padding: 0.25rem 1.25rem; margin-bottom: 1.5rem;">
                <div style="display: flex; justify-content: space-between; padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);">
                    <span style="color: var(--text-main); font-weight: 600;">{% trans "Service charge" %}</span>
                    <span style="color: var(--text-main);">€<span id="service-charge">{{ service_charge|floatformat:2 }}</span></span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);">
                    <span style="color: var(--text-main); font-weight: 600;">{% trans "Actual Amount Received" %}</span>
                    <span style="color: var(--text-main);">€<span id="actual-received">0.00</span></span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);">
                    <span style="color: var(--text-main); font-weight: 600;">{% trans "Balance" %}</span>
                    <span style="color: var(--text-main);">{{ balance }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 0.9rem 0;">
                    <span style="color: var(--text-main); font-weight: 600;">{% trans "Minimum Withdrawal" %}</span>
                    <span style="color: var(--text-main);">€{{ min_withdrawal }}.00</span>
                </div>
            </div>

            <!-- Withdrawal PIN -->
            {% if has_pin %}
            <p style="margin: 0 0 0.5rem; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "Withdrawal PIN" %}</p>
            <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); margin-bottom: 1.25rem;">
                <input type="password" id="withdrawal_pin" name="withdrawal_pin" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required
                       placeholder="{% trans 'Enter your 4-digit PIN' %}" autocomplete="off"
                       style="flex: 1; min-width: 0; padding: 1rem 0; border: none; background: transparent; color: var(--text-main); font-size: 1rem; letter-spacing: 0.4em; outline: none;" />
            </div>
            {% else %}
            <div style="padding: 0.9rem 1rem; border-radius: 10px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.35); color: #fbbf24; font-size: 0.85rem; margin-bottom: 1.25rem;">
                {% trans "You need a withdrawal PIN to withdraw." %}
                <a href="/withdrawal-pin/" style="color: #38bdf8; text-decoration: none; font-weight: 700;">{% trans "Set your PIN ›" %}</a>
            </div>
            {% endif %}

            {% if progress.can_withdraw %}
            <button type="submit"
                    style="width: 100%; padding: 1rem; border-radius: 999px; background: transparent; border: 1px solid #38bdf8; color: #38bdf8; font-weight: 700; font-size: 1rem; cursor: pointer; margin-bottom: 1.5rem;">{% trans "Withdraw Now" %}</button>
            {% else %}
            <button type="submit" disabled
                    style="width: 100%; padding: 1rem; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #64748b; font-weight: 700; font-size: 1rem; cursor: not-allowed; margin-bottom: 1.5rem;">🔒 {% trans "Withdraw Now" %}</button>
            {% endif %}
        </form>

        <!-- Tips -->
        <h3 style="margin: 0 0 0.5rem; color: var(--text-main); font-size: 0.95rem;">{% trans "Tips:" %}</h3>
        <p style="margin: 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.6;">{% trans "Withdrawals are reviewed and approved by an administrator before payout. Make sure your selected method has a bound wallet address. Withdrawals under €20,000 incur no fees." %}</p>
    </div>

    <script>
        (function () {
            var radios = document.querySelectorAll('input[name="method"]');
            var addrEl = document.getElementById('withdrawal-address');
            var methodLabelEl = document.getElementById('selected-method-label');
            var amountEl = document.getElementById('amount');
            var serviceEl = document.getElementById('service-charge');
            var receivedEl = document.getElementById('actual-received');

            function selected() {
                for (var i = 0; i < radios.length; i++) { if (radios[i].checked) return radios[i]; }
                return null;
            }
            function refresh() {
                var r = selected();
                if (r) {
                    methodLabelEl.textContent = r.dataset.label;
                    addrEl.textContent = r.dataset.address || '{% trans "No address bound — bind a wallet for this method first." %}';
                }
                var charge = parseFloat(serviceEl.textContent) || 0;
                var amt = parseFloat(amountEl.value) || 0;
                var net = Math.max(0, amt - charge);
                receivedEl.textContent = net.toFixed(2);
            }
            for (var i = 0; i < radios.length; i++) { radios[i].addEventListener('change', refresh); }
            amountEl.addEventListener('input', refresh);
            refresh();
        })();
    </script>
{% endblock %}