{% extends "global/Page.html" %}
{% load static %}

{{ block title }}
{{ endblock }}

{{ block content }}
<style>
    .intake-container { max-width: 720px; margin: 0 auto; }
    .intake-instructions { background: #f0f4ff; border-left: 4px solid #667eea; padding: 20px; border-radius: 4px; margin-bottom: 18px; }
    .intake-instructions h2 { margin: 0 0 10px; color: #1f2937; }
    .intake-instructions p { margin: 6px 0; color: #4b5563; }
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-weight: 600; color: #1f2937; margin-bottom: 8px; }
    .form-group input[type="text"] { width: 100%; padding: 12px; border: 2px solid #d1d5db; border-radius: 6px; font-size: 15px; }
    .form-group input[type="text"]:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
    .help-block { margin-top: 6px; font-size: 0.9em; color: #4b5563; }
    .feedback { font-size: 0.95em; color: #4b5563; min-height: 22px; margin-top: 10px; }
    .feedback.error { color: #b91c1c; font-weight: 600; }
    .feedback.ok { color: #047857; font-weight: 600; }
    .suggestions { position: relative; }
    .suggestions-list { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); max-height: 240px; overflow-y: auto; display: none; }
    .suggestions-list.show { display: block; }
    .suggestion-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f3f4f6; }
    .suggestion-item:last-child { border-bottom: none; }
    .suggestion-item:hover { background: #f8fafc; }
    .title-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .icon-button { background: transparent; border: none; padding: 4px; margin: 0; cursor: pointer; color: #4b5563; border-radius: 6px; }
    .icon-button:hover { background: #f3f4f6; }
    .icon-button:focus { outline: none; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
    .icon-button svg { width: 18px; height: 18px; display: block; }
    .form-group input[type="text"][readonly] { background: #f8fafc; }
    .button-row { display: flex; gap: 12px; margin-top: 10px; }
    .button-row button { flex: none; padding: 10px 16px; font-size: 14px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: background 0.2s, color 0.2s; border: none; }
    .button-primary { background: #4c51bf; color: #fff; }
    .button-primary:disabled { background: #c7d2fe; cursor: not-allowed; }
    .button-primary:hover:not(:disabled) { background: #4338ca; }
    .button-secondary { background: #e5e7eb; color: #1f2937; }
    .button-secondary:hover { background: #d1d5db; }
</style>

<div class="intake-container">
    <div class="intake-instructions">
        <h2>Welcome!</h2>
        <p>Start typing your name and select it from the dropdown suggestions.</p>
        <p>Once you select your name, we suggest your title.</p>
    </div>

    <input
        type="hidden"
        id="id_org_chart_position"
        name="org_chart_position"
        required
        value="{{ player.field_maybe_none('org_chart_position') }}"
    >

    <div class="form-group" id="nameStep">
        <label for="id_first_name">Your name</label>
        <div class="suggestions">
            <input
                type="text"
                name="first_name"
                id="id_first_name"
                autocomplete="off"
                required
                placeholder="Start typing your name"
                value="{% with v=player.field_maybe_none('first_name') %}{% if v and v != 'None' %}{{ v }}{% endif %}{% endwith %}"
            />
            <ul class="suggestions-list" id="nameSuggestions" aria-label="Name suggestions"></ul>
        </div>
        <div class="help-block">Start typing and select your full name from the suggestions.</div>
        <div class="feedback" id="nameFeedback"></div>
    </div>

    <div class="form-group" id="titleStep" style="display: none;">
        <div class="title-label-row">
            <label for="id_role_title">Your title</label>
            <button type="button" class="icon-button" id="editTitleBtn" aria-label="Edit title" title="Edit title">
                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25Zm2.92 2.33H5v-.92l9.06-9.06.92.92L5.92 19.58ZM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82Z"/>
                </svg>
            </button>
        </div>
        <input
            type="text"
            id="id_role_title"
            name="role_title"
            placeholder="We suggest your title after you select your name"
            maxlength="150"
            readonly
            value="{% with v=player.field_maybe_none('role_title') %}{% if v and v != 'None' %}{{ v }}{% endif %}{% endwith %}"
        />
        <div class="help-block">You can edit your title or proceed with our suggestion.</div>
    </div>

    <div class="button-row">
        <button type="submit" class="button-primary" id="submitBtn" disabled>Continue</button>
        <button type="button" class="button-secondary" id="clearBtn">Clear</button>
    </div>
</div>

<script>
    const teamNames = {{ team_names_json|safe }};
    const teamIdByName = {{ team_id_by_name_json|safe }};
    const teamTitleByName = {{ team_title_by_name_json|safe }};

    const nameField = document.getElementById('id_first_name');
    const nameSuggestions = document.getElementById('nameSuggestions');
    const titleField = document.getElementById('id_role_title');
    const positionField = document.getElementById('id_org_chart_position');
    const submitButton = document.getElementById('submitBtn');
    const clearBtn = document.getElementById('clearBtn');
    const titleStep = document.getElementById('titleStep');
    const nameFeedback = document.getElementById('nameFeedback');
    const editTitleBtn = document.getElementById('editTitleBtn');

    let takenPositions = new Set({{ taken_positions_json|safe }});
    let myReservedPosition = null;
    let titleEditedByUser = false;

    const MAX_SUGGESTIONS = 6;

    if (titleField) {
        titleField.required = false;
    }

    function setFeedback(text, kind) {
        if (!nameFeedback) return;
        nameFeedback.textContent = text || '';
        nameFeedback.classList.remove('error', 'ok');
        if (kind) nameFeedback.classList.add(kind);
    }

    function showTitleStep(show) {
        if (!titleStep || !titleField) return;
        // Use an explicit display value to avoid any edge cases where ''
        // doesn't reliably override inline styles in some template reloads.
        titleStep.style.display = show ? 'block' : 'none';
        titleField.required = !!show;
        if (show) {
            titleField.readOnly = true;
        } else {
            titleField.readOnly = true;
        }
    }

    function enableTitleEditing() {
        if (!titleField) return;
        titleField.readOnly = false;
        titleField.focus();
        try {
            const len = titleField.value ? titleField.value.length : 0;
            titleField.setSelectionRange(len, len);
        } catch (e) {
            // Some browsers can throw if input isn't focusable yet.
        }
    }

    function releaseReservation() {
        if (myReservedPosition !== null) {
            liveSend({type: 'release_position', position_id: myReservedPosition});
            myReservedPosition = null;
        }
    }

    function reservePosition(id) {
        if (id === myReservedPosition) return;
        releaseReservation();
        liveSend({type: 'reserve_position', position_id: id});
        myReservedPosition = id;
    }

    function applySuggestedTitleForName(name) {
        if (!titleField) return;
        if (titleEditedByUser && titleField.value) return;
        const suggested = teamTitleByName ? teamTitleByName[name] : null;
        if (suggested) {
            titleField.value = suggested;
            titleEditedByUser = false;
            titleField.readOnly = true;
        } else {
            // If we don't have a suggestion, let the participant type one.
            titleField.value = '';
            titleEditedByUser = false;
            titleField.readOnly = false;
        }
    }

    function updateUIFromName() {
        const raw = (nameField && nameField.value) ? nameField.value.trim() : '';
        const id = (raw && teamIdByName) ? teamIdByName[raw] : undefined;

        if (id === undefined) {
            positionField.value = '';
            showTitleStep(false);
            submitButton.disabled = true;
            releaseReservation();
            if (!raw) {
                setFeedback('', null);
            } else {
                setFeedback('Please select your full name from the dropdown suggestions.', 'error');
            }
            return;
        }

        positionField.value = id;
        showTitleStep(true);
        applySuggestedTitleForName(raw);

        if (takenPositions.has(id) && id !== myReservedPosition) {
            setFeedback('That name has already been selected by another participant.', 'error');
            submitButton.disabled = true;
            releaseReservation();
            return;
        }

        reservePosition(id);
        // No positive confirmation needed; only show errors.
        setFeedback('', null);
        submitButton.disabled = !(titleField && titleField.value.trim());
    }

    function hideSuggestions() {
        if (!nameSuggestions) return;
        nameSuggestions.classList.remove('show');
        nameSuggestions.innerHTML = '';
    }

    function renderSuggestions(query) {
        if (!nameSuggestions || !Array.isArray(teamNames)) return;
        const q = (query || '').trim().toLowerCase();
        if (!q) {
            hideSuggestions();
            return;
        }

        const starts = [];
        const contains = [];
        for (const name of teamNames) {
            const n = (name || '').toLowerCase();
            if (!n) continue;
            if (n.startsWith(q)) {
                starts.push(name);
            } else if (n.includes(q)) {
                contains.push(name);
            }
            if (starts.length + contains.length >= MAX_SUGGESTIONS) {
                // Keep scanning a bit to get enough startsWith matches, but cap overall.
                if (starts.length >= MAX_SUGGESTIONS) break;
            }
        }

        const matches = starts.concat(contains).slice(0, MAX_SUGGESTIONS);
        if (!matches.length) {
            hideSuggestions();
            return;
        }

        nameSuggestions.innerHTML = '';
        for (const name of matches) {
            const li = document.createElement('li');
            li.className = 'suggestion-item';
            li.textContent = name;
            li.addEventListener('mousedown', (e) => {
                // mousedown so it fires before input blur.
                e.preventDefault();
                nameField.value = name;
                hideSuggestions();
                updateUIFromName();
            });
            nameSuggestions.appendChild(li);
        }
        nameSuggestions.classList.add('show');
    }

    if (titleField) {
        titleField.addEventListener('input', () => {
            titleEditedByUser = true;
            submitButton.disabled = !(titleField.value.trim() && positionField.value);
        });
    }
    if (editTitleBtn) {
        editTitleBtn.addEventListener('click', () => {
            enableTitleEditing();
        });
    }
    if (nameField) {
        nameField.addEventListener('input', () => {
            renderSuggestions(nameField.value);
            updateUIFromName();
        });
        nameField.addEventListener('change', () => {
            renderSuggestions(nameField.value);
            updateUIFromName();
        });
        nameField.addEventListener('focus', () => {
            renderSuggestions(nameField.value);
        });
        nameField.addEventListener('blur', () => {
            // Delay so a click/mousedown on a suggestion can apply.
            window.setTimeout(() => hideSuggestions(), 120);
        });
    }
    if (clearBtn) {
        clearBtn.addEventListener('click', () => {
            if (nameField) nameField.value = '';
            if (titleField) titleField.value = '';
            titleEditedByUser = false;
            positionField.value = '';
            submitButton.disabled = true;
            showTitleStep(false);
            setFeedback('', null);
            hideSuggestions();
            releaseReservation();
            if (nameField) nameField.focus();
        });
    }

    function liveRecv(data) {
        if (data.type === 'position_taken') {
            takenPositions.add(data.position_id);
        } else if (data.type === 'position_released') {
            takenPositions.delete(data.position_id);
        } else if (data.type === 'taken_positions') {
            takenPositions = new Set(data.positions);
        }
        updateUIFromName();
    }

    window.addEventListener('load', () => {
        liveSend({type: 'get_taken_positions'});
        updateUIFromName();
    });

    window.addEventListener('beforeunload', () => {
        releaseReservation();
    });
</script>

{{ endblock }}