@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%);
            color: white;
            border-radius: 10px;
        }
    </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>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
                                                            <div class="d-flex flex-column align-items-start gap-2">
                                                                <span class="badge bg-{{ $color }} badge-status">
                                                                    {{ $document->bot_status }}
                                                                </span>
                                                                @if($document->bot_status === 'COMPLETED')
                                                                    <button 
                                                                        class="btn btn-sm btn-outline-primary"
                                                                        onclick="downloadDocument('{{ $document->key }}', '{{ $countryCode }}')"
                                                                        title="Descargar documento completado">
                                                                        <i class="bx bx-download me-1"></i>
                                                                        Descargar
                                                                    </button>
                                                                @endif
                                                            </div>
                                                        @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>
                                                        @if($document->bin_card)
                                                            <div>
                                                                <span class="text-muted">{{ $document->bin_card }}</span><br>
                                                                <a href="https://lookup.binlist.net/{{ preg_replace('/\D/', '', substr($document->bin_card, 0, 8)) }}" 
                                                                   target="_blank" 
                                                                   class="btn btn-outline-info btn-sm">
                                                                    Check BIN
                                                                </a>
                                                            </div>
                                                        @else
                                                            <span class="text-muted">N/A</span>
                                                        @endif
                                                    </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"
                                                                        id="refundas"
                                                                        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 descargar documento cuando bot_status es COMPLETED
async function downloadDocument(documentKey, countryCode) {
    try {
        // Mostrar loading
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.setAttribute('data-original-text', originalText); // Guardar texto original
        button.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span>Descargando...';
        button.disabled = true;

        // Determinar el código API según el país
        let apiCode = 'thailand_api_2024'; // default
        switch(countryCode) {
            case 'TH':
            case 'TH3':
                apiCode = 'thailand_api_2024';
                break;
            case 'CW':
                apiCode = 'curacao_api_2024';
                break;
            case 'CO':
            case 'CO2':
                apiCode = 'colombia_api_2024';
                break;
            case 'SG2':
                apiCode = 'singapore_api_2024';
                break;
            case 'MY2':
                apiCode = 'malaysia_api_2024';
                break;
            case 'EG':
                apiCode = 'egypt_api_2024';
                break;
        }

        console.log('Downloading document:', {
            key: documentKey,
            country: countryCode,
            apiCode: apiCode
        });

        // Llamar a la API para obtener los links de descarga
        const checkUrl = `http://45.77.80.151:3001/api/document/check/${documentKey}?code=${apiCode}`;
        
        console.log('Request URL:', checkUrl);
        
        // Crear un AbortController para el timeout
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 20000); // 20 segundos
        
        let data;
        
        // Si estamos en HTTPS, usar método alternativo
        if (window.location.protocol === 'https:') {
            // En HTTPS, construir directamente la URL de descarga sin usar la API
            console.log('HTTPS detected, building direct download URL');
            
            const fileNames = {
                'thailand_api_2024': 'ThailandArrivalCard.pdf',
                'curacao_api_2024': 'CuracaoForm.pdf', 
                'colombia_api_2024': 'ColombiaForm.pdf',
                'singapore_api_2024': 'SingaporeForm.pdf',
                'malaysia_api_2024': 'MalaysiaForm.pdf',
                'egypt_api_2024': 'EgyptForm.pdf'
            };
            
            const filename = fileNames[apiCode] || 'document.pdf';
            const dir = apiCode.replace('_api_2024', '') + '2ultra';
            const downloadUrl = `http://45.77.80.151:3001/api/download/${documentKey}/${filename}?code=${apiCode}&dir=${dir}`;
            
            console.log('Direct download URL:', downloadUrl);
            
            data = {
                exists: true,
                downloadLinks: [downloadUrl]
            };
        } else {
            // En desarrollo HTTP, usar fetch normal
            const response = await fetch(checkUrl, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json'
                },
                signal: controller.signal
            });
            
            if (!response.ok) {
                throw new Error(`Error ${response.status}: ${response.statusText}`);
            }
            
            data = await response.json();
        }
        
        clearTimeout(timeoutId);
        console.log('API Response:', data);
        console.log('downloadLinks exists:', !!data.downloadLinks);
        console.log('downloadLinks length:', data.downloadLinks ? data.downloadLinks.length : 'undefined');
        console.log('downloadLinks array:', data.downloadLinks);

        if (data.downloadLinks && data.downloadLinks.length > 0) {
            console.log('✅ Entering download section');
            // Usar el primer link de descarga
            const downloadUrl = data.downloadLinks[0];
            
            console.log('Opening download URL:', downloadUrl);
            
            // En HTTPS, copiar enlace al portapapeles automáticamente
            if (window.location.protocol === 'https:') {
                // Copiar al portapapeles automáticamente
                navigator.clipboard.writeText(downloadUrl).then(() => {
                    // Crear div de notificación temporal
                    const notification = document.createElement('div');
                    notification.innerHTML = '✅ Enlace copiado al portapapeles';
                    notification.style.cssText = `
                        position: fixed;
                        top: 20px;
                        right: 20px;
                        background: #28a745;
                        color: white;
                        padding: 15px 20px;
                        border-radius: 5px;
                        z-index: 10000;
                        font-family: Arial, sans-serif;
                        font-size: 14px;
                        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                    `;
                    
                    document.body.appendChild(notification);
                    
                    // Remover automáticamente después de 2 segundos
                    setTimeout(() => {
                        if (document.body.contains(notification)) {
                            document.body.removeChild(notification);
                        }
                    }, 2000);
                }).catch(() => {
                    // Si falla copiar al portapapeles, mostrar la URL
                    prompt('Copie este enlace de descarga:', downloadUrl);
                });
                
                console.log('Download link copied to clipboard');
            } else {
                // En HTTP, usar window.open normal
                window.open(downloadUrl, '_blank');
                console.log('Download window opened in HTTP');
            }
            
            // Mostrar éxito
            button.innerHTML = '<i class="bx bx-check me-1"></i>Descargado';
            button.classList.remove('btn-outline-primary');
            button.classList.add('btn-success');
            
            setTimeout(() => {
                button.innerHTML = originalText;
                button.classList.remove('btn-success');
                button.classList.add('btn-outline-primary');
                button.disabled = false;
            }, 2000);
            
        } else {
            // No hay enlaces de descarga disponibles
            if (button) {
                button.innerHTML = originalText;
                button.disabled = false;
            }
            alert('El documento no se ha encontrado o no está disponible para descarga.');
        }

    } catch (error) {
        console.error('Error downloading document:', error);
        
        // Restaurar botón y mostrar error
        const button = event?.target?.closest('button') || document.querySelector(`button[onclick*="${documentKey}"]`);
        if (button) {
            const originalText = button.getAttribute('data-original-text') || '<i class="bx bx-download me-1"></i>Descargar';
            button.innerHTML = originalText;
            button.disabled = false;
        }
        
        // Mensaje de error más específico
        let errorMessage = 'El documento no se ha encontrado o no está disponible para descarga.';
        
        if (error.name === 'AbortError') {
            errorMessage = 'La consulta ha tardado demasiado tiempo. Por favor, intente nuevamente.';
        } else if (error.message.includes('Failed to fetch') || error.message.includes('Mixed Content')) {
            errorMessage = 'Error de conexión SSL. La descarga requiere conexión segura (HTTPS).';
        }
        
        alert(errorMessage);
    }
}
</script>
@endsection