@extends('layouts.app')

@php
    $pageTitle = 'Users';
    $pageHeading = 'Manage Users';
    $pageDescription = 'Kelola user login ADMS (admin only).';
@endphp

@section('content')
    @php($blacklistedIps = $blacklists->pluck('ip_address')->all())
    @php($activeBlacklistCount = $blacklists->where('is_active', true)->count())
    @php($activeLockoutCount = $lockouts->filter(fn ($row) => filled($row->blocked_until) && \Illuminate\Support\Carbon::parse($row->blocked_until)->isFuture())->count())
    @php($failedAttemptCount = $recentAttempts->where('is_success', false)->count())
    @php($successfulAttemptCount = $recentAttempts->where('is_success', true)->count())

    <style>
        .user-summary {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 12px;
        }

        .user-summary-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-height: 48px;
            padding: 8px 12px;
            border: 1px solid #aebbc7;
            border-left: 5px solid #0d6efd;
            border-radius: 7px;
            background: #ffffff;
        }

        .user-summary-item span {
            color: #475467;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .user-summary-item strong {
            color: #172b4d;
            font-size: 20px;
            line-height: 1;
        }

        .user-summary-item--blacklist { border-left-color: #dc3545; background: #fff0f1; }
        .user-summary-item--lockout { border-left-color: #fd7e14; background: #fff5e8; }
        .user-summary-item--attempt { border-left-color: #198754; background: #edf9f2; }

        .user-registry,
        .user-security-card,
        .user-attempt-card {
            border: 1px solid #aebbc7;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
        }

        .user-registry {
            border-top: 4px solid #0d6efd;
        }

        .user-security-card {
            border-top: 4px solid #dc3545;
        }

        .user-attempt-card {
            border-top: 4px solid #198754;
        }

        .user-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }

        .user-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            padding: 6px 12px;
            border: 1px solid transparent;
            border-radius: 5px;
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
        }

        .user-btn:hover { color: #ffffff; filter: brightness(.9); }
        .user-btn--primary { background: #0d6efd; border-color: #0a58ca; }
        .user-btn--secondary { background: #495057; border-color: #343a40; }
        .user-btn--danger { background: #dc3545; border-color: #b02a37; }
        .user-btn--warning { background: #c44b00; border-color: #9a3b00; }

        .user-registry table thead th,
        .user-security-card table thead th,
        .user-attempt-card table thead th {
            background: #1f4e78;
            color: #ffffff;
            border-color: #406b91;
        }

        .user-registry table th,
        .user-registry table td,
        .user-security-card table th,
        .user-security-card table td,
        .user-attempt-card table th,
        .user-attempt-card table td {
            padding: 7px 8px;
        }

        .user-registry table tbody tr:nth-child(even) td,
        .user-security-card table tbody tr:nth-child(even) td,
        .user-attempt-card table tbody tr:nth-child(even) td {
            background: #f1f5f9;
        }

        .user-registry .status,
        .user-security-card .status,
        .user-attempt-card .status {
            border: 1px solid currentColor;
            font-weight: 800;
        }

        .user-role--admin { background: #c44b00; color: #ffffff; }
        .user-role--operator { background: #0d6efd; color: #ffffff; }
        .user-role--viewer { background: #495057; color: #ffffff; }
        .user-state--active { background: #198754; color: #ffffff; }
        .user-state--inactive { background: #dc3545; color: #ffffff; }
        .user-state--blocked { background: #dc3545; color: #ffffff; }
        .user-state--warning { background: #ffc107; color: #332701; }
        .user-state--success { background: #198754; color: #ffffff; }
        .user-state--failed { background: #c44b00; color: #ffffff; }

        @media (max-width: 800px) {
            .user-summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    </style>

    <div class="user-summary">
        <div class="user-summary-item">
            <span>Total User</span>
            <strong>{{ method_exists($rows, 'total') ? $rows->total() : $rows->count() }}</strong>
        </div>
        <div class="user-summary-item user-summary-item--blacklist">
            <span>IP Blacklist</span>
            <strong>{{ $activeBlacklistCount }}</strong>
        </div>
        <div class="user-summary-item user-summary-item--lockout">
            <span>User Lockout</span>
            <strong>{{ $activeLockoutCount }}</strong>
        </div>
        <div class="user-summary-item user-summary-item--attempt">
            <span>Login Sukses / Gagal</span>
            <strong>{{ $successfulAttemptCount }} / {{ $failedAttemptCount }}</strong>
        </div>
    </div>

    @if (session('status'))
        <section class="hero" style="border-color: rgba(45, 106, 79, 0.24); background: rgba(45, 106, 79, 0.08);">
            <strong style="display: block; color: var(--green-deep); margin-bottom: 6px;">Info</strong>
            <div>{{ session('status') }}</div>
        </section>
    @endif

    @if ($errors->any())
        <section class="hero" style="border-color: rgba(180, 35, 24, 0.2); background: rgba(180, 35, 24, 0.06);">
            <strong style="display: block; color: var(--red); margin-bottom: 8px;">Ada error</strong>
            <ul style="margin: 0; padding-left: 18px; color: var(--ink);">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </section>
    @endif

    <section class="table-card user-registry">
        <div class="user-toolbar">
            <form method="GET" action="{{ route('users.index') }}" class="filters" style="margin:0;">
                <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Cari username / email / nama...">
                <select name="per_page">
                    @foreach ([10,25,50,100,250] as $size)
                        <option value="{{ $size }}" @selected((int) ($filters['per_page'] ?? 25) === $size)>{{ $size }} rows</option>
                    @endforeach
                </select>
                <button type="submit" class="user-btn user-btn--primary">Filter</button>
                <a href="{{ route('users.index') }}" class="user-btn user-btn--secondary">Reset</a>
            </form>
            <a href="{{ route('users.create') }}" class="user-btn user-btn--primary">Tambah User</a>
        </div>

        <div data-datatable data-datatable-server="1">
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Status</th>
                            <th>Last Login</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $row)
                            <tr>
                                <td style="font-weight:800;">{{ $row->username }}</td>
                                <td>{{ trim(($row->first_name ?? '').' '.($row->last_name ?? '')) ?: '-' }}</td>
                                <td>{{ $row->email ?: '-' }}</td>
                                <td>
                                    @php($resolvedRole = strtolower((string) ($row->role ?? ((int) ($row->is_superuser ?? 0) === 1 ? 'admin' : 'viewer'))))
                                    @if ($resolvedRole === 'admin')
                                        <span class="status user-role--admin">ADMIN</span>
                                    @elseif ($resolvedRole === 'operator')
                                        <span class="status user-role--operator">OPERATOR</span>
                                    @else
                                        <span class="status user-role--viewer">DEMO / VIEWER</span>
                                    @endif
                                </td>
                                <td>
                                    @if ((int) ($row->is_active ?? 0) === 1)
                                        <span class="status user-state--active">ACTIVE</span>
                                    @else
                                        <span class="status user-state--inactive">INACTIVE</span>
                                    @endif
                                </td>
                                <td class="muted" style="font-size: 12px;">{{ $row->last_login ?: '-' }}</td>
                                <td style="white-space:nowrap;">
                                    <a class="user-btn user-btn--secondary" href="{{ route('users.edit', $row->id) }}">Edit</a>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="muted">Belum ada user.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if (method_exists($rows, 'links'))
            <div style="margin-top: 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;">
                <div class="muted" style="font-size:13px;">
                    Menampilkan {{ $rows->firstItem() ?? 0 }}-{{ $rows->lastItem() ?? 0 }} dari {{ $rows->total() }} user
                </div>
                {{ $rows->onEachSide(1)->links() }}
            </div>
        @endif
    </section>

    <section class="table-card user-security-card">
        <div style="display:grid; gap:18px; grid-template-columns: 1.1fr 0.9fr;">
            <div style="border:1px solid rgba(31,42,31,0.08); border-radius:20px; padding:20px; background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.38);">
                <div style="display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;">
                    <div>
                        <h3 style="margin:0 0 6px; font-size:20px;">Blacklist IP Login</h3>
                        <div class="muted" style="font-size:13px;">IP di bawah ini diblokir hanya untuk login user aplikasi. Traffic mesin tidak ikut terdampak.</div>
                    </div>
                    <span class="status stale">{{ $activeBlacklistCount }} aktif</span>
                </div>

                <form method="POST" action="{{ route('users.login-ip-blacklists.store') }}" style="display:grid; grid-template-columns:minmax(220px, 260px) minmax(260px, 1fr) auto; gap:12px; margin-top:16px; padding:16px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.68)); border:1px solid rgba(31,42,31,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); align-items:end;">
                    @csrf
                    <div style="display:grid; gap:6px;">
                        <label for="blacklist-ip-address" style="display:block; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;">IP Address</label>
                        <input id="blacklist-ip-address" type="text" name="ip_address" value="{{ old('ip_address') }}" placeholder="Contoh: 192.168.1.10" required style="width:100%; min-height:44px; padding:11px 14px; border-radius:14px; border:1px solid var(--line); background:var(--panel-strong); color:var(--ink);">
                    </div>
                    <div style="display:grid; gap:6px;">
                        <label for="blacklist-ip-reason" style="display:block; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;">Reason</label>
                        <input id="blacklist-ip-reason" type="text" name="reason" value="{{ old('reason') }}" placeholder="Alasan blacklist IP..." style="width:100%; min-height:44px; padding:11px 14px; border-radius:14px; border:1px solid var(--line); background:var(--panel-strong); color:var(--ink);">
                    </div>
                    <div style="display:flex; align-items:end;">
                        <button type="submit" class="user-btn user-btn--danger" style="min-height:44px; padding:0 18px; white-space:nowrap;">Tambah IP</button>
                    </div>
                </form>

                <div data-datatable style="margin-top:14px;">
                    <div class="table-scroll">
                        <table>
                            <thead>
                                <tr>
                                    <th>IP</th>
                                    <th>Status</th>
                                    <th>Reason</th>
                                    <th>Last Hit</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($blacklists as $blacklist)
                                    <tr>
                                        <td style="font-weight:800;">{{ $blacklist->ip_address }}</td>
                                        <td>
                                            @if ($blacklist->is_active)
                                                <span class="status user-state--blocked">BLOCKED</span>
                                            @else
                                                <span class="status user-state--warning">INACTIVE</span>
                                            @endif
                                        </td>
                                        <td>{{ $blacklist->reason ?: '-' }}</td>
                                        <td class="muted" style="font-size:12px;">{{ $blacklist->last_hit_at ?: '-' }}</td>
                                        <td>
                                            <form method="POST" action="{{ route('users.login-ip-blacklists.destroy', $blacklist->id) }}" onsubmit="return confirm('Hapus IP blacklist ini?')" style="display:inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="user-btn user-btn--danger">Hapus</button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="muted">Belum ada IP yang diblacklist.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div style="border:1px solid rgba(31,42,31,0.08); border-radius:20px; padding:20px; background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.38);">
                <div style="display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;">
                    <div>
                        <h3 style="margin:0 0 6px; font-size:20px;">User Lockout Aktif</h3>
                        <div class="muted" style="font-size:13px;">3 kali gagal login akan mengunci user selama 15 menit. Di sini admin bisa membuka lockout lebih cepat jika diperlukan.</div>
                    </div>
                    <span class="status">{{ $activeLockoutCount }} aktif</span>
                </div>

                <div data-datatable style="margin-top:14px;">
                    <div class="table-scroll">
                        <table>
                            <thead>
                                <tr>
                                    <th>Login</th>
                                    <th>Attempts</th>
                                    <th>Blocked Until</th>
                                    <th>Last IP</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($lockouts as $lockout)
                                    <tr>
                                        <td style="font-weight:800;">{{ $lockout->login_identifier }}</td>
                                        <td><span class="status user-state--warning">{{ (int) $lockout->failed_attempts }}x</span></td>
                                        <td class="muted" style="font-size:12px;">{{ $lockout->blocked_until ?: '-' }}</td>
                                        <td>{{ $lockout->last_ip_address ?: '-' }}</td>
                                        <td>
                                            <form method="POST" action="{{ route('users.login-lockouts.clear', $lockout->id) }}" onsubmit="return confirm('Bersihkan lockout user ini?')" style="display:inline;">
                                                @csrf
                                                <button type="submit" class="user-btn user-btn--warning">Clear</button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="muted">Belum ada lockout tercatat.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="table-card user-attempt-card">
        <div style="display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;">
            <div>
                <h3 style="margin:0 0 6px; font-size:20px;">Recent Login Attempts</h3>
                <div class="muted" style="font-size:13px;">Semua percobaan login user web direkam dengan login input, IP, dan hasil akhirnya.</div>
            </div>
            <span class="status pending">{{ $recentAttempts->count() }} log terbaru</span>
        </div>

        <div data-datatable style="margin-top:14px;">
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>Attempted At</th>
                            <th>Login</th>
                            <th>IP</th>
                            <th>Status</th>
                            <th>Reason</th>
                            <th>User Agent</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recentAttempts as $attempt)
                            <tr>
                                <td class="muted" style="font-size:12px;">{{ $attempt->attempted_at }}</td>
                                <td style="font-weight:800;">{{ $attempt->login_identifier }}</td>
                                <td>{{ $attempt->ip_address }}</td>
                                <td>
                                    @if ($attempt->is_success)
                                        <span class="status user-state--success">SUCCESS</span>
                                    @else
                                        <span class="status user-state--failed">FAILED</span>
                                    @endif
                                </td>
                                <td>{{ $attempt->failure_reason ?: '-' }}</td>
                                <td class="muted" style="font-size:12px; max-width:320px; white-space:normal;">{{ $attempt->user_agent ?: '-' }}</td>
                                <td style="white-space:nowrap;">
                                    @if (! $attempt->is_success && ! in_array($attempt->ip_address, $blacklistedIps, true))
                                        <form method="POST" action="{{ route('users.login-ip-blacklists.store') }}" style="display:inline;">
                                            @csrf
                                            <input type="hidden" name="ip_address" value="{{ $attempt->ip_address }}">
                                            <input type="hidden" name="reason" value="Diblacklist dari recent login attempts.">
                                            <button type="submit" class="user-btn user-btn--danger">Blacklist IP</button>
                                        </form>
                                    @else
                                        <span class="muted" style="font-size:12px;">-</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="muted">Belum ada login attempt tercatat.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endsection