{{-- Home: Vessel = Sprint, Container = Card.
     Clicar numa task leva direto à página de documento da knowledge base. --}}
@extends('manifest.layout')

@section('content')
    @php
        // Sprints concluídas saem do navio (liberando espaço pros cards ativos)
        // e viram histórico logo abaixo, junto das demais sprints passadas.
        $activeVessels = collect($vessels)->reject(fn ($v) => ($v['status'] ?? null) === 'Concluída')->values();
        $pastVessels   = collect($vessels)->filter(fn ($v) => ($v['status'] ?? null) === 'Concluída')->values();
    @endphp

    <div class="pagehead">
        <div class="wrap">
            <div class="context solo">Manifesto de bordo · TABEX</div>
            <p class="lead">
                Cada sprint é um vessel atracado no porto. Cada card do Notion é uma task a bordo —
                clique numa task para abrir a documentação, ou num vessel para ver a carga completa.
            </p>
        </div>
    </div>

    <div class="wrap">
        @if (empty($vessels))
            <div class="empty">
                <i class="fa-solid fa-water"></i>
                <h2>Nenhum vessel atracado</h2>
                <p>Quando uma sprint tiver tasks documentadas, ela aparece aqui como um vessel no pátio.</p>
            </div>
        @else
            @if ($activeVessels->isNotEmpty())
                @foreach ($activeVessels as $vessel)
                    @php
                        // Slots vazios (contorno tracejado) só no navio — ilustram a
                        // capacidade do vessel; não entram nas contagens/estatísticas.
                        $capacity = max(count($vessel['containers']) + 6, 10);
                        $slots    = array_pad($vessel['containers'], $capacity, null);
                        $rows     = array_chunk($slots, (int) ceil($capacity / 2));
                    @endphp
                    <div class="vessel-block">
                        <div class="bay-heading">
                            <span class="bay-title"><i class="fa-solid fa-anchor"></i> {{ $vessel['label'] }}</span>
                            @if ($vessel['voyage'])
                                <span class="voyage">{{ $vessel['voyage']['month'] }} {{ $vessel['voyage']['in'] }} / {{ $vessel['voyage']['out'] }}</span>
                            @endif
                            @if ($vessel['status'])
                                <span class="stamp issue">{{ $vessel['status'] }}</span>
                            @endif
                        </div>

                        <div class="yard-scene">
                            {{-- Casco visto de cima: proa arredondada à esquerda (ponte de comando),
                                 popa reta à direita — mesmo desenho do painel de referência. --}}
                            <svg class="hull" viewBox="0 0 1200 440" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
                                <path class="hull-outer" d="M10 220 C70 95,160 55,300 55 L1180 55 L1180 385 L300 385 C160 385,70 345,10 220 Z"/>
                                <path class="hull-inner" d="M34 220 C88 112,176 78,310 78 L1158 78 L1158 362 L310 362 C176 362,88 328,34 220 Z"/>
                                <g class="bridge">
                                    <rect x="205" y="168" width="26" height="104" rx="13"/>
                                    <rect x="108" y="156" width="36" height="26" rx="5"/>
                                    <rect x="152" y="156" width="36" height="26" rx="5"/>
                                    <rect x="108" y="258" width="36" height="26" rx="5"/>
                                    <rect x="152" y="258" width="36" height="26" rx="5"/>
                                    <circle class="stack" cx="126" cy="220" r="20"/>
                                </g>
                            </svg>

                            <div class="bay-rows">
                                @foreach ($rows as $row)
                                    <div class="bay-row">
                                        @foreach ($row as $c)
                                            @if (is_null($c))
                                                <div class="slot-empty" title="Espaço disponível"></div>
                                            @elseif ($c['doc_id'])
                                                <a class="crate {{ $c['category'] }}"
                                                   href="{{ route('manifest.show', $c['doc_id']) }}"
                                                   title="{{ $c['title'] }}">
                                                    <span class="crate-no">{{ $c['number'] ?? '—' }}</span>
                                                    <span class="crate-title">{{ $c['title'] }}</span>
                                                </a>
                                            @else
                                                <div class="crate pending" title="Ainda não documentado">
                                                    <span class="crate-no">{{ $c['number'] ?? '—' }}</span>
                                                    <span class="crate-title">{{ $c['title'] }}</span>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="vessel-list">
                    <div class="list-header">Sprints em andamento</div>
                    @foreach ($activeVessels as $vessel)
                        @php $pct = $vessel['total'] > 0 ? round($vessel['documented'] / $vessel['total'] * 100) : 0; @endphp
                        <div class="vessel-row">
                            <span class="v-icon"><i class="fa-solid fa-ship"></i></span>
                            <div class="v-body">
                                <h3>
                                    <a href="{{ route('manifest.vessel', $vessel['key']) }}">
                                        {{ $vessel['label'] }}
                                    </a>
                                </h3>
                                <div class="v-meta">
                                    @if ($vessel['voyage'])
                                        <span><i class="fa-solid fa-route"></i> {{ $vessel['voyage']['month'] }} {{ $vessel['voyage']['in'] }} / {{ $vessel['voyage']['out'] }}</span>
                                    @endif
                                    <span><i class="fa-solid fa-box"></i> {{ $vessel['documented'] }} de {{ $vessel['total'] }} tasks documentadas</span>
                                </div>
                            </div>
                            <div class="v-progress">
                                <div class="progress-bar"><span style="width: {{ $pct }}%"></span></div>
                                <div class="v-progress-label">{{ $pct }}%</div>
                            </div>
                            <i class="fa-solid fa-chevron-right go"></i>
                        </div>
                    @endforeach
                </div>
            @endif

            @if ($pastVessels->isNotEmpty())
                <div class="vessel-list past">
                    <div class="list-header">Sprints concluídas</div>
                    @foreach ($pastVessels as $vessel)
                        @php $pct = $vessel['total'] > 0 ? round($vessel['documented'] / $vessel['total'] * 100) : 0; @endphp
                        <div class="vessel-row done">
                            <span class="v-icon"><i class="fa-solid fa-check"></i></span>
                            <div class="v-body">
                                <h3>
                                    <a href="{{ route('manifest.vessel', $vessel['key']) }}">
                                        {{ $vessel['label'] }}
                                    </a>
                                </h3>
                                <div class="v-meta">
                                    @if ($vessel['voyage'])
                                        <span><i class="fa-solid fa-route"></i> {{ $vessel['voyage']['month'] }} {{ $vessel['voyage']['in'] }} / {{ $vessel['voyage']['out'] }}</span>
                                    @endif
                                    <span><i class="fa-solid fa-box"></i> {{ $vessel['documented'] }} de {{ $vessel['total'] }} tasks documentadas</span>
                                </div>
                            </div>
                            <div class="v-progress">
                                <div class="progress-bar"><span style="width: {{ $pct }}%"></span></div>
                                <div class="v-progress-label">{{ $pct }}%</div>
                            </div>
                            <i class="fa-solid fa-chevron-right go"></i>
                        </div>
                    @endforeach
                </div>
            @endif
        @endif
    </div>
@endsection
