<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Профиль — Xhubim</title>
  <link rel="icon" href="logo2.png">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    :root {
      --orange:#e8650a; --orange-light:#f07c2a; --orange-glow:rgba(232,101,10,0.35);
      --dark:#111114; --dark2:#18181d; --dark3:#1f1f26;
      --text:#e8e8f0; --text-muted:rgba(232,232,240,0.55);
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html,body { height:100%; }
    body { font-family:'Inter',sans-serif; background:var(--dark); color:var(--text); overflow:hidden; }
    .navbar {
      display:flex; align-items:center; justify-content:space-between;
      padding:0 32px; height:60px; background:rgba(17,17,20,.75);
      backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,.06);
      position:fixed; top:0; left:0; right:0; z-index:100;
    }
    .logo img { height:36px; filter:brightness(0) invert(1); }
    .user-menu { position:relative; }
    .user-btn {
      display:flex; align-items:center; gap:10px;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
      border-radius:100px; padding:6px 14px 6px 8px;
      cursor:pointer; transition:background .2s,border-color .2s;
    }
    .user-btn:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.14); }
    .user-avatar-sm {
      width:28px; height:28px; border-radius:50%;
      background:linear-gradient(135deg,var(--orange),var(--orange-light));
      display:flex; align-items:center; justify-content:center;
      font-size:.75rem; font-weight:800; color:#fff; flex-shrink:0; overflow:hidden;
    }
    .user-avatar-sm img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .user-name { font-size:.82rem; font-weight:600; color:var(--text); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .user-chevron { font-size:.9rem; color:var(--text-muted); transition:transform .2s; }
    .user-menu.open .user-chevron { transform:rotate(180deg); }
    .user-dropdown {
      position:absolute; top:calc(100% + 8px); right:0;
      background:rgba(24,24,29,.95); backdrop-filter:blur(20px);
      border:1px solid rgba(255,255,255,.1); border-radius:12px;
      padding:6px; min-width:200px; box-shadow:0 8px 32px rgba(0,0,0,.4);
      display:none; animation:fade-up .15s ease both;
    }
    .user-menu.open .user-dropdown { display:block; }
    .dropdown-item {
      display:flex; align-items:center; gap:10px; padding:10px 12px;
      border-radius:8px; font-size:.85rem; color:var(--text-muted);
      cursor:pointer; transition:background .15s,color .15s; text-decoration:none;
    }
    .dropdown-item:hover { background:rgba(255,255,255,.07); color:var(--text); }
    .dropdown-item .material-icons { font-size:1rem; }
    .dropdown-item.danger:hover { background:rgba(244,67,54,.1); color:#ef9a9a; }
    .dropdown-divider { height:1px; background:rgba(255,255,255,.06); margin:4px 0; }
    /* Layout */
    .app-wrap { overflow:hidden; width:100vw; height:100vh; height:100dvh; }
    .app { display:flex; height:100%; padding-top:60px; }
    .sidebar {
      width:300px; flex-shrink:0; background:var(--dark2);
      border-right:1px solid rgba(255,255,255,.06);
      display:flex; flex-direction:column;
    }
    .sidebar-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:16px 16px 12px; border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
    }
    .settings-btn {
      background:none; border:none; color:var(--text-muted); cursor:pointer;
      padding:6px; border-radius:8px; display:flex; align-items:center;
      transition:color .2s,background .2s;
    }
    .settings-btn:hover { color:var(--text); background:rgba(255,255,255,.06); }
    .settings-btn .material-icons { font-size:1.2rem; }
    .nav-item {
      display:flex; align-items:center; gap:10px; padding:9px 10px;
      border-radius:8px; cursor:pointer; font-size:.88rem; color:var(--text-muted);
      transition:background .15s,color .15s; border:none; background:none;
      width:100%; text-align:left; font-family:'Inter',sans-serif;
    }
    .nav-item:hover { background:rgba(255,255,255,.05); color:var(--text); }
    .nav-item.active { background:rgba(232,101,10,.1); color:var(--orange-light); }
    .nav-item .material-icons { font-size:1.1rem; flex-shrink:0; }
    .main { flex:1; overflow-y:auto; min-width:0; }
    .main::-webkit-scrollbar { width:4px; }
    .main::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:2px; }
    .view { display:none; height:100%; }
    .view.active { display:flex; flex-direction:column; }
    .view-padded { padding:32px; overflow-y:auto; flex:1; }
    .view-title { font-size:1.2rem; font-weight:800; color:#fff; margin-bottom:24px; }

    /* Conversations list */
    .conv-list { display:flex; flex-direction:column; gap:6px; max-width:680px; }
    .conv-item {
      display:flex; align-items:center; gap:14px; padding:14px 16px;
      border-radius:10px; cursor:pointer; background:var(--dark2);
      border:1px solid rgba(255,255,255,.05); transition:border-color .15s,background .15s;
    }
    .conv-item:hover { background:var(--dark3); border-color:rgba(255,255,255,.1); }
    .conv-av {
      width:42px; height:42px; border-radius:50%; flex-shrink:0;
      background:linear-gradient(135deg,var(--orange),var(--orange-light));
      display:flex; align-items:center; justify-content:center;
      font-size:.95rem; font-weight:800; color:#fff;
      overflow:hidden; position:relative;
    }
    .conv-av img { position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px); object-fit:cover; border-radius:50%; display:block; }
    .conv-av:has(img) { background:transparent; }
    .conv-info { min-width:0; flex:1; }
    .conv-jid { font-size:.9rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .conv-meta { font-size:.75rem; color:var(--text-muted); margin-top:2px; }
    .conv-count { font-size:.72rem; color:var(--text-muted); flex-shrink:0; }

    /* Chat */
    .chat-header {
      display:flex; align-items:center; gap:12px; padding:14px 20px;
      border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
      background:var(--dark);
    }
    .btn-back-chat { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; border-radius:6px; display:flex; align-items:center; transition:color .2s; }
    .btn-back-chat:hover { color:var(--text); }
    .btn-back-chat .material-icons { font-size:1.3rem; }
    .chat-contact { font-size:.95rem; font-weight:700; color:#fff; }
    .messages-area { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px; }
    .messages-area::-webkit-scrollbar { width:4px; }
    .messages-area::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:2px; }
    .msg { display:flex; flex-direction:column; max-width:72%; }
    .msg.me { align-self:flex-end; align-items:flex-end; }
    .msg.them { align-self:flex-start; align-items:flex-start; }
    .msg-who { font-size:.7rem; color:var(--text-muted); margin-bottom:3px; }
    .msg-bubble { padding:9px 14px; border-radius:14px; font-size:.88rem; line-height:1.6; word-break:break-word; }
    .msg.me .msg-bubble { background:linear-gradient(135deg,var(--orange),var(--orange-light)); color:#fff; border-radius:14px 14px 3px 14px; }
    .msg.them .msg-bubble { background:var(--dark3); border:1px solid rgba(255,255,255,.07); border-radius:14px 14px 14px 3px; }
    .msg-time { font-size:.68rem; color:var(--text-muted); margin-top:3px; }

    /* Archive settings */
    .settings-card { background:var(--dark2); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:20px; margin-bottom:16px; max-width:560px; }
    .settings-card h3 { font-size:.9rem; font-weight:700; color:#fff; margin-bottom:8px; }
    .settings-card p { font-size:.84rem; color:var(--text-muted); line-height:1.65; margin-bottom:16px; }
    .toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .toggle-label { font-size:.88rem; color:var(--text); }
    .toggle { position:relative; width:44px; height:24px; flex-shrink:0; }
    .toggle input { opacity:0; width:0; height:0; }
    .toggle-slider { position:absolute; inset:0; background:rgba(255,255,255,.1); border-radius:100px; cursor:pointer; transition:background .2s; }
    .toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; }
    .toggle input:checked + .toggle-slider { background:var(--orange); }
    .toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

    /* Profile modal */
    .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
    .modal-overlay.open { display:flex; }
    .modal-profile {
      background:rgba(24,24,29,.95); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
      border:1px solid rgba(255,255,255,.1);
      border-radius:16px; padding:32px; width:100%; max-width:480px;
      animation:fade-up .25s ease both; position:relative; margin:auto;
      box-shadow:0 24px 64px rgba(0,0,0,.5);
    }
    .modal-profile-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
    .modal-profile-title { font-size:1.1rem; font-weight:800; color:#fff; }
    .modal-close-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; border-radius:6px; transition:color .2s,background .2s; }
    .modal-close-btn:hover { color:var(--text); background:rgba(255,255,255,.07); }
    .modal-close-btn .material-icons { font-size:1.3rem; display:block; }
    .profile-hdr { display:flex; align-items:center; gap:16px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.06); }
    .avatar-wrap { position:relative; flex-shrink:0; cursor:pointer; }
    .avatar { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange-light)); display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; color:#fff; overflow:hidden; }
    .avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .avatar-overlay { position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
    .avatar-wrap:hover .avatar-overlay { opacity:1; }
    .avatar-overlay .material-icons { font-size:1.3rem; color:#fff; }
    .profile-name { font-size:1rem; font-weight:700; color:#fff; }
    .profile-jid  { font-size:.8rem; color:var(--text-muted); margin-top:2px; }
    .section { margin-bottom:20px; }
    .section-title { font-size:.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.7px; margin-bottom:10px; }
    .info-row { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--dark3); border:1.5px solid rgba(255,255,255,.07); border-radius:10px; padding:12px 14px; margin-bottom:8px; }
    .info-row-left { display:flex; align-items:center; gap:10px; min-width:0; }
    .info-row-left .material-icons { font-size:1rem; color:rgba(232,232,240,.3); flex-shrink:0; }
    .info-row-value { font-size:.88rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .info-row-action { font-size:.78rem; color:var(--orange-light); cursor:pointer; white-space:nowrap; font-weight:600; flex-shrink:0; }
    .info-row-action:hover { text-decoration:underline; }
    .edit-panel { background:var(--dark3); border:1.5px solid rgba(232,101,10,.25); border-radius:10px; padding:16px; margin-bottom:8px; display:none; }
    .edit-panel.open { display:block; }
    .edit-panel-title { font-size:.82rem; font-weight:700; color:#fff; margin-bottom:12px; }
    .form-group { margin-bottom:12px; }
    .form-group label { display:block; font-size:.72rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px; }
    .field { display:flex; align-items:center; background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.08); border-radius:9px; padding:0 12px; transition:border-color .2s; }
    .field:focus-within { border-color:var(--orange); }
    .field input { flex:1; background:transparent; border:none; outline:none; color:var(--text); font-family:'Inter',sans-serif; font-size:.88rem; padding:10px 0; }
    .field-icon { font-size:.95rem; color:rgba(232,232,240,.3); margin-right:8px; }
    .field-msg { font-size:.72rem; color:var(--text-muted); margin-top:4px; display:flex; align-items:center; gap:4px; }
    .field-msg.err { color:#ef9a9a; } .field-msg.ok { color:#81c784; }
    .field-msg .material-icons { font-size:.82rem; }
    .strength-bar { display:flex; gap:3px; margin-top:5px; }
    .strength-bar span { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.08); transition:background .3s; }
    .strength-bar.s1 span:nth-child(1){background:#f44336}
    .strength-bar.s2 span:nth-child(-n+2){background:#ff9800}
    .strength-bar.s3 span:nth-child(-n+3){background:#ffc107}
    .strength-bar.s4 span{background:#4caf50}
    .edit-actions { display:flex; gap:8px; margin-top:12px; }
    .btn-save { flex:1; background:linear-gradient(135deg,var(--orange),var(--orange-light)); color:#fff; border:none; border-radius:8px; padding:10px; font-family:'Inter',sans-serif; font-size:.85rem; font-weight:700; cursor:pointer; transition:opacity .2s; display:flex; align-items:center; justify-content:center; gap:6px; }
    .btn-save:disabled{opacity:.5;cursor:not-allowed}
    .btn-save .spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
    .btn-save.loading .spinner{display:block} .btn-save.loading .btn-text{display:none}
    .btn-cancel-sm { background:rgba(255,255,255,.06); color:var(--text-muted); border:1.5px solid rgba(255,255,255,.08); border-radius:8px; padding:10px 16px; font-family:'Inter',sans-serif; font-size:.85rem; cursor:pointer; }
    .btn-cancel-sm:hover{background:rgba(255,255,255,.1)}
    .alert{border-radius:8px;padding:9px 12px;font-size:.82rem;margin-bottom:10px;display:none;align-items:center;gap:8px}
    .alert.show{display:flex}
    .alert-error{background:rgba(244,67,54,.1);border:1px solid rgba(244,67,54,.3);color:#ef9a9a}
    .alert-success{background:rgba(76,175,80,.1);border:1px solid rgba(76,175,80,.3);color:#81c784}
    .alert .material-icons{font-size:.9rem;flex-shrink:0}
    .btn-logout{width:100%;background:transparent;border:1.5px solid rgba(255,255,255,.08);border-radius:8px;padding:11px;color:var(--text-muted);font-family:'Inter',sans-serif;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;transition:border-color .2s,color .2s}
    .btn-logout:hover{border-color:rgba(244,67,54,.4);color:#ef9a9a}
    .btn-delete{width:100%;background:transparent;border:1.5px solid rgba(244,67,54,.25);border-radius:8px;padding:11px;color:#ef9a9a;font-family:'Inter',sans-serif;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:border-color .2s,background .2s}
    .btn-delete:hover{border-color:rgba(244,67,54,.6);background:rgba(244,67,54,.08)}
    /* Delete modals */
    .modal-del { background:rgba(24,24,29,.95); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:32px; width:100%; max-width:400px; animation:fade-up .25s ease both; margin:auto; box-shadow:0 24px 64px rgba(0,0,0,.5); }
    .modal-del h2{font-size:1.1rem;font-weight:800;color:#fff;margin-bottom:10px}
    .modal-del p{color:var(--text-muted);font-size:.86rem;line-height:1.65;margin-bottom:18px}
    .modal-actions{display:flex;gap:10px}
    .btn-danger{flex:1;background:linear-gradient(135deg,#c62828,#e53935);color:#fff;border:none;border-radius:8px;padding:11px;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
    .btn-danger:disabled{opacity:.5;cursor:not-allowed}
    .btn-danger .spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
    .btn-danger.loading .spinner{display:block} .btn-danger.loading .btn-text{display:none}
    .code-input{width:100%;background:var(--dark3);border:1.5px solid rgba(255,255,255,.07);border-radius:10px;padding:14px;color:var(--text);font-family:'Inter',sans-serif;font-size:1.4rem;font-weight:700;letter-spacing:8px;text-align:center;outline:none;margin-bottom:14px}
    .code-input:focus{border-color:var(--orange)}
    .app-loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--dark);z-index:300}
    .app-loading .material-icons{font-size:2.5rem;color:var(--orange);animation:spin .7s linear infinite}
    .empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
    .empty-state .material-icons{font-size:3rem;opacity:.2;display:block;margin-bottom:12px}
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    /* Mobile */
    @media(max-width:600px){
      .navbar{padding:0 16px;height:52px}
      .logo img{height:28px}
      .user-name{display:none}
      .user-btn{padding:5px 10px 5px 6px;gap:6px}
      .app-wrap{height:100vh;height:100dvh;overflow:hidden}
      .app{padding-top:52px;flex-direction:row;width:200%;height:100%;transition:transform .28s cubic-bezier(.4,0,.2,1)}
      .app.show-chat{transform:translateX(-50%)}
      .sidebar{width:50%;flex-shrink:0;height:100%;border-right:none}
      .main{width:50%;flex-shrink:0;height:100%;display:flex;flex-direction:column}
      .view-padded{padding:16px}
      .msg{max-width:88%}
      .msg-bubble{font-size:.84rem;padding:8px 12px}
      .messages-area{padding:14px}
      .modal-profile{padding:24px 18px;border-radius:14px;max-height:90vh;overflow-y:auto}
      .conv-item{padding:11px 12px}
    }
  </style>
</head>
<body>
<div class="app-loading" id="appLoading"><span class="material-icons">autorenew</span></div>

<nav class="navbar">
  <a href="/" class="logo"><img src="logo2.png" alt="Xhubim"></a>
  <div class="user-menu" id="userMenu">
    <div class="user-btn" onclick="toggleUserMenu()">
      <div class="user-avatar-sm" id="navAvatar"><span id="navInitial">?</span></div>
      <span class="user-name" id="navUsername">...</span>
      <span class="material-icons user-chevron">expand_more</span>
    </div>
    <div class="user-dropdown">
      <div class="dropdown-item" onclick="openProfileModal()">
        <span class="material-icons">manage_accounts</span>Управление профилем
      </div>
      <div class="dropdown-divider"></div>
      <div class="dropdown-item danger" onclick="logout()">
        <span class="material-icons">logout</span>Выйти
      </div>
    </div>
  </div>
</nav>

<div class="app-wrap">
<div class="app" id="appLayout" style="display:none">
  <div class="sidebar">
    <div class="sidebar-header">
      <div class="sidebar-section" style="margin-top:0">Архив сообщений</div>
      <button class="settings-btn" onclick="openArchiveSettingsModal()" title="Настройки архива">
        <span class="material-icons">settings_backup_restore</span>
      </button>
    </div>
    <div class="conv-list" id="convList" style="flex:1;overflow-y:auto;padding:8px 4px">
      <div class="empty-state"><span class="material-icons">forum</span><p>Загрузка...</p></div>
    </div>
  </div>

  <div class="main" id="mainArea">
    <!-- Пустое состояние (десктоп) -->
    <div class="view active" id="view-archive">
      <div class="view-padded" style="display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1">
        <div class="empty-state"><span class="material-icons">forum</span><p>Выберите диалог</p></div>
      </div>
    </div>

    <!-- Чат с контактом -->
    <div class="view" id="view-chat">
      <div class="chat-header">
        <button class="btn-back-chat" onclick="goBackFromChat()">
          <span class="material-icons">arrow_back</span>
        </button>
        <div class="chat-contact" id="chatContact"></div>
      </div>
      <div class="messages-area" id="messagesArea"></div>
    </div>
  </div>
</div>
</div>

<!-- Модальное окно настроек архива -->
<div class="modal-overlay" id="modalArchiveSettings" onclick="handleModalBg(event,'modalArchiveSettings')">
  <div class="modal-del" style="max-width:560px">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
      <h2 style="margin-bottom:0">Настройки архива</h2>
      <button class="modal-close-btn" onclick="closeModal('modalArchiveSettings')"><span class="material-icons">close</span></button>
    </div>
    <div style="margin-bottom:16px">
      <p style="font-size:.84rem;color:var(--text-muted);margin-bottom:10px">По умолчанию, сообщения будут:</p>
      <select id="archiveDefault" style="width:100%;background:var(--dark3);border:1.5px solid rgba(232,101,10,.4);border-radius:8px;padding:10px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:.88rem;outline:none;cursor:pointer">
        <option value="roster">сохраняться, если собеседник в ростере</option>
        <option value="always">сохраняться всегда</option>
        <option value="never">не сохраняться никогда</option>
      </select>
    </div>
    <div style="margin-bottom:16px">
      <p style="font-size:.84rem;color:var(--text-muted);margin-bottom:8px">Переписка с этими контактами будет сохраняться всегда:</p>
      <textarea id="archiveAlways" placeholder="1 jid на строку (user@jabber.tld)" style="width:100%;height:100px;background:var(--dark3);border:1.5px solid rgba(232,101,10,.4);border-radius:8px;padding:10px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:.82rem;resize:vertical;outline:none;line-height:1.5"></textarea>
    </div>
    <div style="margin-bottom:20px">
      <p style="font-size:.84rem;color:var(--text-muted);margin-bottom:8px">Переписка с этими контактами не будет сохраняться никогда:</p>
      <textarea id="archiveNever" placeholder="1 jid на строку (user@jabber.tld)" style="width:100%;height:100px;background:var(--dark3);border:1.5px solid rgba(232,101,10,.4);border-radius:8px;padding:10px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:.82rem;resize:vertical;outline:none;line-height:1.5"></textarea>
    </div>
    <div style="display:flex;align-items:center;gap:12px">
      <button class="btn-save" id="archiveSaveBtn" onclick="saveArchiveSettings()" style="max-width:200px">
        <div class="spinner"></div><span class="btn-text">Сохранить настройки</span>
      </button>
      <span id="archiveSaveStatus" style="font-size:.82rem;color:#81c784;display:none">Сохранено</span>
    </div>
  </div>
</div>

<!-- Модальное окно профиля -->
<div class="modal-overlay" id="modalProfile" onclick="handleModalBg(event,'modalProfile')">
  <div class="modal-profile">
    <div class="modal-profile-header">
      <span class="modal-profile-title">Управление профилем</span>
      <button class="modal-close-btn" onclick="closeModal('modalProfile')">
        <span class="material-icons">close</span>
      </button>
    </div>
    <div class="profile-hdr">
      <div class="avatar-wrap" onclick="document.getElementById('avatarInput').click()">
        <div class="avatar" id="avatarEl"><span id="avatarInitial">?</span></div>
        <div class="avatar-overlay"><span class="material-icons">photo_camera</span></div>
      </div>
      <div>
        <div class="profile-name" id="profileName"></div>
        <div class="profile-jid" id="profileJid"></div>
      </div>
    </div>
    <div class="section">
      <div class="section-title">Email</div>
      <div class="alert" id="emailAlert"></div>
      <div class="info-row">
        <div class="info-row-left"><span class="material-icons">mail_outline</span><span class="info-row-value" id="emailVal"></span></div>
        <span class="info-row-action" onclick="togglePanel('emailPanel')">Изменить</span>
      </div>
      <div class="edit-panel" id="emailPanel">
        <div class="edit-panel-title">Новый email</div>
        <div class="form-group" style="margin-bottom:0">
          <div class="field"><span class="field-icon material-icons">mail_outline</span><input type="email" id="newEmail" placeholder="new@email.com" maxlength="254"></div>
          <div class="field-msg">На новый адрес придёт письмо для подтверждения</div>
        </div>
        <div class="edit-actions">
          <button class="btn-save" id="emailSaveBtn" onclick="submitEmailChange()"><div class="spinner"></div><span class="btn-text">Отправить письмо</span></button>
          <button class="btn-cancel-sm" onclick="togglePanel('emailPanel')">Отмена</button>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="section-title">Пароль</div>
      <div class="alert" id="pwAlert"></div>
      <div class="info-row">
        <div class="info-row-left"><span class="material-icons">lock</span><span class="info-row-value">••••••••</span></div>
        <span class="info-row-action" onclick="togglePanel('pwPanel')">Изменить</span>
      </div>
      <div class="edit-panel" id="pwPanel">
        <div class="edit-panel-title">Смена пароля</div>
        <div class="form-group"><label>Текущий пароль</label><div class="field"><input type="password" id="currentPw" placeholder="Текущий пароль" autocomplete="current-password" maxlength="128"></div></div>
        <div class="form-group"><label>Новый пароль</label><div class="field"><input type="password" id="newPw" placeholder="Минимум 8 символов" autocomplete="new-password" maxlength="128"></div><div class="strength-bar" id="strengthBar"><span></span><span></span><span></span><span></span></div><div class="field-msg" id="newPwMsg"></div></div>
        <div class="form-group" style="margin-bottom:0"><label>Повторите пароль</label><div class="field"><input type="password" id="confirmPw" placeholder="Повторите пароль" autocomplete="new-password" maxlength="128"></div><div class="field-msg" id="confirmPwMsg"></div></div>
        <div class="edit-actions">
          <button class="btn-save" id="pwSaveBtn" onclick="submitPasswordChange()"><div class="spinner"></div><span class="btn-text">Сохранить</span></button>
          <button class="btn-cancel-sm" onclick="togglePanel('pwPanel')">Отмена</button>
        </div>
      </div>
    </div>
    <button class="btn-logout" onclick="logout()"><span class="material-icons">logout</span>Выйти</button>
    <button class="btn-delete" onclick="openModal('modalDelete')"><span class="material-icons">delete_forever</span>Удалить аккаунт</button>
  </div>
</div>

<!-- Удаление шаг 1 -->
<div class="modal-overlay" id="modalDelete" onclick="handleModalBg(event,'modalDelete')">
  <div class="modal-del">
    <h2>Удалить аккаунт?</h2>
    <p>Это действие необратимо. Повторная регистрация на этот email будет недоступна 24 часа.</p>
    <div class="alert alert-error" id="deleteAlert" style="margin-bottom:14px"></div>
    <div class="modal-actions">
      <button class="btn-danger" id="deleteConfirmBtn" onclick="requestDeleteCode()"><div class="spinner"></div><span class="btn-text">Да, удалить</span></button>
      <button class="btn-cancel-sm" onclick="closeModal('modalDelete')">Отмена</button>
    </div>
  </div>
</div>

<!-- Удаление шаг 2 -->
<div class="modal-overlay" id="modalCode" onclick="handleModalBg(event,'modalCode')">
  <div class="modal-del">
    <h2>Введите код</h2>
    <p>Мы отправили 6-значный код на вашу почту. Код действителен 15 минут.</p>
    <div class="alert alert-error" id="codeAlert" style="margin-bottom:14px"></div>
    <input type="text" class="code-input" id="deleteCode" maxlength="6" placeholder="000000" inputmode="numeric">
    <div class="modal-actions">
      <button class="btn-danger" id="codeConfirmBtn" onclick="confirmDelete()"><div class="spinner"></div><span class="btn-text">Подтвердить удаление</span></button>
      <button class="btn-cancel-sm" onclick="closeModal('modalCode')">Отмена</button>
    </div>
  </div>
</div>

<input type="file" id="avatarInput" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none">
<script>
var currentUser = null;
var deleteTokenId = null;

function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
function openModal(id){document.getElementById(id).classList.add('open');}
function closeModal(id){document.getElementById(id).classList.remove('open');}
function handleModalBg(e,id){if(e.target===document.getElementById(id))closeModal(id);}
function setLoading(id,on){var b=document.getElementById(id);if(!b)return;b.disabled=on;b.classList.toggle('loading',on);}
function showModalAlert(id,msg){var el=document.getElementById(id);if(!el)return;el.className='alert alert-error show';el.innerHTML='<span class="material-icons">error_outline</span><span>'+esc(msg)+'</span>';}

function toggleUserMenu(){document.getElementById('userMenu').classList.toggle('open');}
document.addEventListener('click',function(e){var m=document.getElementById('userMenu');if(m&&!m.contains(e.target))m.classList.remove('open');});
document.addEventListener('keydown',function(e){if(e.key==='Escape'){closeModal('modalProfile');closeModal('modalDelete');closeModal('modalCode');}});

function openProfileModal(){document.getElementById('userMenu').classList.remove('open');openModal('modalProfile');}

function openArchiveSettingsModal(){loadArchiveSettings();openModal('modalArchiveSettings');}

function showView(name){
  document.querySelectorAll('.view').forEach(function(v){v.classList.remove('active');});
  document.querySelectorAll('.nav-item').forEach(function(n){n.classList.remove('active');});
  var view=document.getElementById('view-'+name);
  var nav=document.getElementById('nav-'+name);
  if(view)view.classList.add('active');
  if(nav)nav.classList.add('active');
  if(name==='archive')loadConversations();
  if(name==='archive-settings'){loadArchiveSettings();}
}

function goBackFromChat(){
  document.getElementById('appLayout').classList.remove('show-chat');
  showView('archive');
}

function togglePanel(id){
  var panel=document.getElementById(id);if(!panel)return;
  var isOpen=panel.classList.contains('open');
  document.querySelectorAll('.edit-panel').forEach(function(p){p.classList.remove('open');});
  if(!isOpen)panel.classList.add('open');
}

function formatTs(ms){
  var d=new Date(ms),now=new Date();
  return d.toDateString()===now.toDateString()
    ?d.toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'})
    :d.toLocaleDateString('ru-RU',{day:'numeric',month:'short'})+' '+d.toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'});
}

async function loadConversations(){
  var el=document.getElementById('convList');
  el.innerHTML='<div class="empty-state"><span class="material-icons" style="animation:spin .7s linear infinite">autorenew</span></div>';
  try{
    var res=await fetch('/api/archive/conversations',{credentials:'same-origin'});
    var data=await res.json();
    var convs=data.conversations||[];
    if(!convs.length){el.innerHTML='<div class="empty-state"><span class="material-icons">forum</span><p>Архив пуст</p></div>';return;}
    el.innerHTML=convs.map(function(c){
      var jid=c.contactJID||'';
      var initial=jid[0]?jid[0].toUpperCase():'?';
      var nick=jid.split('@')[0];
      return '<div class="conv-item" onclick="openConversation(\''+esc(jid)+'\')">'+
        '<div class="conv-av" id="av-'+esc(nick)+'">'+initial+'</div>'+
        '<div class="conv-info"><div class="conv-jid">'+esc(nick)+'</div>'+
        '<div class="conv-meta">'+formatTs(c.lastActivity)+'</div></div>'+
        '<div class="conv-count">'+c.messageCount+'</div>'+
      '</div>';
    }).join('');
    // Подгружаем аватарки асинхронно
    convs.forEach(function(c){
      var jid=c.contactJID||'';
      var nick=jid.split('@')[0];
      var cacheKey='av:'+jid;
      var cached=sessionStorage.getItem(cacheKey);
      // Сразу показываем из кэша
      if(cached){
        try{
          var av=JSON.parse(cached);
          var el=document.getElementById('av-'+nick);
          if(el&&av.imageBase64){
            el.style.background='none';
            el.innerHTML='<img src="data:'+(av.mimeType||'image/jpeg')+';base64,'+av.imageBase64+'">';
          }
        }catch(e){}
      }
      // Фоново проверяем актуальность
      fetch('/api/contact-avatar?jid='+encodeURIComponent(jid),{credentials:'same-origin'})
        .then(function(r){return r.json();})
        .then(function(av){
          if(!av.imageBase64){sessionStorage.removeItem(cacheKey);return;}
          var prev=sessionStorage.getItem(cacheKey);
          var prevData=prev?JSON.parse(prev):null;
          // Обновляем только если изменилась
          if(!prevData||prevData.imageBase64!==av.imageBase64){
            sessionStorage.setItem(cacheKey,JSON.stringify(av));
          var el=document.getElementById('av-'+nick);
          if(el&&av.imageBase64){
            el.style.background='none';
            el.innerHTML='<img src="data:'+(av.mimeType||'image/jpeg')+';base64,'+av.imageBase64+'">';
          }
          }
        }).catch(function(){});
    });
  }catch(e){el.innerHTML='<div class="empty-state"><span class="material-icons">error_outline</span><p>Не удалось загрузить</p></div>';}
}

async function openConversation(jid){
  document.getElementById('chatContact').textContent=jid.split('@')[0];
  var area=document.getElementById('messagesArea');
  area.innerHTML='<div class="empty-state"><span class="material-icons" style="animation:spin .7s linear infinite">autorenew</span></div>';
  showView('chat');
  if(window.innerWidth<=600) document.getElementById('appLayout').classList.add('show-chat');
  try{
    var res=await fetch('/api/archive/messages?contact='+encodeURIComponent(jid),{credentials:'same-origin'});
    var data=await res.json();
    var msgs=data.messages||[];
    if(!msgs.length){area.innerHTML='<div class="empty-state"><span class="material-icons">chat_bubble_outline</span><p>Нет сообщений</p></div>';return;}
    // Группируем: один отправитель + в пределах одной минуты
    var groups=[];
    msgs.forEach(function(m){
      var last=groups[groups.length-1];
      var sameAuthor=last&&last.fromJID===m.fromJID;
      var sameMinute=last&&Math.floor(m.sentDate/60000)===Math.floor(last.msgs[last.msgs.length-1].sentDate/60000);
      if(sameAuthor&&sameMinute){last.msgs.push(m);}
      else{groups.push({fromJID:m.fromJID,msgs:[m]});}
    });
    area.innerHTML=groups.map(function(g){
      var isMe=g.fromJID&&g.fromJID.split('@')[0]===currentUser;
      var who=isMe?'Вы':esc(g.fromJID.split('@')[0]);
      var lastTs=g.msgs[g.msgs.length-1].sentDate;
      var bubblesHtml=g.msgs.map(function(m,i){
        var first=i===0,last=i===g.msgs.length-1;
        var r=isMe
          ?(first&&last?'14px 14px 3px 14px':first?'14px 14px 4px 14px':last?'14px 14px 3px 14px':'14px 14px 4px 14px')
          :(first&&last?'14px 14px 14px 3px':first?'14px 14px 4px 3px':last?'14px 14px 14px 3px':'14px 14px 4px 3px');
        return '<div class="msg-bubble" style="border-radius:'+r+';margin-bottom:3px">'+esc(m.body)+'</div>';
      }).join('');
      return '<div class="msg '+(isMe?'me':'them')+'">'+
        '<div class="msg-who">'+who+'</div>'+
        bubblesHtml+
        '<div class="msg-time">'+formatTs(lastTs)+'</div>'+
      '</div>';
    }).join('');
    area.scrollTop=area.scrollHeight;
  }catch(e){area.innerHTML='<div class="empty-state"><span class="material-icons">error_outline</span><p>Не удалось загрузить</p></div>';}
}

async function loadArchiveSettings(){
  try{
    var res=await fetch('/api/archive/settings',{credentials:'same-origin'});
    var data=await res.json();
    document.getElementById('archiveDefault').value=data.defaultMode||'never';
    document.getElementById('archiveAlways').value=data.always||'';
    document.getElementById('archiveNever').value=data.never||'';
  }catch(e){}
}
async function saveArchiveSettings(){
  setLoading('archiveSaveBtn',true);
  try{
    await fetch('/api/archive/settings',{method:'POST',headers:{'Content-Type':'application/json'},credentials:'same-origin',
      body:JSON.stringify({defaultMode:document.getElementById('archiveDefault').value,always:document.getElementById('archiveAlways').value,never:document.getElementById('archiveNever').value})
    });
    var st=document.getElementById('archiveSaveStatus');
    if(st){st.style.display='inline';setTimeout(function(){st.style.display='none';},2000);}
  }catch(e){}
  finally{setLoading('archiveSaveBtn',false);}
}

document.getElementById('avatarInput').addEventListener('change',async function(){
  var file=this.files[0];if(!file)return;
  if(file.size>1048576){alert('Максимум 1MB');return;}
  var reader=new FileReader();
  reader.onload=async function(e){
    var base64=e.target.result.split(',')[1];
    try{
      var res=await fetch('/api/avatar',{method:'POST',headers:{'Content-Type':'application/json'},credentials:'same-origin',body:JSON.stringify({imageBase64:base64,mimeType:file.type})});
      var data=await res.json().catch(function(){return{};});
      if(res.ok){
        var src=e.target.result;
        document.getElementById('avatarEl').innerHTML='<img src="'+src+'" alt="avatar">';
        document.getElementById('navAvatar').innerHTML='<img src="'+src+'" alt="">';
      }else{alert(data.error||'Ошибка загрузки');}
    }catch(e){alert('Ошибка загрузки');}
  };
  reader.readAsDataURL(file);
});

async function submitEmailChange(){
  var newEmail=(document.getElementById('newEmail').value||'').trim();
  var alertEl=document.getElementById('emailAlert');alertEl.className='alert';
  if(!newEmail||!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail)){alertEl.className='alert alert-error show';alertEl.innerHTML='<span class="material-icons">error_outline</span><span>Укажите корректный email</span>';return;}
  setLoading('emailSaveBtn',true);
  try{
    var res=await fetch('/api/request-email-change',{method:'POST',headers:{'Content-Type':'application/json'},credentials:'same-origin',body:JSON.stringify({newEmail:newEmail})});
    var data=await res.json().catch(function(){return{};});
    if(res.ok){alertEl.className='alert alert-success show';alertEl.innerHTML='<span class="material-icons">check_circle_outline</span><span>Письмо отправлено на '+esc(newEmail)+'</span>';document.getElementById('emailPanel').classList.remove('open');}
    else{alertEl.className='alert alert-error show';alertEl.innerHTML='<span class="material-icons">error_outline</span><span>'+esc(data.error||'Ошибка')+'</span>';}
  }catch(e){alertEl.className='alert alert-error show';alertEl.innerHTML='<span class="material-icons">error_outline</span><span>Не удалось подключиться</span>';}
  finally{setLoading('emailSaveBtn',false);}
}

(function initPwStrength(){
  var newPw=document.getElementById('newPw'),bar=document.getElementById('strengthBar');
  var labels=['','Слабый','Средний','Хороший','Надёжный'];
  function getS(p){var s=0;if(p.length>=8)s++;if(p.length>=12)s++;if(/[A-Z]/.test(p)&&/[a-z]/.test(p))s++;if(/[0-9]/.test(p)&&/[^a-zA-Z0-9]/.test(p))s++;return s;}
  newPw.addEventListener('input',function(){var v=newPw.value,msg=document.getElementById('newPwMsg');bar.className='strength-bar'+(v?' s'+getS(v):'');if(!v){msg.textContent='';return;}if(v.length<8){msg.innerHTML='<span class="material-icons">error_outline</span><span>Минимум 8 символов</span>';msg.className='field-msg err';return;}msg.innerHTML='<span class="material-icons">check_circle_outline</span><span>'+labels[getS(v)]+'</span>';msg.className='field-msg ok';});
  document.getElementById('confirmPw').addEventListener('input',function(){var msg=document.getElementById('confirmPwMsg'),cf=document.getElementById('confirmPw');if(!cf.value){msg.textContent='';return;}if(cf.value!==newPw.value){msg.innerHTML='<span class="material-icons">error_outline</span><span>Пароли не совпадают</span>';msg.className='field-msg err';}else{msg.innerHTML='<span class="material-icons">check_circle_outline</span><span>Пароли совпадают</span>';msg.className='field-msg ok';}});
})();

async function submitPasswordChange(){
  var cur=document.getElementById('currentPw').value,np=document.getElementById('newPw').value,cf=document.getElementById('confirmPw').value;
  var alertEl=document.getElementById('pwAlert');alertEl.className='alert';
  if(!cur||np.length<8||np!==cf){alertEl.className='alert alert-error show';alertEl.innerHTML='<span class="material-icons">error_outline</span><span>Проверьте введённые данные</span>';return;}
  setLoading('pwSaveBtn',true);
  try{
    var res=await fetch('/api/change-password',{method:'POST',headers:{'Content-Type':'application/json'},credentials:'same-origin',body:JSON.stringify({currentPassword:cur,newPassword:np})});
    var data=await res.json().catch(function(){return{};});
    if(res.ok){alertEl.className='alert alert-success show';alertEl.innerHTML='<span class="material-icons">check_circle_outline</span><span>Пароль изменён</span>';document.getElementById('pwPanel').classList.remove('open');}
    else{alertEl.className='alert alert-error show';alertEl.innerHTML='<span class="material-icons">error_outline</span><span>'+esc(data.error||'Ошибка')+'</span>';}
  }catch(e){alertEl.className='alert alert-error show';alertEl.innerHTML='<span class="material-icons">error_outline</span><span>Не удалось подключиться</span>';}
  finally{setLoading('pwSaveBtn',false);}
}

async function requestDeleteCode(){
  document.getElementById('deleteAlert').className='alert';setLoading('deleteConfirmBtn',true);
  try{
    var res=await fetch('/api/request-delete',{method:'POST',credentials:'same-origin'});
    var data=await res.json().catch(function(){return{};});
    if(res.ok){deleteTokenId=data.tokenId;closeModal('modalDelete');openModal('modalCode');}
    else{showModalAlert('deleteAlert',data.error||'Ошибка. Попробуйте позже.');}
  }catch(e){showModalAlert('deleteAlert','Не удалось подключиться');}
  finally{setLoading('deleteConfirmBtn',false);}
}

async function confirmDelete(){
  var code=document.getElementById('deleteCode').value.trim();
  document.getElementById('codeAlert').className='alert';
  if(!code||code.length!==6){showModalAlert('codeAlert','Введите 6-значный код');return;}
  setLoading('codeConfirmBtn',true);
  try{
    var res=await fetch('/api/confirm-delete',{method:'POST',headers:{'Content-Type':'application/json'},credentials:'same-origin',body:JSON.stringify({tokenId:deleteTokenId,code:code})});
    var data=await res.json().catch(function(){return{};});
    if(res.ok){location.href='/';}else{showModalAlert('codeAlert',data.error||'Неверный код');}
  }catch(e){showModalAlert('codeAlert','Не удалось подключиться');}
  finally{setLoading('codeConfirmBtn',false);}
}

async function logout(){await fetch('/api/logout',{method:'POST',credentials:'same-origin'}).catch(function(){});location.href='/';}

async function init(){
  try{
    var res=await fetch('/api/profile',{credentials:'same-origin'});
    if(res.status===401){location.href='login.html?redirect='+encodeURIComponent('/profile');return;}
    var data=await res.json();
    currentUser=data.username;
    document.getElementById('navUsername').textContent=data.username;
    document.getElementById('navInitial').textContent=(data.name||data.username||'?')[0].toUpperCase();
    document.getElementById('profileName').textContent=data.name||data.username;
    document.getElementById('profileJid').textContent=data.username+'@xhubim.ru';
    document.getElementById('emailVal').textContent=data.email||'';
    document.getElementById('avatarInitial').textContent=(data.name||data.username||'?')[0].toUpperCase();
    fetch('/api/avatar',{credentials:'same-origin'}).then(function(r){return r.json();}).then(function(av){
      if(av.imageBase64){
        var src='data:'+(av.mimeType||'image/jpeg')+';base64,'+av.imageBase64;
        document.getElementById('avatarEl').innerHTML='<img src="'+src+'" alt="avatar">';
        document.getElementById('navAvatar').innerHTML='<img src="'+src+'" alt="">';
      }
    }).catch(function(){});
    document.getElementById('appLoading').style.display='none';
    document.getElementById('appLayout').style.display='flex';
    loadConversations();
  }catch(e){
    document.getElementById('appLoading').style.display='none';
  }
}
init();
</script>
</body>
</html>