@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.pub-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
}
.pub-thumb-placeholder {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
    border-radius: 0.375rem;
    color: #adb5bd;
    font-size: 1.25rem;
}
.status-badge { font-size: 0.75rem; }
.ml-id-link { font-family: 'Courier New', monospace; font-size: 0.8rem; }
.stat-card .card-body { padding: 1rem 1.25rem; cursor: pointer; }
.stat-card:hover { box-shadow: 0 0 0 2px rgba(13,110,253,.25); }
.stat-card.active-filter { box-shadow: 0 0 0 2px rgba(13,110,253,.5); }
</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">Publicaciones 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 active">Publicaciones ML</li>
                </ol>
            </div>
        </div>
    </div>
</div>

{{-- Stats Cards --}}
<div class="row">
    @foreach($stats as $key => $stat)
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card {{ request('estado') == ($key == 'all' ? '' : $key) ? 'active-filter' : '' }}"
             onclick="filterByEstado('{{ $key == 'all' ? '' : $key }}')">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-uppercase fw-medium text-muted mb-1" style="font-size:0.8rem">{{ $stat['label'] }}</p>
                        <h4 class="fs-20 fw-semibold mb-0">{{ number_format($stat['count']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-{{ $stat['color'] }}-subtle rounded fs-3">
                            <i class="ri-{{ $stat['icon'] }}-line text-{{ $stat['color'] }}"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Main Card --}}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex align-items-center">
                    <h5 class="card-title mb-0 flex-grow-1">
                        <i class="ri-store-2-line text-muted me-1"></i>
                        Gestión de Publicaciones
                    </h5>
                    <div class="flex-shrink-0 d-flex gap-2">
                        <form id="formImportML" action="{{ route('admin.meli.publications.importFromML') }}" method="POST" class="d-inline-flex align-items-center gap-2">
                            @csrf
                            <select name="limit" class="form-select form-select-sm" style="width:auto">
                                <option value="10" selected>10 publicaciones</option>
                                <option value="25">25 publicaciones</option>
                                <option value="50">50 publicaciones</option>
                                <option value="100">100 publicaciones</option>
                                <option value="200">200 publicaciones</option>
                                <option value="500">500 publicaciones</option>
                            </select>
                            <button type="button" class="btn btn-sm btn-outline-success" onclick="confirmImportML()">
                                <i class="ri-download-2-line me-1"></i> Importar de ML
                            </button>
                        </form>
                        <form id="formBulkSync" action="{{ route('admin.meli.publications.bulkSync') }}" method="POST" class="d-inline">
                            @csrf
                            <input type="hidden" name="type" value="both">
                            <button type="button" class="btn btn-sm btn-outline-info" onclick="confirmBulkSync()">
                                <i class="ri-refresh-line me-1"></i> Sync Masivo
                            </button>
                        </form>
                        <form id="formBulkRefreshCost" action="{{ route('admin.meli.publications.bulkRefreshCost') }}" method="POST" class="d-inline">
                            @csrf
                            <button type="button" class="btn btn-sm btn-outline-warning" onclick="confirmAction('formBulkRefreshCost', 'Actualizar Costos', 'Actualizando costos desde el sistema desktop...')">
                                <i class="ri-money-dollar-circle-line me-1"></i> Actualizar Costos
                            </button>
                        </form>
                        <a href="{{ route('admin.meli.publications.create') }}" class="btn btn-sm btn-primary">
                            <i class="ri-add-line me-1"></i> Nueva Publicación
                        </a>
                    </div>
                </div>
            </div>

            {{-- Filters --}}
            <div class="card-body border-top border-bottom py-3">
                <form method="GET" action="{{ route('admin.meli.publications.index') }}" class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label small">Estado</label>
                        <select name="estado" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Todos</option>
                            <option value="draft" {{ request('estado') == 'draft' ? 'selected' : '' }}>Borrador</option>
                            <option value="active" {{ request('estado') == 'active' ? 'selected' : '' }}>Activa</option>
                            <option value="paused" {{ request('estado') == 'paused' ? 'selected' : '' }}>Pausada</option>
                            <option value="closed" {{ request('estado') == 'closed' ? 'selected' : '' }}>Cerrada</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Categoría ML</label>
                        <select name="cate_publ" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Todas</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->ml_categor }}" {{ request('cate_publ') == $cat->ml_categor ? 'selected' : '' }}>
                                    {{ $cat->de_categor }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small">Buscar</label>
                        <div class="input-group input-group-sm">
                            <input type="text" name="search" class="form-control" placeholder="Código, título o ML ID..."
                                   value="{{ request('search') }}">
                            <button type="submit" class="btn btn-primary"><i class="ri-search-line"></i></button>
                        </div>
                    </div>
                    <div class="col-md-2">
                        @if(request()->hasAny(['estado', 'cate_publ', 'search']))
                            <a href="{{ route('admin.meli.publications.index') }}" class="btn btn-sm btn-outline-secondary w-100">
                                <i class="ri-close-line"></i> Limpiar
                            </a>
                        @endif
                    </div>
                </form>
            </div>

            {{-- Table --}}
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-striped align-middle table-nowrap mb-0">
                        <thead class="table-light">
                            <tr>
                                <th width="60"></th>
                                <th>Producto</th>
                                <th>Título ML</th>
                                <th width="120">ML ID</th>
                                <th width="100" class="text-end">Precio</th>
                                <th width="90" class="text-center">Margen</th>
                                <th width="70" class="text-center">Stock</th>
                                <th width="90" class="text-center">Estado</th>
                                <th width="70" class="text-center">Sync</th>
                                <th width="130">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($publications as $pub)
                            <tr>
                                <td>
                                    @if($pub->url_image)
                                        <img src="{{ $pub->url_image }}" alt="" class="pub-thumb">
                                    @else
                                        <div class="pub-thumb-placeholder">
                                            <i class="ri-image-line"></i>
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <strong>{{ $pub->co_arti }}</strong>
                                    @if($pub->stock)
                                        <br><small class="text-muted">{{ \Illuminate\Support\Str::limit($pub->stock->DESCRI ?? '', 30) }}</small>
                                    @endif
                                </td>
                                <td>
                                    <span title="{{ $pub->titu_publ }}">{{ \Illuminate\Support\Str::limit($pub->titu_publ, 40) }}</span>
                                </td>
                                <td>
                                    @if($pub->ml_id)
                                        @if($pub->ml_link)
                                            <a href="{{ $pub->ml_link }}" target="_blank" class="ml-id-link text-primary" title="Ver en ML">
                                                {{ $pub->ml_id }} <i class="ri-external-link-line"></i>
                                            </a>
                                        @else
                                            <span class="ml-id-link">{{ $pub->ml_id }}</span>
                                        @endif
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    ${{ number_format($pub->prec_publ, 2, ',', '.') }}
                                </td>
                                <td class="text-center">
                                    @if($pub->cost_snapshot > 0)
                                        @php $margin = $pub->computed_margin; @endphp
                                        @if($margin < 0)
                                            <span class="badge bg-danger-subtle text-danger" title="Costo: ${{ number_format($pub->cost_snapshot, 2, ',', '.') }}">
                                                {{ number_format($margin, 1, ',', '.') }}%
                                            </span>
                                        @elseif($margin < 15)
                                            <span class="badge bg-warning-subtle text-warning" title="Costo: ${{ number_format($pub->cost_snapshot, 2, ',', '.') }}">
                                                {{ number_format($margin, 1, ',', '.') }}%
                                            </span>
                                        @else
                                            <span class="badge bg-success-subtle text-success" title="Costo: ${{ number_format($pub->cost_snapshot, 2, ',', '.') }}">
                                                {{ number_format($margin, 1, ',', '.') }}%
                                            </span>
                                        @endif
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <span class="{{ $pub->stck_actu <= 0 ? 'text-danger fw-bold' : '' }}">
                                        {{ $pub->stck_actu }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    @switch($pub->estado)
                                        @case('active')
                                            <span class="badge bg-success status-badge">Activa</span>
                                            @break
                                        @case('paused')
                                            <span class="badge bg-warning status-badge">Pausada</span>
                                            @break
                                        @case('closed')
                                            <span class="badge bg-danger status-badge">Cerrada</span>
                                            @break
                                        @default
                                            <span class="badge bg-secondary status-badge">Borrador</span>
                                    @endswitch
                                </td>
                                <td class="text-center">
                                    @if($pub->isPublished())
                                        <div class="d-flex justify-content-center gap-1">
                                            <button type="button"
                                                class="btn btn-sm {{ $pub->sync_stock ? 'btn-soft-success' : 'btn-soft-secondary' }} py-0 px-1"
                                                title="Sync Stock: {{ $pub->sync_stock ? 'ON' : 'OFF' }}"
                                                onclick="toggleSync({{ $pub->id }}, 'stock', this)">
                                                <i class="ri-box-3-line" style="font-size:0.75rem"></i>
                                            </button>
                                            <button type="button"
                                                class="btn btn-sm {{ $pub->sync_price ? 'btn-soft-success' : 'btn-soft-secondary' }} py-0 px-1"
                                                title="Sync Precio: {{ $pub->sync_price ? 'ON' : 'OFF' }}"
                                                onclick="toggleSync({{ $pub->id }}, 'price', this)">
                                                <i class="ri-money-dollar-circle-line" style="font-size:0.75rem"></i>
                                            </button>
                                        </div>
                                    @else
                                        <i class="ri-time-line text-muted" title="Borrador"></i>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <a href="{{ route('admin.meli.publications.edit', $pub->id) }}" class="btn btn-sm btn-warning" title="Editar">
                                            <i class="ri-pencil-line"></i>
                                        </a>
                                        @if($pub->isPublished())
                                            <a href="{{ route('admin.meli.publications.images', $pub->id) }}" class="btn btn-sm btn-outline-info" title="Imágenes ML">
                                                <i class="ri-image-line"></i>
                                            </a>
                                        @endif
                                        @if(!$pub->isPublished())
                                            <form action="{{ route('admin.meli.publications.publish', $pub->id) }}" method="POST" class="d-inline publish-form">
                                                @csrf
                                                <button type="button" class="btn btn-sm btn-success" title="Publicar en ML"
                                                        onclick="confirmPublish(this.closest('form'))">
                                                    <i class="ri-upload-2-line"></i>
                                                </button>
                                            </form>
                                        @endif
                                        @if($pub->estado == 'active')
                                            <form action="{{ route('admin.meli.publications.pause', $pub->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-outline-warning" title="Pausar">
                                                    <i class="ri-pause-line"></i>
                                                </button>
                                            </form>
                                        @endif
                                        @if($pub->estado == 'paused')
                                            <form action="{{ route('admin.meli.publications.activate', $pub->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-outline-success" title="Activar">
                                                    <i class="ri-play-line"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="10">
                                    <div class="text-center py-4">
                                        <i class="ri-store-2-line d-block fs-1 text-muted mb-2"></i>
                                        <h6 class="text-muted">No hay publicaciones</h6>
                                        <a href="{{ route('admin.meli.publications.create') }}" class="btn btn-sm btn-primary mt-2">
                                            <i class="ri-add-line"></i> Crear Primera Publicación
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($publications->hasPages())
                    <div class="d-flex justify-content-between align-items-center p-3">
                        <div class="text-muted small">
                            Mostrando {{ $publications->firstItem() }} a {{ $publications->lastItem() }} de {{ $publications->total() }}
                        </div>
                        <div>{{ $publications->links() }}</div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
function filterByEstado(estado) {
    const url = new URL(window.location.href);
    if (estado) {
        url.searchParams.set('estado', estado);
    } else {
        url.searchParams.delete('estado');
    }
    window.location.href = url.toString();
}

function confirmImportML() {
    var label = document.querySelector('#formImportML select[name="limit"] option:checked').text;
    Swal.fire({
        title: 'Importar publicaciones de MercadoLibre',
        html: 'Se importarán las últimas <strong>' + label + '</strong> de la cuenta.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#0ab39c',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, importar',
        cancelButtonText: 'Cancelar'
    }).then(function(result) {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Importando publicaciones...',
                html: 'Consultando la API de MercadoLibre.<br>Esto puede tardar unos segundos.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: function() { Swal.showLoading(); }
            });
            document.getElementById('formImportML').submit();
        }
    });
}

function confirmBulkSync() {
    Swal.fire({
        title: 'Sincronización masiva',
        text: '¿Sincronizar stock y precios de todas las publicaciones activas con MercadoLibre?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#299cdb',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, sincronizar',
        cancelButtonText: 'Cancelar'
    }).then(function(result) {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Sincronizando...',
                html: 'Actualizando stock y precios en MercadoLibre.<br>Esto puede tardar unos segundos.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: function() { Swal.showLoading(); }
            });
            document.getElementById('formBulkSync').submit();
        }
    });
}

function toggleSync(pubId, type, btn) {
    var url = '{{ url("admin/meli/publications") }}/' + pubId + '/toggle-sync-' + type;
    fetch(url, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
    }).then(function(r) {
        var contentType = r.headers.get('content-type') || '';
        if (!contentType.includes('application/json')) {
            throw new Error('El servidor respondió HTML en vez de JSON.');
        }
        return r.json();
    }).then(function(data) {
        if (data.success) {
            var isOn = type === 'stock' ? data.sync_stock : data.sync_price;
            btn.className = 'btn btn-sm ' + (isOn ? 'btn-soft-success' : 'btn-soft-secondary') + ' py-0 px-1';
            btn.title = 'Sync ' + (type === 'stock' ? 'Stock' : 'Precio') + ': ' + (isOn ? 'ON' : 'OFF');
        } else {
            Swal.fire({ icon: 'error', title: 'Error', text: data.message, timer: 2500 });
        }
    }).catch(function(err) {
        Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'Error de conexión', timer: 2500 });
    });
}

function confirmPublish(form) {
    Swal.fire({
        title: '¿Publicar en MercadoLibre?',
        text: 'Esta acción enviará la publicación a MercadoLibre.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#0ab39c',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, publicar',
        cancelButtonText: 'Cancelar'
    }).then(function(result) {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Publicando...',
                html: 'Enviando publicación a MercadoLibre.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: function() { Swal.showLoading(); }
            });
            form.submit();
        }
    });
}
</script>
@endpush