@extends('layouts.app')

@section('title', 'Login History')
@section('page', 'logs')

@php
  $statusVariant = fn ($s) => match ($s) {
    'success' => 'success',
    'failed' => 'danger',
    'inactive' => 'warning',
    'locked' => 'warning',
    default => 'neutral',
  };
  $statusLabel = fn ($s) => match ($s) {
    'success' => 'Success',
    'failed' => 'Failed',
    'inactive' => 'Inactive',
    'locked' => 'Locked',
    default => ucfirst((string) $s),
  };
@endphp

@section('content')
  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <x-data-table
    id="login-history-table"
    class="catalog-table"
    title="Login History"
    subtitle="Track user sign-in attempts and outcomes."
    search-placeholder="Search login history..."
    :selectable="false"
    :page-size="15"
  >
    <x-slot:toolbarActions>
      @if ($canManage ?? false)
        <form method="post" action="{{ route('settings.logs.clear') }}" class="d-inline" data-log-clear>
          @csrf
          <button type="submit" class="btn btn-outline-danger">
            <i class="bi bi-trash"></i> Clear History
          </button>
        </form>
      @endif
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Success</option>
        <option>Failed</option>
        <option>Inactive</option>
        <option>Locked</option>
      </select>
    </x-slot:filters>
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats product-stats--4 justify-content-start">
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--primary">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-clock-history"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total</p>
                <p class="product-kpi__value">{{ $histories->count() }}</p>
                <p class="product-kpi__meta">Recent login events</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--success">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-check-circle"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Success</p>
                <p class="product-kpi__value">{{ $successCount }}</p>
                <p class="product-kpi__meta">Signed in</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--danger">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-x-circle"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Failed</p>
                <p class="product-kpi__value">{{ $failedCount }}</p>
                <p class="product-kpi__meta">Blocked / wrong password</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="Date / Time" col="datetime" />
      <x-data-table-th label="User" col="user" />
      <x-data-table-th label="Email" col="email" />
      <x-data-table-th label="IP Address" col="ip" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($histories as $row)
        <tr>
          <td data-col="datetime" data-sort-value="{{ $row->logged_in_at?->timestamp }}">
            {{ $row->logged_in_at?->format('Y-m-d H:i:s') ?? '—' }}
          </td>
          <td data-col="user" class="cell-primary">{{ $row->user?->name ?? '—' }}</td>
          <td data-col="email">{{ $row->email ?: '—' }}</td>
          <td data-col="ip">{{ $row->ip_address ?: '—' }}</td>
          <td data-col="status">
            <x-badge :variant="$statusVariant($row->status)">{{ $statusLabel($row->status) }}</x-badge>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="5" class="text-center text-muted py-4">No login history yet.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script>
    document.addEventListener('submit', function (e) {
      const clearForm = e.target.closest('[data-log-clear]');
      if (clearForm && !confirm('Clear all login history?')) {
        e.preventDefault();
      }
    });
  </script>
@endpush