@extends('adminlte::page')

@section('title', 'Versão '.$versao->versao)

@section('content_header')
@stop

@section('content')
@php
    $dataVersao = $versao->dataVersao();
    $secaoCliente = [
        'novidades' => ['label' => 'Novidades', 'icon' => 'fa-sparkles', 'class' => 'nov'],
        'melhorias' => ['label' => 'Melhorias', 'icon' => 'fa-arrow-up', 'class' => 'mel'],
        'correcoes' => ['label' => 'Correções', 'icon' => 'fa-wrench', 'class' => 'cor'],
    ];
@endphp

<div class="dashboard-page dashboard-stagger">
    <section class="dashboard-hero">
        <div class="dashboard-hero__inner">
            <div>
                <p class="dashboard-hero__eyebrow">Release · {{ $versao->ambienteLabel() }}</p>
                <h1 class="dashboard-hero__title">
                    <span class="listagem-version-code listagem-version-code--hero">{{ $versao->versao }}</span>
                </h1>
                <p class="dashboard-hero__subtitle">
                    @if($dataVersao)
                        Build de {{ \Carbon\Carbon::parse($dataVersao)->format('d/m/Y') }}
                    @endif
                    @if($versao->publicado_em)
                        · Publicado em {{ $versao->publicado_em->format('d/m/Y H:i') }}
                    @endif
                </p>
            </div>
            <div class="dashboard-hero__actions">
                <a href="{{ route('produto-versoes.index') }}" class="btn-dashboard-hero btn-dashboard-hero--ghost">
                    <i class="fas fa-arrow-left" aria-hidden="true"></i>
                    Voltar à lista
                </a>
            </div>
        </div>
    </section>

    <div class="row">
        <div class="col-lg-5">
            <div class="dashboard-panel mb-4">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-users" aria-hidden="true"></i>
                        Para clientes
                    </h2>
                    <span class="dashboard-status dashboard-status--{{ $versao->ambiente === 'producao' ? 'producao' : 'homologacao' }}">
                        {{ $versao->ambienteLabel() }}
                    </span>
                </div>
                <div class="dashboard-panel__body">
                    <div class="versao-detail-block">
                        <h3 class="versao-detail-block__title">Resumo</h3>
                        <p class="versao-detail-block__text">{{ $versao->resumo_clientes ?: '—' }}</p>
                    </div>

                    @foreach($secaoCliente as $campo => $meta)
                        @if(!empty($versao->{$campo}))
                            <div class="versao-detail-block">
                                <h3 class="versao-detail-block__title">
                                    <span class="listagem-release-tag listagem-release-tag--{{ $meta['class'] }}">{{ count($versao->{$campo}) }}</span>
                                    {{ $meta['label'] }}
                                </h3>
                                <ul class="versao-detail-list">
                                    @foreach($versao->{$campo} as $item)
                                        <li>{{ $item }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    @endforeach

                    @if($versao->mensagem_sugerida)
                        <div class="versao-detail-block">
                            <h3 class="versao-detail-block__title">Mensagem sugerida</h3>
                            <pre class="versao-detail-pre">{{ $versao->mensagem_sugerida }}</pre>
                        </div>
                    @endif
                </div>
            </div>

            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-info-circle" aria-hidden="true"></i>
                        Metadados
                    </h2>
                </div>
                <div class="dashboard-panel__body">
                    <dl class="versao-detail-meta">
                        <div class="versao-detail-meta__row">
                            <dt>Publicado em</dt>
                            <dd>{{ $versao->publicado_em?->format('d/m/Y H:i') ?? '—' }}</dd>
                        </div>
                        <div class="versao-detail-meta__row">
                            <dt>Homolog origem</dt>
                            <dd>
                                @if($versao->versao_homolog_origem)
                                    <span class="listagem-version-code listagem-version-code--muted">{{ $versao->versao_homolog_origem }}</span>
                                @else
                                    —
                                @endif
                            </dd>
                        </div>
                        <div class="versao-detail-meta__row">
                            <dt>Registado em</dt>
                            <dd>{{ $versao->created_at?->format('d/m/Y H:i') ?? '—' }}</dd>
                        </div>
                        <div class="versao-detail-meta__row">
                            <dt>Status</dt>
                            <dd>{{ ucfirst($versao->status) }}</dd>
                        </div>
                    </dl>

                    @if($versao->git_metadados)
                        <div class="versao-detail-block mt-3">
                            <h3 class="versao-detail-block__title">Git</h3>
                            <pre class="versao-detail-pre versao-detail-pre--compact">{{ json_encode($versao->git_metadados, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            @if($versao->artefacto_markdown)
                <div class="dashboard-panel">
                    <div class="dashboard-panel__header">
                        <h2 class="dashboard-panel__title">
                            <i class="fas fa-file-code" aria-hidden="true"></i>
                            Artefacto completo (markdown)
                        </h2>
                    </div>
                    <div class="dashboard-panel__body p-0">
                        <pre class="versao-detail-artifact">{{ $versao->artefacto_markdown }}</pre>
                    </div>
                </div>
            @else
                <div class="dashboard-panel">
                    <div class="dashboard-panel__body">
                        <div class="dashboard-empty dashboard-empty--compact">
                            <i class="fas fa-file-alt" aria-hidden="true"></i>
                            <p>Esta versão não inclui artefacto markdown.</p>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/adminlte-inter.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-colors.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-listagem.css') }}">
    <style>
        .listagem-version-code--hero {
            font-size: 1.5rem;
            padding: 0.35rem 0.85rem;
        }
        .versao-detail-block + .versao-detail-block {
            margin-top: 1.25rem;
            padding-top: 1.25rem;
            border-top: 1px solid rgba(108, 99, 255, 0.08);
        }
        .versao-detail-block__title {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--waygest-text-secondary);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .versao-detail-block__text {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.55;
            color: var(--waygest-text-primary);
        }
        .versao-detail-list {
            margin: 0;
            padding-left: 1.25rem;
            font-size: 0.9rem;
            line-height: 1.55;
            color: var(--waygest-text-primary);
        }
        .versao-detail-list li + li {
            margin-top: 0.35rem;
        }
        .versao-detail-pre {
            margin: 0;
            padding: 1rem;
            border-radius: 10px;
            background: var(--waygest-light-gray);
            font-size: 0.8rem;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .versao-detail-pre--compact {
            max-height: 200px;
            overflow: auto;
        }
        .versao-detail-meta {
            margin: 0;
        }
        .versao-detail-meta__row {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.65rem 0;
            border-bottom: 1px solid rgba(108, 99, 255, 0.06);
            font-size: 0.875rem;
        }
        .versao-detail-meta__row:last-child {
            border-bottom: none;
        }
        .versao-detail-meta__row dt {
            font-weight: 600;
            color: var(--waygest-text-secondary);
            margin: 0;
        }
        .versao-detail-meta__row dd {
            margin: 0;
            text-align: right;
            color: var(--waygest-text-primary);
        }
        .versao-detail-artifact {
            margin: 0;
            padding: 1.25rem 1.35rem;
            max-height: 75vh;
            overflow: auto;
            white-space: pre-wrap;
            word-break: break-word;
            font-size: 0.8rem;
            line-height: 1.55;
            background: #fafbfc;
            border-radius: 0 0 12px 12px;
        }
        .dashboard-empty--compact {
            padding: 2rem 1rem;
        }
    </style>
@stop