@extends('layouts.customer')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-8">Security Center</h1>

    {{-- Current Session --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Current Session</h2>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="p-4 bg-gray-50 rounded-lg">
                <p class="text-xs text-gray-500 mb-1">Device</p>
                <p class="text-sm font-medium text-gray-900">{{ $currentSession->device ?? 'Unknown Device' }}</p>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg">
                <p class="text-xs text-gray-500 mb-1">IP Address</p>
                <p class="text-sm font-medium text-gray-900 font-mono">{{ $currentSession->ip_address ?? 'N/A' }}</p>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg">
                <p class="text-xs text-gray-500 mb-1">Last Active</p>
                <p class="text-sm font-medium text-gray-900">{{ $currentSession->last_active ?? 'Now' }}</p>
            </div>
        </div>
    </div>

    {{-- Login History --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-6">
        <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-semibold text-gray-900">Login History</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">
                        <th class="px-6 py-3">Date</th>
                        <th class="px-6 py-3">IP Address</th>
                        <th class="px-6 py-3">Device</th>
                        <th class="px-6 py-3">Status</th>
                        <th class="px-6 py-3">Browser</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($loginHistory ?? [] as $login)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-3 text-sm text-gray-500">{{ $login->created_at->format('M d, Y h:i A') }}</td>
                        <td class="px-6 py-3 text-sm font-mono text-gray-600">{{ $login->ip_address }}</td>
                        <td class="px-6 py-3 text-sm text-gray-700 max-w-xs truncate">{{ $login->device }}</td>
                        <td class="px-6 py-3">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                @if($login->status === 'success') bg-emerald-100 text-emerald-700
                                @else bg-rose-100 text-rose-700 @endif">
                                {{ ucfirst($login->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-3 text-sm text-gray-600">{{ $login->browser ?? '---' }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">No login history</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Security Events --}}
    @if(isset($securityEvents) && $securityEvents->count())
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Security Events</h2>
        <div class="space-y-3">
            @foreach($securityEvents as $event)
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center space-x-3">
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                        @if($event->type === 'password_change') bg-amber-100 text-amber-700
                        @elseif($event->type === 'login') bg-emerald-100 text-emerald-700
                        @elseif($event->type === 'pin_change') bg-blue-100 text-blue-700
                        @else bg-gray-100 text-gray-700 @endif">
                        {{ str_replace('_', ' ', ucfirst($event->type)) }}
                    </span>
                    <span class="text-sm text-gray-700">{{ $event->description }}</span>
                </div>
                <span class="text-xs text-gray-400">{{ $event->created_at->diffForHumans() }}</span>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        {{-- Change Login PIN --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Change Login PIN</h2>
            <form method="POST" action="{{ route('customer.security.changeLoginPin') }}">
                @csrf
                @method('POST')
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Current PIN</label>
                        <input type="password" name="current_pin" maxlength="4" inputmode="numeric" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                        @error('current_pin')
                        <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">New PIN</label>
                        <input type="password" name="new_pin" maxlength="4" inputmode="numeric" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                        @error('new_pin')
                        <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New PIN</label>
                        <input type="password" name="new_pin_confirmation" maxlength="4" inputmode="numeric" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                    </div>
                    <button type="submit" class="w-full py-2.5 bg-[#0D6B58] text-white text-sm font-semibold rounded-lg hover:bg-[#0A5A49] transition">
                        Update Login PIN
                    </button>
                </div>
            </form>
        </div>

        {{-- Change Transaction PIN --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Change Transaction PIN</h2>
            <form method="POST" action="{{ route('customer.security.changeTransactionPin') }}">
                @csrf
                @method('POST')
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Current PIN</label>
                        <input type="password" name="current_pin" maxlength="4" inputmode="numeric" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                        @error('current_pin')
                        <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">New PIN</label>
                        <input type="password" name="new_pin" maxlength="4" inputmode="numeric" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                        @error('new_pin')
                        <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New PIN</label>
                        <input type="password" name="new_pin_confirmation" maxlength="4" inputmode="numeric" class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0D6B58]/20 focus:border-[#0D6B58]" required>
                    </div>
                    <button type="submit" class="w-full py-2.5 bg-[#0D6B58] text-white text-sm font-semibold rounded-lg hover:bg-[#0A5A49] transition">
                        Update Transaction PIN
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Active Devices --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-gray-900">Active Devices</h2>
            <form method="POST" action="{{ route('customer.security.logoutAll') }}" onsubmit="return confirm('This will log you out from all other devices. Continue?')">
                @csrf
                @method('POST')
                <button type="submit" class="text-sm text-rose-600 hover:underline font-medium">Logout All Devices</button>
            </form>
        </div>
        <div class="space-y-3">
            @forelse($activeDevices ?? [] as $device)
            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
                        @if(strpos($device->device, 'iPhone') !== false || strpos($device->device, 'Android') !== false)
                        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                        @else
                        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        @endif
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900">{{ $device->device }}</p>
                        <p class="text-xs text-gray-500">{{ $device->ip_address }} &middot; {{ $device->last_active->diffForHumans() }}</p>
                    </div>
                </div>
                @if(!($device->is_current ?? false))
                <form method="POST" action="{{ route('customer.security.logoutDevice', $device->id) }}">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="text-xs text-rose-600 hover:underline">Logout</button>
                </form>
                @else
                <span class="text-xs text-emerald-600 font-medium">Current</span>
                @endif
            </div>
            @empty
            <p class="text-sm text-gray-500 text-center py-4">No active devices</p>
            @endforelse
        </div>
    </div>

</div>
@endsection