@props([
    'selectedCategories' => null, 
    'maxDepth' => 3,              
    'type' => 'common',           
    'title' => '카테고리 연동 설정',
    'variant' => 'primary'        // 디자인 분기 옵션: 'primary'(기존 카드형) / 'secondary'(슬림 인라인형)
])

@php
    $selectedCategories = $selectedCategories ?? collect();
@endphp

@if($variant === 'secondary')
<!-- ========================================== -->
<!-- 세컨드 디자인 (슬림 인라인형 디자인) -->
<!-- ========================================== -->
<div class="mb-3 admin-category-picker" data-max-depth="{{ $maxDepth }}" data-type="{{ $type }}">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <label class="form-label fw-semibold mb-0 text-dark">
            {{ $title }} <span class="text-danger">*</span>
        </label>

        <div class="d-flex align-items-center gap-2">
            <span class="text-muted small" style="font-size: 0.75rem;">최대 {{ $maxDepth }}단계</span>
            <button type="button" class="btn btn-outline-dark btn-sm px-2.5 py-1 fw-bold open-category-modal-btn" style="font-size: 0.75rem; border-radius: 4px;">
                <i class="fas fa-sitemap me-1 text-primary"></i> 카테고리 검색
            </button>
        </div>
    </div>

    <div class="p-3 bg-light rounded-2 border d-flex flex-wrap gap-2 align-items-center selected-categories-wrapper" style="min-height: 45px;">
        <span class="text-muted small no-category-text" style="{{ $selectedCategories->isNotEmpty() ? 'display: none;' : '' }} font-size: 0.8rem;">
            선택된 카테고리가 없습니다. 우측 '카테고리 검색' 버튼을 눌러 지정해주세요.
        </span>

        @if($selectedCategories->isNotEmpty())
            @foreach($selectedCategories as $category)
                <div class="badge bg-white text-dark border shadow-sm px-2.5 py-1.5 d-flex align-items-center gap-2 selected-category-badge" data-id="{{ $category->id }}" style="font-size: 0.8rem; border-radius: 15px;">
                    <span class="fw-semibold text-primary">
                        {{ $category->parent ? ($category->parent->parent ? $category->parent->parent->name . ' > ' . $category->parent->name . ' > ' : $category->parent->name . ' > ') : '' }}
                    </span>
                    <span>{{ $category->name }}</span>
                    <input type="hidden" name="category_ids[]" value="{{ $category->id }}">
                    <button type="button" class="btn-close ms-1" style="font-size: 0.5rem;" onclick="removeCategoryTag(this, {{ $category->id }})"></button>
                </div>
            @endforeach
        @endif
    </div>
</div>
@else
<!-- ========================================== -->
<!-- 프라이머리 디자인 (기존 카드 박스형 디자인)  -->
<!-- ========================================== -->
<div class="app-form-card mb-4 admin-category-picker" data-max-depth="{{ $maxDepth }}" data-type="{{ $type }}">
    <div class="app-card-header d-flex justify-content-between align-items-center py-3 px-4 bg-white border-bottom">
        <span class="fw-bold text-dark">
            <i class="fas fa-tags text-primary me-2"></i> {{ $title }}
       </span>
       <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2.5 py-1" style="font-size: 0.75rem;">
            {{ strtoupper($type) }} 전용 (최대 {{ $maxDepth }}단계)
        </span>
    </div>
        
    <div class="app-card-body p-4 bg-white">
        <div class="p-3 bg-light rounded-3 border mb-3 d-flex flex-wrap gap-2 align-items-center selected-categories-wrapper" style="min-height: 60px;">
            <span class="text-muted small no-category-text" style="{{ $selectedCategories->isNotEmpty() ? 'display: none;' : '' }}">
                <i class="fas fa-info-circle me-1 text-secondary"></i> 선택된 카테고리가 없습니다. 하단 버튼을 눌러 카테고리를 지정해주세요.
            </span>

            @if($selectedCategories->isNotEmpty())
                @foreach($selectedCategories as $category)
                    <div class="badge bg-white text-dark border shadow-sm px-3 py-2 d-flex align-items-center gap-2 selected-category-badge" data-id="{{ $category->id }}" style="font-size: 0.85rem; border-radius: 20px;">
                        <span class="fw-semibold text-primary">
                            {{ $category->parent ? ($category->parent->parent ? $category->parent->parent->name . ' > ' . $category->parent->name . ' > ' : $category->parent->name . ' > ') : '' }}
                        </span>
                        <span>{{ $category->name }}</span>
                        <input type="hidden" name="category_ids[]" value="{{ $category->id }}">
                        <button type="button" class="btn-close ms-1" style="font-size: 0.6rem;" onclick="removeCategoryTag(this, {{ $category->id }})"></button>
                    </div>
                @endforeach
            @endif
        </div>

        <button type="button" class="btn btn-outline-dark btn-sm fw-bold px-3 py-2 shadow-sm open-category-modal-btn" style="border-radius: 6px;">
            <i class="fas fa-sitemap me-1 text-primary"></i> 카테고리 검색 및 다중 선택 팝업
        </button>
    </div>
</div>
@endif

<!-- ========================================== -->
<!-- 공용 검색 모달 (디자인과 무관하게 공용 작동) -->
<!-- ========================================== -->
<div class="modal fade category-search-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px; overflow: hidden;">
            <div class="modal-header bg-dark text-white py-3 px-4">
                <h5 class="modal-title fw-bold fs-6">
                    <i class="fas fa-layer-group text-warning me-2"></i> [{{ strtoupper($type) }}] 카테고리 통합 선택 팝업
                </h5>
                <button type="button" class="btn-close btn-close-white shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body p-4 bg-light">
                <div class="card border-0 shadow-sm mb-4 p-3 bg-white rounded-3">
                    <div class="row g-2 align-items-center">
                        <div class="col-md-9">
                            <div class="input-group">
                                <span class="input-group-text bg-white border-end-0 text-muted"><i class="fas fa-search"></i></span>
                                <input type="text" class="form-control border-start-0 shadow-none modal-category-search-input" placeholder="검색할 카테고리명 입력">
                            </div>
                        </div>
                        <div class="col-md-3 d-flex gap-2">
                            <button class="btn btn-outline-secondary w-100 btn-sm fw-semibold modal-search-reset-btn" type="button">검색 초기화</button>
                        </div>
                    </div>
                </div>

                <div class="row g-3 modal-category-list-container" style="max-height: 480px; overflow-y: auto; padding-right: 4px;">
                    <div class="col-12 text-center py-5">
                        <i class="fas fa-spinner fa-spin text-primary fa-2x"></i>
                        <p class="text-muted small mt-2">카테고리 데이터를 불러오는 중...</p>
                    </div>
                </div>
            </div>

            <div class="modal-footer border-top py-3 px-4 bg-white d-flex justify-content-between align-items-center">
                <div class="text-muted small">
                    <i class="fas fa-info-circle me-1 text-primary"></i> 해당 도메인 전용 분류 데이터만 조회됩니다.
                </div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-sm btn-light px-4 border fw-semibold" data-bs-dismiss="modal">닫기</button>
                    <button type="button" class="btn btn-sm btn-dark px-4 fw-bold shadow-sm apply-selected-categories" data-bs-dismiss="modal">선택 완료</button>
                </div>
            </div>
        </div>
    </div>
</div>