@extends('layouts.admin')

@section('title', 'Report')

@section('content')
    <div class="mb-5">
        <a href="{{ route('admin.moderation.reports') }}" class="btn-ghost btn-sm mb-3">
            <x-icon name="arrow-left" class="size-3.5" /> Back to reports
        </a>

        <h1 class="font-display text-headline font-bold text-text">{{ $report->subjectLabel() }}</h1>

        <div class="mt-2 flex flex-wrap items-center gap-2 text-sm text-text-secondary">
            <x-badge :variant="$report->status->badgeVariant()">{{ $report->status->label() }}</x-badge>
            <x-badge :variant="$report->reason->isUrgent() ? 'error' : 'muted'">{{ $report->reason->label() }}</x-badge>
            <span>{{ $report->subjectType() }} &middot; {{ $report->created_at->format('d M Y, H:i') }}</span>
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            <div class="admin-card p-6">
                <h2 class="font-display text-title font-bold text-text">What was said</h2>

                <p class="mt-3 whitespace-pre-line text-sm text-text-secondary">
                    {{ $report->detail ?: 'No further detail was given.' }}
                </p>

                <p class="mt-4 border-t border-border pt-4 text-xs text-text-muted">
                    Reported by {{ $report->reporter?->name ?? 'somebody who was not signed in' }}@if ($report->reporter) ({{ $report->reporter->email }})@endif
                </p>
            </div>

            {{-- A pattern of reports means something a single one does not. --}}
            @if ($related->isNotEmpty())
                <div class="admin-card p-6">
                    <h2 class="font-display text-title font-bold text-text">
                        Also reported {{ $related->count() }} other {{ Str::plural('time', $related->count()) }}
                    </h2>

                    <ul class="mt-4 space-y-2 text-sm">
                        @foreach ($related as $other)
                            <li class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border px-3.5 py-2.5">
                                <span class="text-text">{{ $other->reason->label() }}</span>

                                <span class="text-xs text-text-muted">
                                    {{ $other->status->label() }} &middot; {{ $other->created_at->format('d M Y') }}
                                </span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        <div>
            <div class="admin-card p-6">
                <h2 class="font-display text-title font-bold text-text">Decision</h2>

                @if ($report->isOpen())
                    <form action="{{ route('admin.moderation.reports.decide', $report) }}" method="POST"
                          class="mt-4 space-y-4" x-data="{ decision: '' }">
                        @csrf

                        <div class="space-y-2">
                            @foreach (['uphold' => 'Uphold', 'dismiss' => 'Dismiss'] as $value => $label)
                                <label class="flex cursor-pointer items-center gap-2.5 rounded-lg border border-border px-3.5 py-2.5">
                                    <input type="radio" name="decision" value="{{ $value }}" x-model="decision"
                                           class="accent-primary" required>
                                    <span class="text-sm text-text">{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>

                        {{-- The action is separate from the decision: a report can be
                             correct without removal being the right response. --}}
                        @if ($actions !== [])
                            <div x-show="decision === 'uphold'" x-cloak>
                                <label for="action" class="form-label">Action</label>

                                <select id="action" name="action" class="form-input">
                                    <option value="">Record it, do nothing else</option>
                                    @foreach ($actions as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

                        <div>
                            <label for="note" class="form-label">Internal note</label>

                            <textarea id="note" name="note" rows="4" required class="form-input"
                                      placeholder="What you found, and why."></textarea>

                            @error('note')<p class="mt-1 text-sm text-error">{{ $message }}</p>@enderror
                        </div>

                        <button type="submit" class="btn btn-primary w-full">Resolve</button>
                    </form>
                @else
                    <p class="mt-3 text-sm text-text-secondary">
                        {{ $report->status->label() }} {{ $report->resolved_at?->format('d M Y, H:i') }}@if ($report->resolver) by {{ $report->resolver->name }}@endif
                    </p>

                    @if ($report->resolution_note)
                        <p class="mt-3 rounded-lg bg-surface-muted p-3 text-sm text-text-secondary">
                            {{ $report->resolution_note }}
                        </p>
                    @endif
                @endif
            </div>
        </div>
    </div>
@endsection