@extends('reda-integraciones::layout_bridge')

@section('contenido_del_plugin')

@php
    $brands     = DB::table('user_meli_brands')->count();
    $models     = DB::table('user_meli_models')->count();
    $versions   = DB::table('user_meli_versions')->count();
    $states     = DB::table('user_states')->whereNotNull('meli_state_id')->count();
    $cities     = DB::table('user_cities')->whereNotNull('meli_city_id')->count();
    $categories = DB::table('user_meli_categories')->count();

    // Summing records including versions
    $totalRecords = $brands + $models + $versions + $states + $cities + $categories;

    $lastSync = collect([
        DB::table('user_meli_brands')->max('updated_at'),
        DB::table('user_meli_models')->max('updated_at'),
        DB::table('user_meli_versions')->max('updated_at'),
        DB::table('user_states')->whereNotNull('meli_state_id')->max('updated_at'),
        DB::table('user_cities')->whereNotNull('meli_city_id')->max('updated_at'),
        DB::table('user_meli_categories')->max('updated_at'),
    ])->filter()->sortDesc()->first();

    $status = $totalRecords > 0 ? 'Saludable' : 'Pendiente';

    // Count how many taxonomies actually have records synced out of 6
    $syncedCount = collect([
        $brands,
        $models,
        $versions,
        $states,
        $cities,
        $categories
    ])->filter(fn($c) => $c > 0)->count();

    // Map your custom table structure with specific icons/descriptions
    $taxonomiesList = [
        ['name' => 'Marcas',     'desc' => 'Marcas de vehículos',      'count' => $brands,     'icon' => 'fas fa-car'],
        ['name' => 'Modelos',    'desc' => 'Modelos de vehículos',     'count' => $models,     'icon' => 'fas fa-tags'],
        ['name' => 'Versiones',  'desc' => 'Versiones de vehículos',   'count' => $versions,   'icon' => 'fas fa-layer-group'],
        ['name' => 'Estados',    'desc' => 'Estados de Uruguay',       'count' => $states,     'icon' => 'fas fa-map-marker-alt'],
        ['name' => 'Ciudades',   'desc' => 'Ciudades de Uruguay',      'count' => $cities,     'icon' => 'fas fa-city'],
        ['name' => 'Categorías', 'desc' => 'Categorías de la plataforma','count' => $categories,'icon' => 'fas fa-folder'],
    ];
@endphp

<div class="container-fluid px-4 py-3" style="background-color: #f8f9fa;">

    <div class="card border-0 shadow-sm mb-4 bg-white" style="border-radius: 8px;">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
                <div class="d-flex align-items-center">
                    <img src="https://http2.mlstatic.com/frontend-assets/ml-web-navigation/ui-navigation/6.6.92/mercadolibre/logo__large_plus.png"
                         alt="Mercado Libre"
                         style="height: 45px; margin-right: 25px;">
                    <div>
                        <span class="text-uppercase text-muted fw-bold" style="font-size: 11px; letter-spacing: 0.5px;">Fuente de datos</span>
                        <h4 class="mb-1 fw-bold text-dark d-flex align-items-center" style="font-size: 18px;">
                            🇺🇾 MercadoLibre Uruguay
                        </h4>
                        <p class="mb-0 text-muted" style="font-size: 12px;">
                            Última Sincronización: {{ $lastSync ? \Carbon\Carbon::parse($lastSync)->format('d/m/Y H:i') : 'Nunca' }}
                        </p>
                    </div>
                </div>

                <div class="d-flex align-items-center">
                    <a href="{{ route('reda.integraciones.mercado_libre.admin.history') }}"
                       class="btn btn-outline-secondary btn-sm px-3 d-flex align-items-center"
                       style="font-size: 13px; border-radius: 6px; height: 38px;">
                        <i class="far fa-clock me-2" style="margin-right: 8px;"></i> Ver historial
                    </a>
                    
                    <a href="{{ route('reda.integraciones.mercado_libre.admin.sincronizar_todo') }}"
                       class="btn btn-primary btn-sm px-3 d-flex align-items-center ms-2" 
                       style="font-size: 13px; border-radius: 6px; background-color: #0d6efd; border-color: #0d6efd; height: 38px; margin-left: 8px;">
                        <i class="fas fa-sync-alt me-2" style="margin-right: 8px;"></i> Importar / Sincronizar
                    </a>
                </div>
            </div>

            <div class="row g-3 pt-2">
                <div class="col-md-3">
                    <div class="p-2">
                        <small class="text-muted d-block mb-1" style="font-size: 12px;">Estado general</small>
                        <span class="badge px-2 py-1" style="font-size: 13px; border-radius: 20px; background-color: {{ $totalRecords > 0 ? '#e8f5e9' : '#f5f5f5' }}; color: {{ $totalRecords > 0 ? '#2e7d32' : '#616161' }} !important;">
                            {{ $status }}
                        </span>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="p-2">
                        <small class="text-muted d-block mb-1" style="font-size: 12px;">Taxonomías</small>
                        <h5 class="mb-0 fw-bold text-dark" style="font-size: 16px;">{{ $syncedCount }} de 6</h5>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="p-2">
                        <small class="text-muted d-block mb-1" style="font-size: 12px;">Registros totales</small>
                        <h5 class="mb-0 fw-bold text-dark" style="font-size: 16px;">{{ number_format($totalRecords) }}</h5>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="p-2">
                        <small class="text-muted d-block mb-1" style="font-size: 12px;">Última sincronización</small>
                        <h5 class="mb-0 fw-bold text-dark" style="font-size: 16px;">
                            {{ $lastSync ? \Carbon\Carbon::parse($lastSync)->diffForHumans() : 'Nunca' }}
                        </h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4 bg-white" style="border-left: 4px solid #0d6efd; border-radius: 4px 8px 8px 4px;">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-start">
                <div class="d-flex">
                    <div class="mt-1 text-primary" style="margin-right: 1rem;">
                        <i class="fas fa-info-circle fa-lg"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1 text-dark" style="font-size: 15px;">¿Qué son las taxonomías?</h6>
                        <p class="mb-1 text-muted" style="font-size: 13px; line-height: 1.5;">
                            Son los catálogos oficiales de MercadoLibre que incluyen marcas, modelos, versiones, tipos de vehículo y más.
                        </p>
                        <p class="mb-0 text-muted" style="font-size: 13px; line-height: 1.5;">
                            Al mantenerlas sincronizadas, aseguras que tus publicaciones usen los datos correctos y sean compatibles con MercadoLibre.
                        </p>
                    </div>
                </div>
                <a href="#" class="text-decoration-none text-primary" style="font-size: 13px;">
                    Ver documentación <i class="fas fa-external-link-alt" style="font-size: 11px; margin-left: 4px;"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm bg-white" style="border-radius: 8px;">
        <div class="card-body p-4">
            <h5 class="fw-bold text-dark mb-4" style="font-size: 16px;">Estado de las taxonomías</h5>

            <div class="table-responsive">
                <table class="table align-middle mb-0" style="font-size: 14px;">
                    <thead>
                        <tr class="text-uppercase text-muted" style="font-size: 11px; letter-spacing: 0.5px; border-bottom: 2px solid #f1f3f5;">
                            <th class="pb-3 ps-0" style="width: 40%;">Taxonomía</th>
                            <th class="pb-3" style="width: 15%;">Registros</th>
                            <th class="pb-3" style="width: 25%;">Última sincronización</th>
                            <th class="pb-3" style="width: 10%;">Estado</th>
                            <th class="pb-3 text-end pe-0" style="width: 10%;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody style="border-top: none;">
                        @foreach($taxonomiesList as $item)
                        <tr style="border-bottom: 1px solid #f1f3f5;">
                            <td class="py-3 ps-0 d-flex align-items-center">
                                <div class="rounded-circle d-flex align-items-center justify-content-center bg-light text-primary" style="width: 36px; height: 36px; margin-right: 1rem;">
                                    <i class="{{ $item['icon'] }}"></i>
                                </div>
                                <div>
                                    <span class="fw-bold d-block text-dark">{{ $item['name'] }}</span>
                                    <small class="text-muted" style="font-size: 12px;">{{ $item['desc'] }}</small>
                                </div>
                            </td>
                            <td class="py-3 text-dark fw-medium">{{ number_format($item['count']) }}</td>
                            <td class="py-3 text-muted">
                                @if($lastSync && $item['count'] > 0)
                                    <span class="d-block text-dark" style="font-size: 13px;">{{ \Carbon\Carbon::parse($lastSync)->format('d/m/Y H:i') }}</span>
                                    <small style="font-size: 11px;">{{ \Carbon\Carbon::parse($lastSync)->diffForHumans() }}</small>
                                @else
                                    <span class="text-muted" style="font-size: 13px;">—</span>
                                @endif
                            </td>
                            <td class="py-3">
                                @if($item['count'] > 0)
                                    <span class="badge px-2 py-1 d-inline-flex align-items-center" style="font-size: 12px; border-radius: 4px; background-color: #e8f5e9; color: #2e7d32 !important; border: 1px solid #c8e6c9;">
                                        <i class="fas fa-check-circle" style="font-size: 10px; margin-right: 4px;"></i> Sincronizado
                                    </span>
                                @else
                                    <span class="badge px-2 py-1 d-inline-flex align-items-center" style="font-size: 12px; border-radius: 4px; background-color: #ffebee; color: #c62828 !important; border: 1px solid #ffcdd2;">
                                        <i class="fas fa-exclamation-circle" style="font-size: 10px; margin-right: 4px;"></i> Pendiente
                                    </span>
                                @endif
                            </td>
                            <td class="py-3 text-end pe-0">
                                <a href="{{ route(
                                    'reda.integraciones.mercado_libre.admin.details',
                                    strtolower(
                                        match($item['name']) {
                                            'Marcas' => 'brands',
                                            'Modelos' => 'models',
                                            'Versiones' => 'versions',
                                            'Estados' => 'states',
                                            'Ciudades' => 'cities',
                                            'Categorías' => 'categories',
                                            default => 'brands'
                                        }
                                    )
                                ) }}"
                                class="btn btn-outline-secondary btn-sm px-2 text-dark"
                                style="font-size: 12px; border-radius: 4px; border-color: #dee2e6;">
                                    Ver detalles
                                    <i class="fas fa-chevron-right" style="font-size: 10px; color: #adb5bd; margin-left: 4px;"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>

</div>
@endsection