@php
    $productCount = count($products);
    // Ürün sayısını CSS değişkeni olarak kullanmak için alıyoruz
@endphp

<div class="modern-cmp-wrapper" style="--prod-count: {{ $productCount }};">
    <style>
        /* Scoped CSS */
        .modern-cmp-wrapper {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: #334155;
            background: #fff;
            width: 100%;
            box-sizing: border-box;

            /* AYARLAR: Buradan genişlikleri yönetebilirsiniz */
            --feature-col-width: 140px;  /* Özellik sütunu genişliği */
            --prod-min-width: 220px;     /* Bir ürünün minimum genişliği */
            --prod-min-width-mobile: 150px; /* Mobilde minimum genişlik */
        }

        /* --- AI Insight Card --- */
        .cmp-ai-card {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border: 1px solid #bae6fd;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 24px;
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .cmp-ai-icon {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            background: #0ea5e9;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .cmp-ai-content h4 {
            margin: 0 0 4px 0;
            font-size: 14px;
            font-weight: 700;
            color: #0369a1;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .cmp-ai-content p {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
            color: #334155;
        }

        /* --- Table Container --- */
        .cmp-table-container {
            position: relative;
            overflow: auto; /* Scroll yönetimi */
            max-height: 80vh;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #fff;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 #f1f5f9;
        }

        .cmp-table-container::-webkit-scrollbar { width: 8px; height: 8px; }
        .cmp-table-container::-webkit-scrollbar-track { background: #f1f5f9; }
        .cmp-table-container::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }

        /* --- SMART TABLE LOGIC --- */
        .cmp-table {
            border-collapse: separate;
            border-spacing: 0;
            table-layout: fixed; /* Sütunları eşit dağıtmak için şart */

            /*
               SİHİRLİ FORMÜL:
               max(100%, hesaplanan_genişlik)
               Eğer ekran genişse 100% ile yayılır.
               Eğer ürünler sığmıyorsa hesaplanan piksel devreye girer ve scroll çıkar.
            */
            width: max(100%, calc(var(--feature-col-width) + (var(--prod-count) * var(--prod-min-width))));
        }

        .cmp-table th, .cmp-table td {
            padding: 16px;
            text-align: left;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle;
            background: #fff;
            box-sizing: border-box;
            /* Ürün sütunlarına width vermiyoruz, table-layout:fixed kalanı eşit dağıtır */
        }

        /* Sticky Column (Features - Sol Sütun) */
        .cmp-table th.feature-head,
        .cmp-table td.feature-row {
            position: sticky;
            left: 0;
            background: #f8fafc;
            z-index: 20;

            /* Sol sütun genişliğini sabitliyoruz */
            width: var(--feature-col-width);

            font-weight: 600;
            font-size: 13px;
            color: #64748b;
            border-right: 1px solid #e2e8f0;
            box-shadow: 2px 0 5px rgba(0,0,0,0.02);
        }

        /* Sticky Header (Products - Üst Başlık) */
        .cmp-table thead th {
            position: sticky;
            top: 0;
            z-index: 30;
            background: #fff;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 20px;
        }

        /* Kesişim Noktası (Sol Üst) */
        .cmp-table thead th.feature-head {
            z-index: 40;
            background: #f8fafc;
        }

        /* Product Header Styling */
        .prod-header {
            text-align: center;
            width: 100%;
            /* İçeriğin taşmasını engelle */
            overflow: hidden;
        }

        .prod-img-box {
            width: 100px;
            height: 100px;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
        }

        .prod-img-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.2s ease;
        }

        .prod-header:hover .prod-img-box img { transform: scale(1.05); }

        .prod-title {
            font-size: 15px;
            font-weight: 600;
            color: #0f172a;
            margin-bottom: 4px;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .prod-brand {
            font-size: 12px;
            color: #94a3b8;
            font-weight: 500;
        }

        /* Cell Values */
        .val-price { font-size: 18px; font-weight: 700; color: #0f172a; text-align: center; }
        .val-text {
            font-size: 14px; color: #475569; text-align: center;
            white-space: normal; word-wrap: break-word;
        }
        .val-desc {
            font-size: 13px; line-height: 1.6; color: #64748b;
            text-align: left;
        }

        /* Stock Badges */
        .badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; }
        .badge-stock { background-color: #dcfce7; color: #166534; }
        .badge-out { background-color: #fee2e2; color: #991b1b; }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .modern-cmp-wrapper {
                --feature-col-width: 110px;
                /* Mobilde hesaplama değişiyor */
            }

            .cmp-table {
                /* Mobil için min-width değerini güncelle */
                width: max(100%, calc(var(--feature-col-width) + (var(--prod-count) * var(--prod-min-width-mobile))));
            }

            .cmp-table th.feature-head,
            .cmp-table td.feature-row {
                font-size: 12px;
                padding: 10px;
            }
            .prod-img-box { width: 70px; height: 70px; }
            .prod-title { font-size: 13px; }
            .badge { padding: 2px 6px; font-size: 11px; }
        }
    </style>

    {{-- AI Yorumu --}}
    @if(isset($aiComment) && !empty($aiComment))
        <div class="cmp-ai-card">
            <div class="cmp-ai-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                </svg>
            </div>
            <div class="cmp-ai-content">
                <h4>Yapay Zeka Değerlendirmesi</h4>
                <p>{{ $aiComment }}</p>
            </div>
        </div>
    @endif

    <div class="cmp-table-container">
        <table class="cmp-table">
            {{-- Colgroup: Sütun genişliklerini yönetmek için en sağlıklı yöntem --}}
            <colgroup>
                <col style="width: var(--feature-col-width);">
                @foreach($products as $product)
                    <col> <!-- Width vermiyoruz, table-layout: fixed geri kalanı eşit böler -->
                @endforeach
            </colgroup>
            <thead>
                <tr>
                    <th class="feature-head">ÖZELLİKLER</th>
                    @foreach($products as $product)
                        <th>
                            <div class="prod-header">
                                <div class="prod-img-box">
                                    @if(isset($product['images']) && !empty($product['images']) && isset($product['images'][0]['path']))
                                        <img src="{{ $product['images'][0]['path'] }}" alt="{{ $product['name'] ?? '' }}">
                                    @else
                                        <span style="color:#ccc; font-size:12px;">Resim Yok</span>
                                    @endif
                                </div>
                                <div class="prod-brand">{{ $product['brand']['name'] ?? '' }}</div>
                                <div class="prod-title" title="{{ $product['name'] ?? '' }}">{{ $product['name'] ?? 'İsimsiz Ürün' }}</div>
                            </div>
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                {{-- Fiyat --}}
                <tr>
                    <td class="feature-row">Fiyat</td>
                    @foreach($products as $product)
                        <td>
                            <div class="val-price">
                                @if(isset($product['price']['sale_price']))
                                    {{ number_format($product['price']['sale_price'], 2, ',', '.') }}<small>{{ $product['price']['currency_symbol'] ?? '₺' }}</small>
                                @elseif(isset($product['variant_items']) && !empty($product['variant_items']) && isset($product['variant_items'][0]['price']['sale_price']))
                                    {{ number_format($product['variant_items'][0]['price']['sale_price'], 2, ',', '.') }}<small>{{ $product['variant_items'][0]['price']['currency_symbol'] ?? '₺' }}</small>
                                @else
                                    <span style="color:#94a3b8; font-size:14px; font-weight:400;">-</span>
                                @endif
                            </div>
                        </td>
                    @endforeach
                </tr>

                {{-- Stok Durumu --}}
                <tr>
                    <td class="feature-row">Stok Durumu</td>
                    @foreach($products as $product)
                        <td style="text-align: center;">
                            @php
                                $stock = $product['stock'] ?? 0;
                            @endphp
                            @if($stock > 0)
                                <span class="badge badge-stock">Stokta Var ({{$stock}})</span>
                            @else
                                <span class="badge badge-out">Tükendi</span>
                            @endif
                        </td>
                    @endforeach
                </tr>

                {{-- Kategori --}}
                @if(isset($products[0]['categories']) && !empty($products[0]['categories']))
                    <tr>
                        <td class="feature-row">Kategori</td>
                        @foreach($products as $product)
                            <td>
                                <div class="val-text">{{ $product['categories'][0]['name'] ?? '-' }}</div>
                            </td>
                        @endforeach
                    </tr>
                @endif

                {{-- Açıklama (30 Karakter Sınırı) --}}
                <tr>
                    <td class="feature-row">Açıklama</td>
                    @foreach($products as $product)
                        @php
                            $description = '-';
                            if(isset($product['description'])) {
                                $cleanDesc = strip_tags($product['description']);
                                $desc = mb_substr($cleanDesc, 0, 30);
                                if(mb_strlen($cleanDesc) > 30) {
                                    $desc .= '...';
                                }
                                $description = $desc;
                            }
                        @endphp
                        <td>
                            <div class="val-desc">{{ $description }}</div>
                        </td>
                    @endforeach
                </tr>

                {{-- Özel Alanlar --}}
                @php
                    $specialAreas = [];
                    foreach($products as $product) {
                        if(isset($product['special_area_values']) && is_array($product['special_area_values'])) {
                            foreach($product['special_area_values'] as $area) {
                                $showInFilter = isset($area['show_in_product_filter']) ? (int)$area['show_in_product_filter'] : 0;
                                if($showInFilter == 1 && isset($area['name']) && !in_array($area['name'], $specialAreas)) {
                                    $specialAreas[] = $area['name'];
                                }
                            }
                        }
                    }
                @endphp

                @foreach($specialAreas as $areaName)
                    <tr>
                        <td class="feature-row">{{ $areaName }}</td>
                        @foreach($products as $product)
                            @php
                                $value = '-';
                                if(isset($product['special_area_values']) && is_array($product['special_area_values'])) {
                                    foreach($product['special_area_values'] as $area) {
                                        $showInFilter = isset($area['show_in_product_filter']) ? (int)$area['show_in_product_filter'] : 0;
                                        if($showInFilter == 1 && isset($area['name']) && $area['name'] === $areaName) {
                                            $value = $area['value'] ?? '-';
                                            break;
                                        }
                                    }
                                }
                            @endphp
                            <td>
                                <div class="val-text">{{ $value }}</div>
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>