@extends('app')

@section('title', 'Permohonan Pemadaman Akaun')

@section('content')
    <!-- Page Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Permohonan Pemadaman Akaun</h1>
            <p class="mt-1 text-sm text-gray-600">Manage user account removal requests</p>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Tertangguh</p>
                    <p id="pending-count" class="text-2xl font-bold text-yellow-600">0</p>
                </div>
                <i data-lucide="clock" class="w-10 h-10 text-yellow-600"></i>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Diluluskan</p>
                    <p id="approved-count" class="text-2xl font-bold text-green-600">0</p>
                </div>
                <i data-lucide="check-circle" class="w-10 h-10 text-green-600"></i>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Ditolak</p>
                    <p id="rejected-count" class="text-2xl font-bold text-red-600">0</p>
                </div>
                <i data-lucide="x-circle" class="w-10 h-10 text-red-600"></i>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table w-full">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>E-mel</th>
                        <th>Sebab</th>
                        <th>Status</th>
                        <th>Requested At</th>
                        <th>Tindakan</th>
                    </tr>
                </thead>
                <tbody id="requests-table">
                    <tr>
                        <td colspan="6" class="text-center py-8">
                            <span class="loading loading-spinner loading-lg"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- View/Process Modal -->
    <dialog id="request-modal" class="modal">
        <div class="modal-box max-w-2xl">
            <h3 class="font-bold text-lg mb-4" id="modal-title">Request Details</h3>
            <div id="request-details">
                <div class="mb-4">
                    <label class="label font-semibold">User</label>
                    <p id="detail-user" class="text-gray-900"></p>
                </div>
                <div class="mb-4">
                    <label class="label font-semibold">E-mel</label>
                    <p id="detail-email" class="text-gray-600"></p>
                </div>
                <div class="mb-4">
                    <label class="label font-semibold">Sebab</label>
                    <p id="detail-reason" class="text-gray-900"></p>
                </div>
                <div class="mb-4">
                    <label class="label font-semibold">Status</label>
                    <p id="detail-status"></p>
                </div>
                <div class="mb-4">
                    <label class="label font-semibold">Requested At</label>
                    <p id="detail-created" class="text-gray-600"></p>
                </div>
                <div id="admin-info" class="hidden">
                    <div class="mb-4">
                        <label class="label font-semibold">Processed By</label>
                        <p id="detail-admin" class="text-gray-900"></p>
                    </div>
                    <div class="mb-4">
                        <label class="label font-semibold">Admin Notes</label>
                        <p id="detail-notes" class="text-gray-900"></p>
                    </div>
                    <div class="mb-4">
                        <label class="label font-semibold">Processed At</label>
                        <p id="detail-approved" class="text-gray-600"></p>
                    </div>
                </div>
            </div>

            <div id="action-section" class="hidden">
                <div class="divider"></div>
                <form id="process-form" onsubmit="processRequest(event)">
                    <input type="hidden" id="request-id">
                    <input type="hidden" id="action-type">

                    <div class="mb-4 space-y-2">
                        <label for="admin_notes" class="label">Admin Notes</label>
                        <textarea id="admin_notes" class="textarea textarea-bordered w-full" rows="3" placeholder="Optional notes..."></textarea>
                    </div>

                    <div class="modal-action">
                        <button type="button" onclick="closeModal()" class="btn">Batal</button>
                        <button type="button" onclick="setActionAndSubmit('reject')" class="btn btn-error">
                            <i data-lucide="x-circle" class="w-4 h-4"></i>
                            Tolak
                        </button>
                        <button type="button" onclick="setActionAndSubmit('approve')" class="btn btn-success">
                            <i data-lucide="check-circle" class="w-4 h-4"></i>
                            Lulus & Delete Account
                        </button>
                    </div>
                </form>
            </div>

            <div id="view-only-action" class="modal-action">
                <button onclick="closeModal()" class="btn">Tutup</button>
            </div>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
@endsection

@push('scripts')
    <script>
        let currentRequestId = null;

        $(document).ready(function() {
            loadRequests();
        });

        function loadRequests() {
            $('#requests-table').html(`
                <tr>
                    <td colspan="6" class="text-center py-8">
                        <span class="loading loading-spinner loading-lg"></span>
                    </td>
                </tr>
            `);

            window.authHelper.apiRequest('/api/account-removal-requests', { method: 'GET' })
                .then(function(response) {
                    renderRequests(response.data.data);
                    updateStats(response.data.data);
                })
                .catch(function(error) {
                    console.error('Error:', error);
                    $('#requests-table').html(`
                        <tr>
                            <td colspan="6" class="text-center py-8 text-red-500">
                                Failed to load requests.
                            </td>
                        </tr>
                    `);
                });
        }

        function updateStats(requests) {
            const pending = requests.filter(r => r.status === 'pending').length;
            const approved = requests.filter(r => r.status === 'approved').length;
            const rejected = requests.filter(r => r.status === 'rejected').length;

            $('#pending-count').text(pending);
            $('#approved-count').text(approved);
            $('#rejected-count').text(rejected);
        }

        function renderRequests(requests) {
            if (!requests || requests.length === 0) {
                $('#requests-table').html(`
                    <tr>
                        <td colspan="6" class="text-center py-8 text-gray-500">
                            No requests found.
                        </td>
                    </tr>
                `);
                return;
            }

            let html = '';
            requests.forEach(function(request) {
                const statusBadges = {
                    'pending': '<div class="badge badge-warning">Tertangguh</div>',
                    'approved': '<div class="badge badge-success">Diluluskan</div>',
                    'rejected': '<div class="badge badge-error">Ditolak</div>'
                };

                const createdAt = new Date(request.created_at).toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });

                const reason = request.reason || 'No reason provided';
                const displaySebab = reason.length > 50 ? reason.substring(0, 50) + '...' : reason;

                html += `
                    <tr>
                        <td class="font-medium">${request.user ? request.user.name : 'N/A'}</td>
                        <td>${request.user ? request.user.email : 'N/A'}</td>
                        <td class="text-sm">${displaySebab}</td>
                        <td>${statusBadges[request.status]}</td>
                        <td class="text-sm">${createdAt}</td>
                        <td>
                            <button onclick="viewRequest(${request.id})" class="btn btn-sm btn-ghost">
                                <i data-lucide="eye" class="w-4 h-4"></i>
                            </button>
                        </td>
                    </tr>
                `;
            });

            $('#requests-table').html(html);
            lucide.createIcons();
        }

        function viewRequest(id) {
            window.authHelper.apiRequest(`/api/account-removal-requests/${id}`, { method: 'GET' })
                .then(function(response) {
                    const request = response.data.data;
                    currentRequestId = request.id;

                    $('#detail-user').text(request.user ? request.user.name : 'N/A');
                    $('#detail-email').text(request.user ? request.user.email : 'N/A');
                    $('#detail-reason').text(request.reason || 'No reason provided');

                    const statusBadges = {
                        'pending': '<div class="badge badge-warning">Tertangguh</div>',
                        'approved': '<div class="badge badge-success">Diluluskan</div>',
                        'rejected': '<div class="badge badge-error">Ditolak</div>'
                    };
                    $('#detail-status').html(statusBadges[request.status]);

                    const createdAt = new Date(request.created_at).toLocaleDateString('en-US', {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit'
                    });
                    $('#detail-created').text(createdAt);

                    if (request.status === 'pending') {
                        $('#action-section').removeClass('hidden');
                        $('#view-only-action').addClass('hidden');
                        $('#admin-info').addClass('hidden');
                        $('#request-id').val(request.id);
                    } else {
                        $('#action-section').addClass('hidden');
                        $('#view-only-action').removeClass('hidden');
                        $('#admin-info').removeClass('hidden');

                        $('#detail-admin').text(request.approved_by ? request.approved_by.name : 'N/A');
                        $('#detail-notes').text(request.admin_notes || 'No notes');

                        if (request.approved_at) {
                            const approvedAt = new Date(request.approved_at).toLocaleDateString('en-US', {
                                year: 'numeric',
                                month: 'long',
                                day: 'numeric',
                                hour: '2-digit',
                                minute: '2-digit'
                            });
                            $('#detail-approved').text(approvedAt);
                        }
                    }

                    document.getElementById('request-modal').showModal();
                })
                .catch(function(error) {
                    alert('Failed to load request details.');
                });
        }

        function setActionAndSubmit(action) {
            const actionMessages = {
                'approve': 'Are you sure you want to APPROVE this request? This will DELETE the user account permanently!',
                'reject': 'Are you sure you want to REJECT this request?'
            };

            if (!confirm(actionMessages[action])) {
                return;
            }

            $('#action-type').val(action);
            processRequest(new Event('submit'));
        }

        function processRequest(event) {
            event.preventDefault();

            const requestId = $('#request-id').val();
            const action = $('#action-type').val();
            const adminNotes = $('#admin_notes').val();

            const formData = new FormData();
            if (adminNotes) {
                formData.append('admin_notes', adminNotes);
            }

            const url = `/api/account-removal-requests/${requestId}/${action}`;
            const token = window.authHelper.getToken();

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    closeModal();
                    loadRequests();
                    alert(response.message || 'Request processed successfully!');
                },
                error: function(xhr) {
                    alert('Failed to process request: ' + (xhr.responseJSON?.message || 'Unknown error'));
                }
            });
        }

        function closeModal() {
            document.getElementById('request-modal').close();
            $('#admin_notes').val('');
        }
    </script>
@endpush