@extends('layouts.app')

@section('content')
<div class="profile-page" id="profile-page" data-page-url="{{ $pageUrl }}">
    <header class="profile-page-header">
        <a href="{{ url()->previous() !== url()->current() ? url()->previous() : route('gc.dashboard') }}" class="profile-page-back" aria-label="Back">
            <i class="fa-solid fa-arrow-left"></i>
        </a>
        <h1>Profile</h1>
        <button type="button" class="profile-page-share-btn" id="profile-page-share" title="Share profile">
            <i class="fa-solid fa-share-nodes"></i>
        </button>
    </header>

    <section class="profile-page-hero">
        <img src="{{ $profileUser->avatarUrl() }}" alt="" class="profile-page-avatar">
        <h2>{{ $profileUser->name }}</h2>
        @if($profileUser->username)
            <p class="profile-page-username">@{{ $profileUser->username }}</p>
        @endif
        @if($profileUser->bio)
            <p class="profile-page-bio">{{ $profileUser->bio }}</p>
        @endif
        @if($profileUser->status_message)
            <p class="profile-page-about">{{ $profileUser->status_message }}</p>
        @endif
        <div class="profile-page-stats">
            <span><strong>{{ $catalog['followers_count'] }}</strong> followers</span>
            <span><strong>{{ $catalog['following_count'] }}</strong> following</span>
        </div>
        @if(!$isOwner)
            <a href="{{ route('gc.dashboard', $profileUser->id) }}" class="auth-button profile-page-message-btn">
                <i class="fa-solid fa-message"></i> Message
            </a>
        @endif
    </section>

    <div class="profile-page-tabs" role="tablist">
        <button type="button" class="profile-page-tab active" data-profile-tab="files">Files</button>
        <button type="button" class="profile-page-tab" data-profile-tab="products">Products</button>
    </div>

    <section class="profile-page-panel active" id="profile-panel-files" data-panel="files">
        @if($isOwner)
            <label class="profile-file-upload">
                <i class="fa-solid fa-cloud-arrow-up"></i>
                <span>Upload file to profile</span>
                <input type="file" id="profile-file-input" hidden>
            </label>
        @endif
        <div class="profile-file-list" id="profile-file-list">
            @forelse($catalog['files'] as $file)
                <div class="profile-file-row" data-file-id="{{ $file['id'] }}">
                    <a href="{{ $file['download_url'] }}" class="profile-file-main" download>
                        <span class="profile-file-icon"><i class="fa-solid fa-file-lines"></i></span>
                        <span class="profile-file-meta">
                            <strong>{{ $file['title'] }}</strong>
                            <span>{{ $file['file_size_label'] }} · {{ $file['original_name'] }}</span>
                        </span>
                    </a>
                    @if($isOwner)
                        <button type="button" class="profile-file-delete" data-delete-file="{{ $file['id'] }}" title="Remove">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    @endif
                </div>
            @empty
                <p class="profile-empty-note" id="profile-files-empty">No files yet.</p>
            @endforelse
        </div>
    </section>

    <section class="profile-page-panel" id="profile-panel-products" data-panel="products" hidden>
        @forelse($catalog['categories'] as $category)
            <div class="profile-category-block">
                <h3 class="profile-category-title">{{ $category['name'] }}</h3>
                <div class="profile-product-grid">
                    @foreach($category['products'] as $product)
                        <a href="{{ $product['url'] }}" target="_blank" rel="noopener" class="profile-product-card">
                            <img src="{{ $product['image'] }}" alt="" loading="lazy">
                            <div class="profile-product-body">
                                <strong>{{ $product['name'] }}</strong>
                                <span>{{ $product['price_label'] }}</span>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @empty
            <p class="profile-empty-note">No products added yet.</p>
        @endforelse
    </section>
</div>

<script>
    window.profilePageConfig = {
        pageUrl: @json($pageUrl),
        isOwner: @json($isOwner),
        csrf: @json(csrf_token()),
        routes: {
            storeFile: @json(route('gc.profile.files.store')),
            destroyFile: @json(url('/gc/profile/files')),
        },
    };
</script>
@endsection