@extends('layouts.user')

@section('title', 'My Timeline')

@section('content')

@php $tab = request('tab', $tab ?? 'posts'); @endphp

<style>
    :root {
        --cura-blue: #1D5BBF;
        --cura-teal: #27B1A2;
    }
    .timeline-page { background: #f8fafc; min-height: 100vh; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    .timeline-shell { max-width: 1200px; margin: 0 auto; padding: 1.5rem 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media (min-width: 960px) { .timeline-shell { grid-template-columns: 280px 1fr 280px; } }
    .fb-card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border: 1px solid #e2e8f0; }
    .fb-card-body { padding: 16px; }
    .fb-header { display: flex; align-items: center; gap: 12px; padding: 16px; }
    .fb-avatar { width: 56px; height: 56px; border-radius: 999px; background: #e5e7eb; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #0f172a; }
    .fb-tabs { display: flex; gap: 24px; padding: 0 8px; border-bottom: 1px solid #e5e7eb; margin-top: 8px; }
    .fb-tab { padding: 12px 4px; font-weight: 600; color: #64748b; border-bottom: 3px solid transparent; text-decoration: none; }
    .fb-tab.active { color: var(--cura-blue); border-color: var(--cura-blue); }
    .fb-stat-row { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px 12px; color: #475569; font-size: 12px; }
    .fb-stat-row span { font-weight: 700; color: #0f172a; margin-right: 4px; }
    .fb-shortcuts a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #0f172a; text-decoration: none; border-radius: 10px; transition: background 0.15s ease; }
    .fb-shortcuts a:hover { background: #f3f4f6; }
    .fb-feed { display: flex; flex-direction: column; gap: 12px; }
    .fb-empty { padding: 16px; color: #475569; font-size: 14px; }
    .fb-like-btn { padding: 8px 12px; border-radius: 999px; border: 1px solid #e5e7eb; font-weight: 700; font-size: 12px; color: #0f172a; background: #fff; transition: all 0.15s ease; }
    .fb-like-btn:hover { border-color: var(--cura-blue); color: var(--cura-blue); }
    .fb-like-btn.liked { border-color: var(--cura-blue); background: #e0e7ff; color: var(--cura-blue); }
    .post-styled-body.post-styled-169 { aspect-ratio: 16/9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .post-styled-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0.1; color: currentColor; }
    .post-styled-icon svg { width: 35%; height: 35%; max-width: 100px; max-height: 100px; }
    .post-styled-text { position: relative; z-index: 1; text-align: center; font-size: 1.0625rem; line-height: 1.5; }
</style>

<div class="timeline-page">
    <div class="timeline-shell">
        {{-- LEFT SIDEBAR --}}
        <aside id="leftSidebar" class="space-y-4">
            <div class="fb-card">
                <div class="fb-header">
                    <div class="h-12 w-12 rounded-full bg-slate-100 overflow-hidden flex items-center justify-center text-slate-700 font-bold">
                        <img src="{{ $nurse->displayAvatarUrl() }}" alt="{{ $nurse->name }}" class="h-full w-full object-cover" width="48" height="48" loading="lazy" decoding="async">
                    </div>
                    <div class="min-w-0">
                        <h2 class="text-sm font-semibold text-slate-900 truncate">{{ $nurse->name }}</h2>
                        <p class="text-xs text-slate-600">{{ $profile?->primary_specialty ?? 'User' }}</p>
                        <p class="text-[11px] text-slate-500">{{ $profile?->country ?? 'Location n/a' }} · {{ $profile?->experience_years ? $profile->experience_years . ' yrs' : 'Experience n/a' }}</p>
                    </div>
                </div>
                <div class="fb-card-body">
                    <div class="grid grid-cols-2 gap-3 text-[11px] text-slate-600">
                        <div><span class="font-semibold text-slate-900">{{ $stats['connections'] }}</span> Connections</div>
                        <div><span class="font-semibold text-slate-900">{{ $stats['posts'] }}</span> Posts</div>
                        <div><span class="font-semibold text-slate-900">{{ $stats['countries'] }}</span> Countries</div>
                        <div><span class="font-semibold text-slate-900">{{ $stats['conversations'] }}</span> Conversations</div>
                    </div>
                </div>
            </div>

            <div class="fb-card">
                <div class="card-header">
                    <h3 class="card-header-title">Shortcuts</h3>
                </div>
                <div class="fb-card-body fb-shortcuts">
                    <a href="{{ route('nurse.connect.timeline') }}">🧭 My Timeline</a>
                    <a href="{{ route('nurse.connect.index', ['feed' => 'mine']) }}">📝 My Posts</a>
                    <a href="{{ route('messages.index') }}">💬 Messages</a>
                    <a href="{{ route('search.nurses') }}">🔍 Browse Healthcare Workers</a>
                </div>
            </div>
        </aside>

        {{-- MAIN --}}
        <main id="mainFeed" class="space-y-3">
            {{-- Banner --}}
            <div class="fb-card">
                <div class="fb-header">
                    <div class="fb-avatar">
                        <img src="{{ $nurse->displayAvatarUrl() }}" alt="{{ $nurse->name }}" class="h-full w-full object-cover" width="56" height="56" loading="lazy" decoding="async">
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-base font-semibold text-slate-900">{{ $nurse->name }}</h1>
                        <p class="text-xs text-slate-600">{{ $profile?->primary_specialty ?? 'User' }} · {{ $profile?->country ?? 'Location n/a' }} · {{ $profile?->experience_years ? $profile->experience_years . ' yrs' : 'Experience n/a' }}</p>
                        @if($profile?->headline)
                            <p class="mt-1 text-xs text-slate-500 line-clamp-2">{{ $profile->headline }}</p>
                        @endif
                    </div>
                    @auth
                    <form method="POST" action="{{ route('nurse.connect.timeline.like', $nurse) }}" class="ml-auto">
                        @csrf
                        <button type="submit" class="fb-like-btn {{ $profileLiked ? 'liked' : '' }}">
                            {{ $profileLiked ? 'Liked' : 'Like Profile' }}
                        </button>
                    </form>
                    @endauth
                </div>
                <div class="fb-stat-row">
                    <span>{{ $stats['connections'] }}</span> Connections
                    <span>{{ $stats['posts'] }}</span> Posts
                    <span>{{ $stats['countries'] }}</span> Countries in Network
                    <span>{{ $stats['conversations'] }}</span> Conversations
                </div>
                <div class="fb-tabs">
                    <a href="{{ route('nurse.connect.timeline', ['tab' => 'posts']) }}" class="fb-tab {{ $tab === 'posts' ? 'active' : '' }}">Posts</a>
                    <a href="{{ route('nurse.connect.timeline', ['tab' => 'replies']) }}" class="fb-tab {{ $tab === 'replies' ? 'active' : '' }}">Replies</a>
                    @if(auth()->check() && auth()->id() === $nurse->id)
                        <a href="{{ route('nurse.connect.timeline', ['tab' => 'network']) }}" class="fb-tab {{ $tab === 'network' ? 'active' : '' }}">Network</a>
                    @endif
                    @if($supportsLikes)
                        <a href="{{ route('nurse.connect.timeline', ['tab' => 'liked']) }}" class="fb-tab {{ $tab === 'liked' ? 'active' : '' }}">Liked</a>
                    @endif
                </div>
            </div>

            {{-- Feed --}}
            <div class="fb-feed">
                @if($tab === 'replies')
                    @forelse($items as $reply)
                        <div class="fb-card fb-card-body">
                            <p class="text-xs text-slate-500 mb-1">Reply to {{ $reply->post->author->name ?? 'Unknown' }}</p>
                            <p class="text-sm text-slate-800 mb-2">{{ $reply->body }}</p>
                            @if($reply->post)
                                <div class="border border-slate-100 rounded-md bg-slate-50 p-3 text-xs text-slate-700">
                                    <p class="font-semibold text-slate-900 mb-1">{{ $reply->post->author->name ?? 'Unknown' }}</p>
                                    <p class="line-clamp-3">{{ $reply->post->body }}</p>
                                </div>
                            @endif
                        </div>
                    @empty
                        <div class="fb-card fb-empty">You haven’t replied to any posts yet.</div>
                    @endforelse
                    {{ $items->links() }}
                @elseif($tab === 'liked')
                    @forelse($items as $post)
                        @include('nurse.connect.partials.post-card', ['post' => $post])
                    @empty
                        <div class="fb-card fb-empty">No liked posts yet.</div>
                    @endforelse
                    {{ $items->links() }}
                @else
                    @forelse($items as $post)
                        @include('nurse.connect.partials.post-card', ['post' => $post])
                    @empty
                        <div class="fb-card fb-empty">You haven’t posted yet. Share your first experience or question to get started.</div>
                    @endforelse
                    {{ $items->links() }}
                @endif
            </div>
        </main>

        {{-- RIGHT SIDEBAR --}}
        <aside id="rightSidebar" class="space-y-4">
            {{-- Search / Filters for Healthcare Workers --}}
            @include('components.connect.filters', [
                'feed' => request('feed', 'all'),
                'country' => request('country', ''),
                'specialty' => request('specialty', ''),
                'countries' => $countries ?? collect(),
                'specialties' => $specialties ?? collect(),
            ])

            <div class="fb-card fb-card-body">
                <h3 class="text-sm font-semibold text-slate-900">Suggestions</h3>
                <p class="text-sm text-slate-600">Keep building your network to see more here.</p>
            </div>
        </aside>
    </div>
</div>
@endsection