@props(['trend'])

@php
    use App\Reports\TrendChart;
    use App\Support\Money;
    $chart = new TrendChart($trend);
    $sizes = [[360, 44, 'sm:hidden'], [640, 64, 'hidden sm:block']];
    $tips = collect($chart->months)->map(fn ($m) => [
        'title' => $m['title'],
        'income' => Money::format($m['income']),
        'expenses' => Money::format($m['expenses']),
        'profit' => Money::format($m['profit']),
    ])->all();
@endphp

{{-- Net income vs expenses by month. Colors validated: #2a78d6 / #eb6834 on white (dataviz validator, all checks pass). --}}
<figure {{ $attributes->class('card p-4') }}
        x-data="{ tip: null, x: 0, tips: @js($tips), show(i, x) { this.tip = this.tips[i]; this.x = x } }">
    <figcaption class="flex flex-wrap items-center justify-between gap-2">
        <span class="text-sm font-semibold">Last {{ count($chart->months) }} months</span>
        <span class="flex gap-4 text-xs text-stone-600">
            <span class="flex items-center gap-1.5"><span class="size-2.5 rounded-sm bg-[#2a78d6]"></span>Net income</span>
            <span class="flex items-center gap-1.5"><span class="size-2.5 rounded-sm bg-[#eb6834]"></span>Expenses</span>
        </span>
    </figcaption>

    @if (! $chart->hasData())
        <p class="py-10 text-center text-sm text-stone-500">No income or expenses in these months yet.</p>
    @else
        @foreach ($sizes as [$width, $padLeft, $visibility])
        @php($chart = new TrendChart($trend, $width, $padLeft))
        <div class="relative mt-3 {{ $visibility }}">
            <svg viewBox="0 0 {{ $chart->width }} {{ TrendChart::HEIGHT }}" class="h-auto w-full" role="img"
                 aria-label="Net income and expenses for the last {{ count($chart->months) }} months. The same figures are in the table below.">
                @foreach ($chart->ticks as $tick)
                    <line x1="{{ $chart->padLeft }}" x2="{{ $chart->width - TrendChart::PAD_RIGHT }}" y1="{{ $chart->y($tick) }}" y2="{{ $chart->y($tick) }}"
                          stroke="{{ $tick === 0 ? '#c3c2b7' : '#e1e0d9' }}" stroke-width="1" shape-rendering="crispEdges" />
                    <text x="{{ $chart->padLeft - 8 }}" y="{{ $chart->y($tick) }}" dy="0.32em" text-anchor="end" font-size="11" fill="#898781" style="font-variant-numeric: tabular-nums">{{ $chart->tickLabel($tick) }}</text>
                @endforeach

                @foreach ($chart->months as $i => $month)
                    <path d="{{ $chart->barPath($chart->barX($i, 0), $month['income']) }}" fill="#2a78d6" />
                    <path d="{{ $chart->barPath($chart->barX($i, 1), $month['expenses']) }}" fill="#eb6834" />
                    <text x="{{ $chart->bandX($i) + $chart->band() / 2 }}" y="{{ TrendChart::HEIGHT - 8 }}" text-anchor="middle" font-size="11" fill="#898781">{{ $month['label'] }}</text>

                    {{-- The whole month band is the hover and focus target, bigger than the bars. --}}
                    <rect x="{{ $chart->bandX($i) }}" y="0" width="{{ $chart->band() }}" height="{{ TrendChart::HEIGHT - TrendChart::PAD_BOTTOM }}"
                          fill="transparent" tabindex="0" class="cursor-default outline-none focus:fill-stone-900/5 hover:fill-stone-900/5"
                          aria-label="{{ $month['title'] }}: net income {{ Money::format($month['income']) }}, expenses {{ Money::format($month['expenses']) }}"
                          x-on:mouseenter="show({{ $i }}, {{ ($chart->bandX($i) + $chart->band() / 2) / $chart->width * 100 }})"
                          x-on:focus="show({{ $i }}, {{ ($chart->bandX($i) + $chart->band() / 2) / $chart->width * 100 }})"
                          x-on:click="show({{ $i }}, {{ ($chart->bandX($i) + $chart->band() / 2) / $chart->width * 100 }})"
                          x-on:mouseleave="tip = null" x-on:blur="tip = null" />
                @endforeach
            </svg>

            <div x-show="tip" x-cloak x-transition.opacity.duration.100ms
                 class="pointer-events-none absolute top-0 z-10 w-52 -translate-x-1/2 whitespace-nowrap rounded-lg border border-stone-200 bg-white p-2.5 text-xs shadow-md"
                 :style="`left: clamp(6.5rem, ${x}%, calc(100% - 6.5rem))`">
                <div class="mb-1 font-medium text-stone-600" x-text="tip?.title"></div>
                <div class="flex items-center gap-2"><span class="h-0.5 w-3 rounded bg-[#2a78d6]"></span><span class="font-semibold text-stone-900" x-text="tip?.income"></span><span class="text-stone-500">income</span></div>
                <div class="flex items-center gap-2"><span class="h-0.5 w-3 rounded bg-[#eb6834]"></span><span class="font-semibold text-stone-900" x-text="tip?.expenses"></span><span class="text-stone-500">expenses</span></div>
                <div class="mt-1 border-t border-stone-100 pt-1 text-stone-600">Profit <span class="font-semibold text-stone-900" x-text="tip?.profit"></span></div>
            </div>
        </div>
        @endforeach
    @endif

    <details class="mt-3 text-sm">
        <summary class="cursor-pointer text-xs font-medium text-teal-800">Show as table</summary>
        <table class="mt-2 w-full text-right text-xs" style="font-variant-numeric: tabular-nums">
            <thead class="text-stone-500">
                <tr><th class="py-1 text-left font-medium">Month</th><th class="font-medium">Net income</th><th class="font-medium">Expenses</th><th class="font-medium">Profit</th></tr>
            </thead>
            <tbody class="divide-y divide-stone-100">
                @foreach ($chart->months as $month)
                    <tr>
                        <td class="py-1 text-left">{{ $month['title'] }}</td>
                        <td>{{ Money::format($month['income']) }}</td>
                        <td>{{ Money::format($month['expenses']) }}</td>
                        <td @class(['text-red-700' => $month['profit'] < 0])>{{ Money::format($month['profit']) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </details>
</figure>