import * as Lucide from 'https://esm.sh/lucide-react@0.263.1';
const { Send, UserPlus, LogOut, MessageCircle, Phone, Users, Settings, Plus, Search, ChevronRight, Copy, Share, Edit2, Info, ChevronLeft, PhoneCall, Video, Mic, Paperclip, Camera, Lock, Check, CheckCheck, Grid, Heart, X, Star, User, FileText, MicOff, VideoOff, Eye, Trash2, Shield, Ban, Key, Smartphone, Monitor } = Lucide;
const { useState, useEffect, useRef, useMemo } = React;
const API_BASE = 'api.php';

// E2EE Utilities
const CryptoUtil = {
  generateKeyPair: async () => {
    return await window.crypto.subtle.generateKey(
      { name: "RSA-OAEP", modulusLength: 2048, publicExponent: new Uint8Array([1, 0, 1]), hash: "SHA-256" },
      true, ["encrypt", "decrypt"]
    );
  },
  exportPublicKey: async (key) => {
    const exported = await window.crypto.subtle.exportKey("spki", key);
    return btoa(String.fromCharCode(...new Uint8Array(exported)));
  },
  exportPrivateKey: async (key) => {
    const exported = await window.crypto.subtle.exportKey("pkcs8", key);
    return btoa(String.fromCharCode(...new Uint8Array(exported)));
  },
  importPublicKey: async (b64) => {
    const binaryDer = atob(b64);
    const buf = new Uint8Array(binaryDer.length);
    for (let i = 0; i < binaryDer.length; i++) buf[i] = binaryDer.charCodeAt(i);
    return await window.crypto.subtle.importKey("spki", buf, { name: "RSA-OAEP", hash: "SHA-256" }, true, ["encrypt"]);
  },
  importPrivateKey: async (b64) => {
    const binaryDer = atob(b64);
    const buf = new Uint8Array(binaryDer.length);
    for (let i = 0; i < binaryDer.length; i++) buf[i] = binaryDer.charCodeAt(i);
    return await window.crypto.subtle.importKey("pkcs8", buf, { name: "RSA-OAEP", hash: "SHA-256" }, true, ["decrypt"]);
  },
  generateAESKey: async () => {
    return await window.crypto.subtle.generateKey({ name: "AES-GCM", length: 256 }, true, ["encrypt", "decrypt"]);
  },
  encryptAES: async (text, aesKey) => {
    const iv = window.crypto.getRandomValues(new Uint8Array(12));
    const encoded = new TextEncoder().encode(text);
    const ciphertext = await window.crypto.subtle.encrypt({ name: "AES-GCM", iv }, aesKey, encoded);
    return {
      iv: btoa(String.fromCharCode(...new Uint8Array(iv))),
      ciphertext: btoa(String.fromCharCode(...new Uint8Array(ciphertext)))
    };
  },
  decryptAES: async (ivB64, ciphertextB64, aesKey) => {
    const iv = new Uint8Array(atob(ivB64).split('').map(c => c.charCodeAt(0)));
    const ciphertext = new Uint8Array(atob(ciphertextB64).split('').map(c => c.charCodeAt(0)));
    const decrypted = await window.crypto.subtle.decrypt({ name: "AES-GCM", iv }, aesKey, ciphertext);
    return new TextDecoder().decode(decrypted);
  },
  encryptKeyRSA: async (aesKey, rsaPublicKey) => {
    const rawAes = await window.crypto.subtle.exportKey("raw", aesKey);
    const encrypted = await window.crypto.subtle.encrypt({ name: "RSA-OAEP" }, rsaPublicKey, rawAes);
    return btoa(String.fromCharCode(...new Uint8Array(encrypted)));
  },
  decryptKeyRSA: async (encryptedAesB64, rsaPrivateKey) => {
    const encrypted = new Uint8Array(atob(encryptedAesB64).split('').map(c => c.charCodeAt(0)));
    const rawAes = await window.crypto.subtle.decrypt({ name: "RSA-OAEP" }, rsaPrivateKey, encrypted);
    return await window.crypto.subtle.importKey("raw", rawAes, { name: "AES-GCM" }, true, ["encrypt", "decrypt"]);
  },
  deriveAESKeyFromPassword: async (passwordStr) => {
    const enc = new TextEncoder();
    const keyMaterial = await window.crypto.subtle.importKey(
      "raw", enc.encode(passwordStr), "PBKDF2", false, ["deriveBits", "deriveKey"]
    );
    return await window.crypto.subtle.deriveKey(
      { name: "PBKDF2", salt: enc.encode("LUTOS_SALT"), iterations: 100000, hash: "SHA-256" },
      keyMaterial, { name: "AES-GCM", length: 256 }, true, ["encrypt", "decrypt"]
    );
  }
};

const LinkPreview = ({ url, isMe }) => {
  const [preview, setPreview] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let active = true;
    const fetchPreview = async () => {
      try {
        const cached = sessionStorage.getItem(`lp_${url}`);
        if (cached) {
          if (active) {
            setPreview(JSON.parse(cached));
            setLoading(false);
          }
          return;
        }

        const res = await axios.get(`api.php?action=link_preview&url=${encodeURIComponent(url)}`);
        if (res.data && !res.data.error) {
          sessionStorage.setItem(`lp_${url}`, JSON.stringify(res.data));
          if (active) setPreview(res.data);
        }
      } catch (err) {
        console.error("Link preview error:", err);
      } finally {
        if (active) setLoading(false);
      }
    };
    fetchPreview();
    return () => { active = false; };
  }, [url]);

  if (loading) {
    return (
      <div className="mt-2 w-full max-w-xs sm:max-w-sm rounded-xl border border-gray-100 bg-white/40 p-2 animate-pulse flex items-center gap-2">
        <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gray-200 rounded-lg shrink-0" />
        <div className="flex-1 space-y-2">
          <div className="h-3 bg-gray-200 rounded w-3/4" />
          <div className="h-2 bg-gray-200 rounded w-1/2" />
        </div>
      </div>
    );
  }

  if (!preview || (!preview.title && !preview.image)) return null;

  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      className="mt-2 w-full max-w-xs sm:max-w-sm rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm hover:shadow-md transition-shadow flex flex-col block text-left text-gray-800"
    >
      {preview.image && (
        <div className="w-full aspect-[1.91/1] overflow-hidden bg-gray-50 border-b border-gray-100">
          <img src={preview.image} alt="Preview" className="w-full h-full object-cover" />
        </div>
      )}
      <div className="p-3">
        {preview.title && <div className="text-[13px] sm:text-[14px] font-bold text-gray-900 line-clamp-2 leading-tight">{preview.title}</div>}
        {preview.description && <div className="text-[11px] sm:text-[12px] text-gray-500 line-clamp-2 mt-1 leading-snug">{preview.description}</div>}
        <div className="text-[10px] sm:text-[11px] text-blue-600 font-medium mt-1 truncate">{new URL(url).hostname}</div>
      </div>
    </a>
  );
};

function App() {
  // === CORE STATES ===
  const [user, setUser] = useState(() => {
    try {
      const saved = localStorage.getItem('chat_user');
      return saved ? JSON.parse(saved) : null;
    } catch (e) {
      return null;
    }
  });
  const userRef = useRef(null);
  const [nameInput, setNameInput] = useState('');
  const [acceptedTerms, setAcceptedTerms] = useState(false);
  const [passwordInput, setPasswordInput] = useState('');
  const [loginError, setLoginError] = useState('');
  const [isLoginMode, setIsLoginMode] = useState(false);
  const [friendIdInput, setFriendIdInput] = useState('');
  const [friends, setFriends] = useState([]);
  const [activeChat, setActiveChat] = useState(null);
  const [messages, setMessages] = useState([]);
  const [messageInput, setMessageInput] = useState('');

  // === UI STATES ===
  const [activeTab, setActiveTab] = useState('chats'); // 'chats', 'calls', 'contacts', 'settings'
  const [adminSubTab, setAdminSubTab] = useState(null); // 'list', 'actions', 'banned'
  const [callHistory, setCallHistory] = useState([]);
  const [callFilter, setCallFilter] = useState('all'); // 'all', 'missed'
  const [savedAccounts, setSavedAccounts] = useState([]);
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  const [chatSettings, setChatSettings] = useState({});
  const [showContactInfo, setShowContactInfo] = useState(false);
  const [showLogoutModal, setShowLogoutModal] = useState(false);
  const [settingsSubScreen, setSettingsSubScreen] = useState(null); // null | 'profile' | 'privacy'
  const [onlineStatus, setOnlineStatus] = useState(true);
  const [typingStatus, setTypingStatus] = useState(true);
  const [seenStatus, setSeenStatus] = useState(true);
  const [showEditProfileModal, setShowEditProfileModal] = useState(false);
  const [editName, setEditName] = useState('');
  const [editBio, setEditBio] = useState('');
  const [editAvatarUrl, setEditAvatarUrl] = useState('');
  const [isSavingProfile, setIsSavingProfile] = useState(false);
  const [isChatEditMode, setIsChatEditMode] = useState(false);
  const [selectedChatIds, setSelectedChatIds] = useState([]);
  const [showMessageSearch, setShowMessageSearch] = useState(false);
  const [messageSearchQuery, setMessageSearchQuery] = useState('');
  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [changePasswordError, setChangePasswordError] = useState('');
  const [isChangingPassword, setIsChangingPassword] = useState(false);
  const [viewingImage, setViewingImage] = useState(null); // State để xem ảnh fullscreen
  const [pinnedFriends, setPinnedFriends] = useState([]); // Ghim bạn bè
  const [unreadMessages, setUnreadMessages] = useState({}); // Thông báo chưa đọc
  const [pinnedMessages, setPinnedMessages] = useState({}); // Ghim tin nhắn
  const [contextMenu, setContextMenu] = useState(null); // Menu chuột phải: { x, y, msg }
  const [listContextMenu, setListContextMenu] = useState(null); // Menu chuột phải danh sách: { x, y, friend }
  const [deletingMsgIds, setDeletingMsgIds] = useState([]); // Array of msg ids currently animating deletion
  const [contactSubView, setContactSubView] = useState('profile'); // profile hoặc media
  const [mediaActiveTab, setMediaActiveTab] = useState('media'); // 'media' | 'links'
  const [showNewChatModal, setShowNewChatModal] = useState(false); // Modal nút +
  const [showDialpad, setShowDialpad] = useState(false); // Modal bàn phím số
  const [dialNumber, setDialNumber] = useState(''); // Số trên bàn phím
  const [toast, setToast] = useState(null); // { title: '', message: '' }
  const [showRecoveryCode, setShowRecoveryCode] = useState(null);
  const [showRecoveryInput, setShowRecoveryInput] = useState(false);
  const [recoveryInputVal, setRecoveryInputVal] = useState('');
  const [pendingLoginUser, setPendingLoginUser] = useState(null);
  const [bannedUser, setBannedUser] = useState(null);
  const [notFoundError, setNotFoundError] = useState(false);
  
  // === PWA & NATIVE INSTALL STATES ===
  const [deferredPrompt, setDeferredPrompt] = useState(null);
  const [isAppInstalled, setIsAppInstalled] = useState(
    window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true
  );

  const isDeviceVerified = useMemo(() => {
    if (!user) return true;
    if (!user.encrypted_priv_key) return true;
    return !!localStorage.getItem(`privKey_${user.userId}`);
  }, [user]);

  // === HIDDEN CHATS STATES ===
  const [hiddenChats, setHiddenChats] = useState([]);
  const [hiddenChatsPin, setHiddenChatsPin] = useState('');
  const [showHiddenPinModal, setShowHiddenPinModal] = useState(false);
  const [hiddenPinModalMode, setHiddenPinModalMode] = useState('setup'); // 'setup' | 'confirm_setup' | 'enter_to_hide' | 'enter_to_manage'
  const [hiddenPinInputVal, setHiddenPinInputVal] = useState('');
  const [hiddenPinTempSetup, setHiddenPinTempSetup] = useState('');
  const [hiddenPinTargetChat, setHiddenPinTargetChat] = useState(null);
  const [hiddenPinError, setHiddenPinError] = useState('');
  const [showHiddenChatsList, setShowHiddenChatsList] = useState(false);
  const [chatSearchQuery, setChatSearchQuery] = useState('');

  useEffect(() => {
    if (user) {
      try {
        const saved = localStorage.getItem(`hiddenChats_${user.userId}`);
        setHiddenChats(saved ? JSON.parse(saved) : []);
      } catch (e) {
        setHiddenChats([]);
      }
      setHiddenChatsPin(localStorage.getItem(`hiddenChatsPin_${user.userId}`) || '');
    }
  }, [user]);

  // === PWA & MOBILE INSTALL LISTENERS ===
  useEffect(() => {
    const handleBeforeInstallPrompt = (e) => {
      e.preventDefault();
      setDeferredPrompt(e);
    };
    const handleAppInstalled = () => {
      setIsAppInstalled(true);
      setDeferredPrompt(null);
      showToast('Thành công', 'Lutos Chat đã được cài đặt làm ứng dụng di động!');
    };

    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
    window.addEventListener('appinstalled', handleAppInstalled);

    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
      window.removeEventListener('appinstalled', handleAppInstalled);
    };
  }, []);

  // === BLOCKED USERS STATES ===
  const [blockedUsers, setBlockedUsers] = useState([]); // Array of { userId, name, avatarUrl }
  const [showBlockedUsersList, setShowBlockedUsersList] = useState(false);

  const fetchBlockedUsers = async () => {
    if (!user) return;
    try {
      const res = await axios.get(`${API_BASE}?action=get_blocked_users&userId=${user.userId}&t=${Date.now()}`);
      if (res.data && Array.isArray(res.data)) {
        setBlockedUsers(res.data);
      } else {
        setBlockedUsers([]);
      }
    } catch (e) {
      setBlockedUsers([]);
    }
  };

  useEffect(() => {
    if (user) {
      fetchBlockedUsers();
    } else {
      setBlockedUsers([]);
    }
  }, [user]);

  // === SECURE STORAGE PIN STATES ===
  const [showPinSetupModal, setShowPinSetupModal] = useState(false);
  const [skippedPinSetup, setSkippedPinSetup] = useState(false);
  const [pinSetupInputVal, setPinSetupInputVal] = useState('');
  const [isSavingPin, setIsSavingPin] = useState(false);
  const [isVerifying, setIsVerifying] = useState(false);
  const [pinError, setPinError] = useState('');
  const [pinSetupStep, setPinSetupStep] = useState('enter_new'); // 'verify_current' | 'enter_new'
  const [currentPinAttempts, setCurrentPinAttempts] = useState(0);
  const [recoveryAttempts, setRecoveryAttempts] = useState(0);
  const [shouldShake, setShouldShake] = useState(false);
  const triggerPinError = (message) => {
    setPinError(message);
    setShouldShake(true);
    setTimeout(() => setShouldShake(false), 500);
  };

  const renderAttemptsBadge = (attempts, isRecovery = false) => {
    const remaining = 5 - attempts;
    if (remaining === 5) {
      return (
        <span className="text-emerald-600 bg-emerald-50 px-3 py-1.5 rounded-full border border-emerald-100/50 shadow-sm text-[12.5px] font-bold">
          {isRecovery ? 'Tối đa 5 lần nhập sai sẽ bị mất tin nhắn cũ' : 'Tối đa 5 lần nhập sai sẽ bị khóa'}
        </span>
      );
    }
    if (remaining === 4) {
      return (
        <span className="text-teal-600 bg-teal-50 px-3 py-1.5 rounded-full border border-teal-100/50 shadow-sm text-[12.5px] font-bold">
          Còn lại 4 lần nhập thử
        </span>
      );
    }
    if (remaining === 3) {
      return (
        <span className="text-amber-600 bg-amber-50 px-3 py-1.5 rounded-full border border-amber-100/50 shadow-sm text-[12.5px] font-bold">
          Còn lại 3 lần nhập thử
        </span>
      );
    }
    if (remaining === 2) {
      return (
        <span className="text-orange-600 bg-orange-50 px-3 py-1.5 rounded-full border border-orange-100/50 shadow-sm text-[12.5px] font-bold">
          Còn lại 2 lần nhập thử
        </span>
      );
    }
    // remaining === 1
    return (
      <span className="text-red-600 bg-red-50 px-4 py-2 rounded-full border-2 border-red-200 shadow-md text-[13px] font-extrabold animate-heartbeat">
        ⚠️ Còn lại 1 lần nhập thử cuối cùng!
      </span>
    );
  };

  // === ADMIN STATES ===
  const [adminUsers, setAdminUsers] = useState([]);

  // === GROUP STATES ===
  const [showCreateGroupModal, setShowCreateGroupModal] = useState(false);
  const [groupNameInput, setGroupNameInput] = useState('');
  const [selectedGroupMembers, setSelectedGroupMembers] = useState([]);
  const [myGroups, setMyGroups] = useState([]);
  const [isCreatingGroup, setIsCreatingGroup] = useState(false);
  const [loadingAdmin, setLoadingAdmin] = useState(false);

  const fetchAdminUsers = async () => {
    setLoadingAdmin(true);
    try {
      const res = await axios.get(`${API_BASE}?action=admin_get_users&requesterId=${user?.userId}&t=${Date.now()}`);
      setAdminUsers(res.data);
    } catch (e) { console.error(e); }
    setLoadingAdmin(false);
  };

  useEffect(() => {
    if (activeTab === 'admin' && user?.is_admin == 1) {
      fetchAdminUsers();
    }
  }, [activeTab]);

  const handleBanUser = async (targetUserId, currentStatus) => {
    let banReason = null;
    if (currentStatus != 1) { // If we are banning (not unbanning)
      banReason = window.prompt("Vui lòng nhập lý do khóa tài khoản này:");
      if (banReason === null) return; // User clicked cancel
    }

    try {
      await axios.post(`${API_BASE}?action=admin_ban_user`, {
        requesterId: user.userId, targetUserId, banStatus: currentStatus == 1 ? 0 : 1, banReason
      });
      fetchAdminUsers();
      showToast('Thành công', currentStatus == 1 ? 'Đã mở khóa tài khoản' : 'Đã khóa tài khoản');
    } catch (e) { showToast('Lỗi', 'Có lỗi xảy ra'); }
  }

  const handleDeleteUser = async (targetUserId) => {
    if (!window.confirm("Xóa vĩnh viễn user này?")) return;
    try {
      await axios.post(`${API_BASE}?action=admin_delete_user`, {
        requesterId: user.userId, targetUserId
      });
      fetchAdminUsers();
      showToast('Thành công', 'Đã xóa tài khoản');
    } catch (e) { showToast('Lỗi', 'Có lỗi xảy ra'); }
  }

  const toastTimeoutRef = useRef(null);
  const lastMsgTimesRef = useRef({}); // Lưu trữ thời gian tin nhắn cuối cùng để check tin nhắn mới
  // === REFS ===
  const scrollRef = useRef();
  const fileInputRef = useRef(null);
  const avatarInputRef = useRef(null);
  const wallpaperInputRef = useRef(null);
  const editAvatarInputRef = useRef(null);
  const dialpadLongPressTimer = useRef(null);

  const handlePasteToDialpad = async () => {
    try {
      const text = await navigator.clipboard.readText();
      const cleaned = text.trim();
      if (cleaned) {
        if (/^[\d-]+$/.test(cleaned)) {
          let digits = cleaned.replace(/-/g, '');
          if (digits.length > 8) digits = digits.slice(0, 8);
          let formatted = digits;
          if (digits.length > 3) {
            formatted = digits.slice(0, 3) + '-' + digits.slice(3);
          }
          setDialNumber(formatted);
        } else {
          setDialNumber(cleaned);
        }
      }
    } catch (err) {
      console.error("Paste failed", err);
      const text = prompt("Dán hoặc nhập số Lutos Chat vào đây:");
      if (text !== null) {
        const cleaned = text.trim();
        if (cleaned) {
          if (/^[\d-]+$/.test(cleaned)) {
            let digits = cleaned.replace(/-/g, '');
            if (digits.length > 8) digits = digits.slice(0, 8);
            let formatted = digits;
            if (digits.length > 3) {
              formatted = digits.slice(0, 3) + '-' + digits.slice(3);
            }
            setDialNumber(formatted);
          } else {
            setDialNumber(cleaned);
          }
        }
      }
    }
  };

  const handlePasteToRecoveryInput = async () => {
    try {
      const text = await navigator.clipboard.readText();
      const cleaned = text.trim().replace(/\D/g, '');
      if (cleaned) {
        setRecoveryInputVal(cleaned.slice(0, 6));
        setPinError('');
      }
    } catch (err) {
      const text = prompt("Dán hoặc nhập mã PIN khôi phục 6 số của bạn vào đây:");
      if (text !== null) {
        const cleaned = text.trim().replace(/\D/g, '');
        if (cleaned) {
          setRecoveryInputVal(cleaned.slice(0, 6));
          setPinError('');
        }
      }
    }
  };

  const handlePasteToPinSetupInput = async () => {
    try {
      const text = await navigator.clipboard.readText();
      const cleaned = text.trim().replace(/\D/g, '');
      if (cleaned) {
        setPinSetupInputVal(cleaned.slice(0, 6));
        setPinError('');
      }
    } catch (err) {
      const text = prompt("Dán hoặc nhập mã PIN mới 6 số của bạn vào đây:");
      if (text !== null) {
        const cleaned = text.trim().replace(/\D/g, '');
        if (cleaned) {
          setPinSetupInputVal(cleaned.slice(0, 6));
          setPinError('');
        }
      }
    }
  };

  const handlePasteToHiddenPinInput = async () => {
    try {
      const text = await navigator.clipboard.readText();
      const cleaned = text.trim().replace(/\D/g, '');
      if (cleaned) {
        const val = cleaned.slice(0, 4);
        setHiddenPinInputVal(val);
        setHiddenPinError('');
        if (val.length === 4) {
          setTimeout(() => handleHiddenPinSubmit(val), 200);
        }
      }
    } catch (err) {
      const text = prompt("Dán hoặc nhập mã PIN ẩn 4 số của bạn vào đây:");
      if (text !== null) {
        const cleaned = text.trim().replace(/\D/g, '');
        if (cleaned) {
          const val = cleaned.slice(0, 4);
          setHiddenPinInputVal(val);
          setHiddenPinError('');
          if (val.length === 4) {
            setTimeout(() => handleHiddenPinSubmit(val), 200);
          }
        }
      }
    }
  };

  const handleTouchStart = () => {
    dialpadLongPressTimer.current = setTimeout(() => {
      handlePasteToDialpad();
    }, 600);
  };

  const handleTouchEnd = () => {
    if (dialpadLongPressTimer.current) {
      clearTimeout(dialpadLongPressTimer.current);
    }
  };

  // === MEDIA RECORDING ===
  const [isRecording, setIsRecording] = useState(false);
  const mediaRecorderRef = useRef(null);
  const audioChunksRef = useRef([]);

  // === WEBRTC CALL STATES ===
  const [callState, setCallState] = useState(null);
  const [incomingCall, setIncomingCall] = useState(null);
  const [localStream, setLocalStream] = useState(null);
  const [remoteStream, setRemoteStream] = useState(null);
  const [callDuration, setCallDuration] = useState(0); // Thời gian gọi (giây)
  const [isMicOn, setIsMicOn] = useState(true); // Trạng thái mic
  const [isCameraOn, setIsCameraOn] = useState(true); // Trạng thái camera
  const callTimerRef = useRef(null); // Timer đếm thời gian
  const localVideoRef = useRef(null);
  const remoteVideoRef = useRef(null);
  const remoteAudioRef = useRef(null);
  const ringtoneRef = useRef(null); // Âm thanh chuông reo
  const ringTimeoutRef = useRef(null); // Timer tự động tắt reo
  const peerConnection = useRef(null);
  const callStartTime = useRef(null);
  const pendingCandidates = useRef([]);



  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  useEffect(() => {
    const handleUnload = () => {
      if (callState) {
        const targetId = callState === 'incoming' ? incomingCall?.from : activeChat?.userId;
        if (targetId && user) {
          const data = JSON.stringify({ to_user: targetId, from_user: user.userId, type: 'end', signal_data: {} });
          navigator.sendBeacon(`${API_BASE}?action=send_signal_beacon`, data);
        }
      }
    };
    window.addEventListener('beforeunload', handleUnload);
    window.addEventListener('pagehide', handleUnload);
    return () => {
      window.removeEventListener('beforeunload', handleUnload);
      window.removeEventListener('pagehide', handleUnload);
    };
  }, [callState, incomingCall, activeChat, user]);

  const showToast = (title, message) => {
    if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
    setToast({ title, message });
    toastTimeoutRef.current = setTimeout(() => {
      setToast(null);
    }, 4000);
  };

  useEffect(() => {
    const handleDismiss = () => {
      setContextMenu(null);
      setListContextMenu(null);
    };
    const handleKeyDown = (e) => {
      if (e.key === 'Escape') {
        handleDismiss();
        setShowNewChatModal(false);
        setShowDialpad(false);
      }
    };
    window.addEventListener('click', handleDismiss);
    window.addEventListener('blur', handleDismiss);
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('click', handleDismiss);
      window.removeEventListener('blur', handleDismiss);
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  // Hàm khi nhấn chuột phải vào tin nhắn
  const handleRightClick = (e, msg) => {
    e.preventDefault();
    e.stopPropagation();
    // Tính vị trí menu, đảm bảo không tràn màn hình
    const x = e.clientX;
    const y = e.clientY;
    setContextMenu({ x, y, msg });
  };

  // Hàm khi nhấn chuột phải vào danh sách bạn bè
  const handleListRightClick = (e, friend) => {
    e.preventDefault();
    e.stopPropagation();
    setListContextMenu({ x: e.clientX, y: e.clientY, friend });
  };

  const toggleMarkUnread = async () => {
    if (!listContextMenu || !user) return;
    const friend = listContextMenu.friend;
    const isCurrentlyUnread = friend.is_unread_db == 1 || unreadMessages[friend.userId] > 0;
    const newUnreadStatus = isCurrentlyUnread ? 0 : 1;

    try {
      await axios.post(`${API_BASE}?action=update_chat_setting`, { user_id: user.userId, friend_id: friend.userId, is_unread: newUnreadStatus });
      if (newUnreadStatus === 1) {
        setUnreadMessages(prev => ({ ...prev, [friend.userId]: 1 }));
        friend.is_unread_db = 1;
      } else {
        setUnreadMessages(prev => {
          const newUnread = { ...prev };
          delete newUnread[friend.userId];
          return newUnread;
        });
        friend.is_unread_db = 0;
      }
    } catch (e) { }
    setListContextMenu(null);
  };

  const toggleArchive = async () => {
    if (!listContextMenu || !user) return;
    const friend = listContextMenu.friend;
    const newArchiveStatus = friend.is_archived_db == 1 ? 0 : 1;
    try {
      await axios.post(`${API_BASE}?action=update_chat_setting`, { user_id: user.userId, friend_id: friend.userId, is_archived: newArchiveStatus });
      fetchRecentChats();
    } catch (e) { }
    setListContextMenu(null);
  };


  // Hàm ghim/bỏ ghim tin nhắn
  const togglePinMessage = () => {
    if (!contextMenu) return;
    const newPinned = { ...pinnedMessages };
    const key = `${user.userId}_${activeChat.userId}_${contextMenu.msg.id}`;
    if (newPinned[key]) {
      delete newPinned[key];
    } else {
      newPinned[key] = contextMenu.msg;
    }
    setPinnedMessages(newPinned);
    setContextMenu(null);
  };

  // Hàm xóa tin nhắn 2 chiều (đã có trước đó)
  const handleDeleteMessageFromMenu = async () => {
    if (!contextMenu || !activeChat) return;
    if (contextMenu.msg.senderId !== user.userId) {
      showToast('Không thể xóa', 'Bạn chỉ có thể xóa tin nhắn của riêng mình!');
      setContextMenu(null);
      return;
    }

    const msgIdToDelete = contextMenu.msg.id;
    setContextMenu(null);

    // Thêm ID vào danh sách đang xóa để chạy animation
    setDeletingMsgIds(prev => [...prev, msgIdToDelete]);

    // Đợi 300ms cho animation chạy xong rồi mới xóa hẳn khỏi state
    setTimeout(async () => {
      try {
        await axios.post(`${API_BASE}?action=delete_message`, { msgId: msgIdToDelete });
        setMessages(prev => prev.filter(m => m.id !== msgIdToDelete));
        setDeletingMsgIds(prev => prev.filter(id => id !== msgIdToDelete));
      } catch (err) {
        showToast('Lỗi', 'Xóa tin nhắn thất bại!');
        setDeletingMsgIds(prev => prev.filter(id => id !== msgIdToDelete));
      }
    }, 300);
  };

  useEffect(() => {
    userRef.current = user;
    if (user) {
      const savedSettings = localStorage.getItem(`chatSettings_${user.userId}`);
      if (savedSettings) setChatSettings(JSON.parse(savedSettings));
      const savedFriends = localStorage.getItem(`friends_${user.userId}`);
      if (savedFriends) setFriends(JSON.parse(savedFriends));
      const savedPinned = localStorage.getItem(`pinnedFriends_${user.userId}`);
      if (savedPinned) setPinnedFriends(JSON.parse(savedPinned));
    }
  }, [user]);

  useEffect(() => {
    const savedUser = localStorage.getItem('chat_user');
    if (savedUser) setUser(JSON.parse(savedUser));
    const accounts = localStorage.getItem('lutos_saved_accounts');
    if (accounts) setSavedAccounts(JSON.parse(accounts));

    // Lắng nghe phím Escape để đóng modal xem ảnh
    const handleKeyDown = (e) => {
      if (e.key === 'Escape' && viewingImage) {
        setViewingImage(null);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [viewingImage]);

  const encryptPayload = async (text, fileUrl) => {
    const myPrivateKeyB64 = localStorage.getItem(`privKey_${user.userId}`);
    const myPublicKeyB64 = user.public_key;
    const receiverPublicKeyB64 = activeChat.public_key;

    if (!myPublicKeyB64 || !receiverPublicKeyB64) return null;

    try {
      const payloadStr = JSON.stringify({ text: text || '', fileUrl: fileUrl || '' });
      const aesKey = await CryptoUtil.generateAESKey();
      const { iv, ciphertext } = await CryptoUtil.encryptAES(payloadStr, aesKey);

      const myPubKey = await CryptoUtil.importPublicKey(myPublicKeyB64);
      const receiverPubKey = await CryptoUtil.importPublicKey(receiverPublicKeyB64);

      const encKeySender = await CryptoUtil.encryptKeyRSA(aesKey, myPubKey);
      const encKeyReceiver = await CryptoUtil.encryptKeyRSA(aesKey, receiverPubKey);

      return JSON.stringify({ E2EE: true, iv, ciphertext, encKeySender, encKeyReceiver });
    } catch (e) { console.error("E2EE Encrypt Error", e); return null; }
  };

  const fetchMessages = async () => {
    if (!activeChat || !user) return;
    try {
      const res = await axios.get(`${API_BASE}?action=get_messages&user1=${user.userId}&user2=${activeChat.userId}&t=${Date.now()}`);
      if (res.data && Array.isArray(res.data)) {
        const hasNewMessages = res.data.length > messages.length;

        const privKeyB64 = localStorage.getItem(`privKey_${user.userId}`);
        let privKey = null;
        if (privKeyB64) {
          try { privKey = await CryptoUtil.importPrivateKey(privKeyB64); } catch (e) { }
        }

        const decryptedList = await Promise.all(res.data.map(async (m) => {
          if (m.type === 'call_history') return m;
          try {
            if (m.content && m.content.startsWith('{') && m.content.includes('E2EE')) {
              const data = JSON.parse(m.content);
              if (data.E2EE) {
                if (!privKey) return { ...m, content: "🔒 Tin nhắn đã được mã hóa (Thiếu khóa riêng tư)", fileUrl: '' };
                const encKeyToUse = (m.senderId === user.userId) ? data.encKeySender : data.encKeyReceiver;
                if (!encKeyToUse) return { ...m, content: "🔒 Tin nhắn không thể giải mã", fileUrl: '' };
                try {
                  const aesKey = await CryptoUtil.decryptKeyRSA(encKeyToUse, privKey);
                  const plainText = await CryptoUtil.decryptAES(data.iv, data.ciphertext, aesKey);
                  const payload = JSON.parse(plainText);
                  return { ...m, content: payload.text, fileUrl: payload.fileUrl };
                } catch (e) {
                  return { ...m, content: "🔒 Tin nhắn đã được mã hóa (Sai thiết bị)", fileUrl: '' };
                }
              }
            }
          } catch (e) { }
          return m;
        }));

        setMessages(prev => {
          if (prev.length !== decryptedList.length) return decryptedList;
          const prevIds = prev.map(m => m.id).join('');
          const newIds = decryptedList.map(m => m.id).join('');
          if (prevIds !== newIds) return decryptedList;
          return prev;
        });

        // Đánh dấu đã đọc nếu đang xem chat này
        if (hasNewMessages) {
          setUnreadMessages(prev => {
            const newUnread = { ...prev };
            delete newUnread[activeChat.userId];
            return newUnread;
          });
        }
      }
    } catch (e) { }
  };

  const handleBlockUser = async (targetFriend) => {
    if (!user || !targetFriend) return;
    if (!confirm(`Bạn có chắc chắn muốn chặn ${targetFriend.name}? Bạn sẽ không nhận được tin nhắn từ người này và họ sẽ không thể tìm thấy bạn.`)) return;
    try {
      const res = await axios.post(`${API_BASE}?action=block_user`, {
        userId: user.userId,
        blockedId: targetFriend.userId
      });
      if (res.data.success) {
        showToastAlert("Đã chặn", `Đã chặn ${targetFriend.name} thành công.`);
        fetchBlockedUsers();
        setActiveChat(null);
      }
    } catch (e) {
      alert("Chặn người dùng thất bại, vui lòng thử lại.");
    }
  };

  const handleUnblockUser = async (blockedUserId, blockedName) => {
    if (!user) return;
    try {
      const res = await axios.post(`${API_BASE}?action=unblock_user`, {
        userId: user.userId,
        blockedId: blockedUserId
      });
      if (res.data.success) {
        showToastAlert("Đã bỏ chặn", `Đã bỏ chặn ${blockedName} thành công.`);
        fetchBlockedUsers();
      }
    } catch (e) {
      alert("Bỏ chặn thất bại, vui lòng thử lại.");
    }
  };

  const handleInstallApp = async () => {
    if (!deferredPrompt) {
      showToast('Cài đặt', 'Hộp thoại cài đặt chưa sẵn sàng hoặc ứng dụng đã được cài đặt!');
      return;
    }
    deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
    if (outcome === 'accepted') {
      setDeferredPrompt(null);
    }
  };

  const handleHiddenPinSubmit = (val) => {
    if (hiddenPinModalMode === 'setup') {
      if (val.length < 4) {
        setHiddenPinError('Mã PIN phải dài ít nhất 4 chữ số!');
        return;
      }
      setHiddenPinTempSetup(val);
      setHiddenPinModalMode('confirm_setup');
      setHiddenPinInputVal('');
      setHiddenPinError('');
    } else if (hiddenPinModalMode === 'confirm_setup') {
      if (val !== hiddenPinTempSetup) {
        setHiddenPinError('Mã PIN xác nhận không khớp! Hãy nhập lại.');
        setHiddenPinInputVal('');
        return;
      }
      localStorage.setItem(`hiddenChatsPin_${user.userId}`, val);
      setHiddenChatsPin(val);
      setHiddenPinInputVal('');
      setHiddenPinError('');
      
      if (hiddenPinTargetChat) {
        const updated = [...hiddenChats, hiddenPinTargetChat.userId];
        localStorage.setItem(`hiddenChats_${user.userId}`, JSON.stringify(updated));
        setHiddenChats(updated);
        setShowHiddenPinModal(false);
        setActiveChat(null);
        showToastAlert("Đã ẩn", `Đã ẩn cuộc trò chuyện với ${hiddenPinTargetChat.name}`);
      } else {
        setHiddenPinModalMode('enter_to_manage');
        showToastAlert("Thành công", "Đã thiết lập mã PIN ẩn tin nhắn thành công!");
      }
    } else if (hiddenPinModalMode === 'enter_to_hide') {
      if (val !== hiddenChatsPin) {
        setHiddenPinError('Mã PIN không đúng!');
        setHiddenPinInputVal('');
        return;
      }
      const updated = [...hiddenChats, hiddenPinTargetChat.userId];
      localStorage.setItem(`hiddenChats_${user.userId}`, JSON.stringify(updated));
      setHiddenChats(updated);
      setShowHiddenPinModal(false);
      setActiveChat(null);
      showToastAlert("Đã ẩn", `Đã ẩn cuộc trò chuyện với ${hiddenPinTargetChat.name}`);
    } else if (hiddenPinModalMode === 'enter_to_manage') {
      if (val !== hiddenChatsPin) {
        setHiddenPinError('Mã PIN không đúng!');
        setHiddenPinInputVal('');
        return;
      }
      setShowHiddenPinModal(false);
      setShowHiddenChatsList(true);
    }
  };

  // Hàm khi chọn chat, đánh dấu đã đọc
  const handleSelectChat = async (friend) => {
    setActiveChat(friend);
    setContactSubView('profile');
    setMediaActiveTab('media');
    setShowMessageSearch(false);
    setMessageSearchQuery('');
    setUnreadMessages(prev => {
      const newUnread = { ...prev };
      delete newUnread[friend.userId];
      return newUnread;
    });
    if (friend.is_unread_db == 1) {
      try {
        await axios.post(`${API_BASE}?action=update_chat_setting`, { user_id: user.userId, friend_id: friend.userId, is_unread: 0 });
        friend.is_unread_db = 0;
      } catch (e) { }
    }
  };

  const handleClearMessages = async () => {
    if (!activeChat || !user) return;
    try {
      await axios.get(`${API_BASE}?action=delete_all_messages&user1=${user.userId}&user2=${activeChat.userId}&t=${Date.now()}`);
      setMessages([]);
      setShowContactInfo(false);
      showToast('Thành công', 'Đã xóa toàn bộ trò chuyện.');
    } catch (e) {
      showToast('Lỗi', 'Có lỗi xảy ra khi xóa tin nhắn.');
    }
  };

  const handleBulkMarkAsRead = async () => {
    if (selectedChatIds.length === 0) return;
    try {
      for (const chatId of selectedChatIds) {
        setUnreadMessages(prev => {
          const newUnread = { ...prev };
          delete newUnread[chatId];
          return newUnread;
        });
        await axios.post(`${API_BASE}?action=update_chat_setting`, { user_id: user.userId, friend_id: chatId, is_unread: 0 });
      }
      setIsChatEditMode(false);
      setSelectedChatIds([]);
      showToast('Thành công', 'Đã đánh dấu đã đọc các mục đã chọn.');
      fetchRecentChats();
    } catch (e) {
      showToast('Lỗi', 'Không thể đánh dấu đã đọc.');
    }
  };

  const handleBulkDeleteChats = async () => {
    if (selectedChatIds.length === 0) return;
    const confirmDelete = window.confirm(`Bạn có chắc chắn muốn xóa ${selectedChatIds.length} cuộc trò chuyện đã chọn không?`);
    if (!confirmDelete) return;

    try {
      for (const chatId of selectedChatIds) {
        await axios.get(`${API_BASE}?action=delete_all_messages&user1=${user.userId}&user2=${chatId}&t=${Date.now()}`);
      }
      setIsChatEditMode(false);
      setSelectedChatIds([]);
      setActiveChat(null);
      showToast('Thành công', 'Đã xóa các trò chuyện đã chọn.');
      fetchRecentChats();
    } catch (e) {
      showToast('Lỗi', 'Có lỗi xảy ra khi xóa các trò chuyện.');
    }
  };

  const fetchGroups = async () => {
    if (!user) return;
    try {
      const res = await axios.get(`${API_BASE}?action=get_my_groups&userId=${user.userId}&t=${Date.now()}`);
      if (res.data && Array.isArray(res.data)) {
        const normalized = res.data.map(g => ({
          ...g,
          userId: g.id || `group_${g.groupId}`
        }));
        setMyGroups(normalized);
      }
    } catch (e) {
      console.error("Fetch groups error:", e);
    }
  };

  const fetchRecentChats = async () => {
    if (!user) return;
    try {
      const action = window.IS_ARCHIVE_MODE ? 'get_archived_chats' : 'get_recent_chats';
      const res = await axios.get(`${API_BASE}?action=${action}&userId=${user.userId}&t=${Date.now()}`);
      if (res.data && Array.isArray(res.data)) {
        setFriends(prev => {
          const existingMap = new Map(prev.map(f => [f.userId, f]));
          const newFriends = res.data.map(chatUser => {
            existingMap.delete(chatUser.userId);
            return chatUser;
          });
          const finalFriends = [...newFriends, ...Array.from(existingMap.values())];

          if (JSON.stringify(prev) !== JSON.stringify(finalFriends)) {
            localStorage.setItem(`friends_${user.userId}`, JSON.stringify(finalFriends));
            return finalFriends;
          }
          return prev;
        });

        // Kiểm tra tin nhắn mới bằng so sánh timestamp O(1) để tránh làm chậm app và không bị kêu bíp bíp khi load lại trang
        res.data.forEach(friend => {
          const prevTime = lastMsgTimesRef.current[friend.userId];
          const newTime = friend.last_msg_time;

          if (prevTime && prevTime !== newTime) {
            if (friend.is_unread_db == 1 && activeChat?.userId !== friend.userId) {
              playNotificationSound();
              showToast(friend.name, "Bạn có tin nhắn mới!");
            }
          }
          lastMsgTimesRef.current[friend.userId] = newTime;
        });
      }
    } catch (e) { }
  };

  const fetchCallHistory = async () => {
    if (!user) return;
    try {
      const res = await axios.get(`${API_BASE}?action=get_call_history&userId=${user.userId}&t=${Date.now()}`);
      if (res.data && Array.isArray(res.data)) {
        setCallHistory(res.data);
      }
    } catch (e) { }
  };

  const fetchSignals = async () => {
    if (!user) return;
    try {
      const res = await axios.get(`${API_BASE}?action=get_signals&userId=${user.userId}&t=${Date.now()}`);
      if (res.data && Array.isArray(res.data)) {
        for (const sig of res.data) {
          const data = JSON.parse(sig.signal_data);
          if (sig.type === 'call') {
            setIncomingCall({ signal: data.signal, from: sig.from_user, name: data.name, isVideo: data.isVideo });
            setCallState('incoming');
            // Phát tiếng chuông reo khi có cuộc gọi đến
            try {
              const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
              const oscillator = audioCtx.createOscillator();
              const gainNode = audioCtx.createGain();
              oscillator.connect(gainNode);
              gainNode.connect(audioCtx.destination);
              oscillator.frequency.value = 800;
              oscillator.type = 'sine';
              gainNode.gain.value = 0.3;

              // Tạo nhịp reo: reo 0.4s, nghỉ 0.2s
              let time = audioCtx.currentTime;
              for (let i = 0; i < 100; i++) { // Reo lâu hơn để đợi timeout
                oscillator.start(time);
                oscillator.stop(time + 0.4);
                time += 0.6;
              }

              ringtoneRef.current = { oscillator, gainNode, audioCtx };
            } catch (e) { console.log('Ringtone error:', e); }

            // Tự động tắt sau 45s nếu không ai nghe
            if (ringTimeoutRef.current) clearTimeout(ringTimeoutRef.current);
            ringTimeoutRef.current = setTimeout(() => {
              endCallLocal();
            }, 45000);
          } else if (sig.type === 'answer') {
            if (ringTimeoutRef.current) clearTimeout(ringTimeoutRef.current);
            if (peerConnection.current) {
              await peerConnection.current.setRemoteDescription(new window.RTCSessionDescription(data.signal));
              for (const c of pendingCandidates.current) {
                await peerConnection.current.addIceCandidate(new window.RTCIceCandidate(c));
              }
              pendingCandidates.current = [];
            }
            setCallState('connected');
            callStartTime.current = Date.now();
            setCallDuration(0);
            // Bắt đầu đếm thời gian
            if (callTimerRef.current) clearInterval(callTimerRef.current);
            callTimerRef.current = setInterval(() => {
              if (callStartTime.current) {
                const duration = Math.floor((Date.now() - callStartTime.current) / 1000);
                setCallDuration(duration);
              }
            }, 1000);
          } else if (sig.type === 'candidate') {
            if (peerConnection.current && peerConnection.current.remoteDescription) {
              await peerConnection.current.addIceCandidate(new window.RTCIceCandidate(data.candidate));
            } else {
              pendingCandidates.current.push(data.candidate);
            }
          } else if (sig.type === 'end') {
            endCallLocal();
          }
        }
      }
    } catch (e) { console.error('Signal fetch error:', e); }
  };

  const checkUserStatus = async () => {
    if (!user) return;
    try {
      const res = await axios.get(`${API_BASE}?action=check_status&userId=${user.userId}&t=${Date.now()}`);
      if (res.data.status === 'deleted') {
        setNotFoundError(true);
        setUser(null);
        localStorage.removeItem('chat_user');
      } else if (res.data.status === 'banned') {
        setBannedUser({ name: user.name, reason: res.data.ban_reason, time: res.data.ban_time });
        setUser(null);
        localStorage.removeItem('chat_user');
      }
    } catch (e) { }
  };

  useEffect(() => {
    if (!user) return;
    fetchMessages();
    fetchRecentChats();
    fetchGroups();
    fetchCallHistory();
    checkUserStatus();
    const interval = setInterval(() => {
      fetchMessages();
      fetchRecentChats();
      fetchGroups();
      fetchCallHistory();
      checkUserStatus();
    }, 1500);

    // Ping trạng thái online mỗi 60s
    axios.post(`${API_BASE}?action=ping`, { userId: user.userId });
    const pingInterval = setInterval(() => {
      axios.post(`${API_BASE}?action=ping`, { userId: user.userId });
    }, 60000);

    return () => { clearInterval(interval); clearInterval(pingInterval); };
  }, [user, activeChat]);

  // Effect để kiểm tra tín hiệu WebRTC (cuộc gọi) độc lập
  // Tăng tần suất lấy tín hiệu lên 500ms khi đang trong cuộc gọi để kết nối và cúp máy tức thì, không bị delay
  useEffect(() => {
    if (!user) return;

    let timer;
    const poll = async () => {
      await fetchSignals();
      const currentInterval = callState ? 500 : 1500;
      timer = setTimeout(poll, currentInterval);
    };

    const initialInterval = callState ? 500 : 1500;
    timer = setTimeout(poll, initialInterval);

    return () => {
      if (timer) clearTimeout(timer);
    };
  }, [user, callState]);

  useEffect(() => {
    scrollRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  useEffect(() => {
    // Set local video stream
    if (localVideoRef.current && localStream) {
      localVideoRef.current.srcObject = localStream;
    }
    // Set remote video and audio stream
    if (remoteStream) {
      if (remoteVideoRef.current) {
        remoteVideoRef.current.srcObject = remoteStream;
      }
      if (remoteAudioRef.current) {
        remoteAudioRef.current.srcObject = remoteStream;
        // Try to play audio automatically
        remoteAudioRef.current.play().catch(e => {
          console.log('Auto play failed, user interaction needed:', e);
          // If auto-play fails, we'll let the audio element handle it when user interacts
        });
      }
    }
  }, [localStream, remoteStream, callState]);

  const sendSignal = async (to, type, signalData) => {
    await axios.post(`${API_BASE}?action=send_signal`, { to_user: to, from_user: user.userId, type, signal_data: signalData });
  };

  const setupPeerConnection = (targetUserId, stream) => {
    const pc = new window.RTCPeerConnection({
      iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' }
      ]
    });

    pc.onicecandidate = (e) => {
      console.log('ICE Candidate generated:', e.candidate ? 'Yes' : 'No');
      if (e.candidate) {
        sendSignal(targetUserId, 'candidate', { candidate: e.candidate });
      }
    };

    pc.onconnectionstatechange = () => {
      console.log('Connection state:', pc.connectionState);
      if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed' || pc.connectionState === 'closed') {
        endCallLocal();
      }
    };

    pc.ontrack = (e) => {
      console.log('Remote track received:', e.track.kind);
      if (e.streams && e.streams[0]) {
        // Only update stream if it's different
        setRemoteStream(prev => prev !== e.streams[0] ? e.streams[0] : prev);
      }
    };

    if (stream) {
      console.log('Adding local tracks to peer connection:', stream.getTracks().length);
      stream.getTracks().forEach(track => {
        pc.addTrack(track, stream);
      });
    }

    peerConnection.current = pc;
    return pc;
  };

  const startCall = async (isVideo) => {
    if (!activeChat) return;

    // Kiểm tra HTTPS bảo mật cho cuộc gọi WebRTC
    if (window.location.protocol === 'http:' && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
      alert("Tính năng gọi thoại/video yêu cầu kết nối bảo mật HTTPS. Vui lòng chuyển sang địa chỉ trang web có dạng https:// để thực hiện cuộc gọi!");
      return;
    }

    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: isVideo, audio: true });
      setLocalStream(stream);
      setIsMicOn(true);
      setIsCameraOn(isVideo);
      setCallState('ringing');

      if (ringTimeoutRef.current) clearTimeout(ringTimeoutRef.current);
      ringTimeoutRef.current = setTimeout(() => {
        sendSignal(activeChat.userId, 'end', {});
        endCallLocal();
      }, 45000);

      const pc = setupPeerConnection(activeChat.userId, stream);
      const offer = await pc.createOffer();
      await pc.setLocalDescription(offer);
      sendSignal(activeChat.userId, 'call', { signal: offer, name: user.name, isVideo });
    } catch (e) { alert("Không thể truy cập Camera/Microphone!"); }
  };

  const answerCall = async () => {
    if (!incomingCall) return;

    // Kiểm tra HTTPS bảo mật cho cuộc gọi WebRTC
    if (window.location.protocol === 'http:' && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
      alert("Tính năng gọi thoại/video yêu cầu kết nối bảo mật HTTPS. Vui lòng chuyển sang địa chỉ trang web có dạng https:// để nhận cuộc gọi!");
      return;
    }

    try {
      // Dừng tiếng chuông reo của máy nhận cuộc gọi khi bấm nghe
      try {
        if (ringtoneRef.current) {
          ringtoneRef.current.oscillator?.stop();
          ringtoneRef.current.audioCtx?.close();
          ringtoneRef.current = null;
        }
      } catch (e) { }

      if (ringTimeoutRef.current) clearTimeout(ringTimeoutRef.current);
      const stream = await navigator.mediaDevices.getUserMedia({ video: incomingCall.isVideo, audio: true });
      setLocalStream(stream);
      setIsMicOn(true);
      setIsCameraOn(incomingCall.isVideo);

      const pc = setupPeerConnection(incomingCall.from, stream);
      await pc.setRemoteDescription(new window.RTCSessionDescription(incomingCall.signal));

      for (const c of pendingCandidates.current) {
        await pc.addIceCandidate(new window.RTCIceCandidate(c));
      }
      pendingCandidates.current = [];

      const answer = await pc.createAnswer();
      await pc.setLocalDescription(answer);
      sendSignal(incomingCall.from, 'answer', { signal: answer });

      setCallState('connected');
      callStartTime.current = Date.now();
      setCallDuration(0);

      if (callTimerRef.current) clearInterval(callTimerRef.current);
      callTimerRef.current = setInterval(() => {
        if (callStartTime.current) {
          const duration = Math.floor((Date.now() - callStartTime.current) / 1000);
          setCallDuration(duration);
        }
      }, 1000);

    } catch (e) { alert("Không thể truy cập Camera/Microphone!"); }
  };

  const endCallLocal = async () => {
    // Dừng tiếng chuông reo (nếu đang phát)
    try {
      if (ringtoneRef.current) {
        ringtoneRef.current.oscillator?.stop();
        ringtoneRef.current.audioCtx?.close();
        ringtoneRef.current = null;
      }
    } catch (e) { }

    // Dừng timer đếm thời gian
    if (callTimerRef.current) {
      clearInterval(callTimerRef.current);
      callTimerRef.current = null;
    }

    if (ringTimeoutRef.current) {
      clearTimeout(ringTimeoutRef.current);
      ringTimeoutRef.current = null;
    }

    // Lưu các trạng thái cần thiết để gửi tin nhắn lịch sử trước khi reset
    const savedCallState = callState;
    const savedIncomingCall = incomingCall;
    const savedCallStartTime = callStartTime.current;

    // Reset ngay lập tức các trạng thái cuộc gọi để giao diện tắt ngay không bị delay
    setCallState(null);
    setIncomingCall(null);
    setRemoteStream(null);
    setCallDuration(0); // Reset thời gian
    callStartTime.current = null;
    pendingCandidates.current = [];
    if (localStream) {
      localStream.getTracks().forEach(t => t.stop());
      setLocalStream(null);
    }
    if (peerConnection.current) {
      peerConnection.current.close();
      peerConnection.current = null;
    }

    // Gửi tin nhắn lịch sử cuộc gọi ở chế độ bất đồng bộ dưới nền, tránh làm chậm giao diện
    if (!savedIncomingCall && activeChat) {
      let msgText = '';
      if (savedCallState === 'ringing') {
        msgText = 'Cuộc gọi nhỡ';
      } else if (savedCallState === 'connected' && savedCallStartTime) {
        const duration = Math.floor((Date.now() - savedCallStartTime) / 1000);
        msgText = `Cuộc gọi thoại (${duration}s)`;
      }
      if (msgText) {
        axios.post(`${API_BASE}?action=send_message`, { senderId: user.userId, receiverId: activeChat.userId, content: msgText, type: 'call_history' })
          .then(() => fetchMessages())
          .catch(e => console.error("Error sending call history:", e));
      }
    }
  };

  // Hàm bật/tắt mic
  const toggleMic = () => {
    if (localStream) {
      localStream.getAudioTracks().forEach(track => track.enabled = !track.enabled);
      setIsMicOn(!isMicOn);
    }
  };

  // Hàm bật/tắt camera
  const toggleCamera = () => {
    if (localStream) {
      localStream.getVideoTracks().forEach(track => track.enabled = !track.enabled);
      setIsCameraOn(!isCameraOn);
    }
  };

  // Định dạng thời gian gọi (mm:ss)
  const formatCallTime = (seconds) => {
    const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
    const secs = (seconds % 60).toString().padStart(2, '0');
    return `${mins}:${secs}`;
  };

  const endCall = (targetId) => {
    sendSignal(targetId, 'end', {});
    endCallLocal();
  };

  const handleRegister = async () => {
    setLoginError('');
    setNotFoundError(false);
    if (!nameInput.trim()) return;
    if (!passwordInput.trim()) { setLoginError('Vui lòng nhập mật khẩu!'); return; }
    if (!isLoginMode && passwordInput.trim().length < 8) { setLoginError('Mật khẩu đăng ký phải có ít nhất 8 ký tự!'); return; }
    if (!isLoginMode && !acceptedTerms) { setLoginError('Bạn phải đọc và đồng ý với Điều khoản!'); return; }
    try {
      let loginId = nameInput.trim();
      if (isLoginMode && /^\d{8}$/.test(loginId)) {
        loginId = loginId.slice(0, 3) + '-' + loginId.slice(3);
      }

      let publicKeyB64 = '';
      let privateKeyB64 = '';
      let existingPrivKey = isLoginMode ? localStorage.getItem(`privKey_${loginId}`) : null;
      let existingPubKey = isLoginMode ? localStorage.getItem(`pubKey_${loginId}`) : null;
      let recoveryCodeGenerated = null;
      let encryptedPrivKeyPayload = null;

      if (isLoginMode && existingPrivKey && existingPubKey) {
        publicKeyB64 = existingPubKey;
      } else {
        try {
          const keyPair = await CryptoUtil.generateKeyPair();
          publicKeyB64 = await CryptoUtil.exportPublicKey(keyPair.publicKey);
          privateKeyB64 = await CryptoUtil.exportPrivateKey(keyPair.privateKey);
        } catch (e) { console.error("Key gen failed", e); }
      }

      let payload = isLoginMode
        ? { action: 'login', userId: loginId, password: passwordInput.trim() }
        : { action: 'register', name: nameInput.trim(), password: passwordInput.trim() };

      if (publicKeyB64) payload.publicKey = publicKeyB64;

      const res = await axios.post(`login.php`, payload);

      if (isLoginMode && !existingPrivKey && res.data.encrypted_priv_key) {
        // Device changed, ask for recovery code
        setPendingLoginUser({ ...res.data, tmpPubKey: publicKeyB64, tmpPrivKey: privateKeyB64 });
        setShowRecoveryInput(true);
        return;
      }

      if (res.data.userId && privateKeyB64) {
        localStorage.setItem(`privKey_${res.data.userId}`, privateKeyB64);
        localStorage.setItem(`pubKey_${res.data.userId}`, publicKeyB64);
      }

      setUser(res.data);
      localStorage.setItem('chat_user', JSON.stringify(res.data));
      if (res.data.userId && res.data.name) {
        const currentAccounts = JSON.parse(localStorage.getItem('lutos_saved_accounts') || '[]');
        const newAccount = { userId: res.data.userId, name: res.data.name };
        const updatedAccounts = [newAccount, ...currentAccounts.filter(a => a.userId !== res.data.userId)].slice(0, 5);
        localStorage.setItem('lutos_saved_accounts', JSON.stringify(updatedAccounts));
        setSavedAccounts(updatedAccounts);
      }
    } catch (err) {
      if (err.response?.data?.code === 'banned') {
        setBannedUser({ name: err.response.data.name, reason: err.response.data.ban_reason, time: err.response.data.ban_time });
      } else if (err.response?.data?.code === 'not_found') {
        setNotFoundError(true);
      } else {
        setLoginError(err.response?.data?.error || 'Có lỗi xảy ra!');
      }
    }
  };

  const addFriend = async () => {
    if (!friendIdInput) return;
    let targetId = friendIdInput.trim();
    if (/^\d{8}$/.test(targetId)) {
      targetId = targetId.slice(0, 3) + '-' + targetId.slice(3);
    }
    if (targetId === user.userId) {
      alert("Bạn không thể kết bạn với chính mình!");
      return;
    }
    try {
      const res = await axios.get(`${API_BASE}?action=get_user&userId=${targetId}&requesterId=${user.userId}&t=${Date.now()}`);
      if (res.data && res.data.userId) {
        const savedFriends = JSON.parse(localStorage.getItem(`friends_${user.userId}`) || '[]');
        if (!savedFriends.find(f => f.userId === res.data.userId)) {
          const updatedFriends = [...savedFriends, res.data];
          setFriends(updatedFriends);
          localStorage.setItem(`friends_${user.userId}`, JSON.stringify(updatedFriends));
        }
        alert(`Đã kết bạn với ${res.data.name} (${res.data.userId}) thành công!`);
        setActiveChat(res.data);
        setActiveTab('chats');
        setFriendIdInput('');
      } else {
        alert('Không tìm thấy người dùng');
      }
    } catch (err) {
      alert('Không tìm thấy người dùng');
    }
  };

  // Hàm ghim/bỏ ghim bạn bè
  const togglePinFriend = (e, friendId) => {
    if (e) e.stopPropagation();
    let newPinned;
    if (pinnedFriends.includes(friendId)) {
      newPinned = pinnedFriends.filter(id => id !== friendId);
    } else {
      newPinned = [...pinnedFriends, friendId];
    }
    setPinnedFriends(newPinned);
    localStorage.setItem(`pinnedFriends_${user.userId}`, JSON.stringify(newPinned));
  };

  // Hàm phát tiếng thông báo tin nhắn mới
  const playNotificationSound = () => {
    try {
      const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      const oscillator = audioCtx.createOscillator();
      const gainNode = audioCtx.createGain();
      oscillator.connect(gainNode);
      gainNode.connect(audioCtx.destination);
      oscillator.frequency.value = 1000;
      oscillator.type = 'sine';
      gainNode.gain.value = 0.2;
      oscillator.start();
      oscillator.stop(audioCtx.currentTime + 0.15);
    } catch (e) { }
  };

  const sendMessage = async () => {
    if (!messageInput.trim() || !activeChat) return;
    const content = messageInput;
    setMessageInput('');

    let finalContent = content;
    const isGrpMsg = activeChat.is_group === true || activeChat.userId.startsWith('group_');
    if (!isGrpMsg) {
      try {
        const encrypted = await encryptPayload(content, '');
        if (encrypted) finalContent = encrypted;
      } catch (e) { }
    }

    try {
      await axios.post(`${API_BASE}?action=send_message`, { senderId: user.userId, receiverId: activeChat.userId, content: finalContent, type: 'text' });
      fetchMessages();
    } catch (err) {
      if (err.response && err.response.data && err.response.data.error === 'blocked') {
        const failedId = 'failed_' + Date.now();
        const autoReplyId = 'autoreply_' + Date.now();
        
        const failedMsg = {
          id: failedId,
          senderId: user.userId,
          receiverId: activeChat.userId,
          content: content,
          type: 'text',
          status: 'failed',
          timestamp: new Date().toISOString()
        };
        
        const autoReplyMsg = {
          id: autoReplyId,
          senderId: activeChat.userId,
          receiverId: user.userId,
          content: "Bạn đã bị chặn bởi người dùng này. Tin nhắn không thể gửi đi.",
          type: 'system_block',
          timestamp: new Date().toISOString()
        };
        
        setMessages(prev => [...prev, failedMsg, autoReplyMsg]);
      } else {
        alert("Gửi tin nhắn thất bại.");
      }
    }
  };

  const handleUpdateProfile = async (e) => {
    const file = e.target.files?.[0];
    if (file) {
      const formData = new FormData();
      formData.append('image', file);
      try {
        const res = await axios.post(`${API_BASE}?action=upload`, formData);
        const newAvatarUrl = res.data.fileUrl;
        await axios.post(`${API_BASE}?action=update_profile`, { userId: user.userId, name: user.name, avatarUrl: newAvatarUrl });
        const updatedUser = { ...user, avatarUrl: newAvatarUrl };
        setUser(updatedUser);
        localStorage.setItem('chat_user', JSON.stringify(updatedUser));
      } catch (err) { console.error('Upload avatar error', err); }
    }
  };

  const handleEditAvatarChange = async (e) => {
    const file = e.target.files?.[0];
    if (file) {
      const formData = new FormData();
      formData.append('image', file);
      try {
        const res = await axios.post(`${API_BASE}?action=upload`, formData);
        setEditAvatarUrl(res.data.fileUrl);
      } catch (err) { alert('Không thể tải lên ảnh đại diện'); }
    }
  };

  const handleSaveProfile = async () => {
    if (!editName.trim()) { alert('Vui lòng nhập tên hiển thị!'); return; }
    setIsSavingProfile(true);
    try {
      await axios.post(`${API_BASE}?action=update_profile`, { 
        userId: user.userId, 
        name: editName.trim(), 
        avatarUrl: editAvatarUrl,
        bio: editBio.trim()
      });
      const updatedUser = { ...user, name: editName.trim(), avatarUrl: editAvatarUrl, bio: editBio.trim() };
      setUser(updatedUser);
      localStorage.setItem('chat_user', JSON.stringify(updatedUser));
      setShowEditProfileModal(false);
    } catch (err) {
      alert('Không thể lưu thông tin hồ sơ!');
    } finally {
      setIsSavingProfile(false);
    }
  };

  const handleChangePassword = async () => {
    setChangePasswordError('');
    if (!currentPassword) { setChangePasswordError('Vui lòng nhập mật khẩu hiện tại!'); return; }
    if (!newPassword) { setChangePasswordError('Vui lòng nhập mật khẩu mới!'); return; }
    if (newPassword.length < 8) { setChangePasswordError('Mật khẩu mới phải có ít nhất 8 ký tự!'); return; }
    if (newPassword !== confirmPassword) { setChangePasswordError('Mật khẩu nhập lại không khớp!'); return; }
    
    setIsChangingPassword(true);
    try {
      await axios.post(`${API_BASE}?action=change_password`, {
        userId: user.userId,
        currentPassword: currentPassword,
        newPassword: newPassword
      });
      alert('Thay đổi mật khẩu tài khoản thành công!');
      setShowChangePasswordModal(false);
      setCurrentPassword('');
      setNewPassword('');
      setConfirmPassword('');
    } catch (err) {
      setChangePasswordError(err.response?.data?.error || 'Không thể thay đổi mật khẩu cũ hoặc kết nối lỗi!');
    } finally {
      setIsChangingPassword(false);
    }
  };

  const uploadAndSendMedia = async (file) => {
    if (!file) return;
    const formData = new FormData();
    formData.append('image', file);
    try {
      const res = await axios.post(`${API_BASE}?action=upload`, formData);
      let type = 'image';
      if (file.type.startsWith('video/')) type = 'video';
      if (file.type.startsWith('audio/')) type = 'audio';

      const fileUrl = res.data.fileUrl;
      let finalContent = '';
      let finalFileUrl = fileUrl;
      try {
        const encrypted = await encryptPayload('', fileUrl);
        if (encrypted) {
          finalContent = encrypted;
          finalFileUrl = '';
        }
      } catch (e) { }

      try {
        await axios.post(`${API_BASE}?action=send_message`, { senderId: user.userId, receiverId: activeChat.userId, content: finalContent, type, fileUrl: finalFileUrl });
        fetchMessages();
      } catch (err) {
        if (err.response && err.response.data && err.response.data.error === 'blocked') {
          const failedId = 'failed_' + Date.now();
          const autoReplyId = 'autoreply_' + Date.now();
          
          const failedMsg = {
            id: failedId,
            senderId: user.userId,
            receiverId: activeChat.userId,
            content: "[Tệp tin/Hình ảnh]",
            type: 'text',
            status: 'failed',
            timestamp: new Date().toISOString()
          };
          
          const autoReplyMsg = {
            id: autoReplyId,
            senderId: activeChat.userId,
            receiverId: user.userId,
            content: "Bạn đã bị chặn bởi người dùng này. Tin nhắn không thể gửi đi.",
            type: 'system_block',
            timestamp: new Date().toISOString()
          };
          
          setMessages(prev => [...prev, failedMsg, autoReplyMsg]);
        } else {
          alert("Gửi tin nhắn thất bại.");
        }
      }
    } catch (err) { console.error('Upload error', err); }
  };

  const handleFileUpload = (e) => { uploadAndSendMedia(e.target.files[0]); e.target.value = null; };
  const handlePaste = (e) => {
    if (e.clipboardData.files.length > 0) {
      const file = e.clipboardData.files[0];
      if (file.type.startsWith('image/') || file.type.startsWith('video/')) { e.preventDefault(); uploadAndSendMedia(file); }
    }
  };

  const startVoiceRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mediaRecorder = new window.MediaRecorder(stream);
      mediaRecorderRef.current = mediaRecorder;
      audioChunksRef.current = [];
      mediaRecorder.ondataavailable = e => audioChunksRef.current.push(e.data);
      mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
        const file = new File([audioBlob], "voice.webm", { type: 'audio/webm' });
        uploadAndSendMedia(file);
      };
      mediaRecorder.start();
      setIsRecording(true);
    } catch (e) { alert("Không thể truy cập Microphone"); }
  };
  const stopVoiceRecording = () => { mediaRecorderRef.current?.stop(); setIsRecording(false); };

  const formatTime = (dateString) => {
    const d = new Date(dateString);
    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  };
  const getOnlineStatus = (lastActiveStr) => {
    if (!lastActiveStr) return "Ngoại tuyến";
    const lastActive = new Date(lastActiveStr);
    const now = new Date();
    const diffMs = now - lastActive;
    if (diffMs < 3 * 60 * 1000) return "Trực tuyến"; // < 3 minutes

    const diffMinutes = Math.floor(diffMs / 60000);
    if (diffMinutes < 60) return `Hoạt động ${diffMinutes} phút trước`;
    const diffHours = Math.floor(diffMinutes / 60);
    if (diffHours < 24) return `Hoạt động ${diffHours} giờ trước`;
    const diffDays = Math.floor(diffHours / 24);
    return `Hoạt động ${diffDays} ngày trước`;
  };

  const getDisplayName = (friendId, defaultName) => chatSettings[friendId]?.nickname || defaultName;

  const renderMessageContent = (content, isMe) => {
    if (!content) return null;
    const urlRegex = /(https?:\/\/[^\s]+)/g;
    const parts = content.split(urlRegex);
    return parts.map((part, idx) => {
      if (part.match(urlRegex)) {
        return (
          <a
            key={idx}
            href={part}
            target="_blank"
            rel="noopener noreferrer"
            className={`${isMe ? 'text-white underline font-semibold hover:text-white/80' : 'text-blue-600 underline font-semibold hover:text-blue-800'} break-all`}
          >
            {part}
          </a>
        );
      }
      
      if (messageSearchQuery.trim()) {
        const query = messageSearchQuery.trim().toLowerCase();
        const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        const subParts = part.split(new RegExp(`(${escapedQuery})`, 'gi'));
        return (
          <span key={idx}>
            {subParts.map((subPart, subIdx) => 
              subPart.toLowerCase() === query
                ? <mark key={subIdx} className="bg-yellow-300 text-black px-0.5 rounded font-bold shadow-sm">{subPart}</mark>
                : subPart
            )}
          </span>
        );
      }
      
      return <span key={idx}>{part}</span>;
    });
  };

  useEffect(() => {
    if (showRecoveryInput && recoveryInputVal.length === 6 && pendingLoginUser && !isVerifying && recoveryAttempts < 5) {
      const verify = async () => {
        setIsVerifying(true);
        setPinError('');
        try {
          const aesK = await CryptoUtil.deriveAESKeyFromPassword(recoveryInputVal.trim());
          const decPrivKeyStr = await CryptoUtil.decryptAES(
            JSON.parse(pendingLoginUser.encrypted_priv_key).iv,
            JSON.parse(pendingLoginUser.encrypted_priv_key).ciphertext,
            aesK
          );
          localStorage.setItem(`privKey_${pendingLoginUser.userId}`, decPrivKeyStr);
          localStorage.setItem(`pubKey_${pendingLoginUser.userId}`, pendingLoginUser.tmpPubKey);

          setUser(pendingLoginUser);
          localStorage.setItem('chat_user', JSON.stringify(pendingLoginUser));

          setShowRecoveryInput(false);
          setPendingLoginUser(null);
          setRecoveryInputVal('');
          setRecoveryAttempts(0);
        } catch (e) {
          const nextAttempts = recoveryAttempts + 1;
          setRecoveryAttempts(nextAttempts);
          setRecoveryInputVal(''); // Xóa mã PIN cũ để gõ lại

          if (nextAttempts >= 5) {
            triggerPinError('Bạn đã nhập sai mã PIN quá 5 lần! Hệ thống tự động chuyển sang chế độ tạo khóa mới (mất tin nhắn cũ)...');
            setTimeout(() => {
              handleSkipRecovery();
              setRecoveryAttempts(0);
            }, 2500);
          } else {
            triggerPinError(`Mã PIN khôi phục không đúng! Bạn còn lại ${5 - nextAttempts} lần thử.`);
          }
        } finally {
          setIsVerifying(false);
        }
      };
      const t = setTimeout(verify, 800);
      return () => clearTimeout(t);
    }
  }, [recoveryInputVal, showRecoveryInput, pendingLoginUser, recoveryAttempts, isVerifying]);

  const handleRecoverySubmit = async () => {
    if (recoveryInputVal.length !== 6 || isVerifying || recoveryAttempts >= 5) return;
    setIsVerifying(true);
    setPinError('');
    try {
      const aesK = await CryptoUtil.deriveAESKeyFromPassword(recoveryInputVal.trim());
      const decPrivKeyStr = await CryptoUtil.decryptAES(
        JSON.parse(pendingLoginUser.encrypted_priv_key).iv,
        JSON.parse(pendingLoginUser.encrypted_priv_key).ciphertext,
        aesK
      );
      localStorage.setItem(`privKey_${pendingLoginUser.userId}`, decPrivKeyStr);
      localStorage.setItem(`pubKey_${pendingLoginUser.userId}`, pendingLoginUser.tmpPubKey);
      setUser(pendingLoginUser);
      localStorage.setItem('chat_user', JSON.stringify(pendingLoginUser));
      setShowRecoveryInput(false);
      setPendingLoginUser(null);
      setRecoveryInputVal('');
      setRecoveryAttempts(0);
    } catch (e) {
      const nextAttempts = recoveryAttempts + 1;
      setRecoveryAttempts(nextAttempts);
      setRecoveryInputVal('');

      if (nextAttempts >= 5) {
        triggerPinError('Bạn đã nhập sai mã PIN quá 5 lần! Hệ thống tự động chuyển sang chế độ tạo khóa mới (mất tin nhắn cũ)...');
        setTimeout(() => {
          handleSkipRecovery();
          setRecoveryAttempts(0);
        }, 2500);
      } else {
        triggerPinError(`Mã PIN khôi phục không đúng! Bạn còn lại ${5 - nextAttempts} lần thử.`);
      }
    } finally {
      setIsVerifying(false);
    }
  };

  const handleSkipRecovery = () => {
    localStorage.setItem(`privKey_${pendingLoginUser.userId}`, pendingLoginUser.tmpPrivKey);
    localStorage.setItem(`pubKey_${pendingLoginUser.userId}`, pendingLoginUser.tmpPubKey);
    axios.post(`login.php`, { action: 'login', userId: pendingLoginUser.userId, password: passwordInput.trim(), publicKey: pendingLoginUser.tmpPubKey });
    setUser(pendingLoginUser);
    localStorage.setItem('chat_user', JSON.stringify(pendingLoginUser));
    setShowRecoveryInput(false);
    setPendingLoginUser(null);
    setRecoveryAttempts(0);
  };

  const handleViewAsUnverified = () => {
    localStorage.setItem(`pubKey_${pendingLoginUser.userId}`, pendingLoginUser.tmpPubKey);
    setUser(pendingLoginUser);
    localStorage.setItem('chat_user', JSON.stringify(pendingLoginUser));
    setShowRecoveryInput(false);
    setPendingLoginUser(null);
    setRecoveryAttempts(0);
  };

  const handleVerifyCurrentPin = async () => {
    if (pinSetupInputVal.length !== 6 || isVerifying || currentPinAttempts >= 5) return;
    setIsVerifying(true);
    setPinError('');
    try {
      const aesK = await CryptoUtil.deriveAESKeyFromPassword(pinSetupInputVal.trim());
      const decPrivKeyStr = await CryptoUtil.decryptAES(
        JSON.parse(user.encrypted_priv_key).iv,
        JSON.parse(user.encrypted_priv_key).ciphertext,
        aesK
      );

      // Kiểm tra xem khóa private giải mã ra có trùng với khóa hiện tại trong localStorage không
      const localPrivKey = localStorage.getItem(`privKey_${user.userId}`);
      if (localPrivKey && decPrivKeyStr !== localPrivKey) {
        throw new Error("Incorrect PIN decryption");
      }

      // Đúng PIN! Chuyển sang bước nhập PIN mới
      setPinSetupStep('enter_new');
      setPinSetupInputVal('');
      setPinError('');
      setCurrentPinAttempts(0);
    } catch (e) {
      const nextAttempts = currentPinAttempts + 1;
      setCurrentPinAttempts(nextAttempts);
      setPinSetupInputVal('');

      if (nextAttempts >= 5) {
        triggerPinError('Bạn đã nhập sai mã PIN hiện tại quá 5 lần! Thiết bị đã bị khóa và xóa toàn bộ tin nhắn cũ để bảo mật.');

        // Xóa khóa bảo mật cục bộ
        localStorage.removeItem(`privKey_${user.userId}`);
        localStorage.removeItem(`pubKey_${user.userId}`);

        // Đăng xuất sau 2.5 giây
        setTimeout(() => {
          setShowPinSetupModal(false);
          setUser(null);
          localStorage.removeItem('chat_user');
        }, 2500);
      } else {
        triggerPinError(`Mã PIN hiện tại không đúng! Bạn còn lại ${5 - nextAttempts} lần thử.`);
      }
    } finally {
      setIsVerifying(false);
    }
  };

  const handleSavePinSetup = async (pinValue) => {
    const pinToSave = pinValue || pinSetupInputVal;
    if (!pinToSave || pinToSave.length !== 6 || !/^\d{6}$/.test(pinToSave)) {
      triggerPinError('Mã PIN khôi phục phải gồm đúng 6 chữ số!');
      return;
    }
    setIsSavingPin(true);
    setPinError('');
    try {
      const privateKeyB64 = localStorage.getItem(`privKey_${user.userId}`);
      if (!privateKeyB64) {
        triggerPinError('Không tìm thấy khóa bảo mật cục bộ của thiết bị!');
        setIsSavingPin(false);
        return;
      }

      const aesK = await CryptoUtil.deriveAESKeyFromPassword(pinToSave);
      const encData = await CryptoUtil.encryptAES(privateKeyB64, aesK);
      const encryptedPrivKeyPayload = JSON.stringify(encData);

      await axios.post(`${API_BASE}?action=update_encrypted_priv_key`, {
        userId: user.userId,
        encryptedPrivKey: encryptedPrivKeyPayload
      });

      // Cập nhật user state cục bộ
      const updatedUser = { ...user, encrypted_priv_key: encryptedPrivKeyPayload };
      setUser(updatedUser);
      localStorage.setItem('chat_user', JSON.stringify(updatedUser));

      // Hiển thị modal đăng ký thành công
      setShowRecoveryCode(pinToSave);
      setPinSetupInputVal('');
      setShowPinSetupModal(false); // Đóng modal thủ công nếu thay đổi từ Settings
    } catch (e) {
      console.error("Encryption/Save PIN error", e);
      setPinError('Đã có lỗi xảy ra khi lưu mã PIN khôi phục!');
    } finally {
      setIsSavingPin(false);
    }
  };

  const handleSkipPinSetup = () => {
    if (showPinSetupModal) {
      setShowPinSetupModal(false);
    } else {
      setSkippedPinSetup(true);
    }
    setPinSetupInputVal('');
    setPinError('');
  };

  if (bannedUser) {
    return (
      <div className="min-h-screen bg-white flex flex-col items-center font-sans p-4 relative text-[#1C1E21]">
        {/* Header */}
        <div className="w-full max-w-[600px] flex justify-between items-center pt-2 pb-8">
          <div className="text-[#1877F2] font-bold text-2xl tracking-tighter">lutos</div>
          <div className="text-[#1C1E21] font-semibold text-[15px] cursor-pointer hover:underline">Trợ giúp</div>
        </div>

        <div className="max-w-[400px] w-full flex flex-col items-center mt-4">

          {/* Safe Graphic Replicated in CSS */}
          <div className="w-full h-32 bg-[#EADDFF] rounded-2xl relative mb-8 flex justify-center items-end overflow-hidden">
            {/* Chain */}
            <div className="absolute top-10 left-[-10%] w-[120%] border-[5px] border-dashed border-[#5213A3] -rotate-3 opacity-40"></div>
            {/* Safe box */}
            <div className="w-32 h-24 bg-[#7A34E1] border-t-[5px] border-l-[5px] border-r-[5px] border-[#5213A3] relative z-10 flex flex-col justify-center rounded-t-sm shadow-sm">
              {/* Dial */}
              <div className="absolute top-3 left-4 w-9 h-9 rounded-full border-[2.5px] border-[#390A75] bg-[#601A9E] flex items-center justify-center">
                <div className="w-1.5 h-1.5 bg-[#390A75] rounded-full absolute top-1"></div>
                <div className="w-5 h-5 border-[1.5px] border-dashed border-[#390A75] rounded-full"></div>
              </div>
              {/* Padlock */}
              <div className="absolute top-6 right-3 w-8 h-10 flex flex-col items-center z-20">
                <div className="w-5 h-6 border-[3px] border-b-0 border-[#1877F2] rounded-t-full"></div>
                <div className="w-8 h-7 bg-[#1877F2] rounded shadow-md flex items-center justify-center -mt-1 relative">
                  <div className="w-1 h-2 bg-white rounded-full"></div>
                  <div className="absolute top-1 right-2 w-1 h-1 bg-[#166FE5] rounded-full"></div>
                </div>
              </div>
              {/* Legs */}
              <div className="absolute -bottom-2 left-4 w-2.5 h-2.5 bg-[#5213A3] rounded-b-sm"></div>
              <div className="absolute -bottom-2 right-4 w-2.5 h-2.5 bg-[#5213A3] rounded-b-sm"></div>
            </div>
          </div>

          <h1 className="text-[20px] sm:text-[22px] font-bold text-center mb-3 leading-tight">
            {bannedUser.name} ơi, tài khoản của bạn đã bị khóa
          </h1>
          <p className="text-center text-[15px] mb-6 text-[#1C1E21] leading-relaxed">
            Chúng tôi phát hiện hoạt động bất thường trên tài khoản của bạn. Như vậy nghĩa là ai đó đã sử dụng tài khoản này mà bạn không biết.
          </p>

          <hr className="w-full border-gray-200 mb-6" />

          <div className="w-full bg-[#F0F2F5] rounded-xl p-4 flex gap-3 mb-8 border border-transparent shadow-sm">
            <Lock className="text-[#1877F2] shrink-0 mt-0.5" size={20} fill="currentColor" />
            <div>
              <h3 className="font-bold text-[15px] mb-1">
                Ngày khóa tài khoản: {bannedUser.time ? new Date(bannedUser.time.replace(' ', 'T')).toLocaleString('vi-VN', { hour: '2-digit', minute: '2-digit', day: '2-digit', month: '2-digit', year: 'numeric' }) : 'Hôm nay'}
              </h3>
              <p className="text-[#65676B] text-[14px] leading-snug">
                {bannedUser.reason && (
                  <span className="block mb-2 text-[#1C1E21]">Lý do khóa: <strong>{bannedUser.reason}</strong></span>
                )}
                Để bảo vệ bạn, chúng tôi sẽ ẩn trang cá nhân của bạn với mọi người trên hệ thống và bạn cũng không thể sử dụng tài khoản của mình.
              </p>
            </div>
          </div>

          <button onClick={() => setBannedUser(null)} className="w-full bg-[#1877F2] text-white font-bold text-[17px] py-2.5 rounded-lg shadow-sm hover:bg-[#166FE5] transition">
            Bắt đầu
          </button>
        </div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center relative overflow-hidden font-sans">
        {/* Background Image & Animations */}
        <div
          className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat"
          style={{ backgroundImage: "url('../assets/bg.jpg')" }}
        >
          {/* Subtle overlay to ensure the glassmorphic card stands out */}
          <div className="absolute inset-0 bg-black/20 backdrop-blur-sm"></div>

          {/* Animated Blobs */}
          <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-vn-red/40 rounded-full blur-[120px] animate-pulse"></div>
          <div className="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-[#C49140]/30 rounded-full blur-[150px] animate-pulse" style={{ animationDelay: '2s' }}></div>
          <div className="absolute top-[20%] right-[10%] w-[40%] h-[40%] bg-orange-500/30 rounded-full blur-[100px] animate-pulse" style={{ animationDelay: '4s' }}></div>
        </div>

        {/* Glassmorphic Card */}
        <div className="relative z-10 bg-white/85 backdrop-blur-xl border border-white/50 p-6 md:p-8 rounded-[32px] shadow-[0_8px_32px_rgb(0,0,0,0.1)] w-[92%] sm:w-[90%] max-w-[400px] flex flex-col items-center hover:shadow-[0_16px_48px_rgb(0,0,0,0.15)] transition-shadow duration-500">
          <div className="w-20 h-20 bg-gradient-to-tr from-vn-red to-orange-500 rounded-full flex items-center justify-center shadow-lg shadow-vn-red/40 mb-6 hover:scale-110 transition-transform duration-300">
            <MessageCircle size={40} color="white" />
          </div>
          <h1 className="text-3xl font-bold mb-2 tracking-tight text-vn-wood">{isLoginMode ? 'Đăng nhập' : 'Đăng ký'}</h1>
          <p className="text-[#7D6B5D] mb-8 text-center text-[14px]">
            {isLoginMode ? 'Vui lòng nhập Số Lutos của bạn để đăng nhập' : 'Tạo một tài khoản Lutos ẩn danh mới'}
          </p>

          <input
            type="text"
            placeholder={isLoginMode ? "Mã ID (Số Lutos) của bạn" : "Tên của bạn"}
            className="w-full bg-white/60 focus:bg-white text-vn-wood px-4 py-3.5 rounded-2xl mb-4 outline-none border border-gray-200 focus:border-vn-red focus:ring-4 focus:ring-vn-red/10 transition-all text-[16px] shadow-sm"
            value={nameInput}
            onChange={(e) => { setNameInput(e.target.value); setLoginError(''); setNotFoundError(false); }}
          />
          <input
            type="password"
            placeholder="Mật khẩu"
            className="w-full bg-white/60 focus:bg-white text-vn-wood px-4 py-3.5 rounded-2xl mb-2 outline-none border border-gray-200 focus:border-vn-red focus:ring-4 focus:ring-vn-red/10 transition-all text-[16px] shadow-sm"
            value={passwordInput}
            onChange={(e) => { setPasswordInput(e.target.value); setLoginError(''); setNotFoundError(false); }}
            onKeyPress={(e) => e.key === 'Enter' && handleRegister()}
          />
          {loginError && (
            <div className="w-full text-center text-vn-red text-[14px] font-semibold mb-2 animate-bounce">
              {loginError}
            </div>
          )}

          <div className="w-full text-left mb-6 mt-1">
            <p className={`text-[12.5px] leading-snug ${notFoundError ? 'text-vn-red font-bold text-center animate-pulse' : 'text-[#7D6B5D]'}`}>
              {notFoundError ? "Tài khoản không tồn tại hoặc đã bị xóa." : (isLoginMode
                ? "(!) Nếu bạn chưa thiết lập Mật khẩu cho Số Lutos của mình, hệ thống sẽ coi nó như một tài khoản không hợp lệ. Vui lòng quay lại để Đăng ký và ĐỪNG quên thiết lập mật khẩu."
                : "(!) Hãy thiết lập mật khẩu để bảo vệ Số Lutos của bạn. Nếu quên mật khẩu, bạn sẽ không thể khôi phục lại tài khoản.")}
            </p>
            {!isLoginMode && !notFoundError && (
              <div className="mt-3 bg-white/50 p-3 rounded-xl border border-gray-100 flex items-start gap-3 shadow-sm hover:shadow-md transition-shadow">
                <input type="checkbox" id="terms" checked={acceptedTerms} onChange={(e) => setAcceptedTerms(e.target.checked)} className="mt-0.5 w-4.5 h-4.5 text-vn-red border-gray-300 rounded focus:ring-vn-red cursor-pointer shrink-0" />
                <label htmlFor="terms" className="text-[12.5px] text-[#7D6B5D] leading-snug cursor-pointer">
                  Bằng việc tiếp tục, bạn đồng ý với <a href="terms.php" target="_blank" className="text-vn-red hover:underline font-medium relative z-20" onClick={(e) => e.stopPropagation()}>Điều khoản Dịch vụ & Chính sách Bảo mật</a>.
                </label>
              </div>
            )}
          </div>

          {isLoginMode && savedAccounts.length > 0 && (
            <div className="w-full mb-6 mt-[-10px]">
              <p className="text-[13px] text-[#7D6B5D] font-medium mb-3">Hoặc chọn tài khoản đã lưu:</p>
              <div className="flex flex-col gap-2 max-h-[160px] overflow-y-auto pr-1">
                {savedAccounts.map(acc => (
                  <div
                    key={acc.userId}
                    onClick={() => { setNameInput(acc.userId || ''); setPasswordInput(''); }}
                    className="flex items-center gap-3 p-3 rounded-2xl bg-white/60 hover:bg-vn-red/10 border border-gray-100 hover:border-vn-red/30 transition-all text-left w-full group shadow-sm hover:shadow-md cursor-pointer backdrop-blur-sm"
                  >
                    <div className="w-10 h-10 shrink-0 rounded-full bg-vn-red/10 group-hover:bg-gradient-to-tr group-hover:from-vn-red group-hover:to-orange-500 flex items-center justify-center text-vn-red group-hover:text-white font-bold transition-all duration-300 shadow-sm">
                      {acc.name ? acc.name.charAt(0).toUpperCase() : '?'}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="font-semibold text-[14.5px] text-vn-wood group-hover:text-vn-red-light truncate transition-colors">{acc.name || "Tài khoản lỗi"}</div>
                      <div className="text-[12.5px] text-[#7D6B5D] group-hover:text-vn-red truncate transition-colors">ID: {acc.userId || "N/A"}</div>
                    </div>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        const updated = savedAccounts.filter(a => a.userId !== acc.userId);
                        setSavedAccounts(updated);
                        localStorage.setItem('lutos_saved_accounts', JSON.stringify(updated));
                      }}
                      className="w-8 h-8 rounded-full hover:bg-red-100 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors shrink-0"
                      title="Xóa tài khoản đã lưu"
                    >
                      <X size={16} />
                    </button>
                  </div>
                ))}
              </div>
            </div>
          )}

          <button onClick={handleRegister} className="w-full bg-gradient-to-r from-vn-red to-[#d43a3a] text-white py-3.5 rounded-2xl font-bold mb-5 hover:shadow-lg hover:shadow-vn-red/30 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300 text-[16px]">
            Tiếp tục
          </button>
          <button onClick={() => { setIsLoginMode(!isLoginMode); setNameInput(''); setPasswordInput(''); setLoginError(''); setNotFoundError(false); }} className="text-[#7D6B5D] text-[14.5px] font-medium hover:text-vn-red hover:underline transition-colors">
            {isLoginMode ? 'Chưa có tài khoản? Đăng ký mới' : 'Đã có tài khoản? Đăng nhập'}
          </button>
        </div>

        {/* Modal nhập mã PIN khôi phục (Premium UI) */}
        {showRecoveryInput && (
          <div className="fixed inset-0 bg-[#1a120d]/60 backdrop-blur-md z-[100] flex items-center justify-center p-4 transition-all duration-300">
            <div 
              className={`bg-white/95 backdrop-blur-md rounded-[32px] p-6 w-full max-w-sm shadow-[0_25px_60px_-15px_rgba(139,44,33,0.3)] border border-white/40 relative overflow-hidden flex flex-col items-center transition-all duration-300 ${
                shouldShake ? 'animate-shake-warning' : ''
              }`}
            >
              {/* Ambient decorative glowing circles */}
              <div className="absolute top-[-20%] left-[-20%] w-60 h-60 rounded-full bg-vn-red/10 blur-[50px] pointer-events-none animate-float-1"></div>
              <div className="absolute bottom-[-20%] right-[-20%] w-60 h-60 rounded-full bg-vn-bronze/10 blur-[50px] pointer-events-none animate-float-2"></div>

              {/* Glowing animated gradient top border */}
              <div className="absolute top-0 left-0 w-full h-[5px] bg-gradient-to-r from-vn-red via-vn-bronze to-orange-500 bg-[length:200%_auto] animate-pulse"></div>

              {/* Nút đóng X góc trên phải */}
              <button
                onClick={() => {
                  if (pendingLoginUser) {
                    handleViewAsUnverified();
                  } else {
                    setShowRecoveryInput(false);
                  }
                }}
                className="absolute top-4 right-4 w-9 h-9 rounded-full bg-vn-paper hover:bg-[#E8E2D2] flex items-center justify-center text-[#7D6B5D] hover:text-vn-wood transition-all duration-200 z-20 shadow-sm"
              >
                <X size={18} />
              </button>

              {/* High-tech Glowing Icon */}
              <div className="relative w-20 h-20 flex items-center justify-center mb-4 mt-2 select-none z-10">
                <div className="absolute inset-0 bg-gradient-to-tr from-vn-red to-orange-400 rounded-full opacity-10 animate-ping"></div>
                <div className="absolute inset-2 bg-gradient-to-tr from-vn-red to-orange-400 rounded-full opacity-20 animate-pulse"></div>
                <div className="w-16 h-16 bg-gradient-to-tr from-vn-paper to-white border border-vn-red/20 rounded-full flex items-center justify-center text-vn-red shadow-lg backdrop-blur-sm z-10">
                  <Shield size={28} className="animate-bounce-subtle" />
                </div>
              </div>

              {/* Tiêu đề & Phụ đề */}
              <h3 className="text-[19px] font-bold text-center mb-2 text-vn-wood px-4 z-10 tracking-wide font-sans leading-snug">Nhập mã PIN để khôi phục đoạn chat của bạn</h3>
              <p className="text-[13px] text-[#7D6B5D] text-center mb-3 leading-relaxed px-2 z-10">
                Một số tin nhắn còn thiếu trên thiết bị mới. Hãy nhập mã PIN bảo mật để giải mã và khôi phục lịch sử trò chuyện của bạn.
              </p>

              {/* Remaining attempts indicator */}
              <div className="text-[12.5px] font-bold mb-5 text-center z-10 flex justify-center items-center">
                {renderAttemptsBadge(recoveryAttempts, true)}
              </div>

              {/* Pill Asterisk Display with Blinking Cursor */}
              <div className="flex justify-center mb-6 z-10">
                <div className="bg-[#1A120D] text-[#FAF8F2] px-6 py-2.5 rounded-2xl flex items-center gap-1.5 font-mono font-bold text-xl tracking-widest shadow-2xl border border-white/5 select-none min-w-[130px] justify-center relative overflow-hidden group">
                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                  <span className="font-mono text-vn-paper z-10 flex items-center">
                    {Array.from({ length: 6 }).map((_, idx) => {
                      const hasChar = recoveryInputVal[idx] !== undefined;
                      const isCurrent = recoveryInputVal.length === idx;
                      return (
                        <span key={idx} className="relative w-4 h-6 flex items-center justify-center">
                          {hasChar ? (
                            <span className="text-vn-bronze text-2xl animate-pulse">●</span>
                          ) : isCurrent ? (
                            <span className="text-vn-paper animate-blink-cursor">_</span>
                          ) : (
                            <span className="text-white/20">•</span>
                          )}
                        </span>
                      );
                    })}
                  </span>
                </div>
              </div>

              {/* 6 Square boxes for PIN input */}
              <div className="flex items-center gap-2 mb-6 relative w-full z-10 justify-center">
                <div className="flex gap-2.5" onClick={() => document.getElementById('pinRecoveryHiddenInput')?.focus()}>
                  {Array.from({ length: 6 }).map((_, idx) => {
                    const isFilled = recoveryInputVal[idx] !== undefined;
                    const isCurrent = recoveryInputVal.length === idx;
                    return (
                      <div
                        key={idx}
                        className={`w-11 h-14 sm:w-12 sm:h-15 rounded-2xl flex items-center justify-center text-3xl font-bold transition-all duration-300 border ${
                          isCurrent
                            ? 'border-vn-red bg-white ring-4 ring-vn-red/10 scale-105 shadow-[0_0_20px_rgba(139,44,33,0.15)] animate-pulse-glow'
                            : isFilled
                              ? 'border-vn-bronze/40 bg-vn-paper/40 text-vn-wood shadow-sm scale-[1.02]'
                              : 'border-gray-200 bg-gray-50/50 hover:bg-gray-50'
                        }`}
                      >
                        {isFilled ? (
                          <span className="text-vn-wood scale-100 transition-all duration-300">●</span>
                        ) : (
                          <span className="text-gray-300/40">•</span>
                        )}
                      </div>
                    );
                  })}
                </div>
                <button
                  onClick={handlePasteToRecoveryInput}
                  className="text-[12.5px] bg-vn-red/10 hover:bg-vn-red/20 active:scale-95 text-vn-red px-2.5 py-1.5 rounded-2xl font-bold transition-all cursor-pointer shadow-sm select-none shrink-0"
                  title="Dán từ bộ nhớ tạm"
                >
                  Dán
                </button>
              </div>

              {/* Hidden Input field to control both Desktop and Mobile Keyboard */}
              <input
                id="pinRecoveryHiddenInput"
                type="tel"
                maxLength={6}
                pattern="[0-9]*"
                className="absolute opacity-0 w-1 h-1 pointer-events-none"
                value={recoveryInputVal}
                onChange={(e) => {
                  if (isVerifying) return; // Khóa gõ phím khi đang xác minh
                  const val = e.target.value.replace(/\D/g, '');
                  if (val.length <= 6) {
                    setRecoveryInputVal(val);
                    setPinError('');
                  }
                }}
                autoFocus
                autoComplete="one-time-code"
                name="pin-recovery-input"
              />

              {/* Trạng thái xác minh hoặc lỗi */}
              {isVerifying ? (
                <div className="flex items-center justify-center gap-2 text-vn-red text-[13.5px] font-bold mb-6 animate-pulse z-10">
                  <div className="w-4 h-4 border-2 border-vn-red border-t-transparent rounded-full animate-spin"></div>
                  <span>Đang xác minh mã PIN...</span>
                </div>
              ) : pinError ? (
                <div className="text-center text-red-500 text-[13.5px] font-bold mb-6 animate-pulse bg-red-50/80 px-4 py-2 rounded-2xl border border-red-100/50 shadow-inner max-w-full leading-normal z-10">
                  {pinError}
                </div>
              ) : (
                <div className="h-6 mb-6 z-10"></div> // Giữ chỗ khoảng trống cho mượt
              )}

              <button
                onClick={() => {
                  if (pendingLoginUser) {
                    handleViewAsUnverified();
                  } else {
                    setShowRecoveryInput(false);
                  }
                }}
                className="w-full bg-[#1A120D] text-white hover:bg-black py-3 rounded-2xl font-bold active:scale-[0.98] transition-all duration-200 z-10 text-[13.5px]"
              >
                Xem dưới dạng chưa xác minh
              </button>

              <button
                onClick={() => {
                  if (confirm("CẢNH BÁO: Tạo khóa mới sẽ XÓA VĨNH VIỄN toàn bộ tin nhắn cũ trên hệ thống vì không có mã PIN để giải mã. Bạn có chắc chắn muốn tiếp tục không?")) {
                    handleSkipRecovery();
                  }
                }}
                className="w-full bg-red-50 hover:bg-red-100 text-red-600 py-2 rounded-2xl font-medium active:scale-[0.98] transition-all duration-200 z-10 text-[12px] mt-3 border border-red-200/40"
              >
                Quên PIN? Bỏ qua để tạo khoá mới (Mất tin nhắn cũ)
              </button>
            </div>
          </div>
        )}
      </div>
    );
  }

  const renderContactInfo = () => {
    if (!activeChat) return null;
    const isSelf = activeChat.userId === user.userId;

    if (contactSubView === 'media') {
      const sharedMedia = messages.filter(msg => msg.type === 'image' || msg.type === 'video');

      // Lọc và trích xuất liên kết
      const urlRegex = /(https?:\/\/[^\s]+)/g;
      const sharedLinks = [];
      messages.forEach(msg => {
        if ((msg.type === 'text' || !msg.type) && msg.content) {
          const urls = msg.content.match(urlRegex);
          if (urls) {
            urls.forEach(url => {
              sharedLinks.push({
                id: msg.id,
                url: url,
                senderId: msg.senderId,
                timestamp: msg.timestamp
              });
            });
          }
        }
      });

      return (
        <div className={`bg-vn-paper bg-trong-dong flex flex-col overflow-y-auto ${isMobile ? 'fixed inset-0 z-[60] flex-1' : 'w-[320px] lg:w-[350px] border-l border-gray-200 shrink-0 hidden md:flex'}`}>
          <div className="h-[90px] pt-10 md:pt-4 md:h-14 bg-white/95 backdrop-blur-md flex items-center gap-3 px-4 sticky top-0 z-10 border-b border-gray-100 shrink-0">
            <button onClick={() => setContactSubView('profile')} className="text-vn-red font-medium text-[17px] flex items-center">
              <ChevronLeft size={32} className="-ml-2" />
            </button>
            <span className="font-bold text-[17px] text-vn-wood">Phương tiện & Liên kết</span>
          </div>

          {/* Tabs Selector */}
          <div className="flex border-b border-gray-200 bg-white shrink-0">
            <button
              onClick={() => setMediaActiveTab('media')}
              className={`flex-1 text-center py-3 text-[14px] font-bold transition-all border-b-2 ${mediaActiveTab === 'media' ? 'border-vn-red text-vn-red' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
            >
              Ảnh và Video
            </button>
            <button
              onClick={() => setMediaActiveTab('links')}
              className={`flex-1 text-center py-3 text-[14px] font-bold transition-all border-b-2 ${mediaActiveTab === 'links' ? 'border-vn-red text-vn-red' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
            >
              Liên kết
            </button>
          </div>

          <div className="flex-1 p-3">
            {mediaActiveTab === 'media' ? (
              sharedMedia.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-20 text-gray-400">
                  <Grid size={48} className="mb-4 text-[#A39182]" />
                  <span className="text-[14px]">Chưa có phương tiện nào được chia sẻ</span>
                </div>
              ) : (
                <div className="grid grid-cols-3 gap-1">
                  {sharedMedia.map(msg => (
                    <div
                      key={msg.id}
                      className="aspect-square bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity border border-gray-100 shadow-sm relative group"
                      onClick={() => {
                        if (msg.type === 'image') setViewingImage(msg.fileUrl);
                      }}
                    >
                      {msg.type === 'image' ? (
                        <img src={msg.fileUrl} alt="Media" className="w-full h-full object-cover" />
                      ) : (
                        <div className="w-full h-full relative">
                          <video src={msg.fileUrl} className="w-full h-full object-cover" />
                          <div className="absolute inset-0 flex items-center justify-center bg-black/30 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )
            ) : (
              sharedLinks.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-20 text-gray-400">
                  <FileText size={48} className="mb-4 text-[#A39182]" />
                  <span className="text-[14px]">Chưa có liên kết nào được chia sẻ</span>
                </div>
              ) : (
                <div className="space-y-2">
                  {sharedLinks.map((link, idx) => (
                    <a
                      key={idx}
                      href={link.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-3 p-3 bg-white rounded-xl border border-gray-100 shadow-sm hover:bg-gray-50 transition-colors block"
                    >
                      <div className="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center text-vn-red shrink-0">
                        <Share size={18} />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="text-[13px] sm:text-[14px] font-medium text-gray-800 truncate">{link.url}</div>
                        <div className="text-[11px] text-[#A39182] mt-0.5">{formatTime(link.timestamp)}</div>
                      </div>
                      <ChevronRight size={16} className="text-gray-300 shrink-0" />
                    </a>
                  ))}
                </div>
              )
            )}
          </div>
        </div>
      );
    }

    return (
      <div className={`bg-vn-paper bg-trong-dong flex flex-col overflow-y-auto ${isMobile ? 'fixed inset-0 z-[60] flex-1' : 'w-[320px] lg:w-[350px] border-l border-gray-200 shrink-0 hidden md:flex'}`}>
        <div className="h-[90px] pt-10 md:pt-4 md:h-14 bg-white/95 backdrop-blur-md flex items-center justify-between px-4 sticky top-0 z-10 border-b border-gray-100 shrink-0">
          <button onClick={() => setShowContactInfo(false)} className="text-vn-red font-medium text-[17px] flex items-center">
            <ChevronLeft size={32} className="-ml-2" />
          </button>
          <span className="font-bold text-[17px]">Thông tin liên hệ</span>
          <button className="w-8 h-8 bg-vn-red rounded-full flex items-center justify-center text-white"><Plus size={20} /></button>
        </div>

        <div className="flex flex-col items-center pt-8 pb-6 bg-vn-paper bg-trong-dong">
          <div className="w-24 h-24 bg-gray-300 rounded-full flex items-center justify-center overflow-hidden mb-4 shadow-sm border border-gray-200">
            {activeChat.avatarUrl ? <img src={activeChat.avatarUrl} className="w-full h-full object-cover" /> : <span className="text-white text-3xl font-bold">{activeChat.name[0]}</span>}
          </div>
          <h2 className="text-2xl font-bold mb-1">{isSelf ? `${activeChat.name} (Tin nhắn cá nhân)` : getDisplayName(activeChat.userId, activeChat.name)}</h2>
          <p className="text-[13px] text-[#7D6B5D] mb-6">{isSelf ? "Gửi tin nhắn cho chính mình" : "Trực tuyến"}</p>

          <div className="flex gap-4 md:gap-6 mb-6">
            <div className="flex flex-col items-center gap-1 cursor-pointer" onClick={() => setShowContactInfo(false)}>
              <div className="w-12 h-12 bg-white rounded-full shadow-sm flex items-center justify-center text-vn-red"><MessageCircle size={24} fill="currentColor" /></div>
              <span className="text-[11px] font-medium text-vn-wood-light mt-1">Chat</span>
            </div>
            {!isSelf && (
              <>
                <div className="flex flex-col items-center gap-1 cursor-pointer" onClick={() => { setShowContactInfo(false); startCall(false); }}>
                  <div className="w-12 h-12 bg-white rounded-full shadow-sm flex items-center justify-center text-vn-red"><Phone size={24} fill="currentColor" /></div>
                  <span className="text-[11px] font-medium text-vn-wood-light mt-1">Gọi</span>
                </div>
                <div className="flex flex-col items-center gap-1 cursor-pointer" onClick={() => { setShowContactInfo(false); startCall(true); }}>
                  <div className="w-12 h-12 bg-white rounded-full shadow-sm flex items-center justify-center text-vn-red"><Video size={24} fill="currentColor" /></div>
                  <span className="text-[11px] font-medium text-vn-wood-light mt-1">Video</span>
                </div>
              </>
            )}
            <div className="flex flex-col items-center gap-1 cursor-pointer">
              <div className="w-12 h-12 bg-white rounded-full shadow-sm flex items-center justify-center text-vn-red"><Search size={24} /></div>
              <span className="text-[11px] font-medium text-vn-wood-light mt-1">Tìm kiếm</span>
            </div>
          </div>
        </div>

        <div className="mx-4 bg-white rounded-xl overflow-hidden mb-6 shadow-sm border border-gray-100">
          <div className="p-3 sm:p-4 flex items-center justify-between gap-2">
            <div className="flex-1 min-w-0">
              <div className="text-[11px] sm:text-[12px] text-[#7D6B5D] mb-0.5">Số Lutos</div>
              <div className="text-[15px] sm:text-[17px] font-medium tracking-tight truncate">{activeChat.userId}</div>
            </div>
            <button onClick={() => { navigator.clipboard.writeText(activeChat.userId); }} className="bg-vn-paper hover:bg-[#E8E2D2] text-vn-wood px-3 py-1.5 rounded-full text-[12px] sm:text-[13px] font-medium transition-colors shrink-0">Sao chép</button>
          </div>
        </div>

        <div className="mx-4 bg-white rounded-xl overflow-hidden mb-6 shadow-sm border border-gray-100">
          <div className="p-4 border-b border-gray-100 flex items-center justify-between text-[16px] cursor-pointer hover:bg-vn-paper" onClick={() => alert('Đang phát triển')}>
            <span className="text-vn-wood flex items-center gap-3"><Users size={20} className="text-[#7D6B5D]" /> Tạo Nhóm</span>
          </div>
          <div className="p-4 border-b border-gray-100 flex items-center justify-between text-[16px] cursor-pointer hover:bg-vn-paper" onClick={() => setContactSubView('media')}>
            <span className="text-vn-wood flex items-center gap-3"><Grid size={20} className="text-[#7D6B5D]" /> Phương tiện đã chia sẻ</span>
            <ChevronRight size={20} className="text-gray-300" />
          </div>
          <div 
            className="p-4 flex items-center justify-between text-[16px] cursor-pointer hover:bg-red-50 text-red-600 font-bold" 
            onClick={() => {
              setShowContactInfo(false);
              setHiddenPinTargetChat(activeChat);
              if (hiddenChatsPin && hiddenChatsPin.length > 0) {
                setHiddenPinModalMode('enter_to_hide');
              } else {
                setHiddenPinModalMode('setup');
              }
              setHiddenPinInputVal('');
              setHiddenPinError('');
              setShowHiddenPinModal(true);
            }}
          >
            <span className="flex items-center gap-3"><Lock size={20} className="text-red-500" /> Ẩn cuộc trò chuyện</span>
            <ChevronRight size={20} className="text-red-400" />
          </div>
        </div>

        <div className="mx-4 bg-white rounded-xl overflow-hidden mb-12 shadow-sm border border-gray-100">
          <div className="p-4 border-b border-gray-100 flex items-center justify-between text-[16px] cursor-pointer hover:bg-red-50" onClick={handleClearMessages}>
            <span className="text-red-500">Xóa trò chuyện</span>
          </div>
          {!isSelf && (
            <>
              <div className="p-4 border-b border-gray-100 flex items-center justify-between text-[16px] cursor-pointer hover:bg-red-50" onClick={() => alert('Đã báo cáo.')}>
                <span className="text-red-500">Báo cáo</span>
              </div>
              <div className="p-4 flex items-center justify-between text-[16px] cursor-pointer hover:bg-red-50" onClick={() => handleBlockUser(activeChat)}>
                <span className="text-red-500">Chặn liên hệ này</span>
              </div>
            </>
          )}
        </div>
      </div>
    );
  };

  const renderAdminDashboard = () => (
    <div className="flex-1 overflow-y-auto bg-vn-paper bg-trong-dong pb-24 md:pb-4 w-full">
      <div className="pt-12 pb-4 text-center font-bold text-[17px] sticky top-0 bg-vn-paper bg-trong-dong z-20 shadow-sm border-b border-gray-100 flex items-center justify-center gap-2">
        <Shield size={20} className="text-vn-red" /> Quản lý Người dùng
      </div>
      <div className="px-4 py-6 max-w-3xl mx-auto space-y-6">
        {/* 1. Danh sách người dùng */}
        <div className="bg-white rounded-2xl shadow-sm overflow-hidden border border-gray-100">
          <div className="p-4 bg-gray-50 border-b border-gray-100 font-semibold text-gray-700 flex justify-between items-center">
            <span>1. Danh sách người dùng ({adminUsers.filter(u => u.is_admin != 1).length})</span>
            <button onClick={fetchAdminUsers} className="text-sm text-vn-red hover:underline">Làm mới</button>
          </div>
          <div className="divide-y divide-gray-100">
            {loadingAdmin ? (
              <div className="p-8 text-center text-gray-400">Đang tải...</div>
            ) : adminUsers.filter(u => u.is_admin != 1).map(u => (
              <div key={'list1_' + u.id} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-gray-50 transition-colors">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-500 font-bold overflow-hidden shrink-0">
                    {u.avatarUrl ? <img src={u.avatarUrl} className="w-full h-full object-cover" /> : <User size={16} />}
                  </div>
                  <div>
                    <div className="font-semibold text-[14px] flex items-center gap-2">
                      {u.name}
                      {u.is_banned == 1 && <span className="bg-red-100 text-red-700 text-[10px] px-2 py-0.5 rounded-full font-bold">BANNED</span>}
                    </div>
                    <div className="text-[12px] text-gray-500 font-mono">ID: {u.userId}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 2. Chức năng */}
        <div className="bg-white rounded-2xl shadow-sm overflow-hidden border border-gray-100">
          <div className="p-4 bg-gray-50 border-b border-gray-100 font-semibold text-gray-700">
            <span>2. Chức năng (Ban / Mở khóa)</span>
          </div>
          <div className="divide-y divide-gray-100">
            {loadingAdmin ? (
              <div className="p-8 text-center text-gray-400">Đang tải...</div>
            ) : adminUsers.filter(u => u.is_admin != 1).map(u => (
              <div key={'list2_' + u.id} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-gray-50 transition-colors">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-500 font-bold overflow-hidden shrink-0">
                    {u.avatarUrl ? <img src={u.avatarUrl} className="w-full h-full object-cover" /> : <User size={16} />}
                  </div>
                  <div>
                    <div className="font-semibold text-[14px] flex items-center gap-2">
                      {u.name}
                    </div>
                    <div className="text-[12px] text-gray-500 font-mono">ID: {u.userId}</div>
                  </div>
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  <button onClick={() => handleBanUser(u.userId, u.is_banned)} className={`px-3 py-1.5 rounded-full text-[13px] font-medium flex items-center gap-1.5 transition-colors ${u.is_banned == 1 ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-orange-100 text-orange-700 hover:bg-orange-200'}`}>
                    <Ban size={14} /> {u.is_banned == 1 ? 'Mở khóa' : 'Khóa'}
                  </button>
                  <button onClick={() => handleDeleteUser(u.userId)} className="px-3 py-1.5 rounded-full text-[13px] font-medium flex items-center gap-1.5 transition-colors bg-red-100 text-red-700 hover:bg-red-200">
                    <Trash2 size={14} /> Xóa
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 3. Người dùng hiện bị ban */}
        <div className="bg-white rounded-2xl shadow-sm overflow-hidden border border-red-100">
          <div className="p-4 bg-red-50 border-b border-red-100 font-semibold text-red-700">
            <span>3. Người dùng hiện bị ban ({adminUsers.filter(u => u.is_admin != 1 && u.is_banned == 1).length})</span>
          </div>
          <div className="divide-y divide-gray-100">
            {adminUsers.filter(u => u.is_admin != 1 && u.is_banned == 1).length === 0 ? (
              <div className="p-8 text-center text-gray-400">Không có người dùng nào bị khóa</div>
            ) : adminUsers.filter(u => u.is_admin != 1 && u.is_banned == 1).map(u => (
              <div key={'list3_' + u.id} className="p-4 flex items-center justify-between gap-4 hover:bg-red-50/50 transition-colors">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center text-red-500 font-bold overflow-hidden shrink-0">
                    <Ban size={16} />
                  </div>
                  <div>
                    <div className="font-semibold text-[14px] text-gray-800">{u.name}</div>
                    <div className="text-[12px] text-gray-500 font-mono">ID: {u.userId}</div>
                  </div>
                </div>
                <button onClick={() => handleBanUser(u.userId, 1)} className="px-3 py-1.5 rounded-full text-[13px] font-medium flex items-center gap-1.5 transition-colors bg-green-100 text-green-700 hover:bg-green-200">
                  Mở khóa
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="flex h-screen w-full bg-vn-paper bg-trong-dong font-sans text-vn-wood overflow-hidden selection:bg-blue-200">

      {/* RECOVERY CODE MODAL (Sau khi đăng ký / Thiết lập PIN thành công) */}
      {showRecoveryCode && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[200] flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl p-6 w-full max-w-sm shadow-2xl relative overflow-hidden flex flex-col items-center">
            <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-vn-red to-orange-500"></div>
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center text-green-500 mx-auto mb-4 mt-2">
              <Shield size={32} />
            </div>
            <h3 className="text-xl font-bold text-center mb-2">Thiết lập thành công!</h3>
            <p className="text-[13.5px] text-gray-500 text-center mb-5 leading-relaxed">Mã PIN khôi phục tài khoản của bạn đã được thiết lập thành công. Vui lòng ghi nhớ mã PIN này để khôi phục tin nhắn khi đăng nhập trên thiết bị khác.</p>
            <div className="bg-gray-50 border border-gray-200 rounded-xl p-4 flex items-center justify-center gap-3 mb-6 w-full shadow-inner">
              {showRecoveryCode.split('').map((char, idx) => (
                <div key={idx} className="w-10 h-12 bg-white rounded-lg border border-gray-200 flex items-center justify-center font-bold text-lg text-vn-wood shadow-sm font-mono">
                  {char}
                </div>
              ))}
            </div>
            <button onClick={() => setShowRecoveryCode(null)} className="w-full bg-vn-red text-white py-3 rounded-xl font-bold hover:bg-red-700 transition active:scale-[0.98]">
              Tôi đã ghi nhớ mã PIN an toàn
            </button>
          </div>
        </div>
      )}

      {/* PIN SETUP POPUP (Xuất hiện sau đăng ký/đăng nhập nếu chưa có PIN, hoặc khi thay đổi PIN từ Cài đặt) */}
      {user && (showPinSetupModal || ((!user.encrypted_priv_key || user.encrypted_priv_key === "") && !skippedPinSetup)) && (
        <div className="fixed inset-0 bg-[#1a120d]/60 backdrop-blur-md z-[150] flex items-center justify-center p-4 transition-all duration-300">
          <div 
            className={`bg-white/95 backdrop-blur-md rounded-[32px] p-6 w-full max-w-sm shadow-[0_25px_60px_-15px_rgba(139,44,33,0.3)] border border-white/40 relative overflow-hidden flex flex-col items-center transition-all duration-300 ${
              shouldShake ? 'animate-shake-warning' : ''
            }`}
          >
            {/* Ambient decorative glowing circles */}
            <div className="absolute top-[-20%] left-[-20%] w-60 h-60 rounded-full bg-vn-red/10 blur-[50px] pointer-events-none animate-float-1"></div>
            <div className="absolute bottom-[-20%] right-[-20%] w-60 h-60 rounded-full bg-vn-bronze/10 blur-[50px] pointer-events-none animate-float-2"></div>

            {/* Glowing animated gradient top border */}
            <div className="absolute top-0 left-0 w-full h-[5px] bg-gradient-to-r from-vn-red via-vn-bronze to-orange-500 bg-[length:200%_auto] animate-pulse"></div>

            {/* Nút đóng X góc trên phải dành riêng cho chế độ Thay đổi PIN */}
            {showPinSetupModal && (
              <button
                onClick={handleSkipPinSetup}
                className="absolute top-4 right-4 w-9 h-9 rounded-full bg-vn-paper hover:bg-[#E8E2D2] flex items-center justify-center text-[#7D6B5D] hover:text-vn-wood transition-all duration-200 z-20 shadow-sm"
              >
                <X size={18} />
              </button>
            )}

            {/* Premium Glowing Header Icon */}
            <div className="relative w-20 h-20 flex items-center justify-center mb-5 mt-2 select-none">
              <div className="absolute inset-0 bg-gradient-to-tr from-vn-red to-orange-400 rounded-full opacity-10 animate-ping"></div>
              <div className="absolute inset-2 bg-gradient-to-tr from-vn-red to-orange-400 rounded-full opacity-20 animate-pulse"></div>
              <div className="w-16 h-16 bg-gradient-to-tr from-vn-paper to-white border border-vn-red/20 rounded-full flex items-center justify-center text-vn-red shadow-lg backdrop-blur-sm z-10">
                <Lock size={28} className="animate-bounce-subtle" />
              </div>
            </div>

            <h3 className="text-xl font-bold text-center mb-2 text-vn-wood z-10 font-sans tracking-wide">
              {pinSetupStep === 'verify_current'
                ? 'Xác minh mã PIN hiện tại'
                : (showPinSetupModal ? 'Thay đổi mã PIN khôi phục' : 'Thiết lập mã PIN bảo mật')}
            </h3>

            <p className="text-[13px] text-[#7D6B5D] text-center mb-4 leading-relaxed px-2 z-10">
              {pinSetupStep === 'verify_current'
                ? 'Nhập mã PIN 6 số hiện tại của bạn để xác minh quyền thay đổi.'
                : (showPinSetupModal
                  ? 'Nhập mã PIN 6 số mới của bạn. Mã PIN này dùng để mã hóa đầu cuối và khôi phục tin nhắn trên thiết bị khác.'
                  : 'Mã hóa đầu cuối giúp tin nhắn của bạn tuyệt đối bí mật. Thiết lập mã PIN 6 số giúp khôi phục tin nhắn khi bạn đổi thiết bị. Nếu bỏ qua, bạn sẽ mất toàn bộ tin nhắn cũ khi đăng nhập thiết bị khác.'
                )}
            </p>

            {/* Remaining attempts indicator */}
            {pinSetupStep === 'verify_current' && (
              <div className="text-[12.5px] font-bold mb-5 text-center z-10 flex justify-center items-center">
                {renderAttemptsBadge(currentPinAttempts, false)}
              </div>
            )}

            {pinSetupStep !== 'verify_current' && <div className="h-2"></div>}

            {/* Pill Asterisk Lock Screen Display with Blinking Cursor */}
            <div className="flex justify-center mb-6 z-10">
              <div className="bg-[#1A120D] text-[#FAF8F2] px-6 py-2.5 rounded-2xl flex items-center gap-1.5 font-mono font-bold text-xl tracking-widest shadow-2xl border border-white/5 select-none min-w-[130px] justify-center relative overflow-hidden group">
                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                <span className="font-mono text-vn-paper z-10 flex items-center">
                  {Array.from({ length: 6 }).map((_, idx) => {
                    const hasChar = pinSetupInputVal[idx] !== undefined;
                    const isCurrent = pinSetupInputVal.length === idx;
                    return (
                      <span key={idx} className="relative w-4 h-6 flex items-center justify-center">
                        {hasChar ? (
                          <span className="text-vn-bronze text-2xl animate-pulse">●</span>
                        ) : isCurrent ? (
                          <span className="text-vn-paper animate-blink-cursor">_</span>
                        ) : (
                          <span className="text-white/20">•</span>
                        )}
                      </span>
                    );
                  })}
                </span>
              </div>
            </div>

            {/* 6 Square boxes for PIN input */}
            <div className="flex items-center gap-2 mb-6 relative w-full z-10 justify-center">
              <div className="flex gap-2.5" onClick={() => document.getElementById('pinSetupHiddenInput')?.focus()}>
                {Array.from({ length: 6 }).map((_, idx) => {
                  const isFilled = pinSetupInputVal[idx] !== undefined;
                  const isCurrent = pinSetupInputVal.length === idx;
                  return (
                    <div
                      key={idx}
                      className={`w-11 h-14 sm:w-12 sm:h-15 rounded-2xl flex items-center justify-center text-3xl font-bold transition-all duration-300 border ${
                        isCurrent
                          ? 'border-vn-red bg-white ring-4 ring-vn-red/10 scale-105 shadow-[0_0_20px_rgba(139,44,33,0.15)] animate-pulse-glow'
                          : isFilled
                            ? 'border-vn-bronze/40 bg-vn-paper/40 text-vn-wood shadow-sm scale-[1.02]'
                            : 'border-gray-200 bg-gray-50/50 hover:bg-gray-50'
                      }`}
                    >
                      {isFilled ? (
                        <span className="text-vn-wood scale-100 transition-all duration-300">●</span>
                      ) : (
                        <span className="text-gray-300/40">•</span>
                      )}
                    </div>
                  );
                })}
              </div>
              <button
                onClick={handlePasteToPinSetupInput}
                className="text-[12.5px] bg-vn-red/10 hover:bg-vn-red/20 active:scale-95 text-vn-red px-2.5 py-1.5 rounded-2xl font-bold transition-all cursor-pointer shadow-sm select-none shrink-0"
                title="Dán từ bộ nhớ tạm"
              >
                Dán
              </button>
            </div>

            {/* Hidden Input field to control both Desktop and Mobile Keyboard */}
            <input
              id="pinSetupHiddenInput"
              type="tel"
              maxLength={6}
              pattern="[0-9]*"
              className="absolute opacity-0 w-1 h-1 pointer-events-none"
              value={pinSetupInputVal}
              onChange={(e) => {
                if (isVerifying || isSavingPin) return;
                const val = e.target.value.replace(/\D/g, '');
                if (val.length <= 6) {
                  setPinSetupInputVal(val);
                  setPinError('');
                }
              }}
              autoFocus
              autoComplete="one-time-code"
              name="pin-setup-input"
            />

            {pinError && (
              <div className="text-center text-red-500 text-[13.5px] font-bold mb-5 animate-pulse bg-red-50/80 px-4 py-2 rounded-2xl border border-red-100/50 shadow-inner max-w-full leading-normal z-10">
                {pinError}
              </div>
            )}

            <div className="flex flex-col gap-2.5 w-full mt-2 z-10">
              <button
                onClick={() => {
                  if (pinSetupStep === 'verify_current') {
                    handleVerifyCurrentPin();
                  } else {
                    handleSavePinSetup();
                  }
                }}
                disabled={pinSetupInputVal.length !== 6 || isSavingPin || isVerifying}
                className={`w-full py-3.5 rounded-2xl font-bold transition-all duration-300 flex items-center justify-center gap-2 ${
                  pinSetupInputVal.length === 6 && !isSavingPin && !isVerifying
                    ? 'bg-gradient-to-r from-vn-red via-vn-red-light to-orange-500 text-white shadow-lg hover:shadow-vn-red/30 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98]'
                    : 'bg-gray-100 text-gray-400 cursor-not-allowed'
                }`}
              >
                {pinSetupStep === 'verify_current' ? (
                  isVerifying ? (
                    <>
                      <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                      Đang xác minh...
                    </>
                  ) : (
                    'Xác thực mã PIN cũ'
                  )
                ) : (
                  isSavingPin ? (
                    <>
                      <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                      Đang lưu mã PIN...
                    </>
                  ) : (
                    showPinSetupModal ? 'Cập nhật mã PIN mới' : 'Thiết lập bảo mật'
                  )
                )}
              </button>

              {!showPinSetupModal && (
                <button
                  onClick={handleSkipPinSetup}
                  disabled={isSavingPin || isVerifying}
                  className="w-full bg-gray-100 hover:bg-gray-200 text-gray-600 py-3.5 rounded-2xl font-bold hover:shadow active:scale-[0.98] transition-all duration-200"
                >
                  Bỏ qua (Chấp nhận mất tin nhắn cũ)
                </button>
              )}
            </div>
          </div>
        </div>
      )}

      {/* CALL MODAL (FaceTime / Messenger Style) */}
      {(callState || incomingCall) && (
        <div className="fixed inset-0 bg-slate-950/95 backdrop-blur-2xl z-[100] flex flex-col items-center justify-between p-6 text-white overflow-hidden select-none">
          {/* Audio Element (luôn có để đảm bảo âm thanh phát ra) */}
          <audio ref={remoteAudioRef} autoPlay playsInline className="hidden" />

          {/* TOP BAR: Status & Encryption */}
          <div className="w-full flex justify-between items-center z-20 mt-8 sm:mt-4 px-4">
            <div className="flex items-center gap-2 bg-white/10 backdrop-blur-md px-3 py-1.5 rounded-full text-[12px] font-semibold text-gray-200 border border-white/5 shadow-sm">
              <Lock size={12} className="text-green-400 animate-pulse" />
              <span>Mã hóa bảo mật</span>
            </div>
            {callState === 'connected' && (
              <div className="bg-red-500/20 text-red-400 border border-red-500/30 px-3 py-1 rounded-full text-[12px] font-bold animate-pulse shadow-sm">
                ĐANG GỌI • {formatCallTime(callDuration)}
              </div>
            )}
          </div>

          {/* MAIN CALL VIEWPORT */}
          <div className="absolute inset-0 z-0 w-full h-full flex items-center justify-center">
            {callState === 'connected' ? (
              <>
                {/* Video của đối phương (Lớn, tràn màn hình) */}
                <video
                  ref={remoteVideoRef}
                  autoPlay
                  playsInline
                  className="w-full h-full object-cover z-0"
                  style={{ display: isCameraOn ? 'block' : 'none' }}
                />

                {/* Avatar lớn của đối phương nếu camera tắt */}
                {!isCameraOn && (
                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-b from-slate-900 to-slate-950 z-0 w-full h-full">
                    {/* Hộp trừu tượng phát sáng phía sau avatar */}
                    <div className="absolute w-[300px] h-[300px] bg-blue-500/10 rounded-full blur-[100px] animate-pulse"></div>
                    <div className="relative w-28 h-28 sm:w-32 sm:h-32 rounded-full bg-gradient-to-br from-vn-red to-orange-500 flex items-center justify-center text-4xl font-bold shadow-2xl overflow-hidden border-2 border-white/20">
                      {(activeChat?.name || incomingCall?.name || 'U')[0].toUpperCase()}
                    </div>
                    <span className="text-gray-400 mt-4 text-[14px] font-medium tracking-wide">Camera đối phương đang tắt</span>
                  </div>
                )}

                {/* Video của bạn (Nhỏ, nổi ở góc trên phải) */}
                <div className="absolute top-24 right-6 w-28 h-40 sm:w-36 sm:h-48 bg-slate-900 rounded-2xl overflow-hidden shadow-2xl border border-white/20 z-10 transition-all duration-300">
                  <video
                    ref={localVideoRef}
                    autoPlay
                    playsInline
                    muted
                    className={`w-full h-full object-cover ${!isCameraOn ? 'hidden' : ''}`}
                  />
                  {!isCameraOn && (
                    <div className="w-full h-full flex flex-col items-center justify-center bg-slate-800 text-white/60">
                      <VideoOff size={24} />
                      <span className="text-[10px] mt-1 font-semibold">Tắt Cam</span>
                    </div>
                  )}
                </div>
              </>
            ) : (
              /* MÀN HÌNH CHỜ CUỘC GỌI / ĐANG ĐỔ CHUÔNG */
              <div className="flex flex-col items-center justify-center px-4 w-full h-full text-center">
                {/* Blur backdrop glowing orb */}
                <div className="absolute w-[250px] h-[250px] bg-red-500/15 rounded-full blur-[80px] animate-pulse z-0"></div>

                <div className="relative w-28 h-28 sm:w-32 sm:h-32 mb-8 z-10">
                  <div className="w-full h-full bg-gradient-to-br from-vn-red to-orange-600 rounded-full flex items-center justify-center text-4xl sm:text-5xl font-bold text-white shadow-2xl border-4 border-white/10 overflow-hidden">
                    {callState === 'incoming' ? incomingCall?.name[0].toUpperCase() : activeChat?.name[0].toUpperCase()}
                  </div>
                  {/* Sóng âm FaceTime phát sáng */}
                  <div className="absolute -inset-4 border-2 border-vn-red/40 rounded-full animate-ping opacity-60 z-0"></div>
                  <div className="absolute -inset-8 border border-vn-red/20 rounded-full animate-ping opacity-30 z-0" style={{ animationDelay: '0.5s' }}></div>
                </div>

                <h2 className="text-3xl font-extrabold text-white mb-2 tracking-tight drop-shadow z-10">
                  {callState === 'ringing' && `Đang gọi ${activeChat?.name}`}
                  {callState === 'incoming' && incomingCall?.name}
                </h2>

                <p className="text-lg text-gray-300 font-medium tracking-wide drop-shadow z-10 flex items-center justify-center gap-1.5">
                  {callState === 'ringing' && (
                    <>
                      <span className="inline-block w-2.5 h-2.5 rounded-full bg-green-400 animate-ping"></span>
                      Đang chờ phản hồi...
                    </>
                  )}
                  {callState === 'incoming' && (
                    <>
                      <Phone className="animate-bounce" size={18} />
                      Cuộc gọi thoại đến
                    </>
                  )}
                </p>
              </div>
            )}
          </div>

          {/* BOTTOM FLOATING CONTROLS (Facetime Glassmorphic Style) */}
          <div className="w-full flex flex-col items-center gap-6 z-20 pb-8 sm:pb-4">

            {/* Control Bar for Connected State */}
            {callState === 'connected' ? (
              <div className="bg-white/10 backdrop-blur-xl border border-white/10 px-6 py-4 rounded-3xl flex gap-6 items-center shadow-2xl hover:bg-white/15 transition-all">
                <button
                  onClick={toggleMic}
                  className={`w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center shadow-md transition-all ${isMicOn ? 'bg-white/10 text-white hover:bg-white/20 border border-white/10' : 'bg-red-500 text-white hover:bg-red-600'}`}
                  title={isMicOn ? 'Tắt Mic' : 'Bật Mic'}
                >
                  {isMicOn ? <Mic size={22} /> : <MicOff size={22} />}
                </button>

                <button
                  onClick={toggleCamera}
                  className={`w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center shadow-md transition-all ${isCameraOn ? 'bg-white/10 text-white hover:bg-white/20 border border-white/10' : 'bg-red-500 text-white hover:bg-red-600'}`}
                  title={isCameraOn ? 'Tắt Cam' : 'Bật Cam'}
                >
                  {isCameraOn ? <Camera size={22} /> : <VideoOff size={22} />}
                </button>

                <button
                  onClick={() => endCall(incomingCall ? incomingCall.from : activeChat?.userId)}
                  className="w-12 h-12 sm:w-14 sm:h-14 bg-red-600 hover:bg-red-700 text-white rounded-full flex items-center justify-center shadow-lg transition-all hover:scale-110 active:scale-95 border border-red-500/30"
                  title="Gác máy"
                >
                  <Phone size={24} className="rotate-[135deg]" />
                </button>
              </div>
            ) : (
              /* Action Buttons for Incoming / Outgoing Call States */
              <div className="flex gap-12 items-center justify-center">
                {callState === 'incoming' ? (
                  <>
                    {/* Nút từ chối cuộc gọi đến */}
                    <button
                      onClick={() => endCall(incomingCall.from)}
                      className="w-16 h-16 bg-red-600 hover:bg-red-700 rounded-full flex items-center justify-center text-white shadow-xl rotate-[135deg] transition-all hover:scale-110 active:scale-95 border border-red-500/20"
                      title="Từ chối"
                    >
                      <Phone size={28} />
                    </button>

                    {/* Nút nghe cuộc gọi đến */}
                    <button
                      onClick={answerCall}
                      className="w-16 h-16 bg-green-500 hover:bg-green-600 rounded-full flex items-center justify-center text-white shadow-xl transition-all animate-bounce hover:scale-110 active:scale-95 border border-green-500/20"
                      title="Chấp nhận"
                    >
                      <Phone size={28} />
                    </button>
                  </>
                ) : (
                  /* Nút hủy cuộc gọi đi */
                  <button
                    onClick={() => endCall(activeChat?.userId)}
                    className="w-16 h-16 bg-red-600 hover:bg-red-700 rounded-full flex items-center justify-center text-white shadow-xl rotate-[135deg] transition-all hover:scale-110 active:scale-95 border border-red-500/20"
                    title="Hủy cuộc gọi"
                  >
                    <Phone size={28} />
                  </button>
                )}
              </div>
            )}
          </div>
        </div>
      )}

      {/* DESKTOP SIDE NAV */}
      <div className="hidden md:flex flex-col w-[80px] bg-vn-paper bg-trong-dong border-r border-gray-200 py-6 items-center z-40 shrink-0">
        <div className="w-12 h-12 bg-vn-red rounded-full flex items-center justify-center mb-8 shadow-sm">
          <MessageCircle size={24} color="white" />
        </div>
        <div className="flex flex-col gap-6">
          <button onClick={() => { setActiveTab('chats'); setActiveChat(null); }} className={`p-3 rounded-2xl transition-all ${activeTab === 'chats' ? 'bg-vn-red/10 text-vn-red' : 'text-[#7D6B5D] hover:bg-[#E8E2D2]'}`}><MessageCircle size={28} fill={activeTab === 'chats' ? 'currentColor' : 'none'} /></button>
          <button onClick={() => { setActiveTab('calls'); setActiveChat(null); }} className={`p-3 rounded-2xl transition-all ${activeTab === 'calls' ? 'bg-vn-red/10 text-vn-red' : 'text-[#7D6B5D] hover:bg-[#E8E2D2]'}`}><Phone size={28} fill={activeTab === 'calls' ? 'currentColor' : 'none'} /></button>
          <button onClick={() => { setActiveTab('contacts'); setActiveChat(null); }} className={`p-3 rounded-2xl transition-all ${activeTab === 'contacts' ? 'bg-vn-red/10 text-vn-red' : 'text-[#7D6B5D] hover:bg-[#E8E2D2]'}`}><Users size={28} fill={activeTab === 'contacts' ? 'currentColor' : 'none'} /></button>
          <button onClick={() => { setActiveTab('settings'); setActiveChat(null); }} className={`p-3 rounded-2xl transition-all ${activeTab === 'settings' ? 'bg-vn-red/10 text-vn-red' : 'text-[#7D6B5D] hover:bg-[#E8E2D2]'}`}><Settings size={28} fill={activeTab === 'settings' ? 'currentColor' : 'none'} /></button>
          {user?.is_admin == 1 && (
            <button onClick={() => { setActiveTab('admin'); setActiveChat(null); setAdminSubTab(null); }} className={`p-3 rounded-2xl transition-all ${activeTab === 'admin' ? 'bg-vn-red/10 text-vn-red' : 'text-[#7D6B5D] hover:bg-[#E8E2D2]'}`} title="Quản trị"><Shield size={28} fill={activeTab === 'admin' ? 'currentColor' : 'none'} /></button>
          )}
        </div>
      </div>

      {/* MAIN LIST PANEL */}
      <div className={`flex-1 md:w-[350px] md:flex-none md:max-w-[350px] bg-white md:border-r border-gray-200 flex flex-col ${(activeChat || adminSubTab) ? 'hidden md:flex' : 'flex'}`}>

        {/* TAB: CHATS */}
        {activeTab === 'chats' && (
          <>
            <div className="px-4 pt-12 pb-2 bg-vn-paper bg-trong-dong sticky top-0 z-20">
              {isChatEditMode ? (
                /* Zangi Edit Mode Header */
                <div className="flex justify-between items-center mb-4 gap-2 animate-fade-in">
                  <button 
                    onClick={() => {
                      setIsChatEditMode(false);
                      setSelectedChatIds([]);
                    }}
                    className="px-4 py-1.5 rounded-full bg-white text-vn-wood hover:bg-vn-wood hover:text-white font-bold text-[13.5px] shadow-sm transition-all active:scale-95 border border-gray-100"
                  >
                    Xong
                  </button>
                  <span className="font-bold text-[16px] text-vn-wood font-sans">
                    {selectedChatIds.length} Được chọn
                  </span>
                  <button 
                    onClick={() => {
                      const allChatIds = [user.userId, ...friends.map(f => f.userId), ...myGroups.map(g => g.id)];
                      if (selectedChatIds.length === allChatIds.length) {
                        setSelectedChatIds([]);
                      } else {
                        setSelectedChatIds(allChatIds);
                      }
                    }}
                    className="px-4 py-1.5 rounded-full bg-white text-vn-wood hover:bg-vn-wood hover:text-white font-bold text-[13.5px] shadow-sm transition-all active:scale-95 border border-gray-100"
                  >
                    {selectedChatIds.length === (1 + friends.length + myGroups.length) ? 'Bỏ chọn' : 'Chọn Tất Cả'}
                  </button>
                </div>
              ) : (
                /* Standard Header */
                <div className="flex justify-between items-center mb-4 gap-2">
                  <button 
                    onClick={() => {
                      setIsChatEditMode(true);
                      setSelectedChatIds([]);
                    }}
                    className="text-vn-wood font-medium text-[14px] sm:text-[15px] bg-white px-3 py-1.5 rounded-full shadow-sm shrink-0 hover:bg-vn-paper transition-colors"
                  >
                    Sửa
                  </button>
                  <h2 className="text-[16px] sm:text-[17px] font-bold truncate">{window.IS_ARCHIVE_MODE ? 'Tin nhắn lưu trữ' : 'Trò chuyện'}</h2>
                  <div className="flex gap-2 shrink-0">
                    <button className="w-8 h-8 bg-[#E8E2D2] rounded-full flex items-center justify-center text-gray-600"><Lock size={16} /></button>
                    <button onClick={() => setShowNewChatModal(true)} className="w-8 h-8 bg-vn-red rounded-full flex items-center justify-center text-white hover:scale-105 active:scale-95 transition-all"><Plus size={20} /></button>
                  </div>
                </div>
              )}
              <div className="relative mb-2">
                <Search className="absolute left-3 top-2.5 text-[#A39182]" size={18} />
                <input 
                  type="text" 
                  placeholder="Tìm kiếm" 
                  value={chatSearchQuery}
                  onChange={(e) => {
                    const val = e.target.value;
                    setChatSearchQuery(val);
                    if (hiddenChatsPin && val === hiddenChatsPin) {
                      setChatSearchQuery('');
                      setShowHiddenChatsList(true);
                    }
                  }}
                  className="w-full bg-white h-9 rounded-xl pl-9 pr-4 text-[15px] outline-none" 
                />
              </div>
            </div>
            
            <div className="flex-1 overflow-y-auto bg-white px-4 py-2 pb-24 md:pb-4 relative">
              {/* Personal Chat Row */}
              {(!chatSearchQuery.trim() || user.name.toLowerCase().includes(chatSearchQuery.toLowerCase())) && (
                <div 
                  onClick={() => {
                    if (isChatEditMode) {
                      setSelectedChatIds(prev => 
                        prev.includes(user.userId) 
                          ? prev.filter(id => id !== user.userId) 
                          : [...prev, user.userId]
                      );
                    } else {
                      setActiveChat(user);
                      setShowMessageSearch(false);
                      setMessageSearchQuery('');
                    }
                  }} 
                  className={`flex items-center gap-3 py-3 cursor-pointer border-b border-gray-100 hover:bg-vn-paper transition-colors rounded-xl px-2 -mx-2 ${
                    activeChat?.userId === user.userId ? 'bg-vn-paper' : ''
                  } ${isChatEditMode && selectedChatIds.includes(user.userId) ? 'bg-vn-paper/50' : ''}`}
                >
                  {isChatEditMode && (
                    <div 
                      className={`w-6 h-6 rounded-full border-2 shrink-0 flex items-center justify-center transition-all ${
                        selectedChatIds.includes(user.userId) 
                          ? 'border-vn-red bg-vn-red text-white animate-scale-in' 
                          : 'border-gray-300 bg-white'
                      }`}
                    >
                      {selectedChatIds.includes(user.userId) && (
                        <Check size={14} className="stroke-[3]" />
                      )}
                    </div>
                  )}
                  <div className="w-14 h-14 bg-gray-400/80 rounded-full flex-shrink-0 overflow-hidden flex items-center justify-center text-white">
                    <User size={32} fill="currentColor" className="mt-2" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex justify-between items-center mb-0.5">
                      <span className="font-semibold text-vn-wood text-[17px] truncate">{user.name} (Tin nhắn cá nhân)</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <span className="text-[#7D6B5D] text-[15px] truncate">Gửi tin nhắn cho chính mình</span>
                    </div>
                  </div>
                </div>
              )}

              {/* Sắp xếp bạn bè: ghim lên đầu, sau đó theo thời gian tin nhắn mới nhất */}
              {[...friends, ...myGroups].filter(f => !hiddenChats.includes(f.userId) && (!chatSearchQuery.trim() || f.name.toLowerCase().includes(chatSearchQuery.toLowerCase()))).sort((a, b) => {
                const aPinned = pinnedFriends.includes(a.userId);
                const bPinned = pinnedFriends.includes(b.userId);
                if (aPinned && !bPinned) return -1;
                if (!aPinned && bPinned) return 1;
                const aTime = a.last_msg_time ? new Date(a.last_msg_time).getTime() : 0;
                const bTime = b.last_msg_time ? new Date(b.last_msg_time).getTime() : 0;
                return bTime - aTime;
              }).map(friend => {
                const isGrp = friend.is_group === true || friend.userId.startsWith('group_');
                return (
                  <div 
                    key={friend.userId} 
                    onClick={() => {
                      if (isChatEditMode) {
                        setSelectedChatIds(prev => 
                          prev.includes(friend.userId) 
                            ? prev.filter(id => id !== friend.userId) 
                            : [...prev, friend.userId]
                        );
                      } else {
                        handleSelectChat(friend);
                      }
                    }} 
                    onContextMenu={(e) => handleListRightClick(e, friend)} 
                    className={`flex items-center gap-3 py-3 cursor-pointer border-b border-gray-100 last:border-none hover:bg-vn-paper transition-colors rounded-xl px-2 -mx-2 ${
                      activeChat?.userId === friend.userId ? 'bg-vn-paper' : ''
                    } ${isChatEditMode && selectedChatIds.includes(friend.userId) ? 'bg-vn-paper/50' : ''}`}
                  >
                    {isChatEditMode && (
                      <div 
                        className={`w-6 h-6 rounded-full border-2 shrink-0 flex items-center justify-center transition-all ${
                          selectedChatIds.includes(friend.userId) 
                            ? 'border-vn-red bg-vn-red text-white animate-scale-in' 
                            : 'border-gray-300 bg-white'
                        }`}
                      >
                        {selectedChatIds.includes(friend.userId) && (
                          <Check size={14} className="stroke-[3]" />
                        )}
                      </div>
                    )}
                    <div className="w-14 h-14 bg-gray-300 rounded-full flex-shrink-0 overflow-hidden flex items-center justify-center relative">
                      {isGrp ? (
                        <div className="w-full h-full bg-gradient-to-tr from-blue-500 to-indigo-600 flex items-center justify-center text-white rounded-full">
                          <Users size={24} />
                        </div>
                      ) : (
                        friend.avatarUrl ? <img src={friend.avatarUrl} className="w-full h-full object-cover" /> : <span className="text-white text-xl font-bold">{friend.name[0]}</span>
                      )}

                      {/* Badge xanh nếu có tin nhắn chưa đọc */}
                      {(unreadMessages[friend.userId] > 0 || friend.is_unread_db == 1) && (
                        <div className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-green-500 rounded-full border-2 border-white flex items-center justify-center">
                          <span className="text-white text-[10px] font-bold">{unreadMessages[friend.userId] || ''}</span>
                        </div>
                      )}
                    </div>

                    <div className="flex-1 min-w-0">
                      <div className="flex justify-between items-center mb-0.5">
                        <span className={`text-[17px] truncate ${friend.is_unread_db == 1 || unreadMessages[friend.userId] > 0 ? 'text-black font-extrabold' : 'text-vn-wood font-semibold'}`}>
                          {isGrp ? friend.name : getDisplayName(friend.userId, friend.name)}
                        </span>
                        <div className="flex items-center gap-1">
                          {pinnedFriends.includes(friend.userId) && (
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" className="text-vn-red shrink-0"><path d="M17,4V7L15,9V17L10,21V9L8,7V4H17M3.9,12H7.9L10.9,14.1V16L8,18.1V20.1L3.9,17V12Z" /></svg>
                          )}
                          <span className="text-[13px] text-[#7D6B5D]">Gần đây</span>
                        </div>
                      </div>
                      <div className="flex items-center gap-1">
                        {isGrp ? (
                          <>
                            <Users size={14} className="text-gray-400 shrink-0" />
                            <span className="text-[#7D6B5D] text-[14px] truncate">
                              Nhóm • {friend.members ? `${friend.members.length} thành viên` : '3+ thành viên'}
                            </span>
                          </>
                        ) : (
                          <>
                            <CheckCheck size={16} className="text-vn-red shrink-0" />
                            <span className="text-[#7D6B5D] text-[15px] truncate">Bấm để trò chuyện...</span>
                          </>
                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Zangi Floating Bottom Bar */}
            {isChatEditMode && (
              <div className="md:absolute fixed bottom-0 left-0 right-0 p-4 bg-white/95 backdrop-blur-md border-t border-gray-100 flex justify-between items-center z-50 shadow-[0_-8px_30px_rgb(0,0,0,0.08)] animate-slide-up pb-safe">
                <button
                  disabled={selectedChatIds.length === 0}
                  onClick={handleBulkMarkAsRead}
                  className={`px-4 py-2.5 rounded-full font-bold text-[12.5px] transition-all active:scale-95 ${
                    selectedChatIds.length === 0
                      ? 'bg-gray-100/60 text-[#7D6B5D]/40 cursor-not-allowed shadow-none'
                      : 'bg-[#E8E2D2] text-vn-wood hover:bg-vn-wood hover:text-white shadow-sm'
                  }`}
                >
                  Đánh dấu tất cả là đã đọc
                </button>
                <button
                  disabled={selectedChatIds.length === 0}
                  onClick={handleBulkDeleteChats}
                  className={`px-5 py-2.5 rounded-full font-bold text-[12.5px] transition-all active:scale-95 ${
                    selectedChatIds.length === 0
                      ? 'bg-gray-100/60 text-[#7D6B5D]/40 cursor-not-allowed shadow-none'
                      : 'bg-vn-red text-white hover:bg-vn-red/90 shadow-sm hover:shadow'
                  }`}
                >
                  Xóa
                </button>
              </div>
            )}
          </>
        )}

        {/* TAB: CALLS */}
        {activeTab === 'calls' && (
          <>
            <div className="px-4 pt-12 pb-4 bg-vn-paper bg-trong-dong sticky top-0 z-20">
              <div className="flex justify-between items-center mb-4">
                <div className="flex bg-[#E8E2D2]/60 rounded-full p-1 relative">
                  <button onClick={() => setCallFilter('all')} className={`px-4 py-1 rounded-full text-[15px] font-medium transition-colors ${callFilter === 'all' ? 'bg-white shadow-sm text-vn-wood' : 'text-[#7D6B5D]'}`}>Tất cả</button>
                  <button onClick={() => setCallFilter('missed')} className={`px-4 py-1 rounded-full text-[15px] font-medium transition-colors ${callFilter === 'missed' ? 'bg-white shadow-sm text-vn-wood' : 'text-[#7D6B5D]'}`}>Cuộc gọi nhỡ</button>
                </div>
                <button onClick={() => setShowNewChatModal(true)} className="w-8 h-8 bg-vn-red rounded-full flex items-center justify-center text-white"><Plus size={20} /></button>
              </div>
            </div>

            <div className="flex-1 overflow-y-auto bg-white px-4 py-2 pb-24 md:pb-4">
              {callHistory.filter(call => callFilter === 'all' || call.content === 'Cuộc gọi nhỡ').length > 0 ? (
                callHistory.filter(call => callFilter === 'all' || call.content === 'Cuộc gọi nhỡ').map(call => {
                  const isOutgoing = call.senderId === user.userId;
                  const otherName = isOutgoing ? call.receiverName : call.senderName;
                  const otherAvatar = isOutgoing ? call.receiverAvatar : call.senderAvatar;
                  const isMissed = call.content === 'Cuộc gọi nhỡ';
                  const iconColor = isMissed ? 'text-red-500' : (isOutgoing ? 'text-gray-500' : 'text-green-500');
                  return (
                    <div key={call.id} className="flex items-center gap-3 py-3 border-b border-gray-100 last:border-none">
                      <div className="w-12 h-12 bg-gray-300 rounded-full flex-shrink-0 overflow-hidden flex items-center justify-center">
                        {otherAvatar ? <img src={otherAvatar} className="w-full h-full object-cover" /> : <span className="text-white text-lg font-bold">{otherName[0]}</span>}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className={`font-semibold text-[17px] truncate ${isMissed ? 'text-red-500' : 'text-vn-wood'}`}>{otherName}</div>
                        <div className="flex items-center gap-1 text-[14px] text-[#7D6B5D] mt-0.5">
                          <Phone size={14} className={iconColor} />
                          <span>{call.content}</span>
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        <span className="text-[12px] text-gray-400">{formatTime(call.timestamp)}</span>
                        <button className="w-8 h-8 rounded-full flex items-center justify-center bg-gray-50 text-vn-red"><Info size={18} /></button>
                      </div>
                    </div>
                  );
                })
              ) : (
                <div className="flex-1 flex flex-col items-center justify-center h-full pt-20">
                  <div className="w-24 h-24 rounded-full border border-vn-red/30 flex items-center justify-center mb-6">
                    <Phone size={40} className="text-[#A39182] fill-current" />
                  </div>
                  <h3 className="text-xl font-semibold mb-2">Chưa có cuộc gọi nào</h3>
                  <p className="text-[#7D6B5D] text-center text-[15px]">Tất cả cuộc gọi gần đây của bạn sẽ xuất hiện ở đây.</p>
                </div>
              )}
            </div>
          </>
        )}

        {/* TAB: CONTACTS */}
        {activeTab === 'contacts' && (
          <>
            <div className="px-4 pt-12 pb-4 bg-vn-paper bg-trong-dong sticky top-0 z-20">
              <div className="flex justify-between items-center mb-4 gap-2">
                <button className="text-vn-wood font-medium text-[14px] sm:text-[15px] bg-white px-3 py-1.5 rounded-full shadow-sm shrink-0">Sắp xếp</button>
                <h2 className="text-[16px] sm:text-[17px] font-bold truncate">Danh bạ</h2>
                <button onClick={addFriend} className="w-8 h-8 bg-vn-red rounded-full flex items-center justify-center text-white shrink-0"><Plus size={20} /></button>
              </div>
              <div className="relative">
                <Search className="absolute left-3 top-2.5 text-[#A39182]" size={18} />
                <input type="text" placeholder="Tìm kiếm hoặc thêm ID..." value={friendIdInput} onChange={e => setFriendIdInput(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); addFriend(); } }} className="w-full bg-white h-9 rounded-xl pl-9 pr-4 text-[15px] outline-none" />
              </div>
            </div>
            <div className="flex-1 overflow-y-auto bg-vn-paper bg-trong-dong p-4 pb-24 md:pb-4">
              <div className="bg-white rounded-2xl p-4 mb-6 flex items-center gap-4 shadow-sm">
                <div className="w-16 h-16 bg-gray-400 rounded-full flex items-center justify-center text-white text-2xl font-bold overflow-hidden">
                  {user.avatarUrl ? <img src={user.avatarUrl} className="w-full h-full object-cover" /> : user.name[0]}
                </div>
                <div className="flex-1">
                  <div className="text-xl font-bold">{user.name}</div>
                  <div className="text-[#7D6B5D] text-[15px]">{user.userId || user.id || ""}</div>
                </div>
                <Info size={24} className="text-[#A39182]" />
              </div>

              <div className="flex justify-around mb-8">
                <div onClick={() => setShowDialpad(true)} className="flex flex-col items-center gap-2 cursor-pointer"><div className="w-14 h-14 bg-[#E8E2D2] rounded-full flex items-center justify-center"><Grid size={24} className="text-vn-wood-light" /></div><span className="text-[13px] text-[#7D6B5D]">Bàn phím</span></div>
                <div onClick={() => alert(`Link giới thiệu của bạn là:\nhttps://lutoschat.io.vn/ref.php?code=${user.ref_code}`)} className="flex flex-col items-center gap-2 cursor-pointer"><div className="w-14 h-14 bg-[#E8E2D2] rounded-full flex items-center justify-center"><UserPlus size={24} className="text-vn-wood-light" /></div><span className="text-[13px] text-[#7D6B5D]">Mời</span></div>
                <div onClick={() => alert("Chưa có liên hệ yêu thích nào!")} className="flex flex-col items-center gap-2 cursor-pointer"><div className="w-14 h-14 bg-[#E8E2D2] rounded-full flex items-center justify-center"><Heart size={24} className="text-vn-wood-light" /></div><span className="text-[13px] text-[#7D6B5D]">Yêu thích</span></div>
              </div>

              <div className="bg-white rounded-2xl p-4 shadow-sm relative mb-4">
                <button className="absolute right-3 top-3"><X size={18} className="text-[#A39182]" /></button>
                <div className="flex gap-4">
                  <Info size={24} className="text-vn-wood shrink-0 mt-1" />
                  <div>
                    <h4 className="font-bold text-[16px] mb-1">Truy cập danh bạ thiết bị</h4>
                    <p className="text-[14px] text-[#7D6B5D] mb-1 leading-snug">Cho phép Lutos Chat sao chép liên hệ từ thiết bị của bạn vào đây. Hoặc bạn có thể thêm liên hệ Lutos Chat nội bộ bằng tay. <span className="text-vn-red">Kích hoạt quyền truy cập</span></p>
                  </div>
                </div>
              </div>

              {/* DANH SÁCH LIÊN HỆ */}
              <div className="bg-white rounded-[24px] p-4 shadow-sm border border-gray-50 mb-6">
                <h3 className="font-bold text-[15px] mb-3 text-[#7D6B5D] px-1 uppercase tracking-wider">Danh sách liên hệ ({friends.length})</h3>
                {friends.length === 0 ? (
                  <div className="text-center py-8 text-gray-400 text-[14px]">
                    Chưa có liên hệ nào. Nhập ID và ấn nút (+) ở trên để kết bạn!
                  </div>
                ) : (
                  <div className="divide-y divide-gray-100 max-h-[400px] overflow-y-auto pr-1">
                    {friends
                      .filter(f => !friendIdInput.trim() || f.name.toLowerCase().includes(friendIdInput.toLowerCase()) || f.userId.includes(friendIdInput))
                      .map(friend => (
                        <div 
                          key={friend.userId}
                          onClick={() => {
                            setActiveChat(friend);
                            setActiveTab('chats');
                          }}
                          className="flex items-center gap-3 py-3 cursor-pointer hover:bg-gray-50 active:bg-gray-100 rounded-xl px-2 transition-colors"
                        >
                          <div className="w-11 h-11 bg-gray-300 rounded-full flex-shrink-0 overflow-hidden flex items-center justify-center relative">
                            {friend.avatarUrl ? (
                              <img src={friend.avatarUrl} className="w-full h-full object-cover" />
                            ) : (
                              <span className="text-white font-bold text-[16px]">{friend.name[0]}</span>
                            )}
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="font-bold text-[15px] text-vn-wood truncate">
                              {friend.name}
                            </div>
                            <div className="text-[12.5px] text-gray-500 font-mono">
                              {friend.userId}
                            </div>
                          </div>
                        </div>
                      ))}
                  </div>
                )}
              </div>
            </div>
          </>
        )}

        {/* TAB: SETTINGS */}
        {activeTab === 'settings' && (
          <div className="flex-1 overflow-y-auto bg-vn-paper bg-trong-dong text-vn-wood">
            
            {/* SUB-SCREEN: PROFILE */}
            {settingsSubScreen === 'profile' && (
              <div className="flex flex-col min-h-full pb-24 md:pb-4 animate-fade-in">
                {/* Header */}
                <div className="pt-12 pb-4 px-4 sticky top-0 bg-vn-paper bg-trong-dong z-20 flex items-center justify-between border-b border-gray-100">
                  <button 
                    onClick={() => setSettingsSubScreen(null)} 
                    className="w-9 h-9 rounded-full bg-white shadow-sm flex items-center justify-center text-[#7D6B5D] hover:bg-gray-50 active:scale-95 transition-all"
                  >
                    <ChevronLeft size={22} />
                  </button>
                  <span className="font-bold text-[18px] text-vn-wood font-sans">Hồ sơ</span>
                  <button 
                    onClick={() => {
                      setEditName(user.name || '');
                      setEditBio(user.bio || '');
                      setEditAvatarUrl(user.avatarUrl || '');
                      setShowEditProfileModal(true);
                    }} 
                    className="px-4 py-1.5 rounded-full bg-white text-vn-wood hover:bg-vn-wood hover:text-white font-bold text-[13px] shadow-sm transition-all active:scale-95 border border-gray-100"
                  >
                    Chỉnh sửa
                  </button>
                </div>

                <div className="px-4 mt-4 space-y-4 max-w-md mx-auto w-full">
                  {/* Profile Card */}
                  <div className="bg-white rounded-[24px] p-6 shadow-sm flex flex-col items-center border border-gray-50 relative overflow-hidden">
                    <div className="absolute top-[-30%] left-[-30%] w-48 h-48 rounded-full bg-vn-bronze/5 blur-[40px] pointer-events-none"></div>
                    <div className="absolute bottom-[-30%] right-[-30%] w-48 h-48 rounded-full bg-vn-red/5 blur-[40px] pointer-events-none"></div>
                    
                    <div 
                      onClick={() => avatarInputRef.current?.click()}
                      className="w-20 h-20 bg-gray-100 border-4 border-vn-paper rounded-full flex items-center justify-center text-vn-wood font-bold text-2xl overflow-hidden cursor-pointer shadow-md hover:scale-105 active:scale-95 transition-all relative group mb-3 z-10"
                    >
                      {user.avatarUrl ? <img src={user.avatarUrl} className="w-full h-full object-cover" /> : <User size={36} />}
                      <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center text-white transition-opacity">
                        <Camera size={18} />
                      </div>
                    </div>
                    <div className="font-bold text-[22px] text-vn-wood leading-tight mb-1 z-10">{user.name}</div>
                    <div className="text-[13.5px] text-[#7D6B5D] font-mono tracking-wide bg-vn-paper px-3 py-1 rounded-full border border-gray-100/60 shadow-inner z-10">
                      {user.userId || user.id || ""}
                    </div>
                    <input type="file" ref={avatarInputRef} className="hidden" accept="image/*" onChange={handleUpdateProfile} />
                  </div>

                  {/* Bio Row */}
                  <div className="bg-white rounded-[24px] p-4 shadow-sm border border-gray-50">
                    <div className="text-[14.5px] font-bold text-vn-wood mb-1">Tiểu sử</div>
                    <div className="text-[13px] text-[#7D6B5D] leading-relaxed">
                      {user.bio || "Thành viên của cộng đồng bảo mật Lutos Chat."}
                    </div>
                    <p className="text-[11px] text-[#7D6B5D]/60 mt-2">Bạn có thể viết vài dòng về bản thân hoặc để trống.</p>
                  </div>

                  {/* Change Password option */}
                  <div 
                    onClick={() => {
                      setCurrentPassword('');
                      setNewPassword('');
                      setConfirmPassword('');
                      setChangePasswordError('');
                      setShowChangePasswordModal(true);
                    }}
                    className="bg-white rounded-[24px] p-4 shadow-sm border border-gray-50 flex items-center justify-between cursor-pointer hover:bg-gray-50/50 transition-colors"
                  >
                    <div className="flex-1 pr-3">
                      <div className="text-[14.5px] font-bold text-vn-wood mb-0.5">Đổi mật khẩu</div>
                      <p className="text-[11px] text-[#7D6B5D]/75 leading-relaxed">
                        Bạn cần mật khẩu để đăng nhập lại. Hãy chắc chắn nhớ nó. Bạn sẽ không có lựa chọn để đặt lại mật khẩu sau khi đăng xuất.
                      </p>
                    </div>
                    <ChevronRight size={20} className="text-gray-400 shrink-0" />
                  </div>

                  {/* Log Out Button */}
                  <button 
                    onClick={() => setShowLogoutModal(true)}
                    className="w-full bg-white hover:bg-red-50 text-red-500 hover:text-red-600 font-bold py-3.5 rounded-[24px] shadow-sm border border-red-100 flex items-center justify-center gap-2 transition-all active:scale-[0.98]"
                  >
                    <span>Đăng xuất</span>
                  </button>

                  {/* Footnote */}
                  <p className="text-[12px] text-[#7D6B5D]/70 leading-relaxed text-center px-4 pt-1">
                    (!) Bạn có thể xóa tài khoản của mình từ <span className="font-semibold">Cài đặt → Quyền riêng tư → Xóa tài khoản</span>. Hành động này không thể hoàn tác và tất cả dữ liệu sẽ bị mất.
                  </p>
                </div>
              </div>
            )}

            {/* SUB-SCREEN: PRIVACY */}
            {settingsSubScreen === 'privacy' && (
              <div className="flex flex-col min-h-full pb-24 md:pb-4 animate-fade-in">
                {/* Header */}
                <div className="pt-12 pb-4 px-4 sticky top-0 bg-vn-paper bg-trong-dong z-20 flex items-center justify-between border-b border-gray-100">
                  <button 
                    onClick={() => setSettingsSubScreen(null)} 
                    className="w-9 h-9 rounded-full bg-white shadow-sm flex items-center justify-center text-[#7D6B5D] hover:bg-gray-50 active:scale-95 transition-all"
                  >
                    <ChevronLeft size={22} />
                  </button>
                  <span className="font-bold text-[18px] text-vn-wood font-sans">Quyền riêng tư</span>
                  <div className="w-9"></div> {/* Spacer to center the title */}
                </div>

                <div className="px-4 mt-4 space-y-4 max-w-md mx-auto w-full">
                  {/* Switches Group */}
                  <div className="bg-white rounded-[24px] p-2 shadow-sm border border-gray-50 divide-y divide-gray-100">
                    <div 
                      onClick={() => setOnlineStatus(!onlineStatus)} 
                      className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50/50 transition-colors rounded-t-[20px]"
                    >
                      <span className="text-[14.5px] font-semibold text-vn-wood">Hiển thị trạng thái online của tôi</span>
                      <button 
                        className={`w-[50px] h-[28px] rounded-full p-[2px] transition-colors duration-200 focus:outline-none flex items-center shrink-0 ${
                          onlineStatus ? 'bg-vn-red' : 'bg-gray-200'
                        }`}
                      >
                        <div className={`w-[24px] h-[24px] bg-white rounded-full shadow-md transform transition-transform duration-200 ${
                          onlineStatus ? 'translate-x-[22px]' : 'translate-x-0'
                        }`} />
                      </button>
                    </div>

                    <div 
                      onClick={() => setTypingStatus(!typingStatus)} 
                      className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50/50 transition-colors"
                    >
                      <span className="text-[14.5px] font-semibold text-vn-wood">Hiển thị khi tôi đang gõ</span>
                      <button 
                        className={`w-[50px] h-[28px] rounded-full p-[2px] transition-colors duration-200 focus:outline-none flex items-center shrink-0 ${
                          typingStatus ? 'bg-vn-red' : 'bg-gray-200'
                        }`}
                      >
                        <div className={`w-[24px] h-[24px] bg-white rounded-full shadow-md transform transition-transform duration-200 ${
                          typingStatus ? 'translate-x-[22px]' : 'translate-x-0'
                        }`} />
                      </button>
                    </div>

                    <div 
                      onClick={() => setSeenStatus(!seenStatus)} 
                      className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50/50 transition-colors rounded-b-[20px]"
                    >
                      <span className="text-[14.5px] font-semibold text-vn-wood">Hiển thị trạng thái 'Đã xem'</span>
                      <button 
                        className={`w-[50px] h-[28px] rounded-full p-[2px] transition-colors duration-200 focus:outline-none flex items-center shrink-0 ${
                          seenStatus ? 'bg-vn-red' : 'bg-gray-200'
                        }`}
                      >
                        <div className={`w-[24px] h-[24px] bg-white rounded-full shadow-md transform transition-transform duration-200 ${
                          seenStatus ? 'translate-x-[22px]' : 'translate-x-0'
                        }`} />
                      </button>
                    </div>
                  </div>
                  <p className="text-[12px] text-[#7D6B5D]/75 leading-relaxed px-4">
                    Tắt tùy chọn này sẽ không cho phép bạn xem liệu người khác đã xem tin nhắn của bạn hay chưa.
                  </p>

                  {/* Blocked List */}
                  <div className="bg-white rounded-[24px] p-1 shadow-sm border border-gray-50">
                    <div 
                      onClick={() => {
                        fetchBlockedUsers();
                        setShowBlockedUsersList(true);
                      }}
                      className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50/50 rounded-[20px] transition-colors"
                    >
                      <span className="text-[14.5px] font-bold text-vn-wood">Đã chặn</span>
                      <ChevronRight size={20} className="text-gray-400" />
                    </div>
                  </div>
                  <p className="text-[12px] text-[#7D6B5D]/75 leading-relaxed px-4">
                    Liên hệ bị chặn sẽ không thể gọi cho bạn hoặc gửi tin nhắn cho bạn.
                  </p>

                  {/* Account Deletion */}
                  <div className="bg-white rounded-[24px] p-1 shadow-sm border border-gray-50">
                    <div 
                      onClick={() => {
                        if (confirm("CẢNH BÁO CỰC KỲ QUAN TRỌNG: Bạn có chắc chắn muốn xóa vĩnh viễn tài khoản này không? Toàn bộ tin nhắn, hình ảnh, file gửi và lịch sử cuộc gọi sẽ bị xóa hoàn toàn khỏi hệ thống mà không thể khôi phục!")) {
                          alert("Hệ thống bảo mật đang xử lý yêu cầu xóa tài khoản của bạn.");
                        }
                      }}
                      className="flex items-center justify-between p-4 cursor-pointer hover:bg-red-50 rounded-[20px] transition-colors group"
                    >
                      <span className="text-[14.5px] font-bold text-red-500 group-hover:text-red-600">Xóa Tài Khoản</span>
                      <ChevronRight size={20} className="text-red-400 group-hover:text-red-500" />
                    </div>
                  </div>
                  <p className="text-[12px] text-[#7D6B5D]/75 leading-relaxed px-4">
                    Xóa Tài Khoản sẽ xóa tất cả dữ liệu của bạn vĩnh viễn, bao gồm tin nhắn, lịch sử cuộc gọi và thông tin hồ sơ.
                  </p>

                  {/* Pin and Hide Group */}
                  <div className="bg-white rounded-[24px] p-2 shadow-sm border border-gray-50 divide-y divide-gray-100">
                    <div 
                      onClick={() => {
                        setHiddenPinTargetChat(null);
                        if (hiddenChatsPin && hiddenChatsPin.length > 0) {
                          setHiddenPinModalMode('enter_to_manage');
                        } else {
                          setHiddenPinModalMode('setup');
                        }
                        setHiddenPinInputVal('');
                        setHiddenPinError('');
                        setShowHiddenPinModal(true);
                      }}
                      className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50/50 transition-colors"
                    >
                      <div className="flex items-center gap-3">
                        <Lock size={20} className="text-vn-red" />
                        <span className="text-[14.5px] font-semibold text-vn-wood">Quản lý cuộc trò chuyện ẩn</span>
                      </div>
                      <ChevronRight size={20} className="text-gray-400" />
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* SUB-SCREEN: DOWNLOAD APP */}
            {settingsSubScreen === 'download_app' && (
              <div className="flex flex-col min-h-full pb-24 md:pb-4 animate-fade-in">
                {/* Header */}
                <div className="pt-12 pb-4 px-4 sticky top-0 bg-vn-paper bg-trong-dong z-20 flex items-center justify-between border-b border-gray-100">
                  <button 
                    onClick={() => setSettingsSubScreen(null)} 
                    className="w-9 h-9 rounded-full bg-white shadow-sm flex items-center justify-center text-[#7D6B5D] hover:bg-gray-50 active:scale-95 transition-all"
                  >
                    <ChevronLeft size={22} />
                  </button>
                  <span className="font-bold text-[18px] text-vn-wood font-sans">Tải ứng dụng</span>
                  <div className="w-9 h-9" /> {/* Spacer */}
                </div>

                <div className="px-4 mt-6 space-y-6 max-w-md mx-auto w-full">
                  {/* PWA Mobile App Card */}
                  <div className="bg-white rounded-[24px] p-6 shadow-sm border border-gray-50 flex flex-col relative overflow-hidden">
                    <div className="absolute top-[-30%] left-[-30%] w-48 h-48 rounded-full bg-vn-bronze/5 blur-[40px] pointer-events-none"></div>
                    
                    <div className="flex items-center gap-3 mb-4">
                      <div className="w-12 h-12 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-600">
                        <Smartphone size={24} />
                      </div>
                      <div>
                        <h3 className="font-bold text-[17px] text-vn-wood leading-tight">Ứng Dụng Điện Thoại</h3>
                        <p className="text-[11.5px] text-[#7D6B5D]">Cài đặt nhanh không cần qua App Store / Play Store</p>
                      </div>
                    </div>

                    {isAppInstalled ? (
                      <div className="bg-emerald-50 border border-emerald-100 rounded-xl p-4 flex items-center gap-3 text-emerald-800">
                        <Check size={20} className="text-emerald-600 shrink-0" />
                        <div className="text-[13px] font-medium">Bạn đang mở Lutos Chat từ ứng dụng đã được cài đặt!</div>
                      </div>
                    ) : (
                      <div className="space-y-4">
                        {/* Check for iOS */}
                        {/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream ? (
                          <div className="space-y-3 bg-vn-paper/50 rounded-2xl p-4 border border-gray-100">
                            <div className="text-[13.5px] font-bold text-vn-wood flex items-center gap-2">
                              <Info size={16} className="text-vn-bronze" /> Hướng dẫn cài đặt trên iOS (Safari):
                            </div>
                            <ol className="text-[12.5px] text-[#7D6B5D] space-y-2 list-decimal list-inside">
                              <li>Nhấp vào nút <span className="font-bold inline-flex items-center gap-0.5 bg-white px-1.5 py-0.5 rounded border border-gray-200"><Share size={12} className="text-blue-500" /> Chia sẻ</span> ở dưới cùng Safari.</li>
                              <li>Cuộn xuống và chọn <span className="font-bold">Thêm vào MH chính (Add to Home Screen)</span>.</li>
                              <li>Nhấp vào nút <span className="font-bold text-blue-600">Thêm (Add)</span> ở góc trên cùng bên phải để hoàn tất.</li>
                            </ol>
                          </div>
                        ) : deferredPrompt ? (
                          <div className="space-y-3">
                            <p className="text-[13px] text-[#7D6B5D] leading-relaxed">
                              Lutos Chat hỗ trợ cài đặt trực tiếp lên màn hình chính điện thoại của bạn, giúp khởi động toàn màn hình nhanh chóng và tiết kiệm pin hơn.
                            </p>
                            <button
                              onClick={handleInstallApp}
                              className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-bold py-3.5 px-6 rounded-2xl shadow-md shadow-blue-500/20 flex items-center justify-center gap-2 transition-all active:scale-[0.98]"
                            >
                              <Smartphone size={20} />
                              <span>CÀI ĐẶT NGAY</span>
                            </button>
                          </div>
                        ) : (
                          <div className="space-y-3">
                            <p className="text-[13px] text-[#7D6B5D] leading-relaxed">
                              Để cài đặt ứng dụng trên điện thoại, vui lòng nhấp vào nút menu của trình duyệt (icon 3 chấm ở Chrome) và chọn <span className="font-bold text-vn-wood">"Cài đặt ứng dụng" (Install App)</span> hoặc <span className="font-bold text-vn-wood">"Thêm vào Màn hình chính"</span>.
                            </p>
                          </div>
                        )}
                      </div>
                    )}
                  </div>

                  {/* Desktop App Card */}
                  <div className="bg-white rounded-[24px] p-6 shadow-sm border border-gray-50 flex flex-col relative overflow-hidden">
                    <div className="absolute bottom-[-30%] right-[-30%] w-48 h-48 rounded-full bg-vn-red/5 blur-[40px] pointer-events-none"></div>
                    
                    <div className="flex items-center gap-3 mb-4">
                      <div className="w-12 h-12 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-600">
                        <Monitor size={24} />
                      </div>
                      <div>
                        <h3 className="font-bold text-[17px] text-vn-wood leading-tight">Ứng Dụng Máy Tính (Windows)</h3>
                        <p className="text-[11.5px] text-[#7D6B5D]">Chạy trực tiếp dạng phần mềm .EXE trên PC</p>
                      </div>
                    </div>

                    <p className="text-[13px] text-[#7D6B5D] leading-relaxed mb-4">
                      Tải phiên bản Desktop chuyên nghiệp cho hệ điều hành Windows (10/11) để có trải nghiệm nhắn tin tối ưu, khởi động nhanh và hoạt động độc lập như một phần mềm độc lập.
                    </p>

                    <a
                      href="lutos-desktop/dist/Lutos Chat Setup 1.0.0.exe"
                      download
                      className="w-full bg-vn-wood hover:bg-vn-wood-light text-white font-bold py-3.5 px-6 rounded-2xl shadow-md flex items-center justify-center gap-2 transition-all active:scale-[0.98] text-center"
                    >
                      <Monitor size={20} />
                      <span>TẢI BẢN WINDOWS (.EXE)</span>
                    </a>
                  </div>
                </div>
              </div>
            )}

            {/* MAIN SETTINGS SCREEN */}
            {!settingsSubScreen && (
              <div className="px-4 pb-24 md:pb-4 max-w-md mx-auto w-full animate-fade-in">
                <div className="pt-12 pb-4 text-center font-bold text-[17px] sticky top-0 bg-vn-paper bg-trong-dong z-20">Cài đặt</div>
                
                <div className="bg-white rounded-2xl p-4 mb-4 shadow-sm flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="w-14 h-14 bg-vn-red rounded-full flex items-center justify-center text-white"><PhoneCall size={24} /></div>
                    <div>
                      <div className="text-[#7D6B5D] text-[13px] mb-0.5">Số Lutos Chat của bạn</div>
                      <div className="font-bold text-[19px] tracking-wide">{user.userId || user.id || "Chưa có ID"}</div>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <button onClick={() => {
                      navigator.clipboard.writeText(user.userId || user.id || "");
                    }} className="w-10 h-10 bg-vn-paper rounded-full flex items-center justify-center text-gray-600 hover:bg-[#E8E2D2]"><Copy size={20} /></button>
                  </div>
                </div>

                <div className="bg-white rounded-2xl p-4 mb-4 shadow-sm flex items-center justify-between cursor-pointer hover:bg-gray-50/50 transition-colors" onClick={() => setSettingsSubScreen('profile')}>
                  <div className="flex items-center gap-3 sm:gap-4">
                    <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gray-400 rounded-full flex items-center justify-center text-white font-bold text-xl overflow-hidden shrink-0">
                      {user.avatarUrl ? <img src={user.avatarUrl} className="w-full h-full object-cover" /> : <User size={28} className="sm:w-8 sm:h-8" />}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="text-[#7D6B5D] text-[13px] sm:text-[15px] mb-0.5">Hồ sơ của bạn</div>
                      <div className="font-bold text-[18px] sm:text-[22px] truncate">{user.name}</div>
                    </div>
                  </div>
                  <ChevronRight size={20} className="text-gray-300" />
                </div>

                <div className="bg-white rounded-2xl mb-4 shadow-sm overflow-hidden">
                  <div onClick={() => alert("Tính năng Lutos Chat Premium đang được phát triển!")} className="p-4 border-b border-gray-100 flex justify-between items-center cursor-pointer">
                    <div className="flex items-center gap-2 font-bold text-[17px]">
                      <div className="w-7 h-7 bg-gray-800 text-white rounded-full flex justify-center items-center"><Star size={16} fill="currentColor" /></div>
                      Lutos Chat Premium
                    </div>
                    <div className="flex items-center gap-1 text-[#7D6B5D] text-[15px]">Chưa đăng ký <ChevronRight size={20} /></div>
                  </div>
                  <div className="p-4 text-[14px] text-[#7D6B5D] bg-vn-paper/50 leading-snug">
                    Tham gia Lutos Chat Premium để gửi media với độ phân giải đầy đủ không giới hạn, có cuộc gọi lên đến 1000 người và mở khóa các tính năng giao tiếp bí mật.
                  </div>
                </div>

                <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
                  <div onClick={() => alert(`Link giới thiệu của bạn là:\nhttps://lutoschat.io.vn/ref.php?code=${user.ref_code}`)} className="flex items-center justify-between p-4 border-b border-gray-100 cursor-pointer">
                    <div className="flex items-center gap-4"><Users size={24} className="text-vn-wood-light" /><span className="text-[17px]">Mời bạn bè</span></div>
                    <ChevronRight size={20} className="text-gray-300" />
                  </div>

                  <div onClick={() => setSettingsSubScreen('privacy')} className="flex items-center justify-between p-4 border-b border-gray-100 cursor-pointer">
                    <div className="flex items-center gap-4"><Lock size={24} className="text-vn-wood-light" /><span className="text-[17px]">Quyền riêng tư</span></div>
                    <ChevronRight size={20} className="text-gray-300" />
                  </div>

                  {/* Dòng Xác thực thiết bị (Luôn hiện để báo trạng thái bảo mật) */}
                  {isDeviceVerified ? (
                    <div onClick={() => alert("Thiết bị của bạn đã được xác thực thành công. Tất cả tin nhắn đang được mã hóa E2EE và bảo mật tuyệt đối!")} className="flex items-center justify-between p-4 border-b border-gray-100 cursor-pointer bg-green-50/20 hover:bg-green-50/40 transition-colors">
                      <div className="flex items-center gap-4">
                        <Shield size={24} className="text-green-600 animate-pulse" />
                        <div className="flex flex-col">
                          <span className="text-[17px] font-bold text-green-700">Trạng thái thiết bị</span>
                          <span className="text-[11px] text-green-600 leading-none mt-0.5">Đã xác minh & Bảo mật E2EE</span>
                        </div>
                      </div>
                      <span className="bg-green-600 text-white text-[11px] font-extrabold px-2.5 py-1 rounded-full shadow-sm shrink-0">Đã bảo mật</span>
                    </div>
                  ) : (
                    <div onClick={() => {
                      setPendingLoginUser({ ...user, tmpPubKey: localStorage.getItem(`pubKey_${user.userId}`) });
                      setShowRecoveryInput(true);
                    }} className="flex items-center justify-between p-4 border-b border-gray-100 cursor-pointer bg-red-50/50 hover:bg-red-50 transition-colors animate-pulse">
                      <div className="flex items-center gap-4">
                        <Lock size={24} className="text-vn-red" />
                        <div className="flex flex-col">
                          <span className="text-[17px] font-bold text-vn-red">Xác thực thiết bị (PIN)</span>
                          <span className="text-[11px] text-[#A13A2E] leading-none mt-0.5">Thiết bị của bạn chưa được xác minh</span>
                        </div>
                      </div>
                      <span className="bg-vn-red text-white text-[11px] font-extrabold px-2.5 py-1 rounded-full shadow-sm shrink-0">Chưa xác minh</span>
                    </div>
                  )}

                  <div onClick={() => setSettingsSubScreen('download_app')} className="flex items-center justify-between p-4 border-b border-gray-100 cursor-pointer hover:bg-gray-50/50 transition-colors">
                    <div className="flex items-center gap-4">
                      <Smartphone size={24} className="text-vn-wood-light" />
                      <span className="text-[17px]">Tải ứng dụng di động & PC</span>
                    </div>
                    <ChevronRight size={20} className="text-gray-300" />
                  </div>

                  <div onClick={() => {
                    setPinSetupInputVal('');
                    setPinError('');
                    if (user && user.encrypted_priv_key && user.encrypted_priv_key !== "") {
                      setPinSetupStep('verify_current');
                    } else {
                      setPinSetupStep('enter_new');
                    }
                    setCurrentPinAttempts(0);
                    setShowPinSetupModal(true);
                  }} className="flex items-center justify-between p-4 border-b border-gray-100 cursor-pointer">
                    <div className="flex items-center gap-4"><Key size={24} className="text-vn-wood-light" /><span className="text-[17px]">Thay đổi mã PIN khôi phục</span></div>
                    <ChevronRight size={20} className="text-gray-300" />
                  </div>
                  <div onClick={() => setShowLogoutModal(true)} className="flex items-center justify-between p-4 cursor-pointer">
                    <div className="flex items-center gap-4"><LogOut size={24} className="text-red-500" /><span className="text-[17px] text-red-500">Đăng xuất</span></div>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

        {/* TAB: ADMIN (MENU) */}
        {activeTab === 'admin' && user?.is_admin == 1 && (
          <div className="flex-1 overflow-y-auto bg-vn-paper bg-trong-dong pb-24 md:pb-4">
            <div className="pt-12 pb-4 text-center font-bold text-[17px] sticky top-0 bg-vn-paper bg-trong-dong z-20 shadow-sm border-b border-gray-100 flex items-center justify-center gap-2">
              <Shield size={20} className="text-vn-red" /> Quản trị Hệ thống
            </div>
            <div className="p-3 space-y-2 mt-2">
              <div onClick={() => setAdminSubTab('list')} className={`p-4 rounded-2xl flex items-center gap-4 cursor-pointer transition-all border ${adminSubTab === 'list' ? 'bg-white border-vn-red shadow-sm text-vn-red' : 'bg-white/60 border-transparent hover:bg-white hover:shadow-sm text-gray-700'}`}>
                <div className={`w-12 h-12 rounded-full flex items-center justify-center ${adminSubTab === 'list' ? 'bg-vn-red/10 text-vn-red' : 'bg-blue-50 text-blue-500'}`}><Users size={20} /></div>
                <div className="flex-1 font-semibold text-[15px]">Danh sách người dùng</div>
                <ChevronRight size={20} className={adminSubTab === 'list' ? 'text-vn-red' : 'text-gray-400'} />
              </div>
              <div onClick={() => setAdminSubTab('actions')} className={`p-4 rounded-2xl flex items-center gap-4 cursor-pointer transition-all border ${adminSubTab === 'actions' ? 'bg-white border-vn-red shadow-sm text-vn-red' : 'bg-white/60 border-transparent hover:bg-white hover:shadow-sm text-gray-700'}`}>
                <div className={`w-12 h-12 rounded-full flex items-center justify-center ${adminSubTab === 'actions' ? 'bg-vn-red/10 text-vn-red' : 'bg-orange-50 text-orange-500'}`}><Shield size={20} /></div>
                <div className="flex-1 font-semibold text-[15px]">Chức năng (Khóa/Xóa)</div>
                <ChevronRight size={20} className={adminSubTab === 'actions' ? 'text-vn-red' : 'text-gray-400'} />
              </div>
              <div onClick={() => setAdminSubTab('banned')} className={`p-4 rounded-2xl flex items-center gap-4 cursor-pointer transition-all border ${adminSubTab === 'banned' ? 'bg-white border-vn-red shadow-sm text-vn-red' : 'bg-white/60 border-transparent hover:bg-white hover:shadow-sm text-gray-700'}`}>
                <div className={`w-12 h-12 rounded-full flex items-center justify-center ${adminSubTab === 'banned' ? 'bg-vn-red/10 text-vn-red' : 'bg-red-50 text-red-500'}`}><Ban size={20} /></div>
                <div className="flex-1 font-semibold text-[15px]">Người dùng bị khóa</div>
                <ChevronRight size={20} className={adminSubTab === 'banned' ? 'text-vn-red' : 'text-gray-400'} />
              </div>
              <div onClick={async () => {
                if (confirm("CẢNH BÁO NGUY HIỂM:\nBạn có chắc chắn muốn XÓA SẠCH toàn bộ cơ sở dữ liệu? Tất cả tin nhắn, cuộc gọi và tài khoản người dùng khác sẽ bị xóa vĩnh viễn!")) {
                  try {
                    const res = await axios.post(`${API_BASE}?action=admin_wipe_database`, { requesterId: user.userId });
                    if (res.data.success) {
                      alert("Dọn sạch toàn bộ cơ sở dữ liệu thành công! Ứng dụng sẽ tự động tải lại.");
                      window.location.reload();
                    }
                  } catch (e) {
                    alert("Đã xảy ra lỗi khi xóa dữ liệu!");
                  }
                }
              }} className="p-4 rounded-2xl flex items-center gap-4 cursor-pointer transition-all border bg-red-50 border-red-200 hover:bg-red-100 text-red-700 mt-2">
                <div className="w-12 h-12 rounded-full flex items-center justify-center bg-red-500 text-white"><Trash2 size={20} /></div>
                <div className="flex-1 font-bold text-[15px]">Dọn sạch dữ liệu hệ thống</div>
                <ChevronRight size={20} className="text-red-500" />
              </div>
            </div>
          </div>
        )}
      </div>

      {/* MOBILE BOTTOM NAV */}
      {!isChatEditMode && (
        <div className="md:hidden fixed bottom-6 left-2 right-2 bg-white/95 backdrop-blur-xl rounded-[32px] shadow-[0_8px_30px_rgb(0,0,0,0.12)] flex justify-between px-2 py-1.5 z-40 border border-gray-100">
          <button onClick={() => { setActiveTab('chats'); setActiveChat(null); }} className={`flex flex-col items-center justify-center flex-1 py-2 rounded-[24px] transition-all ${activeTab === 'chats' ? 'bg-vn-red/10 text-vn-red' : 'text-[#7D6B5D]'}`}>
            <div className="mb-1"><MessageCircle size={22} fill={activeTab === 'chats' ? 'currentColor' : 'none'} /></div>
            <span className="text-[10px] sm:text-[11px] font-medium">Tin nhắn</span>
          </button>
          <button onClick={() => { setActiveTab('calls'); setActiveChat(null); }} className={`flex flex-col items-center justify-center flex-1 py-2 rounded-[24px] transition-all ${activeTab === 'calls' ? 'bg-vn-red/10 text-vn-red' : 'text-[#7D6B5D]'}`}>
            <div className="mb-1"><Phone size={22} fill={activeTab === 'calls' ? 'currentColor' : 'none'} /></div>
            <span className="text-[10px] sm:text-[11px] font-medium">Cuộc gọi</span>
          </button>
          <button onClick={() => { setActiveTab('contacts'); setActiveChat(null); }} className={`flex flex-col items-center justify-center flex-1 py-2 rounded-[24px] transition-all ${activeTab === 'contacts' ? 'bg-vn-red/10 text-vn-red' : 'text-[#7D6B5D]'}`}>
            <div className="mb-1"><Users size={22} fill={activeTab === 'contacts' ? 'currentColor' : 'none'} /></div>
            <span className="text-[10px] sm:text-[11px] font-medium">Danh bạ</span>
          </button>
          <button onClick={() => { setActiveTab('settings'); setActiveChat(null); }} className={`flex flex-col items-center justify-center flex-1 py-2 rounded-[24px] transition-all ${activeTab === 'settings' ? 'bg-vn-red/10 text-vn-red' : 'text-[#7D6B5D]'}`}>
            <div className="mb-1"><Settings size={22} fill={activeTab === 'settings' ? 'currentColor' : 'none'} /></div>
            <span className="text-[10px] sm:text-[11px] font-medium">Cài đặt</span>
          </button>
          {user?.is_admin == 1 && (
            <button onClick={() => { setActiveTab('admin'); setActiveChat(null); setAdminSubTab(null); }} className={`flex flex-col items-center justify-center flex-1 py-2 rounded-[24px] transition-all ${activeTab === 'admin' ? 'bg-vn-red/10 text-vn-red' : 'text-[#7D6B5D]'}`}>
              <div className="mb-1"><Shield size={22} fill={activeTab === 'admin' ? 'currentColor' : 'none'} /></div>
              <span className="text-[10px] sm:text-[11px] font-medium">Quản lý</span>
            </button>
          )}
        </div>
      )}


      {/* CHAT AREA (Detail) */}
      <div className={`flex-1 flex flex-col bg-white ${(!activeChat && !adminSubTab) ? 'hidden md:flex' : 'flex'} fixed inset-0 md:static z-50 md:z-auto`}>
        {activeTab === 'admin' && user?.is_admin == 1 && adminSubTab ? (
          <div className="flex-1 flex flex-col bg-vn-paper bg-trong-dong h-full relative">
            <div className="h-16 flex items-center px-4 border-b border-gray-100 bg-white/90 backdrop-blur-md sticky top-0 z-20 shadow-sm shrink-0">
              <button onClick={() => setAdminSubTab(null)} className="md:hidden w-10 h-10 -ml-2 mr-2 flex items-center justify-center text-gray-600 rounded-full hover:bg-gray-100">
                <ChevronLeft size={24} />
              </button>
              <div className="font-bold text-[17px] text-vn-wood flex-1 text-center md:text-left">
                {adminSubTab === 'list' && 'Danh sách người dùng'}
                {adminSubTab === 'actions' && 'Chức năng (Khóa / Xóa)'}
                {adminSubTab === 'banned' && 'Người dùng hiện bị ban'}
              </div>
              <button onClick={fetchAdminUsers} className="text-sm text-vn-red hover:bg-red-50 px-3 py-1.5 rounded-full font-medium transition-colors">Làm mới</button>
            </div>
            <div className="flex-1 overflow-y-auto p-4 md:p-8">
              <div className="max-w-4xl mx-auto w-full">
                {adminSubTab === 'list' && (
                  <div className="bg-white rounded-2xl shadow-sm overflow-hidden border border-gray-100">
                    <div className="p-4 bg-gray-50 border-b border-gray-100 font-semibold text-gray-700 flex justify-between items-center">
                      <span>Danh sách ({adminUsers.filter(u => u.is_admin != 1).length})</span>
                    </div>
                    <div className="divide-y divide-gray-100">
                      {loadingAdmin ? (
                        <div className="p-8 text-center text-gray-400">Đang tải...</div>
                      ) : adminUsers.filter(u => u.is_admin != 1).map(u => (
                        <div key={'list1_' + u.id} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-gray-50 transition-colors">
                          <div className="flex items-center gap-3">
                            <div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center text-gray-500 font-bold overflow-hidden shrink-0">
                              {u.avatarUrl ? <img src={u.avatarUrl} className="w-full h-full object-cover" /> : <User size={20} />}
                            </div>
                            <div>
                              <div className="font-semibold text-[15px] flex items-center gap-2">
                                {u.name}
                                {u.is_banned == 1 && <span className="bg-red-100 text-red-700 text-[10px] px-2 py-0.5 rounded-full font-bold">BANNED</span>}
                              </div>
                              <div className="text-[13px] text-gray-500 font-mono">ID: {u.userId}</div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {adminSubTab === 'actions' && (
                  <div className="bg-white rounded-2xl shadow-sm overflow-hidden border border-gray-100">
                    <div className="p-4 bg-gray-50 border-b border-gray-100 font-semibold text-gray-700">
                      <span>Chức năng (Ban / Mở khóa)</span>
                    </div>
                    <div className="divide-y divide-gray-100">
                      {loadingAdmin ? (
                        <div className="p-8 text-center text-gray-400">Đang tải...</div>
                      ) : adminUsers.filter(u => u.is_admin != 1).map(u => (
                        <div key={'list2_' + u.id} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-gray-50 transition-colors">
                          <div className="flex items-center gap-3">
                            <div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center text-gray-500 font-bold overflow-hidden shrink-0">
                              {u.avatarUrl ? <img src={u.avatarUrl} className="w-full h-full object-cover" /> : <User size={20} />}
                            </div>
                            <div>
                              <div className="font-semibold text-[15px] flex items-center gap-2">
                                {u.name}
                              </div>
                              <div className="text-[13px] text-gray-500 font-mono">ID: {u.userId}</div>
                            </div>
                          </div>
                          <div className="flex items-center gap-2 shrink-0 mt-3 sm:mt-0">
                            <button onClick={() => handleBanUser(u.userId, u.is_banned)} className={`px-4 py-2 rounded-full text-[14px] font-medium flex items-center gap-1.5 transition-colors ${u.is_banned == 1 ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-orange-100 text-orange-700 hover:bg-orange-200'}`}>
                              <Ban size={16} /> {u.is_banned == 1 ? 'Mở khóa' : 'Khóa'}
                            </button>
                            <button onClick={() => handleDeleteUser(u.userId)} className="px-4 py-2 rounded-full text-[14px] font-medium flex items-center gap-1.5 transition-colors bg-red-100 text-red-700 hover:bg-red-200">
                              <Trash2 size={16} /> Xóa
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {adminSubTab === 'banned' && (
                  <div className="bg-white rounded-2xl shadow-sm overflow-hidden border border-red-100">
                    <div className="p-4 bg-red-50 border-b border-red-100 font-semibold text-red-700">
                      <span>Người dùng hiện bị ban ({adminUsers.filter(u => u.is_admin != 1 && u.is_banned == 1).length})</span>
                    </div>
                    <div className="divide-y divide-gray-100">
                      {adminUsers.filter(u => u.is_admin != 1 && u.is_banned == 1).length === 0 ? (
                        <div className="p-8 text-center text-gray-400">Không có người dùng nào bị khóa</div>
                      ) : adminUsers.filter(u => u.is_admin != 1 && u.is_banned == 1).map(u => (
                        <div key={'list3_' + u.id} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-red-50/50 transition-colors">
                          <div className="flex items-center gap-3">
                            <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center text-red-500 font-bold overflow-hidden shrink-0">
                              <Ban size={20} />
                            </div>
                            <div>
                              <div className="font-semibold text-[15px] text-gray-800">{u.name}</div>
                              <div className="text-[13px] text-gray-500 font-mono">ID: {u.userId}</div>
                            </div>
                          </div>
                          <button onClick={() => handleBanUser(u.userId, 1)} className="px-4 py-2 rounded-full text-[14px] mt-3 sm:mt-0 font-medium flex items-center gap-1.5 transition-colors bg-green-100 text-green-700 hover:bg-green-200">
                            Mở khóa
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        ) : activeTab === 'admin' && !isMobile ? (
          <div className={`flex flex-1 flex-col items-center justify-center bg-vn-paper bg-trong-dong`}>
            <Shield size={64} className="text-vn-red mb-4 opacity-20" />
            <h3 className="font-bold text-gray-700 text-xl mb-2">Bảng điều khiển</h3>
            <p className="text-gray-500 text-sm">Vui lòng chọn một chức năng quản trị ở danh sách bên trái.</p>
          </div>
        ) : !activeChat && !isMobile ? (
          <div className={`flex flex-1 flex-col items-center justify-center bg-vn-paper bg-trong-dong`}>
            <div className="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-sm mb-4">
              <MessageCircle size={40} className="text-vn-bronze" />
            </div>
            <h2 className="text-xl font-bold text-[#A39182]">Chọn một cuộc trò chuyện</h2>
          </div>
        ) : activeChat && (
          <div className="flex-1 flex flex-row h-full min-h-0 min-w-0 relative">
            <div className={`flex-1 flex flex-col relative h-full bg-white ${isMobile && showContactInfo ? 'hidden' : 'flex'}`}>
              {/* Header */}
              <div className="h-[90px] pt-10 md:pt-4 md:h-[70px] px-3 sm:px-4 bg-white/95 backdrop-blur-md flex items-center justify-between border-b border-gray-200 z-10 shrink-0">
                <div className="flex items-center gap-1.5 sm:gap-2 flex-1 min-w-0 pr-2">
                  <button className="md:hidden p-1 -ml-2 text-vn-red shrink-0" onClick={() => setActiveChat(null)}>
                    <ChevronLeft size={32} />
                  </button>
                  <div className="flex items-center gap-2 sm:gap-3 cursor-pointer flex-1 min-w-0" onClick={() => setShowContactInfo(!showContactInfo)}>
                    <div className="w-9 h-9 sm:w-10 sm:h-10 bg-gray-300 rounded-full flex items-center justify-center overflow-hidden shrink-0">
                      {activeChat.avatarUrl ? <img src={activeChat.avatarUrl} className="w-full h-full object-cover" /> : <span className="text-white font-bold">{activeChat.name[0]}</span>}
                    </div>
                    <div className="flex flex-col flex-1 min-w-0">
                      <span className="font-bold text-[15px] sm:text-[17px] leading-tight truncate text-vn-wood">
                        {activeChat.userId === user.userId ? `${getDisplayName(activeChat.userId, activeChat.name)} (Cá nhân)` : getDisplayName(activeChat.userId, activeChat.name)}
                      </span>
                      <span className={`text-[11px] sm:text-[12px] truncate ${getOnlineStatus(activeChat.last_active) === 'Trực tuyến' ? 'text-green-600' : 'text-[#7D6B5D]'}`}>
                        {activeChat.userId === user.userId ? "Gửi cho chính mình" : getOnlineStatus(activeChat.last_active)}
                      </span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-1 sm:gap-2 shrink-0 pr-1 sm:pr-0">
                  <button 
                    onClick={() => {
                      setShowMessageSearch(prev => !prev);
                      setMessageSearchQuery('');
                    }}
                    className={`w-9 h-9 rounded-full flex items-center justify-center transition-colors ${
                      showMessageSearch 
                        ? 'bg-vn-red/10 text-vn-red animate-pulse' 
                        : 'text-[#7D6B5D] hover:bg-vn-paper'
                    }`}
                    title="Tìm kiếm tin nhắn"
                  >
                    <Search size={22} />
                  </button>
                  {activeChat.userId !== user.userId && (
                    <>
                      <button className="w-9 h-9 rounded-full flex items-center justify-center text-vn-red hover:bg-vn-red/5 active:bg-vn-red/10 transition-colors" onClick={() => startCall(false)} title="Gọi thoại"><Phone size={22} /></button>
                      <button className="w-9 h-9 rounded-full flex items-center justify-center text-vn-red hover:bg-vn-red/5 active:bg-vn-red/10 transition-colors" onClick={() => startCall(true)} title="Gọi Video"><Video size={22} /></button>
                    </>
                  )}
                </div>
              </div>

              {/* Message Search Bar */}
              {showMessageSearch && (
                <div className="px-4 py-2 bg-gray-50/90 backdrop-blur border-b border-gray-100 flex items-center gap-2 animate-slide-down shrink-0">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-2.5 text-gray-400" size={16} />
                    <input 
                      type="text" 
                      value={messageSearchQuery}
                      onChange={(e) => setMessageSearchQuery(e.target.value)}
                      placeholder="Tìm từ khóa trong trò chuyện..."
                      className="w-full bg-white h-9 rounded-xl pl-9 pr-8 text-[14px] outline-none border border-gray-200 focus:border-vn-red focus:ring-2 focus:ring-vn-red/10 transition-all shadow-sm"
                      autoFocus
                    />
                    {messageSearchQuery && (
                      <button 
                        onClick={() => setMessageSearchQuery('')}
                        className="absolute right-2.5 top-2.5 text-gray-400 hover:text-gray-600"
                      >
                        <X size={14} />
                      </button>
                    )}
                  </div>
                  <button 
                    onClick={() => {
                      setShowMessageSearch(false);
                      setMessageSearchQuery('');
                    }}
                    className="text-xs font-bold text-vn-wood bg-white hover:bg-gray-100 border border-gray-200 px-3 py-2 rounded-xl shadow-sm transition-all shrink-0"
                  >
                    Đóng
                  </button>
                </div>
              )}

              {/* Messages */}
              <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-vn-paper bg-trong-dong flex flex-col justify-center min-h-0">
                {!isDeviceVerified ? (
                  /* Center lock card if unverified */
                  <div className="max-w-[340px] mx-auto my-auto bg-white/95 backdrop-blur-md rounded-[32px] p-8 text-center shadow-[0_10px_40px_rgba(0,0,0,0.06)] border border-gray-100 flex flex-col items-center gap-4 animate-scale-in">
                    <div className="w-16 h-16 bg-vn-red/10 rounded-full flex items-center justify-center text-vn-red animate-bounce">
                      <Lock size={32} />
                    </div>
                    <h3 className="font-extrabold text-[18px] text-vn-wood">Thiết bị chưa xác minh</h3>
                    <p className="text-[#7D6B5D] text-[14px] leading-relaxed">
                      Bạn đang đăng nhập trên thiết bị mới. Vui lòng nhập mã PIN để giải mã lịch sử trò chuyện cũ và tiếp tục gửi/nhận tin nhắn mới.
                    </p>
                    <button 
                      onClick={() => {
                        setPendingLoginUser({ ...user, tmpPubKey: localStorage.getItem(`pubKey_${user.userId}`) });
                        setShowRecoveryInput(true);
                      }}
                      className="w-full bg-vn-red text-white py-3.5 rounded-2xl font-bold hover:bg-vn-red/90 transition-all active:scale-95 shadow-md shadow-vn-red/10 mt-2 text-[15px]"
                    >
                      Nhập mã PIN xác minh
                    </button>
                  </div>
                ) : (
                  /* Standard message stream */
                  <div className="flex-1 w-full space-y-4">
                    {activeChat.userId === user.userId && (
                      <div className="max-w-[320px] mx-auto mt-4 mb-8 bg-[#e8f0fe] rounded-3xl p-6 text-center shadow-[0_2px_10px_rgb(0,0,0,0.05)] border border-[#d2e3fc]">
                        <div className="w-14 h-14 bg-white rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm text-vn-red">
                          <FileText size={32} />
                        </div>
                        <p className="text-[#1a1a1a] text-[15px] leading-relaxed">Đây là không gian cá nhân của bạn. Nhắn tin cho chính mình, gửi công việc, tệp tin và liên kết. Mọi thứ được lưu trữ cục bộ trên thiết bị của bạn.</p>
                      </div>
                    )}
                    {(messageSearchQuery.trim()
                      ? messages.filter(m => m.content && m.content.toLowerCase().includes(messageSearchQuery.trim().toLowerCase()))
                      : messages
                    ).map(msg => {
                      const isMe = msg.senderId === user.userId;

                      // Hiển thị tin nhắn hệ thống (Lịch sử cuộc gọi)
                      if (msg.type === 'call_history') {
                        const isMissed = msg.content === 'Cuộc gọi nhỡ';
                        return (
                          <div key={msg.id} className="flex justify-center my-2">
                            <div className={`px-4 py-1.5 rounded-full text-[13px] flex items-center gap-2 shadow-sm ${isMissed ? 'bg-red-50 text-red-600 border border-red-100' : 'bg-vn-paper text-vn-wood border border-[#E8E2D2]'}`}>
                              <Phone size={14} className={isMissed ? 'rotate-[135deg]' : ''} />
                              {msg.content}
                            </div>
                          </div>
                        );
                      }

                      // Hiển thị tin nhắn bị chặn (system_block)
                      if (msg.type === 'system_block') {
                        return (
                          <div key={msg.id} className="flex justify-center my-3 animate-bounce">
                            <div className="px-4 py-2 rounded-2xl text-[13px] bg-red-50 text-red-600 border border-red-100 flex items-center gap-2 shadow-sm font-semibold max-w-[90%] text-center leading-normal">
                              <span className="shrink-0 text-[15px]">⚠️</span>
                              {msg.content}
                            </div>
                          </div>
                        );
                      }

                      const isGrp = activeChat.is_group === true || activeChat.userId.startsWith('group_');
                      let senderName = '';
                      if (isGrp && !isMe) {
                        const member = activeChat.members?.find(m => m.userId === msg.senderId);
                        senderName = member ? member.name : msg.senderId;
                      }

                      return (
                        <div key={msg.id} className={`flex ${isMe ? 'justify-end' : 'justify-start'} relative group transition-all duration-300 ease-out origin-center ${deletingMsgIds.includes(msg.id) ? 'opacity-0 scale-50 max-h-0 overflow-hidden mb-0' : 'opacity-100 scale-100 max-h-[1000px] mb-2'}`} onContextMenu={(e) => handleRightClick(e, msg)}>
                          {/* Nút ghim bên trái nếu là tin của người khác */}
                          {!isMe && (
                            <div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity pr-2">
                              <button
                                onClick={(e) => {
                                  e.stopPropagation();
                                  setContextMenu({ x: 0, y: 0, msg });
                                  togglePinMessage();
                                }}
                                className="p-1.5 bg-white rounded-full shadow-sm hover:bg-gray-100 transition-colors"
                              >
                                {pinnedMessages[`${user.userId}_${activeChat.userId}_${msg.id}`] ?
                                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-vn-red"><path d="M17,4V7L15,9V17L10,21V9L8,7V4H17M3.9,12H7.9L10.9,14.1V16L8,18.1V20.1L3.9,17V12Z" /></svg>
                                  : <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-gray-500"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                                }
                              </button>
                            </div>
                          )}

                          <div className={`max-w-[85%] md:max-w-[80%] rounded-2xl break-words ${isMe ? 'bg-transparent' : 'bg-transparent'}`}>
                            {senderName && (
                              <div className="text-[12px] text-[#A39182] font-semibold mb-0.5 ml-1">
                                {senderName}
                              </div>
                            )}
                            {msg.type === 'image' && <img src={msg.fileUrl} alt="Ảnh" className="max-w-full max-h-[500px] object-contain rounded-2xl block cursor-pointer hover:opacity-95 transition-opacity shadow-lg" onClick={() => setViewingImage(msg.fileUrl)} />}
                            {msg.type === 'video' && <video src={msg.fileUrl} controls className="max-w-full max-h-[500px] rounded-2xl block" />}
                            {msg.type === 'audio' && <audio src={msg.fileUrl} controls className="h-8 w-48" />}
                            {(msg.type === 'text' || !msg.type) && (
                              <div className="flex items-center gap-2">
                                {isMe && msg.status === 'failed' && (
                                  <div className="w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center font-black text-[12px] shadow-sm select-none shrink-0 animate-pulse" title="Tin nhắn chưa được gửi đi do bị chặn.">
                                    !
                                  </div>
                                )}
                                <div className={`px-3 sm:px-4 py-2 text-[15px] sm:text-[16px] shadow-[0_1px_2px_rgb(0,0,0,0.1)] ${isMe ? 'bg-vn-red text-white rounded-br-sm rounded-2xl' : 'bg-white text-vn-wood rounded-bl-sm border border-[#E8E2D2] rounded-2xl'} ${msg.status === 'failed' ? 'border-2 border-red-500/50 opacity-90' : ''}`}>
                                  <span className="leading-snug">{renderMessageContent(msg.content, isMe)}</span>
                                  <div className={`text-[10px] mt-1 text-right ${isMe ? 'text-white/70' : 'text-[#A39182]'}`}>{formatTime(msg.timestamp)}</div>
                                </div>
                              </div>
                            )}
                          </div>

                          {/* Nút ghim bên phải nếu là tin của mình */}
                          {isMe && (
                            <div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity pl-2">
                              <button
                                onClick={(e) => {
                                  e.stopPropagation();
                                  setContextMenu({ x: 0, y: 0, msg });
                                  togglePinMessage();
                                }}
                                className="p-1.5 bg-white rounded-full shadow-sm hover:bg-gray-100 transition-colors"
                              >
                                {pinnedMessages[`${user.userId}_${activeChat.userId}_${msg.id}`] ?
                                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-vn-red"><path d="M17,4V7L15,9V17L10,21V9L8,7V4H17M3.9,12H7.9L10.9,14.1V16L8,18.1V20.1L3.9,17V12Z" /></svg>
                                  : <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-gray-500"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                                }
                              </button>
                            </div>
                          )}
                        </div>
                      );
                    })}
                    <div ref={scrollRef} />
                  </div>
                )}
              </div>

              {/* Input */}
              <div className="p-3 bg-vn-paper bg-trong-dong border-t border-gray-200 shrink-0 pb-safe flex flex-col">
                {!isDeviceVerified ? (
                  /* Locked Input Area */
                  <div 
                    onClick={() => {
                      setPendingLoginUser({ ...user, tmpPubKey: localStorage.getItem(`pubKey_${user.userId}`) });
                      setShowRecoveryInput(true);
                    }}
                    className="max-w-4xl mx-auto w-full bg-white/80 backdrop-blur-sm border border-red-200/50 rounded-2xl p-4 flex items-center justify-between cursor-pointer hover:bg-white transition-all shadow-sm group active:scale-[0.99]"
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-vn-red/10 rounded-full flex items-center justify-center text-vn-red shrink-0 group-hover:animate-bounce">
                        <Lock size={20} />
                      </div>
                      <div className="flex flex-col">
                        <span className="font-extrabold text-[14.5px] text-vn-wood">Trò chuyện đang bị khóa</span>
                        <span className="text-[12.5px] text-[#7D6B5D]">Vui lòng nhập mã PIN bảo mật để gửi/nhận tin nhắn.</span>
                      </div>
                    </div>
                    <button className="px-4 py-2 bg-vn-red text-white text-[12.5px] font-bold rounded-xl shadow-sm hover:bg-vn-red/90 transition-all active:scale-95 shrink-0">
                      Mở khóa
                    </button>
                  </div>
                ) : (
                  /* Standard Input Area */
                  <>
                    <div className="max-w-4xl mx-auto mb-2 flex gap-3 overflow-x-auto w-full px-2 py-1 scrollbar-hide">
                      {['👍', '❤️', '😂', '🔥', '🎉', '💩', '😢', '😍', '👏', '🤝', '🇻🇳'].map(emoji => (
                        <button key={emoji} onClick={() => setMessageInput(prev => prev + emoji)} className="text-[22px] hover:scale-125 transition-transform shrink-0">
                          {emoji}
                        </button>
                      ))}
                    </div>
                    <div className="flex items-center gap-2 max-w-4xl mx-auto w-full">
                      <button onClick={() => fileInputRef.current.click()} className="p-2 text-vn-red shrink-0"><Plus size={24} className="sm:w-7 sm:h-7" /></button>
                      <input type="file" ref={fileInputRef} className="hidden" accept="image/*,video/*" onChange={handleFileUpload} />
                      <div className="flex-1 bg-white border border-gray-300 rounded-full flex items-center px-3 sm:px-4 py-1.5 min-h-[40px]">
                        <input type="text" placeholder="Tin nhắn" className="flex-1 w-full bg-transparent outline-none text-[15px] sm:text-[16px]" value={messageInput} onChange={(e) => setMessageInput(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && sendMessage()} onPaste={handlePaste} />
                      </div>
                      {messageInput.trim() ? (
                        <button onClick={sendMessage} className="w-9 h-9 bg-vn-red rounded-full text-white flex items-center justify-center shrink-0 shadow-sm"><Send size={18} className="ml-0.5" /></button>
                      ) : (
                        <button onMouseDown={startVoiceRecording} onMouseUp={stopVoiceRecording} className={`w-9 h-9 flex items-center justify-center rounded-full shrink-0 ${isRecording ? 'bg-red-500 text-white animate-pulse' : 'text-vn-red bg-transparent'}`}>
                          <Mic size={24} />
                        </button>
                      )}
                    </div>
                  </>
                )}
              </div>
            </div>
            {showContactInfo && renderContactInfo()}
          </div>
        )}
      </div>

      {/* CONTEXT MENU (Menu chuột phải) */}
      {contextMenu && (
        <div
          className="fixed z-[10000] bg-white rounded-2xl shadow-2xl py-2 px-1 min-w-[180px] border border-gray-100 overflow-hidden"
          style={{ left: contextMenu.x, top: contextMenu.y }}
        >
          {/* Nút xem trước */}
          {(contextMenu.msg.type === 'image' || contextMenu.msg.type === 'video') && (
            <button
              onClick={() => {
                if (contextMenu.msg.type === 'image') setViewingImage(contextMenu.msg.fileUrl);
                setContextMenu(null);
              }}
              className="w-full px-4 py-2.5 text-left flex items-center gap-2 hover:bg-gray-100 transition-colors text-[15px]"
            >
              <Eye size={16} className="text-gray-600" />
              Xem trước
            </button>
          )}
          {/* Nút ghim tin nhắn */}
          <button
            onClick={togglePinMessage}
            className="w-full px-4 py-2.5 text-left flex items-center gap-2 hover:bg-gray-100 transition-colors text-[15px]"
          >
            {pinnedMessages[`${user.userId}_${activeChat.userId}_${contextMenu.msg.id}`] ?
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="text-vn-red"><path d="M17,4V7L15,9V17L10,21V9L8,7V4H17M3.9,12H7.9L10.9,14.1V16L8,18.1V20.1L3.9,17V12Z" /></svg>
              : <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-gray-600"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            }
            {pinnedMessages[`${user.userId}_${activeChat.userId}_${contextMenu.msg.id}`] ? 'Bỏ ghim' : 'Ghim tin nhắn'}
          </button>
          {/* Nút xóa tin nhắn 2 chiều (chỉ hiện nếu là tin của mình) */}
          {contextMenu.msg.senderId === user.userId && (
            <button
              onClick={handleDeleteMessageFromMenu}
              className="w-full px-4 py-2.5 text-left flex items-center gap-2 hover:bg-red-50 transition-colors text-[15px] text-red-500 border-t border-gray-100"
            >
              <Trash2 size={16} />
              Xóa tin nhắn (2 chiều)
            </button>
          )}
        </div>
      )}

      {/* CONTEXT MENU DANH SÁCH (Menu chuột phải trên PC) */}
      {listContextMenu && (
        <div
          className="fixed z-[10000] bg-white rounded-2xl shadow-2xl py-2 px-1 min-w-[200px] border border-gray-100 overflow-hidden"
          style={{ left: listContextMenu.x, top: listContextMenu.y }}
        >
          <button
            onClick={toggleMarkUnread}
            className="w-full px-4 py-2.5 text-left flex items-center gap-3 hover:bg-gray-100 transition-colors text-[15px] font-medium"
          >
            <div className="w-5 h-5 flex items-center justify-center">
              <MessageCircle size={18} className="text-gray-600" />
            </div>
            {listContextMenu.friend.is_unread_db == 1 || unreadMessages[listContextMenu.friend.userId] > 0 ? 'Đánh dấu là đã đọc' : 'Đánh dấu là chưa đọc'}
          </button>
          <button
            onClick={(e) => { togglePinFriend(e, listContextMenu.friend.userId); setListContextMenu(null); }}
            className="w-full px-4 py-2.5 text-left flex items-center gap-3 hover:bg-gray-100 transition-colors text-[15px] font-medium"
          >
            <div className="w-5 h-5 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-gray-600"><path d="M12 2v8m-3 0h6m-3 0v10" /></svg>
            </div>
            {pinnedFriends.includes(listContextMenu.friend.userId) ? 'Bỏ ghim cuộc trò chuyện' : 'Ghim cuộc trò chuyện'}
          </button>
          <button
            onClick={() => {
              const targetFriend = listContextMenu.friend;
              setListContextMenu(null);
              setHiddenPinTargetChat(targetFriend);
              if (hiddenChatsPin && hiddenChatsPin.length > 0) {
                setHiddenPinModalMode('enter_to_hide');
              } else {
                setHiddenPinModalMode('setup');
              }
              setHiddenPinInputVal('');
              setHiddenPinError('');
              setShowHiddenPinModal(true);
            }}
            className="w-full px-4 py-2.5 text-left flex items-center gap-3 hover:bg-red-50 text-red-600 transition-colors text-[15px] font-bold border-t border-gray-100"
          >
            <div className="w-5 h-5 flex items-center justify-center">
              <Lock size={18} className="text-red-500" />
            </div>
            Ẩn cuộc trò chuyện
          </button>
        </div>
      )}

      {/* MODAL XEM ẢNH FULLSCREEN */}
      {viewingImage && (
        <div
          className="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center cursor-zoom-out"
          onClick={() => setViewingImage(null)}
          onKeyDown={(e) => e.key === 'Escape' && setViewingImage(null)}
        >
          <button
            className="absolute top-6 right-6 w-10 h-10 bg-white/20 hover:bg-white/30 backdrop-blur-md rounded-full flex items-center justify-center text-white transition-colors z-10"
            onClick={(e) => { e.stopPropagation(); setViewingImage(null); }}
          >
            <X size={24} />
          </button>
          <img
            src={viewingImage}
            alt="Xem ảnh"
            className="max-h-[90vh] max-w-[95vw] object-contain rounded-lg shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          />
        </div>
      )}

      {/* DIALPAD MODAL */}
      {showDialpad && (
        <div className="fixed inset-0 bg-white z-[90] flex flex-col pt-12 animate-slide-up">
          <button onClick={() => { setShowDialpad(false); setDialNumber(''); }} className="absolute top-4 left-4 w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-vn-wood">
            <ChevronLeft size={24} />
          </button>
          <div className="flex-1 flex flex-col items-center px-6">
            <div className="text-center mt-8 mb-6 h-20 flex flex-col items-center justify-end">
              <p className="text-gray-500 text-[15px] mb-1 flex items-center gap-2 select-none">
                Nhập số Lutos <Info size={14} />
                <button
                  onClick={handlePasteToDialpad}
                  className="text-[12px] bg-vn-red/10 hover:bg-vn-red/20 active:scale-95 text-vn-red px-2 py-0.5 rounded-full font-bold transition-all cursor-pointer"
                  title="Dán từ bộ nhớ tạm"
                >
                  Dán
                </button>
              </p>
              <h2
                onClick={handlePasteToDialpad}
                onTouchStart={handleTouchStart}
                onTouchEnd={handleTouchEnd}
                className={`text-4xl font-semibold tracking-wider cursor-pointer hover:opacity-80 transition-opacity select-none ${dialNumber ? 'text-black' : 'text-gray-300'}`}
                title="Bấm hoặc chạm giữ để dán số"
              >
                {dialNumber || '000-00000'}
              </h2>
            </div>

            <div className="grid grid-cols-3 gap-x-8 gap-y-4 w-full max-w-[280px] mb-10">
              {[
                { num: '1', letters: '' }, { num: '2', letters: 'ABC' }, { num: '3', letters: 'DEF' },
                { num: '4', letters: 'GHI' }, { num: '5', letters: 'JKL' }, { num: '6', letters: 'MNO' },
                { num: '7', letters: 'PQRS' }, { num: '8', letters: 'TUV' }, { num: '9', letters: 'WXYZ' },
                { num: '*', letters: '' }, { num: '0', letters: '+' }, { num: '#', letters: '' }
              ].map(key => (
                <button
                  key={key.num}
                  onClick={() => {
                    if (dialNumber.replace('-', '').length < 8) { // 3 digits + 5 digits = 8 digits maximum
                      let newNum = dialNumber.replace('-', '') + key.num;
                      if (newNum.length > 3) newNum = newNum.slice(0, 3) + '-' + newNum.slice(3);
                      setDialNumber(newNum);
                    }
                  }}
                  className="w-[72px] h-[72px] rounded-full bg-[#F2F4F7] flex flex-col items-center justify-center active:bg-gray-300 transition-colors mx-auto"
                >
                  <span className="text-3xl font-normal leading-none">{key.num}</span>
                  {key.letters && <span className="text-[10px] font-bold tracking-widest text-gray-500 mt-1">{key.letters}</span>}
                </button>
              ))}
            </div>

            <div className="w-full max-w-[280px] flex justify-center relative">
              <button
                onClick={async () => {
                  if (!dialNumber) return;
                  const cleanId = dialNumber.replace('-', '');
                  try {
                    const res = await axios.get(`${API_BASE}?action=get_user&userId=${cleanId}&requesterId=${user.userId}&t=${Date.now()}`);
                    if (res.data && res.data.userId) {
                      const friend = res.data;
                      const savedFriends = JSON.parse(localStorage.getItem(`friends_${user.userId}`) || '[]');
                      if (!savedFriends.find(f => f.userId === friend.userId)) {
                        const updatedFriends = [...savedFriends, friend];
                        setFriends(updatedFriends);
                        localStorage.setItem(`friends_${user.userId}`, JSON.stringify(updatedFriends));
                      }
                      setActiveChat(friend);
                      setShowDialpad(false);
                      setTimeout(() => {
                        startCall(false); // Gọi thoại ngay lập tức
                      }, 500);
                    } else {
                      alert('Số không tồn tại!');
                    }
                  } catch (err) { alert('Số không tồn tại!'); }
                }}
                className="w-[72px] h-[72px] rounded-full bg-[#4285F4] text-white flex items-center justify-center shadow-md active:bg-blue-600 transition-colors"
              >
                <Phone size={32} className="fill-current" />
              </button>

              {dialNumber && (
                <button
                  onClick={() => {
                    let raw = dialNumber.replace('-', '');
                    raw = raw.slice(0, -1);
                    if (raw.length > 3) setDialNumber(raw.slice(0, 3) + '-' + raw.slice(3));
                    else setDialNumber(raw);
                  }}
                  className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 active:text-gray-600 p-2"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path><line x1="18" y1="9" x2="12" y2="15"></line><line x1="12" y1="9" x2="18" y2="15"></line></svg>
                </button>
              )}
            </div>
          </div>
        </div>
      )}

      {/* NEW CHAT MODAL (NÚT +) */}
      {showNewChatModal && (
        <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center bg-black/40" onClick={() => setShowNewChatModal(false)}>
          <div className="w-full sm:w-[400px] bg-[#F2F2F6] sm:rounded-[32px] rounded-t-[32px] overflow-hidden shadow-2xl relative animate-slide-up" onClick={e => e.stopPropagation()}>
            <div className="p-4 flex items-center justify-between border-b border-gray-200/60">
              <div className="w-8"></div>
              <h3 className="text-[17px] font-bold text-center flex-1">Trò chuyện mới</h3>
              <button onClick={() => setShowNewChatModal(false)} className="w-8 h-8 bg-[#E5E5EA] rounded-full flex items-center justify-center text-gray-500">
                <X size={18} strokeWidth={2.5} />
              </button>
            </div>

            <div className="p-4 bg-[#F2F2F6]">
              <div className="bg-white rounded-[20px] p-4 flex gap-3 shadow-sm mb-4">
                <div className="w-6 h-6 bg-[#2B394A] rounded-full flex items-center justify-center text-white shrink-0 mt-0.5">
                  <span className="text-[12px] font-bold">!</span>
                </div>
                <div>
                  <h4 className="font-semibold text-[15px] mb-1">Truy cập danh bạ thiết bị</h4>
                  <p className="text-[13px] text-gray-500 leading-tight">Cho phép Lutos sao chép liên hệ từ thiết bị của bạn vào đây. Hoặc bạn có thể thêm liên hệ Lutos nội bộ bằng tay. <span className="text-blue-500">Kích hoạt quyền truy cập</span></p>
                </div>
                <button className="text-gray-400 self-start"><X size={16} /></button>
              </div>

              <div className="bg-white rounded-[20px] overflow-hidden shadow-sm">
                <button onClick={() => alert('Tính năng Cuộc gọi Nhóm đang được phát triển!')} className="w-full flex items-center gap-4 px-4 py-3.5 border-b border-gray-100 active:bg-gray-50">
                  <Phone className="text-[#2B394A]" size={22} />
                  <span className="text-[16px]">Cuộc gọi Nhóm Mới</span>
                </button>
                <button onClick={() => { setShowNewChatModal(false); setShowCreateGroupModal(true); setGroupNameInput(''); setSelectedGroupMembers([]); }} className="w-full flex items-center gap-4 px-4 py-3.5 border-b border-gray-100 active:bg-gray-50">
                  <Users className="text-[#2B394A]" size={22} />
                  <span className="text-[16px]">Tạo Nhóm</span>
                </button>
                <button onClick={() => { setShowNewChatModal(false); setActiveTab('contacts'); }} className="w-full flex items-center gap-4 px-4 py-3.5 active:bg-gray-50">
                  <UserPlus className="text-[#2B394A]" size={22} />
                  <span className="text-[16px]">Thêm Liên hệ</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      {/* CREATE GROUP MODAL */}
      {showCreateGroupModal && (
        <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center bg-black/40" onClick={() => setShowCreateGroupModal(false)}>
          <div className="w-full sm:w-[450px] bg-[#F2F2F6] sm:rounded-[32px] rounded-t-[32px] overflow-hidden shadow-2xl relative animate-slide-up" onClick={e => e.stopPropagation()}>
            {/* Header */}
            <div className="p-4 flex items-center justify-between border-b border-gray-200/60 bg-white">
              <button onClick={() => { setShowCreateGroupModal(false); setShowNewChatModal(true); }} className="text-vn-red font-medium text-[16px]">Quay lại</button>
              <h3 className="text-[17px] font-bold text-center flex-1">Tạo Nhóm Mới</h3>
              <button onClick={() => setShowCreateGroupModal(false)} className="w-8 h-8 bg-[#E5E5EA] rounded-full flex items-center justify-center text-gray-500">
                <X size={18} strokeWidth={2.5} />
              </button>
            </div>

            {/* Body */}
            <div className="p-4 flex flex-col gap-4 max-h-[80vh] overflow-y-auto">
              {/* Group Name input */}
              <div className="bg-white rounded-[20px] p-4 shadow-sm">
                <label className="block text-[13px] font-bold text-gray-400 uppercase tracking-wider mb-2">Tên nhóm</label>
                <div className="bg-gray-50 rounded-xl px-4 py-2.5 border border-gray-100">
                  <input
                    type="text"
                    placeholder="Nhập tên nhóm trò chuyện..."
                    className="w-full bg-transparent outline-none text-[16px] text-vn-wood"
                    value={groupNameInput}
                    onChange={(e) => setGroupNameInput(e.target.value)}
                  />
                </div>
              </div>

              {/* Member Selection list */}
              <div className="bg-white rounded-[20px] p-4 shadow-sm flex flex-col min-h-[250px]">
                <label className="block text-[13px] font-bold text-gray-400 uppercase tracking-wider mb-2">
                  Chọn thành viên (Tối thiểu 2 người khác)
                </label>

                {friends.length === 0 ? (
                  <div className="flex-1 flex flex-col items-center justify-center text-center p-8 text-gray-400">
                    <Users size={40} className="mb-2 opacity-30" />
                    <span className="text-[14px]">Bạn chưa kết nối với bạn bè nào để tạo nhóm.</span>
                  </div>
                ) : (
                  <div className="flex-1 divide-y divide-gray-100 overflow-y-auto max-h-[200px] pr-1">
                    {friends.map(friend => {
                      const isSelected = selectedGroupMembers.includes(friend.userId);
                      return (
                        <div
                          key={'sel_' + friend.userId}
                          onClick={() => {
                            setSelectedGroupMembers(prev =>
                              isSelected ? prev.filter(id => id !== friend.userId) : [...prev, friend.userId]
                            );
                          }}
                          className="flex items-center justify-between py-2.5 cursor-pointer hover:bg-gray-50 px-1 rounded-lg transition-colors"
                        >
                          <div className="flex items-center gap-3">
                            <div className="w-10 h-10 bg-gray-200 rounded-full overflow-hidden flex items-center justify-center shrink-0">
                              {friend.avatarUrl ? <img src={friend.avatarUrl} className="w-full h-full object-cover" /> : <span className="text-gray-500 font-bold">{friend.name[0]}</span>}
                            </div>
                            <div>
                              <div className="font-semibold text-[15px] text-vn-wood">{friend.name}</div>
                              <div className="text-[12px] text-gray-400">{friend.userId}</div>
                            </div>
                          </div>
                          <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all ${isSelected ? 'bg-vn-red border-vn-red text-white' : 'border-gray-300'}`}>
                            {isSelected && <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>

              {/* Requirements & Submit button */}
              <div className="bg-white rounded-[20px] p-4 shadow-sm flex flex-col items-center gap-3">
                <div className="text-center text-[13px] text-gray-500 font-medium">
                  {selectedGroupMembers.length < 2 ? (
                    <span className="text-orange-500">⚠️ Bạn cần chọn thêm ít nhất {2 - selectedGroupMembers.length} thành viên để tạo nhóm (Nhóm yêu cầu ít nhất 3 người).</span>
                  ) : (
                    <span className="text-green-600 font-semibold">🎉 Đủ điều kiện! Tổng số thành viên: {selectedGroupMembers.length + 1} người (bao gồm bạn).</span>
                  )}
                </div>

                <button
                  disabled={isCreatingGroup || !groupNameInput.trim() || selectedGroupMembers.length < 2}
                  onClick={async () => {
                    setIsCreatingGroup(true);
                    try {
                      const res = await axios.post(`${API_BASE}?action=create_group`, {
                        groupName: groupNameInput,
                        creatorId: user.userId,
                        memberIds: selectedGroupMembers
                      });
                      if (res.data && res.data.success) {
                        showToast('Thành công', `Đã tạo nhóm "${groupNameInput}" thành công!`);
                        setShowCreateGroupModal(false);
                        fetchGroups();
                        // Tự động mở chat của nhóm mới tạo!
                        setActiveChat(res.data.group);
                      }
                    } catch (e) {
                      showToast('Lỗi', e.response?.data?.error || 'Không thể tạo nhóm');
                    } finally {
                      setIsCreatingGroup(false);
                    }
                  }}
                  className={`w-full py-3.5 rounded-[16px] text-white font-bold text-[16px] shadow-sm flex items-center justify-center gap-2 transition-all ${(!groupNameInput.trim() || selectedGroupMembers.length < 2) ? 'bg-gray-300 cursor-not-allowed shadow-none' : 'bg-vn-red hover:bg-vn-red/90 active:scale-[0.98]'}`}
                >
                  {isCreatingGroup ? (
                    <>
                      <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                      <span>Đang tạo nhóm...</span>
                    </>
                  ) : (
                    <span>Tạo Nhóm Trò Chuyện</span>
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* EDIT PROFILE MODAL */}
      {showEditProfileModal && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/55 backdrop-blur-md px-4">
          <div className="bg-white rounded-[28px] p-6 w-full max-w-md shadow-2xl animate-scale-in border border-gray-100">
            <h3 className="text-xl font-bold mb-4 text-center text-vn-wood">Chỉnh sửa hồ sơ</h3>
            
            <div className="space-y-4">
              {/* Avatar Selector */}
              <div className="flex flex-col items-center">
                <div 
                  onClick={() => editAvatarInputRef.current?.click()}
                  className="w-24 h-24 bg-gray-100 border-4 border-vn-paper rounded-full flex items-center justify-center text-vn-wood font-bold text-2xl overflow-hidden cursor-pointer shadow-md hover:scale-105 active:scale-95 transition-all relative group"
                >
                  {editAvatarUrl ? <img src={editAvatarUrl} className="w-full h-full object-cover" /> : <User size={48} className="text-[#A39182]" />}
                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center text-white transition-opacity">
                    <Camera size={22} />
                  </div>
                </div>
                <button 
                  onClick={() => editAvatarInputRef.current?.click()}
                  className="mt-2 text-xs font-semibold text-vn-red hover:underline"
                >
                  Thay đổi ảnh đại diện
                </button>
                <input 
                  type="file" 
                  ref={editAvatarInputRef} 
                  className="hidden" 
                  accept="image/*" 
                  onChange={handleEditAvatarChange} 
                />
              </div>

              {/* Display Name Input */}
              <div>
                <label className="block text-[13.5px] font-bold text-vn-wood mb-1.5">Tên hiển thị</label>
                <input 
                  type="text" 
                  value={editName}
                  onChange={(e) => setEditName(e.target.value)}
                  placeholder="Tên của bạn..."
                  className="w-full bg-white/60 focus:bg-white text-vn-wood px-4 py-3 rounded-2xl outline-none border border-gray-200 focus:border-vn-red focus:ring-4 focus:ring-vn-red/10 transition-all text-[15px] shadow-sm"
                />
              </div>

              {/* Bio/Biography Input */}
              <div>
                <label className="block text-[13.5px] font-bold text-vn-wood mb-1.5">Tiểu sử</label>
                <textarea 
                  rows="3"
                  value={editBio}
                  onChange={(e) => setEditBio(e.target.value)}
                  placeholder="Viết vài dòng giới thiệu về bản thân..."
                  className="w-full bg-white/60 focus:bg-white text-vn-wood px-4 py-3 rounded-2xl outline-none border border-gray-200 focus:border-vn-red focus:ring-4 focus:ring-vn-red/10 transition-all text-[15px] shadow-sm resize-none leading-relaxed"
                />
              </div>
            </div>

            {/* Actions */}
            <div className="flex gap-3 mt-6">
              <button
                disabled={isSavingProfile}
                onClick={() => setShowEditProfileModal(false)}
                className="flex-1 py-3 bg-gray-100 hover:bg-gray-200 text-vn-wood font-bold rounded-2xl transition-colors active:scale-95 text-[15px]"
              >
                Hủy
              </button>
              <button
                disabled={isSavingProfile}
                onClick={handleSaveProfile}
                className="flex-1 py-3 bg-vn-red hover:bg-vn-red/90 text-white font-bold rounded-2xl shadow-sm hover:shadow-md transition-all active:scale-95 text-[15px] flex items-center justify-center gap-2"
              >
                {isSavingProfile ? (
                  <>
                    <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                    <span>Đang lưu...</span>
                  </>
                ) : (
                  <span>Lưu thay đổi</span>
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* CHANGE PASSWORD MODAL */}
      {showChangePasswordModal && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/55 backdrop-blur-md px-4 animate-fade-in">
          <div className="bg-white rounded-[28px] p-6 w-full max-w-md shadow-2xl animate-scale-in border border-gray-100">
            <h3 className="text-xl font-bold mb-4 text-center text-vn-wood">Đổi mật khẩu tài khoản</h3>
            
            <p className="text-xs text-[#7D6B5D] text-center mb-5 leading-relaxed bg-vn-paper p-3 rounded-xl border border-gray-100">
              Mật khẩu này dùng để đăng nhập vào tài khoản Lutos của bạn ở các thiết bị mới. Vui lòng ghi nhớ kỹ!
            </p>

            <div className="space-y-4">
              {/* Current Password */}
              <div>
                <label className="block text-[13.5px] font-bold text-vn-wood mb-1.5">Mật khẩu hiện tại</label>
                <input 
                  type="password" 
                  value={currentPassword}
                  onChange={(e) => { setCurrentPassword(e.target.value); setChangePasswordError(''); }}
                  placeholder="Nhập mật khẩu cũ"
                  className="w-full bg-white/60 focus:bg-white text-vn-wood px-4 py-3 rounded-2xl outline-none border border-gray-200 focus:border-vn-red focus:ring-4 focus:ring-vn-red/10 transition-all text-[15px] shadow-sm"
                />
              </div>

              {/* New Password */}
              <div>
                <label className="block text-[13.5px] font-bold text-vn-wood mb-1.5">Mật khẩu mới</label>
                <input 
                  type="password" 
                  value={newPassword}
                  onChange={(e) => { setNewPassword(e.target.value); setChangePasswordError(''); }}
                  placeholder="Nhập ít nhất 8 ký tự..."
                  className="w-full bg-white/60 focus:bg-white text-vn-wood px-4 py-3 rounded-2xl outline-none border border-gray-200 focus:border-vn-red focus:ring-4 focus:ring-vn-red/10 transition-all text-[15px] shadow-sm"
                />
              </div>

              {/* Confirm New Password */}
              <div>
                <label className="block text-[13.5px] font-bold text-vn-wood mb-1.5">Xác nhận mật khẩu mới</label>
                <input 
                  type="password" 
                  value={confirmPassword}
                  onChange={(e) => { setConfirmPassword(e.target.value); setChangePasswordError(''); }}
                  placeholder="Nhập lại mật khẩu mới..."
                  className="w-full bg-white/60 focus:bg-white text-vn-wood px-4 py-3 rounded-2xl outline-none border border-gray-200 focus:border-vn-red focus:ring-4 focus:ring-vn-red/10 transition-all text-[15px] shadow-sm"
                />
              </div>

              {changePasswordError && (
                <div className="text-center text-vn-red text-[13.5px] font-semibold mt-2 animate-bounce">
                  {changePasswordError}
                </div>
              )}
            </div>

            {/* Actions */}
            <div className="flex gap-3 mt-6">
              <button
                disabled={isChangingPassword}
                onClick={() => setShowChangePasswordModal(false)}
                className="flex-1 py-3 bg-gray-100 hover:bg-gray-200 text-vn-wood font-bold rounded-2xl transition-colors active:scale-95 text-[15px]"
              >
                Hủy
              </button>
              <button
                disabled={isChangingPassword}
                onClick={handleChangePassword}
                className="flex-1 py-3 bg-vn-red hover:bg-vn-red/90 text-white font-bold rounded-2xl shadow-sm hover:shadow-md transition-all active:scale-95 text-[15px] flex items-center justify-center gap-2"
              >
                {isChangingPassword ? (
                  <>
                    <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                    <span>Đang cập nhật...</span>
                  </>
                ) : (
                  <span>Cập nhật</span>
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* LOGOUT MODAL */}

      {showLogoutModal && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm px-4">
          <div className="bg-white rounded-[24px] p-6 w-full max-w-md shadow-2xl animate-scale-in">
            <h3 className="text-xl font-bold mb-4 text-center text-vn-wood">Đăng xuất</h3>
            <p className="text-center text-[#7D6B5D] mb-6 leading-relaxed">
              Bạn đang chuẩn bị đăng xuất. Theo cơ chế bảo mật, khóa bảo mật trên thiết bị này sẽ bị xóa nếu bạn chọn <b>Xóa sạch dữ liệu</b>.
              Nếu vậy, lần sau đăng nhập trên máy này bạn sẽ không thể đọc lại tin nhắn cũ. Bạn có muốn giữ lại khóa giải mã không?
            </p>
            <div className="space-y-3">
              <button
                onClick={() => {
                  localStorage.removeItem('chat_user');
                  window.location.reload();
                }}
                className="w-full py-3.5 bg-green-500 hover:bg-green-600 text-white rounded-xl font-bold shadow-sm transition-colors"
              >
                Giữ lại (Khuyên dùng)
              </button>
              <button
                onClick={() => {
                  localStorage.removeItem(`privKey_${user.userId}`);
                  localStorage.removeItem(`pubKey_${user.userId}`);
                  localStorage.removeItem('chat_user');
                  window.location.reload();
                }}
                className="w-full py-3.5 bg-red-50 hover:bg-red-100 text-red-600 rounded-xl font-bold border border-red-100 transition-colors"
              >
                Xóa sạch dữ liệu (Mất tin cũ)
              </button>
              <button
                onClick={() => setShowLogoutModal(false)}
                className="w-full py-3.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-semibold transition-colors"
              >
                Hủy
              </button>
            </div>
          </div>
        </div>
      )}


      {/* MODAL: NHẬP/THIẾT LẬP MÃ PIN CHO TRÒ CHUYỆN ẨN */}
      {showHiddenPinModal && (
        <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/65 backdrop-blur-md px-4 animate-fade-in">
          <div className="bg-white rounded-[32px] p-6 w-full max-w-sm shadow-2xl flex flex-col items-center">
            <div className="w-16 h-16 rounded-full bg-red-50 flex items-center justify-center text-vn-red mb-4 shadow-inner">
              <Lock size={32} className="animate-pulse" />
            </div>
            
            <h3 className="text-xl font-bold text-vn-wood text-center mb-1">
              {hiddenPinModalMode === 'setup' && 'Thiết lập mã PIN ẩn'}
              {hiddenPinModalMode === 'confirm_setup' && 'Xác nhận mã PIN ẩn'}
              {hiddenPinModalMode === 'enter_to_hide' && 'Xác thực mã PIN ẩn'}
              {hiddenPinModalMode === 'enter_to_manage' && 'Xác thực truy cập'}
            </h3>
            
            <p className="text-sm text-[#7D6B5D] text-center mb-6 px-4">
              {hiddenPinModalMode === 'setup' && 'Nhập 4 chữ số để tạo mã PIN bảo vệ các cuộc trò chuyện ẩn của bạn.'}
              {hiddenPinModalMode === 'confirm_setup' && 'Vui lòng nhập lại mã PIN một lần nữa để xác nhận.'}
              {hiddenPinModalMode === 'enter_to_hide' && `Nhập mã PIN ẩn để ẩn cuộc trò chuyện này.`}
              {hiddenPinModalMode === 'enter_to_manage' && 'Nhập mã PIN để truy cập kho lưu trữ cuộc trò chuyện ẩn.'}
            </p>

            {/* Circular indicators */}
            <div className="flex gap-4 mb-6 items-center">
              {[0, 1, 2, 3].map((idx) => (
                <div 
                  key={idx} 
                  className={`w-4 h-4 rounded-full border-2 transition-all duration-150 ${
                    hiddenPinInputVal.length > idx 
                      ? 'bg-vn-red border-vn-red scale-110 shadow-sm' 
                      : 'border-gray-300 bg-transparent'
                  }`}
                />
              ))}
              <button
                onClick={handlePasteToHiddenPinInput}
                className="text-[12px] bg-vn-red/10 hover:bg-vn-red/20 active:scale-95 text-vn-red px-2 py-0.5 rounded-full font-bold transition-all ml-2 cursor-pointer select-none"
                title="Dán từ bộ nhớ tạm"
              >
                Dán
              </button>
            </div>

            {hiddenPinError && (
              <div className="text-vn-red text-sm font-semibold mb-4 text-center animate-bounce">
                {hiddenPinError}
              </div>
            )}

            {/* Numeric Keypad */}
            <div className="grid grid-cols-3 gap-3 w-full max-w-[280px] mb-6">
              {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
                <button
                  key={num}
                  onClick={() => {
                    if (hiddenPinInputVal.length < 4) {
                      const newVal = hiddenPinInputVal + num;
                      setHiddenPinInputVal(newVal);
                      setHiddenPinError('');
                      if (newVal.length === 4) {
                        setTimeout(() => handleHiddenPinSubmit(newVal), 200);
                      }
                    }
                  }}
                  className="h-14 rounded-2xl bg-gray-50 hover:bg-gray-100 text-vn-wood font-extrabold text-[20px] shadow-sm transition-all active:scale-90"
                >
                  {num}
                </button>
              ))}
              <button
                onClick={() => {
                  setHiddenPinInputVal('');
                  setHiddenPinError('');
                }}
                className="h-14 rounded-2xl bg-gray-100/60 hover:bg-gray-100 text-gray-500 font-bold text-[14px] active:scale-90 flex items-center justify-center"
              >
                Xóa
              </button>
              <button
                onClick={() => {
                  if (hiddenPinInputVal.length < 4) {
                    const newVal = hiddenPinInputVal + '0';
                    setHiddenPinInputVal(newVal);
                    setHiddenPinError('');
                    if (newVal.length === 4) {
                      setTimeout(() => handleHiddenPinSubmit(newVal), 200);
                    }
                  }
                }}
                className="h-14 rounded-2xl bg-gray-50 hover:bg-gray-100 text-vn-wood font-extrabold text-[20px] shadow-sm transition-all active:scale-90"
              >
                0
              </button>
              <button
                onClick={() => {
                  if (hiddenPinInputVal.length > 0) {
                    setHiddenPinInputVal(prev => prev.slice(0, -1));
                    setHiddenPinError('');
                  }
                }}
                className="h-14 rounded-2xl bg-gray-100/60 hover:bg-gray-100 text-gray-600 font-bold text-[18px] active:scale-90 flex items-center justify-center"
              >
                ←
              </button>
            </div>

            <button
              onClick={() => setShowHiddenPinModal(false)}
              className="w-full py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold rounded-2xl transition-colors active:scale-95 text-[15px]"
            >
              Hủy bỏ
            </button>
          </div>
        </div>
      )}

      {/* MODAL: DANH SÁCH CUỘC TRÒ CHUYỆN ĐÃ ẨN */}
      {showHiddenChatsList && (
        <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/65 backdrop-blur-md px-4 animate-fade-in">
          <div className="bg-vn-paper bg-trong-dong rounded-[32px] w-full max-w-md shadow-2xl flex flex-col overflow-hidden max-h-[85vh]">
            <div className="p-5 bg-white border-b border-gray-100 flex items-center justify-between">
              <h3 className="text-lg font-bold text-vn-wood flex items-center gap-2">
                <Lock size={20} className="text-vn-red animate-pulse" />
                Kho Lưu Trữ Ẩn
              </h3>
              <button 
                onClick={() => setShowHiddenChatsList(false)}
                className="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500"
              >
                <X size={18} />
              </button>
            </div>

            <div className="flex-1 overflow-y-auto p-4 space-y-3">
              {hiddenChats.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-16 text-center">
                  <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 mb-3">
                    <Lock size={28} />
                  </div>
                  <h4 className="font-bold text-[15px] text-vn-wood mb-1">Không có trò chuyện ẩn</h4>
                  <p className="text-xs text-[#7D6B5D] px-6">Hãy nhấn chuột phải vào cuộc trò chuyện bất kỳ ở trang chủ (hoặc nhấn giữ/vào cài đặt liên hệ trên điện thoại) và chọn "Ẩn cuộc trò chuyện".</p>
                </div>
              ) : (
                [...friends, ...myGroups].filter(f => hiddenChats.includes(f.userId)).map(friend => {
                  const isGrp = friend.is_group === true || friend.userId.startsWith('group_');
                  return (
                    <div key={friend.userId} className="flex items-center gap-3 p-3 bg-white rounded-2xl border border-gray-100 shadow-sm animate-scale-in">
                      <div className="w-12 h-12 rounded-full overflow-hidden shrink-0 flex items-center justify-center bg-gray-200">
                        {isGrp ? (
                          <div className="w-full h-full bg-gradient-to-tr from-blue-500 to-indigo-600 flex items-center justify-center text-white">
                            <Users size={20} />
                          </div>
                        ) : (
                          friend.avatarUrl ? <img src={friend.avatarUrl} className="w-full h-full object-cover" /> : <span className="text-white font-bold">{friend.name[0]}</span>
                        )}
                      </div>
                      
                      <div className="flex-1 min-w-0">
                        <h4 className="font-bold text-[15px] text-vn-wood truncate">{friend.name}</h4>
                        <p className="text-[11px] text-[#A39182] truncate">Số Lutos: {friend.userId}</p>
                      </div>

                      <button
                        onClick={() => {
                          const updated = hiddenChats.filter(id => id !== friend.userId);
                          localStorage.setItem(`hiddenChats_${user.userId}`, JSON.stringify(updated));
                          setHiddenChats(updated);
                          showToastAlert("Đã gỡ ẩn", `Đã gỡ ẩn cuộc trò chuyện với ${friend.name}`);
                        }}
                        className="px-3.5 py-1.5 rounded-full bg-green-50 hover:bg-green-100 text-green-600 font-extrabold text-[12.5px] shadow-sm transition-all active:scale-95 border border-green-100 shrink-0"
                      >
                        Gỡ ẩn
                      </button>
                    </div>
                  );
                })
              )}
            </div>

            <div className="p-4 bg-white border-t border-gray-100 flex gap-2">
              <button
                onClick={() => {
                  if (confirm("Bạn có chắc chắn muốn xóa mã PIN ẩn tin nhắn? Toàn bộ các cuộc trò chuyện ẩn sẽ được hiển thị trở lại màn hình chính.")) {
                    localStorage.removeItem(`hiddenChatsPin_${user.userId}`);
                    localStorage.removeItem(`hiddenChats_${user.userId}`);
                    setHiddenChatsPin('');
                    setHiddenChats([]);
                    setShowHiddenChatsList(false);
                    showToastAlert("Thành công", "Đã xóa mã PIN và hiển thị lại toàn bộ trò chuyện!");
                  }
                }}
                className="flex-1 py-3 bg-red-50 hover:bg-red-100 text-red-600 font-bold rounded-2xl transition-colors text-[13.5px]"
              >
                Xóa mã PIN
              </button>
              <button
                onClick={() => setShowHiddenChatsList(false)}
                className="flex-1 py-3 bg-vn-wood hover:bg-vn-wood-light text-white font-bold rounded-2xl shadow-sm transition-all text-[13.5px]"
              >
                Đóng
              </button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL: DANH SÁCH NGƯỜI DÙNG ĐÃ CHẶN */}
      {showBlockedUsersList && (
        <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/65 backdrop-blur-md px-4 animate-fade-in">
          <div className="bg-vn-paper bg-trong-dong rounded-[32px] w-full max-w-md shadow-2xl flex flex-col overflow-hidden max-h-[85vh]">
            <div className="p-5 bg-white border-b border-gray-100 flex items-center justify-between">
              <h3 className="text-lg font-bold text-vn-wood flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-vn-red animate-pulse"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
                Danh sách chặn
              </h3>
              <button 
                onClick={() => setShowBlockedUsersList(false)}
                className="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500"
              >
                <X size={18} />
              </button>
            </div>

            <div className="flex-1 overflow-y-auto p-4 space-y-3">
              {!Array.isArray(blockedUsers) || blockedUsers.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-16 text-center">
                  <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
                  </div>
                  <h4 className="font-bold text-[15px] text-vn-wood mb-1">Không có người dùng bị chặn</h4>
                  <p className="text-xs text-[#7D6B5D] px-6">Để chặn ai đó, hãy vào xem trang thông tin liên hệ của họ và chọn "Chặn liên hệ này".</p>
                </div>
              ) : (
                blockedUsers.map(blockedUser => (
                  <div key={blockedUser.userId} className="flex items-center gap-3 p-3 bg-white rounded-2xl border border-gray-100 shadow-sm animate-scale-in">
                    <div className="w-12 h-12 rounded-full overflow-hidden shrink-0 flex items-center justify-center bg-gray-200">
                      {blockedUser.avatarUrl ? <img src={blockedUser.avatarUrl} className="w-full h-full object-cover" /> : <span className="text-[#7D6B5D] font-bold">{blockedUser.name[0]}</span>}
                    </div>
                    
                    <div className="flex-1 min-w-0">
                      <h4 className="font-bold text-[15px] text-vn-wood truncate">{blockedUser.name}</h4>
                      <p className="text-[11px] text-[#A39182] truncate">Số Lutos: {blockedUser.userId}</p>
                    </div>

                    <button
                      onClick={() => handleUnblockUser(blockedUser.userId, blockedUser.name)}
                      className="px-3.5 py-1.5 rounded-full bg-gray-50 hover:bg-gray-100 text-vn-wood font-extrabold text-[12.5px] shadow-sm transition-all active:scale-95 border border-gray-200 shrink-0"
                    >
                      Bỏ chặn
                    </button>
                  </div>
                ))
              )}
            </div>

            <div className="p-4 bg-white border-t border-gray-100 flex">
              <button
                onClick={() => setShowBlockedUsersList(false)}
                className="w-full py-3 bg-vn-wood hover:bg-vn-wood-light text-white font-bold rounded-2xl shadow-sm transition-all text-[14px]"
              >
                Đóng
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Toast Notification */}
      {toast && (
        <div className="fixed top-5 left-1/2 -translate-x-1/2 z-[9999] bg-[#2B394A] text-white px-5 py-3 rounded-2xl shadow-2xl flex items-center gap-3 animate-slide-down border border-white/10 max-w-[90%] sm:max-w-md">
          <div className="w-8 h-8 rounded-full bg-vn-red flex items-center justify-center text-white shrink-0 font-bold">!</div>
          <div className="flex-1 min-w-0">
            <h4 className="font-bold text-[15px] truncate">{toast.title}</h4>
            <p className="text-[13px] text-gray-300 truncate">{toast.message}</p>
          </div>
          <button onClick={() => setToast(null)} className="text-gray-400 hover:text-white"><X size={16} /></button>
        </div>
      )}

    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);