{% extends 'layouts/app.html.twig' %}

{% block title %}AI Draft #{{ draft.id }} | micey-projects{% endblock %}

{% block app_content %}
    {% include 'partials/_flash_messages.html.twig' %}
    <div id="ajax-flash" class="ajax-flash" aria-live="polite"></div>

    {% set project = draft.project %}
    {% set quality_state = quality_report.has_errors ? 'is-error' : (quality_report.has_warnings ? 'is-warning' : 'is-good') %}

    <div class="ai-draft-review-page">
        <a href="{{ path('app_ai_review') }}" class="ai-draft-back-link">
            <span class="ui-icon">arrow_back</span>
            <span>Powrót do listy draftów</span>
        </a>

        <section class="panel ai-draft-overview">
            <div class="ai-draft-overview__main">
                <div class="ai-draft-overview__image">
                    {% if project and project.artPath %}
                        <img src="{{ asset(project.artPath) }}" alt="Art {{ project.name }}">
                    {% else %}
                        <div class="ai-draft-overview__placeholder">{{ project ? project.symbol|slice(0, 2)|upper : 'AI' }}</div>
                    {% endif %}
                </div>

                <div class="ai-draft-overview__content">
                    <div class="ai-draft-overview__badges">
                        <span class="mono-badge">DRAFT-{{ draft.id }}</span>
                        <span class="text-badge text-badge--warning" data-ai-draft-status>{{ draft.statusLabel }}</span>
                    </div>

                    <h2 class="ai-draft-overview__title">
                        {% if project %}
                            {{ project.name }}
                        {% else %}
                            AI Draft #{{ draft.id }}
                        {% endif %}
                    </h2>

                    <div class="ai-draft-overview__meta">
                        {% if project %}
                            <a href="{{ path('app_project_show', { id: project.id }) }}#ai">
                                Pokaż projekt źródłowy <span class="ui-icon">open_in_new</span>
                            </a>
                        {% else %}
                            <span>Brak przypisanego projektu źródłowego</span>
                        {% endif %}
                        <span>Źródło: <strong>{{ draft.sourceType == 'api' ? 'OpenAI API' : draft.sourceType }}</strong></span>
                    </div>
                </div>
            </div>

            <div class="ai-draft-overview__side">
                <span>Model AI</span>
                <strong>{{ draft.aiProfile ? draft.aiProfile.name : 'AI' }}</strong>
                <small>{{ draft.platform ? draft.platform.name : 'platforma' }}</small>
            </div>

            <div class="ai-draft-stats" data-ai-stats>
                <span class="ai-draft-stat-pill" data-ai-stat="fields">Pola: {{ stats.fields_accepted }}/{{ stats.fields_total }} zaakceptowane</span>
                <span class="ai-draft-stat-pill" data-ai-stat="blocks">Bloki: {{ stats.blocks_accepted }}/{{ stats.blocks_total }} zaakceptowane</span>
                <span class="ai-draft-stat-pill ai-draft-stat-pill--warning" data-ai-stat="regeneration">Do regeneracji: {{ stats.fields_regeneration }}</span>
                <span class="ai-draft-stat-pill ai-draft-stat-pill--muted" data-ai-stat="rejected">Odrzucone: {{ stats.fields_rejected }}</span>
                <span class="ai-draft-stat-pill ai-draft-stat-pill--status">Status: {{ draft.statusLabel }}</span>
            </div>
        </section>

        <details class="ai-quality-compact {{ quality_state }}">
            <summary>
                <span class="ai-quality-compact__title">
                    <span class="ui-icon">fact_check</span>
                    Ocena jakości AI
                </span>
                <span class="ai-quality-compact__score">{{ quality_report.score }}/100</span>
                <span class="ai-quality-compact__message">
                    {% if quality_report.has_errors %}
                        Są błędy jakościowe do sprawdzenia.
                    {% elseif quality_report.has_warnings %}
                        Są ostrzeżenia, ale draft można dalej edytować.
                    {% else %}
                        Brak błędów i ostrzeżeń.
                    {% endif %}
                </span>
                <span class="ui-icon ai-quality-compact__chevron">expand_more</span>
            </summary>

            <div class="ai-quality-compact__body">
                <form method="get" action="{{ path('app_ai_draft_show', { id: draft.id }) }}" class="ai-quality-compact__refresh">
                    <button class="button button--ghost button--tiny" type="submit">Odśwież ocenę</button>
                </form>

                {% if quality_report.errors is not empty %}
                    <div class="ai-quality-list ai-quality-list--error">
                        <strong>Błędy</strong>
                        <ul>
                            {% for error in quality_report.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}

                {% if quality_report.warnings is not empty %}
                    <div class="ai-quality-list ai-quality-list--warning">
                        <strong>Warningi</strong>
                        <ul>
                            {% for warning in quality_report.warnings %}
                                <li>{{ warning }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}

                {% if quality_report.suggestions is not empty %}
                    <div class="ai-quality-list">
                        <strong>Sugestie</strong>
                        <ul>
                            {% for suggestion in quality_report.suggestions %}
                                <li>{{ suggestion }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
            </div>
        </details>

        <section class="ai-review-section">
            <div class="ai-review-section__header">
                <div>
                    <p class="panel__eyebrow">Zawartość wygenerowana</p>
                    <h3 class="panel__section-title">Pola AI Draft</h3>
                    <p class="panel__text">
                        Edycja ręczna otwiera się ikoną ołówka. Po akceptacji wiersz zwija treść i zostaje oznaczony lekką zielenią.
                    </p>
                </div>

                {% if draft.sourceType == 'api' %}
                    <span class="ai-review-section__hint">Źródło: OpenAI API</span>
                {% endif %}
            </div>

            <div class="ai-review-rows">
                {% for item in review_view.fields %}
                    {% include 'ai/drafts/_review_field_row.html.twig' with { draft: draft, item: item } %}
                {% else %}
                    <div class="empty-state">Brak standardowych pól w draftcie.</div>
                {% endfor %}
            </div>
        </section>

        <section class="ai-review-section">
            <div class="ai-review-section__header">
                <div>
                    <p class="panel__eyebrow">Long description</p>
                    <h3 class="panel__section-title">Długi opis jako puzzle</h3>
                    <p class="panel__text">
                        Długi opis składa się z bloków. Zaakceptowane bloki zostaną połączone w finalne pole long_description.
                    </p>
                </div>
            </div>

            <div class="ai-review-rows">
                {% for item in review_view.accepted_long_blocks %}
                    {% include 'ai/drafts/_review_block_row.html.twig' with { draft: draft, item: item, accepted_preview: true } %}
                {% endfor %}

                {% for item in review_view.active_long_blocks %}
                    {% include 'ai/drafts/_review_block_row.html.twig' with { draft: draft, item: item, accepted_preview: false } %}
                {% else %}
                    {% if review_view.accepted_long_blocks is empty %}
                        <div class="empty-state">Brak bloków długiego opisu. Dodaj blok ręcznie albo wygeneruj odpowiedź AI z blokami.</div>
                    {% endif %}
                {% endfor %}
            </div>

            <details class="ai-extra-accordion ai-add-block-accordion mt-3">
                <summary>+ Dodaj nowy blok długiego opisu</summary>
                <form method="post" action="{{ path('app_ai_draft_block_add', { id: draft.id }) }}" class="stack-form ai-add-form">
                    <input type="hidden" name="_token" value="{{ csrf_token('ai_draft_block_add_' ~ draft.id) }}">
                    <div class="form-grid form-grid--two">
                        <label>Typ bloku z profilu
                            <select class="form-control" name="block_code">
                                <option value="">Własny blok</option>
                                {% for block in review_view.available_long_blocks %}
                                    <option value="{{ block.code }}">{{ block.name }} / {{ block.code }}</option>
                                {% endfor %}
                            </select>
                        </label>
                        <label>Nazwa własna
                            <input class="form-control" name="block_name" placeholder="np. Dla kogo to jest">
                        </label>
                    </div>
                    <label>Treść HTML bloku
                        <textarea class="form-control" name="content" rows="5" placeholder="<h3>...</h3><p>...</p>"></textarea>
                    </label>
                    <button class="button button--primary" type="submit">Dodaj blok</button>
                </form>
            </details>
        </section>

        {% if review_view.suggestions %}
            <section class="ai-review-section ai-suggestions-panel">
                <div class="ai-review-section__header">
                    <div>
                        <p class="panel__eyebrow">Komentarz AI</p>
                        <h3 class="panel__section-title">{{ review_view.suggestions.label }}</h3>
                        <p class="panel__text">Sugestie są komentarzem do całej edycji, a nie polem produktu.</p>
                    </div>
                </div>

                <article class="ai-review-row ai-review-row--suggestions {{ review_view.suggestions.status_class }}">
                    <div class="ai-review-row__content ai-rendered-content">{{ review_view.suggestions.html|raw }}</div>

                    <div class="ai-review-row__panels">
                        <button class="ai-row-tool ai-row-tool--text" type="button" data-ai-toggle-panel="ai-suggestions-example-{{ draft.id }}" aria-expanded="false">
                            Zapisz sugestie jako przykład
                        </button>
                        <div id="ai-suggestions-example-{{ draft.id }}" class="ai-row-panel" hidden>
                            <form method="post" action="{{ path('app_ai_draft_save_example', { id: draft.id }) }}" class="stack-form ai-example-inline">
                                <input type="hidden" name="_token" value="{{ csrf_token('ai_draft_example_' ~ draft.id) }}">
                                <input type="hidden" name="field_code" value="suggestions">
                                <input type="hidden" name="content" value="{{ review_view.suggestions.plain_for_example|e('html_attr') }}">
                                <div class="form-grid form-grid--two">
                                    <input class="form-control" name="title" value="Sugestie z AI Draft #{{ draft.id }}">
                                    <select class="form-control" name="example_type">
                                        <option value="good">Dobry przykład</option>
                                        <option value="bad">Zły przykład</option>
                                    </select>
                                </div>
                                <textarea class="form-control" name="reason" rows="2" placeholder="Dlaczego to dobry/zły przykład?"></textarea>
                                <button class="button button--tiny button--ghost" type="submit">Zapisz jako przykład</button>
                            </form>
                        </div>
                    </div>
                </article>
            </section>
        {% endif %}
    </div>

    <footer class="ai-draft-sticky-footer">
        <div class="ai-draft-sticky-footer__note">
            <span class="ui-icon">info</span>
            <span>{{ review_view.apply_requirement_label }}</span>
        </div>
        {% include 'ai/drafts/_final_actions.html.twig' with { draft: draft, review_view: review_view, quality_report: quality_report } %}
    </footer>
{% endblock %}