{{-- Forum Topics Widget - Temiz Tasarım --}}
@php
    $cfg = $widget->content_with_defaults;
    $forumModule = \App\Models\Module::active()->where('name', 'forum')->first();

    if (!$forumModule || !$forumModule->is_active) {
        $topics = collect();
    } else {
        $cacheKey = 'homepage_forum_topics_' . md5(json_encode($cfg));
        $topics = \Illuminate\Support\Facades\Cache::remember($cacheKey, 300, function () use ($cfg) {
            $query = \App\Models\ForumTopic::with(['category', 'user'])->withCount('posts as replies_count')->orderBy('created_at', 'desc');

            if (!empty($cfg['category_filter'] ?? null)) {
                $query->where('category_id', $cfg['category_filter']);
            }

            return $query->take($cfg['items_limit'] ?? 4)->get();
        });
    }
@endphp

@if($topics->isNotEmpty())
<div style="padding: 50px 24px;">
    <div style="max-width: 1100px; margin: 0 auto;">
        <div style="text-align: center; margin-bottom: 40px;">
            <span style="display: inline-block; padding: 6px 16px; background: #eff6ff; border: 1px solid #bfdbfe;
                        border-radius: 50px; color: #2563eb; font-size: 12px; font-weight: 700;
                        text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;">
                💬 Topluluk
            </span>
            <h2 style="font-size: clamp(24px, 3vw, 36px); font-weight: 900; color: #0f172a; margin-bottom: 8px;">
                En Son Forum Konuları
            </h2>
            <p style="font-size: 15px; color: #64748b;">Topluluğun tartıştığı güncel konular</p>
        </div>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
            @foreach($topics as $topic)
            <a href="{{ route('forum.topic', ['category' => $topic->category->slug, 'topic' => $topic->slug]) }}" style="background: #ffffff; border-radius: 10px; padding: 18px;
                        border: 1px solid #e5e7eb; border-left: 4px solid #2563eb; text-decoration: none; color: inherit;
                        transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.04);
                        display: flex; flex-direction: column;"
                    onmouseover="this.style.transform='translateY(-3px)'; this.style.boxShadow='0 10px 20px rgba(37,99,235,0.1)'; this.style.borderLeftColor='#7c3aed';"
                    onmouseout="this.style.transform=''; this.style.boxShadow=''; this.style.borderLeftColor='#2563eb';">
                @if($topic->category)
                    <span style="display: inline-block; padding: 4px 9px; background: #e0e7ff; color: #4f46e5;
                                font-size: 9px; font-weight: 700; text-transform: uppercase; border-radius: 4px;
                                margin-bottom: 10px; width: fit-content;">
                        {{ $topic->category->name }}
                    </span>
                @endif
                <h3 style="font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.3; margin-bottom: 10px;">
                    {{ $topic->title }}
                </h3>
                @if($cfg['show_meta'] ?? true)
                <div style="display: flex; gap: 12px; font-size: 11px; color: #94a3b8; padding-top: 8px; border-top: 1px solid #f1f5f9; margin-top: auto;">
                    <span>👤 {{ $topic->user?->name ?? 'Bilinmiyor' }}</span>
                    <span>💭 {{ $topic->replies_count ?? 0 }}</span>
                </div>
                @endif
            </a>
            @endforeach
        </div>
        <div style="text-align: center; margin-top: 32px;">
            <a href="{{ route('forum.index') }}" style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px;
                background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; text-decoration: none;
                border-radius: 8px; font-size: 14px; font-weight: 700;">
                Forum'u Ziyaret Et →
            </a>
        </div>
    </div>
</div>
@endif
