{% set mapPayload = this.mapPayload %}
{% set selectedDepot = this.selectedDepot %}
{% set categories = this.categories %}
{% set depots = this.depots %}
{% set listedDepots = this.listedDepots %}
{% set resultsTitle = this.resultsTitle %}
{% set availableCountries = this.availableCountries %}
{% set selectedCountryLabel = this.selectedCountryLabel %}
{% set listStateKey = (selectedCategoryId ?: 'all') ~ '-' ~ (selectedCountry ?: 'all') ~ '-' ~ (selectedDepotId ?: 'none') %}

<div {{ attributes.defaults({ class: 'grid gap-6 lg:grid-cols-[minmax(0,1.35fr)_minmax(22rem,0.65fr)]' }) }}>
    <div class="relative overflow-hidden rounded-3xl bg-stone-100 ring-1 ring-black/5">
        <div data-live-ignore class="relative min-h-[26rem] lg:min-h-[42rem]">
            <div
                class="h-full min-h-[26rem] w-full lg:min-h-[42rem]"
                data-controller="depot-map"
                data-depot-map-locator-id-value="{{ locatorId }}"
                data-depot-map-markers-value="{{ mapPayload.markers|json_encode|e('html_attr') }}"
                {% if selectedDepotId %}
                    data-depot-map-selected-depot-id-value="{{ selectedDepotId }}"
                {% endif %}
                data-depot-map-fit-on-connect-value="true"
                data-depot-map-fit-on-update-value="false"
            ></div>
        </div>

        <button
            type="button"
            class="absolute bottom-4 left-4 z-[500] inline-flex cursor-pointer items-center gap-2 rounded-full bg-white/95 px-4 py-2 text-xs font-medium text-stone-900 shadow-lg ring-1 ring-black/5 lg:hidden"
            data-action="live#action"
            data-live-action-param="toggleSidebar"
        >
            {{ (sidebarOpen ? 'depot_locator.actions.hide_list' : 'depot_locator.actions.show_list')|trans }}
            <span>{{ depots|length }}</span>
        </button>
    </div>

    <aside class="relative">
        <details
            id="depot-category-filters"
            class="mb-3 overflow-hidden rounded-2xl bg-white ring-1 ring-stone-200"
            {% if selectedCategoryId %}open{% endif %}
        >
            <summary class="flex cursor-pointer list-none items-center justify-between px-4 py-3 text-sm font-medium text-stone-900">
                <span>{{ 'depot_locator.filters.categories'|trans }}</span>
                <span class="text-xs font-normal text-stone-500">
                    {{ selectedCategoryId ? 'depot_locator.filters.one_selection'|trans : 'depot_locator.filters.options_count'|trans({'%count%': categories|length}) }}
                </span>
            </summary>
            <div class="flex flex-wrap gap-2 border-t border-stone-200 p-4">
                <button
                    id="depot-category-filter-all"
                    type="button"
                    class="inline-flex min-h-10 cursor-pointer items-center rounded-full px-4 text-sm transition {{ selectedCategoryId ? 'bg-white text-stone-700 ring-1 ring-stone-300 hover:bg-stone-50' : 'bg-stone-900 text-white' }}"
                    data-action="live#action"
                    data-live-action-param="resetCategory"
                >
                    {{ 'depot_locator.filters.all'|trans }}
                </button>
                {% for category in categories %}
                    {% set categoryColor = category.color is defined and category.color ? category.color : null %}
                    <button
                        id="depot-category-filter-{{ category.id.toString }}"
                        type="button"
                        class="inline-flex min-h-10 cursor-pointer items-center rounded-full px-4 text-sm transition {{ selectedCategoryId == category.id.toString ? 'bg-stone-900 text-white' : 'bg-white text-stone-700 ring-1 ring-stone-300 hover:bg-stone-50' }}"
                        data-action="live#action"
                        data-live-action-param="filterByCategory"
                        data-live-category-id-param="{{ category.id.toString }}"
                    >
                        {% if categoryColor %}
                            <span class="mr-2 inline-flex h-2 w-2 rounded-full {{ selectedCategoryId == category.id.toString ? 'bg-white/85' : '' }}"
                                {% if selectedCategoryId != category.id.toString %}style="background: {{ categoryColor }};"{% endif %}></span>
                        {% endif %}
                        {{ category.name }}
                    </button>
                {% endfor %}
            </div>
        </details>

        <details
            id="depot-country-filters"
            class="mb-4 overflow-hidden rounded-2xl bg-white ring-1 ring-stone-200"
            {% if selectedCountry %}open{% endif %}
        >
            <summary class="flex cursor-pointer list-none items-center justify-between px-4 py-3 text-sm font-medium text-stone-900">
                <span>{{ 'depot_locator.filters.countries'|trans }}</span>
                <span class="text-xs font-normal text-stone-500">
                    {{ selectedCountryLabel ?: 'depot_locator.filters.options_count'|trans({'%count%': availableCountries|length}) }}
                </span>
            </summary>
            <div class="flex flex-wrap gap-2 border-t border-stone-200 p-4">
                <button
                    id="depot-country-filter-all"
                    type="button"
                    class="inline-flex min-h-10 cursor-pointer items-center rounded-full px-4 text-sm transition {{ selectedCountry ? 'bg-white text-stone-700 ring-1 ring-stone-300 hover:bg-stone-50' : 'bg-stone-900 text-white' }}"
                    data-action="live#action"
                    data-live-action-param="resetCountry"
                >
                    {{ 'depot_locator.filters.all_countries'|trans }}
                </button>
                {% for country in availableCountries %}
                    <button
                        id="depot-country-filter-{{ country.code }}"
                        type="button"
                        class="inline-flex min-h-10 cursor-pointer items-center rounded-full px-4 text-sm transition {{ selectedCountry == country.code ? 'bg-stone-900 text-white' : 'bg-white text-stone-700 ring-1 ring-stone-300 hover:bg-stone-50' }}"
                        data-action="live#action"
                        data-live-action-param="filterByCountry"
                        data-live-country-param="{{ country.code }}"
                    >
                        {{ country.label }}
                    </button>
                {% endfor %}
            </div>
        </details>

        <div class="overflow-hidden rounded-3xl bg-white ring-1 ring-stone-200">
            <div class="flex items-center justify-between border-b border-stone-200 px-5 py-4">
                <div>
                    <p class="text-sm font-medium text-stone-900">{{ resultsTitle ?: 'depot_locator.results.title_default'|trans }}</p>
                    <p class="text-sm text-stone-500">
                        {{ (listedDepots|length > 1 ? 'depot_locator.results.count_plural' : 'depot_locator.results.count_singular')|trans({'%count%': listedDepots|length}) }}
                        {% if selectedCountryLabel %}
                            , {{ selectedCountryLabel }}
                        {% endif %}
                    </p>
                </div>
                <button
                    type="button"
                    class="inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full text-stone-500 transition hover:bg-stone-100 hover:text-stone-900 lg:hidden"
                    data-action="live#action"
                    data-live-action-param="{{ selectedDepot ? 'clearSelection' : 'closeSidebar' }}"
                >
                    <span class="sr-only">{{ 'depot_locator.actions.close'|trans }}</span>
                    &times;
                </button>
            </div>

            <div class="max-h-[42rem] overflow-y-auto">
                <div id="depot-featured-panel-{{ listStateKey }}">
                    {% if selectedDepot %}
                        <article
                            id="selected-depot-{{ selectedDepot.id.toString }}"
                            class="border-b border-stone-200 bg-[#f7f2ea] px-5 py-5 ring-1 ring-inset ring-[#d8c6a8]"
                        >
                            <div class="mb-2 flex items-start justify-between gap-4">
                                <div>
                                    {% set selectedDepotColor = selectedDepot.category and selectedDepot.category.color is defined and selectedDepot.category.color ? selectedDepot.category.color : null %}
                                    <p class="mb-2 inline-flex rounded-full bg-stone-900 px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-[0.1em] text-white">
                                        {{ selectedDepot.category ? selectedDepot.category.name : 'depot_locator.results.place'|trans }}
                                    </p>
                                    <h3 class="text-base font-semibold text-stone-900">{{ selectedDepot.name ?: selectedDepot.city }}</h3>
                                    {% if selectedDepot.category %}
                                        <p class="mt-1 inline-flex items-center gap-2 text-sm text-stone-500">
                                            {% if selectedDepotColor %}
                                                <span class="inline-flex h-2 w-2 rounded-full" style="background: {{ selectedDepotColor }};"></span>
                                            {% endif %}
                                            {{ selectedDepot.category.name }}
                                        </p>
                                    {% endif %}
                                </div>
                                <button
                                    type="button"
                                    class="hidden cursor-pointer text-sm text-stone-500 underline-offset-2 hover:text-stone-900 hover:underline lg:inline"
                                    data-action="live#action"
                                    data-live-action-param="clearSelection"
                                >
                                    {{ 'depot_locator.actions.close_detail'|trans }}
                                </button>
                            </div>

                            <div class="space-y-2 text-sm text-stone-700">
                                {% if selectedDepot.address %}
                                    <p>{{ selectedDepot.address }}</p>
                                {% endif %}
                                <p>{{ selectedDepot.postal }} {{ selectedDepot.city }}{% if selectedDepot.countryName %}, {{ selectedDepot.countryName }}{% endif %}</p>
                                {% if selectedDepot.phone %}
                                    <p><a href="tel:{{ selectedDepot.phone|replace({' ': ''}) }}" class="hover:underline">{{ selectedDepot.phone }}</a></p>
                                {% endif %}
                                {% if selectedDepot.email %}
                                    <p><a href="mailto:{{ selectedDepot.email }}" class="hover:underline">{{ selectedDepot.email }}</a></p>
                                {% endif %}
                                {% if selectedDepot.website %}
                                    <p><a href="{{ selectedDepot.website }}" class="hover:underline" target="_blank" rel="noopener">Voir le site</a></p>
                                {% endif %}
                            </div>

                            {% if selectedDepot.description %}
                                <div class="prose prose-stone mt-4 max-w-none text-sm">
                                    {{ selectedDepot.description|raw }}
                                </div>
                            {% endif %}
                        </article>
                    {% endif %}
                </div>

                <div id="depot-list-panel-{{ listStateKey }}" class="{{ sidebarOpen ? 'block' : 'hidden' }} lg:block">
                    {% for depot in listedDepots %}
                        {% if not selectedDepotId or depot.id.toString != selectedDepotId %}
                            {% set depotCategoryColor = depot.category and depot.category.color is defined and depot.category.color ? depot.category.color : null %}
                            <button
                                id="depot-item-{{ depot.id.toString }}"
                                type="button"
                                class="block w-full cursor-pointer border-b border-stone-200 bg-white px-5 py-4 text-left transition hover:bg-stone-50"
                                data-action="live#action"
                                data-live-action-param="selectDepot"
                                data-live-depot-id-param="{{ depot.id.toString }}"
                            >
                                <div class="flex items-start gap-4">
                                    <div>
                                        <div class="flex flex-wrap items-center gap-2">
                                            <p class="text-sm font-semibold text-stone-900">{{ depot.name ?: depot.city }}</p>
                                        </div>
                                        {% if depot.category %}
                                            <p class="mt-1 inline-flex items-center gap-2 text-sm text-stone-500">
                                                {% if depotCategoryColor %}
                                                    <span class="inline-flex h-2 w-2 rounded-full" style="background: {{ depotCategoryColor }};"></span>
                                                {% endif %}
                                                {{ depot.category.name }}
                                            </p>
                                        {% endif %}
                                        <p class="mt-2 text-sm text-stone-600">
                                            {% if depot.address %}{{ depot.address }}, {% endif %}
                                            {{ depot.postal }} {{ depot.city }}
                                        </p>
                                    </div>
                                </div>
                            </button>
                        {% endif %}
                    {% else %}
                        <div class="px-5 py-10 text-sm text-stone-500">
                            {{ 'depot_locator.results.empty'|trans }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </aside>
</div>
