{% extends "layout.html.twig" %}

{% block title %}{{ profileUser.showName ? profileUser.showName : profileUser.firstName }} - Profile{% endblock %}

{% block head %}
<style>
.profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem 0;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.stat-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #28a745;
}

.item-list {
    margin-top: 2rem;
}

.item-card {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
    border: 1px solid #e5e5e5;
}

.item-card:hover {
    transform: translateY(-2px);
}

.item-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.item-thumbnail:hover {
    transform: scale(1.05);
}

/* Ensure all profile images are constrained */
.item-card img, 
.tab-content img,
.profile img:not(.profile-avatar) {
    width: 100px !important;
    height: auto !important;
    object-fit: cover !important;
}

.item-content {
    padding: 1rem;
}

.profile-header {
    padding: 0 !important;
}

.profile-header .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
</style>
{% endblock %}

{% block content %}
<div class="profile-header">
    <div class="container">
        <div class="row">
            <!-- Left side: Avatar and Bio (col-md-9) -->
            <div class="col-md-9">
                <!-- Top row: Avatar and Name -->
                <div class="row">
                    <div class="col-md-4 text-center">
                        {% if profileUser.avatar %}
                            {% set avatarThumb = profileUser.avatar|replace({'.jpg': '_thumb.jpg', '.jpeg': '_thumb.jpeg', '.png': '_thumb.png'}) %}
                            <img src="/ll_images/{{ avatarThumb }}" 
                                 alt="{{ profileUser.firstName }}" 
                                 class="rounded-circle profile-avatar"
                                 onerror="this.src='/ll_images/{{ profileUser.avatar }}'; this.onerror=function(){this.src='/avatars/default.svg'};">
                        {% else %}
                            <img src="/avatars/default.svg" 
                                 alt="{{ profileUser.firstName }}" 
                                 class="rounded-circle profile-avatar">
                        {% endif %}
                    </div>
                    
                    <div class="col-md-8 d-flex flex-column justify-content-center">
                        <h1 class="display-5 mb-1 giantish">{{ profileUser.firstName }}{% if profileUser.showName %} "{{ profileUser.showName }}"{% endif %}{% if profileUser.lastName %} {{ profileUser.lastName }}{% endif %}</h1>
                        <p class="lead mb-0">Community Member</p>
                        <p class="mb-0">Joined {{ profileUser.registeredOn|date('M Y') }}</p>
                    </div>
                </div>
                
                <!-- Bio Section beneath avatar and name -->
                {% if userPreferences and userPreferences.bio and userPreferences.displayBio %}
                    <div class="row mt-1">
                        <div class="col-12">
                            <div class="bio-section">
                                <h6 class="text-white mb-1"><i class="fas fa-user me-2"></i>Bio</h6>
                                <p class="mb-0 medium">{{ userPreferences.bio }}</p>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
            
            <!-- Right side: Contact Information (rowspan style) -->
            <div class="col-md-3">
                <div class="contact-info h-100 d-flex flex-column" style="line-height: 1.0;">
                    {% if userPreferences and userPreferences.displayEmail and profileUser.email %}
                        <p class="mb-0 small">{{ profileUser.email }}</p>
                    {% endif %}
                    
                    {% if userPreferences and userPreferences.displayPhone and profileUser.phone %}
                        <p class="mb-0 small">{{ profileUser.phone }}</p>
                    {% endif %}
                    
                    {% if userPreferences and userPreferences.displayAddress and profileUser.address %}
                        <p class="mb-0 small">{{ profileUser.address }}{% if profileUser.town %}, {{ profileUser.town }}{% endif %}</p>
                    {% endif %}
                    
                    {% if userPreferences and userPreferences.displayGender and profileUser.gender %}
                        <p class="mb-0 small">{{ profileUser.gender }}</p>
                    {% endif %}
                    
                    {% if userPreferences and userPreferences.displayAge and profileUser.age %}
                        <p class="mb-0 small">Age: {{ profileUser.age }}</p>
                    {% endif %}
                    
                    <!-- Edit Profile Button -->
                    {% if user and user.id == profileUser.id %}
                        <div class="mt-auto pt-3">
                            <a href="/edit-profile" class="btn btn-outline-light btn-sm">
                                <i class="fas fa-edit me-2"></i>Edit this Profile
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container my-5">
    <!-- Stats Section -->
    <div class="row mb-5">
        <div class="col-lg-2 col-md-4 col-6">
            <div class="stat-card">
                <div class="stat-number">{{ stats.itemsShared }}</div>
                <div class="text-muted">Items Offered</div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-6">
            <div class="stat-card">
                <div class="stat-number">{{ stats.itemsBorrowed }}</div>
                <div class="text-muted">Items Borrowed</div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-6">
            <div class="stat-card">
                <div class="stat-number">{{ stats.itemsCurrentlyLent }}</div>
                <div class="text-muted">Currently Lent</div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-6">
            <div class="stat-card">
                <div class="stat-number">{{ stats.totalViews }}</div>
                <div class="text-muted">Total Views</div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-6">
            <div class="stat-card">
                <div class="stat-number">{{ stats.activeConversations }}</div>
                <div class="text-muted">Active Chats</div>
            </div>
        </div>

    </div>

    <!-- Profile Actions and Items Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3>{{ profileUser.showName ? profileUser.showName : profileUser.firstName }}'s Items</h3>
        <div class="d-flex gap-2">
            {% if session.userId == profileUser.id %}
                <a href="/edit-profile/{{ profileUser.id }}" class="btn btn-outline-primary">
                    <i class="fas fa-edit me-2"></i>Edit Profile
                </a>
                <a href="/create-item" class="btn btn-success">
                    <i class="fas fa-plus me-2"></i>Add New Item
                </a>
            {% endif %}
        </div>
    </div>

    <!-- Public Items Section (no tabs needed for public view) -->
    <div class="public-items-section">
        <div class="items-content">
            {% if userItems|length > 0 %}
                <div class="item-list">
                    {% for item in userItems %}
                        <div class="item-card">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    {% if item.primaryLogo %}
                                        {% set thumbnailImage = item.primaryLogo|replace({'.jpg': '_thumb.jpg', '.png': '_thumb.png', '.jpeg': '_thumb.jpeg'}) %}
                                        <a href="/lendable_items/{{ item.primaryLogo }}" target="_blank">
                                            <img src="/lendable_items/{{ thumbnailImage }}" alt="{{ item.title }}" class="item-thumbnail" onerror="this.src='/lendable_items/{{ item.primaryLogo }}'">
                                        </a>
                                    {% else %}
                                        <div class="item-thumbnail d-flex align-items-center justify-content-center bg-light">
                                            <i class="fas fa-image fa-2x text-muted"></i>
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="col">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h5 class="mb-1">
                                                <a href="/item/{{ item.id }}" class="text-decoration-none text-dark">{{ item.title }}</a>
                                            </h5>
                                            <p class="text-muted mb-2" style="line-height: 1.0;">{{ item.description|slice(0, 150) }}{% if item.description|length > 150 %}...{% endif %}</p>
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="badge bg-primary">{{ item.categoryName }}</span>
                                                <span class="text-muted small"><i class="fas fa-eye me-1"></i>{{ item.views ?: 0 }} views</span>
                                            </div>
                                        </div>
                                        <div class="col-md-4 text-end">
                                            <div class="mb-2">
                                                {% if item.isRequest %}
                                                    <span class="badge bg-warning">Looking for this</span>
                                                {% elseif item.dailyRate and item.dailyRate > 0 %}
                                                    <span class="badge bg-danger badge-nowrap">Rentable</span>
                                                    <span class="badge bg-info">${{ item.dailyRate }}/day</span>
                                                {% else %}
                                                    <span class="badge bg-success badge-nowrap">Lendable</span>
                                                {% endif %}
                                            </div>
                                            <div>
                                                {% if item.isRequest %}
                                                    <span class="text-info small"><i class="fas fa-search me-1"></i>Asking for</span>
                                                {% elseif item.isAvailable %}
                                                    <span class="text-success small"><i class="fas fa-check-circle me-1"></i>Available</span>
                                                {% else %}
                                                    <span class="text-warning small"><i class="fas fa-clock me-1"></i>On Loan</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-box-open fa-4x text-muted mb-3"></i>
                    <h4 class="text-muted">No items shared yet</h4>
                    {% if session.userId == profileUser.id %}
                        <p class="text-muted">Start sharing items with your community!</p>
                        <a href="/create-item" class="btn btn-success">Share Your First Item</a>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
</div>



{% endblock %}