@extends('layouts.admin.master')

@section('content')
    @php
        use Illuminate\Support\Str;

        $canUpdate = auth_can('admin.lapooran.anggota.update') || auth_can('admin.lapooran.anggota');
        $canExcel = auth_can('admin.lapooran.anggota.excel');
        $reasonLabels = [
            'penipuan' => 'Penipuan',
            'spam' => 'Spam',
            'pelecehan' => 'Pelecehan',
            'konten_tidak_pantas' => 'Konten tidak pantas',
            'ancaman' => 'Ancaman',
            'lainnya' => 'Lainnya',
        ];
        $statusLabels = [
            'baru' => 'Baru',
            'ditinjau' => 'Ditinjau',
            'selesai' => 'Selesai',
            'ditolak' => 'Ditolak',
        ];
        $statusClasses = [
            'baru' => 'danger',
            'ditinjau' => 'warning',
            'selesai' => 'success',
            'ditolak' => 'secondary',
        ];
    @endphp

    @if (session('success'))
        <div class="alert alert-success border-0 shadow-sm">{{ session('success') }}</div>
    @endif

    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
        <div class="col">
            <div class="card radius-10 border-start border-4 border-primary">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Total Laporan</p>
                    <h4 class="my-1 text-primary">{{ number_format($stats['total']) }}</h4>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-danger">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Belum Ditinjau</p>
                    <h4 class="my-1 text-danger">{{ number_format($stats['baru']) }}</h4>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-warning">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Sedang Ditinjau</p>
                    <h4 class="my-1 text-warning">{{ number_format($stats['ditinjau']) }}</h4>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10 border-start border-4 border-success">
                <div class="card-body">
                    <p class="mb-0 text-secondary">Selesai</p>
                    <h4 class="my-1 text-success">{{ number_format($stats['selesai']) }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
            <div>
                <h6 class="mb-1 text-uppercase">Datatable Laporan Obrolan</h6>
                <p class="mb-0 text-secondary">Laporan dari member untuk penipuan, spam, ancaman, atau potensi obrolan tidak baik.</p>
            </div>
            <div class="laporan-obrolan-actions">
                <a href="{{ route('admin.obrolan') }}" class="btn btn-outline-primary btn-sm">
                    <i class='bx bx-conversation me-1'></i> Daftar Obrolan
                </a>
                @if ($canExcel)
                    <a href="{{ route('admin.lapooran.anggota.excel') }}" class="btn btn-success btn-sm">
                        <i class="fas fa-file-excel me-1"></i> Ekspor CSV
                    </a>
                @endif
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle w-100" id="tbl_main">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Waktu</th>
                            <th>Pelapor</th>
                            <th>Terlapor / Obrolan</th>
                            <th>Alasan</th>
                            <th>Detail</th>
                            <th>Status</th>
                            <th class="text-end">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($reports as $report)
                            @php
                                $conversation = $report->conversation;
                                $conversationTitle = $conversation
                                    ? ($conversation->type !== 'direct' && $conversation->name
                                        ? $conversation->name
                                        : $conversation->participants->map(fn ($participant) => $participant->chatLabel())->filter()->take(2)->implode(' & '))
                                    : data_get($report->meta, 'conversation_name', 'Obrolan terhapus');
                                $reporterName = $report->reporter?->chatLabel() ?? data_get($report->meta, 'reporter_label', 'Pelapor terhapus');
                                $reportedName = $report->reportedUser?->chatLabel() ?? data_get($report->meta, 'reported_label', null);
                                $status = $report->status ?: 'baru';
                                $adminNote = data_get($report->meta, 'admin_note', '');
                            @endphp
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>
                                    <span class="d-none">{{ optional($report->created_at)->timestamp }}</span>
                                    <div>{{ optional($report->created_at)->format('d M Y, H:i') }}</div>
                                    <small class="text-secondary">{{ optional($report->created_at)->diffForHumans() }}</small>
                                </td>
                                <td>
                                    <div class="fw-semibold">{{ $reporterName }}</div>
                                    <small class="text-secondary">{{ $report->reporter?->email ?? '-' }}</small>
                                </td>
                                <td>
                                    <div class="fw-semibold">{{ $reportedName ?: $conversationTitle }}</div>
                                    <small class="text-secondary">
                                        {{ $conversation?->type === 'group' ? 'Grup' : 'Percakapan langsung' }}
                                        @if ($reportedName)
                                            - {{ $conversationTitle }}
                                        @endif
                                    </small>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark border">
                                        {{ $reasonLabels[$report->reason] ?? Str::headline((string) $report->reason) }}
                                    </span>
                                </td>
                                <td class="laporan-obrolan-detail">
                                    <div>{{ $report->description ?: 'Tidak ada catatan tambahan.' }}</div>
                                    @if (data_get($report->meta, 'last_message_preview'))
                                        <small class="text-secondary d-block mt-1">
                                            Pesan terakhir: {{ data_get($report->meta, 'last_message_preview') }}
                                        </small>
                                    @endif
                                    @if ($adminNote)
                                        <small class="text-primary d-block mt-1">
                                            Catatan admin: {{ $adminNote }}
                                        </small>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge bg-{{ $statusClasses[$status] ?? 'secondary' }}">
                                        {{ $statusLabels[$status] ?? Str::headline($status) }}
                                    </span>
                                    @if ($report->reviewer)
                                        <small class="text-secondary d-block mt-1">
                                            oleh {{ $report->reviewer->chatLabel() }}
                                        </small>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="laporan-obrolan-row-actions">
                                        @if ($conversation)
                                            <a href="{{ route('admin.obrolan.show', $conversation) }}"
                                                class="btn btn-primary btn-sm">
                                                <i class='bx bx-message-square-dots me-1'></i> Buka Thread
                                            </a>
                                        @endif
                                        @if ($canUpdate)
                                            <form action="{{ route('admin.lapooran.anggota.status', $report) }}"
                                                method="POST" class="laporan-obrolan-status-form">
                                                @csrf
                                                <select name="status" class="form-select form-select-sm">
                                                    @foreach ($statusLabels as $value => $label)
                                                        <option value="{{ $value }}" @selected($status === $value)>{{ $label }}</option>
                                                    @endforeach
                                                </select>
                                                <input type="text" name="admin_note" class="form-control form-control-sm"
                                                    value="{{ $adminNote }}" placeholder="Catatan admin">
                                                <button type="submit" class="btn btn-outline-success btn-sm">
                                                    Simpan
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-4 text-secondary">
                                    Belum ada laporan obrolan masuk.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" />
    <style>
        .laporan-obrolan-actions,
        .laporan-obrolan-row-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .laporan-obrolan-detail {
            min-width: 18rem;
            max-width: 28rem;
            white-space: normal;
        }

        .laporan-obrolan-status-form {
            display: grid;
            grid-template-columns: minmax(8rem, 9rem) minmax(10rem, 14rem) auto;
            gap: 0.4rem;
            align-items: center;
        }

        @media (max-width: 767.98px) {
            .laporan-obrolan-row-actions,
            .laporan-obrolan-status-form {
                justify-content: flex-start;
            }

            .laporan-obrolan-status-form {
                grid-template-columns: 1fr;
                width: 100%;
            }
        }
    </style>
@endsection

@section('javascript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net/2.1.1/jquery.dataTables.min.js" integrity="sha512-CKwcR6t3iAghHw93W7LcmVlSRCoGXiYyjITGKrFyDFqWHt6LIJ3j5f1dSjvL+OJbvG0KvPgP/zBEOikHUIu+3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.13.8/dataTables.bootstrap5.min.js" integrity="sha512-zw34c1fnMeY29qzodeC+GGKfyQQ7hN+a9yjGnIAZbkPPn/Xeh8Z46uea/fjq5Mwsp4bxvGKfJrTNnh/GdIZJ1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            if (!window.jQuery || !jQuery.fn.DataTable) {
                return;
            }

            const languageUrl = typeof datatable_indonesia_language_url !== 'undefined'
                ? datatable_indonesia_language_url
                : undefined;

            jQuery('#tbl_main').DataTable({
                order: [[1, 'desc']],
                scrollX: true,
                language: languageUrl ? { url: languageUrl } : {},
            });
        });
    </script>
@endsection