@extends('layouts.admin')

@section('title', 'Device Fingerprints')
@section('page-title', 'Device Fingerprint Management')

@section('styles')
<style>
    .fingerprints-container {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        border: 1px solid #e5e7eb;
        overflow: hidden;
    }

    .fingerprints-header {
        background: linear-gradient(135deg, #371C16 0%, #B5702F 100%);
        color: white;
        padding: 2rem;
    }

    .fingerprints-header h2 {
        font-family: 'Lato', sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
    }

    .fingerprints-header p {
        margin: 0;
        opacity: 0.9;
        font-size: 0.875rem;
    }

    .fingerprints-content {
        padding: 2rem;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-warning {
        background: #f59e0b;
        color: white;
    }

    .btn-warning:hover {
        background: #d97706;
    }

    .btn-danger {
        background: #dc2626;
        color: white;
    }

    .btn-danger:hover {
        background: #b91c1c;
    }

    .fingerprints-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 1rem;
    }

    .fingerprints-table thead {
        background: #f9fafb;
    }

    .fingerprints-table th {
        padding: 1rem;
        text-align: left;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid #e5e7eb;
    }

    .fingerprints-table td {
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.875rem;
        color: #374151;
    }

    .fingerprints-table tbody tr:hover {
        background: #f9fafb;
    }

    .fingerprint-hash {
        font-family: monospace;
        font-size: 0.75rem;
        background: #f3f4f6;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        display: inline-block;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .badge-info {
        background: #dbeafe;
        color: #1e40af;
    }

    .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .btn-unblock {
        background: #10b981;
        color: white;
    }

    .btn-unblock:hover {
        background: #059669;
    }

    .empty-state {
        text-align: center;
        padding: 3rem;
        color: #6b7280;
    }

    .empty-state svg {
        width: 64px;
        height: 64px;
        margin: 0 auto 1rem;
        opacity: 0.3;
    }

    @media (max-width: 768px) {
        .action-buttons {
            flex-direction: column;
        }

        .btn {
            width: 100%;
            justify-content: center;
        }

        .fingerprints-table {
            font-size: 0.75rem;
        }

        .fingerprints-table th,
        .fingerprints-table td {
            padding: 0.75rem 0.5rem;
        }
    }
</style>
@endsection

@section('content')
<div class="fingerprints-container">
    <div class="fingerprints-header">
        <h2>Device Fingerprint Management</h2>
        <p>Manage duplicate order prevention - View and unblock devices</p>
    </div>

    <div class="fingerprints-content">
        <div class="action-buttons">
            <button onclick="clearExpired()" class="btn btn-warning">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Clear Expired (24h+)
            </button>
            <button onclick="clearAll()" class="btn btn-danger">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                </svg>
                Clear All Fingerprints
            </button>
        </div>

        @if(count($activeFingerprints) > 0)
            <table class="fingerprints-table">
                <thead>
                    <tr>
                        <th>Device Fingerprint</th>
                        <th>Student Name</th>
                        <th>Order Count</th>
                        <th>Last Order</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($activeFingerprints as $fp)
                    <tr>
                        <td>
                            <span class="fingerprint-hash" title="{{ $fp['device_fingerprint'] }}">
                                {{ substr($fp['device_fingerprint'], 0, 16) }}...
                            </span>
                        </td>
                        <td>{{ $fp['student_name'] }}</td>
                        <td>
                            <span class="badge badge-info">{{ $fp['order_count'] }} order(s)</span>
                        </td>
                        <td>{{ \Carbon\Carbon::parse($fp['last_order_at'])->diffForHumans() }}</td>
                        <td>
                            <button onclick="unblockDevice('{{ $fp['device_fingerprint'] }}')" class="btn btn-sm btn-unblock">
                                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
                                </svg>
                                Unblock Device
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div class="empty-state">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <h3 style="margin: 0 0 0.5rem 0; color: #374151;">No Active Device Blocks</h3>
                <p style="margin: 0;">All devices can currently place orders. Blocks will appear here after a duplicate submission attempt.</p>
            </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<script>
    function unblockDevice(fingerprint) {
        if (!confirm('Are you sure you want to unblock this device? They will be able to place orders again.')) {
            return;
        }

        fetch(`/admin/device-fingerprints/${fingerprint}/clear`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                location.reload();
            } else {
                alert('Error unblocking device');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error unblocking device');
        });
    }

    function clearExpired() {
        if (!confirm('Clear all device fingerprints older than 24 hours?')) {
            return;
        }

        fetch('/admin/device-fingerprints/clear-expired', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                location.reload();
            } else {
                alert('Error clearing expired fingerprints');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error clearing expired fingerprints');
        });
    }

    function clearAll() {
        if (!confirm('⚠️ WARNING: This will clear ALL device fingerprints and allow all devices to place orders again. Continue?')) {
            return;
        }

        fetch('/admin/device-fingerprints/clear-all', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                location.reload();
            } else {
                alert('Error clearing all fingerprints');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error clearing all fingerprints');
        });
    }
</script>
@endsection


