{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/feed.css">
<link rel="stylesheet" href="/static/css/profile.css">
<link rel="stylesheet" href="/static/css/projects.css">
<link rel="stylesheet" href="/static/css/gists.css">
{% endblock %}
{% block content %}
<div class="profile-layout">
    <aside class="profile-sidebar">
        <div class="profile-card">
                <div class="profile-avatar-wrap">
                <img src="{{ avatar_url('multiavatar', profile_user['username'], 80) }}" class="avatar-img avatar-lg" alt="{{ profile_user['username'] }}" id="profile-avatar-preview" loading="lazy">
            </div>
            <h1 class="profile-name">{{ profile_user['username'] }}</h1>
            {% if is_admin(user) and profile_user.get('role') %}
            <div class="profile-role">{{ profile_user['role'] }}</div>
            {% endif %}

            <div class="profile-stats">
                <div class="profile-stat">
                    <span class="profile-stat-value">{{ posts_count }}</span>
                    <span class="profile-stat-label">Posts</span>
                </div>
                <div class="profile-stat">
                    <span class="profile-stat-value">{{ profile_user.get('level', 1) }}</span>
                    <span class="profile-stat-label">Level</span>
                </div>
                <div class="profile-stat">
                    <span class="profile-stat-value">{{ profile_user.get('stars', 0) }}</span>
                    <span class="profile-stat-label">Stars</span>
                </div>
                <div class="profile-stat">
                    <a href="/leaderboard" class="profile-stat-value">{% if rank %}#{{ rank }}{% else %}-{% endif %}</a>
                    <span class="profile-stat-label">Rank</span>
                </div>
            </div>

            <div class="profile-level-bar">
                <div class="level-label">
                    <span>Progress to next level</span>
                    <span>{{ profile_user.get('xp', 0) % 100 }}%</span>
                </div>
                <div class="bar">
                    <div class="bar-fill" style="width: {{ profile_user.get('xp', 0) % 100 }}%;"></div>
                </div>
            </div>

            <div class="profile-badges">
                {% for badge in badges %}
                {% set meta = badge_info(badge['badge_name']) %}
                <span class="profile-badge" title="{{ meta['description'] }}"><span class="profile-badge-icon">{{ meta['icon'] }}</span>{{ badge['badge_name'] }}</span>
                {% else %}
                {% set meta = badge_info('Member') %}
                <span class="profile-badge" title="{{ meta['description'] }}"><span class="profile-badge-icon">{{ meta['icon'] }}</span>Member</span>
                {% endfor %}
            </div>
        </div>

                {% if not is_self(user, profile_user['uid']) %}
            <div class="profile-actions">
                <a href="{% if user %}/messages?with_uid={{ profile_user['uid'] }}{% else %}/auth/login{% endif %}" class="btn btn-secondary btn-sm full-width justify-center{% if not user %} login-required{% endif %}"{% if not user %} title="Log in to participate"{% endif %}><span class="icon">&#x2709;&#xFE0F;</span>Send Message</a>
                {% if is_following %}
                <form method="POST" action="/follow/unfollow/{{ profile_user['username'] }}">
                    <button type="submit" class="btn btn-secondary btn-sm full-width"{{ guest_disabled(user) }}><span class="icon">&#x2796;</span>Unfollow</button>
                </form>
                {% else %}
                <form method="POST" action="/follow/{{ profile_user['username'] }}">
                    <button type="submit" class="btn btn-primary btn-sm full-width"{{ guest_disabled(user) }}><span class="icon">&#x2795;</span>Follow</button>
                </form>
                {% endif %}
            </div>
            {% endif %}

            {% if is_self(user, profile_user['uid']) %}
        <div class="profile-info">
            <form method="POST" action="/profile/update">
                <div class="profile-info-row">
                    <span class="profile-info-label">Bio</span>
                    <div class="flex-center-gap">
                        <span class="profile-info-value bio-display" id="display-bio">{{ profile_user.get('bio', '') or 'Not set' }}</span>
                        <button type="button" class="profile-info-edit" data-edit-field="bio">&#x270E;</button>
                    </div>
                </div>
                <div class="auth-field hidden input-edit-field" id="input-bio">
                    <textarea name="bio" maxlength="500" rows="2" class="input-sm">{{ profile_user.get('bio', '') }}</textarea>
                </div>

                <div class="profile-info-row">
                    <span class="profile-info-label">Location</span>
                    <div class="flex-center-gap">
                        <span class="profile-info-value" id="display-location">{{ profile_user.get('location', '') or 'Not set' }}</span>
                        <button type="button" class="profile-info-edit" data-edit-field="location">&#x270E;</button>
                    </div>
                </div>
                <div class="auth-field hidden input-edit-field" id="input-location">
                    <input type="text" name="location" maxlength="200" value="{{ profile_user.get('location', '') }}" class="input-sm">
                </div>

                <div class="profile-info-row">
                    <span class="profile-info-label">Git Link</span>
                    <div class="flex-center-gap">
                        <span class="profile-info-value" id="display-git_link">{{ profile_user.get('git_link', '') or 'Not set' }}</span>
                        <button type="button" class="profile-info-edit" data-edit-field="git_link">&#x270E;</button>
                    </div>
                </div>
                <div class="auth-field hidden input-edit-field" id="input-git_link">
                    <input type="url" name="git_link" maxlength="500" value="{{ profile_user.get('git_link', '') }}" class="input-sm">
                </div>

                <div class="profile-info-row">
                    <span class="profile-info-label">Website</span>
                    <div class="flex-center-gap">
                        <span class="profile-info-value" id="display-website">{{ profile_user.get('website', '') or 'Not set' }}</span>
                        <button type="button" class="profile-info-edit" data-edit-field="website">&#x270E;</button>
                    </div>
                </div>
                <div class="auth-field hidden input-edit-field" id="input-website">
                    <input type="url" name="website" maxlength="500" value="{{ profile_user.get('website', '') }}" class="input-sm">
                </div>

                <button type="submit" class="btn btn-primary btn-sm full-width save-btn-top">Save Changes</button>
            </form>
        </div>
        {% else %}
        <div class="profile-info">
            <div class="profile-info-row">
                <span class="profile-info-label">Bio</span>
                <span class="profile-info-value">{{ profile_user.get('bio', '') or 'Not set' }}</span>
            </div>
            <div class="profile-info-row">
                <span class="profile-info-label">Location</span>
                <span class="profile-info-value">{{ profile_user.get('location', '') or 'Not set' }}</span>
            </div>
            <div class="profile-info-row">
                <span class="profile-info-label">Git Link</span>
                <span class="profile-info-value">{{ profile_user.get('git_link', '') or 'Not set' }}</span>
            </div>
            <div class="profile-info-row">
                <span class="profile-info-label">Website</span>
                <span class="profile-info-value">{{ profile_user.get('website', '') or 'Not set' }}</span>
            </div>
        </div>
        {% endif %}

        {% if can_view_api_key %}
        <div class="api-key-card" data-api-key-card>
            <div class="api-key-head">
                <span class="api-key-title">API Key</span>
                <a href="/docs/authentication.html" class="api-key-docs">Docs</a>
            </div>
            <code class="api-key-value" data-api-key data-key="{{ api_key }}" data-masked="true">{{ '•' * 12 }}</code>
            <div class="api-key-actions">
                <button type="button" class="btn btn-sm" data-api-key-reveal>Reveal</button>
                <button type="button" class="btn btn-sm" data-api-key-copy>Copy</button>
                {% if is_owner %}
                <button type="button" class="btn btn-sm btn-primary" data-regen-api-key>Regenerate</button>
                {% endif %}
            </div>
            <p class="api-key-hint">Use this key with <code>X-API-KEY</code>, <code>Authorization: Bearer</code>, or HTTP Basic auth on any request. {% if is_owner %}Regenerating immediately invalidates the old key.{% endif %}</p>
        </div>
        {% endif %}

        {% if can_manage_customization %}
        <div class="customization-card" data-customization data-username="{{ profile_user['username'] }}">
            <div class="customization-head">
                <span class="customization-title">{% if is_owner %}My customizations{% else %}{{ profile_user['username'] }}'s customizations{% endif %}</span>
            </div>
            <div class="customization-row">
                <span class="customization-label">Site-wide custom CSS and JS</span>
                <form method="POST" action="/profile/{{ profile_user['username'] }}/customization/global" data-customization-form>
                    <input type="hidden" name="value" value="{{ 1 if cust_disable_global else 0 }}">
                    <button type="submit" class="btn btn-sm {% if cust_disable_global %}btn-primary{% endif %}" data-customization-toggle="global" data-confirm="{% if cust_disable_global %}Re-enable your site-wide custom CSS and JS?{% else %}Disable your site-wide custom CSS and JS? Your saved code is kept and can be re-enabled.{% endif %}">{% if cust_disable_global %}Enable{% else %}Disable{% endif %}</button>
                </form>
            </div>
            <div class="customization-row">
                <span class="customization-label">Per-page custom CSS and JS</span>
                <form method="POST" action="/profile/{{ profile_user['username'] }}/customization/pagetype" data-customization-form>
                    <input type="hidden" name="value" value="{{ 1 if cust_disable_pagetype else 0 }}">
                    <button type="submit" class="btn btn-sm {% if cust_disable_pagetype %}btn-primary{% endif %}" data-customization-toggle="pagetype" data-confirm="{% if cust_disable_pagetype %}Re-enable your per-page custom CSS and JS?{% else %}Disable your per-page custom CSS and JS? Your saved code is kept and can be re-enabled.{% endif %}">{% if cust_disable_pagetype %}Enable{% else %}Disable{% endif %}</button>
                </form>
            </div>
            <p class="customization-hint">Disabling hides your custom code without deleting it.</p>
        </div>
        {% endif %}
    </aside>

    <div class="profile-content">
        <a href="/feed" class="back-link">&larr; Back</a>

        <div class="profile-heatmap-card">
            <div class="heatmap-header">
                <h3 class="heatmap-title">Contributions</h3>
                <span class="streak-info"><span class="icon">&#x1F525;</span> {{ streak.current }} day streak &middot; Longest {{ streak.longest }}</span>
            </div>
            <div class="heatmap-scroll">
                <div class="heatmap-inner">
                    <div class="heatmap-months">
                        {% for month in heatmap_months %}<span>{{ month }}</span>{% endfor %}
                    </div>
                    <div class="heatmap-grid">
                        {% for week in heatmap %}
                        <div class="heatmap-week">
                            {% for day in week %}
                            <span class="heatmap-cell level-{{ day.level }}" title="{{ day.count }} on {{ day.date }}"></span>
                            {% endfor %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        {% if is_admin(user) %}
        <div class="ai-usage-card" data-ai-usage data-uid="{{ profile_user['uid'] }}">
            <div class="ai-usage-head">
                <h3 class="ai-usage-title">AI usage (last 24h)</h3>
                <span class="ai-usage-updated" data-ai-usage-updated></span>
            </div>
            {% if ai_quota %}
            <div class="ai-quota" data-ai-quota>
                <div class="ai-quota-bar">
                    <span class="ai-quota-fill {% if ai_quota.used_pct >= 90 %}ai-quota-danger{% endif %}" style="width: {{ ai_quota.used_pct }}%"></span>
                </div>
                <div class="ai-quota-meta">
                    <span class="ai-quota-pct">{{ ai_quota.used_pct }}% of daily quota used</span>
                    <span class="ai-quota-detail">${{ '%.4f'|format(ai_quota.spent_usd) }} / ${{ '%.2f'|format(ai_quota.limit_usd) }} &middot; {{ ai_quota.turns }} turns</span>
                </div>
            </div>
            {% endif %}
            <div class="ai-usage-body" data-ai-usage-body>
                <p class="ai-usage-empty">Loading...</p>
            </div>
        </div>
        {% elif is_self(user, profile_user['uid']) %}
        <div class="ai-usage-card ai-quota-only">
            <div class="ai-usage-head">
                <h3 class="ai-usage-title">AI quota</h3>
            </div>
            {% if ai_quota %}
            <div class="ai-quota" data-ai-quota>
                <div class="ai-quota-bar">
                    <span class="ai-quota-fill {% if ai_quota.used_pct >= 90 %}ai-quota-danger{% endif %}" style="width: {{ ai_quota.used_pct }}%"></span>
                </div>
                <div class="ai-quota-meta">
                    <span class="ai-quota-pct">{{ ai_quota.used_pct }}% of your daily AI quota used</span>
                </div>
            </div>
            {% else %}
            <p class="ai-usage-empty">Quota unavailable.</p>
            {% endif %}
        </div>
        {% endif %}

        <div class="profile-tabs">
            <a href="/profile/{{ profile_user['username'] }}?tab=posts" class="profile-tab {% if current_tab == 'posts' %}active{% endif %}"><span class="icon">&#x1F4DD;</span> Posts</a>
            <a href="/profile/{{ profile_user['username'] }}?tab=projects" class="profile-tab {% if current_tab == 'projects' %}active{% endif %}"><span class="icon">&#x1F680;</span> Projects</a>
            <a href="/profile/{{ profile_user['username'] }}?tab=gists" class="profile-tab {% if current_tab == 'gists' %}active{% endif %}"><span class="icon">&#x1F4DD;</span> Gists</a>
            <a href="/profile/{{ profile_user['username'] }}?tab=media" class="profile-tab {% if current_tab == 'media' %}active{% endif %}"><span class="icon">&#x1F5BC;&#xFE0F;</span> Media</a>
            <a href="/profile/{{ profile_user['username'] }}?tab=activity" class="profile-tab {% if current_tab == 'activity' %}active{% endif %}"><span class="icon">&#x1F4CA;</span> Activity</a>
            <a href="/profile/{{ profile_user['username'] }}?tab=followers" class="profile-tab {% if current_tab == 'followers' %}active{% endif %}"><span class="icon">&#x1F465;</span> Followers ({{ followers_count }})</a>
            <a href="/profile/{{ profile_user['username'] }}?tab=following" class="profile-tab {% if current_tab == 'following' %}active{% endif %}"><span class="icon">&#x1F464;</span> Following ({{ following_count }})</a>
            <button class="btn-ghost btn-icon profile-tab-btn">&#x25B3;</button>
        </div>

        <div class="profile-posts">
            {% if current_tab == 'posts' %}
                {% for item in posts %}
                {% set _author = profile_user %}{% set _time = item.time_ago %}{% set _show_share = false %}{% set _show_comment_form = false %}{% include "_post_card.html" %}
                {% else %}
                <div class="empty-state">No posts yet.</div>
                {% endfor %}
            {% elif current_tab == 'projects' %}
                {% for p in projects %}
                <a href="/projects/{{ p['slug'] or p['uid'] }}" class="project-card">
                    <div class="project-card-header">
                        <h3 class="project-card-title">{{ p['title'] }}</h3>
                    </div>
                    <div class="project-card-meta">
                        <span class="project-status {% if p.get('status') == 'Released' %}released{% else %}dev{% endif %}">
                            &#x25CF; {{ p.get('status', 'In Development') }}
                        </span>
                        <span>{{ p.get('project_type', 'software')|replace('_', ' ')|capitalize }}</span>
                    </div>
                    <div class="project-card-desc rendered-content" data-render>{{ p.get('description', '')[:200] }}</div>
                    {% if p.get('platforms') %}
                    <div class="project-card-platforms">
                        {% for plat in p['platforms'].split(',') %}
                        <span class="platform-tag">{{ plat.strip() }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </a>
                {% else %}
                <div class="empty-state">No projects yet.</div>
                {% endfor %}
            {% elif current_tab == 'gists' %}
                {% for entry in gists %}
                {% set g = entry.gist %}
                <a href="/gists/{{ g['slug'] or g['uid'] }}" class="gist-card">
                    <div class="gist-card-header">
                        <h3 class="gist-card-title">{{ g['title'] }}</h3>
                        <span class="gist-card-star">&#x2606; {{ g.get('stars', 0) }}</span>
                    </div>
                    <div class="gist-card-meta">
                        <span class="gist-language-badge">&#x1F4DD; {{ language_name(g['language']) }}</span>
                    </div>
                    {% if g.get('description') %}
                    <div class="gist-card-desc">{{ g['description'][:200] }}{% if g['description']|length > 200 %}...{% endif %}</div>
                    {% endif %}
                    <div class="gist-card-footer">
                        <span>{{ entry.time_ago }}</span>
                    </div>
                </a>
                {% else %}
                <div class="empty-state">No gists yet.</div>
                {% endfor %}
            {% elif current_tab == 'media' %}
                {% include "_media_gallery.html" %}
                {% set pagination = media_pagination %}
                {% set pagination_query = "tab=media&" %}
                {% include "_pagination.html" %}
            {% elif current_tab == 'followers' or current_tab == 'following' %}
                {% for person in people %}
                <div class="follow-row">
                    <a href="/profile/{{ person['username'] }}" class="follow-user">
                        <img src="{{ avatar_url('multiavatar', person['username'], 40) }}" class="avatar-img avatar-md" alt="{{ person['username'] }}" loading="lazy">
                        <div class="follow-user-info">
                            <span class="follow-user-name">{{ person['username'] }}</span>
                            {% if person['bio'] %}<span class="follow-user-bio">{{ person['bio'] }}</span>{% endif %}
                        </div>
                    </a>
                    {% if user and not person['is_self'] %}
                    {% if person['is_following'] %}
                    <form method="post" action="/follow/unfollow/{{ person['username'] }}">
                        <button type="submit" class="btn btn-ghost btn-sm"{{ guest_disabled(user) }}>Following</button>
                    </form>
                    {% else %}
                    <form method="post" action="/follow/{{ person['username'] }}">
                        <button type="submit" class="btn btn-primary btn-sm"{{ guest_disabled(user) }}>Follow</button>
                    </form>
                    {% endif %}
                    {% endif %}
                </div>
                {% else %}
                <div class="empty-state">{% if current_tab == 'followers' %}No followers yet.{% else %}Not following anyone yet.{% endif %}</div>
                {% endfor %}
                {% if follow_pagination and follow_pagination.total_pages > 1 %}
                <div class="follow-pagination">
                    {% if follow_pagination.has_prev %}<a class="btn btn-ghost btn-sm" href="/profile/{{ profile_user['username'] }}?tab={{ current_tab }}&page={{ follow_pagination.prev_page }}">Previous</a>{% endif %}
                    <span class="follow-page-label">Page {{ follow_pagination.page }} of {{ follow_pagination.total_pages }}</span>
                    {% if follow_pagination.has_next %}<a class="btn btn-ghost btn-sm" href="/profile/{{ profile_user['username'] }}?tab={{ current_tab }}&page={{ follow_pagination.next_page }}">Next</a>{% endif %}
                </div>
                {% endif %}
            {% else %}
                {% for act in activities %}
                <div class="post-card activity-card">
                    <div class="activity-row">
                        <span class="activity-icon">
                            {% if act['type'] == 'post' %}&#x1F4DD;{% else %}&#x1F4AC;{% endif %}
                        </span>
                        <span class="activity-type">
                            {% if act['type'] == 'post' %}Posted{% else %}Commented{% endif %}
                        </span>
                        <span class="activity-time">{{ act['time_ago'] }}</span>
                    </div>
                    <p class="activity-content">{{ act['content'] }}</p>
                </div>
                {% else %}
                <div class="empty-state">No activity yet.</div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}