@extends('admin.layouts.app')

@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">MarketPlace - Dashboard</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">MarketPlace</li>
                </ol>
            </div>
        </div>
    </div>
</div>

{{-- Row 1: Main Stat Cards --}}
<div class="row">
    {{-- Publicaciones Activas --}}
    <div class="col-xl-3 col-md-6">
        <a href="{{ route('admin.meli.publications.index') }}" class="text-decoration-none">
            <div class="card card-animate" style="cursor:pointer">
                <div class="card-body">
                    <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Publicaciones Activas</p>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-20 fw-semibold ff-secondary mb-4">
                                {{ number_format($activePublications) }}
                                <span class="fs-13 fw-normal text-muted">/ {{ number_format($totalPublications) }}</span>
                            </h4>
                            <span class="badge bg-warning-subtle text-warning me-1">{{ $pausedPublications }} pausadas</span>
                            <span class="badge bg-secondary-subtle text-secondary">{{ $closedPublications }} cerradas</span>
                        </div>
                        <div class="avatar-sm">
                            <span class="avatar-title bg-primary-subtle rounded fs-3">
                                <i class="ri-shopping-bag-3-line text-primary"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    {{-- Ordenes (30d) --}}
    <div class="col-xl-3 col-md-6">
        <a href="{{ route('admin.meli.orders.index') }}" class="text-decoration-none">
            <div class="card card-animate" style="cursor:pointer">
                <div class="card-body">
                    <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Ordenes (30 dias)</p>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-20 fw-semibold ff-secondary mb-4">{{ number_format($ordersLast30) }}</h4>
                            <span class="text-muted fs-13">
                                ${{ number_format($ordersTotalAmount, 2, ',', '.') }} facturado
                            </span>
                        </div>
                        <div class="avatar-sm">
                            <span class="avatar-title bg-success-subtle rounded fs-3">
                                <i class="ri-shopping-cart-2-line text-success"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    {{-- Cobrado (30d) --}}
    <div class="col-xl-3 col-md-6">
        <a href="{{ route('admin.meli.payments.index') }}" class="text-decoration-none">
            <div class="card card-animate" style="cursor:pointer">
                <div class="card-body">
                    <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Cobrado (30 dias)</p>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-20 fw-semibold ff-secondary mb-4">${{ number_format($paymentsApproved, 2, ',', '.') }}</h4>
                            <span class="text-muted fs-13">
                                {{ $paymentsLast30 }} pagos
                                @if($paymentsFee > 0)
                                    | Fee: ${{ number_format($paymentsFee, 0, ',', '.') }}
                                @endif
                            </span>
                        </div>
                        <div class="avatar-sm">
                            <span class="avatar-title bg-info-subtle rounded fs-3">
                                <i class="ri-money-dollar-circle-line text-info"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>

    {{-- Preguntas Pendientes --}}
    <div class="col-xl-3 col-md-6">
        <a href="{{ route('admin.meli.questions.index') }}" class="text-decoration-none">
            <div class="card card-animate" style="cursor:pointer">
                <div class="card-body">
                    <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Preguntas Pendientes</p>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-20 fw-semibold ff-secondary mb-4 {{ $pendingQuestions > 0 ? 'text-warning' : '' }}">{{ number_format($pendingQuestions) }}</h4>
                            <span class="text-muted fs-13">de {{ number_format($totalQuestions) }} totales</span>
                        </div>
                        <div class="avatar-sm">
                            <span class="avatar-title bg-warning-subtle rounded fs-3">
                                <i class="ri-question-answer-line text-warning"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

{{-- Row 2: Margin Summary --}}
<div class="row">
    <div class="col-xl-4 col-md-4">
        <div class="card card-animate">
            <div class="card-body text-center">
                <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Margen Promedio</p>
                @php
                    $marginColor = $avgMargin < 0 ? 'danger' : ($avgMargin < 15 ? 'warning' : 'success');
                @endphp
                <h2 class="fw-bold text-{{ $marginColor }} mb-1">{{ number_format($avgMargin, 1, ',', '.') }}%</h2>
                <small class="text-muted">
                    Sobre publicaciones con costo cargado
                </small>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-4">
        <div class="card card-animate">
            <div class="card-body text-center">
                <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Publicaciones con Perdida</p>
                <h2 class="fw-bold {{ $underpricedCount > 0 ? 'text-danger' : 'text-muted' }} mb-1">{{ number_format($underpricedCount) }}</h2>
                <small class="text-muted">
                    Margen negativo (precio &lt; costo)
                </small>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-4">
        <div class="card card-animate">
            <div class="card-body text-center">
                <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Margen Saludable (&gt;15%)</p>
                <h2 class="fw-bold text-success mb-1">{{ number_format($healthyMarginCount) }}</h2>
                <small class="text-muted">
                    Publicaciones con buen margen
                </small>
            </div>
        </div>
    </div>
</div>

{{-- Row 3: Top Sellers + Margin Distribution --}}
<div class="row">
    {{-- Top 5 by Sales --}}
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h5 class="card-title mb-0 flex-grow-1">Top 5 Publicaciones por Ventas</h5>
                <a href="{{ route('admin.meli.publications.index', ['sort' => 'cant_vend', 'dir' => 'desc']) }}" class="btn btn-sm btn-outline-primary">Ver ranking</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:40px">#</th>
                                <th>Producto</th>
                                <th class="text-end">Vendidos</th>
                                <th class="text-end">Precio ML</th>
                                <th class="text-end">Margen</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($topSellers as $index => $pub)
                            <tr>
                                <td class="fw-semibold text-muted">{{ $index + 1 }}</td>
                                <td>
                                    <a href="{{ route('admin.meli.publications.edit', $pub->id) }}" class="text-body" title="{{ $pub->titu_publ }}">
                                        <div class="text-truncate" style="max-width: 280px;">{{ $pub->titu_publ }}</div>
                                    </a>
                                    <small class="text-muted">{{ $pub->ml_id }}</small>
                                </td>
                                <td class="text-end fw-semibold">{{ number_format($pub->cant_vend, 0, ',', '.') }}</td>
                                <td class="text-end">${{ number_format($pub->prec_publ, 2, ',', '.') }}</td>
                                <td class="text-end">
                                    @if($pub->cost_snapshot > 0)
                                        @php
                                            $m = floatval($pub->computed_margin);
                                            $mColor = $m < 0 ? 'danger' : ($m < 15 ? 'warning' : 'success');
                                        @endphp
                                        <span class="badge bg-{{ $mColor }}-subtle text-{{ $mColor }}">{{ number_format($m, 1, ',', '.') }}%</span>
                                    @else
                                        <span class="text-muted">&mdash;</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-4">
                                    <i class="ri-bar-chart-box-line d-block fs-2 mb-1"></i>
                                    Sin ventas registradas
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Margin Distribution --}}
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Distribucion de Margen</h5>
            </div>
            <div class="card-body">
                @php
                    $marginTotal = $underpricedCount + $lowMarginCount + $healthyMarginCount;
                    $pctNeg     = $marginTotal > 0 ? round(($underpricedCount / $marginTotal) * 100, 1) : 0;
                    $pctLow     = $marginTotal > 0 ? round(($lowMarginCount / $marginTotal) * 100, 1) : 0;
                    $pctHealthy = $marginTotal > 0 ? round(($healthyMarginCount / $marginTotal) * 100, 1) : 0;
                @endphp

                @if($marginTotal > 0)
                    {{-- Negative margin --}}
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted fs-13">
                                <i class="ri-arrow-down-line text-danger me-1"></i>Perdida (margen &lt; 0%)
                            </span>
                            <span class="fw-semibold">{{ $underpricedCount }} <small class="text-muted">({{ $pctNeg }}%)</small></span>
                        </div>
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ $pctNeg }}%"></div>
                        </div>
                    </div>

                    {{-- Low margin --}}
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted fs-13">
                                <i class="ri-arrow-right-line text-warning me-1"></i>Bajo (0% - 15%)
                            </span>
                            <span class="fw-semibold">{{ $lowMarginCount }} <small class="text-muted">({{ $pctLow }}%)</small></span>
                        </div>
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: {{ $pctLow }}%"></div>
                        </div>
                    </div>

                    {{-- Healthy margin --}}
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted fs-13">
                                <i class="ri-arrow-up-line text-success me-1"></i>Saludable (&ge; 15%)
                            </span>
                            <span class="fw-semibold">{{ $healthyMarginCount }} <small class="text-muted">({{ $pctHealthy }}%)</small></span>
                        </div>
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-success" role="progressbar" style="width: {{ $pctHealthy }}%"></div>
                        </div>
                    </div>

                    <div class="text-center mt-4">
                        <small class="text-muted">{{ $marginTotal }} publicaciones con costo cargado de {{ $totalPublications }} totales</small>
                    </div>
                @else
                    <div class="text-center text-muted py-4">
                        <i class="ri-pie-chart-2-line d-block fs-2 mb-1"></i>
                        Sin datos de costos. Use "Actualizar Costos" para cargar.
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Row 4: Quick Actions --}}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Acciones Rapidas</h5>
            </div>
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2">
                    <button type="button" class="btn btn-outline-info" onclick="dashboardAction('{{ route('admin.meli.publications.bulkRefreshCost') }}', 'Actualizar Costos Masivo', 'Esto recalculara el costo y margen de todas las publicaciones activas.')">
                        <i class="ri-money-dollar-box-line me-1"></i> Actualizar Costos
                    </button>
                    <button type="button" class="btn btn-outline-primary" onclick="dashboardAction('{{ route('admin.meli.publications.bulkSync') }}?type=stock', 'Sync Stock Masivo', 'Esto sincronizara el stock de todas las publicaciones activas con ML.')">
                        <i class="ri-stack-line me-1"></i> Sync Stock
                    </button>
                    <button type="button" class="btn btn-outline-primary" onclick="dashboardAction('{{ route('admin.meli.publications.bulkSync') }}?type=price', 'Sync Precios Masivo', 'Esto sincronizara los precios de todas las publicaciones activas con ML.')">
                        <i class="ri-price-tag-3-line me-1"></i> Sync Precios
                    </button>
                    <button type="button" class="btn btn-outline-success" onclick="dashboardAction('{{ route('admin.meli.orders.fetchNew') }}', 'Importar Ordenes', 'Esto importara las ordenes nuevas desde MercadoLibre.')">
                        <i class="ri-download-2-line me-1"></i> Importar Ordenes
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Row 5: Recent Orders + Pending Questions --}}
<div class="row">
    {{-- Ultimas Ventas --}}
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h5 class="card-title mb-0 flex-grow-1">Ultimas Ventas</h5>
                <a href="{{ route('admin.meli.orders.index') }}" class="btn btn-sm btn-outline-primary">Ver todas</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <tbody>
                            @forelse($recentOrders as $order)
                            <tr>
                                <td>
                                    <strong>#{{ $order->order_id }}</strong><br>
                                    <small class="text-muted">{{ $order->buyer_nik ?? 'N/A' }}</small>
                                </td>
                                <td>
                                    {{ $order->mla_nomb }} {{ $order->mla_apel }}
                                </td>
                                <td class="text-end">
                                    <strong>${{ number_format($order->o_tot_amou, 0, ',', '.') }}</strong>
                                </td>
                                <td>
                                    <span class="badge bg-{{ $order->o_status == 'paid' ? 'success' : ($order->o_status == 'shipped' ? 'info' : 'secondary') }}">
                                        {{ $order->o_status ?? 'N/A' }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    <i class="ri-shopping-cart-2-line d-block fs-2 mb-1"></i>
                                    No hay ventas registradas
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Preguntas Sin Responder --}}
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h5 class="card-title mb-0 flex-grow-1">Preguntas Sin Responder</h5>
                <a href="{{ route('admin.meli.questions.index') }}" class="btn btn-sm btn-outline-warning">Ver todas</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <tbody>
                            @forelse($recentQuestions as $question)
                            <tr>
                                <td>
                                    <div class="text-truncate" style="max-width: 300px;">
                                        "{{ $question->pregunta }}"
                                    </div>
                                    <small class="text-muted">
                                        {{ $question->nick_name ?? 'Anonimo' }} —
                                        {{ $question->titu_publ ?? '' }} —
                                        {{ $question->created_at ? $question->created_at->diffForHumans() : '' }}
                                    </small>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td class="text-center text-muted py-4">
                                    <i class="ri-question-answer-line d-block fs-2 mb-1"></i>
                                    No hay preguntas pendientes
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
function dashboardAction(url, title, text) {
    Swal.fire({
        title: title,
        text: text,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Si, ejecutar',
        cancelButtonText: 'Cancelar',
        confirmButtonColor: '#405189',
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Procesando...',
                html: 'Esto puede demorar unos segundos.<br>No cierre esta ventana.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => { Swal.showLoading(); }
            });

            fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
            })
            .then(response => {
                const contentType = response.headers.get('content-type') || '';
                if (contentType.includes('application/json')) {
                    return response.json();
                }
                throw new Error('Respuesta inesperada del servidor. Verifique la conexion con ML.');
            })
            .then(data => {
                Swal.fire({
                    title: data.success ? 'Listo' : 'Error',
                    text: data.message || (data.success ? 'Operacion completada.' : 'Error al procesar.'),
                    icon: data.success ? 'success' : 'error',
                    confirmButtonColor: '#405189',
                }).then(() => {
                    if (data.success) location.reload();
                });
            })
            .catch(error => {
                Swal.fire({
                    title: 'Error',
                    text: error.message || 'Error de conexion. Intente nuevamente.',
                    icon: 'error',
                    confirmButtonColor: '#405189',
                });
            });
        }
    });
}
</script>
@endpush