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

@php
    $commissionCountLabel = number_format($commissionCards->count(), 0, ',', '.');
    $activeCountLabel = number_format($activeCommissionsCount ?? 0, 0, ',', '.');
    $membersCountLabel = number_format($totalMembersCount ?? 0, 0, ',', '.');
    $adviceCountLabel = number_format($allCommissionAdviceCards->count(), 0, ',', '.');
    $openAdviceCountLabel = number_format($openCommissionAdvicesCount ?? 0, 0, ',', '.');
@endphp

@section('site_content')
    <div>
        <section class="sl-materials-surface sl-commissions">
            <div class="sl-materials-tabs">
                @include('site.components.materials-tab', [
                    'label' => 'Comissões',
                    'href' => route('site.commissions', ['front_layout' => 'new']),
                    'active' => $activeTab === 'comissoes',
                ])

                @include('site.components.materials-tab', [
                    'label' => 'Pareceres',
                    'href' => route('site.commissions', ['front_layout' => 'new', 'tab' => 'pareceres']),
                    'active' => $activeTab === 'pareceres',
                ])

                @include('site.components.materials-tab', [
                    'label' => 'Reuniões',
                    'href' => route('site.commissions', ['front_layout' => 'new', 'tab' => 'reunioes']),
                    'active' => $activeTab === 'reunioes',
                ])
            </div>

            <div class="sl-commissions__hero">
                <div class="sl-commissions__hero-copy">
                    <p class="sl-commissions__eyebrow">Comissões cadastradas</p>
                    <h1>Comissões legislativas disponíveis no portal</h1>
                    <p class="sl-commissions__lede">
                        Consulte a listagem pública das comissões cadastradas, com período de vigência, resumo e composição atual.
                    </p>
                </div>

                @if ($activeTab !== 'reunioes')
                    <div class="sl-commissions__hero-metrics">
                        <article class="sl-commissions__hero-metric">
                            <span>{{ $activeTab === 'pareceres' ? 'Total de pareceres' : 'Total de comissões' }}</span>
                            <strong>{{ $activeTab === 'pareceres' ? $adviceCountLabel : $commissionCountLabel }}</strong>
                        </article>
                        <article class="sl-commissions__hero-metric">
                            <span>{{ $activeTab === 'pareceres' ? 'Em aberto' : 'Em vigor' }}</span>
                            <strong>{{ $activeTab === 'pareceres' ? $openAdviceCountLabel : $activeCountLabel }}</strong>
                        </article>
                        <article class="sl-commissions__hero-metric">
                            <span>{{ $activeTab === 'pareceres' ? 'Comissões vinculadas' : 'Membros vinculados' }}</span>
                            <strong>{{ $activeTab === 'pareceres' ? $commissionCountLabel : $membersCountLabel }}</strong>
                        </article>
                    </div>
                @endif
            </div>

            @if ($activeTab === 'comissoes')
                <form method="GET" action="{{ route('site.commissions') }}" class="sl-materials-toolbar sl-commissions__toolbar">
                    <input type="hidden" name="front_layout" value="new">
                    <input type="hidden" name="tab" value="comissoes">

                    <div class="sl-materials-filters sl-commissions__filters">
                        @include('site.components.materials-filter-field', [
                            'id' => 'commissions_period',
                            'label' => 'Período',
                            'name' => 'period',
                            'type' => 'select',
                            'options' => $commissionPeriodOptions,
                            'value' => $selectedCommissionPeriod ?? 'active',
                            'className' => 'sl-commissions__filter-field',
                        ])
                    </div>

                    <div class="sl-materials-toolbar__actions">
                        <a href="{{ route('site.commissions', ['front_layout' => 'new']) }}" class="sl-materials-button is-light">
                            <span>Limpar</span>
                        </a>

                        <button type="submit" class="sl-materials-button is-primary sl-materials-button--primary-action">
                            <span>Aplicar filtro</span>
                        </button>
                    </div>
                </form>
            @endif

            @if ($activeTab === 'pareceres')
                @if ($commissionAdvices->isNotEmpty())
                    <div class="sl-commissions__advice-grid">
                        @foreach ($commissionAdvices as $advice)
                            @component('site.components.panel', [
                                'title' => $advice['commission_name'],
                                'className' => 'sl-commissions__panel',
                            ])
                                <article class="sl-commission-card">
                                    <div class="sl-commission-card__meta">
                                        <span class="sl-commission-card__badge {{ $advice['status_tone'] }}">
                                            {{ $advice['status_label'] }}
                                        </span>
                                        <span class="sl-commission-card__period">
                                            {{ $advice['date'] }}
                                            @if ($advice['deadline'])
                                                • Prazo {{ $advice['deadline'] }}
                                            @endif
                                        </span>
                                    </div>

                                    <div class="sl-commission-card__subject">
                                        <span>Vinculado a</span>
                                        @if ($advice['related_item_href'])
                                            <a href="{{ $advice['related_item_href'] }}">{{ $advice['related_item_label'] }}</a>
                                        @else
                                            <strong>{{ $advice['related_item_label'] }}</strong>
                                        @endif
                                    </div>

                                    <p class="sl-commission-card__description">
                                        {{ $advice['summary_preview'] }}
                                    </p>
                                </article>
                            @endcomponent
                        @endforeach
                    </div>

                    @if (method_exists($commissionAdvices, 'links'))
                        <div class="sl-materials-pagination-wrap sl-commissions__pagination">
                            @include('site.components.materials-pagination', ['records' => $commissionAdvices])
                        </div>
                    @endif
                @else
                    <div class="sl-commissions__empty">
                        <h2>Nenhum parecer encontrado</h2>
                        <p>Assim que houver pareceres públicos vinculados às comissões, a listagem aparecerá aqui.</p>
                    </div>
                @endif
            @elseif ($activeTab === 'reunioes')
                @if ($meetings->isNotEmpty())
                    <div class="sl-commissions__grid">
                        @foreach ($meetings as $meeting)
                            @php
                                $meetingDetailUrl = $meeting['detail_href'] ?? route('site.commissions.meetings.show', ['id' => $meeting['id'], 'front_layout' => 'new']);
                            @endphp
                            @component('site.components.panel', [
                                'title' => $meeting['commission_name'] ?: $meeting['session_type'],
                                'className' => 'sl-commissions__panel',
                            ])
                                <article
                                    class="sl-commission-card sl-commission-card--meeting"
                                    role="link"
                                    tabindex="0"
                                    aria-label="Abrir detalhes da reunião {{ $meeting['commission_name'] ?: $meeting['session_type'] }}"
                                    onclick="window.location.href='{{ $meetingDetailUrl }}'"
                                    onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location.href='{{ $meetingDetailUrl }}'; }"
                                >
                                    <div class="sl-commission-card__meta">
                                        <span class="sl-commission-card__badge {{ $meeting['status_tone'] }}">
                                            {{ $meeting['status_label'] }}
                                        </span>
                                        <span class="sl-commission-card__period">
                                            {{ $meeting['date'] }}
                                        </span>
                                    </div>

                                    <p class="sl-commission-card__description">
                                        {{ $meeting['description_preview'] }}
                                    </p>

                                    <div class="sl-commission-card__footer">
                                        <div class="sl-commission-card__members-meta sl-commission-card__members-meta--compact" style="padding: 8px 14px; font-size: 0.86rem; opacity: 0.78;">
                                            <span>Local</span>
                                            <strong style="font-size: 0.98rem;">{{ $meeting['place'] }}</strong>
                                        </div>

                                        <div class="sl-commission-card__members-meta sl-commission-card__members-meta--compact" style="padding: 8px 14px; font-size: 0.86rem; opacity: 0.78;">
                                            <span>Parlamentares</span>
                                            <strong style="font-size: 0.98rem;">{{ number_format($meeting['participants_count'] ?? 0, 0, ',', '.') }}</strong>
                                        </div>

                                        <div class="sl-commission-card__actions">
                                            <a href="{{ $meetingDetailUrl }}" class="sl-materials-button is-light" onclick="event.stopPropagation();">
                                                <span>Ver detalhes</span>
                                            </a>
                                        </div>
                                    </div>

                                </article>
                            @endcomponent
                        @endforeach
                    </div>

                    @if (method_exists($meetings, 'links'))
                        <div class="sl-materials-pagination-wrap sl-commissions__pagination">
                            @include('site.components.materials-pagination', ['records' => $meetings])
                        </div>
                    @endif
                @else
                    <div class="sl-commissions__empty">
                        <h2>Nenhuma reunião encontrada</h2>
                        <p>Assim que houver reuniões cadastradas, a listagem aparecerá aqui.</p>
                    </div>
                @endif
            @elseif ($commissionCards->isNotEmpty())
                <div class="sl-commissions__grid">
                    @foreach ($commissionCards as $commission)
                        <div id="commission-card-{{ $commission['id'] }}" class="{{ (int) ($focusCommissionId ?? 0) === (int) $commission['id'] ? 'is-focused' : '' }}">
                            @component('site.components.panel', [
                                'title' => $commission['name'],
                                'className' => 'sl-commissions__panel',
                            ])
                                <article class="sl-commission-card">
                                    <div class="sl-commission-card__meta">
                                        <span class="sl-commission-card__badge {{ $commission['status']['tone'] }}">
                                            {{ $commission['status']['label'] }}
                                        </span>
                                        <span class="sl-commission-card__period">
                                            {{ $commission['date_start'] }} a {{ $commission['date_end'] }}
                                        </span>
                                    </div>

                                    <p class="sl-commission-card__description">
                                        {{ $commission['description_preview'] }}
                                    </p>

                                    <div class="sl-commission-card__footer">
                                        <div class="sl-commission-card__members-meta">
                                            <span>Membros vinculados</span>
                                            <strong>{{ number_format($commission['members_count'], 0, ',', '.') }}</strong>
                                        </div>

                                        @if ($commission['members']->isNotEmpty())
                                            <div class="sl-commission-card__members">
                                                @foreach ($commission['members'] as $member)
                                                    <article class="sl-commission-member">
                                                        <div class="sl-commission-member__copy">
                                                            <strong>{{ $member['name'] }}</strong>
                                                            <span>{{ $member['office'] }}</span>
                                                        </div>

                                                        @if ($member['party'])
                                                            <span class="sl-commission-member__party">{{ $member['party'] }}</span>
                                                        @endif
                                                    </article>
                                                @endforeach
                                            </div>
                                        @else
                                            <div class="sl-commissions__empty is-inline">
                                                <h2>Sem composição informada</h2>
                                                <p>Esta comissão ainda não possui membros públicos vinculados.</p>
                                            </div>
                                        @endif
                                    </div>
                                </article>
                            @endcomponent
                        </div>
                    @endforeach
                </div>

                @if (!empty($focusCommissionId))
                    <script>
                        document.addEventListener('DOMContentLoaded', function () {
                            const target = document.getElementById('commission-card-{{ (int) $focusCommissionId }}');

                            if (!target) {
                                return;
                            }

                            target.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            target.classList.add('is-focused');
                        });
                    </script>
                @endif
            @else
                <div class="sl-commissions__empty">
                    <h2>Nenhuma comissão encontrada</h2>
                    <p>Assim que houver comissões cadastradas, a listagem aparecerá aqui.</p>
                </div>
            @endif
        </section>
    </div>
@endsection