{% extends "base.html" %}
{% block content %}
<!-- 左侧边栏 -->
<aside class="sidebar">
    <div class="stat-row">
        <div class="stat">
            <div class="stat-num" style="color:var(--brand);">{{ websites|length }}</div>
            <div class="stat-label">网站</div>
        </div>
        <div class="stat">
            <div class="stat-num" style="color:var(--success);" id="accountCount">-</div>
            <div class="stat-label">账号</div>
        </div>
    </div>

    <button class="btn btn-primary btn-block" onclick="showAddWebsite()">添加网站</button>
    <button class="btn btn-outline btn-block" onclick="showImportModal()">智能导入</button>

    <div class="sidebar-label">
        <span>文件夹</span>
        <span onclick="showAddFolder()" style="cursor:pointer; color:var(--brand); font-size:15px;">+</span>
    </div>

    <input class="input mb-sm" type="text" placeholder="搜索网站或网址…" id="siteSearch" oninput="filterSites()">

    <div style="flex:1; overflow-y:auto;">
        {% for folder in folders %}
        <div class="folder-group" data-folder-id="{{ folder.id }}">
            <div class="folder-item" onclick="toggleFolder(this)" style="position:relative;">
                <span class="folder-arrow">▼</span>
                <span style="flex:1; font-weight:500;">📁 {{ folder.name }}</span>
                <span class="count">-</span>
                <span class="folder-more" onclick="event.stopPropagation();toggleFolderMenu(this)">⋮</span>
                <div class="folder-menu hidden">
                    <div class="folder-menu-item" onclick="renameFolder({{ folder.id }})">✏️ 重命名</div>
                    <div class="folder-menu-item danger" onclick="deleteFolder({{ folder.id }})">🗑 删除</div>
                </div>
            </div>
            <div class="folder-children">
                {% for site in websites if site.folder_id == folder.id %}
                <div class="site-item" data-site-id="{{ site.id }}" data-site-url="{{ site.url }}"
                     onclick="selectWebsite({{ site.id }}, this)">
                    <span>🌐</span>
                    <span class="site-name">{{ site.name }}</span>
                    <span class="site-count">{{ site.accounts|length }}个</span>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}

        <!-- 未分类 -->
        <div class="sidebar-label">未分类</div>
        {% for site in websites if not site.folder_id %}
        <div class="site-item" data-site-id="{{ site.id }}" data-site-url="{{ site.url }}"
             onclick="selectWebsite({{ site.id }}, this)">
            <span>🌐</span>
            <span class="site-name">{{ site.name }}</span>
            <span class="site-count">{{ site.accounts|length }}个</span>
        </div>
        {% endfor %}
    </div>
</aside>

<!-- 右侧网站详情 -->
<section class="content">
    <div class="content-header">
        <div id="siteHeaderInfo" class="text-muted">选择左侧网站查看账号</div>
        <div style="display:flex; gap:6px;">
            <button class="btn btn-ghost btn-sm hidden" id="editSiteBtn" onclick="editWebsite()">✏️ 编辑</button>
            <button class="btn btn-outline btn-sm hidden" id="addAccountBtn" onclick="showAddAccount()">+ 添加账号</button>
        </div>
    </div>

    <div class="editor-pane" id="accountCards" style="flex:1;">
        <div style="text-align:center; padding:80px 20px; color:var(--text-placeholder);">
            <div style="font-size:48px; margin-bottom:16px; opacity:0.4;">🔐</div>
            <p>选择左侧网站查看账号密码</p>
        </div>
    </div>
</section>

<!-- ===== 智能导入弹窗 ===== -->
<div class="modal-overlay hidden" id="importModal" onclick="if(event.target===this)hideImportModal()">
    <div class="modal" style="width:520px;">
        <div class="modal-header">
            <span class="modal-title">智能导入</span>
            <button class="modal-close" onclick="hideImportModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">粘贴账号信息</label>
                <textarea class="import-textarea" id="importText"
                    placeholder="https://github.com 代码网站&#10;zhangsan@qq.com&#10;Abc123&#10;个人开发账号"></textarea>
                <div class="import-hint">首行=网址+空格+网站名 | 第2行=账号 | 第3行=密码 | 第4行=备注</div>
            </div>
            <button class="btn btn-primary btn-block mb-md" onclick="parseImport()">🔍 自动识别</button>

            <div class="result-box hidden" id="parseResult">
                <div style="font-weight:600; color:#166534; margin-bottom:10px;">识别结果</div>
                <div class="result-grid" id="parseGrid"></div>

                <div class="form-group" style="margin-top:12px;">
                    <label class="form-label">存放文件夹</label>
                    <div class="form-row">
                        <select class="select" id="importFolderSelect">
                            <option value="">已有文件夹…</option>
                            {% for folder in folders %}
                            <option value="{{ folder.id }}">{{ folder.name }}</option>
                            {% endfor %}
                        </select>
                        <span class="text-muted">或</span>
                        <input class="input" type="text" id="importNewFolder" placeholder="新建文件夹…">
                    </div>
                </div>
                <div class="alert alert-warning hidden mb-md" id="duplicateAlert"></div>

                <div class="modal-footer" style="padding:0; border:none;">
                    <button class="btn btn-ghost" onclick="hideImportModal()">取消</button>
                    <button class="btn btn-primary" onclick="confirmImport()">确认添加</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ===== 网站弹窗 ===== -->
<div class="modal-overlay hidden" id="websiteModal" onclick="if(event.target===this)hideWebsiteModal()">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title" id="websiteModalTitle">添加网站</span>
            <button class="modal-close" onclick="hideWebsiteModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">网站名</label>
                <input class="input" id="websiteName" placeholder="例如：GitHub">
            </div>
            <div class="form-group">
                <label class="form-label">网址</label>
                <input class="input" id="websiteUrl" placeholder="https://github.com">
            </div>
            <div class="form-group">
                <label class="form-label">文件夹</label>
                <select class="select" id="websiteFolder">
                    <option value="">未分类</option>
                    {% for folder in folders %}
                    <option value="{{ folder.id }}">{{ folder.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-ghost" onclick="hideWebsiteModal()">取消</button>
            <button class="btn btn-primary" onclick="saveWebsite()">保存</button>
        </div>
    </div>
</div>

<!-- ===== 账号弹窗 ===== -->
<div class="modal-overlay hidden" id="accountModal" onclick="if(event.target===this)hideAccountModal()">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title" id="accountModalTitle">添加账号</span>
            <button class="modal-close" onclick="hideAccountModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">账号 / 用户名</label>
                <input class="input" id="accountUsername" placeholder="user@example.com">
            </div>
            <div class="form-group">
                <label class="form-label">密码</label>
                <div class="form-row">
                    <input class="input" id="accountPassword" type="password" placeholder="输入密码" style="flex:1;">
                    <button class="btn btn-ghost btn-sm" type="button" onclick="togglePwVisibility()">显示</button>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">备注</label>
                <textarea class="textarea" id="accountRemark" rows="2" placeholder="例如：主账号、小号…"></textarea>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-ghost" onclick="hideAccountModal()">取消</button>
            <button class="btn btn-primary" onclick="saveAccount()">保存</button>
        </div>
    </div>
</div>

<input type="hidden" id="currentSiteId" value="">
<input type="hidden" id="editWebsiteId" value="">
<input type="hidden" id="editAccountId" value="">
{% endblock %}

{% block scripts %}
<script src="/static/js/websites.js"></script>
{% endblock %}