{{-- A menu as a PDF (mPDF): the email/portal recipe-card design laid out
     for A4 — a first page with the targets and the day at a glance, then one
     page per meal with its dish, nutrition, core components and ingredients.
     A menu built from components has no dishes: its meals list their
     components on the first page and follow one another, a page per day.

     mPDF only rounds the corners of block elements, can't shrink a float to
     its content and ignores margins between floats, so a row of pills is
     floats with set widths, each wrapped in a padded float for the
     gap, and pictures come with their corners already rounded (MenuMedia). --}}
@php
    $isAr = app()->getLocale() === 'ar';
    $dir = $isAr ? 'rtl' : 'ltr';
    $start = $isAr ? 'right' : 'left';
    $end = $isAr ? 'left' : 'right';
    $isRecipeMenu = ($menu->generation_input['source'] ?? null) === \App\Services\RecipeMenuService::SOURCE;

    // MenuPlanPdfService passes a text's width (mm) in the PDF's own fonts.
    $measure ??= fn (string $text, float $pt, bool $bold = false): float => mb_strlen($text) * $pt * ($bold ? 0.2 : 0.18);
    $name = fn (array $r) => $isAr ? ($r['name_ar'] ?: $r['name_en']) : ($r['name_en'] ?: $r['name_ar']);
    $otherName = fn (array $r) => $isAr ? $r['name_en'] : $r['name_ar'];
    $itemName = fn (array $i) => ($isAr ? ($i['name_ar'] ?? null) : ($i['name_en'] ?? null)) ?: ($i['name'] ?? '');
    $number = fn ($value) => rtrim(rtrim(number_format((float) $value, 1), '0'), '.');
    $amount = fn (array $i) => $number($i['grams']) . ' ' . (($i['unit'] ?? null) === 'ml' ? __('common.ml') : __('common.grams'));
    $grams = __('common.grams');
    $kcal = __('menus.recipes.kcal');
    $totalsOf = fn ($items) => [
        'calories' => (int) round(collect($items)->sum('calories')),
        'protein_g' => round(collect($items)->sum('protein_g'), 1),
        'carbs_g' => round(collect($items)->sum('carbs_g'), 1),
        'fat_g' => round(collect($items)->sum('fat_g'), 1),
        'fiber_g' => round(collect($items)->sum('fiber_g'), 1),
    ];
    $macrosLine = fn (array $t) => collect(['protein' => $t['protein_g'], 'carbs' => $t['carbs_g'], 'fat' => $t['fat_g'], 'fiber' => $t['fiber_g'] ?? 0])
        ->map(fn ($value, $key) => __('menus.recipes.' . $key) . ' ' . $number($value) . ' ' . $grams)
        ->implode(' · ');
    $icon = fn (string $key, float $size, string $style = '') => ($src = $media->icon($key))
        ? '<img src="' . e($src) . '" style="width:' . $size . 'mm; height:' . $size . 'mm; vertical-align:middle; ' . $style . '">'
        : '';
    $thumb = fn (array $item) => ($photo = \App\Services\RecipeMenuService::pickPhoto(($componentPhotos ?? [])[$item['component_id'] ?? 0] ?? [], (float) $item['grams']))
        ? $media->photo($photo, 96, true)
        : null;

    // A rounded pill floated to the start of its row (or the end). Its width
    // is the measured text, and its wrapper's padding is the gap to the next.
    $pill = function (string $text, string $style, ?string $iconKey = null, float $pt = 9, bool $bold = true, bool $atEnd = false) use ($measure, $icon, $start, $end): string {
        $img = $iconKey ? $icon($iconKey, 4.2) : '';
        $width = round($measure($text, $pt, $bold) + 8 + ($img ? 5.5 : 0), 1);

        return '<div style="float:' . ($atEnd ? $end : $start) . '; width:' . $width . 'mm;' . ($atEnd ? '' : ' padding-' . $end . ':2mm;') . '">'
            . '<div style="' . $style . ' border-radius:4mm; padding:1.5mm 0; text-align:center; font-size:' . $pt . 'pt; font-weight:' . ($bold ? 'bold' : 'normal') . ';">'
            . ($img ? $img . '&nbsp;' : '') . e($text) . '</div></div>';
    };

    // Page geometry (mm): A4 less the 12 mm side margins set in @page.
    $pageWidth = 186;

    $patient = $menu->patient;
    $logo = $media->logo(520);
@endphp
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ $dir }}">
<head>
    <meta charset="utf-8">
    <title>{{ $menu->title }}</title>
    <style>
        @page {
            margin-top: 27mm;
            margin-bottom: 16mm;
            margin-left: 12mm;
            margin-right: 12mm;
            margin-header: 8mm;
            margin-footer: 7mm;
            header: html_planHeader;
            footer: html_planFooter;
        }
        @page :first {
            margin-top: 12mm;
            header: html_firstHeader;
        }
        body { direction: {{ $dir }}; text-align: {{ $start }}; font-size: 9.5pt; color: #1B1813; }
        .muted { color: #837D70; }
        .card { border: 0.3mm solid #E8E7E4; border-radius: 4mm; }
        .box-title { text-align: center; font-size: 8.5pt; font-weight: bold; color: #3B5A20; }
        .clear { clear: both; height: 0; font-size: 1pt; line-height: 1pt; }
        table { border-collapse: collapse; }
        td { vertical-align: middle; }
    </style>
</head>
<body>

<htmlpageheader name="firstHeader"><div></div></htmlpageheader>

<htmlpageheader name="planHeader">
    <div style="border-bottom: 0.5mm solid #5F8A31;">
    <table width="100%">
        <tr>
            @if ($logo)
                <td style="width: 17mm; padding-bottom: 1.5mm;"><img src="{{ $logo }}" style="height: 11mm;"></td>
            @endif
            <td style="padding-bottom: 1.5mm;">
                <div style="font-size: 10pt; font-weight: bold; color: #263A17;">{{ $menu->title }}</div>
                <div style="font-size: 8pt; color: #837D70;">{{ $patient?->full_name }} &middot; {{ $patient?->file_number }}</div>
            </td>
            <td style="padding-bottom: 1.5mm; text-align: {{ $end }}; font-size: 8pt; color: #837D70;"><bdo dir="ltr">{{ $menu->starts_on?->format('Y-m-d') }}</bdo></td>
        </tr>
    </table>
    </div>
</htmlpageheader>

<htmlpagefooter name="planFooter">
    <div style="text-align: center; font-size: 7.5pt; color: #AFABA1;">Smart Carb Nutritecs &middot; <bdo dir="ltr">{{ now()->format('Y-m-d') }}</bdo> &middot; {PAGENO} / {nbpg}</div>
</htmlpagefooter>

{{-- ============ First page: who it's for, targets, the day at a glance ============ --}}
@if ($logo)
    <div style="text-align: center; margin-bottom: 4mm;"><img src="{{ $logo }}" style="width: 36mm;"></div>
@endif

<div class="card" style="padding: 5mm;">
    <div style="font-size: 12pt;">{{ __('menus.recipes.email_greeting', ['name' => $patient?->first_name ?? $patient?->full_name]) }}</div>
    <div class="muted" style="font-size: 8.5pt; margin-top: 1.5mm;">
        {{ $menu->title }} &middot; <bdo dir="ltr">{{ $menu->starts_on?->format('Y-m-d') }}</bdo>
        @if ($menu->duration_days > 1)
            &middot; {{ $menu->duration_days }} {{ __('common.days') }}
        @endif
    </div>
    <div class="muted" style="font-size: 8.5pt; margin-top: 0.5mm;">
        {{ __('patients.file_number') }}: <b style="color: #263A17;">{{ $patient?->file_number ?? '—' }}</b> &middot;
        {{ __('patients.reviewer_name') }}: <b style="color: #263A17;">{{ $patient?->full_name ?? '—' }}</b> &middot;
        {{ __('patients.consultant_name') }}: <b style="color: #263A17;">{{ $patient?->consultant?->name ?? '—' }}</b>
    </div>

    <div style="margin-top: 4mm;">
        @foreach ([
            [__('patients.target_calories'), number_format($menu->target_calories), $kcal, '#5F8A31', '#F2F6E9'],
            [__('patients.protein'), $menu->protein_g, $grams, '#1B1813', '#F6F6F5'],
            [__('patients.carbs'), $menu->carbs_g, $grams, '#1B1813', '#F6F6F5'],
            [__('patients.fat'), $menu->fat_g, $grams, '#1B1813', '#F6F6F5'],
        ] as $i => [$label, $value, $unit, $color, $bg])
            <div style="float: {{ $start }}; width: 41.5mm; {{ $i < 3 ? 'padding-' . $end . ': 3mm;' : '' }}">
                <div style="background: {{ $bg }}; border-radius: 3.5mm; padding: 2.5mm 0; text-align: center;">
                    <div style="font-size: 8pt; color: #837D70;">{{ $label }}</div>
                    <div style="font-size: 15pt; font-weight: bold; color: {{ $color }};">{{ $value }} <span style="font-size: 8pt; font-weight: normal;">{{ $unit }}</span></div>
                </div>
            </div>
        @endforeach
        <div class="clear"></div>
    </div>
</div>

<div style="margin-top: 6mm;">
    {!! $pill(__('menus.recipes.day_overview'), 'background: #F2F6E9; color: #3B5A20;', 'super', 10) !!}
    <div class="clear"></div>
</div>

@foreach ($days as $day)
    @php $dayTotals = $totalsOf(collect($day['meals'])->flatMap(fn ($meal) => $meal['items'])); @endphp

    @if (count($days) > 1)
        <div style="font-size: 11pt; font-weight: bold; color: #263A17; margin-top: 4mm;">{{ __('common.day') }} {{ $day['day'] }}</div>
    @endif

    @foreach ($day['meals'] as $meal)
        @php
            $recipe = $meal['recipe'] ?? null;
            $mealTotals = $totalsOf($meal['items']);
            $image = $recipe ? $media->dish($recipe['image'] ?? null, 480, 0.06) : null;
        @endphp
        <div class="card" style="padding: 3mm; margin-top: 3mm; page-break-inside: avoid;">
            <table width="100%">
                <tr>
                    @if ($image)
                        <td style="width: 52mm;"><img src="{{ $image }}" style="width: 50mm;"></td>
                    @endif
                    <td style="padding: 0 3mm;">
                        {{-- Lines as rows: mPDF ignores block margins inside a cell
                             and packs its lines too tightly for Arabic beside Latin. --}}
                        <table width="100%">
                            <tr><td style="font-size: 9pt; font-weight: bold; color: #3B5A20; padding-bottom: 1mm;">
                                {!! $icon($meal['slot'], 4.5) !!} {{ __('menus.slots.' . $meal['slot']) }}
                                @if ($recipe['is_super_meal'] ?? false)
                                    &nbsp; <span style="color: #5F8A31;">{!! $icon('super', 4) !!} {{ __('menus.recipes.super_meal') }}</span>
                                @endif
                            </td></tr>
                            @if ($recipe)
                                <tr><td style="font-size: 12.5pt; font-weight: bold;">{{ $name($recipe) }}</td></tr>
                                @if ($otherName($recipe))
                                    <tr><td class="muted" style="font-size: 8.5pt; padding-top: 0.5mm;">{{ $otherName($recipe) }}</td></tr>
                                @endif
                            @elseif ($isRecipeMenu)
                                <tr><td class="muted" style="font-size: 9pt;">{{ __('menus.recipes.fallback_note') }}</td></tr>
                            @else
                                <tr><td style="font-size: 10pt; font-weight: bold;">{{ collect($meal['items'])->map($itemName)->filter()->implode(' · ') }}</td></tr>
                            @endif
                            <tr><td class="muted" style="font-size: 8pt; padding-top: 1.5mm;">{{ $macrosLine($mealTotals) }}</td></tr>
                        </table>
                    </td>
                    <td style="width: 30mm; text-align: center;">
                        {!! $icon('kcal', 6.5) !!}
                        <div style="font-size: 16pt; font-weight: bold; color: #E8792A;">{{ number_format($mealTotals['calories']) }}</div>
                        <div class="muted" style="font-size: 7.5pt;">{{ $kcal }} &middot; {{ __('menus.recipes.meal_target') }} {{ number_format($meal['target_calories']) }}</div>
                    </td>
                </tr>
            </table>
        </div>
    @endforeach

    <div style="background: #F2F6E9; border-radius: 3.5mm; padding: 3mm 4mm; margin-top: 3mm; font-size: 9pt; color: #3B5A20;">
        <b>{{ __('menus.recipes.day_total') }}:</b>
        &nbsp; {!! $icon('kcal', 4) !!} <b style="color: #E8792A;">{{ number_format($dayTotals['calories']) }}</b> {{ $kcal }}
        &nbsp;&middot;&nbsp; {{ $macrosLine($dayTotals) }}
    </div>
@endforeach

{{-- ============ One page per meal ============ --}}
@foreach ($days as $day)
    @foreach ($day['meals'] as $meal)
        @php
            $slot = $meal['slot'];
            $recipe = $meal['recipe'] ?? null;
            $items = $meal['items'];
            $mealTotals = $totalsOf($items);
            $hero = $recipe ? $media->dish($recipe['image'] ?? null, 800, 0.035) : null;
            $rows = array_chunk($items, (int) max(1, ceil(count($items) / 2))) ?: [[]];
            // The paid-components row needs ~12 mm; a slightly narrower dish keeps the meal on one page.
            $heroWidth = $recipe && ! empty($benefits['unlocked']) ? 168 : $pageWidth;
        @endphp
        @if ($isRecipeMenu || $loop->first)
            <pagebreak />
        @else
            <div style="height: 8mm;"></div>
        @endif

        {{-- Tabs --}}
        <div>
            @if (count($days) > 1)
                {!! $pill(__('common.day') . ' ' . $day['day'], 'background: #F6F6F5; color: #1B1813;') !!}
            @endif
            {!! $pill(__('menus.slots.' . $slot), 'background: #E1EBC9; color: #3B5A20;', $slot, 10.5) !!}
            @if ($recipe['is_super_meal'] ?? false)
                {!! $pill(__('menus.recipes.super_meal'), 'border: 0.3mm solid #D5E7BC; color: #5F8A31;', 'super') !!}
            @endif
            @if ($recipe['is_new'] ?? false)
                {!! $pill(__('menus.recipes.new'), 'border: 0.3mm dashed #C3D89A; color: #3B5A20;', null, 8) !!}
            @endif
            {!! $pill(__('menus.recipes.meal_target') . ': ' . number_format($meal['target_calories']) . ' ' . $kcal, 'background: #F2F6E9; color: #3B5A20;', null, 8.5, false, true) !!}
            <div class="clear"></div>
        </div>

        @if ($recipe)
            <div style="font-size: 18pt; font-weight: bold; margin-top: 3mm;">{{ $name($recipe) }}</div>
            @if ($otherName($recipe))
                <div class="muted" lang="{{ $isAr ? 'en' : 'ar' }}" style="font-size: 9.5pt;">{{ $otherName($recipe) }}</div>
            @endif
        @elseif ($isRecipeMenu)
            <div style="margin-top: 3mm; padding: 2.5mm 3.5mm; border-radius: 3mm; font-size: 9.5pt; color: #92400E; background: #FFFBEB; border: 0.3mm solid #FDE68A;">
                {{ __('menus.recipes.fallback_note') }}
            </div>
        @endif

        {{-- The dish across the page, as in the email --}}
        @if ($recipe)
            <div style="margin-top: 3mm; text-align: center;">
                @if ($hero)
                    <img src="{{ $hero }}" style="width: {{ $heroWidth }}mm;">
                @else
                    <div style="height: {{ round($heroWidth * 500 / 800, 1) }}mm; background: #F7F2E8; border-radius: 4mm;"></div>
                @endif
            </div>
        @endif

        {{-- Nutrition --}}
        <div style="margin-top: 3mm;">
            <table width="100%">
                <tr>
                    @foreach ([
                        ['kcal', number_format($mealTotals['calories']), ''],
                        ['fat', $number($mealTotals['fat_g']), $grams],
                        ['fiber', $number($mealTotals['fiber_g']), $grams],
                        ['protein', $number($mealTotals['protein_g']), $grams],
                        ['carbs', $number($mealTotals['carbs_g']), $grams],
                    ] as $i => [$key, $value, $unit])
                        {{-- mPDF ignores a div's background inside a cell: the cell is the tile, spacer cells the gaps. --}}
                        @if ($i)
                            <td style="width: 2%;"></td>
                        @endif
                        <td style="width: 18.4%; background: #F7F5EF; border-radius: 3mm; text-align: center; padding: 1.5mm 0;">
                            {!! $icon($key, 6) !!}
                            <div style="font-size: 12pt; font-weight: bold; color: {{ $key === 'kcal' ? '#E8792A' : '#1B1813' }};">{{ $value }} <span style="font-size: 8pt; font-weight: normal;">{{ $unit }}</span></div>
                            <div style="font-size: 8pt; color: #837D70;">{{ __('menus.recipes.' . $key) }}</div>
                        </td>
                    @endforeach
                </tr>
            </table>
        </div>

        {{-- Core components, one row --}}
        @if ($recipe)
            <div class="card" style="margin-top: 3mm; padding: 2.5mm 1.5mm;">
                <div class="box-title" style="margin-bottom: 1mm;">{{ __('menus.recipes.core_components') }}</div>
                <table width="100%">
                    <tr>
                        @foreach (\App\Models\Recipe::CORE_CATEGORIES as $category)
                            @php $on = in_array($category, $recipe['core_categories'] ?? [], true); @endphp
                            <td style="width: 12.5%; text-align: center; vertical-align: top; padding: 1mm 0.5mm;">
                                <div>{!! $icon($category . ($on ? '-on' : '-off'), 9) !!}</div>
                                <div style="font-size: 7.5pt; margin-top: 0.5mm; color: {{ $on ? '#1B1813' : '#AFABA1' }}; font-weight: {{ $on ? 'bold' : 'normal' }};">{{ __('menus.recipes.categories.' . $category) }}</div>
                            </td>
                        @endforeach
                    </tr>
                </table>
                {{-- The paid components the clinic has bought; locked ones stay off the reviewer's copy --}}
                @if (! empty($benefits['unlocked']))
                    @php
                        $earned = $benefits['recipes'][$recipe['id']] ?? [];
                        $shown = collect($benefits['all'])->whereIn('slug', $benefits['unlocked']);
                    @endphp
                    <table width="100%" style="margin-top: 1.5mm; border-top: 0.3mm dashed #E8E7E4;">
                        <tr>
                            @foreach ($shown as $benefit)
                                @php $on = in_array($benefit['slug'], $earned, true); @endphp
                                <td style="width: {{ round(100 / $shown->count(), 2) }}%; text-align: center; vertical-align: top; padding: 2mm 0.5mm 0;">
                                    <div>{!! $icon($benefit['slug'] . ($on ? '-on' : '-off'), 9) !!}</div>
                                    <div style="font-size: 7.5pt; margin-top: 0.5mm; color: {{ $on ? '#1B1813' : '#AFABA1' }}; font-weight: {{ $on ? 'bold' : 'normal' }};">{{ $benefit['name'] }}</div>
                                </td>
                            @endforeach
                        </tr>
                    </table>
                @endif
            </div>
        @endif

        {{-- Ingredients, two columns --}}
        <div class="card" style="margin-top: 3mm; padding: 2.5mm 3mm;">
            <div class="box-title" style="margin-bottom: 1mm;">{{ __('menus.recipes.ingredients') }}</div>
            <table width="100%">
                @for ($r = 0; $r < count($rows[0]); $r++)
                    <tr>
                        @foreach ([0, 1] as $column)
                            @php $item = $rows[$column][$r] ?? null; $line = $r < count($rows[0]) - 1 ? 'border-bottom: 0.3mm dashed #E8E7E4;' : ''; @endphp
                            @if ($column === 1)
                                <td style="width: 6mm;"></td>
                            @endif
                            @if ($item)
                                @php $src = $thumb($item); @endphp
                                <td style="width: 9mm; padding: 0.8mm 0; {{ $line }}">
                                    @if ($src)
                                        <img src="{{ $src }}" style="width: 7mm; height: 7mm;">
                                    @else
                                        <div style="text-align: center; color: #5F8A31; font-size: 13pt;">&bull;</div>
                                    @endif
                                </td>
                                <td style="font-size: 9pt; padding: 0.8mm 1mm; {{ $line }}">{{ $itemName($item) }}</td>
                                <td style="font-size: 9pt; font-weight: bold; color: #3B5A20; white-space: nowrap; text-align: {{ $end }}; padding: 0.8mm 0; {{ $line }}">{{ $amount($item) }}</td>
                            @else
                                <td></td><td></td><td></td>
                            @endif
                        @endforeach
                    </tr>
                @endfor
            </table>
        </div>

    @endforeach
@endforeach

@if ($totalDays > count($days))
    <div class="muted" style="margin-top: 6mm; text-align: center; font-size: 8.5pt;">{{ __('menus.email_more_days', ['count' => $totalDays - count($days)]) }}</div>
@endif

</body>
</html>