{% extends 'base.html.twig' %}

{% block title %}Partager — Camlil{% endblock %}
{% block theme_color %}#000000{% endblock %}
{% block status_bar_style %}black-translucent{% endblock %}
{% block body_class %}bg-black overflow-hidden{% endblock %}

{% block body_main_padding %}{% endblock %}

{% block bottom_nav %}{% endblock %}

{% block body %}

{{ form_start(form, {attr: {
    'data-controller': 'moment-upload',
    'data-action': 'submit->moment-upload#submitForm',
    'data-turbo': 'false',
    class: 'fixed inset-0 flex flex-col',
}}) }}

<div class="sr-only">
    {{ form_widget(form.imageFile, {attr: {
        'data-moment-upload-target': 'input',
        'data-action': 'change->moment-upload#onFileChange',
        accept: 'image/*',
    }}) }}
</div>

<div data-moment-upload-target="selectionBackdrop"
     class="pointer-events-none absolute inset-0 z-0">
    <div class="absolute inset-0 bg-gradient-to-br from-stone-950 via-stone-900 to-black"></div>
    <div class="absolute inset-0 opacity-30"
         style="background: radial-gradient(ellipse 60% 50% at 50% 40%, #be123c44, transparent)"></div>
</div>

<div data-moment-upload-target="selectionScreen"
     class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-6 px-8"
     style="padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); padding-left: max(2rem, var(--safe-left)); padding-right: max(2rem, var(--safe-right))">

    <a href="{{ path('front.moment.show') }}"
       class="absolute flex items-center justify-center size-10 rounded-full bg-white/10 text-white/70 active:bg-white/20 transition-colors"
       style="top: calc(1rem + var(--safe-top)); left: calc(1rem + var(--safe-left))">
        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
        </svg>
    </a>

    <button type="button"
            data-action="click->moment-upload#openPicker"
            class="group flex flex-col items-center gap-5">
        <div class="size-28 rounded-[2.5rem] bg-white/8 border-2 border-dashed border-white/20 flex items-center justify-center group-active:bg-white/15 group-active:scale-95 transition-all">
            <svg class="size-14 text-white/40" fill="none" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"/>
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"/>
            </svg>
        </div>
        <div class="text-center">
            <p class="text-white font-bold text-lg">Choisir une photo</p>
            <p class="text-white/35 text-sm mt-1">Appuie pour ouvrir ta galerie</p>
        </div>
    </button>

    {{ form_errors(form.imageFile) }}
</div>

<div data-moment-upload-target="previewScreen"
     class="hidden absolute inset-0 z-10 flex min-h-0 flex-col">

    <div data-moment-upload-target="previewStage"
         class="absolute inset-0 z-0 min-h-0">
        <img data-moment-upload-target="previewImage"
             src="" alt=""
             class="absolute inset-0 size-full object-cover pointer-events-none">
        <canvas data-moment-upload-target="drawCanvas"
                class="absolute inset-0 size-full touch-none"
                style="pointer-events: none"></canvas>
    </div>

    <div class="pointer-events-none absolute inset-x-0 top-0 z-[1] h-40 bg-gradient-to-b from-black/60 to-transparent"></div>
    <div class="pointer-events-none absolute inset-x-0 bottom-0 z-[1] h-60 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>

    <div class="pointer-events-none relative z-10 flex min-h-0 w-full flex-1 flex-col"
         style="padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); padding-right: var(--safe-right)">

    <div class="pointer-events-auto relative z-10 flex items-center justify-between px-4 pt-3">

        <button type="button"
                data-action="click->moment-upload#clearSelection"
                class="flex items-center justify-center size-10 rounded-full bg-black/35 backdrop-blur-sm text-white active:bg-black/55 transition-colors">
            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
            </svg>
        </button>

        <div class="flex items-center gap-2" data-moment-upload-target="filterBar">

            {# Filtre #}
            <button type="button"
                    data-action="click->moment-upload#nextFilter"
                    class="flex flex-col items-center gap-0.5 px-3 py-1.5 rounded-xl bg-black/35 backdrop-blur-sm text-white active:bg-white/10 transition-colors">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42"/>
                </svg>
                <span data-moment-upload-target="filterName" class="text-[9px] font-bold">Normal</span>
            </button>

            {# Légende #}
            <button type="button"
                    data-action="click->moment-upload#toggleCaption"
                    class="flex flex-col items-center gap-0.5 px-3 py-1.5 rounded-xl bg-black/35 backdrop-blur-sm text-white active:bg-white/10 transition-colors">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/>
                </svg>
                <span class="text-[9px] font-bold">Légende</span>
            </button>

            <button type="button"
                    data-moment-upload-target="drawToggle"
                    data-action="click->moment-upload#toggleDrawMode"
                    class="flex flex-col items-center gap-0.5 px-3 py-1.5 rounded-xl bg-black/35 backdrop-blur-sm text-white active:bg-white/10 transition-colors">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/>
                </svg>
                <span class="text-[9px] font-bold">Dessin</span>
            </button>

        </div>
    </div>

    <div class="flex-1"></div>

    <div data-moment-upload-target="drawTools"
         class="pointer-events-auto hidden relative z-10 mx-4 mb-3 flex flex-wrap items-center justify-center gap-3 rounded-2xl bg-black/50 backdrop-blur-md border border-white/15 px-3 py-2.5">
        <div class="flex items-center gap-1.5">
            <button type="button" data-action="click->moment-upload#setDrawColor" data-moment-upload-color-param="#ffffff"
                    class="moment-upload-swatch size-7 rounded-full border-2 border-white/50 bg-white shadow-sm ring-2 ring-transparent data-[active=true]:ring-white"></button>
            <button type="button" data-action="click->moment-upload#setDrawColor" data-moment-upload-color-param="#f43f5e"
                    class="moment-upload-swatch size-7 rounded-full border-2 border-white/20 bg-rose-500 ring-2 ring-transparent data-[active=true]:ring-white"></button>
            <button type="button" data-action="click->moment-upload#setDrawColor" data-moment-upload-color-param="#facc15"
                    class="moment-upload-swatch size-7 rounded-full border-2 border-white/20 bg-yellow-400 ring-2 ring-transparent data-[active=true]:ring-white"></button>
            <button type="button" data-action="click->moment-upload#setDrawColor" data-moment-upload-color-param="#38bdf8"
                    class="moment-upload-swatch size-7 rounded-full border-2 border-white/20 bg-sky-400 ring-2 ring-transparent data-[active=true]:ring-white"></button>
        </div>
        <div class="h-6 w-px bg-white/15"></div>
        <button type="button"
                data-moment-upload-target="strokeWidthBtn"
                data-action="click->moment-upload#cycleStrokeWidth"
                class="text-[11px] font-bold text-white/90 px-2 py-1 rounded-lg bg-white/10 active:bg-white/20 min-w-[4.5rem]">
            Trait fin
        </button>
        <button type="button" data-action="click->moment-upload#clearDrawing"
                class="text-[11px] font-bold text-rose-300 px-2 py-1 rounded-lg bg-white/10 active:bg-white/20">
            Effacer
        </button>
    </div>

    {# Légende overlay #}
    <div data-moment-upload-target="captionPanel"
         class="pointer-events-auto hidden relative z-10 mx-4 mb-4">
        {{ form_widget(form.description, {attr: {
            'data-moment-upload-target': 'captionInput',
            class: 'w-full rounded-2xl bg-black/50 backdrop-blur-md border border-white/20 text-white placeholder-white/35 px-4 py-3 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-white/30 resize-none',
            placeholder: 'Décris ce moment…',
            rows: 2,
        }}) }}
    </div>

    <div class="pointer-events-auto relative z-10 flex justify-end px-5 pb-5">
        <button type="submit"
                class="flex items-center gap-2 rounded-full bg-rose-500 active:bg-rose-600 active:scale-95 text-white font-bold text-base px-7 py-3.5 shadow-2xl shadow-rose-900/60 transition-all">
            Partager
            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"/>
            </svg>
        </button>
    </div>

    </div>

</div>

{{ form_end(form) }}

{% endblock %}