{% trans_default_domain 'admin' %}

{# Initials for the preview avatar: first letter of the first + last word. #}
{% macro initials(name) %}
{%- set parts = name|trim|split(' ')|filter(p => p is not empty) -%}
{%- if parts is empty -%}?{%- else -%}{{ (parts|first|slice(0, 1) ~ (parts|length > 1 ? parts|last|slice(0, 1) : ''))|upper }}{%- endif -%}
{% endmacro %}

{% import _self as ui %}

{% set isVariant = offer.isVariant %}
{# Offer-level read-only (variant / no edit permission) locks the editor. #}
{% set locked = isReadonly|default(false) or isVariant %}

{% set strip = this.previewStrip() %}
{# Contacts that carry any usable data — drives the preview (and its empty state). #}
{% set usable = contacts|filter(c => (c.name ~ c.phone ~ c.email)|trim is not empty) %}

<div {{ attributes.defaults({ class: 'border-t border-gray-200 dark:border-gray-800 mt-6 pt-6' }) }}>

    <div class="grid grid-cols-1 items-start gap-8 xl:grid-cols-[minmax(0,1fr)_390px]">

        {# ─────────── editor ─────────── #}
        <div>
            {# These contact details are published on the public offer page. #}
            <div class="mb-4 flex items-center gap-2.5 rounded-lg border border-blue-200 bg-blue-50 px-3.5 py-2.5 text-xs font-medium text-blue-800 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-200">
                <twig:ux:icon name="ph:globe" class="size-4 flex-none text-blue-500 dark:text-blue-400" />
                <span>{{ 'offers.contact.pubnote'|trans }}</span>
            </div>

            {% if contacts is empty %}
                <div class="rounded-xl border border-dashed border-gray-300 px-6 py-10 text-center dark:border-gray-700">
                    <twig:ux:icon name="ph:user-plus" class="mx-auto size-7 text-gray-300 dark:text-gray-600" />
                    <p class="mt-2 text-sm font-semibold text-gray-700 dark:text-gray-200">{{ 'offers.contact.empty.title'|trans }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ 'offers.contact.empty.text'|trans }}</p>
                </div>
            {% else %}
                <div class="flex flex-col gap-4">
                    {% for i, c in contacts %}
                        <div class="rounded-xl border border-gray-200 bg-white transition focus-within:border-primary-400 focus-within:ring-2 focus-within:ring-primary-500/15 dark:border-gray-700 dark:bg-gray-800/60">
                            <div class="flex items-center gap-2.5 border-b border-gray-100 px-3 py-2.5 dark:border-gray-700/60">
                                <span class="grid size-5 flex-none place-items-center rounded-md bg-gray-100 text-[11px] font-bold text-gray-500 dark:bg-gray-700 dark:text-gray-300">{{ i + 1 }}</span>
                                <span class="flex-1 truncate text-sm font-semibold text-gray-800 dark:text-gray-100">{{ c.name|trim ?: 'offers.contact.untitled'|trans }}</span>
                                {% if not locked %}
                                    <button type="button"
                                            class="grid place-items-center rounded-md p-1.5 text-gray-400 transition hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-500/10"
                                            title="{{ 'offers.contact.removeContact'|trans }}"
                                            data-action="live#action"
                                            data-live-action-param="removeContact"
                                            data-live-index-param="{{ i }}">
                                        <twig:ux:icon name="ph:trash" class="size-4" />
                                    </button>
                                {% endif %}
                            </div>

                            <div class="flex flex-col gap-3.5 px-3.5 py-3.5">
                                {# name #}
                                <div>
                                    <label class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-200" for="c-name-{{ c.uuid }}">{{ 'offers.contact_methods.name'|trans }}</label>
                                    <input id="c-name-{{ c.uuid }}" type="text"
                                           {{ locked ? 'disabled' : '' }}
                                           data-model="debounce(200)|contacts.{{ i }}.name"
                                           value="{{ c.name }}"
                                           placeholder="{{ 'offers.contact.name.placeholder'|trans }}"
                                           class="block w-full rounded-lg border-0 px-3 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 transition placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-gray-50 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-600">
                                </div>

                                {# phone + email #}
                                <div class="grid grid-cols-1 gap-3.5 sm:grid-cols-2">
                                    <div>
                                        <label class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-200" for="c-phone-{{ c.uuid }}">{{ 'offers.contact_methods.phone'|trans }}</label>
                                        <input id="c-phone-{{ c.uuid }}" type="tel"
                                               {{ locked ? 'disabled' : '' }}
                                               data-model="debounce(200)|contacts.{{ i }}.phone"
                                               value="{{ c.phone }}"
                                               placeholder="{{ 'offers.contact.phone.placeholder'|trans }}"
                                               class="block w-full rounded-lg border-0 px-3 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 transition placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-gray-50 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-600">
                                    </div>
                                    <div>
                                        <label class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-200" for="c-email-{{ c.uuid }}">{{ 'offers.contact_methods.email'|trans }}</label>
                                        <input id="c-email-{{ c.uuid }}" type="email"
                                               {{ locked ? 'disabled' : '' }}
                                               data-model="debounce(200)|contacts.{{ i }}.email"
                                               value="{{ c.email }}"
                                               placeholder="{{ 'offers.contact.email.placeholder'|trans }}"
                                               class="block w-full rounded-lg border-0 px-3 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 transition placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-gray-50 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-600">
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            {% if not locked %}
                <button type="button"
                        data-action="live#action"
                        data-live-action-param="addContact"
                        class="mt-4 flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-gray-300 px-4 py-2.5 text-sm font-semibold text-gray-700 transition hover:border-primary-400 hover:bg-primary-50 hover:text-primary-700 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-primary-500/10">
                    <twig:ux:icon name="ph:plus" class="size-4" />
                    {{ 'offers.contact.addContact'|trans }}
                </button>
            {% endif %}
        </div>

        {# ─────────── live preview ─────────── #}
        <div class="xl:sticky xl:top-4">
            <div class="mb-2.5 flex items-center justify-between gap-2">
                <span class="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                    <span class="relative flex size-2">
                        <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-60"></span>
                        <span class="relative inline-flex size-2 rounded-full bg-green-600"></span>
                    </span>
                    {{ 'offers.contact.preview.label'|trans }}
                </span>
                <span class="text-[11px] text-gray-400 dark:text-gray-500">{{ 'offers.contact.preview.hint'|trans }}</span>
            </div>

            <div class="overflow-hidden rounded-[20px] border border-gray-200 bg-white shadow-lg dark:border-gray-700">
                <div class="flex h-8 items-center gap-1.5 border-b border-gray-100 bg-gray-50 px-3.5 dark:border-gray-700 dark:bg-gray-800">
                    <span class="size-2 rounded-full bg-gray-200 dark:bg-gray-600"></span>
                    <span class="size-2 rounded-full bg-gray-200 dark:bg-gray-600"></span>
                    <span class="size-2 rounded-full bg-gray-200 dark:bg-gray-600"></span>
                </div>

                <div class="max-h-[70vh] overflow-y-auto">
                    {# frontend-styled preview (always light, like the real offer page) #}
                    <div class="bg-[#fbf7f1] px-4 pb-5 pt-4 text-[#2b2620]">
                        <div class="flex items-center gap-3 rounded-xl border border-[#ece6dd] bg-white p-3">
                            <span class="size-10 flex-none rounded-lg bg-[#f3eee5]"></span>
                            <span class="min-w-0">
                                <b class="block truncate text-[13.5px] font-semibold tracking-tight">{{ strip.title ?: 'offers.contact.preview.offerFallback'|trans }}</b>
                                <span class="text-[11.5px] text-[#7a746d]">
                                    {%- if strip.date %}{{ strip.date|date('d.m.Y') }}{% if strip.date|date('H:i') != '00:00' %} · {{ strip.date|date('H:i') }}{% endif %}{% endif -%}
                                    {%- if (strip.minAge or strip.maxAge) %}{{ strip.date ? ' · ' }}{{ strip.minAge ?: '' }}–{{ strip.maxAge ?: '' }} {{ 'offers.contact.preview.years'|trans }}{% endif -%}
                                </span>
                            </span>
                        </div>

                        <h3 class="mt-4 mb-1 text-[19px] font-semibold tracking-tight text-[#2a1a10]">{{ 'offers.contact.preview.heading'|trans }}</h3>
                        <p class="mb-3.5 text-[12.5px] text-[#7a746d]">{{ 'offers.contact.preview.lede'|trans }}</p>

                        {% if usable is empty %}
                            <p class="text-[12px] italic text-[#a39d93]">{{ 'offers.contact.preview.empty'|trans }}</p>
                        {% else %}
                            {% for c in usable %}
                                {% set name = c.name|trim %}
                                <div class="mb-2.5 flex items-start gap-3 rounded-xl border border-[#ece6dd] bg-white p-3.5">
                                    <span class="grid size-10 flex-none place-items-center rounded-full bg-[#f3ece1] text-[14px] font-bold text-[#9a6a14]">{{ name ? ui.initials(name) : '?' }}</span>
                                    <div class="min-w-0 flex-1">
                                        <div class="text-[13.5px] font-semibold tracking-tight text-[#2b2620]">
                                            {% if name %}{{ name }}{% else %}<span class="font-medium italic text-[#b3a99a]">{{ 'offers.contact.preview.anon'|trans }}</span>{% endif %}
                                        </div>
                                        {% if c.phone|trim %}
                                            <div class="mt-1.5 flex items-center gap-2 text-[12px] text-[#5f594f]">
                                                <twig:ux:icon name="ph:phone" class="size-3.5 flex-none text-[#9a948a]" />
                                                <a href="tel:{{ c.phone|trim }}" class="font-medium text-[#b4571f]">{{ c.phone|trim }}</a>
                                            </div>
                                        {% endif %}
                                        {% if c.email|trim %}
                                            <div class="mt-1.5 flex items-center gap-2 text-[12px] text-[#5f594f]">
                                                <twig:ux:icon name="ph:envelope-simple" class="size-3.5 flex-none text-[#9a948a]" />
                                                <a href="mailto:{{ c.email|trim }}" class="font-medium text-[#b4571f]">{{ c.email|trim }}</a>
                                            </div>
                                        {% endif %}
                                        {% if not c.phone|trim and not c.email|trim %}
                                            <div class="mt-1.5 text-[12px] text-[#b3a99a]">{{ 'offers.contact.preview.noData'|trans }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if message|default %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Daten gespeichert" :message="message" />
        </twig:Turbo:Stream:Prepend>
    {% endif %}

    <twig:Admin:Edit:Footer :isDirty="true" :isReadonly="locked" :sections="sections" :section="section" :params="{uuid: offer.uuid}" :useLiveAction="true" />
</div>
