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

@section('site_content')
    @php
        $isGuestAuthScreen = !$currentCitizenVoiceUser;
        $authMode = $authMode ?? 'login';
        $profileTabHref = $currentCitizenVoiceUser
            ? route('site.citizen-voice.my-polls', ['front_layout' => 'new'])
            : route('site.citizen-voice.account.login-form', ['front_layout' => 'new']);
    @endphp

    <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' => false,
                ])
                @include('site.components.materials-tab', [
                    'label' => 'Meu perfil',
                    'href' => $profileTabHref,
                    'active' => true,
                ])
            </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

            @if (request()->boolean('auth_required'))
                <div class="sl-citizen-voice__notice is-error">
                    Faça login no perfil para participar das enquetes e comentar depois.
                </div>
            @endif

            @if ($errors->any())
                <div class="sl-citizen-voice__notice is-error">
                    {{ $errors->first() }}
                </div>
            @endif

            <div class="sl-citizen-voice__hero">
                <div class="sl-citizen-voice__hero-main">
                    <div class="sl-citizen-voice__badge">
                        <div>
                            <strong>perfil do cidadão</strong>
                            <span>CPF e senha para participar, comentar e acompanhar.</span>
                        </div>
                    </div>

                    <h1>
                        {{ $currentCitizenVoiceUser
                            ? 'Seu acesso está ativo no Voz do cidadão.'
                            : ($authMode === 'register'
                                ? 'Crie seu perfil para participar das enquetes.'
                                : 'Entre no seu perfil para acompanhar e comentar.') }}
                    </h1>
                    <p class="sl-citizen-voice__lede">
                        {{ $currentCitizenVoiceUser
                            ? 'Com o login ativo, você vê suas participações, registra comentários nas enquetes já respondidas e pode atualizar sua senha quando precisar.'
                            : ($authMode === 'register'
                                ? 'O cadastro pede apenas CPF e senha. Depois do primeiro acesso, o cidadão acompanha suas respostas, comenta enquetes já participadas e altera os próprios dados.'
                                : 'Entre com CPF e senha para acessar suas participações, comentar enquetes respondidas e atualizar seu perfil quando precisar.') }}
                    </p>
                </div>

                @if ($currentCitizenVoiceUser)
                    <div class="sl-citizen-voice__hero-side">
                        <form method="POST" action="{{ route('site.citizen-voice.account.logout') }}">
                            @csrf
                            <button type="submit" class="sl-materials-button is-primary">
                                Sair do perfil
                            </button>
                        </form>
                    </div>
                @elseif ($isGuestAuthScreen)
                    <div class="sl-citizen-voice__hero-side">
                        <div class="sl-citizen-voice-auth-switch">
                            <a href="{{ route('site.citizen-voice.account.register-form', ['front_layout' => 'new']) }}"
                               class="sl-materials-button {{ $authMode === 'register' ? 'is-primary' : 'is-light' }}">
                                Criar perfil
                            </a>
                            <a href="{{ route('site.citizen-voice.account.login-form', ['front_layout' => 'new']) }}"
                               class="sl-materials-button {{ $authMode === 'login' ? 'is-primary' : 'is-light' }}">
                                Entrar
                            </a>
                        </div>
                    </div>
                @endif
            </div>

            @if ($isGuestAuthScreen)
                <div class="sl-citizen-voice-auth-layout">
                    <div class="sl-citizen-voice-auth-layout__main">
                        @if ($authMode === 'register')
                            @component('site.components.panel', ['title' => 'Criar perfil', 'className' => 'sl-citizen-voice__panel sl-citizen-voice-auth-card'])
                        <form method="POST" action="{{ route('site.citizen-voice.account.register') }}" class="sl-citizen-voice-form">
                            @csrf

                            <div class="sl-materials-filter-field">
                                <label for="citizen-register-cpf">CPF</label>
                                <input id="citizen-register-cpf" type="text" name="cpf" value="{{ old('cpf') }}" class="sl-materials-control" placeholder="000.000.000-00" inputmode="numeric" maxlength="14" data-cpf-input required>
                            </div>

                            <div class="sl-materials-filter-field">
                                <label for="citizen-register-password">Senha</label>
                                <input id="citizen-register-password" type="password" name="password" class="sl-materials-control" placeholder="Crie uma senha" required>
                            </div>

                            <div class="sl-materials-filter-field">
                                <label for="citizen-register-password-confirmation">Confirmar senha</label>
                                <input id="citizen-register-password-confirmation" type="password" name="password_confirmation" class="sl-materials-control" placeholder="Repita a senha" required>
                            </div>

                            <button type="submit" class="sl-materials-button is-primary">Criar acesso</button>
                        </form>
                            @endcomponent
                        @else
                            @component('site.components.panel', ['title' => 'Entrar no perfil', 'className' => 'sl-citizen-voice__panel sl-citizen-voice-auth-card'])
                        <form method="POST" action="{{ route('site.citizen-voice.account.login') }}" class="sl-citizen-voice-form">
                            @csrf

                            <div class="sl-materials-filter-field">
                                <label for="citizen-login-cpf">CPF</label>
                                <input id="citizen-login-cpf" type="text" name="cpf" value="{{ old('cpf') }}" class="sl-materials-control" placeholder="000.000.000-00" inputmode="numeric" maxlength="14" data-cpf-input required>
                            </div>

                            <div class="sl-materials-filter-field">
                                <label for="citizen-login-password">Senha</label>
                                <input id="citizen-login-password" type="password" name="password" class="sl-materials-control" placeholder="Sua senha" required>
                            </div>

                            <button type="submit" class="sl-materials-button is-primary">Entrar</button>
                        </form>
                            @endcomponent
                        @endif
                    </div>

                    <aside class="sl-citizen-voice-auth-aside">
                        <div class="sl-citizen-voice-auth-aside__card">
                            <span>{{ $authMode === 'register' ? 'Já possui acesso?' : 'Primeiro acesso?' }}</span>
                            <h2>{{ $authMode === 'register' ? 'Entre com seu CPF e senha.' : 'Crie seu perfil do cidadão.' }}</h2>
                            <p>
                                {{ $authMode === 'register'
                                    ? 'Se você já criou o perfil, use a tela de login para acessar suas enquetes respondidas, comentários e dados salvos.'
                                    : 'O cadastro é rápido e pede só CPF e senha. Assim que concluir, o perfil já fica liberado para responder enquetes públicas.' }}
                            </p>

                            <a href="{{ $authMode === 'register'
                                ? route('site.citizen-voice.account.login-form', ['front_layout' => 'new'])
                                : route('site.citizen-voice.account.register-form', ['front_layout' => 'new']) }}"
                               class="sl-materials-button is-light">
                                {{ $authMode === 'register' ? 'Ir para login' : 'Ir para cadastro' }}
                            </a>
                        </div>
                    </aside>
                </div>
            @else
                <div class="sl-citizen-voice-profile-sections">
                    <div class="sl-citizen-voice-profile-card">
                        <div class="sl-citizen-voice-profile-card__header">
                            <div>
                                <span>Perfil do cidadão</span>
                                <h2>{{ $profileSummary['name'] }}</h2>
                            </div>
                            <span class="sl-citizen-voice-profile-tag">{{ $profileSummary['cpf'] }}</span>
                        </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>E-mail</span>
                                    <strong>{{ $profileSummary['email'] }}</strong>
                                </article>
                                <article class="sl-citizen-voice-profile-pill">
                                    <span>Bairro</span>
                                    <strong>{{ $profileSummary['district'] }}</strong>
                                </article>
                                <article class="sl-citizen-voice-profile-pill">
                                    <span>Faixa etária</span>
                                    <strong>{{ $profileSummary['age_range'] }}</strong>
                                </article>
                                <article class="sl-citizen-voice-profile-pill">
                                    <span>Enquetes participadas</span>
                                    <strong>{{ number_format($profileSummary['participations_count'], 0, ',', '.') }}</strong>
                                </article>
                            </div>

                            <div class="sl-citizen-voice-profile-card__lists">
                                <div class="sl-citizen-voice-profile-list">
                                    <span>Última participação</span>
                                    <div class="sl-citizen-voice-profile-tags">
                                        <span class="sl-citizen-voice-profile-tag">{{ $profileSummary['last_participation_at'] }}</span>
                                    </div>
                                </div>
                                <div class="sl-citizen-voice-profile-list">
                                    <span>Ações rápidas</span>
                                    <div class="sl-citizen-voice-profile-tags">
                                        <a href="{{ route('site.citizen-voice', ['front_layout' => 'new']) }}" class="sl-citizen-voice-profile-tag">Participar de enquetes</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="sl-citizen-voice-auth-grid">
                        @component('site.components.panel', ['title' => 'Atualizar dados do perfil', 'className' => 'sl-citizen-voice__panel sl-citizen-voice-auth-card'])
                            <form method="POST" action="{{ route('site.citizen-voice.account.update') }}" class="sl-citizen-voice-form">
                                @csrf

                                <div class="sl-materials-filter-field">
                                    <label for="citizen-profile-name">Nome ou apelido</label>
                                    <input id="citizen-profile-name" type="text" name="name" value="{{ old('name', $currentCitizenVoiceUser->name) }}" class="sl-materials-control" placeholder="Como deseja se identificar">
                                </div>

                                <div class="sl-materials-filter-field">
                                    <label for="citizen-profile-email">E-mail</label>
                                    <input id="citizen-profile-email" type="email" name="email" value="{{ old('email', $currentCitizenVoiceUser->email) }}" class="sl-materials-control" placeholder="voce@exemplo.com">
                                </div>

                                <div class="sl-materials-filter-field">
                                    <label for="citizen-profile-district">Bairro</label>
                                    <input id="citizen-profile-district" type="text" name="district" value="{{ old('district', $currentCitizenVoiceUser->district) }}" class="sl-materials-control" placeholder="Digite seu bairro">
                                </div>

                                <div class="sl-materials-filter-field">
                                    <label for="citizen-profile-age-range">Faixa etária</label>
                                    <select id="citizen-profile-age-range" name="age_range" class="sl-materials-control">
                                        <option value="">Selecione</option>
                                        @foreach ($citizenProfileOptions['ageRanges'] as $ageRange)
                                            <option value="{{ $ageRange }}" {{ (string) old('age_range', $currentCitizenVoiceUser->age_range) === (string) $ageRange ? 'selected' : '' }}>{{ $ageRange }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <button type="submit" class="sl-materials-button is-primary">Salvar perfil</button>
                            </form>
                        @endcomponent

                        @component('site.components.panel', ['title' => 'Alterar senha', 'className' => 'sl-citizen-voice__panel sl-citizen-voice-auth-card'])
                            <form method="POST" action="{{ route('site.citizen-voice.account.password') }}" class="sl-citizen-voice-form">
                                @csrf

                                <div class="sl-materials-filter-field">
                                    <label for="citizen-profile-current-password">Senha atual</label>
                                    <input id="citizen-profile-current-password" type="password" name="current_password" class="sl-materials-control" placeholder="Digite a senha atual" required>
                                </div>

                                <div class="sl-materials-filter-field">
                                    <label for="citizen-profile-password">Nova senha</label>
                                    <input id="citizen-profile-password" type="password" name="password" class="sl-materials-control" placeholder="Digite a nova senha" required>
                                </div>

                                <div class="sl-materials-filter-field">
                                    <label for="citizen-profile-password-confirmation">Confirmar nova senha</label>
                                    <input id="citizen-profile-password-confirmation" type="password" name="password_confirmation" class="sl-materials-control" placeholder="Repita a nova senha" required>
                                </div>

                                <button type="submit" class="sl-materials-button is-primary">Atualizar senha</button>
                            </form>
                        @endcomponent
                    </div>

                    @component('site.components.panel', ['title' => 'Enquetes já participadas', 'className' => 'sl-citizen-voice__panel'])
                        @if ($participations->isEmpty())
                            <div class="sl-commissions__empty">
                                <h2>Nenhuma enquete encontrada</h2>
                                <p>Assim que você participar de uma enquete, ela aparecerá aqui para comentário.</p>
                            </div>
                        @else
                            <div class="sl-citizen-voice-comments">
                                @foreach ($participations as $participation)
                                    <article class="sl-citizen-voice-comment" id="citizen-participation-{{ $participation['participation_id'] }}" data-citizen-participation="{{ $participation['participation_id'] }}">
                                        <div class="sl-citizen-voice-comment__meta">
                                            <strong>{{ $participation['poll_title'] }}</strong>
                                            <span>{{ $participation['participated_at'] ?: 'Data não informada' }} • {{ $participation['district'] }}</span>
                                        </div>

                                        <p><strong>Pergunta:</strong> {{ $participation['survey_question'] }}</p>
                                        <p><strong>Respostas:</strong> {{ $participation['answers_summary'] }}</p>

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

                                        <form method="POST" action="{{ route('site.citizen-voice.comment', ['id' => $participation['poll_id']]) }}" class="sl-citizen-voice-form">
                                            @csrf
                                            <input type="hidden" name="participation_id" value="{{ $participation['participation_id'] }}">

                                            <div class="sl-materials-filter-field">
                                                <label for="citizen-comment-{{ $participation['participation_id'] }}">Comentário da enquete</label>
                                                <textarea id="citizen-comment-{{ $participation['participation_id'] }}" name="opinion" class="sl-materials-control sl-materials-control--textarea" placeholder="Escreva seu comentário sobre esta enquete." required>{{ $participation['comment'] }}</textarea>
                                            </div>

                                            <button type="submit" class="sl-materials-button is-primary">Salvar comentário</button>
                                        </form>
                                    </article>
                                @endforeach
                            </div>
                        @endif
                    @endcomponent
                </div>
            @endif
        </section>

        @if ($currentCitizenVoiceUser && $participations->isNotEmpty())
            @foreach ($participations as $participation)
                @component('site.components.modal', [
                    'id' => 'citizen-voice-results-profile-' . $participation['participation_id'],
                    'title' => 'Resultado Enquete ' . $participation['poll_code'],
                    'description' => $participation['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 ($participation['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 ($participation['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="{{ $participation['chart_style'] }}"></div>
                                    <strong>{{ number_format($participation['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($participation['comments']))
                                @php
                                    $visibleCommentsLimit = 3;
                                    $commentsCount = count($participation['comments']);
                                @endphp
                                <div class="sl-citizen-voice-comments-wrap" data-citizen-comments data-visible-limit="{{ $visibleCommentsLimit }}">
                                    <div class="sl-citizen-voice-comments">
                                        @foreach ($participation['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
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const focusParticipationId = @json((int) request()->query('focus_participation', 0));

            document.querySelectorAll('[data-cpf-input]').forEach((input) => {
                input.addEventListener('input', function(event) {
                    let value = event.target.value.replace(/\D/g, '').slice(0, 11);
                    value = value.replace(/(\d{3})(\d)/, '$1.$2');
                    value = value.replace(/(\d{3})(\d)/, '$1.$2');
                    value = value.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
                    event.target.value = value;
                });
            });

            if (focusParticipationId > 0) {
                const participation = document.querySelector(`[data-citizen-participation="${focusParticipationId}"]`);

                if (participation) {
                    participation.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center',
                    });

                    participation.classList.add('is-focused');

                    window.setTimeout(() => {
                        participation.classList.remove('is-focused');
                    }, 2200);
                }
            }

            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