@extends('layouts.public')

@section('meta_title', $category->name . ' - Forum')
@section('meta_description', $category->description ?? $category->name . ' kategorisindeki forum konuları')

@section('content')
<style>
/* ========================================
   XenForo-Style Category View - Modern Design
   ======================================== */

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #64748b;
}
.breadcrumb a { color: #3b82f6; text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: #cbd5e1; }

/* Category Header */
.category-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #1d4ed8 100%);
    color: white;
    padding: 28px 32px;
    border-radius: 14px;
    margin-bottom: 24px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.25);
    position: relative;
    overflow: hidden;
}
.category-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
    pointer-events: none;
}
.category-header-content { position: relative; z-index: 1; }
.category-header-icon { font-size: 32px; margin-bottom: 8px; }
.category-header h1 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.category-header p { font-size: 14px; opacity: 0.85; max-width: 600px; }
.category-header-meta {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    font-size: 13px;
    opacity: 0.85;
}
.category-header-meta strong { font-weight: 700; }

/* Toolbar */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}
.toolbar-search {
    display: flex;
    gap: 0;
    flex: 1;
    max-width: 320px;
}
.toolbar-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-right: none;
    border-radius: 10px 0 0 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: white;
}
.toolbar-search input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.btn-primary {
    padding: 10px 20px;
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3);
}
.btn-search {
    padding: 10px 14px;
    background: #1d4ed8;
    color: white;
    border: 1px solid #1d4ed8;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-search:hover { background: #1e40af; }

/* Topics Container */
.topics-container {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.topics-header {
    display: grid;
    grid-template-columns: 1fr 70px 70px 70px;
    gap: 16px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
}
@media (max-width: 640px) {
    .topics-header { grid-template-columns: 1fr; }
    .topics-header span:not(:first-child) { display: none; }
}

/* Topic Item */
.topic-item {
    display: grid;
    grid-template-columns: 1fr 70px 70px 70px;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f8fafc;
    align-items: center;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}
.topic-item:last-child { border-bottom: none; }
.topic-item:hover { background: #f8fafc; }
@media (max-width: 640px) {
    .topic-item { grid-template-columns: 1fr; gap: 8px; }
}

.topic-info { min-width: 0; }
.topic-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.topic-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topic-item:hover .topic-title { color: #1d4ed8; }
.badge-sticky {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.badge-locked {
    background: #fee2e2;
    color: #991b1b;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.topic-excerpt {
    font-size: 12px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topic-author {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.topic-author strong { color: #475569; font-weight: 600; }
.topic-author-avatar {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 8px;
    font-weight: 700;
}

.topic-stat {
    text-align: center;
}
.topic-stat-num {
    font-size: 16px;
    font-weight: 800;
    color: #1d4ed8;
    display: block;
}
.topic-stat-sub {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Dividers */
.sticky-divider {
    padding: 10px 20px;
    background: #fffbeb;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.normal-divider {
    padding: 10px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* No Topics */
.no-topics {
    text-align: center;
    padding: 48px 24px;
    color: #94a3b8;
}
.no-topics-icon { font-size: 48px; margin-bottom: 12px; }
.no-topics p { font-size: 14px; margin-bottom: 20px; }

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: all 0.15s;
    background: white;
}
.pagination a:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.pagination .active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: white;
}

@media (max-width: 640px) {
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-search { max-width: 100%; }
    .btn-primary { width: 100%; justify-content: center; }
    .category-header { padding: 20px; }
    .category-header h1 { font-size: 18px; }
    .topic-item { padding: 12px 16px; }
    .topic-title { font-size: 13px; }
}
</style>

{{-- Breadcrumb --}}
<div class="breadcrumb">
    <a href="{{ route('forum.index') }}">Forum</a>
    <span class="breadcrumb-sep">/</span>
    <span>{{ $category->name }}</span>
</div>

{{-- Category Header --}}
<div class="category-header">
    <div class="category-header-content">
        <div class="category-header-icon">{{ $category->icon ?? '💬' }}</div>
        <h1>{{ $category->name }}</h1>
        @if($category->description)
            <p>{{ $category->description }}</p>
        @endif
        <div class="category-header-meta">
            <span><strong>{{ $category->topics_count ?? 0 }}</strong> konu</span>
            <span><strong>{{ $category->posts_count ?? 0 }}</strong> mesaj</span>
        </div>
    </div>
</div>

{{-- Toolbar --}}
<div class="toolbar">
    <form action="{{ route('forum.search') }}" method="GET" class="toolbar-search">
        <input type="text" name="q" placeholder="Bu kategoride ara..." value="{{ request('q') }}">
        <input type="hidden" name="category" value="{{ $category->id }}">
        <button type="submit" class="btn-search">
            <svg style="width:16px;height:16px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
        </button>
    </form>

    @auth
        <a href="{{ route('forum.create_topic') }}?category={{ $category->id }}" class="btn-primary">
            <svg style="width:16px;height:16px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Yeni Konu
        </a>
    @endauth
</div>

{{-- Topics List --}}
<div class="topics-container">
    <div class="topics-header">
        <span>Konu</span>
        <span style="text-align:center">Yanıtlar</span>
        <span style="text-align:center">Beğeniler</span>
        <span style="text-align:center">Görüntüleme</span>
    </div>

    {{-- Sticky Topics --}}
    @if($stickyTopics->count() > 0)
        <div class="sticky-divider">📌 Sabitlenmiş Konular</div>
        @foreach($stickyTopics as $topic)
            @php
                $avatarHue = crc32($topic->user->name ?? 'A') % 360;
            @endphp
            <a href="{{ route('forum.topic', [$category->slug, $topic->slug]) }}" class="topic-item">
                <div class="topic-info">
                    <div class="topic-title-row">
                        <span class="badge-sticky">Sabitli</span>
                        @if($topic->is_locked)
                            <span class="badge-locked">🔒 Kilitli</span>
                        @endif
                        <span class="topic-title">{{ $topic->title }}</span>
                    </div>
                    <div class="topic-excerpt">{{ Str::limit(strip_tags($topic->content ?? ''), 80) }}</div>
                    <div class="topic-author">
                        <span class="topic-author-avatar" style="background: linear-gradient(135deg, hsl({{ $avatarHue }}, 65%, 45%) 0%, hsl({{ $avatarHue + 30 }}, 65%, 55%) 100%);">
                            {{ strtoupper(substr($topic->user->name ?? 'A', 0, 1)) }}
                        </span>
                        <strong>{{ $topic->user->name ?? 'Anonim' }}</strong> •
                        {{ $topic->created_at->diffForHumans() }}
                    </div>
                </div>
                <div class="topic-stat">
                        <span class="topic-stat-num">{{ $topic->reply_count ?? 0 }}</span>
                        <span class="topic-stat-sub">yanıt</span>
                    </div>
                <div class="topic-stat">
                    <span class="topic-stat-num">{{ $topic->likes_count ?? 0 }}</span>
                    <span class="topic-stat-sub">beğeni</span>
                </div>
                <div class="topic-stat">
                    <span class="topic-stat-num">{{ $topic->views ?? 0 }}</span>
                    <span class="topic-stat-sub">görünt.</span>
                </div>
            </a>
        @endforeach
        <div class="normal-divider">Tüm Konular</div>
    @endif

    {{-- Regular Topics --}}
    @forelse($topics as $topic)
        @php
            $avatarHue = crc32($topic->user?->name ?? 'A') % 360;
        @endphp
        <a href="{{ route('forum.topic', [$category->slug, $topic->slug]) }}" class="topic-item">
            <div class="topic-info">
                <div class="topic-title-row">
                    @if($topic->is_locked)
                        <span class="badge-locked">🔒 Kilitli</span>
                    @endif
                    <span class="topic-title">{{ $topic->title }}</span>
                </div>
                <div class="topic-excerpt">{{ Str::limit(strip_tags($topic->content ?? ''), 80) }}</div>
                <div class="topic-author">
                    <span class="topic-author-avatar" style="background: linear-gradient(135deg, hsl({{ $avatarHue }}, 65%, 45%) 0%, hsl({{ $avatarHue + 30 }}, 65%, 55%) 100%);">
                        {{ strtoupper(substr($topic->user?->name ?? 'A', 0, 1)) }}
                    </span>
                    <strong>{{ $topic->user?->name ?? 'Anonim' }}</strong> •
                    {{ $topic->created_at->diffForHumans() }}
                </div>
            </div>
            <div class="topic-stat">
                <span class="topic-stat-num">{{ $topic->reply_count ?? 0 }}</span>
                <span class="topic-stat-sub">yanıt</span>
            </div>
            <div class="topic-stat">
                <span class="topic-stat-num">{{ $topic->likes_count ?? 0 }}</span>
                <span class="topic-stat-sub">beğeni</span>
            </div>
            <div class="topic-stat">
                <span class="topic-stat-num">{{ $topic->views ?? 0 }}</span>
                <span class="topic-stat-sub">görünt.</span>
            </div>
        </a>
    @empty
        <div class="no-topics">
            <div class="no-topics-icon">💬</div>
            <p>Bu kategoride henüz konu bulunmamaktadır.</p>
            @auth
                <a href="{{ route('forum.create_topic') }}?category={{ $category->id }}" class="btn-primary">İlk Konuyu Sen Aç</a>
            @else
                <p style="font-size:13px;">Konu açmak için <a href="{{ route('login') }}" style="color:#1d4ed8;">giriş yapın</a>.</p>
            @endauth
        </div>
    @endforelse
</div>

{{-- Pagination --}}
@if($topics->hasPages())
    <div class="pagination">
        {{-- Previous --}}
        @if($topics->onFirstPage())
            <span style="opacity:0.5;">&laquo; Önceki</span>
        @else
            <a href="{{ $topics->previousPageUrl() }}">&laquo; Önceki</a>
        @endif

        {{-- Pages --}}
        @foreach($topics->getUrlRange(1, $topics->lastPage()) as $page => $url)
            @if($page == $topics->currentPage())
                <span class="active">{{ $page }}</span>
            @else
                <a href="{{ $url }}">{{ $page }}</a>
            @endif
        @endforeach

        {{-- Next --}}
        @if($topics->hasMorePages())
            <a href="{{ $topics->nextPageUrl() }}">Sonraki &raquo;</a>
        @else
            <span style="opacity:0.5;">Sonraki &raquo;</span>
        @endif
    </div>
@endif

@endsection
