@extends('admin.layouts.app')

@section('title', __('admin.agents.approvals.title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.agents.approvals.title'))

@push('styles')
<style>
    .ap-sub { color:#64748b; font-size:13.5px; margin:-4px 0 16px; }

    /* Toolbar — status pills + date range in one cohesive bar */
    .ap-toolbar { background:#fff; border:1px solid #e8edf3; border-radius:16px; padding:16px 18px; margin:0 0 16px; display:flex; flex-wrap:wrap; gap:18px 28px; align-items:flex-end; justify-content:space-between; }
    .ap-group { display:flex; flex-direction:column; gap:8px; }
    .ap-group__label { font-size:10px; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; }
    .ap-filters { display:flex; gap:7px; flex-wrap:wrap; }
    .ap-filters a { padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700; text-decoration:none; background:#f1f5f9; color:#475569; transition:.15s; }
    .ap-filters a:hover { background:#e2e8f0; }
    .ap-filters a.is-active { background:#4f46e5; color:#fff; box-shadow:0 2px 8px rgba(79,70,229,.28); }
    .ap-dates { display:flex; align-items:flex-end; gap:10px; }
    .ap-dates .fld { display:flex; flex-direction:column; gap:3px; }
    .ap-dates label { font-size:10px; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; }
    .ap-dates input[type=date] { border:1px solid #e2e8f0; border-radius:9px; padding:7px 10px; font-size:12.5px; color:#0f172a; }
    .ap-dates input[type=date]:focus { border-color:#4f46e5; outline:none; }
    .ap-dates .btn-apply { background:#4f46e5; color:#fff; border:0; border-radius:9px; padding:8px 16px; font-size:12.5px; font-weight:700; cursor:pointer; }
    .ap-dates .btn-apply:hover { background:#4338ca; }
    .ap-dates .btn-clear { font-size:12px; color:#64748b; text-decoration:none; align-self:center; padding:8px 4px; }
    .ap-summary { font-size:12.5px; color:#94a3b8; font-weight:600; margin:0 0 12px; }

    /* Table */
    .ap-card { background:#fff; border:1px solid #e8edf3; border-radius:16px; overflow:hidden; }
    .ap-table { width:100%; border-collapse:collapse; }
    .ap-table thead th { text-align:start; padding:13px 16px; font-size:11px; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; background:#fbfcfe; border-bottom:1px solid #eef2f7; }
    .ap-table td { padding:13px 16px; font-size:13.5px; border-bottom:1px solid #f4f6fa; vertical-align:middle; }
    .ap-table tbody tr:last-child td { border-bottom:0; }
    .ap-table tbody tr.row-clickable { cursor:pointer; transition:.12s; }
    .ap-table tbody tr.row-clickable:hover { background:#fbfcff; }
    .ap-id { color:#cbd5e1; font-weight:700; font-size:12px; }
    .ap-startup { font-weight:700; color:#0f172a; } .ap-run { color:#94a3b8; font-size:11px; }
    .ap-agent { color:#475569; } .ap-actionkey { background:#f1f5f9; color:#475569; padding:2px 8px; border-radius:6px; font-size:11.5px; font-weight:600; }
    .ap-badge { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; }
    .ap-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
    .ap-risk--high { background:#fef2f2; color:#c62828; } .ap-risk--expected { background:#fff7ed; color:#b45309; } .ap-risk--none { background:#f1f5f9; color:#64748b; }
    .ap-st--pending { background:#fff7ed; color:#b45309; } .ap-st--approved { background:#ecfdf5; color:#047857; }
    .ap-st--rejected { background:#fef2f2; color:#c62828; } .ap-st--cancelled, .ap-st--expired { background:#f1f5f9; color:#64748b; }
    .ap-when { color:#94a3b8; font-size:12.5px; white-space:nowrap; }
    .ap-view { color:#4f46e5; font-weight:700; text-decoration:none; font-size:12.5px; }

    /* Empty state */
    .ap-empty { text-align:center; padding:56px 20px; }
    .ap-empty__icon { width:54px; height:54px; border-radius:16px; background:#eef2ff; color:#4f46e5; display:inline-flex; align-items:center; justify-content:center; margin:0 0 14px; }
    .ap-empty__title { font-size:15px; font-weight:800; color:#334155; margin:0 0 4px; }
    .ap-empty__sub { font-size:13px; color:#94a3b8; margin:0; }

    @media (max-width:820px) {
        .ap-toolbar { flex-direction:column; align-items:stretch; }
        .ap-table thead { display:none; }
        .ap-table, .ap-table tbody, .ap-table tr, .ap-table td { display:block; width:100%; }
        .ap-table tr { border-bottom:1px solid #eef2f7; padding:8px 4px; }
        .ap-table td { border:0; padding:5px 16px; }
        .ap-table td::before { content:attr(data-label); font-weight:800; color:#94a3b8; font-size:10.5px; text-transform:uppercase; display:block; margin-bottom:2px; }
    }
</style>
@endpush

@section('content')
<p class="ap-sub">{{ __('admin.agents.approvals.subtitle') }}</p>

@if (session('status'))<div class="alert alert-success">{{ session('status') }}</div>@endif
@if (session('error'))<div class="alert alert-danger">{{ session('error') }}</div>@endif

<div class="ap-toolbar">
    <div class="ap-group">
        <span class="ap-group__label">{{ __('admin.agents.approvals.filter_status') }}</span>
        <div class="ap-filters">
            <a href="{{ route('admin.approvals.index', array_filter(['date_from' => $dateFrom, 'date_to' => $dateTo])) }}" class="{{ ! request('status') ? 'is-active' : '' }}">{{ __('admin.agents.approvals.tab_pending') }}</a>
            @foreach ($statuses as $st)
                <a href="{{ route('admin.approvals.index', array_filter(['status' => $st, 'date_from' => $dateFrom, 'date_to' => $dateTo])) }}" class="{{ request('status') === $st ? 'is-active' : '' }}">{{ ucfirst($st) }}</a>
            @endforeach
        </div>
    </div>

    {{-- Date range (created_at) — combines with the status filter, URL-driven --}}
    <div class="ap-group">
        <span class="ap-group__label">{{ __('admin.agents.approvals.filter_date') }}</span>
        <form method="GET" action="{{ route('admin.approvals.index') }}" class="ap-dates">
            @if (request('status'))<input type="hidden" name="status" value="{{ request('status') }}">@endif
            <div class="fld"><label for="date_from">{{ __('admin.agents.approvals.date_from') }}</label><input type="date" id="date_from" name="date_from" value="{{ $dateFrom }}" max="{{ $dateTo }}"></div>
            <div class="fld"><label for="date_to">{{ __('admin.agents.approvals.date_to') }}</label><input type="date" id="date_to" name="date_to" value="{{ $dateTo }}" min="{{ $dateFrom }}"></div>
            <button type="submit" class="btn-apply">{{ __('admin.agents.approvals.apply') }}</button>
            @if ($dateFrom || $dateTo)
                <a href="{{ route('admin.approvals.index', array_filter(['status' => request('status')])) }}" class="btn-clear">{{ __('admin.agents.approvals.clear') }}</a>
            @endif
        </form>
    </div>
</div>

<p class="ap-summary">{{ __('admin.agents.approvals.count', ['n' => $approvals->total()]) }}</p>

<div class="ap-card">
    @if ($approvals->isEmpty())
        <div class="ap-empty">
            <div class="ap-empty__icon">
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            </div>
            <p class="ap-empty__title">{{ __('admin.agents.approvals.empty_title') }}</p>
            <p class="ap-empty__sub">{{ __('admin.agents.approvals.empty') }}</p>
        </div>
    @else
        <table class="ap-table">
            <thead>
                <tr>
                    <th>#</th><th>{{ __('admin.nav.startups') }}</th><th>{{ __('admin.action_details.agent') }}</th><th>Action</th>
                    <th>Risk</th><th>Status</th><th>Created</th><th>Expires</th><th></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($approvals as $a)
                    <tr class="row-clickable" data-href="{{ route('admin.approvals.show', $a) }}">
                        <td data-label="#"><span class="ap-id">#{{ $a->id }}</span></td>
                        <td data-label="Startup"><span class="ap-startup">{{ $a->startup?->name ?? '—' }}</span><br><span class="ap-run">run #{{ $a->agent_run_id }}</span></td>
                        <td data-label="Agent"><span class="ap-agent">{{ $a->agent?->name ?? $a->agent_key }}</span></td>
                        <td data-label="Action"><span class="ap-actionkey">{{ $a->action_key }}</span></td>
                        <td data-label="Risk"><span class="ap-badge ap-risk--{{ $a->risk_level }}">{{ ucfirst($a->risk_level) }}</span></td>
                        <td data-label="Status"><span class="ap-badge ap-st--{{ $a->status }}">{{ ucfirst($a->status) }}</span></td>
                        <td data-label="Created"><span class="ap-when">{{ optional($a->created_at)->format('Y-m-d H:i') }}</span></td>
                        <td data-label="Expires"><span class="ap-when">{{ optional($a->expires_at)->format('Y-m-d H:i') ?? '—' }}</span></td>
                        <td><a href="{{ route('admin.approvals.show', $a) }}" class="ap-view">{{ __('admin.actions.view') }} →</a></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
    @if ($approvals->hasPages())
        <div class="pagination-wrap" style="padding:12px 16px;">{{ $approvals->links() }}</div>
    @endif
</div>
@endsection