@php
    $brandColor = $settings->brand_color ?: '#2563EB';
    $isStory = $imageSize === 'story';
    $isSquare = $imageSize === 'square';
    $isFacebook = $imageSize === 'facebook';
    $isLight = $imageTheme === 'light';
    $outcomeTotal = max(1, $report['wins'] + $report['losses'] + $report['breakeven']);
    $winPercent = round(($report['wins'] / $outcomeTotal) * 100, 1);
    $lossPercent = round(($report['losses'] / $outcomeTotal) * 100, 1);
    $lossStop = min(100, $winPercent + $lossPercent);
    $equityValues = collect($report['equityCurve'])->pluck('value');
    $equityMin = (float) $equityValues->min();
    $equityMax = (float) $equityValues->max();
    $equityRange = max(1, $equityMax - $equityMin);
    $equityCount = max(1, count($report['equityCurve']) - 1);
    $equityPoints = collect($report['equityCurve'])->values()->map(function ($point, $index) use ($equityMin, $equityRange, $equityCount) {
        $x = round(($index / $equityCount) * 100, 2);
        $y = round(76 - ((((float) $point['value'] - $equityMin) / $equityRange) * 58), 2);
        return $x.','.$y;
    })->implode(' ');
    $sessionMax = max(1, max($report['sessionBreakdown']));
    $avatarUrl = $user->profileImageUrl();
    $appHost = request()->getSchemeAndHttpHost();
    if (str_starts_with($avatarUrl, 'http') && ! str_starts_with($avatarUrl, $appHost)) {
        $defaultReportAvatar = \App\Models\Avatar::defaultImagePath();
        $avatarUrl = str_starts_with($defaultReportAvatar, 'avatars/')
            ? asset('storage/'.$defaultReportAvatar)
            : asset($defaultReportAvatar);
    }
    $logoPath = $settings->report_logo_path ? asset('storage/'.$settings->report_logo_path) : asset($isLight ? 'images/brand/vizutrade-logo-dark.png' : 'images/brand/vizutrade-logo-light.png');
    $panel = $isLight ? 'bg-white/80 text-slate-950 ring-blue-100/80' : 'bg-white/12 text-white ring-white/15';
    $softPanel = $isLight ? 'bg-blue-50/85 text-slate-950 ring-blue-100' : 'bg-slate-950/28 text-white ring-white/10';
    $label = $isLight ? 'text-blue-700' : 'text-blue-100';
@endphp

<div
    id="share-report-card"
    class="relative h-full w-full overflow-hidden rounded-[34px] p-[3.8%] shadow-2xl {{ $isLight ? 'bg-blue-50 text-slate-950' : 'bg-slate-950 text-white' }}"
    style="--brand: {{ $brandColor }};"
>
    <div class="absolute inset-0 {{ $isLight ? 'bg-[radial-gradient(circle_at_top_left,rgba(37,99,235,.22),transparent_34%),linear-gradient(135deg,#eff6ff,#ffffff_42%,#dbeafe)]' : 'bg-[radial-gradient(circle_at_top_left,rgba(147,197,253,.32),transparent_34%),linear-gradient(135deg,#1d4ed8,#2563eb_38%,#020617)]' }}"></div>
    <div class="absolute -right-[12%] -top-[10%] h-[35%] w-[35%] rounded-full {{ $isLight ? 'bg-blue-200/60' : 'bg-cyan-300/20' }} blur-2xl"></div>
    <div class="absolute -bottom-[14%] -left-[12%] h-[38%] w-[38%] rounded-full {{ $isLight ? 'bg-cyan-200/60' : 'bg-blue-300/20' }} blur-2xl"></div>

    <div class="relative flex h-full flex-col rounded-[28px] border {{ $isLight ? 'border-blue-100/80 bg-white/50' : 'border-white/16 bg-white/8' }} p-[4%] shadow-2xl backdrop-blur-md">
        <header class="flex items-start justify-between gap-3">
            <div class="flex items-center gap-3">
                <div class="flex {{ $isFacebook ? 'h-10 w-32' : 'h-11 w-36' }} items-center justify-center rounded-2xl {{ $isLight ? 'bg-white/90 ring-blue-100' : 'bg-white/15 ring-white/20' }} px-3 ring-1">
                    <img src="{{ $logoPath }}" alt="ViZuTrade" class="max-h-8 max-w-full object-contain">
                </div>
                @unless($isFacebook || $isSquare)
                    <div>
                        <p class="text-[10px] font-black uppercase tracking-[0.26em] {{ $label }}">Your Trading Mirror</p>
                        <p class="mt-1 text-xs font-bold {{ $isLight ? 'text-slate-500' : 'text-white/75' }}">Trade. Journal. Improve.</p>
                    </div>
                @endunless
            </div>
            <div class="rounded-2xl {{ $isLight ? 'bg-blue-600 text-white' : 'bg-white text-slate-950' }} px-3 py-2 text-right shadow-lg">
                <p class="text-[9px] font-black uppercase tracking-wide {{ $isLight ? 'text-blue-100' : 'text-blue-700' }}">{{ $report['typeLabel'] }}</p>
                <p class="text-[11px] font-black">{{ $report['dateRange'] }}</p>
            </div>
        </header>

        @if($isFacebook)
            <section class="mt-4 grid flex-1 grid-cols-[1fr_1.2fr_1fr] gap-3">
                @include('reports.share.template-parts.profile')
                @include('reports.share.template-parts.charts')
                @include('reports.share.template-parts.insights')
            </section>
        @elseif($isSquare)
            <section class="mt-2 flex items-center justify-between gap-3">
                <div class="flex min-w-0 items-center gap-3">
                    <img src="{{ $avatarUrl }}" alt="{{ $user->name }}" class="h-12 w-12 rounded-2xl object-cover ring-4 {{ $isLight ? 'ring-blue-100' : 'ring-white/20' }}">
                    <div class="min-w-0">
                        <p class="text-[10px] font-black uppercase {{ $label }}">Trader</p>
                        <h1 class="text-lg font-black leading-tight">{{ $user->name }}</h1>
                    </div>
                </div>
                <div class="rounded-2xl {{ $isLight ? 'bg-blue-600 text-white' : 'bg-white text-slate-950' }} px-3 py-1.5 text-right">
                    <p class="text-[9px] font-black uppercase opacity-80">Discipline Score</p>
                    <p class="text-2xl font-black">{{ $report['discipline']['score'] }}%</p>
                </div>
            </section>

            <section class="mt-2 grid grid-cols-4 gap-2">
                @foreach ([['Trades', $report['totalTrades']], ['Wins', $report['wins']], ['Losses', $report['losses']], ['BE', $report['breakeven']]] as [$metricLabel, $metricValue])
                    <div class="rounded-2xl p-2 ring-1 {{ $panel }}">
                        <p class="text-[8px] font-black uppercase tracking-wide {{ $label }}">{{ $metricLabel }}</p>
                        <p class="text-xl font-black">{{ $metricValue }}</p>
                    </div>
                @endforeach
            </section>

            <section class="mt-2 grid grid-cols-3 gap-2">
                <div class="rounded-2xl p-3 ring-1 {{ $panel }}">
                    <p class="text-[9px] font-black uppercase {{ $label }}">Win/Loss</p>
                    <div class="mt-2 flex items-center gap-2">
                        <svg viewBox="0 0 120 120" class="h-14 w-14 shrink-0" aria-label="Win loss donut chart">
                            <circle cx="60" cy="60" r="42" fill="none" stroke="#94a3b8" stroke-width="18" pathLength="100" opacity="0.9" />
                            <circle cx="60" cy="60" r="42" fill="none" stroke="#ef4444" stroke-width="18" pathLength="100" stroke-dasharray="{{ $lossPercent }} {{ 100 - $lossPercent }}" stroke-dashoffset="-{{ $winPercent }}" stroke-linecap="round" transform="rotate(-90 60 60)" />
                            <circle cx="60" cy="60" r="42" fill="none" stroke="#22c55e" stroke-width="18" pathLength="100" stroke-dasharray="{{ $winPercent }} {{ 100 - $winPercent }}" stroke-linecap="round" transform="rotate(-90 60 60)" />
                            <circle cx="60" cy="60" r="28" fill="{{ $isLight ? '#ffffff' : '#020617' }}" />
                            <text x="60" y="64" text-anchor="middle" font-size="18" font-weight="900" fill="{{ $isLight ? '#0f172a' : '#ffffff' }}">{{ $report['winRate'] }}%</text>
                        </svg>
                    </div>
                </div>
                <div class="rounded-2xl p-3 ring-1 {{ $panel }}">
                    <p class="text-[9px] font-black uppercase {{ $label }}">Equity Curve</p>
                    <svg viewBox="0 0 100 82" class="mt-1 h-14 w-full overflow-visible">
                        <polyline points="{{ $equityPoints }}" fill="none" stroke="{{ $isLight ? $brandColor : '#ffffff' }}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                        <line x1="0" y1="76" x2="100" y2="76" stroke="{{ $isLight ? 'rgba(37,99,235,.22)' : 'rgba(255,255,255,.25)' }}" stroke-width="2" />
                    </svg>
                </div>
                <div class="rounded-2xl p-3 ring-1 {{ $panel }}">
                    <p class="text-[9px] font-black uppercase {{ $label }}">Profit/Loss</p>
                    @if ($showProfit)
                        <p class="mt-2 text-lg font-black {{ $report['totalProfitLoss'] >= 0 ? ($isLight ? 'text-blue-700' : 'text-blue-100') : 'text-red-400' }}">{{ $report['totalProfitLoss'] >= 0 ? '+' : '' }}{{ number_format($report['totalProfitLoss'], 2) }}</p>
                    @else
                        <p class="mt-2 text-lg font-black {{ $isLight ? 'text-slate-500' : 'text-white/70' }}">Hidden</p>
                    @endif
                </div>
            </section>

            <section class="mt-2 grid grid-cols-4 gap-2">
                @foreach ([
                    ['Best Pair', $report['bestPair']],
                    ['Best Session', $report['bestSession']],
                    ['Top Mistake', $report['topMistake']],
                    ['Badge', $settings->show_badges ? $report['badgeEarned'] : 'Hidden'],
                ] as [$insightLabel, $insightValue])
                    <div class="rounded-2xl p-2 ring-1 {{ $softPanel }}">
                        <p class="text-[8px] font-black uppercase tracking-wide {{ $label }}">{{ $insightLabel }}</p>
                        <p class="mt-1 text-[10px] font-black leading-tight">{{ $insightValue }}</p>
                    </div>
                @endforeach
            </section>
        @else
            <section class="mt-[4%] grid items-center gap-3 {{ $isStory ? 'grid-cols-[1fr_auto]' : 'grid-cols-[1fr_auto]' }}">
                <div class="flex items-center gap-3">
                    <img src="{{ $avatarUrl }}" alt="{{ $user->name }}" class="h-14 w-14 rounded-2xl object-cover ring-4 {{ $isLight ? 'ring-blue-100' : 'ring-white/20' }}">
                    <div class="min-w-0">
                        <p class="text-xs font-black uppercase {{ $label }}">Trader</p>
                        <h1 class="{{ $isStory ? 'text-3xl' : 'text-2xl' }} font-black leading-tight">{{ $user->name }}</h1>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-xs font-black uppercase {{ $label }}">Discipline Score</p>
                    <p class="{{ $isStory ? 'text-5xl' : 'text-4xl' }} font-black">{{ $report['discipline']['score'] }}%</p>
                </div>
            </section>

            <section class="mt-[4%] grid gap-2 {{ $isStory ? 'grid-cols-2' : 'grid-cols-4' }}">
                @foreach ([['Trades', $report['totalTrades']], ['Wins', $report['wins']], ['Losses', $report['losses']], ['BE', $report['breakeven']]] as [$metricLabel, $metricValue])
                    <div class="rounded-2xl p-3 ring-1 {{ $panel }}">
                        <p class="text-[10px] font-black uppercase tracking-wide {{ $label }}">{{ $metricLabel }}</p>
                        <p class="{{ $isStory ? 'text-3xl' : 'text-2xl' }} font-black">{{ $metricValue }}</p>
                    </div>
                @endforeach
            </section>

            <section class="mt-[4%] grid gap-2 {{ $isStory ? 'grid-cols-2' : 'grid-cols-3' }}">
                @include('reports.share.template-parts.charts')
            </section>

            <section class="mt-[4%] grid gap-2 {{ $isStory ? 'grid-cols-2' : 'grid-cols-4' }}">
                @include('reports.share.template-parts.insights')
            </section>
        @endif

        <footer class="mt-auto {{ $isSquare ? 'pt-1' : 'pt-3' }}">
            @if ($settings->show_motivational_line)
                <p class="text-center {{ $isSquare ? 'text-[10px]' : ($isFacebook ? 'text-xs' : 'text-sm') }} font-bold {{ $isLight ? 'text-slate-600' : 'text-blue-50' }}">{{ $settings->motivational_line }}</p>
            @endif
            <p class="mt-1 text-center text-[10px] font-black uppercase tracking-[0.22em] {{ $isLight ? 'text-blue-700' : 'text-white/70' }}">{{ $settings->watermark }}</p>
        </footer>
    </div>
</div>