@layout('theme::layouts/admin')

@section('title')Reports@endsection
@section('page_title')Reports@endsection

{#
    Reasoning is in docs/design/2026-08-06-the-design-system.md.

    The filter was three buttons that each said their own count. It is a tab
    strip now: the counts are the point of it, and three primary-vs-outline
    buttons in a row read as three actions rather than one choice with three
    positions.

    🚨 It lives in `page_tabs`, not in `content`. Drawn inside content it sat
    below the header's bottom border and drew its own on top, so the page had
    two divider lines a few pixels apart that did not line up — which is
    exactly as unfinished as it sounds. The shell owns the tab bar.
#}
@php
    $tabs = [
        ['key' => 'open', 'label' => 'Open'],
        ['key' => 'resolved', 'label' => 'Resolved'],
        ['key' => 'dismissed', 'label' => 'Dismissed'],
    ];
@endphp

@section('page_tabs')
@each ($tabs as $tab)
<a href="/admin/moderation/reports?status={{ $tab['key'] }}"
   class="admin-tab"
   @if($status === $tab['key'])aria-current="page"@endif>
    {{ $tab['label'] }}
    <span class="admin-tab-count cv-tabular">{{ number_format($counts[$tab['key']]) }}</span>
</a>
@endeach
@endsection

@section('content')
@notempty($reports)
@each ($reports as $report)
<div class="panel report-card">
    <div class="panel-header">
        <span class="report-subject">
            <span class="type-badge type-{{ $report['content_type'] }}">{{ $report['content_type'] }}</span>
            @if($report['content_type'] === 'topic' && !empty($report['content']))
            <span>{{ $report['content']['title'] }}</span>
            @elseif($report['content_type'] === 'post' && !empty($report['topic']))
            <span>Post in {{ $report['topic']['title'] }}</span>
            @else
            <span>Content #{{ $report['content_id'] }}</span>
            @endif
        </span>
        <time class="admin-cell-note"
              datetime="{{ \Convoro\Engine\Support\Presence::iso($report['created_at']) }}"
              title="{{ \Convoro\Engine\Support\Presence::exact($report['created_at']) }}">
            {{ \Convoro\Engine\Support\Presence::ago($report['created_at']) }}
        </time>
    </div>

    <div class="panel-body">
        <p class="report-by">
            Reported by <strong>{{ $reporters[(int) $report['reporter_id']]['username'] ?? 'Unknown' }}</strong>
        </p>

        <div class="report-reason">{{ $report['reason'] }}</div>

        @if($report['content_type'] === 'post' && !empty($report['content']))
        <div class="report-content-preview">
            {! mb_substr(strip_tags($report['content']['content_html']), 0, 300) !}
        </div>
        @endif

        @if($status === 'open')
        {#
            Resolve carries a note and Dismiss does not, because dismissing is
            saying there was nothing here — and being made to explain that is
            what stops people using it.
        #}
        <div class="report-actions">
            <form method="POST" action="/admin/moderation/reports/{{ $report['id'] }}/resolve" class="report-resolve">
                @csrf
                <input type="hidden" name="action" value="resolve">
                <label class="visually-hidden" for="note-{{ $report['id'] }}">Resolution note</label>
                <input type="text" id="note-{{ $report['id'] }}" name="note" class="input"
                       placeholder="What you did about it (optional)">
                <button type="submit" class="btn btn-primary btn-sm">Resolve</button>
            </form>
            <form method="POST" action="/admin/moderation/reports/{{ $report['id'] }}/resolve" class="inline-form">
                @csrf
                <input type="hidden" name="action" value="dismiss">
                <button type="submit" class="btn btn-default btn-sm">Dismiss</button>
            </form>
        </div>
        @endif

        @notempty($report['resolution_note'] ?? '')
        <p class="report-note"><strong>Note:</strong> {{ $report['resolution_note'] }}</p>
        @endnotempty
    </div>
</div>
@endeach
@endnotempty

{#
    Three empty states, not one. "No open reports" is good news and should read
    like it; an empty resolved list just means nobody has resolved anything yet.
#}
@empty($reports)
<div class="panel">
    <div class="empty">
        @if($status === 'open')
        <span class="empty-title">Nothing needs your attention</span>
        <p class="empty-note">
            No open reports. When somebody reports a post or a topic it will
            appear here, newest first.
        </p>
        @endif
        @if($status === 'resolved')
        <span class="empty-title">Nothing resolved yet</span>
        <p class="empty-note">Reports you deal with are kept here as a record of what was done.</p>
        @endif
        @if($status === 'dismissed')
        <span class="empty-title">Nothing dismissed</span>
        <p class="empty-note">Reports you decide need no action are kept here.</p>
        @endif
    </div>
</div>
@endempty

@if($totalPages > 1)
<div class="admin-pagination">
    @if($page > 1)
    <a href="/admin/moderation/reports?status={{ $status }}&page={{ $page - 1 }}" class="btn btn-default btn-sm">&laquo; Previous</a>
    @endif
    <span class="admin-pagination-info">Page {{ $page }} of {{ $totalPages }}</span>
    @if($page < $totalPages)
    <a href="/admin/moderation/reports?status={{ $status }}&page={{ $page + 1 }}" class="btn btn-default btn-sm">Next &raquo;</a>
    @endif
</div>
@endif
@endsection