@extends('admin.layouts.app')

@push('css')
<style>
.product-search-results {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: none;
}
.product-search-results .search-item {
    padding: 0.65rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f1f1;
}
.product-search-results .search-item:hover {
    background: #f8f9fa;
}
.product-search-results .search-item:last-child {
    border-bottom: 0;
}
.product-preview {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
    display: none;
}
.product-preview.visible {
    display: block;
}
.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}
.img-slot {
    position: relative;
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem;
    text-align: center;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}
.img-slot.has-image { border-style: solid; border-color: #adb5bd; }
.img-slot.is-main { border-color: #0d6efd; }
.img-slot img { max-width: 100%; max-height: 90px; object-fit: contain; border-radius: 0.25rem; }
.img-slot .img-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; }
.img-slot .img-actions .btn { padding: 0 4px; font-size: 0.75rem; line-height: 1.4; }
.img-slot .img-label { font-size: 0.7rem; color: #6c757d; margin-top: 0.25rem; }
.img-slot .img-empty { color: #adb5bd; font-size: 0.8rem; }
.listing-type-card {
    border: 2px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.listing-type-card:hover {
    border-color: #adb5bd;
}
.listing-type-card.selected {
    border-color: #0d6efd;
    background: #f0f6ff;
}
.listing-type-card .type-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.listing-type-card .type-desc {
    font-size: 0.8rem;
    color: #6c757d;
}
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Nueva Publicación MercadoLibre</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.dashboard') }}">MarketPlace</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.publications.index') }}">Publicaciones</a></li>
                    <li class="breadcrumb-item active">Nueva</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<form action="{{ route('admin.meli.publications.store') }}" method="POST" id="publicationForm">
    @csrf

    <div class="row">
        {{-- Columna principal --}}
        <div class="col-lg-8">
            {{-- Producto --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ri-shopping-bag-line me-1"></i> Producto de Stock</h5>
                </div>
                <div class="card-body">
                    <div class="position-relative">
                        <label class="form-label">Buscar Producto <span class="text-danger">*</span></label>
                        <input type="text" id="productSearch" class="form-control @error('co_arti') is-invalid @enderror"
                               placeholder="Escribí código, nombre o código de barras..." autocomplete="off">
                        <input type="hidden" name="co_arti" id="co_arti" value="{{ old('co_arti') }}">
                        <div class="product-search-results" id="searchResults"></div>
                        @error('co_arti')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="product-preview {{ old('co_arti') ? 'visible' : '' }}" id="productPreview">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <span class="badge bg-primary fs-6" id="previewCode">{{ old('co_arti') }}</span>
                            </div>
                            <div class="flex-grow-1">
                                <strong id="previewName">-</strong><br>
                                <small class="text-muted">
                                    Barras: <span id="previewBarcode">-</span> |
                                    Stock: <span id="previewStock">-</span> |
                                    Precio: $<span id="previewPrice">-</span>
                                </small>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="clearProduct()">
                                <i class="ri-close-line"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Datos de publicación --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ri-edit-line me-1"></i> Datos de Publicación</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="titu_publ" class="form-label">Título <span class="text-danger">*</span></label>
                        <input type="text" name="titu_publ" id="titu_publ" class="form-control @error('titu_publ') is-invalid @enderror"
                               value="{{ old('titu_publ') }}" maxlength="70" placeholder="Título de la publicación (máx 70 caracteres)">
                        <div class="d-flex justify-content-between mt-1">
                            <small class="text-muted">El título es lo primero que ven los compradores</small>
                            <small class="text-muted"><span id="titleCount">0</span>/70</small>
                        </div>
                        @error('titu_publ')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="subt_publ" class="form-label">Subtítulo</label>
                        <input type="text" name="subt_publ" id="subt_publ" class="form-control @error('subt_publ') is-invalid @enderror"
                               value="{{ old('subt_publ') }}" maxlength="67" placeholder="Subtítulo opcional (máx 67 caracteres)">
                        <small class="text-muted">Solo disponible en publicaciones Premium</small>
                        @error('subt_publ')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="deta_publ" class="form-label">Descripción</label>
                        <textarea name="deta_publ" id="deta_publ" class="form-control @error('deta_publ') is-invalid @enderror"
                                  rows="6" placeholder="Descripción detallada del producto...">{{ old('deta_publ') }}</textarea>
                        @error('deta_publ')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="gara_publ" class="form-label">Garantía</label>
                        <input type="text" name="gara_publ" id="gara_publ" class="form-control @error('gara_publ') is-invalid @enderror"
                               value="{{ old('gara_publ') }}" maxlength="65" placeholder="Ej: Garantía del vendedor: 6 meses">
                        @error('gara_publ')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="condition" class="form-label">Condición</label>
                                <select name="condition" id="condition" class="form-select @error('condition') is-invalid @enderror">
                                    <option value="new" {{ old('condition') == 'new' || !old('condition') ? 'selected' : '' }}>Nuevo</option>
                                    <option value="used" {{ old('condition') == 'used' ? 'selected' : '' }}>Usado</option>
                                    <option value="not_specified" {{ old('condition') == 'not_specified' ? 'selected' : '' }}>No especificado</option>
                                </select>
                                @error('condition') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label d-block">Envío gratis</label>
                                <div class="form-check form-switch mt-2">
                                    <input type="hidden" name="free_shipping" value="0">
                                    <input class="form-check-input" type="checkbox" name="free_shipping" id="free_shipping" value="1"
                                           {{ old('free_shipping') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="free_shipping">Activar envío gratis</label>
                                </div>
                                @error('free_shipping') <span class="invalid-feedback d-block">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Imágenes --}}
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0"><i class="ri-image-line me-1"></i> Imágenes <small class="text-muted fw-normal">(máx. 7)</small></h5>
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="addImagePrompt()">
                        <i class="ri-add-line me-1"></i> Agregar
                    </button>
                </div>
                <div class="card-body">
                    <div class="row g-2" id="imgSlotsContainer">
                        @for($i = 0; $i <= 6; $i++)
                            @php
                                $field = $i == 0 ? 'url_image' : 'url_image' . $i;
                                $val = old($field);
                            @endphp
                            <div class="col-md-3 col-sm-4 col-6">
                                <div class="img-slot {{ $val ? 'has-image' : '' }} {{ $i == 0 ? 'is-main' : '' }}" id="slot-{{ $i }}">
                                    <input type="hidden" name="{{ $field }}" id="img-{{ $i }}" value="{{ $val }}" class="img-hidden-input">
                                    @if($val)
                                        <div class="img-actions">
                                            @if($i > 0)
                                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveImage({{ $i }}, -1)" title="Mover izquierda"><i class="ri-arrow-left-s-line"></i></button>
                                            @endif
                                            @if($i < 6)
                                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveImage({{ $i }}, 1)" title="Mover derecha"><i class="ri-arrow-right-s-line"></i></button>
                                            @endif
                                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="clearImage({{ $i }})" title="Quitar"><i class="ri-close-line"></i></button>
                                        </div>
                                        <img src="{{ $val }}" onerror="this.style.display='none'">
                                    @else
                                        <div class="img-empty"><i class="ri-image-add-line fs-4 d-block"></i><span>Vacío</span></div>
                                    @endif
                                    <div class="img-label">{{ $i == 0 ? 'Principal' : 'Imagen ' . $i }}</div>
                                </div>
                            </div>
                        @endfor
                    </div>

                    <hr>
                    <div class="mb-0">
                        <label for="url_video" class="form-label"><i class="ri-video-line me-1"></i> URL de Video (YouTube)</label>
                        <input type="text" name="url_video" id="url_video" class="form-control @error('url_video') is-invalid @enderror"
                               value="{{ old('url_video') }}" placeholder="https://www.youtube.com/watch?v=...">
                        <small class="text-muted">MercadoLibre recomienda subir un video del producto</small>
                    </div>
                </div>
            </div>

            {{-- Observaciones --}}
            <div class="card">
                <div class="card-body">
                    <label for="observaciones" class="form-label">Observaciones internas</label>
                    <textarea name="observaciones" id="observaciones" class="form-control" rows="2"
                              placeholder="Notas internas (no se publican en ML)">{{ old('observaciones') }}</textarea>
                </div>
            </div>
        </div>

        {{-- Columna lateral --}}
        <div class="col-lg-4">
            {{-- Tipo de publicación --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ri-medal-line me-1"></i> Tipo de Publicación</h5>
                </div>
                <div class="card-body">
                    <input type="hidden" name="tipo_publ" id="tipo_publ" value="{{ old('tipo_publ', 'gold_special') }}">
                    <div class="d-flex flex-column gap-2">
                        <div class="listing-type-card {{ old('tipo_publ', 'gold_special') == 'gold_special' ? 'selected' : '' }}"
                             onclick="selectListingType('gold_special', this)">
                            <div class="type-name text-primary"><i class="ri-vip-crown-line"></i> Premium</div>
                            <div class="type-desc">Mayor exposición, subtítulo habilitado</div>
                        </div>
                        <div class="listing-type-card {{ old('tipo_publ') == 'gold_pro' ? 'selected' : '' }}"
                             onclick="selectListingType('gold_pro', this)">
                            <div class="type-name text-warning"><i class="ri-medal-line"></i> Gold Pro</div>
                            <div class="type-desc">Buena exposición, comisión media</div>
                        </div>
                        <div class="listing-type-card {{ old('tipo_publ') == 'gold' ? 'selected' : '' }}"
                             onclick="selectListingType('gold', this)">
                            <div class="type-name text-secondary"><i class="ri-award-line"></i> Gold</div>
                            <div class="type-desc">Exposición estándar</div>
                        </div>
                        <div class="listing-type-card {{ old('tipo_publ') == 'free' ? 'selected' : '' }}"
                             onclick="selectListingType('free', this)">
                            <div class="type-name text-muted"><i class="ri-price-tag-line"></i> Gratis</div>
                            <div class="type-desc">Sin costo, menor exposición</div>
                        </div>
                    </div>
                    @error('tipo_publ')
                        <div class="text-danger mt-2">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            {{-- Precio y Stock --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ri-money-dollar-circle-line me-1"></i> Precio y Stock</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="prec_publ" class="form-label">Precio <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" name="prec_publ" id="prec_publ" class="form-control @error('prec_publ') is-invalid @enderror"
                                   value="{{ old('prec_publ') }}" step="0.01" min="0" placeholder="0.00">
                        </div>
                        @error('prec_publ')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="cant_publ" class="form-label">Cantidad <span class="text-danger">*</span></label>
                        <input type="number" name="cant_publ" id="cant_publ" class="form-control @error('cant_publ') is-invalid @enderror"
                               value="{{ old('cant_publ') }}" min="0" step="1" placeholder="0">
                        @error('cant_publ')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="mb-0">
                        <label for="list_publ" class="form-label">Lista de Precios</label>
                        <select name="list_publ" id="list_publ" class="form-select">
                            <option value="">Sin lista</option>
                            @foreach(range('A', 'F') as $letter)
                                <option value="{{ $letter }}" {{ old('list_publ') == $letter ? 'selected' : '' }}>Lista {{ $letter }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- Categorización ML --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ri-folder-line me-1"></i> Categoría ML</h5>
                </div>
                <div class="card-body">
                    {{-- Sugerir categoría desde título --}}
                    <div class="mb-3">
                        <button type="button" class="btn btn-sm btn-outline-info w-100" id="btnPredictCategory">
                            <i class="ri-magic-line me-1"></i> Sugerir Categoría desde Título
                        </button>
                        <div id="predictResult" class="mt-1"></div>
                    </div>

                    {{-- Buscar categoría en ML API --}}
                    <div class="mb-3">
                        <label class="form-label">Buscar Categoría en ML</label>
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" id="searchCategoryML" placeholder="Buscar categoría...">
                            <button type="button" class="btn btn-outline-info" id="btnSearchCategory">
                                <i class="ri-search-line"></i>
                            </button>
                        </div>
                        <div id="searchCategoryResults" class="list-group mt-1" style="display:none; max-height:200px; overflow-y:auto; font-size:0.8rem;"></div>
                    </div>

                    <hr class="my-2">

                    {{-- Categoría seleccionada directamente (ML category_id) --}}
                    <input type="hidden" name="ml_category_id_predicted" id="ml_category_id_predicted" value="">

                    <div class="mb-3">
                        <label class="form-label">Categoría</label>
                        <select name="cate_publ" id="cate_publ" class="form-select form-select-sm">
                            <option value="">Seleccionar...</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->ml_categor }}" {{ old('cate_publ') == $cat->ml_categor ? 'selected' : '' }}>
                                    {{ $cat->ml_categor }} - {{ $cat->de_categor }}
                                </option>
                            @endforeach
                        </select>
                        @if($categories->isEmpty())
                            <small class="text-warning"><i class="ri-alert-line"></i> Sin categorías locales. Usá "Buscar" o "Sugerir" para consultar ML.</small>
                        @endif
                    </div>
                    <div class="mb-3">
                        <label class="form-label">SubCategoría</label>
                        <select name="scat_publ" id="scat_publ" class="form-select form-select-sm" disabled>
                            <option value="">Seleccionar categoría primero</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Variedad</label>
                        <select name="vari_publ" id="vari_publ" class="form-select form-select-sm" disabled>
                            <option value="">Seleccionar subcategoría primero</option>
                        </select>
                    </div>
                    <div class="mb-0">
                        <label class="form-label">SubVariedad</label>
                        <select name="svar_publ" id="svar_publ" class="form-select form-select-sm" disabled>
                            <option value="">Seleccionar variedad primero</option>
                        </select>
                    </div>
                </div>
            </div>

            {{-- Atributos de la categoría ML --}}
            <div class="card" id="categoryAttributesCard" style="display:none;">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ri-list-check-2 me-1"></i> Atributos de la Categoría</h5>
                </div>
                <div class="card-body">
                    <div id="attrsCreateLoading" class="text-center py-3" style="display:none;">
                        <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                        <small class="text-muted ms-2">Cargando atributos...</small>
                    </div>
                    <div id="attrsCreateContainer"></div>
                </div>
            </div>

            {{-- Acciones --}}
            <div class="card">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary w-100 mb-2">
                        <i class="ri-save-line me-1"></i> Guardar como Borrador
                    </button>
                    <a href="{{ route('admin.meli.publications.index') }}" class="btn btn-outline-secondary w-100">
                        <i class="ri-close-line me-1"></i> Cancelar
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>

@endsection

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('productSearch');
    const searchResults = document.getElementById('searchResults');
    const coArtiInput = document.getElementById('co_arti');
    const productPreview = document.getElementById('productPreview');
    let searchTimeout;

    // Product search
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();

        if (query.length < 2) {
            searchResults.style.display = 'none';
            return;
        }

        searchTimeout = setTimeout(() => {
            fetch(`{{ route('admin.meli.publications.searchProducts') }}?q=${encodeURIComponent(query)}`)
                .then(r => r.json())
                .then(data => {
                    if (data.length === 0) {
                        searchResults.innerHTML = '<div class="search-item text-muted">No se encontraron productos</div>';
                    } else {
                        searchResults.innerHTML = data.map(p => `
                            <div class="search-item" onclick="selectProduct('${p.CO_ARTI}', '${(p.DESCRI || '').replace(/'/g, "\\'")}', '${p.CO_BARRA || '-'}', ${p.WW_STCK || 0}, ${p.IM_MLA_VTA || p.IM_UNITA || 0})">
                                <strong>${p.CO_ARTI}</strong> — ${p.DESCRI || 'Sin descripción'}
                                <br><small class="text-muted">Stock: ${p.WW_STCK || 0} | Precio: $${Number(p.IM_MLA_VTA || p.IM_UNITA || 0).toLocaleString('es-AR')}</small>
                            </div>
                        `).join('');
                    }
                    searchResults.style.display = 'block';
                })
                .catch(() => {
                    searchResults.style.display = 'none';
                });
        }, 300);
    });

    // Close search results on click outside
    document.addEventListener('click', function(e) {
        if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
            searchResults.style.display = 'none';
        }
    });

    // Title character counter
    const titleInput = document.getElementById('titu_publ');
    const titleCount = document.getElementById('titleCount');
    titleInput.addEventListener('input', function() {
        titleCount.textContent = this.value.length;
    });
    titleCount.textContent = titleInput.value.length;

    // Image slots initialized on load

    // Cascading category selects
    const cateSelect = document.getElementById('cate_publ');
    const scatSelect = document.getElementById('scat_publ');
    const variSelect = document.getElementById('vari_publ');
    const svarSelect = document.getElementById('svar_publ');

    cateSelect.addEventListener('change', function() {
        loadCascade('{{ url("admin/meli/categories") }}/' + this.value + '/subcategories', scatSelect, 'ml_subcate', 'de_subcate');
        variSelect.innerHTML = '<option value="">Seleccionar subcategoría primero</option>';
        variSelect.disabled = true;
        svarSelect.innerHTML = '<option value="">Seleccionar variedad primero</option>';
        svarSelect.disabled = true;
        hideAttributes();
        loadCategoryAttributes();
    });

    scatSelect.addEventListener('change', function() {
        var scatVal = this.value;
        if (scatVal) {
            // Try local DB first, then import on-demand if empty
            loadCascadeWithImport(
                '{{ url("admin/meli/categories") }}/' + cateSelect.value + '/' + scatVal + '/varieties',
                variSelect, 'ml_varieda', 'de_varieda', scatVal
            );
        } else {
            variSelect.innerHTML = '<option value="">Seleccionar subcategoría primero</option>';
            variSelect.disabled = true;
        }
        svarSelect.innerHTML = '<option value="">Seleccionar variedad primero</option>';
        svarSelect.disabled = true;
        hideAttributes();
        loadCategoryAttributes();
    });

    variSelect.addEventListener('change', function() {
        var variVal = this.value;
        if (variVal) {
            loadCascadeWithImport(
                '{{ url("admin/meli/categories") }}/' + cateSelect.value + '/' + scatSelect.value + '/' + variVal + '/subvarieties',
                svarSelect, 'ml_subvari', 'de_subvari', variVal
            );
        } else {
            svarSelect.innerHTML = '<option value="">Seleccionar variedad primero</option>';
            svarSelect.disabled = true;
        }
        hideAttributes();
        loadCategoryAttributes();
    });

    svarSelect.addEventListener('change', function() {
        loadCategoryAttributes();
    });
});

function selectProduct(code, name, barcode, stock, price) {
    document.getElementById('co_arti').value = code;
    document.getElementById('productSearch').value = code + ' - ' + name;
    document.getElementById('searchResults').style.display = 'none';

    document.getElementById('previewCode').textContent = code;
    document.getElementById('previewName').textContent = name;
    document.getElementById('previewBarcode').textContent = barcode;
    document.getElementById('previewStock').textContent = stock;
    document.getElementById('previewPrice').textContent = Number(price).toLocaleString('es-AR');
    document.getElementById('productPreview').classList.add('visible');

    // Auto-fill title if empty
    const titleInput = document.getElementById('titu_publ');
    if (!titleInput.value) {
        titleInput.value = name.substring(0, 70);
        document.getElementById('titleCount').textContent = titleInput.value.length;
    }

    // Auto-fill quantity and price
    const cantInput = document.getElementById('cant_publ');
    if (!cantInput.value) cantInput.value = stock;
    const precInput = document.getElementById('prec_publ');
    if (!precInput.value) precInput.value = price;
}

function clearProduct() {
    document.getElementById('co_arti').value = '';
    document.getElementById('productSearch').value = '';
    document.getElementById('productPreview').classList.remove('visible');
}

function selectListingType(type, el) {
    document.getElementById('tipo_publ').value = type;
    document.querySelectorAll('.listing-type-card').forEach(c => c.classList.remove('selected'));
    el.classList.add('selected');
}

// ── Image Management ──
function renderImageSlots() {
    for (var i = 0; i <= 6; i++) {
        var input = document.getElementById('img-' + i);
        var slot = document.getElementById('slot-' + i);
        var val = input.value;
        var isMain = (i === 0);
        slot.className = 'img-slot' + (val ? ' has-image' : '') + (isMain ? ' is-main' : '');
        var html = '<input type="hidden" name="' + (i === 0 ? 'url_image' : 'url_image' + i) + '" id="img-' + i + '" value="' + escapeAttr(val) + '" class="img-hidden-input">';
        if (val) {
            html += '<div class="img-actions">';
            if (i > 0) html += '<button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveImage(' + i + ', -1)" title="Mover izquierda"><i class="ri-arrow-left-s-line"></i></button>';
            if (i < 6) html += '<button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveImage(' + i + ', 1)" title="Mover derecha"><i class="ri-arrow-right-s-line"></i></button>';
            html += '<button type="button" class="btn btn-outline-danger btn-sm" onclick="clearImage(' + i + ')" title="Quitar"><i class="ri-close-line"></i></button>';
            html += '</div>';
            html += '<img src="' + escapeAttr(val) + '" onerror="this.style.display=\'none\'">';
        } else {
            html += '<div class="img-empty"><i class="ri-image-add-line fs-4 d-block"></i><span>Vacío</span></div>';
        }
        html += '<div class="img-label">' + (isMain ? 'Principal' : 'Imagen ' + i) + '</div>';
        slot.innerHTML = html;
    }
}
function clearImage(index) { document.getElementById('img-' + index).value = ''; renderImageSlots(); }
function moveImage(index, direction) {
    var target = index + direction;
    if (target < 0 || target > 6) return;
    var src = document.getElementById('img-' + index);
    var dst = document.getElementById('img-' + target);
    var temp = src.value; src.value = dst.value; dst.value = temp;
    renderImageSlots();
}
function addImagePrompt() {
    var emptyIndex = -1;
    for (var i = 0; i <= 6; i++) { if (!document.getElementById('img-' + i).value) { emptyIndex = i; break; } }
    if (emptyIndex === -1) { Swal.fire({ icon: 'warning', title: 'Máximo alcanzado', text: 'Ya hay 7 imágenes.', timer: 3000 }); return; }
    Swal.fire({
        title: 'Agregar imagen', input: 'url', inputPlaceholder: 'https://...',
        inputLabel: 'URL de la imagen', showCancelButton: true, confirmButtonText: 'Agregar', cancelButtonText: 'Cancelar',
        inputValidator: function(v) { if (!v) return 'Ingresá una URL'; if (!v.match(/^https?:\/\/.+/)) return 'URL inválida'; }
    }).then(function(r) { if (r.isConfirmed && r.value) { document.getElementById('img-' + emptyIndex).value = r.value; renderImageSlots(); } });
}
function escapeAttr(str) { if (!str) return ''; return str.replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

function loadCascade(url, select, valueField, textField) {
    select.innerHTML = '<option value="">Cargando...</option>';
    select.disabled = true;

    fetch(url)
        .then(r => r.json())
        .then(data => {
            select.innerHTML = '<option value="">Seleccionar...</option>';
            if (data.length === 0) {
                // Local DB empty -- fallback to ML API for children
                var parentId = extractCategoryIdFromUrl(url);
                if (parentId) {
                    loadChildrenFromApi(parentId, select);
                } else {
                    select.disabled = true;
                }
                return;
            }
            data.forEach(item => {
                const opt = document.createElement('option');
                opt.value = item[valueField];
                opt.textContent = item[valueField] + ' - ' + item[textField];
                select.appendChild(opt);
            });
            select.disabled = data.length === 0;
        })
        .catch(() => {
            select.innerHTML = '<option value="">Error al cargar</option>';
        });
}

/**
 * Load cascade with on-demand import: try local DB first, if empty import from ML API
 * then reload from local DB. Used for levels 3 (varieties) and 4 (subvarieties).
 */
function loadCascadeWithImport(localUrl, select, valueField, textField, parentMlId) {
    select.innerHTML = '<option value="">Cargando...</option>';
    select.disabled = true;

    fetch(localUrl)
        .then(r => r.json())
        .then(data => {
            if (data.length > 0) {
                // Local DB has data, use it
                select.innerHTML = '<option value="">Seleccionar...</option>';
                data.forEach(item => {
                    var opt = document.createElement('option');
                    opt.value = item[valueField];
                    opt.textContent = item[valueField] + ' - ' + item[textField];
                    select.appendChild(opt);
                });
                select.disabled = false;
                return;
            }

            // Local DB empty -- import on-demand from ML API
            select.innerHTML = '<option value="">Importando desde ML...</option>';
            fetch('{{ route("admin.meli.categories.importChildren", ["mlCategoryId" => "__ID__"]) }}'.replace('__ID__', parentMlId), {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(r => r.json())
            .then(function(importResult) {
                if (importResult.success && importResult.children && importResult.children.length > 0) {
                    // Populate from import results directly
                    select.innerHTML = '<option value="">Seleccionar...</option>';
                    importResult.children.forEach(function(child) {
                        var opt = document.createElement('option');
                        opt.value = child[valueField] || '';
                        opt.textContent = (child[valueField] || '') + ' - ' + (child[textField] || '');
                        select.appendChild(opt);
                    });
                    select.disabled = false;
                } else {
                    // No children from ML either -- try direct API fallback
                    loadChildrenFromApi(parentMlId, select);
                }
            })
            .catch(function() {
                // Import failed, try direct API fallback
                loadChildrenFromApi(parentMlId, select);
            });
        })
        .catch(() => {
            select.innerHTML = '<option value="">Error al cargar</option>';
        });
}

/**
 * Extract the last ML category/subcategory ID from the cascade URL to use as API fallback.
 * URLs: .../categories/MLA1234/subcategories -> MLA1234
 *       .../categories/MLA1234/MLA5678/varieties -> MLA5678
 *       .../categories/MLA1234/MLA5678/MLA9999/subvarieties -> MLA9999
 */
function extractCategoryIdFromUrl(url) {
    var parts = url.split('/');
    var catIndex = parts.indexOf('categories');
    if (catIndex < 0) return null;
    var segments = parts.slice(catIndex + 1);
    segments.pop();
    return segments.length > 0 ? segments[segments.length - 1] : null;
}

/**
 * Fallback: load children from ML API when local DB is empty and import failed
 */
function loadChildrenFromApi(categoryId, select) {
    select.innerHTML = '<option value="">Consultando ML...</option>';
    fetch('{{ route("admin.meli.categories.childrenMeli", ["categoryId" => "__ID__"]) }}'.replace('__ID__', categoryId))
        .then(r => r.json())
        .then(data => {
            var children = data.children_categories || [];
            select.innerHTML = '<option value="">Seleccionar...</option>';
            if (children.length === 0) {
                select.innerHTML = '<option value="">Sin subcategorías</option>';
                select.disabled = true;
                return;
            }
            children.forEach(function(child) {
                var opt = document.createElement('option');
                opt.value = child.id;
                opt.textContent = child.id + ' - ' + child.name;
                select.appendChild(opt);
            });
            select.disabled = false;
        })
        .catch(function() {
            select.innerHTML = '<option value="">Error consultando ML</option>';
        });
}

// ── Category Attributes ──

/**
 * Get the deepest selected category ID from the cascading selects
 */
function getDeepestCategoryId() {
    var svar = document.getElementById('svar_publ').value;
    if (svar) return svar;
    var vari = document.getElementById('vari_publ').value;
    if (vari) return vari;
    var scat = document.getElementById('scat_publ').value;
    if (scat) return scat;
    var cate = document.getElementById('cate_publ').value;
    if (cate) return cate;
    // Also check the predicted hidden field
    var predicted = document.getElementById('ml_category_id_predicted').value;
    if (predicted) return predicted;
    return null;
}

function hideAttributes() {
    document.getElementById('categoryAttributesCard').style.display = 'none';
    document.getElementById('attrsCreateContainer').innerHTML = '';
}

function loadCategoryAttributes() {
    var catId = getDeepestCategoryId();
    if (!catId) {
        hideAttributes();
        return;
    }

    var card = document.getElementById('categoryAttributesCard');
    var loading = document.getElementById('attrsCreateLoading');
    var container = document.getElementById('attrsCreateContainer');

    card.style.display = 'block';
    loading.style.display = 'block';
    container.innerHTML = '';

    fetch('{{ route("admin.meli.categories.getAttributes", ["mlCategoryId" => "__ID__"]) }}'.replace('__ID__', catId), {
        headers: { 'Accept': 'application/json' }
    })
    .then(function(r) {
        var ct = r.headers.get('content-type') || '';
        if (!ct.includes('application/json')) throw new Error('Respuesta inesperada del servidor.');
        return r.json();
    })
    .then(function(response) {
        loading.style.display = 'none';

        if (!response.success || !response.data || response.data.length === 0) {
            container.innerHTML = '<div class="text-center text-muted py-3"><i class="ri-list-check-2" style="font-size:2rem;"></i><p class="mt-2 mb-0">Esta categoría no tiene atributos disponibles.</p></div>';
            return;
        }

        var html = '<div class="row g-2">';
        var count = 0;
        response.data.forEach(function(attr) {
            // Skip read-only and hidden attributes
            var tags = attr.tags || {};
            if (tags.read_only || tags.hidden) return;

            var required = (tags.required || tags.catalog_required) ? '<span class="text-danger">*</span>' : '';
            var attrId = attr.id || '';
            var attrName = attr.name || attrId;

            html += '<div class="col-md-6"><div class="mb-2">';
            html += '<label class="form-label mb-1 small fw-semibold">' + escapeAttr(attrName) + ' ' + required + '</label>';

            if (attr.values && attr.values.length > 0) {
                html += '<select name="attributes[' + escapeAttr(attrId) + ']" class="form-select form-select-sm">';
                html += '<option value="">Seleccionar...</option>';
                attr.values.forEach(function(v) {
                    html += '<option value="' + escapeAttr(v.id || '') + '">' + escapeAttr(v.name || v.id || '') + '</option>';
                });
                html += '</select>';
            } else {
                var placeholder = attr.value_type || '';
                html += '<input type="text" name="attributes[' + escapeAttr(attrId) + ']" class="form-control form-control-sm" placeholder="' + escapeAttr(placeholder) + '">';
            }

            html += '</div></div>';
            count++;
        });
        html += '</div>';

        if (count === 0) {
            container.innerHTML = '<div class="text-center text-muted py-3"><i class="ri-list-check-2" style="font-size:2rem;"></i><p class="mt-2 mb-0">Esta categoría no tiene atributos editables.</p></div>';
        } else {
            container.innerHTML = html;
        }
    })
    .catch(function(err) {
        loading.style.display = 'none';
        container.innerHTML = '<div class="text-center text-danger py-3"><i class="ri-error-warning-line me-1"></i>' + (err.message || 'Error cargando atributos') + '</div>';
    });
}

// ── Predict Category from Title ──
document.getElementById('btnPredictCategory').addEventListener('click', function() {
    var title = document.getElementById('titu_publ').value.trim();
    if (!title || title.length < 5) {
        Swal.fire('Atención', 'Ingresá un título de al menos 5 caracteres para sugerir categoría.', 'warning');
        return;
    }

    var btn = this;
    var resultDiv = document.getElementById('predictResult');
    btn.disabled = true;
    resultDiv.innerHTML = '<small class="text-muted"><i class="ri-loader-4-line ri-spin"></i> Consultando ML...</small>';

    fetch('{{ route("admin.meli.categories.predictMeli") }}?title=' + encodeURIComponent(title))
        .then(r => r.json())
        .then(function(response) {
            btn.disabled = false;
            if (response.category_id) {
                var path = response.path_from_root || [];
                var pathNames = path.map(function(p) { return p.name; }).join(' > ');
                // Store prediction data globally to avoid inline JSON issues
                window._predictedCategoryId = response.category_id;
                window._predictedPath = path;
                resultDiv.innerHTML =
                    '<div class="alert alert-success alert-sm py-1 px-2 mb-0 mt-1" style="font-size:0.8rem;">' +
                        '<i class="ri-check-line me-1"></i><strong>' + response.category_id + '</strong><br>' +
                        '<span class="text-muted">' + pathNames + '</span>' +
                        '<button type="button" class="btn btn-sm btn-success ms-2 py-0 px-1" onclick="applyPredictedCategory(window._predictedCategoryId, window._predictedPath)">' +
                            '<i class="ri-check-double-line me-1"></i>Aplicar</button>' +
                    '</div>';
            } else {
                resultDiv.innerHTML = '<small class="text-muted">No se encontró sugerencia para este título.</small>';
            }
        })
        .catch(function() {
            btn.disabled = false;
            resultDiv.innerHTML = '<small class="text-danger"><i class="ri-error-warning-line me-1"></i>Error consultando ML API</small>';
        });
});

/**
 * Apply predicted category: try to select in local dropdowns, or set hidden field
 */
function applyPredictedCategory(categoryId, pathFromRoot) {
    document.getElementById('ml_category_id_predicted').value = categoryId;

    if (pathFromRoot.length > 0) {
        // Try to match the root category in local select
        var cateSelect = document.getElementById('cate_publ');
        var rootId = pathFromRoot[0].id;
        var matched = false;

        for (var i = 0; i < cateSelect.options.length; i++) {
            if (cateSelect.options[i].value === rootId) {
                cateSelect.value = rootId;
                cateSelect.dispatchEvent(new Event('change'));
                matched = true;
                break;
            }
        }

        if (!matched) {
            // Add the root category as option and select it
            var opt = document.createElement('option');
            opt.value = rootId;
            opt.textContent = rootId + ' - ' + pathFromRoot[0].name;
            opt.selected = true;
            cateSelect.appendChild(opt);
            cateSelect.dispatchEvent(new Event('change'));
        }
    }

    var resultDiv = document.getElementById('predictResult');
    var pathNames = pathFromRoot.map(function(p) { return p.name; }).join(' > ');
    resultDiv.innerHTML =
        '<div class="alert alert-info alert-sm py-1 px-2 mb-0 mt-1" style="font-size:0.8rem;">' +
            '<i class="ri-check-line me-1"></i>Categoría aplicada: <strong>' + categoryId + '</strong><br>' +
            '<span class="text-muted">' + pathNames + '</span>' +
        '</div>';
}

// ── Search Category in ML API ──
document.getElementById('btnSearchCategory').addEventListener('click', function() {
    var query = document.getElementById('searchCategoryML').value.trim();
    if (!query || query.length < 3) {
        Swal.fire('Atención', 'Ingresá al menos 3 caracteres para buscar.', 'warning');
        return;
    }

    var btn = this;
    var resultsDiv = document.getElementById('searchCategoryResults');
    btn.disabled = true;
    resultsDiv.innerHTML = '<div class="list-group-item text-muted"><i class="ri-loader-4-line ri-spin me-1"></i>Buscando...</div>';
    resultsDiv.style.display = 'block';

    fetch('{{ route("admin.meli.categories.searchMeli") }}?q=' + encodeURIComponent(query))
        .then(r => r.json())
        .then(function(results) {
            btn.disabled = false;
            if (!Array.isArray(results) || results.length === 0) {
                resultsDiv.innerHTML = '<div class="list-group-item text-muted">Sin resultados</div>';
                return;
            }
            var html = '';
            results.forEach(function(cat) {
                var catId = cat.category_id || '';
                var catName = cat.category_name || cat.domain_name || '';
                var domainName = cat.domain_name || '';
                html += '<a href="#" class="list-group-item list-group-item-action py-1 px-2 search-cat-result" ' +
                    'data-id="' + catId + '" data-name="' + catName.replace(/"/g, '&quot;') + '">' +
                    '<strong>' + catId + '</strong> - ' + catName +
                    (domainName ? ' <small class="text-muted">(' + domainName + ')</small>' : '') +
                    '</a>';
            });
            resultsDiv.innerHTML = html;
        })
        .catch(function() {
            btn.disabled = false;
            resultsDiv.innerHTML = '<div class="list-group-item text-danger">Error consultando ML</div>';
        });
});

// Handle Enter key on search input
document.getElementById('searchCategoryML').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        document.getElementById('btnSearchCategory').click();
    }
});

// Click on search result
document.addEventListener('click', function(e) {
    var target = e.target.closest('.search-cat-result');
    if (target) {
        e.preventDefault();
        var catId = target.getAttribute('data-id');
        var catName = target.getAttribute('data-name');

        if (!catId) return;

        document.getElementById('ml_category_id_predicted').value = catId;
        document.getElementById('searchCategoryResults').style.display = 'none';
        document.getElementById('searchCategoryML').value = catId + ' - ' + catName;

        // Fetch the full category path to display and apply
        fetch('{{ route("admin.meli.categories.childrenMeli", ["categoryId" => "__ID__"]) }}'.replace('__ID__', catId))
            .then(r => r.json())
            .then(function(data) {
                var path = data.path_from_root || [];
                if (path.length > 0) {
                    applyPredictedCategory(catId, path);
                } else {
                    // Just try matching directly in cate_publ
                    var cateSelect = document.getElementById('cate_publ');
                    for (var i = 0; i < cateSelect.options.length; i++) {
                        if (cateSelect.options[i].value === catId) {
                            cateSelect.value = catId;
                            cateSelect.dispatchEvent(new Event('change'));
                            break;
                        }
                    }
                    document.getElementById('predictResult').innerHTML =
                        '<div class="alert alert-info alert-sm py-1 px-2 mb-0 mt-1" style="font-size:0.8rem;">' +
                            '<i class="ri-check-line me-1"></i>Categoría seleccionada: <strong>' + catId + '</strong> - ' + catName +
                        '</div>';
                }
            })
            .catch(function() {
                // Still set the value even if detail fetch fails
                document.getElementById('predictResult').innerHTML =
                    '<div class="alert alert-info alert-sm py-1 px-2 mb-0 mt-1" style="font-size:0.8rem;">' +
                        '<i class="ri-check-line me-1"></i>Categoría: <strong>' + catId + '</strong> - ' + catName +
                    '</div>';
            });
    }
});
</script>
@endpush