@extends('user.layout')
@includeIf('user.partials.rtl-style')

@section('content')
<div class="container-fluid px-4 py-5" style="background-color: #f8f9fa; min-height: 100vh;">

    <div class="card border-0 shadow-sm mx-auto" style="max-width: 800px; border-radius: 24px; background-color: #ffffff;">
        <div class="card-body p-5 text-center">

            <div class="mb-4">
                <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: 40px; object-fit: contain;">
                <h4 class="mt-4 fw-bold text-dark" style="font-size: 20px; letter-spacing: -0.5px;">
                    Inicia sesión en tu cuenta de MercadoLibre para continuar
                </h4>
            </div>

           <input type="hidden"
       name="codigo_temporal"
       id="codigo_temporal"
       value="{{ request('code', '') }}" style="visibility:hidden;">
            @if(session('success'))
                <div class="alert alert-success border-0 shadow-sm mx-auto mb-4" style="max-width: 500px; border-radius: 12px;">
                    {{ session('success') }}
                </div>
            @endif

       @if(session('error'))

    <div class="alert alert-danger border-0 shadow-sm mx-auto mb-4"
         style="max-width:500px; border-radius:12px;">

        @if(is_array(session('error')))

            <ul class="mb-0 ps-3">
                @foreach(session('error') as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>

        @else

            {{ session('error') }}

        @endif

    </div>

@endif

            @if($isConnected)

                <div class="mx-auto p-5 border text-center mb-4" style="max-width: 520px; border-radius: 20px; background-color: #ffffff; border-color: #f1f3f5 !important;">
                    
                    <div class="d-inline-flex align-items-center justify-content-center mb-4" style="width: 56px; height: 56px; background-color: #e8f5e9; color: #2e7d32; border-radius: 50%;">
                        <i class="fas fa-check" style="font-size: 24px;"></i>
                    </div>

                    <h3 class="fw-bold text-dark mb-2" style="font-size: 26px; letter-spacing: -0.5px;">
                        MercadoLibre conectado
                    </h3>
                    
                    <p class="text-muted mb-4" style="font-size: 14px;">
                        Tu cuenta está vinculada correctamente y lista para sincronización.
                    </p>

                    <div class="p-3 border d-flex align-items-center justify-content-between mb-4 text-start" style="border-radius: 14px; background-color: #f8f9fa; border-color: #eef1f4 !important;">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle d-flex align-items-center justify-content-center text-primary" style="width: 44px; height: 44px; background-color: #e3f2fd; color: #0d6efd !important;">
                                <i class="fas fa-user" style="font-size: 16px;"></i>
                            </div>
                            <div style="margin-left: 12px;">
                                <small class="text-muted d-block" style="font-size: 11px;">
                                    Cuenta vinculada: {{ $meliAccount->email ?? ($meliAccount->user_email ?? 'ID: ' . ($meliAccount->dealer_id ?? '-')) }}
                                </small>
                                <span class="fw-bold text-dark" style="font-size: 14px;">
                                    Cuenta MercadoLibre conectada
                                </span>
                            </div>
                        </div>
                        <span class="badge px-2 py-1 bg-success text-white" style="font-size: 11px; border-radius: 6px; background-color: #2e7d32 !important;">
                            Conectado
                        </span>
                    </div>

                    <div class="d-flex align-items-center justify-content-center">
                        
                        <a href="{{ $authUrl }}"
                           class="btn btn-outline-primary fw-medium px-4 d-inline-flex align-items-center justify-content-center"
                           style="height: 42px; border-radius: 10px; font-size: 14px; border-color: #0d6efd; color: #0d6efd; width: 48%;">
                            <i class="fas fa-sync-alt" style="margin-right: 8px;"></i> Reconnectar
                        </a>

                        <a href="{{ route('reda.integraciones.mercado_libre.user.disconnect') }}"
                           class="btn btn-outline-danger fw-medium px-4 d-inline-flex align-items-center justify-content-center"
                           style="height: 42px; border-radius: 10px; font-size: 14px; border-color: #dc3545; color: #dc3545; width: 48%; margin-left: 4%;">
                            <i class="fas fa-unlink" style="margin-right: 8px;"></i> Desconectar
                        </a>
                        
                    </div>

                </div>

            @else

                <div class="mx-auto p-5 border text-center mb-4" style="max-width: 520px; border-radius: 20px; background-color: #ffffff; border-color: #f1f3f5 !important;">
                    
                    <div class="d-inline-flex align-items-center justify-content-center mb-4" style="width: 56px; height: 56px; background-color: #e3f2fd; color: #0d6efd; border-radius: 50%;">
                        <i class="fas fa-plug" style="font-size: 24px;"></i>
                    </div>

                    <h3 class="fw-bold text-dark mb-2" style="font-size: 24px; letter-spacing: -0.5px;">
                        Conectar Mercado Libre
                    </h3>
                    
                    <p class="text-muted mb-4" style="font-size: 14px; line-height: 1.5;">
                        Debes conectar tu cuenta de Mercado Libre para comenzar a sincronizar publicaciones, categorías y vehículos de forma automática.
                    </p>

                    <a href="{{ $authUrl }}"
                       class="btn btn-primary fw-medium px-4 w-100 d-inline-flex align-items-center justify-content-center"
                       style="height: 46px; border-radius: 10px; font-size: 14px; background-color: #0d6efd; border-color: #0d6efd;">
                        <i class="fas fa-link" style="margin-right: 8px;"></i> Conectar Mercado Libre
                    </a>

                </div>

            @endif

            <div class="mt-4 pt-2 mx-auto" style="max-width: 540px;">
                <p class="text-muted mb-0" style="font-size: 12px; line-height: 1.4;">
                    <i class="fas fa-lock" style="margin-right: 4px; font-size: 11px;"></i> 
                    Al iniciar sesión, autorizas a Carmetric a acceder y gestionar tus publicaciones en MercadoLibre de acuerdo con nuestros <a href="#" class="text-decoration-underline text-primary">Términos y Condiciones</a>.
                </p>
            </div>

        </div>
    </div>

</div>

@endsection