@extends('layouts.user')

@section('title', ($user->name ?? 'User') . ' – Profile')

@php
    $isOwnProfile = auth()->check() && auth()->id() == $user->id;
    $location = trim(($profile->city ?? '') . ', ' . ($profile->country ?? ''), ', ');
    $experience = $profile->experience_years ?? $profile->years_experience ?? null;
@endphp

@push('styles')
<style>
    .profile-view-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif; }
    .profile-view-cover {
        height: 200px;
        background: linear-gradient(135deg, #0a66c2 0%, #004182 50%, #057642 100%);
        position: relative;
    }
    .profile-view-container { max-width: 1128px; margin: 0 auto; padding: 0 24px 48px; }
    .profile-view-intro {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08);
        border: 1px solid #e0dfdc;
        margin-top: -80px;
        position: relative;
        padding: 0 24px 24px;
        margin-bottom: 24px;
    }
    .profile-view-avatar-wrap {
        display: flex;
        align-items: flex-end;
        gap: 24px;
        flex-wrap: wrap;
    }
    .profile-view-avatar {
        width: 156px;
        height: 156px;
        border-radius: 50%;
        border: 4px solid #fff;
        margin-top: -78px;
        background: linear-gradient(135deg, #0a66c2, #057642);
        color: #fff;
        font-size: 3rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        object-fit: cover;
        flex-shrink: 0;
    }
    .profile-view-head {
        flex: 1;
        min-width: 0;
        padding-top: 12px;
    }
    .profile-view-name { font-size: 1.5rem; font-weight: 600; color: rgba(0,0,0,.9); margin: 0 0 4px 0; line-height: 1.2; }
    .profile-view-headline { font-size: 0.9375rem; color: rgba(0,0,0,.6); margin: 0 0 4px 0; }
    .profile-view-location { font-size: 0.875rem; color: rgba(0,0,0,.6); margin: 0; }
    .profile-view-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
    }
    .profile-view-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 20px;
        font-size: 0.9375rem;
        font-weight: 600;
        border-radius: 24px;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid #0a66c2;
        transition: background 0.15s, color 0.15s;
    }
    .profile-view-btn-primary { background: #0a66c2; color: #fff; border-color: #0a66c2; }
    .profile-view-btn-primary:hover { background: #004182; border-color: #004182; color: #fff; }
    .profile-view-btn-secondary { background: #fff; color: #0a66c2; }
    .profile-view-btn-secondary:hover { background: rgba(10,102,194,.08); color: #004182; }
    .profile-view-btn:disabled { opacity: 0.7; cursor: default; }
    .profile-view-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    @media (min-width: 768px) {
        .profile-view-grid { grid-template-columns: 1fr 320px; }
    }
    .profile-view-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08);
        border: 1px solid #e0dfdc;
        overflow: hidden;
    }
    .profile-view-card-title {
        font-size: 1rem;
        font-weight: 600;
        color: rgba(0,0,0,.9);
        margin: 0;
        padding: 16px 24px;
        border-bottom: 1px solid #e0dfdc;
    }
    .profile-view-card-body { padding: 16px 24px 24px; }
    .profile-view-about { font-size: 0.9375rem; color: rgba(0,0,0,.75); line-height: 1.5; white-space: pre-wrap; }
    .profile-view-detail-row { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 8px 0; border-bottom: 1px solid #f3f2ef; }
    .profile-view-detail-row:last-child { border-bottom: none; }
    .profile-view-detail-label { font-size: 0.75rem; color: rgba(0,0,0,.6); font-weight: 600; min-width: 120px; }
    .profile-view-detail-value { font-size: 0.9375rem; color: rgba(0,0,0,.9); }
    .profile-view-doc-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f3f2ef; }
    .profile-view-doc-item:last-child { border-bottom: none; }
    .profile-view-sidebar-card { margin-bottom: 16px; }
    .profile-view-back { font-size: 0.875rem; color: #0a66c2; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; }
    .profile-view-back:hover { text-decoration: underline; }
    .profile-view-stats { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 8px; font-size: 0.875rem; color: rgba(0,0,0,.6); }
    .profile-view-stats span { font-weight: 600; color: rgba(0,0,0,.9); margin-right: 2px; }
    .profile-view-verified {
        display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: #057642; font-weight: 600; margin-left: 6px;
    }
    .profile-view-verified svg { width: 16px; height: 16px; flex-shrink: 0; }
    .profile-view-posts-section { margin-top: 24px; }

    /* People you may know: height = content, no scroll */
    .profile-view-suggestions-card {
        margin-top: 24px;
    }
    .profile-view-suggestions-scroll {
        height: auto;
        min-height: 0;
    }
    .profile-view-page .profile-view-suggestions-scroll .suggestions-list,
    .profile-view-page .profile-view-suggestions-scroll .nurse-connect-layout .suggestions-list {
        max-height: none;
        overflow: visible;
        height: auto;
    }
</style>
@endpush

@section('content')
<div class="profile-view-page">
    <div class="profile-view-cover"></div>
    <div class="profile-view-container">
        <a href="{{ url()->previous() }}" class="profile-view-back">
            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Back
        </a>

        <div class="profile-view-intro">
            <div class="profile-view-avatar-wrap">
                <img src="{{ $user->displayAvatarUrl() }}" alt="{{ $user->name }}" class="profile-view-avatar" width="120" height="120" loading="lazy" decoding="async">
                <div class="profile-view-head">
                    <h1 class="profile-view-name">
                        {{ $user->name }}
                        @if($isVerified ?? false)
                            <span class="profile-view-verified" title="Verified profile">
                                <svg fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                                Verified
                            </span>
                        @endif
                    </h1>
                    @if($profile?->headline || $profile?->primary_specialty)
                        <p class="profile-view-headline">{{ $profile?->headline ?: $profile?->primary_specialty }}</p>
                    @endif
                    @if($location)
                        <p class="profile-view-location">{{ $location }}</p>
                    @endif
                    <div class="profile-view-stats">
                        <span>{{ $connectionsCount ?? 0 }}</span> connections
                        <span>{{ $postsCount ?? 0 }}</span> posts
                    </div>
                    @if(!$isOwnProfile && auth()->check())
                        <div class="profile-view-actions">
                            @if($connectionStatus === 'none')
                                <form method="POST" action="{{ route('nurse.connect.request') }}" class="inline">
                                    @csrf
                                    <input type="hidden" name="recipient_id" value="{{ $user->id }}">
                                    <button type="submit" class="profile-view-btn profile-view-btn-primary">Connect</button>
                                </form>
                            @elseif($connectionStatus === 'pending')
                                <button type="button" class="profile-view-btn profile-view-btn-secondary" disabled>Pending</button>
                            @else
                                <span class="profile-view-btn profile-view-btn-secondary" style="cursor:default;">Connected</span>
                            @endif
                            <a href="{{ route('nurse.connect.timeline.user', $user) }}" class="profile-view-btn profile-view-btn-secondary">View activity</a>
                        </div>
                    @endif
                    @if($isOwnProfile)
                        <div class="profile-view-actions">
                            <a href="{{ route('user.profile.edit') }}" class="profile-view-btn profile-view-btn-primary">Edit profile</a>
                            <a href="{{ route('nurse.connect.timeline.user', $user) }}" class="profile-view-btn profile-view-btn-secondary">View my activity</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="profile-view-grid">
            <div>
                @if($profile?->bio)
                    <div class="profile-view-card profile-view-sidebar-card">
                        <h2 class="profile-view-card-title">About</h2>
                        <div class="profile-view-card-body">
                            <p class="profile-view-about">{{ $profile->bio }}</p>
                        </div>
                    </div>
                @endif

                <div class="profile-view-card profile-view-sidebar-card">
                    <h2 class="profile-view-card-title">Professional details</h2>
                    <div class="profile-view-card-body">
                        <div class="profile-view-detail-row">
                            <span class="profile-view-detail-label">Primary specialty</span>
                            <span class="profile-view-detail-value">{{ $profile?->primary_specialty ?? '—' }}</span>
                        </div>
                        @if($profile?->secondary_specialty)
                            <div class="profile-view-detail-row">
                                <span class="profile-view-detail-label">Secondary specialty</span>
                                <span class="profile-view-detail-value">{{ $profile->secondary_specialty }}</span>
                            </div>
                        @endif
                        <div class="profile-view-detail-row">
                            <span class="profile-view-detail-label">Experience</span>
                            <span class="profile-view-detail-value">{{ $experience !== null ? $experience . ' years' : '—' }}</span>
                        </div>
                        <div class="profile-view-detail-row">
                            <span class="profile-view-detail-label">License type</span>
                            <span class="profile-view-detail-value">{{ $profile?->license_type ?? '—' }}</span>
                        </div>
                        @if($profile?->nclex_status)
                            <div class="profile-view-detail-row">
                                <span class="profile-view-detail-label">NCLEX</span>
                                <span class="profile-view-detail-value">{{ ucfirst($profile->nclex_status) }}</span>
                            </div>
                        @endif
                        @if($profile?->language_skills)
                            <div class="profile-view-detail-row">
                                <span class="profile-view-detail-label">Languages</span>
                                <span class="profile-view-detail-value">{{ $profile->language_skills }}</span>
                            </div>
                        @endif
                        @if($profile?->preferred_shift)
                            <div class="profile-view-detail-row">
                                <span class="profile-view-detail-label">Preferred shift</span>
                                <span class="profile-view-detail-value">{{ $profile->preferred_shift }}</span>
                            </div>
                        @endif
                    </div>
                </div>

                @if(($documents ?? collect())->isNotEmpty())
                    <div class="profile-view-card profile-view-sidebar-card">
                        <h2 class="profile-view-card-title">Documents</h2>
                        <div class="profile-view-card-body">
                            @foreach($documents as $document)
                                <div class="profile-view-doc-item">
                                    <div>
                                        <p class="profile-view-detail-value" style="margin:0;">{{ $document->original_filename ?? $document->type ?? 'Document' }}</p>
                                        <p class="profile-view-detail-label" style="margin:2px 0 0 0;">{{ $document->type ?? $document->doc_type ?? 'File' }}</p>
                                    </div>
                                    @if(!empty($document->file_url))
                                        <a href="{{ $document->file_url }}" class="profile-view-btn profile-view-btn-secondary" style="padding:6px 14px; font-size:0.875rem;" target="_blank" rel="noopener">View</a>
                                    @elseif(!empty($document->file_path))
                                        <a href="{{ asset('storage/' . $document->file_path) }}" class="profile-view-btn profile-view-btn-secondary" style="padding:6px 14px; font-size:0.875rem;" target="_blank" rel="noopener">View</a>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Posts by this user --}}
                <div class="profile-view-posts-section profile-view-card">
                    <h2 class="profile-view-card-title">
                        Posts
                        @if(($postsCount ?? 0) > 0)
                            <span style="font-weight:400; color: rgba(0,0,0,.6);">({{ $postsCount }})</span>
                        @endif
                    </h2>
                    <div class="profile-view-card-body">
                        @if(($recentPosts ?? collect())->isNotEmpty())
                            <div class="nurse-connect-layout">
                                <div class="profile-view-posts-feed" style="display: flex; flex-direction: column; gap: 12px;">
                                    @foreach($recentPosts as $post)
                                        @include('nurse.connect.partials.post-card', ['post' => $post])
                                    @endforeach
                                </div>
                                @if(($postsCount ?? 0) > count($recentPosts))
                                    <p style="margin-top: 16px; margin-bottom: 0;">
                                        <a href="{{ route('nurse.connect.timeline.user', $user) }}" class="profile-view-btn profile-view-btn-secondary" style="text-decoration: none;">View all posts</a>
                                    </p>
                                @endif
                            </div>
                        @else
                            <p class="profile-view-about" style="margin:0;">No posts yet.</p>
                            <a href="{{ route('nurse.connect.timeline.user', $user) }}" class="profile-view-btn profile-view-btn-secondary" style="margin-top: 12px; text-decoration: none; display: inline-flex;">View activity</a>
                        @endif
                    </div>
                </div>
            </div>

            <aside>
                <div class="profile-view-card">
                    <h2 class="profile-view-card-title">Profile info</h2>
                    <div class="profile-view-card-body">
                        @if($isVerified ?? false)
                            <div class="profile-view-detail-row">
                                <span class="profile-view-detail-label">Status</span>
                                <span class="profile-view-detail-value profile-view-verified" style="margin:0;">
                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                                    Verified
                                </span>
                            </div>
                        @endif
                        <div class="profile-view-detail-row">
                            <span class="profile-view-detail-label">Connections</span>
                            <span class="profile-view-detail-value">{{ $connectionsCount ?? 0 }}</span>
                        </div>
                        <div class="profile-view-detail-row">
                            <span class="profile-view-detail-label">Posts</span>
                            <span class="profile-view-detail-value">{{ $postsCount ?? 0 }}</span>
                        </div>
                        <div class="profile-view-detail-row">
                            <span class="profile-view-detail-label">Location</span>
                            <span class="profile-view-detail-value">{{ $location ?: '—' }}</span>
                        </div>
                        <div class="profile-view-detail-row">
                            <span class="profile-view-detail-label">Role</span>
                            <span class="profile-view-detail-value">{{ ucfirst($user->role ?? 'user') }}</span>
                        </div>
                        @if($profile?->country)
                            <div class="profile-view-detail-row">
                                <span class="profile-view-detail-label">Country</span>
                                <span class="profile-view-detail-value">{{ $profile->country }}</span>
                            </div>
                        @endif
                    </div>
                </div>

                @if(($suggestedUsers ?? collect())->isNotEmpty())
                    <div class="profile-view-card profile-view-sidebar-card profile-view-suggestions-card">
                        <h2 class="profile-view-card-title">People you may know</h2>
                        <div class="profile-view-card-body" style="padding: 12px 16px;">
                            <div class="profile-view-suggestions-scroll">
                                <div class="nurse-connect-layout">
                                    <div class="suggestions-list">
                                        @include('nurse.connect.partials.suggestion-cards', ['suggestedNurses' => $suggestedUsers])
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </aside>
        </div>
    </div>
</div>
@endsection