@extends('layouts.admin')

@section('title', 'Sync Logs — ' . $user->name)
@section('page-title', 'Sync Logs')

@section('content')
<div class="space-y-6">
    {{-- Back + user header --}}
    <div class="flex items-center gap-4">
        <a href="{{ route('admin.sync-logs.index') }}"
           class="inline-flex items-center gap-2 rounded-2xl border border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Sync Logs
        </a>
        <div>
            <h2 class="text-lg font-bold text-slate-900">{{ $user->name }}</h2>
            <p class="text-sm text-slate-500">{{ $user->email }}
                @if($user->plan)
                    &middot; <span class="font-semibold text-brand-600">{{ ucfirst($user->plan) }}</span>
                @endif
            </p>
        </div>
    </div>

    {{-- Filters --}}
    <section class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <form method="GET" class="grid gap-4 lg:grid-cols-[1.5fr_1fr_1fr_auto]">
            <select name="status" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <option value="">All status</option>
                @foreach(['success', 'failed'] as $s)
                    <option value="{{ $s }}" @selected(request('status') === $s)>{{ ucfirst($s) }}</option>
                @endforeach
            </select>
            <select name="direction" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <option value="">All directions</option>
                @foreach(['upload', 'download'] as $d)
                    <option value="{{ $d }}" @selected(request('direction') === $d)>{{ ucfirst($d) }}</option>
                @endforeach
            </select>
            <input type="text" name="table" value="{{ request('table') }}" placeholder="Table name"
                class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            <div class="flex gap-2">
                <button type="submit"
                    class="flex-1 rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">
                    Filter
                </button>
                @if(request()->hasAny(['status', 'direction', 'table']))
                    <a href="{{ route('admin.sync-logs.show', $user->id) }}"
                       class="rounded-2xl border border-slate-300 px-4 py-3 text-sm font-semibold text-slate-600 hover:bg-slate-50">
                        Clear
                    </a>
                @endif
            </div>
        </form>
    </section>

    {{-- Logs table --}}
    <section class="rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="border-b border-slate-200 bg-slate-50 text-slate-500">
                    <tr>
                        <th class="px-6 py-4 font-semibold">Direction</th>
                        <th class="px-6 py-4 font-semibold">Table</th>
                        <th class="px-6 py-4 font-semibold text-center">Records</th>
                        <th class="px-6 py-4 font-semibold text-center">Conflicts</th>
                        <th class="px-6 py-4 font-semibold text-center">Duration</th>
                        <th class="px-6 py-4 font-semibold">Status</th>
                        <th class="px-6 py-4 font-semibold">Error</th>
                        <th class="px-6 py-4 font-semibold">Time</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($logs as $log)
                        <tr class="table-row-hover">
                            <td class="px-6 py-5">
                                @if($log->direction === 'upload')
                                    <span class="inline-flex items-center gap-1 text-accent-600 font-semibold">↑ Upload</span>
                                @else
                                    <span class="inline-flex items-center gap-1 text-brand-600 font-semibold">↓ Download</span>
                                @endif
                            </td>
                            <td class="px-6 py-5 text-slate-600 font-mono text-xs">{{ $log->table_name }}</td>
                            <td class="px-6 py-5 text-center text-slate-600">{{ number_format($log->records_count) }}</td>
                            <td class="px-6 py-5 text-center text-slate-600">{{ number_format($log->conflicts_count) }}</td>
                            <td class="px-6 py-5 text-center text-slate-600">{{ number_format($log->duration_ms) }} ms</td>
                            <td class="px-6 py-5">
                                <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $log->status === 'failed' ? 'badge-failed' : 'badge-synced' }}">
                                    {{ ucfirst($log->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-5 max-w-xs text-xs text-red-500">{{ $log->error_message ?? '—' }}</td>
                            <td class="px-6 py-5 text-slate-500">{{ $log->created_at?->format('d M Y H:i') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="px-6 py-16 text-center text-sm text-slate-500">No logs found for this user.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-slate-200 px-6 py-4">{{ $logs->links() }}</div>
    </section>
</div>
@endsection