<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web WeChat - 苹果风格聊天</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="dark-theme">
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="user-info">
                <div class="avatar">
                    <i class="fas fa-user-circle"></i>
                </div>
                <div class="user-details">
                    <h3>{{ user_info.name }}</h3>
                    {% if user_info.orgFullList and user_info.orgFullList|length > 0 %}
                    <p>{{ user_info.orgFullList[0].name }}</p>
                    {% else %}
                    <p>未加入组织</p>
                    {% endif %}
                </div>
            </div>
            
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="搜索联系人或群聊">
            </div>
            
            <div class="nav-tabs">
                <button class="nav-btn active" data-tab="chats">
                    <i class="fas fa-comments"></i> 聊天
                </button>
                <button class="nav-btn" data-tab="contacts">
                    <i class="fas fa-users"></i> 联系人
                </button>
                <button class="nav-btn" data-tab="files">
                    <i class="fas fa-folder"></i> 文件
                </button>
            </div>
            
            <div class="chat-list" id="chatList">
                <!-- 聊天列表会通过JavaScript动态加载 -->
            </div>
        </div>
        
        <!-- 主聊天区域 -->
        <div class="main-chat">
            <div class="chat-header">
                <div class="chat-partner">
                    <div class="partner-avatar">
                        <i class="fas fa-user-circle"></i>
                    </div>
                    <div class="partner-info">
                        <h3 id="partnerName">选择对话</h3>
                        <p id="partnerStatus">离线</p>
                    </div>
                </div>
                <div class="chat-actions">
                    <button class="action-btn" id="voiceCallBtn" title="语音通话">
                        <i class="fas fa-phone"></i>
                    </button>
                    <button class="action-btn" id="openContactsBtn" title="联系人" style="display:none;">
                        <i class="fas fa-bars"></i>
                    </button>
                    <button class="action-btn" id="videoCallBtn" title="视频通话" disabled>
                        <i class="fas fa-video"></i>
                    </button>
                    <button class="action-btn" id="fileUploadBtn" title="发送文件">
                        <i class="fas fa-paperclip"></i>
                    </button>
                </div>
            </div>
            
            <div class="chat-messages" id="chatMessages">
                <!-- 消息会通过JavaScript动态加载 -->
                <div class="welcome-message">
                    <i class="fas fa-comment-dots"></i>
                    <h3>欢迎使用 Web WeChat</h3>
                    <p>选择一个联系人开始聊天</p>
                </div>
            </div>
            
            <div class="chat-input-area">
                <div class="input-tools">
                    <button class="tool-btn" id="emojiBtn">
                        <i class="far fa-smile"></i>
                    </button>
                    <button class="tool-btn" id="imageBtn">
                        <i class="far fa-image"></i>
                    </button>
                </div>
                <div class="message-input-wrapper">
                    <textarea 
                        id="messageInput" 
                        placeholder="输入消息..." 
                        rows="1"
                    ></textarea>
                    <button class="send-btn" id="sendBtn">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
            
            <!-- 语音通话界面 -->
            <div class="call-interface" id="callInterface" style="display: none;">
                <div class="call-container">
                    <div class="call-partner">
                        <div class="call-avatar">
                            <i class="fas fa-user-circle"></i>
                        </div>
                        <h3 id="callPartnerName">联系人</h3>
                        <p id="callStatus">等待接听...</p>
                        <div class="call-timer" id="callTimer">00:00</div>
                    </div>
                    <div class="call-controls">
                        <button class="call-control-btn decline" id="endCallBtn">
                            <i class="fas fa-phone-slash"></i>
                        </button>
                        <button class="call-control-btn accept" id="answerCallBtn" style="display: none;">
                            <i class="fas fa-phone"></i>
                        </button>
                    </div>
                </div>
                <audio id="remoteAudio" autoplay></audio>
                <audio id="localAudio" muted autoplay></audio>
            </div>
        </div>
        
        <!-- 联系人侧边栏 -->
        <div class="contacts-sidebar" id="contactsSidebar">
            <div class="sidebar-header">
                <h3>联系人</h3>
                <button class="close-sidebar" id="closeContactsBtn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="contacts-list" id="contactsList">
                <!-- 联系人列表会通过JavaScript动态加载 -->
            </div>
        </div>
        
        <!-- 文件上传模态框 -->
        <div class="modal" id="fileUploadModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>发送文件</h3>
                    <button class="close-modal" id="closeFileModal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="upload-area" id="uploadArea">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <p>拖放文件到此处，或点击选择文件</p>
                        <p class="upload-hint">最大文件大小: 100MB</p>
                        <input type="file" id="fileInput" style="display: none;">
                        <button class="upload-btn" id="selectFileBtn">选择文件</button>
                    </div>
                    <div class="file-preview" id="filePreview"></div>
                </div>
            </div>
        </div>
        
        <!-- 文件管理侧边栏 -->
        <div class="files-sidebar" id="filesSidebar">
            <div class="sidebar-header">
                <h3>文件管理</h3>
                <button class="close-sidebar" id="closeFilesBtn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="files-list" id="filesList">
                <!-- 文件列表会通过JavaScript动态加载 -->
            </div>
        </div>
    </div>
    
    <script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>