@php
    $series = [
        'sales' => ['label' => __('Sales'), 'color' => '#6366f1'],
        'purchases' => ['label' => __('Purchases'), 'color' => '#06b6d4'],
        'expenses' => ['label' => __('Paid Expenses'), 'color' => '#f59e0b'],
    ];
    $chartMax = max(1, collect($monthChartDays)->flatMap(fn ($day) => [$day['sales'], $day['purchases'], $day['expenses']])->max());
    $chartMax = ceil($chartMax / 4) * 4;
    $dayCount = count($monthChartDays);
    $hasActivity = collect($monthChartDays)->contains(fn ($day) => $day['sales'] != 0 || $day['purchases'] != 0 || $day['expenses'] != 0);
    $chartX = fn ($index) => $dayCount === 1 ? 410 : 65 + ($index / ($dayCount - 1)) * 690;
    $chartY = fn ($value) => 245 - ($value / $chartMax) * 210;
    $compactAmount = fn ($value) => $value >= 1000000 ? round($value / 1000000, 1) . 'M' : ($value >= 1000 ? round($value / 1000, 1) . 'k' : number_format($value, 0));
@endphp

<section class="dashboard-card month-chart-card"
    x-data="{ days: @js($monthChartDays), selected: {{ $dayCount - 1 }}, visible: { sales: true, purchases: true, expenses: true }, money(value) { return 'Rs. ' + Number(value).toLocaleString('en-PK', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } }">
    <div class="dashboard-card__body">
        <div class="month-chart-header">
            <div>
                <h3 class="widget-title mb-1">{{ __('Monthly Business Overview') }}</h3>
                <p class="widget-subtitle mb-0">{{ __('Daily sales, purchases and paid expenses') }}</p>
            </div>
            <span class="month-chart-badge"><i class="fa-regular fa-calendar me-1"></i> {{ $monthChartLabel }}</span>
        </div>

        <div class="month-chart-legend" aria-label="{{ __('Chart series') }}">
            @foreach($series as $key => $config)
                <button type="button" @click="visible.{{ $key }} = !visible.{{ $key }}" :aria-pressed="visible.{{ $key }}.toString()" aria-pressed="true">
                    <span class="month-chart-dot" style="background: {{ $config['color'] }}"></span>{{ $config['label'] }}
                </button>
            @endforeach
        </div>

        <svg class="month-chart-svg" viewBox="0 0 780 285" role="group" aria-labelledby="month-chart-title month-chart-description">
            <title id="month-chart-title">{{ __('Current month business activity') }}</title>
            <desc id="month-chart-description">{{ __('Amounts in rupees, from the start of this month through today. Focus or hover over a day to see exact amounts. Use the legend to toggle series.') }}</desc>
            <defs>
                <linearGradient id="month-sales-gradient" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="#6366f1" stop-opacity="0.22" />
                    <stop offset="100%" stop-color="#6366f1" stop-opacity="0.01" />
                </linearGradient>
            </defs>
            @for($tick = 0; $tick <= 4; $tick++)
                @php($y = 245 - $tick * 52.5)
                <line x1="65" y1="{{ $y }}" x2="755" y2="{{ $y }}" stroke="#e2e8f0" stroke-dasharray="4 5" />
                <text x="55" y="{{ $y + 4 }}" text-anchor="end">{{ $compactAmount($chartMax * $tick / 4) }}</text>
            @endfor
            <text x="65" y="17">{{ __('Rs.') }}</text>
            @foreach($series as $key => $config)
                @php($points = collect($monthChartDays)->map(fn ($day, $index) => $chartX($index) . ',' . $chartY($day[$key]))->implode(' '))
                <g x-show="visible.{{ $key }}">
                    @if($key === 'sales' && $dayCount > 1)
                        <polygon points="65,245 {{ $points }} 755,245" fill="url(#month-sales-gradient)" />
                    @endif
                    <polyline points="{{ $points }}" fill="none" stroke="{{ $config['color'] }}" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" />
                    @foreach($monthChartDays as $index => $day)
                        <circle cx="{{ $chartX($index) }}" cy="{{ $chartY($day[$key]) }}" r="3.5" fill="{{ $config['color'] }}" stroke="#fff" stroke-width="1.5" />
                    @endforeach
                </g>
            @endforeach
            @foreach($monthChartDays as $index => $day)
                @if($index === 0 || $index === $dayCount - 1 || ($index % max(1, (int) ceil($dayCount / 7)) === 0 && $index < $dayCount - 2))
                    <text x="{{ $chartX($index) }}" y="270" text-anchor="middle">{{ $day['label'] }}</text>
                @endif
                <rect class="month-chart-hit" x="{{ max(65, $chartX($index) - 345 / max(1, $dayCount - 1)) }}" y="30"
                    width="{{ $dayCount === 1 ? 690 : ($index === 0 || $index === $dayCount - 1 ? 345 : 690) / ($dayCount - 1) }}" height="220" fill="transparent"
                    tabindex="0" @mouseenter="selected = {{ $index }}" @focus="selected = {{ $index }}" @click="selected = {{ $index }}"
                    aria-label="{{ $day['label'] }}: {{ __('Sales') }} Rs. {{ number_format($day['sales'], 2) }}, {{ __('Purchases') }} Rs. {{ number_format($day['purchases'], 2) }}, {{ __('Paid Expenses') }} Rs. {{ number_format($day['expenses'], 2) }}">
                    <title>{{ $day['label'] }} — {{ __('Sales') }}: Rs. {{ number_format($day['sales'], 2) }} | {{ __('Purchases') }}: Rs. {{ number_format($day['purchases'], 2) }} | {{ __('Paid Expenses') }}: Rs. {{ number_format($day['expenses'], 2) }}</title>
                </rect>
            @endforeach
        </svg>

        @if(! $hasActivity)
            <p class="text-muted small text-center mb-0">{{ __('No activity recorded this month yet.') }}</p>
        @endif
        <div class="month-chart-detail" aria-live="polite">
            <span x-text="days[selected].label">{{ $monthChartDays[$dayCount - 1]['label'] }}</span>
            @foreach($series as $key => $config)
                <span style="color: {{ $config['color'] }}">{{ $config['label'] }}: <span class="eng-num" x-text="money(days[selected].{{ $key }})">Rs. {{ number_format($monthChartDays[$dayCount - 1][$key], 2) }}</span></span>
            @endforeach
        </div>
        <p class="text-muted small mt-2 mb-0">{{ __('Month to date') }} · {{ $periodLabel }}</p>
    </div>
</section>