@extends('template.desktop.app')

@push('styles')
<style>
    :root {
        --premium-primary: #3730a3; /* Darker indigo for better contrast */
        --premium-success: #065f46; /* Darker green */
        --premium-danger: #991b1b;  /* Darker red */
        --premium-warning: #92400e; /* Darker amber */
        --premium-bg: #f8fafc;
        --premium-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    .text-premium-primary { color: var(--premium-primary) !important; }
    .text-premium-success { color: var(--premium-success) !important; }
    .text-premium-danger { color: var(--premium-danger) !important; }

    .duplicate-card {
        border: none;
        border-radius: 16px;
        box-shadow: var(--premium-card-shadow);
        background: white;
    }

    .table-premium thead th {
        border-bottom: none;
        color: #334155; /* Darker text for header */
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        padding: 1.25rem 1rem;
    }

    .order-mini-card .text-muted {
        color: #64748b !important; /* Darker muted text */
    }

    .order-mini-card {
        padding: 12px;
        border-radius: 10px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        min-width: 230px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    .table-premium tbody tr {
        background-color: white;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .table-premium tbody tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        background-color: #fcfdfe;
    }

    .table-premium td {
        padding: 1.25rem 1rem;
        border-top: 1px solid #f1f5f9;
        border-bottom: 1px solid #f1f5f9;
    }

    .table-premium td:first-child {
        border-left: 1px solid #f1f5f9;
        border-bottom-left-radius: 12px;
        border-top-left-radius: 12px;
    }

    .table-premium td:last-child {
        border-right: 1px solid #f1f5f9;
        border-bottom-right-radius: 12px;
        border-top-right-radius: 12px;
    }

    .order-mini-card {
        padding: 12px;
        border-radius: 10px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        min-width: 220px;
    }

    .order-mini-card.winner {
        border-color: #10b981;
        background: #ecfdf5;
        position: relative;
    }

    .order-mini-card.duplicate {
        border-color: #ef4444;
        background: #fef2f2;
    }

    .winner-status-label {
        position: absolute;
        top: -8px;
        right: 8px;
        font-size: 10px;
        font-weight: 700;
        background: #10b981;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        text-transform: uppercase;
    }

    .reason-box {
        background: #fffbeb;
        border: 1px solid #fef3c7;
        color: #92400e;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .comparison-grid-header {
        background: #f1f5f9;
        padding: 10px;
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #475569;
        border-radius: 6px;
    }

    .comparison-row {
        border-bottom: 1px solid #f1f5f9;
        padding: 12px 0;
    }

    .comparison-row:last-child {
        border-bottom: none;
    }

    .match-pill {
        font-size: 10px;
        padding: 2px 8px;
        border-radius: 100px;
        font-weight: 600;
    }

    .match-pill.success { background: #d1fae5; color: #065f46; }
    .match-pill.danger { background: #fee2e2; color: #991b1b; }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-3">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold text-dark mb-1">Duplicate Order Resolution</h4>
            <p class="text-secondary small mb-0">Manage and resolve order conflicts detected by Everpro API.</p>
        </div>
        <div class="text-end">
            <span class="badge bg-white text-danger border border-danger-subtle rounded-pill px-4 py-2 fs-6 shadow-sm">
                <i class="fas fa-layer-group me-2"></i>{{ $duplicates->total() }} Pending Conflicts
            </span>
        </div>
    </div>

    <div class="duplicate-card">
        <div class="table-responsive p-3">
            <table class="table table-premium align-middle mb-0">
                <thead>
                    <tr>
                        <th class="ps-3">Detection Info</th>
                        <th>Reference</th>
                        <th>Current Order <span class="text-premium-primary">(Recent)</span></th>
                        <th>Conflict With <span class="text-premium-success">(Original)</span></th>
                        <th>Resolution Insight</th>
                        <th class="text-end pe-3">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($duplicates as $log)
                    <tr>
                        <td class="ps-3">
                            <div class="d-flex align-items-center">
                                <div class="bg-light rounded-3 p-2 me-3 text-center" style="min-width: 50px;">
                                    <span class="d-block fw-bold text-dark fs-6">{{ $log->created_at->format('d') }}</span>
                                    <small class="text-uppercase text-muted" style="font-size: 10px;">{{ $log->created_at->format('M') }}</small>
                                </div>
                                <div>
                                    <span class="d-block text-dark fw-semibold small">{{ $log->created_at->format('H:i') }} WIB</span>
                                    <small class="text-muted" style="font-size: 11px;">#LOG-{{ $log->id }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            <code class="text-premium-primary fw-bold px-2 py-1 bg-light rounded border-0" style="font-size: 0.85rem;">
                                {{ $log->client_order_no }}
                            </code>
                        </td>
                        <td>
                            @if($log->order)
                                <div class="order-mini-card {{ $log->winner_order_id == $log->order_id ? 'winner' : ($log->winner_order_id ? 'duplicate' : '') }}">
                                    @if($log->winner_order_id == $log->order_id)
                                        <div class="winner-status-label">Winner</div>
                                    @endif
                                    <div class="d-flex justify-content-between align-items-start mb-1">
                                        <span class="fw-bold text-dark" style="font-size: 0.8rem;">#{{ $log->order_id }}</span>
                                        <span class="text-muted" style="font-size: 10px;">{{ $log->order->payment_method }}</span>
                                    </div>
                                    <div class="text-dark fw-semibold truncate mb-0" title="{{ $log->order->receiver->name ?? '-' }}" style="font-size: 0.75rem;">
                                        {{ Str::limit($log->order->receiver->name ?? 'Unknown', 20) }}
                                    </div>
                                    <div class="text-muted small" style="font-size: 10px;">
                                        <i class="fas fa-map-marker-alt me-1"></i>{{ $log->order->receiver->city ?? '-' }}
                                    </div>
                                </div>
                            @else
                                <div class="order-mini-card bg-light border-dashed">
                                    <span class="text-muted fst-italic small">Order data missing</span>
                                </div>
                            @endif
                        </td>
                        <td>
                            @if($log->duplicateOrder)
                                <div class="order-mini-card {{ $log->winner_order_id == $log->duplicate_order_id ? 'winner' : ($log->winner_order_id ? 'duplicate' : '') }}">
                                    @if($log->winner_order_id == $log->duplicate_order_id)
                                        <div class="winner-status-label">Winner</div>
                                    @endif
                                    <div class="d-flex justify-content-between align-items-start mb-1">
                                        <span class="fw-bold text-dark" style="font-size: 0.8rem;">#{{ $log->duplicate_order_id }}</span>
                                        <span class="text-muted" style="font-size: 10px;">{{ $log->duplicateOrder->payment_method }}</span>
                                    </div>
                                    <div class="text-dark fw-semibold truncate mb-0" style="font-size: 0.75rem;">
                                        {{ Str::limit($log->duplicateOrder->receiver->name ?? 'Unknown', 20) }}
                                    </div>
                                    <div class="text-muted small" style="font-size: 10px;">
                                        <i class="fas fa-history me-1"></i>Found in API
                                    </div>
                                </div>
                            @else
                                <div class="order-mini-card bg-light border-dashed">
                                    <span class="text-muted fst-italic small">Original link broken</span>
                                </div>
                            @endif
                        </td>
                        <td>
                            <div class="reason-box mb-2">
                                <i class="fas fa-bolt me-1"></i>{{ $log->reason }}
                            </div>
                            @if($log->verification_result)
                                <button class="btn btn-sm btn-link text-decoration-none p-0 fw-bold btn-view-detail" 
                                        style="font-size: 0.7rem; color: var(--premium-primary);"
                                        data-target="detail-{{ $log->id }}">
                                    <i class="fas fa-search-plus me-1"></i>View Full Analytics
                                </button>
                                <textarea id="detail-{{ $log->id }}" class="d-none">{{ json_encode($log->verification_result) }}</textarea>
                            @endif
                        </td>
                        <td class="text-end pe-3">
                            @if(!$log->winner_order_id)
                                <button class="btn btn-primary btn-sm rounded-pill px-4 fw-bold shadow-sm btn-verify" data-id="{{ $log->id }}">
                                    Resolve Fix
                                </button>
                            @else
                                <span class="text-success fw-bold small">
                                    <i class="fas fa-check-double me-1"></i>Resolved
                                </span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <img src="https://cdn-icons-png.flaticon.com/512/1548/1548682.png" alt="Empty" style="width: 80px; opacity: 0.5;" class="mb-3">
                            <h6 class="text-secondary fw-bold">Clean Workspace!</h6>
                            <p class="text-muted small">No duplicate order conflicts found at the moment.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($duplicates->hasPages())
        <div class="card-footer bg-transparent border-top-0 py-4 px-4">
            <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted">Showing {{ $duplicates->firstItem() }} to {{ $duplicates->lastItem() }} of {{ $duplicates->total() }} logs</small>
                {{ $duplicates->links('pagination::bootstrap-5') }}
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Refined Verification Modal -->
<div class="modal fade" id="verificationModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
      <div class="modal-header border-bottom-0 pt-4 px-4">
        <h5 class="modal-title fw-bold text-dark d-flex align-items-center">
            <div class="bg-primary bg-opacity-10 p-2 rounded-3 me-3">
                <i class="fas fa-shield-alt text-primary"></i>
            </div>
            Conflict Analysis Result
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4 pt-2">
        <div id="verificationContent"></div>
      </div>
      <div class="modal-footer border-top-0 pb-4 px-4 d-flex justify-content-between">
        <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Close Report</button>
        <div id="manualActionButtons" class="d-none">
            <button type="button" class="btn btn-outline-primary rounded-pill px-4 me-2" id="keepRecentBtn">Keep Recent</button>
            <button type="button" class="btn btn-outline-success rounded-pill px-4" id="keepOriginalBtn">Keep Original</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Tambahkan Font-Awesome jika belum ada -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        const verificationModalEl = document.getElementById('verificationModal');
        const verificationModal = new bootstrap.Modal(verificationModalEl);
        let reloadOnClose = false;

        verificationModalEl.addEventListener('hidden.bs.modal', function () {
            if (reloadOnClose) window.location.reload();
        });

        function showVerificationHtml(data, logId = null) {
            const scores = data.scores || (data.verification_result ? data.verification_result.scores : {});
            const details = data.details || (data.verification_result ? data.verification_result.details : {});
            let winnerId = data.winner_id || (data.verification_result ? data.verification_result.winner_order_id : null);
            
            // Handle Manual Action Buttons visibility
            const actionContainer = document.getElementById('manualActionButtons');
            if (actionContainer && logId && !winnerId) {
                actionContainer.classList.remove('d-none');
                
                // Get IDs from data if available, or we might need them passed separately
                // Assuming data has current_id and duplicate_id or similar
                // Actually we can get them from the details keys if we are careful
                const currentId = details.current?.name?.local_id || data.current_id; // Need to ensure these exist
                const duplicateId = details.duplicate?.name?.local_id || data.duplicate_id;

                document.getElementById('keepRecentBtn').onclick = () => resolveManualOrder(logId, 'current');
                document.getElementById('keepOriginalBtn').onclick = () => resolveManualOrder(logId, 'duplicate');
            } else if (actionContainer) {
                actionContainer.classList.add('d-none');
            }

            const icons = {
                name: 'fa-user',
                address: 'fa-map-pin',
                district: 'fa-location-arrow',
                city: 'fa-building'
            };

            let html = `
                <!-- Summary Stats -->
                <div class="row g-3 mb-4">
                    <div class="col-6">
                        <div class="p-3 rounded-4 bg-primary border-0 shadow-sm">
                            <div class="small fw-bold text-white text-opacity-75 text-uppercase mb-2" style="font-size: 10px;">New Order Match</div>
                            <div class="d-flex align-items-center">
                                <h2 class="fw-bold mb-0 text-white me-2">${scores.current ?? 0}</h2>
                                <span class="badge bg-white bg-opacity-20 text-black rounded-pill small">Points</span>
                            </div>
                        </div>
                    </div>
                     <div class="col-6">
                        <div class="p-3 rounded-4 bg-success border-0 shadow-sm">
                            <div class="small fw-bold text-white text-opacity-75 text-uppercase mb-2" style="font-size: 10px;">Original Order Match</div>
                            <div class="d-flex align-items-center">
                                <h2 class="fw-bold mb-0 text-white me-2">${scores.duplicate ?? 0}</h2>
                                <span class="badge bg-white bg-opacity-20 text-black rounded-pill small">Points</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 rounded-4 p-3 mb-4 border">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="fw-bold text-dark small"><i class="fas fa-list-check me-2"></i>Comparison Matrix</span>
                        ${winnerId ? `<span class="badge bg-success">WINNER detected #${winnerId}</span>` : '<span class="badge bg-warning">TIE (Manual check needed)</span>'}
                    </div>

                    <div class="comparison-grid-header row g-0 text-center mb-2">
                        <div class="col-4 text-start ps-2">Field</div>
                        <div class="col-4">Current (New)</div>
                        <div class="col-4">Original (Old)</div>
                    </div>
            `;

            const checks = ['name', 'address', 'district', 'city'];
            checks.forEach(field => {
                const currentVal = details.current?.[field]?.local || '-';
                const currentMatch = details.current?.[field]?.match;
                const duplicateVal = details.duplicate?.[field]?.local || '-';
                const duplicateMatch = details.duplicate?.[field]?.match;
                const apiVal = details.current?.[field]?.api || details.duplicate?.[field]?.api || '-';
                const icon = icons[field] || 'fa-tag';

                html += `
                    <div class="comparison-row row g-0 align-items-center px-2">
                        <div class="col-4">
                            <div class="d-flex flex-column">
                                <span class="fw-bold text-dark small text-uppercase" style="font-size: 9px; color: #94a3b8;">${field}</span>
                                <span class="fw-semibold text-primary" style="font-size: 0.75rem;">${apiVal}</span>
                                <span class="text-muted smaller" style="font-size: 8px;">(Everpro Data)</span>
                            </div>
                        </div>
                        <div class="col-4 text-center border-start">
                            <span class="match-pill px-2 ${currentMatch ? 'success' : 'danger'} mb-1 d-inline-block">
                                ${currentMatch ? 'Match' : 'Mismatch'}
                            </span>
                            <div class="text-dark small px-2" style="font-size: 0.7rem; line-height: 1.2;">${currentVal}</div>
                        </div>
                        <div class="col-4 text-center border-start">
                            <span class="match-pill px-2 ${duplicateMatch ? 'success' : 'danger'} mb-1 d-inline-block">
                                ${duplicateMatch ? 'Match' : 'Mismatch'}
                            </span>
                            <div class="text-dark small px-2" style="font-size: 0.7rem; line-height: 1.2;">${duplicateVal}</div>
                        </div>
                    </div>
                `;
            });

            html += `</div>`;
            
            document.getElementById('verificationContent').innerHTML = html;
            verificationModal.show();
        }

        function resolveManualOrder(logId, type) {
            Swal.fire({
                title: 'Are you sure?',
                text: `You are choosing to keep the ${type} order and mark the other as a duplicate.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Resolve It!',
                borderRadius: '16px'
            }).then((result) => {
                if (result.isConfirmed) {
                    // We need to know which actual Order ID to send
                    // The backend resolveManual expects winner_id
                    // Let's modify the showVerificationHtml to pass the actual IDs or modify backend
                    // Actually, let's fetch the IDs from the log first or pass them in data
                    
                    fetch(`/duplicates/${logId}/verify`) // Quick fetch to get IDs if not available? 
                    // Better: The JS already has access to the log if we pass it correctly.
                    // For now, let's assume the backend resolveManual can handle 'type' or we pass winner_id.
                    
                    // Simple approach: Backend resolve-manual can take 'choice': 'current' or 'duplicate'
                    fetch(`/duplicates/${logId}/resolve-manual`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({ choice: type })
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.status === 'success') {
                            Swal.fire('Success', data.message, 'success').then(() => {
                                window.location.reload();
                            });
                        } else {
                            Swal.fire('Error', data.message, 'error');
                        }
                    });
                }
            });
        }

        // Handle "Verify & Fix" button
        document.querySelectorAll('.btn-verify').forEach(button => {
            button.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                const btn = this;
                
                Swal.fire({
                    title: 'Cross-Verify Order?',
                    text: "We will compare local data with Everpro API records.",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#4f46e5',
                    cancelButtonColor: '#94a3b8',
                    confirmButtonText: 'Yes, Verify Now!',
                    borderRadius: '16px'
                }).then((result) => {
                    if (result.isConfirmed) {
                        btn.disabled = true;
                        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

                        fetch(`/duplicates/${id}/verify`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': csrfToken
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if(data.status === 'success') {
                                reloadOnClose = true;
                                showVerificationHtml(data, id);
                                btn.innerHTML = 'Done';
                            } else {
                                Swal.fire('Error', data.message, 'error');
                                btn.disabled = false;
                                btn.innerHTML = 'Resolve Fix';
                            }
                        })
                        .catch(error => {
                            Swal.fire('Error', 'Connection failed', 'error');
                            btn.disabled = false;
                            btn.innerHTML = 'Resolve Fix';
                        });
                    }
                });
            });
        });

        // Handle "View Details" button
        document.querySelectorAll('.btn-view-detail').forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const dataStr = document.getElementById(targetId).value;
                try {
                    const data = JSON.parse(dataStr);
                    reloadOnClose = false;
                    const logId = this.closest('tr').querySelector('.btn-verify')?.getAttribute('data-id') || 
                                  this.getAttribute('data-log-id'); // Added fallback
                    showVerificationHtml({ verification_result: data }, logId);
                } catch(e) {
                    Swal.fire('Error', 'Invalid analytic data', 'error');
                }
            });
        });
    });
</script>
@endsection