{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}{{ t.title_signup }} — PickkerMarket{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{% endblock %}

{% block content %}
<section class="content-section">
    <form class="auth-form" method="post" enctype="multipart/form-data" novalidate>
        {% csrf_token %}
        <h1>{{ t.signup_title }}</h1>

        {% if form.non_field_errors %}
            <div class="field-error">{{ form.non_field_errors }}</div>
        {% endif %}

        <label>{{ t.signup_role_label }}</label>
        <div class="signup-path-row" style="display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px;">
            <label class="signup-path-card" data-path="personal" style="flex: 1; min-width: 150px; border: 2px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color 0.15s;">
                <input type="radio" name="signup_path" value="personal" checked style="margin-bottom: 6px;">
                <strong style="display: block;">{{ t.signup_path_personal_label }}</strong>
                <span style="display: block; font-size: 0.82rem; color: var(--muted); font-weight: 400;">{{ t.signup_path_personal_desc }}</span>
            </label>
            <label class="signup-path-card" data-path="business" style="flex: 1; min-width: 150px; border: 2px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color 0.15s;">
                <input type="radio" name="signup_path" value="business" style="margin-bottom: 6px;">
                <strong style="display: block;">{{ t.signup_path_business_label }}</strong>
                <span style="display: block; font-size: 0.82rem; color: var(--muted); font-weight: 400;">{{ t.signup_path_business_desc }}</span>
            </label>
            <label class="signup-path-card" data-path="picker" style="flex: 1; min-width: 150px; border: 2px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color 0.15s;">
                <input type="radio" name="signup_path" value="picker" style="margin-bottom: 6px;">
                <strong style="display: block;">{{ t.signup_path_picker_label }}</strong>
                <span style="display: block; font-size: 0.82rem; color: var(--muted); font-weight: 400;">{{ t.signup_path_picker_desc }}</span>
            </label>
        </div>
        <input type="hidden" name="role" id="signup-role-hidden" value="customer">
        <input type="hidden" name="account_type" id="signup-account-type-hidden" value="b2c">

        <h3 class="form-section-heading">{{ t.signup_account_details_heading }}</h3>

        <label for="{{ form.email.id_for_label }}">{{ t.signup_email_label }}</label>
        {{ form.email }}
        {% if form.email.errors %}<div class="field-error">{{ form.email.errors }}</div>{% endif %}

        <div class="form-row-2">
            <div>
                <label for="{{ form.first_name.id_for_label }}">{{ t.signup_first_name }}</label>
                {{ form.first_name }}
            </div>
            <div>
                <label for="{{ form.last_name.id_for_label }}">{{ t.signup_last_name }}</label>
                {{ form.last_name }}
            </div>
        </div>

        <label for="{{ form.phone_number.id_for_label }}">{{ t.signup_phone_number }}</label>
        {{ form.phone_number }}

        <label for="{{ form.preferred_language.id_for_label }}">{{ t.signup_preferred_language }}</label>
        {{ form.preferred_language }}

        <h3 class="form-section-heading">{{ t.signup_password_heading }}</h3>

        <label for="{{ form.password1.id_for_label }}">{{ t.signup_password }}</label>
        {{ form.password1 }}

        <label for="{{ form.password2.id_for_label }}">{{ t.signup_confirm_password }}</label>
        {{ form.password2 }}
        {% if form.password2.errors %}<div class="field-error">{{ form.password2.errors }}</div>{% endif %}

        <div class="role-section" data-role-fields="business">
            <h3 class="form-section-heading">{{ t.signup_account_type }}</h3>

            <label for="{{ form.business_name.id_for_label }}">{{ t.signup_business_name }}</label>
            {{ form.business_name }}
            {% if form.business_name.errors %}<div class="field-error">{{ form.business_name.errors }}</div>{% endif %}

            <div class="form-row-2">
                <div>
                    <label for="{{ form.tin_number.id_for_label }}">{{ t.signup_tin_number }}</label>
                    {{ form.tin_number }}
                    {% if form.tin_number.errors %}<div class="field-error">{{ form.tin_number.errors }}</div>{% endif %}
                </div>
                <div>
                    <label for="{{ form.business_license_number.id_for_label }}">{{ t.signup_business_license_number }}</label>
                    {{ form.business_license_number }}
                    {% if form.business_license_number.errors %}<div class="field-error">{{ form.business_license_number.errors }}</div>{% endif %}
                </div>
            </div>

            <label style="display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 6px;">
                {{ form.wants_fleet_registration }} {{ t.signup_register_fleet }}
            </label>
            <p id="fleet-tin-note" style="display: none; color: var(--muted); font-size: 0.85rem; margin: -2px 0 6px;">{{ t.signup_fleet_tin_required_note }}</p>
        </div>

        <div class="role-section" data-role-fields="personal business">
            <h3 class="form-section-heading">{{ t.signup_address_heading }}</h3>

            <button type="button" id="customer-locate-btn" class="locate-btn" style="margin: 6px 0 4px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
                {{ t.signup_use_current_location }}
            </button>

            <label for="{{ form.address.id_for_label }}">{{ t.signup_address }}</label>
            {{ form.address }}

            <div class="form-row-2">
                <div>
                    <label for="{{ form.city.id_for_label }}">{{ t.signup_city }}</label>
                    {{ form.city }}
                </div>
                <div>
                    <label for="{{ form.area.id_for_label }}">{{ t.signup_area }}</label>
                    {{ form.area }}
                </div>
            </div>
        </div>

        <div class="role-section" data-role-fields="picker">
            <h3 class="form-section-heading">{{ t.signup_vehicle_market_heading }}</h3>

            <label for="id_truck_type_id">{{ t.signup_vehicle_type }}</label>
            <select id="id_truck_type_id" name="truck_type_id">
                <option value="">—</option>
                {% for tt in truck_types %}
                <option value="{{ tt.id }}">{{ tt.icon }} {{ tt.name }}{% if tt.capacity_label %} ({{ tt.capacity_label }}){% endif %}</option>
                {% endfor %}
            </select>
            {% if form.truck_type_id.errors %}<div class="field-error">{{ form.truck_type_id.errors }}</div>{% endif %}

            <label for="{{ form.license_plate.id_for_label }}">{{ t.signup_license_plate }}</label>
            {{ form.license_plate }}

            <label for="market-select">{{ t.signup_market_select_label }}</label>
            <select id="market-select" name="market_id">
                <option value="">{{ t.signup_market_select_placeholder }}</option>
                {% regroup markets by region as region_list %}
                {% for region in region_list %}
                <optgroup label="{{ region.grouper|default:t.signup_market_select_placeholder }}">
                    {% for m in region.list %}
                    <option value="{{ m.id }}" data-lat="{{ m.lat }}" data-lng="{{ m.lng }}">{{ m.name }}</option>
                    {% endfor %}
                </optgroup>
                {% endfor %}
            </select>

            <label style="margin-top: 10px;">{{ t.signup_market_location_label }}</label>
            <p style="color: var(--muted); font-size: 0.85rem; margin: -4px 0 6px;">{{ t.signup_market_location_help }}</p>
            {% if form.market_location.errors %}<div class="field-error">{{ form.market_location.errors }}</div>{% endif %}

            <div class="map-search-row">
                <div class="map-search-wrap">
                    <input type="text" id="picker-location-search" placeholder="e.g. Kariakoo Market">
                    <div class="geocode-results" id="picker-location-results"></div>
                </div>
                <button type="button" id="picker-locate-btn" class="locate-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
                    {{ t.signup_use_current_location }}
                </button>
            </div>
            <div id="picker-location-map" class="map-container"></div>
            <p id="nearest-market-note" style="display: none; color: var(--muted); font-size: 0.85rem; margin-top: 6px;"></p>
            {{ form.market_location }}
            {{ form.location_lat }}
            {{ form.location_lng }}

            <label for="{{ form.license_number.id_for_label }}">{{ t.signup_license_number }}</label>
            {{ form.license_number }}
        </div>

        <div class="field-checkbox-row" style="display: flex; align-items: flex-start; gap: 8px; margin: 14px 0;">
            {{ form.agree_to_policies }}
            <label for="{{ form.agree_to_policies.id_for_label }}" style="font-weight: normal;">
                {{ t.signup_agree_prefix }}
                <a href="{% url 'market:terms' %}" target="_blank" rel="noopener">{{ t.signup_agree_terms }}</a>,
                <a href="{% url 'market:privacy' %}" target="_blank" rel="noopener">{{ t.signup_agree_privacy }}</a>
                {{ t.signup_agree_and }}
                <a href="{% url 'market:cookies' %}" target="_blank" rel="noopener">{{ t.signup_agree_cookies }}</a>
            </label>
        </div>
        {% if form.agree_to_policies.errors %}<div class="field-error">{{ form.agree_to_policies.errors }}</div>{% endif %}

        <button type="submit" class="btn-cta">{{ t.signup_submit }}</button>
    </form>

    <p class="auth-switch">{{ t.signup_has_account }} <a href="{% url 'accounts:login' %}">{{ t.signup_login_link }}</a></p>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/location-picker.js' %}"></script>
<script>
    // Keeps the real role/account_type fields (hidden — SignupForm expects
    // these exact names, see accounts/forms.py::SignupForm) in sync with
    // whichever of the 3 path cards is selected, and highlights the active
    // card. main.js's own role-section show/hide logic reads the same
    // signup_path radios directly, so this script only needs to own the
    // hidden-field mapping + the visual highlight.
    document.addEventListener('DOMContentLoaded', function () {
        var pathRadios = document.querySelectorAll('input[name="signup_path"]');
        var cards = document.querySelectorAll('.signup-path-card');
        var roleHidden = document.getElementById('signup-role-hidden');
        var accountTypeHidden = document.getElementById('signup-account-type-hidden');
        if (!pathRadios.length || !roleHidden || !accountTypeHidden) return;

        var PATH_TO_FIELDS = {
            personal: { role: 'customer', account_type: 'b2c' },
            business: { role: 'customer', account_type: 'b2b' },
            picker: { role: 'picker', account_type: '' },
        };

        function syncPath() {
            var checked = document.querySelector('input[name="signup_path"]:checked');
            var path = checked ? checked.value : 'personal';
            var fields = PATH_TO_FIELDS[path] || PATH_TO_FIELDS.personal;
            roleHidden.value = fields.role;
            accountTypeHidden.value = fields.account_type;
            cards.forEach(function (card) {
                card.style.borderColor = card.dataset.path === path ? 'var(--blue)' : 'var(--border)';
            });
        }

        pathRadios.forEach(function (radio) {
            radio.addEventListener('change', syncPath);
        });
        syncPath();
    });
</script>
<script>
    // TIN/license only become required once the customer opts into
    // registering a delivery fleet — this mirrors accounts/forms.py::
    // SignupForm.clean(), which is the actual enforcement; this is just the
    // matching client-side hint so the requirement isn't a surprise on submit.
    document.addEventListener('DOMContentLoaded', function () {
        var fleetCheckbox = document.getElementById('{{ form.wants_fleet_registration.id_for_label }}');
        var tinInput = document.getElementById('{{ form.tin_number.id_for_label }}');
        var licenseInput = document.getElementById('{{ form.business_license_number.id_for_label }}');
        var note = document.getElementById('fleet-tin-note');
        if (!fleetCheckbox || !tinInput || !licenseInput || !note) return;

        function syncRequired() {
            var required = fleetCheckbox.checked;
            tinInput.required = required;
            licenseInput.required = required;
            note.style.display = required ? 'block' : 'none';
        }
        fleetCheckbox.addEventListener('change', syncRequired);
        syncRequired();
    });
</script>
<script>
    // Customer delivery-address autofill — no map, just a quick GPS fix
    // followed by a reverse-geocode lookup that fills Address/City/Mtaa in
    // one tap, since a customer just needs a rough starting point here (the
    // precise delivery pin is dropped later, at checkout).
    //
    // Previously: on any GPS failure (permission denied, unavailable, or a
    // timeout -- all common on a desktop browser), this silently reset the
    // button and did nothing else, leaving the customer with blank fields
    // and zero explanation. Now falls back to the same IP-based location
    // static/js/location-picker.js already uses for the picker/warehouse
    // map flow, with the same persistent "this is only approximate" warning
    // (not a fading label) -- and a real, visible message in the one case
    // where even that fails, instead of silent nothing.
    document.addEventListener('DOMContentLoaded', function () {
        var locateBtn = document.getElementById('customer-locate-btn');
        if (!locateBtn) return;
        var addressInput = document.getElementById('{{ form.address.id_for_label }}');
        var cityInput = document.getElementById('{{ form.city.id_for_label }}');
        var areaInput = document.getElementById('{{ form.area.id_for_label }}');
        var originalText = locateBtn.innerHTML;

        function showNotice(message, isWarning) {
            hideNotice();
            var banner = document.createElement('div');
            banner.className = 'fuzzy-confirm-banner' + (isWarning ? ' approx-location-banner' : '');
            banner.id = 'customer-location-notice';
            banner.innerHTML = '<div class="fuzzy-confirm-inner"><span class="fuzzy-confirm-text">' + message + '</span></div>';
            locateBtn.parentNode.insertBefore(banner, locateBtn.nextSibling);
            requestAnimationFrame(function () { banner.classList.add('visible'); });
        }

        function hideNotice() {
            var existing = document.getElementById('customer-location-notice');
            if (existing) {
                existing.classList.remove('visible');
                setTimeout(function () { existing.remove(); }, 200);
            }
        }

        // Any manual edit means the customer has taken over from here --
        // an approximate-location warning about a GPS/IP guess no longer
        // applies once they're typing their own address.
        [addressInput, cityInput, areaInput].forEach(function (el) {
            if (el) el.addEventListener('input', hideNotice);
        });

        function fillFromCoords(lat, lng) {
            return fetch('{% url "market:reverse_geocode_components_view" %}?lat=' + lat + '&lng=' + lng)
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (addressInput && data.address) addressInput.value = data.address;
                    if (cityInput && data.city) cityInput.value = data.city;
                    if (areaInput && data.mtaa) areaInput.value = data.mtaa;
                    return !!(data && data.address);
                })
                .catch(function () { return false; });
        }

        function fallbackToIP() {
            fetch('https://ipwho.is/')
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (data && data.success && data.latitude && data.longitude) {
                        var lat = data.country_code === 'TZ' ? data.latitude : -6.8200;
                        var lng = data.country_code === 'TZ' ? data.longitude : 39.2700;
                        fillFromCoords(lat, lng).then(function () {
                            showNotice(
                                "This address is only an approximate area based on your internet connection, not your exact location — " +
                                "please double-check or edit it before continuing.",
                                true,
                            );
                        });
                    } else {
                        throw new Error('IP fail');
                    }
                })
                .catch(function () {
                    showNotice(
                        "We couldn't detect your location. Please type your address, city, and mtaa below.",
                        true,
                    );
                })
                .finally(function () {
                    locateBtn.innerHTML = originalText;
                });
        }

        locateBtn.addEventListener('click', function () {
            hideNotice();
            locateBtn.innerHTML = '{{ t.signup_locating|escapejs }}';
            if (!navigator.geolocation) {
                fallbackToIP();
                return;
            }
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    fillFromCoords(position.coords.latitude, position.coords.longitude).then(function (ok) {
                        locateBtn.innerHTML = originalText;
                        if (!ok) fallbackToIP();
                    });
                },
                function () {
                    // PC browsers often block or fail geolocation -- try IP fallback
                    // instead of silently giving up, same as the map-based picker flow.
                    fallbackToIP();
                },
                { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 },
            );
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        initLocationPicker({
            mapId: 'picker-location-map',
            latInputId: '{{ form.location_lat.id_for_label }}',
            lngInputId: '{{ form.location_lng.id_for_label }}',
            addressInputId: '{{ form.market_location.id_for_label }}',
            searchInputId: 'picker-location-search',
            resultsId: 'picker-location-results',
            locateBtnId: 'picker-locate-btn',
            marketSelectId: 'market-select',
            nearestMarketNoteId: 'nearest-market-note',
            initialLat: -6.7924,
            initialLng: 39.2083,
            initialZoom: 12,
        });
    });
</script>
{% endblock %}