{!
    Job Details Recap Component
    Displays batch key metrics and statistics using grouped area records from GetJobDetailsRecapUseCase.Result

    Parameters:
    - recap: GetJobDetailsRecapUseCase.Result - The recap data object
!}

<div class="row g-2">
    <!-- Status Card (with start and finish times) -->
    <div class="col-md-6">
        <div class="card border-left-info">
            <div class="card-body">
                <div class="row">
                    <div class="col-auto">
                        <div class="display-6">
                            {#if recap.jobStatusAndTimestamp.jobStatus.name() == 'SUCCEEDED'}
                                <i class="bi bi-check-circle text-success"></i>
                            {#else if recap.jobStatusAndTimestamp.jobStatus.name() == 'FAILED'}
                                <i class="bi bi-x-circle text-danger"></i>
                            {#else if recap.jobStatusAndTimestamp.jobStatus.name() == 'PROCESSING'}
                                <i class="bi bi-play-circle text-primary"></i>
                            {#else if recap.jobStatusAndTimestamp.jobStatus.name() == 'ENQUEUED'}
                                <i class="bi bi-hourglass text-secondary"></i>
                            {#else}
                                <i class="bi bi-question-circle text-muted"></i>
                            {/if}
                        </div>
                    </div>
                    <div class="col">
                        <div class="text-muted small font-weight-bold">Batch Status & Zeitraum</div>
                        <div class="mb-2">
                            <span class="badge {#if recap.jobStatusAndTimestamp.jobStatus.name() == 'SUCCEEDED'}bg-success{#else if recap.jobStatusAndTimestamp.jobStatus.name() == 'FAILED'}bg-danger{#else if recap.jobStatusAndTimestamp.jobStatus.name() == 'PROCESSING'}bg-primary{#else}bg-secondary{/if}">
                                {recap.jobStatusAndTimestamp.jobStatus}
                            </span>
                        </div>
                        <small class="text-muted d-block">
                            Start: <strong>{recap.jobStatusAndTimestamp.getStartedAtFormatted()}</strong>
                        </small>
                        {#if recap.jobStatusAndTimestamp.finishedAt}
                            <small class="text-muted d-block">
                                Ende: <strong>{recap.jobStatusAndTimestamp.getFinishedAtFormatted()}</strong>
                            </small>
                        {#else}
                            <small class="text-warning d-block">
                                <i class="bi bi-clock"></i> Läuft noch...
                            </small>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Average Time Per Child Job -->
    <div class="col-md-6">
        <div class="card border-left-warning">
            <div class="card-body">
                <div class="row">
                    <div class="col-auto">
                        <div class="display-6 text-warning">
                            <i class="bi bi-clock"></i>
                        </div>
                    </div>
                    <div class="col">
                        <div class="text-muted small font-weight-bold">Durchschn. Laufzeit / totale Laufzeit</div>
                        <div class="h3 mb-0"><strong>{recap.jobDurations.averageChildDuration}</strong> <small class="text-muted" style="font-size: 0.7em;">{recap.jobDurations.averageChildDurationUnit}</small> / <strong>{recap.jobDurations.totalJobDuration}</strong> <small class="text-muted" style="font-size: 0.7em;">{recap.jobDurations.totalJobDurationUnit}</small></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Total Jobs -->
    <div class="col-md-6">
        <div class="card border-left-primary">
            <div class="card-body">
                <div class="row">
                    <div class="col-auto">
                        <div class="display-6 text-primary">
                            <i class="bi bi-play-circle"></i>
                        </div>
                    </div>
                    <div class="col">
                        <div class="text-muted small font-weight-bold">Erfolgsquote</div>
                        <div class="h3 mb-0"><strong>{recap.childJobCounters.succeededChildJobCount} / {recap.childJobCounters.totalChildJobs}</strong></div>
                        <small class="text-muted">{recap.childJobCounters.completedPercentage}% Abgeschlossen</small>
                    </div>
                    <div class="col">
                        {#if recap.childJobCounters.succeededChildJobCount > 0}
                            <div class="h5 text-success">
                                <i class="bi bi-check-circle"></i> {recap.childJobCounters.succeededChildJobCount}
                            </div>
                        {/if}
                        {#if recap.childJobCounters.failedChildJobCount > 0}
                            <div class="h5 text-danger">
                                <i class="bi bi-exclamation-circle"></i> {recap.childJobCounters.failedChildJobCount}
                            </div>
                        {/if}
                        {#if recap.childJobCounters.inProgressChildJobCount > 0}
                            <div class="h5 text-secondary">
                                <i class="bi bi-hourglass-split"></i> {recap.childJobCounters.inProgressChildJobCount}
                            </div>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Warnings -->
    <div class="col-md-6">
        <div class="card border-left-orange">
            <div class="card-body">
                <div class="row">
                    <div class="col-auto">
                        <div class="display-6 text-orange">
                            <i class="bi bi-envelope"></i>
                        </div>
                    </div>
                    <div class="col">
                        <div class="text-muted small font-weight-bold">Total Meldungen</div>
                        <div class="h3 mb-0"><strong>{recap.messageCount.totalMessages}</strong></div>
                    </div>
                    <div class="col">
                        {#if recap.messageCount.infoMessages > 0}
                        <div class="h5 text-info">
                            <i class="bi bi-info-circle"></i> {recap.messageCount.infoMessages}
                        </div>
                        {/if}
                        {#if recap.messageCount.warningMessages > 0}
                        <div class="h5 text-warning">
                            <i class="bi bi-exclamation-circle"></i> {recap.messageCount.warningMessages}
                        </div>
                        {/if}
                        {#if recap.messageCount.errorMessages > 0}
                        <div class="h5 text-danger">
                            <i class="bi bi-x-circle"></i> {recap.messageCount.errorMessages}
                        </div>
                        {/if}
                        {#if recap.messageCount.exceptionMessages > 0}
                        <div class="h5 text-danger">
                            <i class="bi bi-bug"></i> {recap.messageCount.exceptionMessages}
                        </div>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{#if recap.recapView != null && recap.recapView.recapSections != null && recap.recapView.recapSections.size() > 0}
<div class="mt-4">
    <h6 class="text-muted">
        <i class="bi bi-table"></i> Programmspezifische Kennzahlen
    </h6>
    <table class="table table-sm table-bordered">
        <thead class="table-light">
            <tr>
                <th>Kennzahl</th>
                <th class="text-end">Wert</th>
            </tr>
        </thead>
        {#for section in recap.recapView.recapSections}
            <tbody class="recap-section-group">
                {#if section.hasSection}
                <tr class="recap-section-header">
                    <th class="text-muted recap-section-title">{section.sectionName}</th>
                    <th class="text-end recap-section-title"><span class="text-body-secondary fw-bold">{section.sectionTotal}</span></th>
                </tr>
                {/if}
                {#for entry in section.recapEntries}
                    <tr title="{entry.recapParameter.description}">
                        <td style="{#if section.hasSection}padding-left: 1.15rem !important; {/if}{#if entry.recapParameter.css != null && !entry.recapParameter.css.isBlank()}{entry.recapParameter.css}{/if}">
                            {#if entry.recapParameter.icon != null && !entry.recapParameter.icon.isBlank()}<i class="bi {entry.recapParameter.icon}"></i> {/if}{entry.recapParameter.displayName}
                        </td>
                        {#if entry.counter != null}
                            <td class="text-end" {#if entry.recapParameter.css != null && !entry.recapParameter.css.isBlank()}style="{entry.recapParameter.css}"{/if}><strong>{entry.counter}</strong></td>
                        {#else}
                            <td class="text-end" {#if entry.recapParameter.css != null && !entry.recapParameter.css.isBlank()}style="{entry.recapParameter.css}"{/if}><strong>--</strong></td>
                        {/if}
                    </tr>
                {/for}
            </tbody>
        {/for}
    </table>
</div>
{/if}

<style>
    .border-left-primary {
        border-left: 4px solid #0d6efd !important;
    }
    .border-left-warning {
        border-left: 4px solid #ffc107 !important;
    }
    .border-left-info {
        border-left: 4px solid #0dcaf0 !important;
    }
    .border-left-orange {
        border-left: 4px solid #fd7e14 !important;
    }
    .text-orange {
        color: #fd7e14 !important;
    }
    .recap-section-header {
        background-color: #f8f9fa;
    }
    .recap-section-header th {
        border-top: 2px solid #dee2e6;
    }
    .recap-section-title {
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        color: #6c757d !important;
    }
    .recap-section-group td, .recap-section-group th {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
</style>