<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Shareable Report</p>
                <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">Weekly Trade Report</h2>
            </div>
            <form method="GET" action="{{ route('reports.weekly') }}" class="flex items-center gap-2">
                @if ($settings->allow_profit_display)
                    <label class="text-sm font-semibold text-slate-600 dark:text-slate-300"><input type="checkbox" name="show_profit" value="1" @checked($showProfit) class="rounded border-gray-300 text-blue-600"> Show profit</label>
                @endif
                <button class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-bold text-blue-700 dark:border-blue-900 dark:text-blue-300">Update</button>
            </form>
        </div>
    </x-slot>

    <div class="grid gap-6 xl:grid-cols-[1fr_360px]">
        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <div id="share-card" class="mx-auto aspect-[4/5] max-w-md rounded-[28px] bg-gradient-to-br from-blue-700 via-blue-600 to-cyan-500 p-6 text-white shadow-2xl">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs font-black uppercase tracking-[0.24em] text-blue-100">ViZuTrade</p>
                        <h3 class="mt-2 text-2xl font-black">{{ $settings->branding_text }}</h3>
                    </div>
                    <div class="rounded-full bg-white/15 px-3 py-1 text-xs font-bold">{{ $weekRange }}</div>
                </div>
                <div class="mt-8 rounded-2xl bg-white/15 p-5 backdrop-blur">
                    <p class="text-sm text-blue-100">Trader</p>
                    <p class="text-2xl font-black">{{ $user->name }}</p>
                    <div class="mt-6 grid grid-cols-2 gap-3">
                        <div><p class="text-xs text-blue-100">Trades</p><p class="text-2xl font-black">{{ $totalTrades }}</p></div>
                        <div><p class="text-xs text-blue-100">Win Rate</p><p class="text-2xl font-black">{{ $winRate }}%</p></div>
                        <div><p class="text-xs text-blue-100">Wins</p><p class="text-2xl font-black">{{ $wins }}</p></div>
                        <div><p class="text-xs text-blue-100">Losses</p><p class="text-2xl font-black">{{ $losses }}</p></div>
                    </div>
                    <div class="mt-6 rounded-2xl bg-white p-4 text-slate-950">
                        <p class="text-xs font-bold uppercase tracking-wide text-blue-700">Discipline Score</p>
                        <p class="mt-1 text-4xl font-black">{{ $discipline['score'] }}%</p>
                        @if ($showProfit)
                            <p class="mt-2 text-sm font-bold {{ $totalProfitLoss >= 0 ? 'text-blue-700' : 'text-red-600' }}">P/L: {{ $totalProfitLoss >= 0 ? '+' : '' }}{{ number_format($totalProfitLoss, 2) }}</p>
                        @else
                            <p class="mt-2 text-sm font-bold text-slate-500">Profit hidden by trader</p>
                        @endif
                    </div>
                </div>
                <p class="mt-6 text-center text-sm font-bold text-blue-50">{{ $settings->watermark }}</p>
            </div>
        </section>

        <aside class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <h3 class="text-lg font-bold text-slate-950 dark:text-white">Export/share image</h3>
            <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">The preview avoids sensitive data unless you choose to show profit. Click the button to generate a PNG from this card in your browser.</p>
            <button id="generate-share-image" class="mt-5 w-full rounded-lg bg-blue-600 px-4 py-3 text-sm font-black text-white hover:bg-blue-700">Generate Share Image</button>
            <canvas id="share-canvas" class="mt-5 hidden w-full rounded-lg border border-blue-100 dark:border-blue-900"></canvas>
        </aside>
    </div>

    <script>
        const shareReport = {
            brandingText: @js($settings->branding_text),
            watermark: @js($settings->watermark),
            trader: @js($user->name),
            week: @js($weekRange),
            totalTrades: @js($totalTrades),
            wins: @js($wins),
            losses: @js($losses),
            winRate: @js($winRate),
            disciplineScore: @js($discipline['score']),
        };

        document.getElementById('generate-share-image')?.addEventListener('click', () => {
            const card = document.getElementById('share-card');
            const canvas = document.getElementById('share-canvas');
            const scale = 2;
            const rect = card.getBoundingClientRect();
            canvas.width = rect.width * scale;
            canvas.height = rect.height * scale;
            canvas.classList.remove('hidden');

            const ctx = canvas.getContext('2d');
            ctx.scale(scale, scale);
            ctx.fillStyle = '#2563eb';
            ctx.fillRect(0, 0, rect.width, rect.height);
            ctx.fillStyle = '#ffffff';
            ctx.font = '700 28px sans-serif';
            ctx.fillText(shareReport.brandingText, 28, 58);
            ctx.font = '600 18px sans-serif';
            ctx.fillText(`Trader: ${shareReport.trader}`, 28, 100);
            ctx.fillText(`Week: ${shareReport.week}`, 28, 132);
            ctx.fillText(`Trades: ${shareReport.totalTrades} | Wins: ${shareReport.wins} | Losses: ${shareReport.losses}`, 28, 176);
            ctx.fillText(`Win Rate: ${shareReport.winRate}%`, 28, 208);
            ctx.fillText(`Discipline Score: ${shareReport.disciplineScore}%`, 28, 240);
            ctx.font = '700 20px sans-serif';
            ctx.fillText(shareReport.watermark, 28, rect.height - 38);

            const link = document.createElement('a');
            link.download = 'vizutrade-weekly-report.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        });
    </script>
</x-app-layout>
