@extends('site.layouts.new.app')

@php
    $openPollsLabel = number_format($citizenVoiceStats['open_polls'] ?? 0, 0, ',', '.');
    $responsesLabel = number_format($citizenVoiceStats['responses'] ?? 0, 0, ',', '.');
    $documentsLabel = number_format($citizenVoiceStats['documents'] ?? 0, 0, ',', '.');
@endphp

@section('site_content')
    <div>
        <section class="sl-materials-surface sl-commissions sl-citizen-voice">
            <div class="sl-materials-tabs">
                @include('site.components.materials-tab', [
                    'label' => 'Enquetes abertas',
                    'href' => route('site.citizen-voice', ['front_layout' => 'new']),
                    'active' => true,
                ])
                @include('site.components.materials-tab', [
                    'label' => 'Meu perfil',
                    'href' => route('site.citizen-voice.my-polls', ['front_layout' => 'new']),
                    'active' => false,
                ])
            </div>

            @if (session('citizen_voice_success'))
                <div class="sl-citizen-voice__notice is-success">
                    {{ session('citizen_voice_success') }}
                </div>
            @endif

            @if (session('citizen_voice_error'))
                <div class="sl-citizen-voice__notice is-error">
                    {{ session('citizen_voice_error') }}
                </div>
            @endif

            <div class="sl-citizen-voice__hero">
                <div class="sl-citizen-voice__hero-main">
                    <div class="sl-citizen-voice__badge">
                        <div>
                            <strong>Voz do cidadão</strong>
                            <span>Aqui, sua voz influencia as decisões públicas.</span>
                        </div>
                    </div>

                    <h1>Enquetes públicas com acesso por perfil cidadão.</h1>
                    <p class="sl-citizen-voice__lede">
                        Para participar das enquetes, o cidadão cria um acesso simples com CPF e senha. Depois do login, o perfil reúne as enquetes respondidas, comentários e alteração de senha.
                    </p>
                </div>

                <div class="sl-citizen-voice__hero-side">
                    <a href="{{ route('site.citizen-voice.my-polls', ['front_layout' => 'new']) }}" class="sl-materials-button is-primary">
                        {{ $currentCitizenVoiceUser ? 'Abrir meu perfil' : 'Criar acesso para participar' }}
                    </a>

                    <div class="sl-citizen-voice__hero-metrics">
                        <article class="sl-commissions__hero-metric">
                            <span>Enquetes abertas</span>
                            <strong>{{ $openPollsLabel }}</strong>
                        </article>
                        <article class="sl-commissions__hero-metric">
                            <span>Respostas registradas</span>
                            <strong>{{ $responsesLabel }}</strong>
                        </article>
                        <article class="sl-commissions__hero-metric">
                            <span>Documentos públicos</span>
                            <strong>{{ $documentsLabel }}</strong>
                        </article>
                    </div>
                </div>
            </div>

            @component('site.components.panel', ['title' => 'Principais categorias', 'className' => 'sl-citizen-voice__panel'])
                <p class="sl-citizen-voice__panel-copy">
                    Explore as enquetes organizadas por tema. O acesso do cidadão fica centralizado no perfil, mas os resultados continuam públicos para consulta.
                </p>

                @if ($citizenVoicePolls->isNotEmpty())
                    <div class="sl-citizen-voice__grid">
                        @foreach ($citizenVoicePolls as $poll)
                            <article class="sl-citizen-voice-card {{ $poll['accent'] }}">
                                <div class="sl-citizen-voice-card__content">
                                    <div class="sl-citizen-voice-card__headline">
                                        <h2>{{ $poll['title'] }} <span>{{ $poll['emoji'] }}</span></h2>
                                        <p>{{ $poll['description'] }}</p>
                                    </div>

                                    <div class="sl-citizen-voice-card__meta">
                                        <span>{{ number_format($poll['response_count'], 0, ',', '.') }} participações</span>
                                        <strong>Enquete aberta</strong>
                                    </div>
                                </div>

                                <div class="sl-citizen-voice-card__actions">
                                    <button type="button" class="sl-materials-button is-light" data-modal-open="citizen-voice-results-{{ $poll['slug'] }}">
                                        Ver resultado
                                    </button>

                                    @if (!$currentCitizenVoiceUser)
                                        <a href="{{ route('site.citizen-voice.my-polls', ['front_layout' => 'new', 'auth_required' => 1]) }}" class="sl-materials-button is-primary">
                                            Entrar para participar
                                        </a>
                                    @elseif (!empty($poll['already_participated']))
                                        <a href="{{ route('site.citizen-voice.my-polls', ['front_layout' => 'new']) }}" class="sl-materials-button is-primary">
                                            Ver no perfil
                                        </a>
                                    @else
                                        <button type="button" class="sl-materials-button is-primary" data-modal-open="citizen-voice-survey-{{ $poll['slug'] }}">
                                            Participar
                                        </button>
                                    @endif
                                </div>
                            </article>
                        @endforeach
                    </div>
                @else
                    <div class="sl-commissions__empty">
                        <h2>Nenhuma enquete publicada</h2>
                        <p>Assim que as enquetes forem cadastradas no painel administrativo, elas aparecerão aqui.</p>
                    </div>
                @endif
            @endcomponent

            <div class="sl-citizen-voice__banner {{ !empty($citizenVoiceBanner['image_url']) ? 'is-image-only' : '' }}">
                @if (empty($citizenVoiceBanner['image_url']))
                    <div class="sl-citizen-voice__banner-icon">💬</div>
                    <div class="sl-citizen-voice__banner-copy">
                        <strong>{{ $citizenVoiceBanner['title'] ?? 'perfil do cidadão' }}</strong>
                        <span>{{ $citizenVoiceBanner['text'] ?? 'Depois do login, o cidadão acompanha respostas, comenta enquetes já participadas e altera a própria senha.' }}</span>
                    </div>
                @else
                    <img class="sl-citizen-voice__banner-image" src="{{ $citizenVoiceBanner['image_url'] }}" alt="{{ $citizenVoiceBanner['title'] ?? 'Banner do perfil do cidadão' }}">
                @endif
            </div>
        </section>

        @foreach ($citizenVoicePolls as $poll)
            @component('site.components.modal', [
                'id' => 'citizen-voice-survey-' . $poll['slug'],
                'title' => $poll['survey_title'],
                'description' => $poll['survey_description'],
                'panelClass' => 'sl-citizen-voice-survey-modal',
            ])
                <form class="sl-citizen-voice-form" id="citizen-voice-form-{{ $poll['slug'] }}" action="{{ route('site.citizen-voice.participate', ['id' => $poll['id'] ?? null]) }}" method="POST" data-citizen-voice-form data-no-page-loader>
                    @csrf
                    <div class="sl-citizen-voice-form__intro">
                        <div class="sl-citizen-voice-form__intro-icon">🎙️</div>
                        <h3>{{ $poll['survey_title'] }}</h3>
                        <p>{{ $poll['survey_question'] }}</p>
                        <span>(*) Apenas as respostas da enquete são obrigatórias</span>
                    </div>

                    <div class="sl-citizen-voice-form__status" data-citizen-voice-status hidden></div>

                    @if ($currentCitizenVoiceUser)
                        <div class="sl-citizen-voice-profile-card">
                            <div class="sl-citizen-voice-profile-card__header">
                                <div>
                                    <span>Participando como</span>
                                    <h2>{{ $currentCitizenVoiceUser->name ?: 'Cidadão identificado' }}</h2>
                                </div>
                            </div>

                            <div class="sl-citizen-voice-profile-card__content">
                                <div class="sl-citizen-voice-profile-card__grid">
                                    <article class="sl-citizen-voice-profile-pill">
                                        <span>CPF</span>
                                        <strong>{{ $currentCitizenVoiceUser->cpf }}</strong>
                                    </article>
                                    <article class="sl-citizen-voice-profile-pill">
                                        <span>E-mail</span>
                                        <strong>{{ $currentCitizenVoiceUser->email ?: 'Não informado' }}</strong>
                                    </article>
                                    <article class="sl-citizen-voice-profile-pill">
                                        <span>Bairro</span>
                                        <strong>{{ $currentCitizenVoiceUser->district ?: 'Não informado' }}</strong>
                                    </article>
                                    <article class="sl-citizen-voice-profile-pill">
                                        <span>Faixa etária</span>
                                        <strong>{{ $currentCitizenVoiceUser->age_range ?: 'Não informado' }}</strong>
                                    </article>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="sl-citizen-voice-form__group">
                        <div class="sl-citizen-voice-question-grid">
                            @foreach ($poll['questions'] as $index => $question)
                                <fieldset class="sl-citizen-voice-question">
                                    <legend>{{ $question }} <span>(*)</span></legend>
                                    <div class="sl-citizen-voice-question__options">
                                        <label class="sl-citizen-voice-choice">
                                            <input type="radio" name="answers[{{ $index }}]" value="yes" checked required>
                                            <span>Sim</span>
                                        </label>
                                        <label class="sl-citizen-voice-choice">
                                            <input type="radio" name="answers[{{ $index }}]" value="no" required>
                                            <span>Não</span>
                                        </label>
                                        <label class="sl-citizen-voice-choice">
                                            <input type="radio" name="answers[{{ $index }}]" value="abstention" required>
                                            <span>Abstenção</span>
                                        </label>
                                    </div>
                                </fieldset>
                            @endforeach
                        </div>
                    </div>

                    <div class="sl-citizen-voice-form__group">
                        <h3>Documentos relacionados (opcional)</h3>
                        <div class="sl-citizen-voice-form__choices">
                            @foreach ($poll['documents'] as $document)
                                <label class="sl-checkbox-field">
                                    <input type="checkbox" name="selected_documents[]" value="{{ $document['id'] }}">
                                    <span>
                                        <strong>{{ $document['title'] }}</strong>
                                        <small>{{ $document['subtitle'] }}</small>
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="sl-materials-filter-field">
                        <label for="citizen-voice-opinion-{{ $poll['slug'] }}">Comentário do cidadão</label>
                        <textarea id="citizen-voice-opinion-{{ $poll['slug'] }}" name="opinion" class="sl-materials-control sl-materials-control--textarea" placeholder="Descreva sua sugestão, problema ou melhoria desejada para o bairro."></textarea>
                    </div>
                </form>

                @slot('footer')
                    <button type="button" class="sl-materials-button is-light" data-modal-close>Cancelar</button>
                    <button type="submit" class="sl-materials-button is-primary" form="citizen-voice-form-{{ $poll['slug'] }}">Salvar resposta</button>
                @endslot
            @endcomponent

            @component('site.components.modal', [
                'id' => 'citizen-voice-results-' . $poll['slug'],
                'title' => 'Resultado Enquete ' . $poll['code'],
                'description' => $poll['survey_question'],
                'panelClass' => 'sl-citizen-voice-results-modal',
            ])
                <div class="sl-citizen-voice-results">
                    <div class="sl-citizen-voice-results__section">
                        <h3>Resultado da enquete</h3>
                        <div class="sl-citizen-voice-bars">
                            @foreach ($poll['results'] as $result)
                                <article class="sl-citizen-voice-bar">
                                    <strong>{{ $result['display_value'] }}</strong>
                                    <div class="sl-citizen-voice-bar__track">
                                        <div class="sl-citizen-voice-bar__fill" style="height: {{ max((int) $result['value'], 4) }}%"></div>
                                    </div>
                                    <span>{{ $result['label'] }}</span>
                                </article>
                            @endforeach
                        </div>
                    </div>

                    <div class="sl-citizen-voice-results__section">
                        <h3>Votos por bairros</h3>
                        <div class="sl-citizen-voice-results__chart-wrap">
                            <div class="sl-citizen-voice-results__legend">
                                @foreach ($poll['neighborhoods'] as $neighborhood)
                                    <div class="sl-citizen-voice-results__legend-item">
                                        <span class="sl-citizen-voice-results__legend-swatch {{ $neighborhood['accent'] }}"></span>
                                        <div>
                                            <strong>{{ $neighborhood['name'] }}</strong>
                                            <small>{{ number_format($neighborhood['votes'], 0, ',', '.') }} votos</small>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="sl-citizen-voice-results__pie">
                                <div class="sl-citizen-voice-results__pie-chart" style="{{ $poll['chart_style'] }}"></div>
                                <strong>{{ number_format($poll['results_total'], 0, ',', '.') }}</strong>
                            </div>
                        </div>
                    </div>

                    <div class="sl-citizen-voice-results__section sl-citizen-voice-results__section--comments">
                        <h3>Comentários da enquete</h3>
                        @if (!empty($poll['comments']))
                            @php
                                $visibleCommentsLimit = 3;
                                $commentsCount = count($poll['comments']);
                            @endphp
                            <div class="sl-citizen-voice-comments-wrap" data-citizen-comments data-visible-limit="{{ $visibleCommentsLimit }}">
                                <div class="sl-citizen-voice-comments">
                                    @foreach ($poll['comments'] as $commentIndex => $comment)
                                    <article class="sl-citizen-voice-comment"
                                             @if ($commentIndex >= $visibleCommentsLimit) hidden data-comment-hidden @endif>
                                        <div class="sl-citizen-voice-comment__meta">
                                            <strong>{{ $comment['name'] }}</strong>
                                            <span>{{ $comment['district'] }} • {{ $comment['cpf'] }}</span>
                                        </div>
                                        <p>{{ $comment['comment'] }}</p>
                                    </article>
                                    @endforeach
                                </div>

                                @if ($commentsCount > $visibleCommentsLimit)
                                    <button type="button"
                                            class="sl-materials-button is-light sl-citizen-voice-comments__toggle"
                                            data-comments-toggle
                                            data-more-label="Ver mais comentários"
                                            data-less-label="Mostrar menos">
                                        Ver mais comentários
                                    </button>
                                @endif
                            </div>
                        @else
                            <div class="sl-commissions__empty is-inline">
                                <h2>Sem comentários ainda</h2>
                                <p>Os comentários enviados pelos cidadãos aparecerão aqui.</p>
                            </div>
                        @endif
                    </div>
                </div>

                @slot('footer')
                    <button type="button" class="sl-materials-button is-light" data-modal-close>Fechar</button>
                @endslot
            @endcomponent
        @endforeach
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const pageLoader = document.querySelector('[data-page-loader]');

            const closeModal = (modal) => {
                if (!modal) {
                    return;
                }

                modal.classList.remove('is-open');
                modal.setAttribute('aria-hidden', 'true');
                modal.hidden = true;
                document.body.classList.remove('sl-modal-open');
            };

            const hideGlobalPageLoader = () => {
                document.documentElement.classList.remove('sl-page-loader-pending');
                document.documentElement.classList.remove('sl-page-loader-visible');

                if (pageLoader) {
                    pageLoader.classList.remove('is-visible');
                    pageLoader.setAttribute('aria-hidden', 'true');
                }

                if (window.__slPageLoaderBootTimer) {
                    window.clearTimeout(window.__slPageLoaderBootTimer);
                    window.__slPageLoaderBootTimer = null;
                }
            };

            document.querySelectorAll('[data-citizen-voice-form]').forEach((form) => {
                form.addEventListener('submit', async function(event) {
                    event.preventDefault();
                    hideGlobalPageLoader();

                    const submitButton = document.querySelector(`[form="${form.id}"]`);
                    const statusBox = form.querySelector('[data-citizen-voice-status]');
                    const modal = form.closest('[data-modal]');

                    if (submitButton) {
                        submitButton.disabled = true;
                    }

                    if (statusBox) {
                        statusBox.hidden = true;
                        statusBox.className = 'sl-citizen-voice-form__status';
                        statusBox.textContent = '';
                    }

                    try {
                        const response = await fetch(form.action, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': csrfToken,
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json',
                            },
                            body: new FormData(form),
                        });

                        const data = await response.json();

                        if (!response.ok) {
                            const firstError = data?.errors ? Object.values(data.errors)[0]?.[0] : null;
                            throw new Error(firstError || data?.message || 'Não foi possível registrar a participação.');
                        }

                        if (statusBox) {
                            statusBox.hidden = false;
                            statusBox.classList.add('is-success');
                            statusBox.textContent = data.message || 'Participação registrada com sucesso.';
                        }

                        form.reset();

                        setTimeout(() => {
                            closeModal(modal);
                            window.location.reload();
                        }, 700);
                    } catch (error) {
                        if (statusBox) {
                            statusBox.hidden = false;
                            statusBox.classList.add('is-error');
                            statusBox.textContent = error.message || 'Não foi possível registrar a participação.';
                        }
                    } finally {
                        if (submitButton) {
                            submitButton.disabled = false;
                        }
                    }
                });
            });

            document.querySelectorAll('[data-citizen-comments]').forEach((commentsBlock) => {
                const toggleButton = commentsBlock.querySelector('[data-comments-toggle]');
                const hiddenComments = commentsBlock.querySelectorAll('[data-comment-hidden]');

                if (!toggleButton || hiddenComments.length === 0) {
                    return;
                }

                toggleButton.addEventListener('click', function() {
                    const isExpanded = commentsBlock.classList.toggle('is-expanded');
                    const nextHiddenState = !isExpanded;

                    hiddenComments.forEach((comment) => {
                        comment.hidden = nextHiddenState;
                    });

                    toggleButton.textContent = isExpanded
                        ? toggleButton.dataset.lessLabel
                        : toggleButton.dataset.moreLabel;
                });
            });
        });
    </script>
@endpush