@extends('layouts.app')

@section('title', 'Device Sync')

@section('content')
<x-page-header title="Device Sync" subtitle="Pull previous SMS from devices into the server" icon="sync" icon-color="cyan" />

<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 gap-3">
        <div>
            <label class="field-label text-xs">Filter by 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 }} ({{ $device->device_uid }})
                    </option>
                @endforeach
            </select>
        </div>
    </div>
    <button type="submit" class="btn-primary w-full sm:w-auto mt-4">
        <x-icon name="search" class="w-4 h-4" />
        Apply filter
    </button>
</form>

@if (auth()->user()->hasAction('device_sync.manage'))
<form method="POST" action="{{ route('device-sync.request') }}" class="glass-card p-4 sm:p-5 mb-6 animate-slide-up">
    @csrf
    <h3 class="font-semibold mb-1 flex items-center gap-2">
        <x-icon name="download" class="w-5 h-5 text-teal-600" />
        Request history sync from devices
    </h3>
    <p class="text-sm text-themed-muted mb-4">Select devices, then open the mobile app and tap <strong>Sync Previous Messages</strong>.</p>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 mb-4 max-h-48 overflow-y-auto">
        @foreach ($devices as $device)
            <label class="flex items-center gap-2 rounded-lg border border-themed px-3 py-2 text-sm">
                <input type="checkbox" name="device_ids[]" value="{{ $device->device_uid }}" class="rounded border-slate-600">
                <span>
                    {{ $device->device_name }}
                    @if ($device->needsHistorySync())
                        <span class="text-amber-400 text-xs">· sync pending</span>
                    @endif
                </span>
            </label>
        @endforeach
    </div>
    <button type="submit" class="btn-primary">
        <x-icon name="sync" class="w-4 h-4" />
        Request sync from selected devices
    </button>
</form>
@endif

<div class="table-wrap">
    <div class="overflow-x-auto md:overflow-visible">
        <table class="data-table responsive-table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Device</th>
                    <th>Department</th>
                    <th>Sender</th>
                    <th>Message</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($messages as $message)
                    @php $canView = auth()->user()->canViewMessageDetails($message); @endphp
                    <tr @class(['cursor-pointer hover:bg-white/5' => $canView])
                        @if ($canView) onclick="window.location='{{ route('messages.show', $message) }}'" @endif>
                        <td data-label="Time" class="whitespace-nowrap tabular-nums">{{ $message->received_at->format('M d, H:i') }}</td>
                        <td data-label="Device">{{ $message->device->device_name }}</td>
                        <td data-label="Department">{{ $message->device->department?->name ?? '—' }}</td>
                        <td data-label="Sender">{{ $message->sender }}</td>
                        <td data-label="Message" class="break-words max-w-md">{{ Str::limit($message->message, 80) }}</td>
                        <td data-label="Type">
                            @php
                                $typeClass = match ($message->message_type) {
                                    'payment' => 'badge-success',
                                    'otp' => 'badge-warning',
                                    default => 'badge-neutral',
                                };
                            @endphp
                            <span class="badge capitalize {{ $typeClass }}">{{ $message->message_type }}</span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="!block text-center py-12 text-slate-500">
                            No synced messages yet. Request a history sync from a device above.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if ($messages->hasPages())
        <div class="border-t border-white/5 px-4 py-4">
            {{ $messages->links() }}
        </div>
    @endif
</div>
@endsection