{% extends 'accounts/base_account.html' %}
{% load humanize %}

{% block account_content %}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-4">
        <div class="row align-items-center">
            <div class="col-md-3 text-center mb-4 mb-md-0">
                <div class="position-relative d-inline-block">
                    <img src="{{ profile_user.get_profile_picture_url }}" 
                         class="rounded-circle img-thumbnail" 
                         alt="{{ profile_user.get_full_name }}"
                         style="width: 150px; height: 150px; object-fit: cover;">
                    {% if profile_user == request.user %}
                        <a href="{% url 'accounts:profile_edit' username=profile_user.username %}" 
                           class="btn btn-sm btn-primary position-absolute bottom-0 end-0 rounded-circle"
                           style="width: 36px; height: 36px; line-height: 24px;">
                            <i class="fas fa-pencil-alt"></i>
                        </a>
                    {% endif %}
                </div>
                
                {% if profile_user != request.user %}
                    <div class="mt-3">
                        {% if is_following %}
                            <form method="post" action="{% url 'accounts:unfollow' profile_user.username %}" class="d-inline">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-outline-secondary btn-sm">
                                    <i class="fas fa-user-minus me-1"></i> Unfollow
                                </button>
                            </form>
                        {% else %}
                            <form method="post" action="{% url 'accounts:follow' profile_user.username %}" class="d-inline">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fas fa-user-plus me-1"></i> Follow
                                </button>
                            </form>
                        {% endif %}
                        
                        <a href="{% url 'messaging:new_conversation' username=profile_user.username %}" 
                           class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-envelope me-1"></i> Message
                        </a>
                    </div>
                {% endif %}
            </div>
            
            <div class="col-md-9">
                <div class="d-flex flex-column h-100">
                    <div class="mb-3">
                        <div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
                            <h2 class="mb-0">{{ profile_user.get_full_name|default:profile_user.username }}</h2>
                            {% if profile_user.is_verified %}
                                <span class="badge bg-success">
                                    <i class="fas fa-check-circle me-1"></i> Verified
                                </span>
                            {% endif %}
                        </div>
                        
                        {% if profile_user.user_type %}
                            <p class="text-muted mb-2">
                                <i class="fas fa-user-tag me-1"></i> 
                                {{ profile_user.get_user_type_display }}
                            </p>
                        {% endif %}
                        
                        {% if profile_user.bio %}
                            <p class="mb-3">{{ profile_user.bio }}</p>
                        {% endif %}
                        
                        <div class="d-flex flex-wrap gap-3 mb-3">
                            {% if profile_user.location %}
                                <div class="d-flex align-items-center text-muted">
                                    <i class="fas fa-map-marker-alt me-1"></i>
                                    <span>{{ profile_user.location }}</span>
                                </div>
                            {% endif %}
                            
                            {% if profile_user.joined_date %}
                                <div class="d-flex align-items-center text-muted">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    <span>Joined {{ profile_user.joined_date|date:"F Y" }}</span>
                                </div>
                            {% endif %}
                        </div>
                        
                        {% if profile_user.website or profile_user.facebook_url or profile_user.twitter_handle or profile_user.instagram_handle %}
                            <div class="social-links mt-2">
                                {% if profile_user.website %}
                                    <a href="{{ profile_user.website }}" target="_blank" class="text-decoration-none me-2" 
                                       data-bs-toggle="tooltip" title="Website">
                                        <i class="fas fa-globe fa-lg"></i>
                                    </a>
                                {% endif %}
                                {% if profile_user.facebook_url %}
                                    <a href="{{ profile_user.facebook_url }}" target="_blank" class="text-decoration-none me-2" 
                                       data-bs-toggle="tooltip" title="Facebook">
                                        <i class="fab fa-facebook-f fa-lg"></i>
                                    </a>
                                {% endif %}
                                {% if profile_user.twitter_handle %}
                                    <a href="https://twitter.com/{{ profile_user.twitter_handle }}" target="_blank" 
                                       class="text-decoration-none me-2" data-bs-toggle="tooltip" title="Twitter">
                                        <i class="fab fa-twitter fa-lg"></i>
                                    </a>
                                {% endif %}
                                {% if profile_user.instagram_handle %}
                                    <a href="https://instagram.com/{{ profile_user.instagram_handle }}" target="_blank" 
                                       class="text-decoration-none me-2" data-bs-toggle="tooltip" title="Instagram">
                                        <i class="fab fa-instagram fa-lg"></i>
                                    </a>
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                    
                    {% if profile_user.user_type == 'owner' %}
                        <div class="mt-auto pt-3 border-top">
                            <div class="row g-3">
                                <div class="col-4 text-center">
                                    <h5 class="mb-0">{{ equipment_count|default:0 }}</h5>
                                    <small class="text-muted">Listings</small>
                                </div>
                                <div class="col-4 text-center">
                                    <h5 class="mb-0">{% if avg_rating %}{{ avg_rating|floatformat:1 }}{% else %}N/A{% endif %}</h5>
                                    <small class="text-muted">Avg. Rating</small>
                                </div>
                                <div class="col-4 text-center">
                                    <h5 class="mb-0">{{ review_count|default:0 }}</h5>
                                    <small class="text-muted">Reviews</small>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tabs Navigation -->
<ul class="nav nav-tabs mb-4" id="profileTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" type="button" role="tab" aria-controls="about" aria-selected="true">
            <i class="fas fa-user me-1"></i> About
        </button>
    </li>
    {% if profile_user.user_type == 'owner' %}
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="listings-tab" data-bs-toggle="tab" data-bs-target="#listings" type="button" role="tab" aria-controls="listings" aria-selected="false">
            <i class="fas fa-camera me-1"></i> Listings ({{ equipment_count|default:0 }})
        </button>
    </li>
    {% endif %}
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">
            <i class="fas fa-star me-1"></i> Reviews ({{ review_count|default:0 }})
        </button>
    </li>
    {% if profile_user == request.user %}
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="bookings-tab" data-bs-toggle="tab" data-bs-target="#bookings" type="button" role="tab" aria-controls="bookings" aria-selected="false">
            <i class="fas fa-calendar-alt me-1"></i> My Bookings
        </button>
    </li>
    {% endif %}
</ul>

<!-- Tab Content -->
<div class="tab-content" id="profileTabsContent">
    <!-- About Tab -->
    <div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <h5 class="card-title mb-4">About Me</h5>
                {% if profile_user.bio %}
                    <p class="card-text">{{ profile_user.bio|linebreaksbr }}</p>
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
                        <p class="text-muted">
                            {% if profile_user == request.user %}
                                You haven't added a bio yet. <a href="{% url 'accounts:profile_edit' username=profile_user.username %}">Add one now</a> to tell others about yourself.
                            {% else %}
                                {{ profile_user.get_full_name|default:profile_user.username }} hasn't added a bio yet.
                            {% endif %}
                        </p>
                    </div>
                {% endif %}
                
                <div class="row mt-4">
                    <div class="col-md-6">
                        <h6 class="text-uppercase text-muted small mb-3">Contact Information</h6>
                        <ul class="list-unstyled mb-0">
                            <li class="mb-2">
                                <i class="fas fa-envelope me-2 text-muted"></i>
                                {{ profile_user.email }}
                            </li>
                            {% if profile_user.phone_number %}
                                <li class="mb-2">
                                    <i class="fas fa-phone me-2 text-muted"></i>
                                    {{ profile_user.phone_number }}
                                </li>
                            {% endif %}
                            {% if profile_user.location %}
                                <li>
                                    <i class="fas fa-map-marker-alt me-2 text-muted"></i>
                                    {{ profile_user.location }}
                                </li>
                            {% endif %}
                        </ul>
                    </div>
                    
                    <div class="col-md-6 mt-4 mt-md-0">
                        <h6 class="text-uppercase text-muted small mb-3">Member Since</h6>
                        <p class="mb-0">
                            <i class="far fa-calendar-alt me-2 text-muted"></i>
                            {{ profile_user.date_joined|date:"F j, Y" }}
                        </p>
                        
                        {% if profile_user.user_type == 'owner' %}
                            <h6 class="text-uppercase text-muted small mb-3 mt-4">Response Rate</h6>
                            <div class="d-flex align-items-center">
                                <div class="progress flex-grow-1 me-3" style="height: 8px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 95%;" 
                                         aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <span class="text-muted small">95%</span>
                            </div>
                            <p class="small text-muted mt-1 mb-0">
                                Typically replies within a few hours
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Listings Tab (for owners) -->
    {% if profile_user.user_type == 'owner' %}
    <div class="tab-pane fade" id="listings" role="tabpanel" aria-labelledby="listings-tab">
        {% if equipment_list %}
            <div class="row g-4">
                {% for equipment in equipment_list %}
                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="position-relative">
                            <img src="{{ equipment.get_primary_image_url }}" 
                                 class="card-img-top" 
                                 alt="{{ equipment.title }}"
                                 style="height: 200px; object-fit: cover;">
                            <div class="position-absolute top-0 end-0 m-2">
                                <span class="badge bg-{{ equipment.get_status_class }}">
                                    {{ equipment.get_status_display }}
                                </span>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-1">
                                <a href="{{ equipment.get_absolute_url }}" class="text-decoration-none text-dark">
                                    {{ equipment.title|truncatechars:30 }}
                                </a>
                            </h5>
                            <p class="text-muted small mb-2">
                                <i class="fas fa-map-marker-alt me-1"></i> {{ equipment.city }}, {{ equipment.state }}
                            </p>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div>
                                    <span class="h5 mb-0">Ksh {{ equipment.daily_rate|intcomma }}</span>
                                    <span class="text-muted">/day</span>
                                </div>
                                <div class="text-warning">
                                    {% if equipment.average_rating %}
                                        {% with ''|center:equipment.average_rating_int as range %}
                                            {% for _ in range %}
                                                <i class="fas fa-star"></i>
                                            {% endfor %}
                                        {% endwith %}
                                        <span class="text-muted small">({{ equipment.review_count }})</span>
                                    {% else %}
                                        <span class="text-muted small">No reviews yet</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-top-0 pt-0">
                            <a href="{{ equipment.get_absolute_url }}" class="btn btn-outline-primary w-100">
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-5">
                <div class="mb-4">
                    <i class="fas fa-camera fa-4x text-muted"></i>
                </div>
                <h5 class="mb-3">No Listings Yet</h5>
                <p class="text-muted mb-4">
                    {% if profile_user == request.user %}
                        You haven't listed any equipment yet. Get started by adding your first listing!
                    {% else %}
                        {{ profile_user.get_full_name|default:profile_user.username }} hasn't listed any equipment yet.
                    {% endif %}
                </p>
                {% if profile_user == request.user %}
                    <a href="{% url 'equipment:add' %}" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i> Add Listing
                    </a>
                {% endif %}
            </div>
        {% endif %}
    </div>
    {% endif %}
    
    <!-- Reviews Tab -->
    <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
        {% if reviews %}
            <div class="row">
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body text-center">
                            <div class="display-4 fw-bold mb-1">
                                {{ avg_rating|default:0|floatformat:1 }}
                            </div>
                            <div class="text-warning mb-2">
                                {% with avg_rating_int=avg_rating|default:0|floatformat:0|add:0 %}
                                    {% for i in "12345" %}
                                        {% if forloop.counter <= avg_rating_int %}
                                            <i class="fas fa-star"></i>
                                        {% else %}
                                            <i class="far fa-star"></i>
                                        {% endif %}
                                    {% endfor %}
                                {% endwith %}
                            </div>
                            <p class="text-muted small mb-0">
                                {{ review_count }} review{{ review_count|pluralize }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    {% for review in reviews %}
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-3">
                                <div class="d-flex">
                                    <img src="{{ review.reviewer.get_profile_picture_url }}" 
                                         class="rounded-circle me-3" 
                                         alt="{{ review.reviewer.get_full_name }}"
                                         style="width: 50px; height: 50px; object-fit: cover;">
                                    <div>
                                        <h6 class="mb-0">{{ review.reviewer.get_full_name|default:review.reviewer.username }}</h6>
                                        <div class="text-warning small">
                                            {% for i in "12345" %}
                                                {% if forloop.counter <= review.rating %}
                                                    <i class="fas fa-star"></i>
                                                {% else %}
                                                    <i class="far fa-star"></i>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                                <div class="text-muted small">
                                    {{ review.created_at|timesince }} ago
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <h6>{{ review.title }}</h6>
                                <p class="mb-0">{{ review.comment|linebreaksbr }}</p>
                            </div>
                            
                            {% if review.response %}
                            <div class="bg-light p-3 rounded mt-3">
                                <div class="d-flex justify-content-between mb-2">
                                    <strong>Response from {{ profile_user.get_short_name }}:</strong>
                                    <span class="text-muted small">
                                        {{ review.updated_at|timesince }} ago
                                    </span>
                                </div>
                                <p class="mb-0">{{ review.response|linebreaksbr }}</p>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        {% else %}
            <div class="text-center py-5">
                <div class="mb-4">
                    <i class="far fa-star fa-4x text-muted"></i>
                </div>
                <h5 class="mb-3">No Reviews Yet</h5>
                <p class="text-muted mb-4">
                    {% if profile_user == request.user %}
                        You don't have any reviews yet. Start renting equipment to receive reviews from owners.
                    {% else %}
                        {{ profile_user.get_full_name|default:profile_user.username }} doesn't have any reviews yet.
                    {% endif %}
                </p>
            </div>
        {% endif %}
    </div>
    
    <!-- Bookings Tab (for own profile) -->
    {% if profile_user == request.user %}
    <div class="tab-pane fade" id="bookings" role="tabpanel" aria-labelledby="bookings-tab">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Equipment</th>
                                <th>Dates</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for booking in bookings %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="{{ booking.equipment.get_primary_image_url }}" 
                                             class="rounded me-2" 
                                             alt="{{ booking.equipment.title }}"
                                             style="width: 50px; height: 50px; object-fit: cover;">
                                        <div>
                                            <h6 class="mb-0">
                                                <a href="{{ booking.equipment.get_absolute_url }}" class="text-decoration-none">
                                                    {{ booking.equipment.title|truncatechars:30 }}
                                                </a>
                                            </h6>
                                            <small class="text-muted">
                                                {{ booking.equipment.category.name }}
                                            </small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex flex-column">
                                        <span>{{ booking.start_date|date:"M j, Y" }}</span>
                                        <span class="text-muted small">to {{ booking.end_date|date:"M j, Y" }}</span>
                                    </div>
                                </td>
                                <td>Ksh {{ booking.total_price|intcomma }}</td>
                                <td>
                                    <span class="badge bg-{{ booking.get_status_class }}">
                                        {{ booking.get_status_display }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" 
                                                id="bookingActions{{ booking.id }}" data-bs-toggle="dropdown" 
                                                aria-expanded="false">
                                            Actions
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bookingActions{{ booking.id }}">
                                            <li>
                                                <a class="dropdown-item" href="{% url 'bookings:detail' booking.booking_number %}">
                                                    <i class="fas fa-eye me-2"></i>View Details
                                                </a>
                                            </li>
                                            {% if booking.status == 'pending' %}
                                                <li>
                                                    <a class="dropdown-item text-danger" href="#" 
                                                       data-bs-toggle="modal" data-bs-target="#cancelBookingModal{{ booking.id }}">
                                                        <i class="fas fa-times me-2"></i>Cancel Booking
                                                    </a>
                                                </li>
                                            {% endif %}
                                            {% if booking.status == 'completed' and not booking.has_reviewed %}
                                                <li>
                                                    <a class="dropdown-item" href="{% url 'reviews:create' booking.booking_number %}">
                                                        <i class="fas fa-star me-2"></i>Write a Review
                                                    </a>
                                                </li>
                                            {% endif %}
                                            <li>
                                                <a class="dropdown-item" href="{% url 'messaging:conversation' booking.conversation.id %}">
                                                    <i class="fas fa-envelope me-2"></i>Message Owner
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center py-5">
                                    <div class="mb-3">
                                        <i class="far fa-calendar-alt fa-4x text-muted"></i>
                                    </div>
                                    <h5>No Bookings Yet</h5>
                                    <p class="text-muted mb-4">
                                        You haven't made any bookings yet. Start exploring our equipment!
                                    </p>
                                    <a href="{% url 'equipment:list' %}" class="btn btn-primary">
                                        <i class="fas fa-search me-1"></i> Browse Equipment
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
});

// Handle tab persistence
if (window.location.hash) {
    const tab = new bootstrap.Tab(document.querySelector(`a[href="${window.location.hash}"]`));
    tab.show();
}

// Update URL when a tab is shown
document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(tab => {
    tab.addEventListener('shown.bs.tab', function (e) {
        window.location.hash = e.target.getAttribute('data-bs-target');
    });
});
</script>
{% endblock %}