@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h5 class="card-title mb-0">Auth Tokens</h5>
                    </div>
                    <div class="col-md-6 text-end">
                        @can('create auth tokens')
                            <div class="btn-group">
                                <a href="{{ route('auth-tokens.create') }}" class="btn btn-primary">
                                    <i class="fas fa-plus"></i> New Token
                                </a>
                                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" 
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="visually-hidden">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#bulkGenerateModal">
                                            <i class="fas fa-layer-group"></i> Bulk Generate
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        @endcan
                    </div>
                </div>
                <hr />
            </div>

            <div class="card-body">
                <!-- Filters -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <label class="form-label">Action</label>
                        <select class="form-select" id="filter-action">
                            <option value="">All Actions</option>
                            @foreach($actions as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Status</label>
                        <select class="form-select" id="filter-status">
                            <option value="">All Status</option>
                            @foreach($statuses as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">User</label>
                        <select class="form-select" id="filter-user">
                            <option value="">All Users</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Used</label>
                        <select class="form-select" id="filter-used">
                            <option value="">All</option>
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
                    </div>
                </div>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('generated_token'))
                    <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <strong>Token Generated!</strong> 
                        <code class="bg-light p-2 rounded d-block mt-2">{{ session('generated_token') }}</code>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if($authTokens->count() > 0)
                    <table id="auth-tokens-table" class="table table-bordered align-middle text-center">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Token</th>
                                <th>User</th>
                                <th>Action</th>
                                <th>Status</th>
                                <th>Expiry</th>
                                <th>Created At</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($authTokens as $token)
                                @php
                                    $isExpired = $token->expiry < now();
                                    $isActive = !$token->used && !$isExpired;
                                @endphp
                                <tr class="{{ $isExpired ? 'table-danger' : ($isActive ? 'table-success' : '') }}">
                                    <td>{{ $loop->iteration }}</td>
                                    <td>
                                        <code class="small">{{ substr($token->token, 0, 20) }}...</code><br>
                                        <small class="text-muted">Hashed token</small>
                                    </td>
                                    <td>
                                        @if($token->user)
                                            <a href="{{ route('users.show', $token->user_id) }}" class="text-primary">
                                                {{ $token->user->name }}
                                            </a>
                                        @else
                                            <span class="text-muted">System</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ [
                                            'approve' => 'success',
                                            'reject' => 'danger',
                                            'whatsapp_login' => 'info',
                                            'kiosk_login' => 'primary'
                                        ][$token->action] ?? 'secondary' }}">
                                            {{ $actions[$token->action] ?? $token->action }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($token->used)
                                            <span class="badge bg-secondary">Used</span>
                                        @elseif($isExpired)
                                            <span class="badge bg-danger">Expired</span>
                                        @else
                                            <span class="badge bg-success">Active</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="{{ $isExpired ? 'text-danger' : '' }}">
                                            {{ $token->expiry->format('d M Y, h:i A') }}
                                        </span>
                                        @if($isExpired)
                                            <br><small class="text-danger">Expired {{ $token->expiry->diffForHumans() }}</small>
                                        @else
                                            <br><small class="text-muted">Expires in {{ $token->expiry->diffForHumans() }}</small>
                                        @endif
                                    </td>
                                    <td>{{ $token->created_at->format('d M Y') }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            @can('view auth tokens')
                                                <a href="{{ route('auth-tokens.show', $token->id) }}" class="btn btn-sm btn-info" title="View">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            @endcan
                                            
                                            @can('update auth tokens')
                                                <a href="{{ route('auth-tokens.edit', $token->id) }}" class="btn btn-sm btn-warning" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                            @endcan
                                            
                                            @can('delete auth tokens')
                                                <form action="{{ route('auth-tokens.destroy', $token->id) }}" method="POST" 
                                                      style="display: inline;" 
                                                      onsubmit="return confirm('Are you sure you want to delete this auth token?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            @endcan
                                            
                                            @if(!$token->used && !$isExpired)
                                                <button class="btn btn-sm btn-success mark-used-btn" 
                                                        data-id="{{ $token->id }}"
                                                        title="Mark as Used">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="alert alert-info">
                        No auth tokens found. 
                        @can('create auth tokens')
                            <a href="{{ route('auth-tokens.create') }}" class="alert-link">Create your first auth token</a>
                        @endcan
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Bulk Generate Modal -->
    @can('create auth tokens')
        <div class="modal fade" id="bulkGenerateModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Bulk Generate Tokens</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="bulkGenerateForm">
                        @csrf
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="bulk_count" class="form-label">Number of Tokens *</label>
                                <input type="number" class="form-control" id="bulk_count" name="count" 
                                       min="1" max="100" value="10" required>
                                <small class="text-muted">Maximum 100 tokens at once</small>
                            </div>
                            
                            <div class="mb-3">
                                <label for="bulk_action" class="form-label">Action *</label>
                                <select class="form-control" id="bulk_action" name="action" required>
                                    @foreach($actions as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="bulk_user_id" class="form-label">User (Optional)</label>
                                <select class="form-control" id="bulk_user_id" name="user_id">
                                    <option value="">No User</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="bulk_expiry_days" class="form-label">Expiry Days *</label>
                                <input type="number" class="form-control" id="bulk_expiry_days" name="expiry_days" 
                                       min="1" max="365" value="7" required>
                                <small class="text-muted">Tokens will expire after specified days</small>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Generate Tokens</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endcan

    <!-- Token Verification Modal -->
    <div class="modal fade" id="verifyTokenModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Verify Token</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="token_to_verify" class="form-label">Enter Token</label>
                        <input type="text" class="form-control" id="token_to_verify" 
                               placeholder="Paste token here...">
                    </div>
                    <div id="verification-result"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="verify-token-btn">Verify</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
<script>
$(document).ready(function () {
    @if($authTokens->count() > 0)
        var table = $('#auth-tokens-table').DataTable({
            responsive: false,
            scrollX: true,
            pageLength: 10,
            lengthMenu: [5, 10, 25, 50, 100],
            order: [[0, 'asc']],
            columnDefs: [
                { orderable: false, targets: -1 } // disable sorting for last column
            ]
        });

        // Apply filters
        $('#filter-action').on('change', function() {
            table.column(3).search(this.value).draw();
        });

        $('#filter-status').on('change', function() {
            var value = this.value;
            if (value === 'active') {
                $.fn.dataTable.ext.search.push(
                    function(settings, data, dataIndex) {
                        var expiry = new Date(data[5].split('<br>')[0]);
                        var isExpired = expiry < new Date();
                        var isUsed = data[4].includes('Used');
                        return !isExpired && !isUsed;
                    }
                );
            } else if (value === 'expired') {
                $.fn.dataTable.ext.search.push(
                    function(settings, data, dataIndex) {
                        var expiry = new Date(data[5].split('<br>')[0]);
                        return expiry < new Date();
                    }
                );
            } else if (value === 'used') {
                $.fn.dataTable.ext.search.push(
                    function(settings, data, dataIndex) {
                        return data[4].includes('Used');
                    }
                );
            } else {
                // Remove custom filter
                $.fn.dataTable.ext.search.pop();
            }
            table.draw();
        });

        $('#filter-user').on('change', function() {
            table.column(2).search(this.value).draw();
        });

        $('#filter-used').on('change', function() {
            var value = this.value;
            if (value === '1') {
                table.column(4).search('Used').draw();
            } else if (value === '0') {
                table.column(4).search('^(?!.*Used).*$', true, false).draw();
            } else {
                table.column(4).search('').draw();
            }
        });
    @endif

    // Mark token as used
    $('.mark-used-btn').on('click', function() {
        var tokenId = $(this).data('id');
        
        Swal.fire({
            title: 'Mark as Used?',
            text: 'This will mark the token as used and it cannot be used again.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, mark as used',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/auth-tokens/${tokenId}/mark-used`,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire(
                                'Marked as Used!',
                                'Token has been marked as used.',
                                'success'
                            ).then(() => {
                                location.reload();
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire(
                            'Error!',
                            xhr.responseJSON?.error || 'Failed to mark token as used',
                            'error'
                        );
                    }
                });
            }
        });
    });

    // Bulk generate tokens
    $('#bulkGenerateForm').on('submit', function(e) {
        e.preventDefault();
        
        $.ajax({
            url: '{{ route("auth-tokens.generate-bulk") }}',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                $('#bulkGenerateModal').modal('hide');
                
                // Show success message with tokens
                let message = `<strong>${response.message}</strong><br><br>`;
                message += `<strong>Generated Tokens:</strong><br>`;
                
                response.tokens.forEach(token => {
                    message += `Token ${token.id}: ${token.raw_token}<br>`;
                    message += `Action: ${token.action}, Expiry: ${token.expiry}<br><br>`;
                });
                
                // Create a downloadable text file
                const tokenText = response.tokens.map(t => 
                    `Token ID: ${t.id}\nToken: ${t.raw_token}\nAction: ${t.action}\nExpiry: ${t.expiry}\n\n`
                ).join('');
                
                const blob = new Blob([tokenText], { type: 'text/plain' });
                const url = URL.createObjectURL(blob);
                
                message += `<a href="${url}" download="tokens.txt" class="btn btn-sm btn-primary">
                    <i class="fas fa-download"></i> Download Tokens as Text File
                </a>`;
                
                Swal.fire({
                    title: 'Success!',
                    html: message,
                    icon: 'success',
                    width: 600,
                    showConfirmButton: true,
                    confirmButtonText: 'OK',
                    didDestroy: () => {
                        URL.revokeObjectURL(url);
                    }
                }).then(() => {
                    location.reload();
                });
            },
            error: function(xhr) {
                Swal.fire(
                    'Error!',
                    'Failed to generate tokens. Please try again.',
                    'error'
                );
            }
        });
    });

    // Token verification
    $('#verify-token-btn').on('click', function() {
        var token = $('#token_to_verify').val();
        
        if (!token) {
            Swal.fire('Error', 'Please enter a token', 'error');
            return;
        }
        
        $('#verification-result').html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Verifying...</div>');
        
        $.ajax({
            url: '{{ route("auth-tokens.verify") }}',
            type: 'POST',
            data: {
                token: token,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.valid) {
                    let html = '<div class="alert alert-success">';
                    html += '<strong><i class="fas fa-check-circle"></i> Valid Token!</strong><br>';
                    html += `<strong>ID:</strong> ${response.token.id}<br>`;
                    html += `<strong>Action:</strong> ${response.token.action}<br>`;
                    html += `<strong>User:</strong> ${response.token.user_id ? 'Linked to user' : 'No user'}<br>`;
                    html += `<strong>Expiry:</strong> ${new Date(response.token.expiry).toLocaleString()}<br>`;
                    html += `<strong>Used:</strong> ${response.token.used ? 'Yes' : 'No'}`;
                    html += '</div>';
                    
                    $('#verification-result').html(html);
                } else {
                    $('#verification-result').html(`
                        <div class="alert alert-danger">
                            <i class="fas fa-times-circle"></i> Invalid or expired token
                        </div>
                    `);
                }
            },
            error: function() {
                $('#verification-result').html(`
                    <div class="alert alert-danger">
                        <i class="fas fa-times-circle"></i> Error verifying token
                    </div>
                `);
            }
        });
    });

    // Show verification modal
    $('#verify-token-modal-btn').on('click', function() {
        $('#verifyTokenModal').modal('show');
    });
});
</script>
@endpush