{% extends 'base.html.twig' %}
{% block title %}{{ story.title }} | Bajki TROPO{% endblock %}
{% block meta_description %}{{ story.excerpt }}{% endblock %}

{% from '_macros/image.html.twig' import picture %}
{% block body %}
<article class="py-20" data-controller="reader-theme story-read" data-reader-theme-target="article" data-story-read-slug-value="{{ story.slug }}">
    <div class="max-w-4xl mx-auto px-4">
        {# Nawigacja powrotna + przełącznik trybu nocnego #}
        <div class="flex items-center justify-between gap-4">
            <a href="{{ path('app_stories') }}" class="text-sm text-gray-500 hover:text-dark transition">&larr; {{ 'stories.show.all_stories'|trans }}</a>
            <button type="button" class="reader-toggle" data-action="click->reader-theme#toggle" aria-label="Przełącz tryb nocny">
                <svg class="icon-moon w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
                <svg class="icon-sun w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" stroke-linecap="round"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32l1.41-1.41"/></svg>
                <span class="label-dark">Tryb nocny</span>
                <span class="label-light">Tryb dzienny</span>
            </button>
        </div>

        {# Nagłówek #}
        <div class="mt-6 mb-10">
            <div class="flex items-center gap-3 mb-3">
                <span class="text-sm font-medium text-nova">{{ 'stories.index.season'|trans({'%number%': story.season}) }}</span>
                <span class="text-gray-300">&middot;</span>
                <span class="text-sm font-medium text-gray-400">{{ 'stories.show.episode'|trans({'%number%': story.episode}) }}</span>
                <span class="text-sm text-gray-400">{{ 'stories.show.reading_time'|trans({'%time%': story.readingTime}) }}</span>
                {% if character %}
                <span class="px-2.5 py-0.5 rounded-full text-xs font-semibold"
                      style="background-color: {{ character.color }}15; color: {{ character.color }}">
                    {{ character.emoji }} {{ character.name }}
                </span>
                {% endif %}
            </div>
            <h1 class="text-3xl sm:text-4xl font-extrabold text-dark leading-tight">{{ story.title }}</h1>
            <div class="flex items-center gap-3 mt-4">
                <a href="{{ path('app_story_pdf', {slug: story.slug}) }}"
                   class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border border-gray-200 text-gray-600 text-sm font-medium rounded-full hover:bg-gray-50 hover:text-dark transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    {{ 'stories.show.download_pdf'|trans }}
                </a>
                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_story_md', {slug: story.slug}) }}"
                   class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border border-gray-200 text-gray-600 text-sm font-medium rounded-full hover:bg-gray-50 hover:text-dark transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                    Pobierz MD
                </a>
                {% endif %}
            </div>
        </div>

        {# Czytaj · Oglądaj · Słuchaj — only the formats this episode has #}
        {% set audio = story.audio ?? null %}
        {% if youtube_id or audio %}
        <div class="-mt-4 mb-10" data-controller="story-media" data-story-media-youtube-id-value="{{ youtube_id }}" data-story-media-slug-value="{{ story.slug }}">
            <div class="media-switch" role="group" aria-label="{{ 'stories.show.media_label'|trans }}">
                <button type="button" class="media-switch-btn" aria-pressed="true" data-story-media-target="readBtn" data-action="story-media#read"><span aria-hidden="true">📖</span> {{ 'stories.show.mode_read'|trans }}</button>
                {% if youtube_id %}
                <button type="button" class="media-switch-btn" aria-pressed="false" data-story-media-target="watchBtn" data-action="story-media#watch"><span aria-hidden="true">▶️</span> {{ 'stories.show.mode_watch'|trans }}</button>
                {% endif %}
                {% if audio %}
                <button type="button" class="media-switch-btn" aria-pressed="false" data-story-media-target="listenBtn" data-action="story-media#listen"><span aria-hidden="true">🎧</span> {{ 'stories.show.mode_listen'|trans }}</button>
                {% endif %}
            </div>

            {% if youtube_id %}
            <div class="mt-6" data-story-media-target="video" hidden>
                <div class="story-video" data-story-media-target="screen" data-title="{{ story.title }}">
                    {% if story.cover is defined %}
                        {{ picture(story.cover, 'story_illustration', '', 'story-video-poster') }}
                    {% endif %}
                    <button type="button" class="story-video-play" data-action="story-media#play" aria-label="{{ 'stories.show.play_video'|trans }}">
                        <span class="story-video-play-icon"><svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span>
                        <span>{{ 'stories.show.play_video'|trans }}</span>
                        <span class="story-video-note">{{ 'stories.show.video_note'|trans }}</span>
                    </button>
                </div>
                <p class="mt-3 text-right">
                    <a href="{{ story.youtubeUrl }}" target="_blank" rel="noopener" class="text-sm font-medium text-gray-500 hover:text-red-500 transition">{{ 'stories.show.watch_youtube'|trans }}</a>
                </p>
            </div>
            {% endif %}

            {% if audio %}
            <div class="audio-bar" data-story-media-target="audioBar" hidden>
                <div class="audio-bar-inner">
                    <div class="audio-bar-title">
                        <span class="text-xs uppercase tracking-widest text-white/60">🎧 {{ 'stories.show.mode_listen'|trans }}</span>
                        <span class="block font-bold truncate">{{ story.title }}</span>
                    </div>
                    <audio controls preload="none" src="{{ asset(audio) }}" class="audio-bar-player" data-story-media-target="audio"></audio>
                    <button type="button" class="audio-bar-close" data-action="story-media#closeAudio" aria-label="{{ 'stories.show.close_audio'|trans }}">&times;</button>
                </div>
            </div>
            {% endif %}
        </div>
        {% endif %}

        {# Treść bajki — include odcinka #}
        <div class="story-content text-lg text-gray-700 leading-relaxed">
            {% include episode_template %}
        </div>

        {# Następny odcinek #}
        <div class="mt-16 pt-8 border-t border-gray-200" data-story-read-target="end">
            {% if story.nextEpisode %}
            <div class="bg-cream rounded-2xl border border-gray-200 p-6 text-center">
                <p class="text-sm text-gray-400 mb-1">{{ 'stories.show.next_episode'|trans }}</p>
                {% if story.nextEpisode.slug %}
                <a href="{{ path('app_story_show', {slug: story.nextEpisode.slug}) }}" class="text-lg font-bold text-dark hover:text-scout transition">
                    {{ story.nextEpisode.title }} &rarr;
                </a>
                {% else %}
                <p class="text-lg font-bold text-gray-400">{{ 'stories.show.coming_soon'|trans({'%title%': story.nextEpisode.title}) }}</p>
                {% endif %}
            </div>
            {% endif %}

            {# CTA #}
            <div class="mt-8 text-center">
                <p class="text-gray-500 mb-4">{{ 'stories.show.play_cta'|trans({'%name%': character ? character.name : 'Scoutem'}) }}</p>
                <a href="{{ path('app_download') }}" class="inline-flex items-center px-6 py-3 bg-blitz text-white font-semibold rounded-full hover:bg-blitz/90 transition">
                    {{ 'stories.show.download'|trans }}
                </a>
            </div>
        </div>
    </div>
</article>
{% endblock %}