{{--
    Matriz Industria × Demo
    Filas = industrias, Columnas = demos.
    Celda: nº de cores + nº de variantes shop + indicador de misiles.
--}}
@push('styles')
<style>
    .matrix-table { border-collapse: separate; border-spacing: 0; font-size: 12px; }
    .matrix-table th, .matrix-table td { padding: 6px 8px; border: 1px solid #e5e7eb; vertical-align: middle; }
    .matrix-table th.row-header { text-align: left; background: #f9fafb; font-weight: 600; white-space: nowrap; position: sticky; left: 0; z-index: 2; }
    .matrix-table thead th { background: #f3f4f6; font-weight: 700; font-size: 11px; text-align: center; white-space: nowrap; position: sticky; top: 0; z-index: 3; }
    .matrix-table thead th.corner { z-index: 4; left: 0; }
    .matrix-cell { text-align: center; min-width: 110px; }
    .matrix-cell.empty { background: #fafafa; color: #d1d5db; }
    .matrix-cell.filled { cursor: pointer; transition: background 100ms; }
    .matrix-cell.filled:hover { background: #eff6ff; }
    .matrix-cell-cores { font-weight: 700; font-size: 14px; line-height: 1; }
    .matrix-cell-variants { font-size: 10px; color: #6b7280; margin-top: 2px; }
    .matrix-cell-missiles { display: inline-block; background: #fef3c7; color: #92400e; border-radius: 8px; padding: 0 4px; font-size: 9px; font-weight: 700; margin-left: 3px; }
    .matrix-total { background: #1f2937; color: #fff; font-weight: 700; text-align: center; }
    .matrix-heatmap-0 { background: #fafafa; }
    .matrix-heatmap-1 { background: #e0f2fe; }
    .matrix-heatmap-2 { background: #bae6fd; }
    .matrix-heatmap-3 { background: #7dd3fc; color: #075985; }
    .matrix-heatmap-4 { background: #38bdf8; color: #fff; }
    .matrix-legend { font-size: 11px; color: #6b7280; margin-bottom: 10px; }
    .matrix-legend .chip { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin: 0 4px 2px 8px; border: 1px solid #d1d5db; }
</style>
@endpush

@php
    // helper para escala heatmap
    $heatLevel = function($variants) {
        if ($variants === 0) return 0;
        if ($variants <= 3) return 1;
        if ($variants <= 8) return 2;
        if ($variants <= 20) return 3;
        return 4;
    };
@endphp

<div class="matrix-legend">
    Densidad por celda (variantes shop empaquetadas):
    <span class="chip matrix-heatmap-0"></span> 0
    <span class="chip matrix-heatmap-1"></span> 1-3
    <span class="chip matrix-heatmap-2"></span> 4-8
    <span class="chip matrix-heatmap-3"></span> 9-20
    <span class="chip matrix-heatmap-4"></span> 20+
    · <strong>nº grande</strong> = cores · <em>nº chico</em> = variantes shop · <span class="matrix-cell-missiles">M</span> = misiles activos
</div>

<div class="table-responsive" style="max-height: 70vh;">
    <table class="matrix-table">
        <thead>
            <tr>
                <th class="corner row-header">Industria \ Demo</th>
                @foreach($matrix['demos'] as $demo)
                    <th>
                        <code>{{ $demo }}</code>
                        <div class="fw-normal fs-9 text-muted">
                            {{ $matrix['totals']['by_demo'][$demo]['cores'] ?? 0 }} cores ·
                            {{ $matrix['totals']['by_demo'][$demo]['variants'] ?? 0 }} variantes
                        </div>
                    </th>
                @endforeach
                <th class="matrix-total">Σ</th>
            </tr>
        </thead>
        <tbody>
            @foreach($matrix['industries'] as $industry)
                <tr>
                    <th class="row-header">
                        🏷 {{ $industry }}
                        <div class="fw-normal fs-9 text-muted">
                            {{ $matrix['totals']['by_industry'][$industry]['cores'] ?? 0 }} cores ·
                            {{ $matrix['totals']['by_industry'][$industry]['variants'] ?? 0 }} variantes
                        </div>
                    </th>
                    @foreach($matrix['demos'] as $demo)
                        @php
                            $cell = $matrix['cells'][$industry][$demo] ?? null;
                            $level = $heatLevel($cell['variants'] ?? 0);
                        @endphp
                        @if($cell && !empty($cell['cores']))
                            <td class="matrix-cell filled matrix-heatmap-{{ $level }}"
                                title="Cores: {{ implode(', ', $cell['cores']) }}">
                                <div class="matrix-cell-cores">{{ count($cell['cores']) }}</div>
                                <div class="matrix-cell-variants">
                                    {{ $cell['variants'] }}v
                                    @if($cell['missiles'] > 0)
                                        <span class="matrix-cell-missiles" title="Misiles activos">🎯{{ $cell['missiles'] }}</span>
                                    @endif
                                </div>
                                <div class="fs-9 mt-1">
                                    @foreach($cell['cores'] as $coreSlug)
                                        <a href="{{ route('reseller.factory.product.show', $coreSlug) }}" class="d-block text-truncate" style="max-width:100px" title="{{ $coreSlug }}">
                                            <code>{{ $coreSlug }}</code>
                                        </a>
                                    @endforeach
                                </div>
                            </td>
                        @else
                            <td class="matrix-cell empty">·</td>
                        @endif
                    @endforeach
                    <td class="matrix-total">
                        {{ $matrix['totals']['by_industry'][$industry]['variants'] ?? 0 }}
                    </td>
                </tr>
            @endforeach
            {{-- Fila de totales --}}
            <tr>
                <th class="matrix-total">Σ</th>
                @foreach($matrix['demos'] as $demo)
                    <td class="matrix-total">
                        {{ $matrix['totals']['by_demo'][$demo]['variants'] ?? 0 }}
                    </td>
                @endforeach
                <td class="matrix-total">—</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="mt-3 fs-8 text-muted">
    Click en un slug abre la <strong>ficha del producto</strong> con su salud + componentes + variantes hijas.
    Celdas vacías = gaps de cobertura: industrias × demos sin core empaquetado todavía.
</div>