@extends('layouts.app')

@section('title', 'Login Activity')

@section('content')
<x-page-header title="Login Activity" subtitle="Track successful and failed login attempts" icon="shield" icon-color="violet" />

<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4 mb-6">
    <x-stat-card label="Total Attempts" :value="number_format($stats['total'])" icon="users" color="indigo" />
    <x-stat-card label="Successful" :value="number_format($stats['success'])" icon="check" color="emerald" delay="50" />
    <x-stat-card label="Failed" :value="number_format($stats['failed'])" icon="x" color="red" delay="100" />
    <x-stat-card label="Failed Today" :value="number_format($stats['today_failed'])" icon="alerts" color="amber" delay="150" />
</div>

<form method="GET" class="glass-card-subtle p-4 sm:p-5 mb-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
        <div>
            <label class="field-label text-xs">Status</label>
            <select name="status" class="field-select">
                <option value="">All statuses</option>
                <option value="success" @selected(request('status') === 'success')>Success</option>
                <option value="failed" @selected(request('status') === 'failed')>Failed</option>
            </select>
        </div>
        <div>
            <label class="field-label text-xs">Channel</label>
            <select name="channel" class="field-select">
                <option value="">All channels</option>
                <option value="web" @selected(request('channel') === 'web')>Web</option>
                <option value="api" @selected(request('channel') === 'api')>API / Mobile</option>
            </select>
        </div>
        <div>
            <label class="field-label text-xs">Email</label>
            <input type="text" name="email" value="{{ request('email') }}" placeholder="Search email" class="field-input">
        </div>
        <div>
            <label class="field-label text-xs">From</label>
            <input type="date" name="date_from" value="{{ request('date_from') }}" class="field-input">
        </div>
        <div>
            <label class="field-label text-xs">To</label>
            <input type="date" name="date_to" value="{{ request('date_to') }}" class="field-input">
        </div>
    </div>
    <button type="submit" class="btn-primary w-full sm:w-auto mt-4">
        <x-icon name="search" class="w-4 h-4" />
        Filter
    </button>
</form>

<div class="table-wrap">
    <div class="overflow-x-auto md:overflow-visible">
        <table class="data-table responsive-table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Status</th>
                    <th>Email</th>
                    <th>User</th>
                    <th>Channel</th>
                    <th>IP Address</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($logs as $log)
                    <tr class="{{ $log->status === 'failed' ? 'bg-red-500/5' : '' }}">
                        <td data-label="Time" class="whitespace-nowrap text-xs sm:text-sm tabular-nums">{{ $log->created_at->format('M d, H:i') }}</td>
                        <td data-label="Status">
                            <span class="rounded-full px-2 py-0.5 text-xs capitalize {{ $log->statusColor() }}">
                                {{ $log->status }}
                            </span>
                        </td>
                        <td data-label="Email" class="break-all">{{ $log->email }}</td>
                        <td data-label="User">{{ $log->user?->name ?? '—' }}</td>
                        <td data-label="Channel">
                            <span class="badge-info capitalize">{{ $log->channel }}</span>
                        </td>
                        <td data-label="IP" class="font-mono text-xs">{{ $log->ip_address ?? '—' }}</td>
                        <td data-label="Details" class="text-slate-400 text-xs break-words max-w-xs">
                            {{ $log->failure_reason ?: ($log->context ?: '—') }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="!block text-center py-12 text-slate-500">No login activity recorded yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-4">{{ $logs->links() }}</div>
@endsection