{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/profile.css' %}?v=20260520">
{% endblock %}

{% block content %}
<section class="profile-container">
    <div class="profile-shell">
        <div class="profile-head">
            <div class="profile-avatar">
                {% if user.profile.image %}
                    <img src="{{ user.profile.image.url }}" alt="{{ user.username }}" />
                {% else %}
                    <div class="avatar-placeholder">{{ user.username|slice:":1"|upper }}</div>
                {% endif %}
            </div>
            <div class="profile-head-copy">
                <h1>{{ user.get_full_name|default:user.username }}</h1>
                <p>@{{ user.username }}</p>
                <p>{{ user.email|default:'No email added yet' }}</p>
                {% if profile.short_location %}
                <p>📍 {{ profile.short_location }}</p>
                {% endif %}
                {% if user.profile.is_seller %}
                <p>Seller Account: Active</p>
                {% endif %}
                <div class="profile-readiness">
                    <strong>{{ profile_completion }}%</strong>
                    <span>checkout-ready account setup</span>
                </div>
            </div>
        </div>

        <div class="profile-stats">
            <div class="stat-card"><h3>{{ orders_count }}</h3><p>Total Orders</p></div>
            <div class="stat-card"><h3>{{ delivered_count }}</h3><p>Delivered</p></div>
            <div class="stat-card"><h3>{{ pending_count }}</h3><p>In Progress</p></div>
            <div class="stat-card"><h3>{{ wishlist_count }}</h3><p>Wishlist</p></div>
            <div class="stat-card"><h3>Rs. {{ total_spent|floatformat:2 }}</h3><p>Total Spent</p></div>
            <div class="stat-card"><h3>{{ user.date_joined|date:'Y' }}</h3><p>Member Since</p></div>
        </div>

        <div class="profile-delivery-grid">
            <div class="profile-panel">
                <h2>Saved Delivery Details</h2>
                <div class="delivery-details-grid">
                    <div class="delivery-detail-card">
                        <span>Phone</span>
                        <strong>{{ profile.phone|default:'Not set' }}</strong>
                    </div>
                    <div class="delivery-detail-card">
                        <span>Quick location</span>
                        <strong>{{ profile.short_location|default:'Not set' }}</strong>
                    </div>
                    <div class="delivery-detail-card delivery-detail-card--full">
                        <span>Default address</span>
                        <strong>{% if profile.formatted_delivery_address %}{{ profile.formatted_delivery_address|linebreaksbr }}{% else %}Not set{% endif %}</strong>
                    </div>
                    <div class="delivery-detail-card">
                        <span>GPS status</span>
                        <strong>{% if profile.has_precise_location %}Saved{% else %}Manual only{% endif %}</strong>
                    </div>
                    <div class="delivery-detail-card">
                        <span>Last GPS update</span>
                        <strong>{% if profile.location_updated_at %}{{ profile.location_updated_at|date:'M d, Y H:i' }}{% else %}-{% endif %}</strong>
                    </div>
                </div>
            </div>

            <div class="profile-panel">
                <h2>What this unlocks</h2>
                <div class="profile-checklist">
                    <div class="check-row {% if user.email %}is-done{% endif %}">Email for order/payment communication</div>
                    <div class="check-row {% if profile.phone %}is-done{% endif %}">Phone ready for delivery calls</div>
                    <div class="check-row {% if profile.formatted_delivery_address %}is-done{% endif %}">Default address prefilled at checkout</div>
                    <div class="check-row {% if profile.has_precise_location %}is-done{% endif %}">Precise GPS support for delivery help</div>
                </div>
            </div>
        </div>

        <div class="profile-panel">
            <div class="profile-section-head">
                <div>
                    <h2>Recent Delivery Shortcuts</h2>
                    <p>These recent delivery points appear as quick-select shortcuts on the checkout page.</p>
                </div>
                <a href="{% url 'settings' %}" class="btn btn-secondary">Update Default Address</a>
            </div>
            {% if recent_delivery_points %}
                <div class="delivery-shortcuts-list">
                    {% for order in recent_delivery_points %}
                        <div class="delivery-shortcut-card">
                            <div class="delivery-shortcut-top">
                                <strong>{{ order.location_label|default:order.address|truncatechars:48 }}</strong>
                                <span>Order #{{ order.id }}</span>
                            </div>
                            <p>{{ order.address|linebreaksbr }}</p>
                            <div class="delivery-shortcut-meta">
                                <span>{{ order.phone }}</span>
                                <span>{{ order.created_at|date:'M d, Y' }}</span>
                                <span>{% if order.has_precise_location %}GPS saved{% else %}Manual{% endif %}</span>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <p>Complete a checkout once and your recent delivery points will appear here as reusable shortcuts.</p>
            {% endif %}
        </div>

        <div class="profile-panel">
            <h2>Recent Orders</h2>
            {% if recent_orders %}
                <div class="recent-orders">
                    {% for order in recent_orders %}
                        <a href="{% url 'order_detail' order.id %}" class="recent-order-row">
                            <span>#{{ order.id }}</span>
                            <span>{{ order.created_at|date:'M d, Y' }}</span>
                            <span>{{ order.status }}</span>
                            <strong>Rs. {{ order.total_price|floatformat:2 }}</strong>
                        </a>
                    {% endfor %}
                </div>
            {% else %}
                <p>No orders yet.</p>
            {% endif %}
        </div>

        <div class="profile-actions">
            <a href="{% url 'wishlist' %}" class="btn btn-secondary">Open Wishlist</a>
            <a href="{% url 'my_orders' %}" class="btn btn-secondary">View Orders</a>
            <a href="{% url 'settings' %}" class="btn btn-secondary">Delivery Settings</a>
            <a href="{% url 'edit_profile' %}" class="btn btn-secondary">Edit Profile</a>
            <a href="{% url 'logout' %}" class="btn btn-primary">Logout</a>
        </div>
    </div>
</section>
{% endblock %}