{{-- resources/views/filament/components/article-comparison.blade.php --}}
{{-- Story 5-16: Side-by-side article translation comparison --}}
{{-- Rendered inside Filament slide-over modal via modalContent() --}}
@php
$currentBlocks = $current->blocks ?? [];
$counterpartBlocks = $counterpart->blocks ?? [];
$maxCount = max(count($currentBlocks), count($counterpartBlocks));

/**
* Check if a block's content fields are considered empty/missing.
*/
$isBlockEmpty = function (array $block): bool {
$data = $block['data'] ?? [];
$contentKeys = ['text', 'content', 'items', 'path', 'url', 'images'];

foreach ($contentKeys as $key) {
if (! array_key_exists($key, $data)) {
continue;
}
$value = $data[$key];
if (is_null($value) || $value === '' || $value === []) {
return true;
}
}

return false;
};

$localeLabels = ['fr' => 'Français', 'en' => 'English'];
$localeBadgeColors = [
'fr' => 'background:#dbeafe;color:#1e40af;border:1px solid #93c5fd;',
'en' => 'background:#dcfce7;color:#166534;border:1px solid #86efac;',
];

$blockTypeLabels = [
'paragraph' => 'Paragraphe',
'classic' => 'Classique',
'heading' => 'Titre',
'list' => 'Liste',
'quote' => 'Citation',
'image' => 'Image',
'gallery' => 'Galerie',
'video' => 'Vidéo',
'link' => 'Lien',
'button' => 'Bouton',
'banner' => 'Bannière',
'kpi' => 'KPI',
];
@endphp

<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:300px;">
    {{-- ── Left column: Current article ── --}}
    <div style="display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;">
        {{-- Column header --}}
        <div style="display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f9fafb;border-bottom:1px solid #e5e7eb;">
            <span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;{{ $localeBadgeColors[$current->locale] ?? '' }}">
                {{ strtoupper($current->locale) }}
            </span>
            <span style="font-size:14px;font-weight:600;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                {{ $current->title ?: '(Sans titre)' }}
            </span>
        </div>

        {{-- Blocks --}}
        <div style="overflow-y:auto;max-height:70vh;padding:12px;">
            @for ($i = 0; $i < $maxCount; $i++)
                @if (isset($currentBlocks[$i]))
                @php $block=$currentBlocks[$i]; @endphp
                <div style="margin-bottom:12px;padding:10px;border:1px solid #e5e7eb;border-radius:6px;background:#ffffff;">
                {{-- Block type label --}}
                <div style="margin-bottom:6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;">
                    {{ $blockTypeLabels[$block['type']] ?? ucfirst($block['type']) }}
                </div>
                {{-- Block content --}}
                @include('filament.components.partials.comparison-block', ['block' => $block])
        </div>
        @else
        {{-- Missing block placeholder --}}
        <div style="margin-bottom:12px;padding:10px;border:2px dashed #d1d5db;border-radius:6px;background:#f9fafb;text-align:center;">
            <span style="font-size:12px;color:#9ca3af;font-style:italic;">Bloc absent</span>
        </div>
        @endif
        @endfor

        @if ($maxCount === 0)
        <div style="padding:20px;text-align:center;">
            <span style="font-size:13px;color:#9ca3af;">Aucun bloc</span>
        </div>
        @endif
    </div>
</div>

{{-- ── Right column: Counterpart article ── --}}
<div style="display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;">
    {{-- Column header --}}
    <div style="display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f9fafb;border-bottom:1px solid #e5e7eb;">
        <span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;{{ $localeBadgeColors[$counterpart->locale] ?? '' }}">
            {{ strtoupper($counterpart->locale) }}
        </span>
        <span style="font-size:14px;font-weight:600;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
            {{ $counterpart->title ?: '(Sans titre)' }}
        </span>
    </div>

    {{-- Blocks --}}
    <div style="overflow-y:auto;max-height:70vh;padding:12px;">
        @for ($i = 0; $i < $maxCount; $i++)
            @if (isset($counterpartBlocks[$i]))
            @php
            $block=$counterpartBlocks[$i];
            $empty=$isBlockEmpty($block);
            @endphp
            <div style="margin-bottom:12px;padding:10px;border-radius:6px;{{ $empty ? 'border:2px solid #fbbf24;background:#fffbeb;' : 'border:1px solid #e5e7eb;background:#ffffff;' }}">
            {{-- Block type label + empty warning --}}
            <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
                <span style="font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;">
                    {{ $blockTypeLabels[$block['type']] ?? ucfirst($block['type']) }}
                </span>
                @if ($empty)
                <span style="display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;background:#fef3c7;color:#92400e;">
                    <svg style="width:11px;height:11px;" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                    </svg>
                    Contenu manquant
                </span>
                @endif
            </div>
            {{-- Block content --}}
            @include('filament.components.partials.comparison-block', ['block' => $block])
    </div>
    @else
    {{-- Missing block placeholder --}}
    <div style="margin-bottom:12px;padding:10px;border:2px dashed #d1d5db;border-radius:6px;background:#f9fafb;text-align:center;">
        <span style="font-size:12px;color:#9ca3af;font-style:italic;">Bloc absent</span>
    </div>
    @endif
    @endfor

    @if ($maxCount === 0)
    <div style="padding:20px;text-align:center;">
        <span style="font-size:13px;color:#9ca3af;">Aucun bloc</span>
    </div>
    @endif
</div>
</div>
</div>