@extends('layouts.app')

@section('title', 'Aktivite Akışı')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center sm:justify-between mb-6">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Aktivite Akışı</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Sistemdeki tüm aktiviteleri kronolojik olarak görüntüleyin
            </p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center gap-3">
            <button id="mark-all-read" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:bg-gray-900/50 transition">
                <i class="fas fa-check-double"></i>
                <span>Tümünü Okundu İşaretle</span>
            </button>
            <a href="{{ route('activity-feed.export', request()->query()) }}" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-indigo-600 dark:bg-indigo-500 dark:bg-indigo-500 rounded-md hover:bg-indigo-700 dark:hover:bg-indigo-600 transition">
                <i class="fas fa-download"></i>
                <span>Dışa Aktar (CSV)</span>
            </a>
        </div>
    </div>

    @if(isset($error))
    <div class="mb-6 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg p-4">
        <div class="flex items-center">
            <i class="fas fa-exclamation-circle text-red-600 mr-3"></i>
            <div>
                <h3 class="text-sm font-semibold text-red-800">Hata Oluştu</h3>
                <p class="text-sm text-red-600 mt-1">{{ $error }}</p>
            </div>
        </div>
    </div>
    @endif

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Toplam Aktivite</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ number_format($statistics['total']) }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
                    <i class="fas fa-list text-blue-600 dark:text-blue-400 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Okunmamış</p>
                    <p class="text-2xl font-bold text-red-600 dark:text-red-400">{{ number_format($statistics['unread']) }}</p>
                </div>
                <div class="w-12 h-12 bg-red-100 dark:bg-red-900/50 rounded-lg flex items-center justify-center">
                    <i class="fas fa-envelope text-red-600 dark:text-red-400 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Okunmuş</p>
                    <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ number_format($statistics['read']) }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Bugün</p>
                    <p class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">{{ number_format($statistics['by_severity']['info'] ?? 0) }}</p>
                </div>
                <div class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center">
                    <i class="fas fa-calendar-day text-indigo-600 dark:text-indigo-400 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
        <form id="filter-form" method="GET" action="{{ route('activity-feed.index') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Aktivite Tipi</label>
                <select name="type" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                    <option value="">Tümü</option>
                    @foreach($activityTypes as $type)
                        <option value="{{ $type }}" {{ request('type') === $type ? 'selected' : '' }}>
                            {{ ucfirst(str_replace('_', ' ', $type)) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Kullanıcı</label>
                <select name="user_id" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                    <option value="">Tümü</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                            {{ $user->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Site</label>
                <select name="site_id" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                    <option value="">Tümü</option>
                    @foreach($sites as $site)
                        <option value="{{ $site->id }}" {{ request('site_id') == $site->id ? 'selected' : '' }}>
                            {{ $site->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Önem</label>
                <select name="severity" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                    <option value="">Tümü</option>
                    <option value="info" {{ request('severity') === 'info' ? 'selected' : '' }}>Bilgi</option>
                    <option value="success" {{ request('severity') === 'success' ? 'selected' : '' }}>Başarılı</option>
                    <option value="warning" {{ request('severity') === 'warning' ? 'selected' : '' }}>Uyarı</option>
                    <option value="error" {{ request('severity') === 'error' ? 'selected' : '' }}>Hata</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Arama</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Başlık veya açıklama..." class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Başlangıç Tarihi</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Bitiş Tarihi</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
            </div>
            <div class="flex items-end gap-2">
                <button type="submit" class="flex-1 px-4 py-2.5 bg-indigo-600 dark:bg-indigo-500 text-white rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 font-semibold text-sm">
                    <i class="fas fa-filter mr-2"></i>Filtrele
                </button>
                <a href="{{ route('activity-feed.index') }}" class="px-4 py-2.5 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
                    <i class="fas fa-times"></i>
                </a>
            </div>
        </form>
    </div>

    <!-- Activity Timeline -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
        <div class="p-6">
            <div id="activity-timeline" class="space-y-4">
                @forelse($activities as $activity)
                    <div class="activity-item flex items-start gap-4 p-4 rounded-lg border {{ $activity->is_read ? 'bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700' : 'bg-white dark:bg-gray-800 border-indigo-200 dark:border-indigo-700 shadow-sm' }}" data-activity-id="{{ $activity->id }}">
                        <!-- Icon -->
                        <div class="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center" style="background-color: {{ $activity->color }}20;">
                            <i class="fas {{ $activity->icon }} text-lg" style="color: {{ $activity->color }};"></i>
                        </div>
                        
                        <!-- Content -->
                        <div class="flex-1 min-w-0">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-1">
                                        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ $activity->title }}</h3>
                                        @if(!$activity->is_read)
                                            <span class="w-2 h-2 bg-indigo-600 dark:bg-indigo-500 dark:bg-indigo-500 rounded-full"></span>
                                        @endif
                                        <span class="px-2 py-0.5 text-xs font-medium rounded {{ $activity->severity === 'error' ? 'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-300' : ($activity->severity === 'warning' ? 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-300' : ($activity->severity === 'success' ? 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300' : 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300')) }}">
                                            {{ ucfirst($activity->severity) }}
                                        </span>
                                    </div>
                                    @if($activity->description)
                                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">{{ $activity->description }}</p>
                                    @endif
                                    <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
                                        @if($activity->user)
                                            <span><i class="fas fa-user mr-1"></i>{{ $activity->user->name }}</span>
                                        @endif
                                        @if($activity->site)
                                            <span><i class="fas fa-globe mr-1"></i>{{ $activity->site->name }}</span>
                                        @endif
                                        <span><i class="fas fa-clock mr-1"></i>{{ $activity->created_at->diffForHumans() }}</span>
                                    </div>
                                </div>
                                <button class="mark-read-btn flex-shrink-0 text-gray-400 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition" data-activity-id="{{ $activity->id }}">
                                    <i class="fas {{ $activity->is_read ? 'fa-envelope-open' : 'fa-envelope' }}"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-12">
                        <i class="fas fa-inbox text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
                        <p class="text-lg font-medium text-gray-900 dark:text-gray-100">Aktivite bulunamadı</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Filtreleri değiştirerek tekrar deneyin.</p>
                    </div>
                @endforelse
            </div>

            @if($activities->hasMorePages() || $activities->hasPages())
                <div class="mt-6">
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-700 dark:text-gray-300">
                            Toplam {{ $activities->total() }} aktivite gösteriliyor ({{ $activities->currentPage() }}/{{ $activities->lastPage() }})
                        </div>
                        <div>
                            {{ $activities->links() }}
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
(function() {
    // Mark activity as read
    document.querySelectorAll('.mark-read-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const activityId = this.dataset.activityId;
            const activityItem = this.closest('.activity-item');
            
            fetch('{{ route("activity-feed.mark-as-read") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    activity_ids: [activityId]
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    activityItem.classList.remove('bg-white dark:bg-gray-800', 'border-indigo-200', 'shadow-sm');
                    activityItem.classList.add('bg-gray-50 dark:bg-gray-900/50', 'border-gray-200 dark:border-gray-700');
                    const icon = this.querySelector('i');
                    icon.classList.remove('fa-envelope');
                    icon.classList.add('fa-envelope-open');
                    const unreadDot = activityItem.querySelector('.w-2.h-2');
                    if (unreadDot) {
                        unreadDot.remove();
                    }
                }
            });
        });
    });

    // Mark all as read
    document.getElementById('mark-all-read')?.addEventListener('click', function() {
        if (!confirm('Tüm aktiviteleri okundu olarak işaretlemek istediğinizden emin misiniz?')) {
            return;
        }

        fetch('{{ route("activity-feed.mark-all-as-read") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            }
        });
    });
})();
</script>
@endpush
@endsection