{{--
    Vista FOCUS — los cores madre publicados en el mercado.

    Pivot: separa los 11 cores (base técnica) de los N sub-productos derivados.
    Cada core muestra:
      - Identidad (slug, price, industry, demo)
      - 6 ejes de madurez
      - Publishability (semáforo de aparición en bewpro.com)
      - Sub-productos: activos / listos / bloqueados / total
      - Lo que falta para estar 100% publicado (gaps explícitos)

    Filtros: industry, demo, maturity, has_subproducts.
--}}
@push('styles')
<style>
    .focus-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
    .focus-card.publish-success { border-left: 4px solid #198754; }
    .focus-card.publish-warning { border-left: 4px solid #ffc107; }
    .focus-card.publish-danger  { border-left: 4px solid #dc3545; }
    .focus-card.publish-secondary { border-left: 4px solid #6b7280; }
    .focus-bar { height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden; }
    .focus-bar > div { height: 100%; }
    .matrix-axes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
    .axis-card { background: #f8f9fa; border-radius: 6px; padding: 6px 8px; }
    .axis-card.deluxe { background: #d1fae5; }
    .axis-card.gap    { background: #fef2f2; }
    .axis-label { font-size: 9px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
    .axis-value { font-weight: 700; font-size: 14px; line-height: 1; margin-top: 2px; }
    .axis-bar { height: 3px; background: rgba(0,0,0,0.08); border-radius: 2px; margin-top: 4px; overflow: hidden; }
    .axis-bar > div { height: 100%; }
    .gaps-list { font-size: 11px; }
    .gaps-list .gap-item { display: inline-block; padding: 2px 8px; border-radius: 10px; margin: 2px 4px 2px 0; background: #fef2f2; color: #b91c1c; }
    .focus-meta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; color: #6b7280; margin-top: 6px; }
    .focus-stat { display: inline-flex; align-items: center; gap: 4px; }
    .badge-cert { font-size: 10px; padding: 3px 7px; border-radius: 10px; }
    .badge-cert.ok { background: #d1fae5; color: #065f46; }
    .badge-cert.no { background: #f3f4f6; color: #6b7280; }
    .subproducts-strip { display: flex; gap: 8px; margin-top: 10px; }
    .subproduct-tile { flex: 1; background: #f8f9fa; border-radius: 6px; padding: 8px 10px; text-align: center; font-size: 11px; }
    .subproduct-tile.has { font-weight: 700; }
    .subproduct-tile .num { font-size: 18px; font-weight: 800; line-height: 1; }
    .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
    .filter-chip { font-size: 11px; padding: 5px 10px; border-radius: 14px; background: #f3f4f6; color: #4b5563; text-decoration: none; }
    .filter-chip.active { background: #1f2937; color: #fff; }
    .filter-chip:hover { background: #e5e7eb; color: #111827; }
    .filter-chip.active:hover { background: #111827; color: #fff; }
    .filter-group-label { font-size: 11px; color: #6b7280; font-weight: 600; margin-right: 4px; }
</style>
@endpush

@php
    $f = $data['filters'] ?? [];
    $opts = $data['filter_opts'] ?? ['industries' => [], 'demos' => []];

    $filterUrl = function (array $patch) use ($f) {
        $params = array_merge($f, $patch, ['view' => 'focus']);
        $params = array_filter($params, fn($v) => $v !== null && $v !== '');
        return route('reseller.factory.index') . '?' . http_build_query($params);
    };
@endphp

{{-- ════════ ACCIONES DE HOY ════════ --}}
@if(!empty($today ?? []))
    <div class="card mb-3 border-warning" style="background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);">
        <div class="card-body py-3">
            <div class="d-flex align-items-center justify-content-between mb-2">
                <h5 class="fw-bold mb-0">
                    <i class="fas fa-bullseye text-warning me-1"></i>
                    Acciones de hoy
                </h5>
                <span class="fs-9 text-muted">priorizado automáticamente · top 4 palancas</span>
            </div>
            <div class="row g-2">
                @foreach($today as $a)
                    <div class="col-md-6 col-lg-3">
                        <a href="{{ $a['cta_url'] }}" class="text-decoration-none">
                            <div class="card border-0 h-100 shadow-sm" style="background: rgba(255,255,255,0.85);">
                                <div class="card-body p-3">
                                    <div class="d-flex align-items-start gap-2">
                                        <i class="fas {{ $a['icon'] }} text-{{ $a['tone'] }} fs-2 mt-1"></i>
                                        <div class="flex-grow-1">
                                            <div class="fs-2 fw-bold text-{{ $a['tone'] }}">{{ $a['count'] }}</div>
                                            <div class="fw-semibold fs-7 text-gray-900">{{ $a['title'] }}</div>
                                            <div class="fs-9 text-muted mt-1">{!! $a['desc'] !!}</div>
                                            <div class="badge bg-light text-gray-700 mt-2 fs-9">{{ $a['cta_label'] }} →</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endif

{{-- Top KPIs --}}
<div class="row g-3 mb-3">
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm"><div class="card-body p-3 text-center">
            <div class="fs-1 fw-bold text-primary">{{ $data['totals']['count'] }}</div>
            <div class="fs-7 text-muted">Cores madre publicados</div>
            <div class="fs-9 text-muted">{{ !empty($f) ? '(filtrado)' : 'is_active + stripe + slug=core_slug' }}</div>
        </div></div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm"><div class="card-body p-3 text-center">
            <div class="fs-1 fw-bold text-success">{{ $data['totals']['avg_health'] }}%</div>
            <div class="fs-7 text-muted">Health promedio</div>
        </div></div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm"><div class="card-body p-3 text-center">
            <div class="fs-1 fw-bold text-success">{{ $data['totals']['count_deluxe'] }}</div>
            <div class="fs-7 text-muted">Deluxe (100% técnico)</div>
        </div></div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm"><div class="card-body p-3 text-center">
            <div class="fs-1 fw-bold text-danger">{{ $data['totals']['count_critical'] }}</div>
            <div class="fs-7 text-muted">Críticos (bloqueantes)</div>
        </div></div>
    </div>
</div>

{{-- ════════ Filtros ════════ --}}
<div class="card mb-3">
    <div class="card-body py-2">
        <div class="filter-chips">
            <span class="filter-group-label">Maturity:</span>
            <a class="filter-chip {{ empty($f['maturity']) ? 'active' : '' }}" href="{{ $filterUrl(['maturity' => null]) }}">Todos</a>
            <a class="filter-chip {{ ($f['maturity'] ?? '') === 'deluxe' ? 'active' : '' }}" href="{{ $filterUrl(['maturity' => 'deluxe']) }}">✨ Deluxe (6/6 ejes)</a>
            <a class="filter-chip {{ ($f['maturity'] ?? '') === 'polish' ? 'active' : '' }}" href="{{ $filterUrl(['maturity' => 'polish']) }}">🟡 Polish (60-99%)</a>
            <a class="filter-chip {{ ($f['maturity'] ?? '') === 'critical' ? 'active' : '' }}" href="{{ $filterUrl(['maturity' => 'critical']) }}">🔴 Critical (&lt;60%)</a>
        </div>
        <div class="filter-chips mt-2">
            <span class="filter-group-label">Industria:</span>
            <a class="filter-chip {{ empty($f['industry']) ? 'active' : '' }}" href="{{ $filterUrl(['industry' => null]) }}">Todas</a>
            @foreach($opts['industries'] as $ind)
                <a class="filter-chip {{ ($f['industry'] ?? '') === $ind ? 'active' : '' }}" href="{{ $filterUrl(['industry' => $ind]) }}">🏷 {{ $ind }}</a>
            @endforeach
        </div>
        <div class="filter-chips mt-2">
            <span class="filter-group-label">Sub-productos:</span>
            <a class="filter-chip {{ empty($f['has_subproducts']) ? 'active' : '' }}" href="{{ $filterUrl(['has_subproducts' => null]) }}">Todos</a>
            <a class="filter-chip {{ ($f['has_subproducts'] ?? '') === '1' ? 'active' : '' }}" href="{{ $filterUrl(['has_subproducts' => '1']) }}">Con sub-productos</a>
            <a class="filter-chip {{ ($f['has_subproducts'] ?? '') === '0' ? 'active' : '' }}" href="{{ $filterUrl(['has_subproducts' => '0']) }}">Sin sub-productos</a>
        </div>
        @if(!empty($f))
            <div class="mt-2"><a href="{{ route('reseller.factory.index', ['view' => 'focus']) }}" class="fs-8 text-danger">✗ Limpiar filtros</a></div>
        @endif
    </div>
</div>

<div class="alert alert-info border-info py-2 mb-3 fs-8">
    <i class="fas fa-info-circle me-1"></i>
    <strong>Lectura:</strong> cada tarjeta = 1 <strong>core madre</strong> (la base técnica). Los <em>sub-productos</em> son variantes derivadas del mismo core, que se diferencian por copy + colores + a veces 1 módulo. La columna <em>Publishability</em> indica si está visible en bewpro.com (semáforo).
</div>

{{-- Listado de cores --}}
@foreach($data['items'] as $item)
    @php
        $pub = $item['publishability'];
        $cardClass = 'publish-' . $pub['tone'];
        $mat = $item['maturity'] ?? null;
    @endphp
    <div class="focus-card {{ $cardClass }}">
        {{-- Header del core --}}
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
            <div class="flex-grow-1" style="min-width: 240px;">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <h6 class="fw-bold mb-0">
                        <i class="fas fa-crown text-warning me-1" title="Core madre"></i>{{ $item['name'] }}
                    </h6>
                    <span class="badge bg-light text-gray-700 fs-9"><code>{{ $item['slug'] }}</code></span>
                    <span class="fs-7 fw-bold text-success">{{ $item['price_label'] }}</span>
                    <span class="badge bg-{{ $pub['tone'] }} text-white fs-9 ms-1">{{ $pub['label'] }}</span>
                </div>
                <div class="focus-meta-row">
                    @if($item['industry'])<span class="focus-stat">🏷 {{ $item['industry'] }}</span>@endif
                    @if($item['demo'])<span class="focus-stat">🎨 <code>{{ $item['demo'] }}</code></span>@endif
                    <span class="focus-stat">🌐 {{ $item['tenants_live'] }} tenants live</span>
                    <span class="focus-stat">🚀 {{ $item['stats']['total'] }} misiles · {{ $item['stats']['launched'] }} launched</span>
                    @if($item['cert_score'] !== null)
                        <span class="badge-cert {{ $item['cert_score'] === 100 ? 'ok' : 'no' }}">🛡 {{ $item['cert_score'] }}/100</span>
                    @endif
                </div>
            </div>

            <div class="text-end" style="min-width: 100px;">
                @if($mat)
                    <div class="fs-1 fw-bold text-primary">{{ $mat['overall'] }}%</div>
                    <div class="fs-9 text-muted">Maturity overall</div>
                @endif
            </div>
        </div>

        {{-- Sub-productos del core --}}
        <div class="subproducts-strip">
            <div class="subproduct-tile {{ $item['sub_products']['total'] > 0 ? 'has' : '' }}">
                <div class="text-muted fs-9">SUB-PRODUCTOS</div>
                <div class="num">{{ $item['sub_products']['total'] }}</div>
                <div class="text-muted fs-9">total derivados</div>
            </div>
            <div class="subproduct-tile {{ $item['sub_products']['active'] > 0 ? 'has' : '' }}" style="background: #d1fae5; color: #065f46;">
                <div class="fs-9">🟢 ACTIVOS</div>
                <div class="num">{{ $item['sub_products']['active'] }}</div>
                <div class="fs-9">en bewpro.com</div>
            </div>
            <div class="subproduct-tile {{ $item['sub_products']['ready'] > 0 ? 'has' : '' }}" style="background: #fef3c7; color: #92400e;">
                <div class="fs-9">🟡 LISTOS</div>
                <div class="num">{{ $item['sub_products']['ready'] }}</div>
                <div class="fs-9">tienen stripe, falta activar</div>
            </div>
            <div class="subproduct-tile {{ $item['sub_products']['blocked'] > 0 ? 'has' : '' }}" style="background: #fef2f2; color: #b91c1c;">
                <div class="fs-9">🔴 BLOQUEADOS</div>
                <div class="num">{{ $item['sub_products']['blocked'] }}</div>
                <div class="fs-9">falta stripe price</div>
            </div>
        </div>

        {{-- Maturity 6 ejes --}}
        @if($mat)
            <div class="matrix-axes">
                @foreach($mat['axes'] as $axis => $pct)
                    @php
                        $axisMeta = \App\Services\ProductHealthService::MATURITY_AXES[$axis] ?? null;
                        $axisLabel = $axisMeta['label'] ?? $axis;
                        $axisDesc  = $axisMeta['desc']  ?? '';
                        $klass = $pct >= 80 ? 'deluxe' : ($pct < 50 ? 'gap' : '');
                        $color = $pct >= 80 ? '#198754' : ($pct >= 50 ? '#ffc107' : '#dc3545');
                    @endphp
                    <div class="axis-card {{ $klass }}" title="{{ $axisDesc }}">
                        <div class="axis-label">{{ $axisLabel }}</div>
                        <div class="axis-value">{{ $pct }}%</div>
                        <div class="axis-bar"><div style="width:{{ $pct }}%; background:{{ $color }};"></div></div>
                    </div>
                @endforeach
            </div>
        @endif

        {{-- Lo que falta para llegar a "Publicado completo" en bewpro.com --}}
        @if(!empty($pub['gaps']))
            <div class="mt-3">
                <div class="fs-9 text-muted mb-1">
                    <i class="fas fa-circle-exclamation text-warning me-1"></i>
                    Para llegar a <strong>"Publicado completo"</strong> en bewpro.com falta:
                </div>
                <div class="gaps-list">
                    @foreach($pub['gaps'] as $g)
                        <span class="gap-item">{{ $g }}</span>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Acciones --}}
        <div class="d-flex flex-wrap gap-1 mt-3">
            <a href="{{ route('reseller.factory.product.show', $item['slug']) }}" class="btn btn-sm btn-primary">
                <i class="fas fa-eye me-1"></i>Ver ficha + anatomía
            </a>
            <a href="{{ route('reseller.factory.product.show', [$item['slug'], 'focus' => 'copy']) }}"
               class="btn btn-sm btn-info"
               title="Abrir editor de ficha comercial — headline, value props, CTAs, etc.">
                <i class="fas fa-file-signature me-1"></i>Editar Ficha
            </a>
            <a href="{{ route('reseller.factory.product.pdf', $item['slug']) }}" target="_blank"
               class="btn btn-sm btn-light-info" title="Descargar ficha comercial en PDF">
                <i class="fas fa-file-pdf me-1"></i>PDF
            </a>
            @if($item['sub_products']['ready'] > 0)
                <form method="POST" action="{{ route('reseller.factory.core.bulk-activate', $item['slug']) }}" class="d-inline"
                      onsubmit="return confirm('Activar {{ $item['sub_products']['ready'] }} sub-producto(s) del core {{ $item['slug'] }}?');">
                    @csrf
                    <input type="hidden" name="dry_run" value="0">
                    <button type="submit" class="btn btn-sm btn-success">
                        <i class="fas fa-rocket me-1"></i>Activar {{ $item['sub_products']['ready'] }} sub-productos
                    </button>
                </form>
            @endif
            <a href="{{ route('reseller.factory.concept.from-template', ['based_on' => $item['slug']]) }}" class="btn btn-sm btn-light-primary">
                <i class="fas fa-clone me-1"></i>Construir variante similar
            </a>
            @if($pub['in_bewpro_com'])
                <a href="https://bewpro.com/products-catalogue/{{ $item['slug'] }}" target="_blank" class="btn btn-sm btn-light-info">
                    <i class="fas fa-external-link-alt me-1"></i>Ver en bewpro.com
                </a>
            @endif
        </div>
    </div>
@endforeach

@if(empty($data['items']))
    <div class="alert alert-warning text-center">
        <i class="fas fa-filter me-1"></i>Sin resultados con los filtros actuales.
        <a href="{{ route('reseller.factory.index', ['view' => 'focus']) }}" class="ms-1">Limpiar filtros</a>.
    </div>
@endif