@extends('layouts.app')

@section('title', 'Messages')

@section('content')
@php
    $canDelete = auth()->user()->hasAction('messages.delete');
    $canArchive = auth()->user()->hasAction('messages.archive');
    $canExport = auth()->user()->hasAction('messages.export');
    $canPrint = auth()->user()->hasAction('messages.print');
    $canManage = $canDelete || $canArchive;
    $queryParams = request()->query();
@endphp

<div x-data="messageManager()" x-init="init()">
    <x-page-header title="Messages" subtitle="Search, export, archive, and manage synced SMS messages" icon="messages" icon-color="cyan">
        <x-slot:actions>
            @if ($canExport)
                <a href="{{ route('messages.export', $queryParams) }}" class="btn-secondary btn-sm">
                    <x-icon name="download" class="w-4 h-4" />
                    Export CSV
                </a>
            @endif
            @if ($canPrint)
                <a :href="printUrl()" class="btn-secondary btn-sm">
                    <x-icon name="printer" class="w-4 h-4" />
                    Print filtered
                </a>
            @endif
        </x-slot:actions>
    </x-page-header>

    @include('partials.ephemeral-logs-banner')
    @include('partials.log-deletion-request-form')

    <form method="GET" class="glass-card-subtle p-4 sm:p-5 mb-6 animate-slide-up">
        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
            <div>
                <label class="field-label text-xs">User</label>
                <select name="user_id" class="field-select">
                    <option value="">All users</option>
                    @foreach ($users as $user)
                        <option value="{{ $user->id }}" @selected(request('user_id') == $user->id)>{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="field-label text-xs">Device</label>
                <select name="device_id" class="field-select">
                    <option value="">All devices</option>
                    @foreach ($devices as $device)
                        <option value="{{ $device->device_uid }}" @selected(request('device_id') == $device->device_uid)>{{ $device->device_name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="field-label text-xs">Sender</label>
                <input type="text" name="sender" value="{{ request('sender') }}" placeholder="Phone number" class="field-input">
            </div>
            <div>
                <label class="field-label text-xs">Keyword</label>
                <input type="text" name="keyword" value="{{ request('keyword') }}" placeholder="Text in message" class="field-input">
            </div>
            <div>
                <label class="field-label text-xs">From</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="field-input">
            </div>
            <div>
                <label class="field-label text-xs">To</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="field-input">
            </div>
        </div>
        <label class="mt-4 flex items-center gap-2 text-sm text-themed-muted">
            <input type="checkbox" name="archived" value="1" @checked(request()->boolean('archived')) class="rounded border-themed">
            Show archived messages only
        </label>
        <button type="submit" class="btn-primary w-full sm:w-auto mt-4">
            <x-icon name="search" class="w-4 h-4" />
            Apply filters
        </button>
    </form>

    @if ($canManage)
        <div class="glass-card-subtle p-4 mb-4 flex flex-wrap items-center gap-3 animate-slide-up" x-show="selected.length > 0 || true" x-cloak>
            <label class="inline-flex items-center gap-2 text-sm">
                <input type="checkbox" @change="toggleAll($event)" class="rounded border-themed">
                <span>Select all on page</span>
            </label>
            <span class="text-xs text-themed-muted" x-text="`${selected.length} selected`"></span>

            @if ($canArchive && ! request()->boolean('archived'))
                <form method="POST" action="{{ route('messages.bulk-archive') }}" class="inline" @submit="return prepareBulkSubmit($event, 'selected', 'Archive selected messages?')">
                    @csrf
                    @method('PATCH')
                    @include('messages.partials.bulk-hidden-fields', ['scope' => 'selected'])
                    <button type="submit" class="btn-ghost btn-sm" :disabled="selected.length === 0">Archive selected</button>
                </form>
                <form method="POST" action="{{ route('messages.bulk-archive') }}" class="inline" onsubmit="return confirm('Archive all messages matching current filters?')">
                    @csrf
                    @method('PATCH')
                    @include('messages.partials.bulk-hidden-fields', ['scope' => 'filtered'])
                    <button type="submit" class="btn-ghost btn-sm">Archive filtered</button>
                </form>
                @if (request('device_id'))
                    <form method="POST" action="{{ route('messages.bulk-archive') }}" class="inline" onsubmit="return confirm('Archive all messages for this device?')">
                        @csrf
                        @method('PATCH')
                        @include('messages.partials.bulk-hidden-fields', ['scope' => 'filtered'])
                        <button type="submit" class="btn-ghost btn-sm">Archive device messages</button>
                    </form>
                @endif
            @endif

            @if ($canArchive && request()->boolean('archived'))
                <form method="POST" action="{{ route('messages.bulk-unarchive') }}" class="inline" @submit="return prepareBulkSubmit($event, 'selected', 'Restore selected messages?')">
                    @csrf
                    @method('PATCH')
                    @include('messages.partials.bulk-hidden-fields', ['scope' => 'selected'])
                    <button type="submit" class="btn-ghost btn-sm" :disabled="selected.length === 0">Restore selected</button>
                </form>
            @endif

            @if ($canDelete)
                <form method="POST" action="{{ route('messages.bulk-destroy') }}" class="inline" @submit="return prepareBulkSubmit($event, 'selected', 'Delete selected messages permanently?')">
                    @csrf
                    @method('DELETE')
                    @include('messages.partials.bulk-hidden-fields', ['scope' => 'selected'])
                    <button type="submit" class="btn-danger btn-sm" :disabled="selected.length === 0">Delete selected</button>
                </form>
                <form method="POST" action="{{ route('messages.bulk-destroy') }}" class="inline" onsubmit="return confirm('Delete ALL messages matching current filters permanently? This cannot be undone.')">
                    @csrf
                    @method('DELETE')
                    @include('messages.partials.bulk-hidden-fields', ['scope' => 'filtered'])
                    <button type="submit" class="btn-danger btn-sm">Delete filtered</button>
                </form>
                @if (request('device_id'))
                    <form method="POST" action="{{ route('messages.bulk-destroy') }}" class="inline" onsubmit="return confirm('Delete ALL messages for this device permanently? This cannot be undone.')">
                        @csrf
                        @method('DELETE')
                        @include('messages.partials.bulk-hidden-fields', ['scope' => 'filtered'])
                        <button type="submit" class="btn-danger btn-sm">Delete device messages</button>
                    </form>
                @endif
                <form method="POST" action="{{ route('messages.bulk-destroy') }}" class="inline" onsubmit="return confirm('Delete ALL messages permanently? This cannot be undone.')">
                    @csrf
                    @method('DELETE')
                    @include('messages.partials.bulk-hidden-fields', ['scope' => 'all'])
                    <button type="submit" class="btn-danger btn-sm">Delete all</button>
                </form>
            @endif

            @if ($canPrint)
                <button type="button" @click="openPrintSelected()" class="btn-secondary btn-sm" :disabled="selected.length === 0">Print selected</button>
            @endif
        </div>
    @endif

    <div class="table-wrap">
        <div class="overflow-x-auto md:overflow-visible">
            <table class="data-table responsive-table">
                <thead>
                    <tr>
                        @if ($canManage)
                            <th class="w-10"></th>
                        @endif
                        <th>Time</th>
                        <th>User</th>
                        <th>Device</th>
                        <th>Sender</th>
                        <th>Message</th>
                        <th>Type</th>
                        @if ($canManage)
                            <th class="text-right">Actions</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @forelse ($messages as $message)
                        @php $canView = auth()->user()->canViewMessageDetails($message); @endphp
                        <tr @class(['opacity-70' => $message->isArchived()])>
                            @if ($canManage)
                                <td data-label="Select">
                                    <input type="checkbox"
                                           value="{{ $message->id }}"
                                           @change="toggleOne({{ $message->id }}, $event.target.checked)"
                                           :checked="selected.includes({{ $message->id }})"
                                           class="rounded border-themed">
                                </td>
                            @endif
                            <td data-label="Time" class="whitespace-nowrap tabular-nums">{{ $message->received_at->format('M d, H:i') }}</td>
                            <td data-label="User">{{ $message->device?->user?->name ?? 'Unassigned' }}</td>
                            <td data-label="Device">{{ $message->device?->device_name ?? '—' }}</td>
                            <td data-label="Sender">{{ $message->sender }}</td>
                            <td data-label="Message" class="break-words max-w-md">
                                @if ($canView)
                                    <a href="{{ route('messages.show', $message) }}" class="hover:text-teal-600">{{ Str::limit($message->message, 80) }}</a>
                                @else
                                    {{ Str::limit($message->message, 80) }}
                                @endif
                            </td>
                            <td data-label="Type">
                                @php
                                    $typeClass = match ($message->message_type) {
                                        'payment' => 'badge-success',
                                        'otp' => 'badge-warning',
                                        default => 'badge-neutral',
                                    };
                                @endphp
                                <span class="{{ $typeClass }} capitalize">{{ $message->message_type }}</span>
                                @if ($message->isArchived())
                                    <span class="badge-neutral ml-1">Archived</span>
                                @endif
                            </td>
                            @if ($canManage)
                                <td data-label="Actions" class="text-right whitespace-nowrap">
                                    <div class="inline-flex flex-wrap justify-end gap-1">
                                        @if ($canView)
                                            <a href="{{ route('messages.show', $message) }}" class="btn-ghost btn-sm">View</a>
                                        @endif
                                        @if ($canPrint)
                                            <a href="{{ route('messages.print-one', $message) }}" target="_blank" class="btn-ghost btn-sm">Print</a>
                                        @endif
                                        @if ($canExport)
                                            <a href="{{ route('messages.export-one', $message) }}" class="btn-ghost btn-sm">Export</a>
                                        @endif
                                        @if ($canArchive)
                                            @if ($message->isArchived())
                                                <form method="POST" action="{{ route('messages.unarchive', $message) }}" class="inline">
                                                    @csrf
                                                    @method('PATCH')
                                                    <button type="submit" class="btn-ghost btn-sm">Restore</button>
                                                </form>
                                            @else
                                                <form method="POST" action="{{ route('messages.archive', $message) }}" class="inline">
                                                    @csrf
                                                    @method('PATCH')
                                                    <button type="submit" class="btn-ghost btn-sm">Archive</button>
                                                </form>
                                            @endif
                                        @endif
                                        @if ($canDelete)
                                            <form method="POST" action="{{ route('messages.destroy', $message) }}" class="inline" onsubmit="return confirm('Delete this message permanently?')">
                                                @csrf
                                                @method('DELETE')
                                                @foreach ($queryParams as $key => $value)
                                                    @if (is_scalar($value))
                                                        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                                                    @endif
                                                @endforeach
                                                <button type="submit" class="btn-danger btn-sm">Delete</button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ $canManage ? 8 : 6 }}" class="!block text-center py-12 text-slate-500">
                                <x-icon name="inbox" class="w-10 h-10 mx-auto mb-2 opacity-40" />
                                No messages found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-4">{{ $messages->links() }}</div>
</div>

<script>
function messageManager() {
    return {
        selected: [],
        pageIds: @json($messages->pluck('id')),
        query: @json($queryParams),
        printBase: @json(route('messages.print')),
        init() {},
        toggleOne(id, checked) {
            if (checked) {
                if (!this.selected.includes(id)) {
                    this.selected.push(id);
                }
            } else {
                this.selected = this.selected.filter((item) => item !== id);
            }
        },
        toggleAll(event) {
            this.selected = event.target.checked ? [...this.pageIds] : [];
        },
        prepareBulkSubmit(event, scope, message) {
            if (scope === 'selected' && this.selected.length === 0) {
                return false;
            }
            if (!confirm(message)) {
                event.preventDefault();
                return false;
            }
            const form = event.target;
            form.querySelectorAll('input[name="message_ids[]"]').forEach((input) => input.remove());
            if (scope === 'selected') {
                this.selected.forEach((id) => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'message_ids[]';
                    input.value = id;
                    form.appendChild(input);
                });
            }
            return true;
        },
        printUrl() {
            const params = new URLSearchParams(this.query);
            return `${this.printBase}?${params.toString()}`;
        },
        openPrintSelected() {
            const params = new URLSearchParams(this.query);
            this.selected.forEach((id) => params.append('message_ids[]', id));
            window.open(`${this.printBase}?${params.toString()}`, '_blank');
        },
    };
}
</script>
@endsection