@extends('layouts.app')
@section('title', 'Resultados de Búsqueda - Reembolsos')
@push('styles')
    <link href="{{ asset('css/refund.css') }}" rel="stylesheet">
    <style>
        .country-flag {
            width: 24px;
            height: auto;
            margin-right: 8px;
        }
        .document-row:hover {
            background-color: #f8f9fa;
        }
        .badge-status {
            font-size: 0.75rem;
        }
        .search-summary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
        }
        .bin-country-info {
            max-width: 200px;
            font-size: 0.8rem;
        }
        .bin-button-container {
            min-width: 200px;
        }
    </style>
@endpush
@section('content')
<div id="layout-wrapper">
    @include('layouts.partials.header')
    @include('layouts.partials.sidebar')
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <!-- Page Title -->
                <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 font-size-18">Resultados de Búsqueda</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('stats.index') }}">Dashboard</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('refund.index') }}">Reembolsos</a></li>
                                    <li class="breadcrumb-item active">Resultados</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Header con información de búsqueda -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card search-summary">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h5 class="mb-1 text-white">
                                            <i class="bx bx-search-alt me-2"></i>
                                            Email: <strong>{{ $email }}</strong>
                                        </h5>
                                        <p class="mb-0 text-white-50">
                                            Encontrados {{ array_sum(array_map(function($r) { return count($r['documents']); }, $results)) }} documentos 
                                            en {{ count($results) }} países
                                        </p>
                                    </div>
                                    <div>
                                        <a href="{{ route('refund.index') }}" class="btn btn-light">
                                            <i class="bx bx-arrow-back me-2"></i>
                                            Nueva Búsqueda
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Resultados por país -->
                @if(count($results) > 0)
                    @foreach($results as $countryCode => $countryData)
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="d-flex align-items-center">
                                        <img src="{{ asset('flags/' . strtolower($countryCode) . '.png') }}" 
                                             alt="{{ $countryCode }}" 
                                             class="country-flag"
                                             onerror="this.style.display='none'">
                                        <h5 class="mb-0">
                                            {{ $countryData['country_name'] }} ({{ $countryCode }})
                                        </h5>
                                        <span class="badge bg-primary ms-2">
                                            {{ count($countryData['documents']) }} documentos
                                        </span>
                                    </div>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>ID</th>
                                                    <th>BOT</th>
                                                    <th>Cliente</th>
                                                    <th>Monto</th>
                                                    <th>Gateway</th>
                                                    <th width="250">BIN CARD</th>
                                                    <th>Estado</th>
                                                    <th>Fecha</th>
                                                    <th width="120">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($countryData['documents'] as $document)
                                                @php
                                                    // Intentar múltiples formas de obtener los datos
                                                    $data = json_decode($document->data, true);
                                                    
                                                    // Obtener email
                                                    $email = $data['email'] ?? 'N/A';
                                                    
                                                    // Obtener nombres - probar diferentes formatos
                                                    $firstName = $data['first_name'] ?? $data['firstName'] ?? $data['name'] ?? 'N/A';
                                                    $lastName = $data['last_name'] ?? $data['lastName'] ?? $data['surname'] ?? '';
                                                    
                                                    // Si no hay first_name, intentar separar el campo name
                                                    if ($firstName === 'N/A' && isset($data['name'])) {
                                                        $nameParts = explode(' ', $data['name'], 2);
                                                        $firstName = $nameParts[0] ?? 'N/A';
                                                        $lastName = $nameParts[1] ?? '';
                                                    }
                                                    
                                                    $fullName = trim($firstName . ' ' . $lastName);
                                                    if ($fullName === 'N/A' || $fullName === '') {
                                                        $fullName = 'Nombre no disponible';
                                                    }
                                                    
                                                    // Obtener monto del campo payment JSON
                                                    $payment = json_decode($document->payment, true);
                                                    $amount = '0.00';
                                                    
                                                    if (is_array($payment)) {
                                                        // Intentar diferentes ubicaciones del monto
                                                        $amount = $payment['amount'] ?? 
                                                                 $payment['amount_total'] ?? 
                                                                 $payment['amount_paid'] ?? 
                                                                 ($payment['amount_received'] ?? '0.00');
                                                        
                                                        // Si está en centavos, convertir a dólares
                                                        if (is_numeric($amount) && $amount > 1000) {
                                                            $amount = $amount / 100;
                                                        }
                                                    }
                                                    
                                                    $amount = is_numeric($amount) ? number_format(floatval($amount), 2) : '0.00';
                                                @endphp
                                                <tr class="document-row">
                                                    <td>
                                                        <span class="badge bg-secondary">{{ $document->id }}</span>
                                                    </td>
                                                    <td>
                                                        @if($document->bot_status)
                                                            @php
                                                                $statusColors = [
                                                                    'IN_QUEUE' => 'warning',
                                                                    'PROCESSING' => 'info', 
                                                                    'COMPLETED' => 'success',
                                                                    'FAILED' => 'danger',
                                                                    'WAITING' => 'primary'
                                                                ];
                                                                $color = $statusColors[$document->bot_status] ?? 'secondary';
                                                            @endphp
                                                            <span class="badge bg-{{ $color }} badge-status">
                                                                {{ $document->bot_status }}
                                                            </span>
                                                        @else
                                                            <span class="badge bg-light text-dark badge-status">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <strong>{{ $fullName }}</strong>
                                                            <br>
                                                            <small class="text-muted">{{ $email }}</small>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="fw-bold text-success">
                                                            ${{ $amount }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <span class="badge bg-info badge-status">{{ $document->payment_gateway ?? 'N/A' }}</span>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center gap-2 bin-button-container">
                                                            <span class="text-muted">{{ $document->bin_card ?? 'N/A' }}</span>
                                                            @if($document->bin_card)
                                                                <button type="button" 
                                                                        class="btn btn-sm btn-outline-info" 
                                                                        onclick="getBinCountry('{{ $document->bin_card }}', {{ $document->id }})"
                                                                        id="bin-btn-{{ $document->id }}">
                                                                    <i class="bx bx-globe me-1"></i>
                                                                    Get Country
                                                                </button>
                                                                <div id="country-info-{{ $document->id }}" class="bin-country-info text-success fw-bold" style="display: none;"></div>
                                                            @endif
                                                        </div>
                                                    </td>
                                                    <td>
                                                        @if($document->refund)
                                                            <span class="badge bg-warning badge-status">Refund</span>
                                                        @elseif($document->status === 'PAID')
                                                            <span class="badge bg-success badge-status">Pagado</span>
                                                        @else
                                                            <span class="badge bg-warning badge-status">{{ ucfirst($document->status) }}</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <small>{{ \Carbon\Carbon::parse($document->created_at)->format('d/m/Y H:i') }}</small>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex gap-1 flex-wrap">
                                                            <!-- Botón Editar - siempre visible -->
                                                            <a target="_blank" href="{{ route('refund.edit', ['country' => $countryCode, 'id' => $document->id]) }}"
                                                               class="btn btn-sm btn-outline-primary">
                                                                <i class="bx bx-edit me-1"></i>
                                                                Editar
                                                            </a>
                                                            
                                                            <!-- Botón Reembolsar - condicionado -->
                                                            @if($document->refund)
                                                                <span class="badge bg-secondary">
                                                                    <i class="bx bx-check me-1"></i>
                                                                    Reembolsado
                                                                </span>
                                                            @elseif(is_null($document->parent_id))
                                                                <button type="button" 
                                                                        class="btn btn-sm btn-outline-danger" 
                                                                        onclick="showRefundModal('{{ $countryCode }}', '{{ $document->id }}', '{{ $amount }}', '{{ $fullName }}')">
                                                                    <i class="bx bx-undo me-1"></i>
                                                                    Reembolsar
                                                                </button>
                                                            @else
                                                                <span class="badge bg-info">
                                                                    <i class="bx bx-info-circle me-1"></i>
                                                                    Documento relacionado
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @else
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body text-center py-5">
                                    <i class="bx bx-search-alt display-4 text-muted mb-3"></i>
                                    <h5 class="text-muted">No se encontraron documentos</h5>
                                    <p class="text-muted mb-4">
                                        No se encontraron documentos pagados para el email <strong>{{ $email }}</strong> 
                                        en los países seleccionados.
                                    </p>
                                    <a href="{{ route('refund.index') }}" class="btn btn-primary">
                                        <i class="bx bx-arrow-back me-2"></i>
                                        Realizar nueva búsqueda
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal de Reembolso Individual -->
<div class="modal fade" id="refundModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bx bx-undo me-2"></i>
                    Procesar Reembolso
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="refund-details"></div>
                <div class="mb-3">
                    <label for="refund-amount" class="form-label">Monto a Reembolsar</label>
                    <div class="input-group">
                        <span class="input-group-text">$</span>
                        <input type="number" 
                               class="form-control" 
                               id="refund-amount" 
                               min="0.01" 
                               step="0.01" 
                               required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" onclick="processRefund()">
                    <i class="bx bx-check me-2"></i>
                    Procesar Reembolso
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let currentRefundData = {};

function showRefundModal(countryCode, documentId, amount, customerName) {
    currentRefundData = {
        country_code: countryCode,
        document_id: documentId,
        original_amount: parseFloat(amount)
    };
    
    document.getElementById('refund-details').innerHTML = `
        <div class="alert alert-info">
            <strong>País:</strong> ${countryCode}<br>
            <strong>Documento ID:</strong> ${documentId}<br>
            <strong>Cliente:</strong> ${customerName}<br>
            <strong>Monto Original:</strong> $${parseFloat(amount).toFixed(2)}
        </div>
    `;
    
    document.getElementById('refund-amount').value = amount;
    document.getElementById('refund-amount').max = amount;
    
    const modal = new bootstrap.Modal(document.getElementById('refundModal'));
    modal.show();
}

function processRefund() {
    const amount = parseFloat(document.getElementById('refund-amount').value);
    
    if (!amount || amount <= 0) {
        alert('Por favor ingresa un monto válido');
        return;
    }
    
    if (amount > currentRefundData.original_amount) {
        alert('El monto no puede ser mayor al monto original');
        return;
    }
    
    const formData = new FormData();
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    formData.append('country_code', currentRefundData.country_code);
    formData.append('document_id', currentRefundData.document_id);
    formData.append('amount_to_refund', amount);
    
    // Mostrar información detallada de la petición
    console.log('=== REFUND DEBUG START ===');
    console.log('Country Code:', currentRefundData.country_code);
    console.log('Document ID:', currentRefundData.document_id);
    console.log('Amount:', amount);
    console.log('URL:', '{{ route("refund.process") }}');
    console.log('FormData contents:');
    for (let [key, value] of formData.entries()) {
        console.log(`  ${key}: ${value}`);
    }
    
    fetch('{{ route("refund.process") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers);
        console.log('Response ok:', response.ok);
        
        // Verificar si la respuesta es exitosa
        if (!response.ok) {
            // Intentar leer el cuerpo de la respuesta para más información
            return response.text().then(text => {
                console.error('Error response body:', text);
                throw new Error(`HTTP error! status: ${response.status}, body: ${text.substring(0, 200)}`);
            });
        }
        
        // Verificar si la respuesta es JSON
        const contentType = response.headers.get("content-type");
        console.log('Content-Type:', contentType);
        
        if (!contentType || !contentType.includes("application/json")) {
            return response.text().then(text => {
                console.error('Non-JSON response:', text);
                throw new Error("La respuesta no es JSON válido: " + text.substring(0, 200));
            });
        }
        
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data);
        console.log('=== REFUND DEBUG END ===');
        // Cerrar el modal
        const modal = bootstrap.Modal.getInstance(document.getElementById('refundModal'));
        if (modal) {
            modal.hide();
        }
        
        if (data.success) {
            alert('Reembolso procesado exitosamente');
            location.reload();
        } else {
            // Mostrar más detalles del error incluyendo el dominio
            let errorMsg = 'Error: ' + (data.message || 'Error desconocido');
            if (data.api_url) {
                errorMsg += '\n\nDominio: ' + data.api_url;
            }
            if (data.country_code) {
                errorMsg += '\nPaís: ' + data.country_code;
            }
            alert(errorMsg);
        }
    })
    .catch(error => {
        // Cerrar el modal en caso de error
        const modal = bootstrap.Modal.getInstance(document.getElementById('refundModal'));
        if (modal) {
            modal.hide();
        }
        
        console.error('Error:', error);
        // Incluir más información en el error
        let errorMsg = 'Error de conexión: ' + error.message;
        errorMsg += '\n\nPaís: ' + currentRefundData.country_code;
        errorMsg += '\nDocument ID: ' + currentRefundData.document_id;
        @php
        $countries = config('countries');
        @endphp
        @foreach($countries as $code => $country)
        if (currentRefundData.country_code === '{{ $code }}') {
            errorMsg += '\nDominio destino: {{ $country["url"] }}';
        }
        @endforeach
        alert(errorMsg);
    });
}

// Función para obtener información del país del BIN
function getBinCountry(binCard, documentId) {
    const button = document.getElementById(`bin-btn-${documentId}`);
    const countryInfo = document.getElementById(`country-info-${documentId}`);
    
    // Limpiar el BIN - solo números
    const cleanBin = binCard.replace(/\D/g, '');
    
    // Validar que el BIN tenga al menos 6 dígitos
    if (!cleanBin || cleanBin.length < 6) {
        alert('BIN Card debe tener al menos 6 dígitos válidos');
        return;
    }
    
    // Tomar solo los primeros 6-8 dígitos para la consulta (BinList acepta hasta 8)
    const bin = cleanBin.substring(0, Math.min(8, cleanBin.length));
    
    console.log(`=== BIN LOOKUP DEBUG ===`);
    console.log(`Original BIN Card: ${binCard}`);
    console.log(`Cleaned BIN: ${cleanBin}`);
    console.log(`BIN for query: ${bin}`);
    console.log(`URL to query: https://lookup.binlist.net/${bin}`);
    
    // Cambiar el estado del botón
    button.disabled = true;
    button.innerHTML = '<i class="bx bx-loader-alt bx-spin me-1"></i>Consultando...';
    
    // Ocultar información previa
    countryInfo.style.display = 'none';
    
    // Realizar la consulta a través de nuestro endpoint proxy
    fetch('{{ route("refund.bin.info") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            bin: bin
        })
    })
        .then(response => {
            console.log('Response status:', response.status);
            
            if (!response.ok) {
                return response.json().then(errorData => {
                    if (errorData.error === 'BIN_NOT_FOUND') {
                        throw new Error('BIN_NOT_FOUND');
                    } else if (errorData.error === 'RATE_LIMIT') {
                        throw new Error('RATE_LIMIT');
                    } else {
                        throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
                    }
                });
            }
            return response.json();
        })
        .then(responseData => {
            if (!responseData.success) {
                throw new Error(responseData.message || 'Error en la respuesta del servidor');
            }
            
            const data = responseData.data;
            console.log('=== BINLIST RESPONSE ===');
            console.log('Full response:', JSON.stringify(data, null, 2));
            console.log('Country info:', data.country);
            console.log('Bank info:', data.bank);
            console.log('Scheme:', data.scheme);
            console.log('Type:', data.type);
            console.log('Brand:', data.brand);
            console.log('========================');
            
            // Extraer información del país
            const country = data.country;
            
            let infoHtml = '';
            
            // Mostrar solo información del país
            if (country) {
                const countryName = country.name || 'Desconocido';
                const countryCode = country.alpha2;
                const emoji = country.emoji;
                
                // Usar emoji si está disponible, sino usar bandera de imagen
                if (emoji) {
                    infoHtml += `${emoji} `;
                } else if (countryCode) {
                    infoHtml += `<img src="https://flagcdn.com/16x12/${countryCode.toLowerCase()}.png" alt="${countryCode}" class="me-1" onerror="this.style.display='none'">`;
                }
                
                infoHtml += `<strong>${countryName}</strong>`;
                
                if (countryCode) {
                    infoHtml += ` (${countryCode})`;
                }
            } else {
                infoHtml += '<strong class="text-warning">País no disponible</strong>';
            }
            
            countryInfo.innerHTML = infoHtml;
            countryInfo.style.display = 'block';
            
            // Cambiar el botón a éxito
            button.innerHTML = '<i class="bx bx-check me-1"></i>Consultado';
            button.classList.remove('btn-outline-info');
            button.classList.add('btn-outline-success');
            
        })
        .catch(error => {
            console.error('Error consultando BinList:', error);
            
            let errorMessage = '';
            let errorClass = 'text-danger';
            
            if (error.message === 'BIN_NOT_FOUND') {
                errorMessage = '⚠️ BIN no encontrado';
                errorClass = 'text-warning';
            } else if (error.message === 'RATE_LIMIT') {
                errorMessage = '⏱️ Límite de consultas excedido';
                errorClass = 'text-warning';
            } else if (error.message.includes('Failed to fetch')) {
                errorMessage = '🔗 Error de conexión con el servidor';
                errorClass = 'text-danger';
            } else {
                errorMessage = '❌ Error al consultar';
            }
            
            countryInfo.innerHTML = `<small class="${errorClass}">${errorMessage}</small>`;
            countryInfo.style.display = 'block';
            
            // Restaurar el botón
            button.disabled = false;
            button.innerHTML = '<i class="bx bx-globe me-1"></i>Get Country';
            
            // Mostrar alerta con más detalles solo para errores graves
            if (error.message === 'RATE_LIMIT') {
                console.warn('Rate limit reached for BinList API');
            } else if (error.message === 'BIN_NOT_FOUND') {
                console.info(`BIN ${bin} not found in BinList database`);
            } else {
                console.error('Serious error occurred:', error.message);
                // Solo mostrar alert para errores inesperados
                if (!['BIN_NOT_FOUND', 'RATE_LIMIT'].some(knownError => error.message.includes(knownError))) {
                    alert('Error al consultar la información del BIN: ' + error.message);
                }
            }
        })
        .finally(() => {
            // Restaurar el estado del botón después de 3 segundos si no hubo éxito
            setTimeout(() => {
                if (button.disabled) {
                    button.disabled = false;
                    if (!button.classList.contains('btn-outline-success')) {
                        button.innerHTML = '<i class="bx bx-globe me-1"></i>Get Country';
                    }
                }
            }, 3000);
        });
}
</script>
@endsection