@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-6">
                        <h5 class="card-title mb-0">Auth Token Details</h5>
                    </div>
                    <div class="col-6 text-end">
                        <a href="{{ route('auth-tokens.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div>
                </div>
                <hr />
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">Token Information</h6>
                            </div>
                            <div class="card-body">
                                <table class="table table-borderless">
                                    <tr>
                                        <th width="35%" class="text-muted">Token Hash:</th>
                                        <td>
                                            <code class="bg-light p-2 rounded d-block small">
                                                {{ $authToken->token }}
                                            </code>
                                            <small class="text-muted">Token is stored hashed for security</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">User:</th>
                                        <td>
                                            @if($authToken->user)
                                                <a href="{{ route('users.show', $authToken->user_id) }}" class="text-primary">
                                                    {{ $authToken->user->name }}
                                                </a>
                                                @if($authToken->user->email)
                                                    <br><small class="text-muted">{{ $authToken->user->email }}</small>
                                                @endif
                                            @else
                                                <span class="text-muted">No User</span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Action:</th>
                                        <td>
                                            @php
                                                $actionColors = [
                                                    'approve' => 'success',
                                                    'reject' => 'danger',
                                                    'whatsapp_login' => 'info',
                                                    'kiosk_login' => 'primary'
                                                ];
                                            @endphp
                                            <span class="badge bg-{{ $actionColors[$authToken->action] ?? 'secondary' }}">
                                                {{ $authToken->action }}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Status:</th>
                                        <td>
                                            @php
                                                $isExpired = $authToken->expiry < now();
                                                $isActive = !$authToken->used && !$isExpired;
                                            @endphp
                                            @if($authToken->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>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Expiry:</th>
                                        <td>
                                            <span class="{{ $isExpired ? 'text-danger' : '' }}">
                                                {{ $authToken->expiry->format('d M Y, h:i A') }}
                                            </span>
                                            <br>
                                            <small class="text-muted">
                                                @if($isExpired)
                                                    Expired {{ $authToken->expiry->diffForHumans() }}
                                                @else
                                                    Expires in {{ $authToken->expiry->diffForHumans() }}
                                                @endif
                                            </small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">IP Address:</th>
                                        <td>{{ $authToken->ip ?? 'N/A' }}</td>
                                    </tr>
                                    @if($authToken->used_at)
                                        <tr>
                                            <th class="text-muted">Used At:</th>
                                            <td>{{ $authToken->used_at->format('d M Y, h:i A') }}</td>
                                        </tr>
                                    @endif
                                    <tr>
                                        <th class="text-muted">Created At:</th>
                                        <td>{{ $authToken->created_at->format('d M Y, h:i A') }}</td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Last Updated:</th>
                                        <td>{{ $authToken->updated_at->format('d M Y, h:i A') }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        @canany(['update auth tokens', 'delete auth tokens'])
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Actions</h6>
                                </div>
                                <div class="card-body">
                                    <div class="btn-group" role="group">
                                        @can('update auth tokens')
                                            <a href="{{ route('auth-tokens.edit', $authToken) }}" class="btn btn-warning">
                                                <i class="fas fa-edit"></i> Edit Token
                                            </a>
                                        @endcan
                                        
                                        @can('delete auth tokens')
                                            <form action="{{ route('auth-tokens.destroy', $authToken) }}" 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-danger">
                                                    <i class="fas fa-trash"></i> Delete Token
                                                </button>
                                            </form>
                                        @endcan
                                        
                                        @if(!$authToken->used && !$isExpired)
                                            <button class="btn btn-success mark-used-btn" 
                                                    data-id="{{ $authToken->id }}">
                                                <i class="fas fa-check"></i> Mark as Used
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endcanany
                    </div>

                    <div class="col-md-6">
                        <!-- Token Usage Information -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">Usage Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-{{ $isActive ? 'success' : ($authToken->used ? 'info' : 'danger') }}">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-{{ $isActive ? 'check-circle' : ($authToken->used ? 'info-circle' : 'exclamation-circle') }} fa-2x me-3"></i>
                                        <div>
                                            <h5 class="alert-heading mb-1">
                                                @if($isActive)
                                                    Token is Active
                                                @elseif($authToken->used)
                                                    Token Already Used
                                                @else
                                                    Token Expired
                                                @endif
                                            </h5>
                                            <p class="mb-0">
                                                @if($isActive)
                                                    This token can be used for authentication.
                                                @elseif($authToken->used)
                                                    This token was used on {{ $authToken->used_at->format('d M Y, h:i A') }}
                                                @else
                                                    This token expired on {{ $authToken->expiry->format('d M Y, h:i A') }}
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Action Specific Information -->
                                @switch($authToken->action)
                                    @case('approve')
                                        <div class="alert alert-success">
                                            <i class="fas fa-thumbs-up"></i>
                                            <strong>Approve Action</strong><br>
                                            This token can be used to approve submissions, checklists, or verifications.
                                        </div>
                                        @break
                                    
                                    @case('reject')
                                        <div class="alert alert-danger">
                                            <i class="fas fa-thumbs-down"></i>
                                            <strong>Reject Action</strong><br>
                                            This token can be used to reject submissions, checklists, or verifications.
                                        </div>
                                        @break
                                    
                                    @case('whatsapp_login')
                                        <div class="alert alert-info">
                                            <i class="fab fa-whatsapp"></i>
                                            <strong>WhatsApp Login</strong><br>
                                            This token can be used for WhatsApp-based authentication.
                                        </div>
                                        @break
                                    
                                    @case('kiosk_login')
                                        <div class="alert alert-primary">
                                            <i class="fas fa-desktop"></i>
                                            <strong>Kiosk Login</strong><br>
                                            This token can be used for kiosk device authentication.
                                        </div>
                                        @break
                                @endswitch

                                <!-- Verification -->
                                <div class="mt-3">
                                    <h6>Verify Token</h6>
                                    <p class="text-muted">Use this form to verify a raw token against this record:</p>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="verify-token-input" 
                                               placeholder="Enter raw token...">
                                        <button class="btn btn-outline-primary" type="button" id="verify-this-token">
                                            <i class="fas fa-check"></i> Verify
                                        </button>
                                    </div>
                                    <div id="verification-result"></div>
                                </div>
                            </div>
                        </div>

                        <!-- User Information (if available) -->
                        @if($authToken->user)
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">User Information</h6>
                                </div>
                                <div class="card-body">
                                    <table class="table table-borderless">
                                        <tr>
                                            <th width="40%" class="text-muted">Name:</th>
                                            <td>{{ $authToken->user->name }}</td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">Email:</th>
                                            <td>{{ $authToken->user->email }}</td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">Status:</th>
                                            <td>
                                                <span class="badge bg-{{ $authToken->user->status == 'ACTIVE' ? 'success' : 'danger' }}">
                                                    {{ $authToken->user->status }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">Role:</th>
                                            <td>
                                                @if($authToken->user->roles->count() > 0)
                                                    @foreach($authToken->user->roles as $role)
                                                        <span class="badge bg-primary">{{ $role->name }}</span>
                                                    @endforeach
                                                @else
                                                    <span class="text-muted">No Role</span>
                                                @endif
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
<script>
$(document).ready(function() {
    // 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'
                        );
                    }
                });
            }
        });
    });

    // Verify token against this record
    $('#verify-this-token').on('click', function() {
        var rawToken = $('#verify-token-input').val();
        
        if (!rawToken) {
            Swal.fire('Error', 'Please enter a token to verify', '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: rawToken,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.valid && response.token.id == {{ $authToken->id }}) {
                    $('#verification-result').html(`
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle"></i> 
                            <strong>Token matches this record!</strong><br>
                            This is the correct raw token for this auth token.
                        </div>
                    `);
                } else if (response.valid) {
                    $('#verification-result').html(`
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i> 
                            <strong>Token belongs to different record</strong><br>
                            This token matches ID: ${response.token.id}
                        </div>
                    `);
                } else {
                    $('#verification-result').html(`
                        <div class="alert alert-danger">
                            <i class="fas fa-times-circle"></i> 
                            <strong>Invalid token</strong><br>
                            This token is invalid or expired.
                        </div>
                    `);
                }
            },
            error: function() {
                $('#verification-result').html(`
                    <div class="alert alert-danger">
                        <i class="fas fa-times-circle"></i> Error verifying token
                    </div>
                `);
            }
        });
    });
});
</script>
@endpush