{% extends "base.html" %}
{% block title %}用户设置 - 星笺{% endblock %}
{% block content %}
<div class="section-header">
    <h1>用户设置</h1>
</div>

<div class="tabs" id="tabs">
    <button class="tab {% if active_tab != 'showcase' %}active{% endif %}" onclick="switchTab('account')">账号</button>
    <button class="tab {% if active_tab == 'showcase' %}active{% endif %}" onclick="switchTab('showcase')">展示</button>
</div>

{% if success %}
<div class="alert alert-success">{{ success }}</div>
{% endif %}
{% if error %}
<div class="alert alert-error">{{ error }}</div>
{% endif %}

<div id="tab-account" class="tab-panel" {% if active_tab == 'showcase' %}style="display:none"{% endif %}>
<div class="form-card">
    <h3 style="margin-bottom:.75rem">修改用户名</h3>
    <form method="post" action="/settings/change-username">
        <label>当前用户名</label>
        <input type="text" value="{{ user.username }}" disabled>
        <label>新用户名</label>
        <input type="text" name="new_username" required maxlength="64" placeholder="输入新用户名">
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">修改用户名</button>
        </div>
    </form>
</div>

<div class="form-card" style="margin-top:1.5rem">
    <h3 style="margin-bottom:.75rem">修改密码</h3>
    <form method="post" action="/settings/change-password">
        <label>当前密码</label>
        <input type="password" name="old_password" required placeholder="输入当前密码">
        <label>新密码</label>
        <input type="password" name="new_password" required placeholder="输入新密码">
        <label>确认新密码</label>
        <input type="password" name="confirm_password" required placeholder="再次输入新密码">
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">修改密码</button>
        </div>
    </form>
</div>
</div>

<div id="tab-showcase" class="tab-panel" {% if active_tab != 'showcase' %}style="display:none"{% endif %}>
<div class="form-card">
    <h3 style="margin-bottom:.75rem">全局展示设置</h3>
    <form method="post" action="/showcase/manage">
        <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
            <label style="margin:0;white-space:nowrap">展示页面模式</label>
            <select name="showcase_mode" style="width:auto">
                <option value="profile" {% if user.showcase_mode == 'profile' %}selected{% endif %}>按 Profile 分类</option>
                <option value="flat" {% if user.showcase_mode == 'flat' %}selected{% endif %}>全部合并</option>
            </select>
            <button type="submit" class="btn btn-primary btn-sm">保存</button>
        </div>
    </form>
    <p style="margin-top:.75rem;font-size:.8rem;color:var(--text-muted)">
        公开展示页：<a href="/u/{{ user.username }}" target="_blank">/u/{{ user.username }}</a>
    </p>
</div>

<div style="margin-top:1.5rem">
    <h2 style="font-size:1rem;margin-bottom:1rem">各 Profile 展示设置</h2>
    {% if profiles %}
    {% for p in profiles %}
    {% set sent_cards = [] %}
    {% set received_cards = [] %}
    {% if profile_cards and p.id in profile_cards %}
        {% for pc in profile_cards[p.id] %}
            {% if pc.status in ('sent', 'delivered') %}
                {% if sent_cards.append(pc) %}{% endif %}
            {% else %}
                {% if received_cards.append(pc) %}{% endif %}
            {% endif %}
        {% endfor %}
    {% endif %}
    <div class="showcase-profile-card" style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1rem;margin-bottom:.75rem">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem">
            <strong>{{ p.nickname }}</strong>
            <span class="badge" style="{% if p.showcase_enabled %}background:var(--sent){% else %}background:var(--text-muted){% endif %}">{% if p.showcase_enabled %}展示中{% else %}未开启{% endif %}</span>
        </div>
        <form method="post" action="/profiles/{{ p.id }}/showcase">
            <div style="display:flex;flex-wrap:wrap;gap:1rem;align-items:center">
                <div style="display:flex;align-items:center;gap:.5rem">
                    <label style="margin:0;font-size:.85rem">开启展示</label>
                    <label class="toggle-switch">
                        <input type="checkbox" name="showcase_enabled" value="1" {% if p.showcase_enabled %}checked{% endif %} onchange="this.form.submit()">
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                <div style="display:flex;align-items:center;gap:.5rem">
                    <label style="margin:0;font-size:.85rem">展示内容</label>
                    <select name="showcase_visible" onchange="this.form.submit()" style="width:auto">
                        <option value="both" {% if p.showcase_visible == 'both' %}selected{% endif %}>发出 + 收到</option>
                        <option value="sent" {% if p.showcase_visible == 'sent' %}selected{% endif %}>仅发出</option>
                        <option value="received" {% if p.showcase_visible == 'received' %}selected{% endif %}>仅收到</option>
                    </select>
                </div>
            </div>
        </form>

        {% if p.showcase_enabled and (sent_cards or received_cards) %}
        <div style="margin-top:.75rem;border-top:1px solid var(--border);padding-top:.75rem">
            <p style="font-size:.8rem;color:var(--text-muted);margin-bottom:.5rem">单张明信片展示控制：</p>
            {% if sent_cards %}
            <div style="margin-bottom:.4rem">
                <span style="font-size:.78rem;color:var(--text-muted);margin-right:.5rem">发出</span>
                {% for pc in sent_cards %}
                <form method="post" action="/postcards/{{ pc.id }}/showcase-toggle" style="display:inline-flex;align-items:center;gap:.3rem;margin-right:.75rem;margin-bottom:.25rem;font-size:.85rem">
                    <input type="checkbox" name="showcase_visible" value="1" {% if not pc.showcase_hidden %}checked{% endif %} onchange="this.form.submit()" style="margin:0">
                    <span>{{ pc.card_number }}</span>
                </form>
                {% endfor %}
            </div>
            {% endif %}
            {% if received_cards %}
            <div>
                <span style="font-size:.78rem;color:var(--text-muted);margin-right:.5rem">收到</span>
                {% for pc in received_cards %}
                <form method="post" action="/postcards/{{ pc.id }}/showcase-toggle" style="display:inline-flex;align-items:center;gap:.3rem;margin-right:.75rem;margin-bottom:.25rem;font-size:.85rem">
                    <input type="checkbox" name="showcase_visible" value="1" {% if not pc.showcase_hidden %}checked{% endif %} onchange="this.form.submit()" style="margin:0">
                    <span>{{ pc.card_number }}</span>
                </form>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% elif p.showcase_enabled %}
        <p style="margin-top:.75rem;font-size:.8rem;color:var(--text-muted)">暂无明信片</p>
        {% endif %}
    </div>
    {% endfor %}
    {% else %}
    <div class="empty-state">
        <p>暂无 Profile，请先创建</p>
    </div>
    {% endif %}
</div>
</div>

<script>
function switchTab(name) {
    document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
    document.querySelectorAll('.tab-panel').forEach(function(p) { p.style.display = 'none'; });
    event.currentTarget.classList.add('active');
    document.getElementById('tab-' + name).style.display = '';
}
</script>
{% endblock %}