{{--
  <x-deluxe-heatmap :rows="$zones" :cols="$subs" :grid="$grid" :row-formatter="fn(...)" :col-formatter="fn(...)"
                    filter-route="closer.missiles.index" row-param="zone" col-param="sub_product"
                    title="Heatmap zona × sub-producto" />

  Props:
    - rows:        array — values del eje vertical (ej. zonas)
    - cols:        array — values del eje horizontal (ej. sub-productos)
    - grid:        array<string, array<string, int>> — counts grid[$row][$col] = $count
    - title:       ?string — título del card
    - icon:        string — icono del título
    - row-label:   string — label para columna izquierda ej. "Zona ↓ / Sub →"
    - row-prefix:  string — prefijo decorativo (ej. "📍 ")
    - col-strip-prefix: ?string — prefijo a quitar de los col labels (ej. "shops_")
    - filter-route: ?string — route name para hacer celdas clickeables
    - row-param:   string — query param para el filtro de row (ej. "zone")
    - col-param:   string — query param para el filtro de col (ej. "sub_product")
    - hint:        ?string — texto helper sobre interactividad
    - empty-text:  string — texto cuando rows/cols están vacíos

  Pattern: command.blade.php líneas 259-309 (escala 0 / 1-7 / 8-14 / 15+ con opacidad dinámica)
--}}
@props([
    'rows' => [],
    'cols' => [],
    'grid' => [],
    'title' => 'Heatmap',
    'icon' => 'bi-grid-3x3-gap-fill',
    'rowLabel' => '↓ / →',
    'rowPrefix' => '📍 ',
    'colStripPrefix' => null,
    'filterRoute' => null,
    'rowParam' => 'row',
    'colParam' => 'col',
    'hint' => 'Click en cualquier celda para filtrar',
    'emptyText' => 'Sin datos para visualizar',
])

@if(empty($rows) || empty($cols))
    {{-- silent skip si no hay datos suficientes --}}
@else
<div class="card border-0 shadow-sm" style="border-radius: 14px;">
    @if($title)
        <div class="card-header border-0 pt-5 pb-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
            <h3 class="card-title fw-bolder fs-3 m-0">
                <i class="{{ str_starts_with($icon, 'bi-') ? 'bi' : 'fa-solid' }} {{ $icon }} text-info me-2"></i>{{ $title }}
            </h3>
            @if($hint)
                <div class="text-gray-600 fs-8">{{ $hint }}</div>
            @endif
        </div>
    @endif
    <div class="card-body pt-2 table-responsive">
        <table class="table table-bordered table-sm align-middle text-center mb-0">
            <thead>
                <tr class="bg-light">
                    <th class="text-start" style="min-width: 110px;">{{ $rowLabel }}</th>
                    @foreach($cols as $c)
                        @php
                            $label = $c;
                            if ($colStripPrefix && str_starts_with($label, $colStripPrefix)) {
                                $label = substr($label, strlen($colStripPrefix));
                            }
                            $label = ucwords(str_replace(['_', '-'], ' ', $label));
                        @endphp
                        <th class="fs-9 fw-bold text-uppercase" style="min-width: 90px;">{{ $label }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($rows as $r)
                    <tr>
                        <td class="text-start fw-bolder">{{ $rowPrefix }}{{ ucwords(str_replace(['_', '-'], ' ', $r)) }}</td>
                        @foreach($cols as $c)
                            @php
                                $count = $grid[$r][$c] ?? 0;
                                if ($count === 0) {
                                    $bg = '#f9fafb';
                                    $opacity = 1;
                                    $textColor = 'text-gray-400';
                                } else {
                                    $intensity = $count >= 15 ? 'success' : ($count >= 8 ? 'warning' : 'info');
                                    $bg = "var(--bs-{$intensity})";
                                    $opacity = min(1, 0.2 + ($count / 30));
                                    $textColor = $count >= 8 ? 'text-white' : 'text-dark';
                                }
                                $cellUrl = ($count > 0 && $filterRoute)
                                    ? route($filterRoute, [$rowParam => $r, $colParam => $c])
                                    : null;
                            @endphp
                            <td style="background: {{ $bg }}; opacity: {{ $opacity }};">
                                @if($count > 0 && $cellUrl)
                                    <a href="{{ $cellUrl }}"
                                       class="d-block fw-bolder {{ $textColor }} text-decoration-none">
                                        {{ $count }}
                                    </a>
                                @elseif($count > 0)
                                    <span class="fw-bolder {{ $textColor }}">{{ $count }}</span>
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif