import { useState, useEffect, useRef, useCallback } from 'react'
import {
  MessageSquare, X, ChevronLeft, Send, Users, Loader2,
  Search, Bell, Settings, PenSquare, BellOff, Volume2, VolumeX, Paperclip, Pin, UserPlus,
} from 'lucide-react'
import { api, type ChatRoom, type ChatMessage, type ChatSearchResult, type ChatReaction } from '../../lib/api'
import type { User } from '../../types'
import { useAuth } from '../../contexts/AuthContext'
import { cn } from '../../lib/utils'

// ── Helpers ────────────────────────────────────────────────────────────────

function avatarColor(name: string) {
  const colors = ['#4F46E5','#059669','#2563EB','#7C3AED','#DC2626','#D97706','#DB2777','#0891B2']
  let h = 0
  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) % colors.length
  return colors[h]
}
function initials(name: string) {
  return name.split(' ').map(p => p[0]).join('').toUpperCase().slice(0, 2)
}
function fmtTime(iso: string) {
  const d = new Date(iso), now = new Date()
  if (now.toDateString() === d.toDateString())
    return d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
  return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' })
}

function Avatar({ name, size = 28, online = false }: { name: string; size?: number; online?: boolean }) {
  return (
    <div className="relative shrink-0" style={{ width: size, height: size }}>
      <div style={{ width: size, height: size, background: avatarColor(name), fontSize: size * 0.38 }}
        className="rounded-full flex items-center justify-center text-white font-semibold">
        {initials(name)}
      </div>
      {online && (
        <span className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-green-500 border-2 border-white dark:border-slate-800" />
      )}
    </div>
  )
}
function SystemAvatar({ size = 28 }: { size?: number }) {
  return (
    <div style={{ width: size, height: size }}
      className="rounded-full flex items-center justify-center shrink-0 bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
      <Bell size={size * 0.5} />
    </div>
  )
}

// ── Sound ──────────────────────────────────────────────────────────────────

function playNotifSound() {
  try {
    const AudioCtx = window.AudioContext ?? (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext
    const ctx = new AudioCtx()
    const osc = ctx.createOscillator(), gain = ctx.createGain()
    osc.connect(gain); gain.connect(ctx.destination)
    osc.frequency.value = 880
    gain.gain.setValueAtTime(0.18, ctx.currentTime)
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.25)
    osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.25)
    setTimeout(() => ctx.close(), 600)
  } catch { /* ignore */ }
}

// ── Persist ────────────────────────────────────────────────────────────────

interface ChatSettings {
  notifVisible: boolean
  soundEnabled: boolean
  popupEnabled: boolean
  notifShowText: boolean
}
const SETTINGS_KEY = 'hotelsync-chat-settings'
const PINS_KEY = 'hotelsync-chat-pins'

function loadSettings(): ChatSettings {
  try {
    const s = localStorage.getItem(SETTINGS_KEY)
    if (s) return { notifVisible: true, soundEnabled: false, popupEnabled: true, notifShowText: true, ...JSON.parse(s) as Partial<ChatSettings> }
  } catch { /**/ }
  return { notifVisible: true, soundEnabled: false, popupEnabled: true, notifShowText: true }
}
function saveSettings(s: ChatSettings) { localStorage.setItem(SETTINGS_KEY, JSON.stringify(s)) }
const MUTED_KEY = 'hotelsync-chat-muted'
function loadMuted(): string[] {
  try { return JSON.parse(localStorage.getItem(MUTED_KEY) ?? '[]') as string[] } catch { return [] }
}
function saveMuted(ids: string[]) { localStorage.setItem(MUTED_KEY, JSON.stringify(ids)) }
function loadPins(): string[] {
  try { return JSON.parse(localStorage.getItem(PINS_KEY) ?? '[]') as string[] } catch { return [] }
}
function savePins(ids: string[]) { localStorage.setItem(PINS_KEY, JSON.stringify(ids)) }

// ── Context menu ───────────────────────────────────────────────────────────

type CtxMenu =
  | { type: 'message'; x: number; y: number; msg: ChatMessage }
  | { type: 'room';    x: number; y: number; room: ChatRoom }

const EMOJIS = ['👍','❤️','😂','😮','😢','🔥','👏','✅']

interface ToastNotif {
  id: string; roomId: string; roomName: string; senderName: string; text: string
}

function renderWithMentions(text: string, myName?: string, isOwn = false) {
  const parts = text.split(/(@\S+)/g)
  if (parts.length === 1) return <>{text}</>
  return <>
    {parts.map((part, i) => {
      if (!part.startsWith('@')) return <span key={i}>{part}</span>
      return (
        <span key={i} className={cn('underline underline-offset-2', isOwn ? 'decoration-white/70' : 'decoration-current')}>
          {part}
        </span>
      )
    })}
  </>
}

// ── Main ───────────────────────────────────────────────────────────────────

type View = 'rooms' | 'messages' | 'search' | 'settings' | 'create-group' | 'group-info'

export function ChatWidget() {
  const { user } = useAuth()
  const slug = user?.hotelSlug ?? ''

  const [open, setOpen]               = useState(false)
  const [view, setView]               = useState<View>('rooms')
  const [rooms, setRooms]             = useState<ChatRoom[]>([])
  const [activeRoom, setActiveRoom]   = useState<ChatRoom | null>(null)
  const [messages, setMessages]       = useState<ChatMessage[]>([])
  const [text, setText]               = useState('')
  const [loadingRooms, setLoadingRooms]   = useState(false)
  const [loadingMsgs, setLoadingMsgs]     = useState(false)
  const [loadingOlder, setLoadingOlder]   = useState(false)
  const [hasMoreMsgs, setHasMoreMsgs]     = useState(false)
  const [sending, setSending]             = useState(false)
  const [attachment, setAttachment]     = useState<File | null>(null)
  const [attachPreview, setAttachPreview] = useState<string | null>(null)

  // Edit
  const [editingMsgId, setEditingMsgId] = useState<string | null>(null)
  const [editText, setEditText]         = useState('')

  // Context menu
  const [ctxMenu, setCtxMenu] = useState<CtxMenu | null>(null)

  // Typing & presence
  const [typingNames, setTypingNames]  = useState<string[]>([])
  const [onlineIds, setOnlineIds]      = useState<string[]>([])

  // Search
  const [searchQuery, setSearchQuery]     = useState('')
  const [searchUsers, setSearchUsers]     = useState<User[]>([])
  const [searchResults, setSearchResults] = useState<ChatSearchResult[]>([])
  const [searchTab, setSearchTab]         = useState<'people' | 'messages'>('people')
  const [loadingSearch, setLoadingSearch] = useState(false)
  const [allUsers, setAllUsers]           = useState<User[]>([])
  const [chatMembers, setChatMembers]     = useState<{ id: string; name: string; role: string }[]>([])

  // Settings + pins + muted
  const [settings, setSettings] = useState<ChatSettings>(loadSettings)
  const [pinnedIds, setPinnedIds] = useState<string[]>(loadPins)
  const [mutedIds, setMutedIds]   = useState<string[]>(loadMuted)

  // Toast notifications
  const [toasts, setToasts] = useState<ToastNotif[]>([])

  // In-room search
  const [roomSearch, setRoomSearch]         = useState('')
  const [roomSearchOpen, setRoomSearchOpen] = useState(false)
  const roomSearchInputRef = useRef<HTMLInputElement>(null)

  // @mentions
  const [mentionQuery, setMentionQuery] = useState<string | null>(null)

  // Create group
  const [groupName, setGroupName]           = useState('')
  const [groupMemberIds, setGroupMemberIds] = useState<string[]>([])
  const [creatingGroup, setCreatingGroup]   = useState(false)

  // Group info edit
  const [editGroupName, setEditGroupName]       = useState('')
  const [savingGroup, setSavingGroup]           = useState(false)
  const groupAvatarInputRef                     = useRef<HTMLInputElement>(null)

  const widgetRef            = useRef<HTMLDivElement>(null)
  const textareaRef          = useRef<HTMLTextAreaElement>(null)
  const messagesContainerRef = useRef<HTMLDivElement>(null)
  const messagesEndRef       = useRef<HTMLDivElement>(null)
  const searchInputRef       = useRef<HTMLInputElement>(null)
  const fileInputRef         = useRef<HTMLInputElement>(null)
  const prevRoomsRef         = useRef<Record<string, number>>({})
  const activeRoomIdRef      = useRef<string | null>(null)
  const prevMsgCountRef      = useRef<number>(0)
  const typingTimerRef       = useRef<ReturnType<typeof setTimeout> | null>(null)
  const isTypingRef          = useRef(false)

  const totalUnread = rooms.reduce((s, r) => s + (Number(r.unreadCount) || 0), 0)

  const visibleRooms = [...rooms]
    .filter(r => !(r.type === 'notifications' && !settings.notifVisible))
    .sort((a, b) => (pinnedIds.includes(a.id) ? 0 : 1) - (pinnedIds.includes(b.id) ? 0 : 1))

  // ── Effects ───────────────────────────────────────────────────────────────

  // Keep activeRoomIdRef in sync for use inside intervals
  useEffect(() => { activeRoomIdRef.current = activeRoom?.id ?? null }, [activeRoom])

  // Room poll — always running (closed = 10s, open = 5s) for badge, sound, toasts
  useEffect(() => {
    if (!slug) return
    let cancelled = false

    const poll = async (initial = false) => {
      if (cancelled) return
      if (initial) setLoadingRooms(true)
      try {
        const data = await api.chat.listRooms(slug)
        if (cancelled) return
        setRooms(data)
        data.forEach(room => {
          const prev = prevRoomsRef.current[room.id]
          const curr = Number(room.unreadCount) || 0
          if (prev === undefined) { prevRoomsRef.current[room.id] = curr; return }
          if (curr > prev) {
            const isViewing = open && view === 'messages' && activeRoomIdRef.current === room.id
            const isMuted = mutedIds.includes(room.id)
            // Bypass mute if current user is mentioned
            const myFirst = (user as { name?: string } | null | undefined)?.name?.split(' ')[0]
            const isMentioned = myFirst ? (room.lastMessage ?? '').includes(`@${myFirst}`) : false
            if (!isViewing && (!isMuted || isMentioned)) {
              if (settings.soundEnabled) playNotifSound()
              if (settings.popupEnabled !== false) {
                const rName = room.type === 'general' ? 'Общий чат'
                  : room.type === 'notifications' ? 'Уведомления'
                  : room.type === 'group' ? (room.name ?? 'Группа')
                  : room.otherUserName ?? 'Чат'
                setToasts(p => [...p.slice(-2), {
                  id: `${room.id}-${Date.now()}`,
                  roomId: room.id, roomName: rName,
                  senderName: room.lastSender ?? '',
                  text: room.lastMessage ?? '',
                }])
              }
            }
          }
          prevRoomsRef.current[room.id] = curr
        })
      } catch { /**/ } finally {
        if (initial && !cancelled) setLoadingRooms(false)
      }
    }

    poll(true)
    const interval = setInterval(() => poll(), open ? 5000 : 10000)
    return () => { cancelled = true; clearInterval(interval) }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [slug, open, view, settings.soundEnabled, settings.popupEnabled, mutedIds.join(',')])

  // Presence heartbeat
  useEffect(() => {
    if (!open || !slug) return
    api.chat.setPresence(slug).catch(() => {/**/})
    api.chat.getPresence(slug).then(setOnlineIds).catch(() => {/**/})
    const t = setInterval(async () => {
      api.chat.setPresence(slug).catch(() => {/**/})
      api.chat.getPresence(slug).then(setOnlineIds).catch(() => {/**/})
    }, 30_000)
    return () => clearInterval(t)
  }, [open, slug])

  // Auto-scroll on polling — only if user is already near the bottom
  useEffect(() => {
    const el = messagesContainerRef.current
    if (!el) return
    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 100
    if (nearBottom) messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [messages])

  // Poll messages + typing
  useEffect(() => {
    if (view !== 'messages' || !activeRoom) return
    const interval = setInterval(async () => {
      try {
        const [fresh, typing] = await Promise.all([
          api.chat.getMessages(slug, activeRoom.id),
          api.chat.getTyping(slug, activeRoom.id),
        ])
        setMessages(prev => {
          // Merge: keep older history + update/append fresh messages
          const freshIds = new Set(fresh.map(m => m.id))
          const older = prev.filter(m => !freshIds.has(m.id) && new Date(m.createdAt) < new Date(fresh[0]?.createdAt ?? 0))
          const merged = [...older, ...fresh]
          if (settings.soundEnabled && merged.length > prevMsgCountRef.current && prevMsgCountRef.current > 0) {
            const last = merged[merged.length - 1]
            if (last.senderId !== user?.id) playNotifSound()
          }
          prevMsgCountRef.current = merged.length
          return merged
        })
        setTypingNames(typing)
      } catch { /**/ }
    }, 2000)
    return () => clearInterval(interval)
  }, [view, activeRoom, slug, settings.soundEnabled, user?.id])

  // Clear typing names when leaving room
  useEffect(() => { if (view !== 'messages') setTypingNames([]) }, [view])

  // Load full users (manager+ only) for search view
  useEffect(() => {
    if (!slug || view !== 'search') return
    if (allUsers.length === 0) api.users.list(slug).then(setAllUsers).catch(() => {/**/})
  }, [view, slug, allUsers.length])

  // Load chat members (all roles) for @mentions, create-group, group-info
  useEffect(() => {
    if (!slug) return
    if (view === 'create-group' || view === 'group-info' || (view === 'messages' && activeRoom?.type === 'general')) {
      if (chatMembers.length === 0) api.chat.listMembers(slug).then(setChatMembers).catch(() => {/**/})
    }
  }, [view, slug, activeRoom?.type, chatMembers.length])

  // Search effect
  useEffect(() => {
    if (view !== 'search') return
    const q = searchQuery.trim()
    if (!q) { setSearchUsers([]); setSearchResults([]); return }
    const ql = q.toLowerCase()
    setSearchUsers(allUsers.filter(u => u.id !== user?.id && (u.name.toLowerCase().includes(ql) || u.email.toLowerCase().includes(ql))))
    const timer = setTimeout(async () => {
      if (searchTab !== 'messages') return
      setLoadingSearch(true)
      try { setSearchResults(await api.chat.search(slug, q)) } catch { /**/ }
      finally { setLoadingSearch(false) }
    }, 400)
    return () => clearTimeout(timer)
  }, [searchQuery, view, allUsers, user?.id, slug, searchTab])

  useEffect(() => {
    if (view === 'search') setTimeout(() => searchInputRef.current?.focus(), 50)
  }, [view])

  // Close ctx menu on outside click
  useEffect(() => {
    if (!ctxMenu) return
    const h = () => setCtxMenu(null)
    window.addEventListener('click', h)
    return () => window.removeEventListener('click', h)
  }, [ctxMenu])

  // close-on-outside handled by overlay div in JSX

  // ── Typing helpers ────────────────────────────────────────────────────────

  const sendTyping = useCallback((typing: boolean) => {
    if (!activeRoom || !slug) return
    if (typing === isTypingRef.current) return
    isTypingRef.current = typing
    api.chat.setTyping(slug, activeRoom.id, typing).catch(() => {/**/})
  }, [activeRoom, slug])

  const handleTextChange = (val: string) => {
    setText(val)
    // Detect @mention: find last @ before cursor position
    const cursor = textareaRef.current?.selectionStart ?? val.length
    const before = val.slice(0, cursor)
    const match = before.match(/@([^\s@]*)$/)
    setMentionQuery(match ? match[1] : null)

    if (!val.trim()) { sendTyping(false); return }
    sendTyping(true)
    if (typingTimerRef.current) clearTimeout(typingTimerRef.current)
    typingTimerRef.current = setTimeout(() => sendTyping(false), 4000)
  }

  const insertMention = (mentionUser: { id: string; name: string; role: string }) => {
    const cursor = textareaRef.current?.selectionStart ?? text.length
    const before = text.slice(0, cursor)
    const match = before.match(/@([^\s@]*)$/)
    if (!match) return
    const start = cursor - match[0].length
    const newText = text.slice(0, start) + `@${mentionUser.name.split(' ')[0]} ` + text.slice(cursor)
    setText(newText)
    setMentionQuery(null)
    setTimeout(() => textareaRef.current?.focus(), 0)
  }

  // ── Actions ───────────────────────────────────────────────────────────────

  const openRoomById = async (roomId: string) => {
    setToasts(p => p.filter(t => t.roomId !== roomId))
    const room = rooms.find(r => r.id === roomId)
    if (!room) { setOpen(true); return }
    setOpen(true)
    await openRoom(room)
  }

  const openRoom = async (room: ChatRoom) => {
    setActiveRoom(room); setView('messages'); setLoadingMsgs(true)
    setRoomSearch(''); setRoomSearchOpen(false)
    prevMsgCountRef.current = 0; isTypingRef.current = false; setHasMoreMsgs(false)
    try {
      const msgs = await api.chat.getMessages(slug, room.id)
      prevMsgCountRef.current = msgs.length
      setHasMoreMsgs(msgs.length === 50)
      setMessages(msgs)
      await api.chat.markRead(slug, room.id)
      setRooms(prev => prev.map(r => r.id === room.id ? { ...r, unreadCount: 0 } : r))
    } catch { /**/ }
    finally {
      setLoadingMsgs(false)
      // Scroll to bottom after React paints the message list
      requestAnimationFrame(() => requestAnimationFrame(() => {
        const el = messagesContainerRef.current
        if (el) el.scrollTop = el.scrollHeight
      }))
    }
  }

  const openDirect = async (targetUser: User) => {
    try {
      const { roomId } = await api.chat.openDirect(slug, targetUser.id)
      const data = await api.chat.listRooms(slug)
      setRooms(data)
      await openRoom({ id: roomId, type: 'direct', name: null, unreadCount: 0, lastMessage: null, lastMessageAt: null, lastSender: null, otherUserName: targetUser.name, otherUserRole: null, otherUserId: targetUser.id, otherUserLastRead: null, memberCount: 0, memberNames: null, avatarUrl: null })
      setSearchQuery('')
    } catch { /**/ }
  }

  const openSearchResult = async (result: ChatSearchResult) => {
    const room = rooms.find(r => r.id === result.roomId)
    if (room) { setSearchQuery(''); setView('rooms'); await openRoom(room) }
  }

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]; if (!file) return
    setAttachment(file)
    const reader = new FileReader()
    reader.onload = ev => setAttachPreview(ev.target?.result as string)
    reader.readAsDataURL(file); e.target.value = ''
  }

  const sendMessage = async () => {
    if ((!text.trim() && !attachment) || !activeRoom || sending) return
    const t = text.trim(), file = attachment
    setText(''); setAttachment(null); setAttachPreview(null); setSending(true); setMentionQuery(null)
    sendTyping(false)
    try {
      let url: string | undefined
      if (file) { url = (await api.chat.uploadImage(file)).url }
      const msg = await api.chat.sendMessage(slug, activeRoom.id, t, url)
      setMessages(prev => { prevMsgCountRef.current = prev.length + 1; return [...prev, msg] })
    } catch {
      setText(t)
      if (file) { setAttachment(file); setAttachPreview(attachPreview) }
    } finally { setSending(false) }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (text.trim() || attachment) void sendMessage() }
  }

  const startEdit = (msg: ChatMessage) => { setEditingMsgId(msg.id); setEditText(msg.text); setCtxMenu(null) }
  const saveEdit = async (msg: ChatMessage) => {
    if (!editText.trim() || !activeRoom) return
    try {
      const updated = await api.chat.editMessage(slug, activeRoom.id, msg.id, editText)
      setMessages(prev => prev.map(m => m.id === msg.id ? updated : m))
    } catch { /**/ }
    setEditingMsgId(null)
  }

  const deleteMsg = async (msg: ChatMessage) => {
    if (!activeRoom) return; setCtxMenu(null)
    try {
      await api.chat.deleteMessage(slug, activeRoom.id, msg.id)
      setMessages(prev => prev.map(m => m.id === msg.id ? { ...m, deletedAt: new Date().toISOString(), text: '', attachmentUrl: null } : m))
    } catch { /**/ }
  }

  const toggleReaction = async (msg: ChatMessage, emoji: string) => {
    if (!activeRoom) return; setCtxMenu(null)
    try {
      const updated = await api.chat.toggleReaction(slug, activeRoom.id, msg.id, emoji)
      setMessages(prev => prev.map(m => m.id === msg.id ? updated : m))
    } catch { /**/ }
  }

  const togglePin = (roomId: string) => {
    setCtxMenu(null)
    const next = pinnedIds.includes(roomId) ? pinnedIds.filter(id => id !== roomId) : [...pinnedIds, roomId]
    setPinnedIds(next); savePins(next)
  }

  const toggleMute = (roomId: string) => {
    setCtxMenu(null)
    const next = mutedIds.includes(roomId) ? mutedIds.filter(id => id !== roomId) : [...mutedIds, roomId]
    setMutedIds(next); saveMuted(next)
  }

  const updateSettings = (patch: Partial<ChatSettings>) => {
    const next = { ...settings, ...patch }; setSettings(next); saveSettings(next)
  }

  const loadOlderMessages = async () => {
    if (!activeRoom || loadingOlder || !hasMoreMsgs || messages.length === 0) return
    const oldest = messages[0].createdAt
    setLoadingOlder(true)
    try {
      const older = await api.chat.getMessages(slug, activeRoom.id, 50, oldest)
      if (older.length === 0) { setHasMoreMsgs(false); return }
      setHasMoreMsgs(older.length === 50)
      // Preserve scroll position after prepending
      const el = messagesContainerRef.current
      const prevHeight = el?.scrollHeight ?? 0
      setMessages(prev => [...older, ...prev])
      requestAnimationFrame(() => {
        if (el) el.scrollTop = el.scrollHeight - prevHeight
      })
    } catch { /**/ }
    finally { setLoadingOlder(false) }
  }

  const openGroupInfo = () => {
    if (!activeRoom) return
    setEditGroupName(activeRoom.name ?? '')
    setView('group-info')
  }

  const handleGroupAvatarUpload = async (file: File) => {
    if (!activeRoom) return
    try {
      const { url } = await api.chat.uploadImage(file)
      await api.chat.updateGroup(slug, activeRoom.id, { avatarUrl: url })
      setActiveRoom(prev => prev ? { ...prev, avatarUrl: url } : prev)
      setRooms(prev => prev.map(r => r.id === activeRoom.id ? { ...r, avatarUrl: url } : r))
    } catch { /**/ }
  }

  const handleSaveGroupInfo = async (patch: { name?: string; addMemberIds?: string[]; removeMemberIds?: string[] }) => {
    if (!activeRoom || savingGroup) return
    setSavingGroup(true)
    try {
      await api.chat.updateGroup(slug, activeRoom.id, patch)
      const data = await api.chat.listRooms(slug)
      setRooms(data)
      const updated = data.find(r => r.id === activeRoom.id)
      if (updated) setActiveRoom(updated)
    } catch { /**/ }
    finally { setSavingGroup(false) }
  }

  const handleCreateGroup = async () => {
    if (!groupName.trim() || groupMemberIds.length === 0 || creatingGroup) return
    setCreatingGroup(true)
    try {
      const { roomId } = await api.chat.createGroup(slug, groupName.trim(), groupMemberIds)
      const data = await api.chat.listRooms(slug)
      setRooms(data)
      const room = data.find(r => r.id === roomId)
      setGroupName(''); setGroupMemberIds([])
      if (room) await openRoom(room)
      else setView('rooms')
    } catch { /**/ }
    finally { setCreatingGroup(false) }
  }

  const goBack = () => {
    if (view === 'messages') {
      sendTyping(false)
      setRoomSearch(''); setRoomSearchOpen(false)
      setHasMoreMsgs(false)
      setView('rooms'); setActiveRoom(null); setEditingMsgId(null); setTypingNames([])
    }
    else if (view === 'search') { setView('rooms'); setSearchQuery('') }
    else if (view === 'settings') setView('rooms')
    else if (view === 'create-group') { setView('rooms'); setGroupName(''); setGroupMemberIds([]) }
    else if (view === 'group-info') { setView('messages') }
  }

  const roomDisplayName = (room: ChatRoom) =>
    room.type === 'general' ? 'Общий чат'
    : room.type === 'notifications' ? 'Уведомления'
    : room.type === 'group' ? (room.name ?? 'Группа')
    : room.otherUserName ?? 'Чат'

  const isOtherOnline = (room: ChatRoom) =>
    room.type === 'direct' && room.otherUserId ? onlineIds.includes(room.otherUserId) : false

  // Read receipt: is message read by other side?
  const isRead = (msg: ChatMessage) => {
    if (!activeRoom || activeRoom.type !== 'direct' || !activeRoom.otherUserLastRead) return false
    return new Date(msg.createdAt) <= new Date(activeRoom.otherUserLastRead)
  }

  if (!slug) return null

  // ── Render ────────────────────────────────────────────────────────────────

  return (
    <div ref={widgetRef}>
      {/* Transparent overlay — closes chat when clicking outside panel */}
      {open && <div className="fixed inset-0 z-40" onMouseDown={() => setOpen(false)} />}
      {/* Float button */}
      <button onClick={() => setOpen(v => !v)}
        className={cn('fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full shadow-lg bg-brand-600 hover:bg-brand-700 text-white transition-all flex items-center justify-center', open && 'scale-90')}>
        {open ? <X size={22} /> : <MessageSquare size={22} />}
        {!open && totalUnread > 0 && (
          <span className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-red-500 text-white text-[10px] font-bold flex items-center justify-center">
            {totalUnread > 9 ? '9+' : totalUnread}
          </span>
        )}
      </button>

      {/* Panel */}
      {open && (
        <div className="fixed bottom-24 right-6 z-50 w-80 bg-white dark:bg-slate-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 flex flex-col overflow-hidden" style={{ height: 520 }}>

          {/* Header */}
          <div className="flex items-center gap-2 px-3 py-3 border-b border-slate-200 dark:border-slate-700 bg-brand-600 text-white rounded-t-2xl shrink-0">
            {view !== 'rooms' && (
              <button onClick={goBack} className="p-1 hover:bg-white/20 rounded-lg transition-colors shrink-0">
                <ChevronLeft size={16} />
              </button>
            )}
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <p className="font-semibold text-sm truncate">
                  {view === 'rooms' && 'Чат сотрудников'}
                  {view === 'messages' && (activeRoom ? roomDisplayName(activeRoom) : 'Чат')}
                  {view === 'search' && 'Поиск'}
                  {view === 'settings' && 'Настройки чата'}
                  {view === 'create-group' && 'Новая группа'}
                  {view === 'group-info' && 'Настройки группы'}
                </p>
                {/* Online dot in messages header */}
                {view === 'messages' && activeRoom && isOtherOnline(activeRoom) && (
                  <span className="w-2 h-2 rounded-full bg-green-400 shrink-0" />
                )}
              </div>
              {view === 'rooms' && visibleRooms.length > 0 && <p className="text-xs text-white/70">{visibleRooms.length} чатов</p>}
              {view === 'messages' && activeRoom?.type === 'direct' && (() => {
                const roleLabels: Record<string, string> = {
                  hotel_admin: 'Администратор', manager: 'Менеджер', housekeeper: 'Горничная',
                  receptionist: 'Ресепшн', accountant: 'Бухгалтер', security: 'Охрана', technician: 'Техник',
                }
                const roleLabel = activeRoom.otherUserRole ? roleLabels[activeRoom.otherUserRole] : null
                const online = isOtherOnline(activeRoom)
                if (!online && !roleLabel) return null
                return (
                  <p className="text-xs flex items-center gap-1">
                    {online && <span className="text-green-300">в сети</span>}
                    {online && roleLabel && <span className="text-white/40">·</span>}
                    {roleLabel && <span className="text-white/50 text-[10px]">{roleLabel}</span>}
                  </p>
                )
              })()}
              {view === 'messages' && activeRoom?.type === 'group' && activeRoom.memberCount && (
                <p className="text-xs text-white/70">{activeRoom.memberCount} участников</p>
              )}
              {view === 'messages' && activeRoom?.type === 'notifications' && (
                <p className="text-xs text-white/70">Только чтение</p>
              )}
            </div>
            {view === 'rooms' && (
              <div className="flex items-center gap-0.5">
                <button onClick={() => setView('search')} className="p-1.5 hover:bg-white/20 rounded-lg transition-colors" title="Поиск и новый чат"><PenSquare size={15} /></button>
                <button onClick={() => { setGroupName(''); setGroupMemberIds([]); setView('create-group') }} className="p-1.5 hover:bg-white/20 rounded-lg transition-colors" title="Новая группа"><UserPlus size={15} /></button>
                <button onClick={() => setView('settings')} className="p-1.5 hover:bg-white/20 rounded-lg transition-colors" title="Настройки"><Settings size={15} /></button>
              </div>
            )}
            {view === 'messages' && activeRoom?.type !== 'notifications' && (
              <div className="flex items-center gap-0.5">
                <button onClick={() => { setRoomSearchOpen(v => !v); setTimeout(() => roomSearchInputRef.current?.focus(), 50) }}
                  className={cn('p-1.5 rounded-lg transition-colors shrink-0', roomSearchOpen ? 'bg-white/30' : 'hover:bg-white/20')}>
                  <Search size={15} />
                </button>
                {activeRoom?.type === 'group' && (
                  <button onClick={openGroupInfo} className="p-1.5 hover:bg-white/20 rounded-lg transition-colors shrink-0" title="Настройки группы">
                    <Settings size={15} />
                  </button>
                )}
              </div>
            )}
          </div>

          {/* ── Rooms ── */}
          {view === 'rooms' && (
            <div className="flex-1 overflow-y-auto">
              {loadingRooms && visibleRooms.length === 0 ? (
                <>
                  <RoomSkeleton icon={<Users size={16} className="text-brand-400" />} bg="bg-brand-100 dark:bg-brand-900/30" label="Общий чат" />
                  {settings.notifVisible && <RoomSkeleton icon={<Bell size={16} className="text-amber-500" />} bg="bg-amber-100 dark:bg-amber-900/30" label="Уведомления" />}
                </>
              ) : (
                visibleRooms.map(room => (
                  <RoomRow
                    key={room.id}
                    room={room}
                    isPinned={pinnedIds.includes(room.id)}
                    isMuted={mutedIds.includes(room.id)}
                    isOnline={isOtherOnline(room)}
                    onClick={() => openRoom(room)}
                    onMenuClick={e => { e.stopPropagation(); setCtxMenu({ type: 'room', x: e.clientX, y: e.clientY, room }) }}
                  />
                ))
              )}
            </div>
          )}

          {/* ── Search ── */}
          {view === 'search' && (
            <div className="flex-1 flex flex-col overflow-hidden">
              <div className="px-3 pt-3 pb-2 shrink-0">
                <div className="flex items-center gap-2 bg-slate-100 dark:bg-slate-700 rounded-xl px-3 py-2">
                  <Search size={14} className="text-slate-400 shrink-0" />
                  <input ref={searchInputRef} value={searchQuery} onChange={e => setSearchQuery(e.target.value)}
                    placeholder="Люди или сообщения..."
                    className="flex-1 bg-transparent text-sm text-slate-800 dark:text-slate-200 placeholder-slate-400 outline-none" />
                  {searchQuery && <button onClick={() => setSearchQuery('')} className="text-slate-400 hover:text-slate-600"><X size={13} /></button>}
                </div>
              </div>
              <div className="flex px-3 gap-1 shrink-0 mb-1">
                {(['people', 'messages'] as const).map(tab => (
                  <button key={tab} onClick={() => setSearchTab(tab)}
                    className={cn('flex-1 py-1.5 text-xs font-medium rounded-lg transition-colors', searchTab === tab ? 'bg-brand-600 text-white' : 'text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-700')}>
                    {tab === 'people' ? 'Люди' : 'Сообщения'}
                  </button>
                ))}
              </div>
              <div className="flex-1 overflow-y-auto">
                {searchTab === 'people' && (
                  !searchQuery
                    ? allUsers.length === 0
                      ? <div className="text-center py-6 text-xs text-slate-400">Загрузка...</div>
                      : allUsers.filter(u => u.id !== user?.id).map(u => (
                          <UserRow key={u.id} user={u} online={onlineIds.includes(u.id)} onClick={() => openDirect(u)} />
                        ))
                    : searchUsers.length === 0
                      ? <div className="text-center py-6 text-xs text-slate-400">Никого не найдено</div>
                      : searchUsers.map(u => <UserRow key={u.id} user={u} online={onlineIds.includes(u.id)} onClick={() => openDirect(u)} />)
                )}
                {searchTab === 'messages' && (
                  !searchQuery
                    ? <div className="text-center py-6 text-xs text-slate-400">Введите запрос для поиска</div>
                    : loadingSearch
                      ? <div className="flex items-center justify-center py-6"><Loader2 size={18} className="animate-spin text-slate-400" /></div>
                      : searchResults.length === 0
                        ? <div className="text-center py-6 text-xs text-slate-400">Ничего не найдено</div>
                        : searchResults.map(r => (
                          <button key={r.id} onClick={() => openSearchResult(r)}
                            className="w-full text-left px-4 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700/50">
                            <p className="text-xs text-slate-500 mb-0.5">
                              {r.roomType === 'general' ? 'Общий чат' : r.roomType === 'notifications' ? 'Уведомления' : r.otherUserName ?? 'Чат'}
                              {' · '}{r.senderName.split(' ')[0]}
                            </p>
                            <p className="text-sm text-slate-800 dark:text-slate-200 truncate">{r.text}</p>
                            <p className="text-[10px] text-slate-400 mt-0.5">{fmtTime(r.createdAt)}</p>
                          </button>
                        ))
                )}
              </div>
            </div>
          )}

          {/* ── Settings ── */}
          {view === 'settings' && (
            <div className="flex-1 overflow-y-auto py-4 space-y-4">
              <SettingsSection title="Канал уведомлений">
                <ToggleRow icon={settings.notifVisible ? <Bell size={15} /> : <BellOff size={15} />}
                  label="Показывать канал уведомлений" checked={settings.notifVisible}
                  onChange={v => updateSettings({ notifVisible: v })} />
              </SettingsSection>
              <SettingsSection title="Уведомления">
                <ToggleRow icon={settings.soundEnabled ? <Volume2 size={15} /> : <VolumeX size={15} />}
                  label="Звуковое уведомление" checked={settings.soundEnabled}
                  onChange={v => updateSettings({ soundEnabled: v })} />
                <ToggleRow icon={<Bell size={15} />}
                  label="Всплывающие уведомления" checked={settings.popupEnabled !== false}
                  onChange={v => updateSettings({ popupEnabled: v })} />
                <ToggleRow icon={<MessageSquare size={15} />}
                  label="Показывать текст в уведомлении" checked={settings.notifShowText !== false}
                  onChange={v => updateSettings({ notifShowText: v })} />
              </SettingsSection>
              <SettingsSection title="Подсказка">
                <p className="text-xs text-slate-500 leading-relaxed">
                  Правый клик на сообщении — реакции, редактирование, удаление.<br />
                  Кнопка ⋮ на чате — закрепить / открепить сверху.
                </p>
              </SettingsSection>
            </div>
          )}

          {/* ── Create Group ── */}
          {view === 'create-group' && (
            <div className="flex-1 flex flex-col overflow-hidden">
              <div className="px-3 pt-3 pb-2 shrink-0 border-b border-slate-100 dark:border-slate-700">
                <input
                  value={groupName}
                  onChange={e => setGroupName(e.target.value)}
                  placeholder="Название группы..."
                  maxLength={50}
                  autoFocus
                  className="w-full px-3 py-2 rounded-xl text-sm bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-400 outline-none border border-transparent focus:border-brand-400"
                />
                {groupMemberIds.length > 0 && (
                  <p className="text-xs text-slate-500 mt-1.5 px-0.5">Выбрано: {groupMemberIds.length} участника(-ов)</p>
                )}
              </div>
              <div className="flex-1 overflow-y-auto">
                {chatMembers.length === 0 ? (
                  <div className="flex items-center justify-center py-8"><Loader2 size={18} className="animate-spin text-slate-400" /></div>
                ) : (
                  chatMembers.filter(u => u.id !== user?.id).map(u => {
                    const selected = groupMemberIds.includes(u.id)
                    const roleLabels: Record<string, string> = {
                      hotel_admin: 'Администратор', manager: 'Менеджер', housekeeper: 'Горничная',
                      receptionist: 'Ресепшн', accountant: 'Бухгалтер', security: 'Охрана', technician: 'Техник',
                    }
                    return (
                      <button key={u.id}
                        onClick={() => setGroupMemberIds(prev => selected ? prev.filter(id => id !== u.id) : [...prev, u.id])}
                        className={cn('w-full flex items-center gap-3 px-4 py-2.5 transition-colors border-b border-slate-100 dark:border-slate-700/50 text-left', selected ? 'bg-brand-50 dark:bg-brand-900/20' : 'hover:bg-slate-50 dark:hover:bg-slate-700/50')}>
                        <div className="relative">
                          <Avatar name={u.name} size={32} />
                          {selected && (
                            <span className="absolute inset-0 rounded-full bg-brand-600/80 flex items-center justify-center text-white text-xs font-bold">✓</span>
                          )}
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{u.name}</p>
                          <p className="text-xs text-slate-400 truncate">{roleLabels[u.role] ?? u.role}</p>
                        </div>
                      </button>
                    )
                  })
                )}
              </div>
              <div className="px-3 py-3 border-t border-slate-100 dark:border-slate-700 shrink-0">
                <button
                  onClick={() => void handleCreateGroup()}
                  disabled={!groupName.trim() || groupMemberIds.length === 0 || creatingGroup}
                  className="w-full py-2 rounded-xl bg-brand-600 hover:bg-brand-700 disabled:opacity-40 text-white text-sm font-medium transition-colors flex items-center justify-center gap-2">
                  {creatingGroup ? <Loader2 size={15} className="animate-spin" /> : <Users size={15} />}
                  Создать группу
                </button>
              </div>
            </div>
          )}

          {/* ── Group Info ── */}
          {view === 'group-info' && activeRoom && (
            <GroupInfoView
              room={activeRoom}
              allMembers={chatMembers}
              currentUserId={user?.id ?? ''}
              saving={savingGroup}
              editName={editGroupName}
              onEditName={setEditGroupName}
              onAvatarClick={() => groupAvatarInputRef.current?.click()}
              onSave={handleSaveGroupInfo}
            />
          )}
          <input ref={groupAvatarInputRef} type="file" accept="image/jpeg,image/png,image/webp" className="hidden"
            onChange={e => { const f = e.target.files?.[0]; if (f) void handleGroupAvatarUpload(f); e.target.value = '' }} />

          {/* ── Messages ── */}
          {view === 'messages' && (
            <>
              {/* In-room search bar */}
              {roomSearchOpen && (
                <div className="px-3 py-2 border-b border-slate-200 dark:border-slate-700 shrink-0 bg-white dark:bg-slate-800">
                  <div className="flex items-center gap-2 bg-slate-100 dark:bg-slate-700 rounded-xl px-3 py-1.5">
                    <Search size={13} className="text-slate-400 shrink-0" />
                    <input ref={roomSearchInputRef} value={roomSearch} onChange={e => setRoomSearch(e.target.value)}
                      placeholder="Поиск в чате..."
                      className="flex-1 bg-transparent text-sm text-slate-800 dark:text-slate-200 placeholder-slate-400 outline-none" />
                    {roomSearch && <button onClick={() => setRoomSearch('')} className="text-slate-400 hover:text-slate-600"><X size={12} /></button>}
                  </div>
                </div>
              )}
              <div ref={messagesContainerRef} className="flex-1 overflow-y-auto px-3 py-3 space-y-2"
                onScroll={e => { if ((e.target as HTMLDivElement).scrollTop < 60 && hasMoreMsgs && !loadingOlder) void loadOlderMessages() }}>
                {/* Load more older messages */}
                {hasMoreMsgs && !loadingOlder && (
                  <div className="flex justify-center pt-1 pb-2">
                    <button onClick={() => void loadOlderMessages()}
                      className="text-xs text-brand-600 hover:text-brand-700 hover:underline transition-colors">
                      Загрузить ещё
                    </button>
                  </div>
                )}
                {loadingOlder && (
                  <div className="flex justify-center py-2">
                    <Loader2 size={14} className="animate-spin text-slate-400" />
                  </div>
                )}

                {loadingMsgs ? (
                  <div className="flex items-center justify-center h-32"><Loader2 size={20} className="animate-spin text-slate-400" /></div>
                ) : messages.length === 0 ? (
                  <div className="text-center py-10 text-sm text-slate-400">
                    {activeRoom?.type === 'notifications' ? 'Уведомлений пока нет' : 'Нет сообщений. Напишите первым!'}
                  </div>
                ) : (() => {
                  const filtered = roomSearch.trim()
                    ? messages.filter(m => !m.deletedAt && m.text.toLowerCase().includes(roomSearch.toLowerCase()))
                    : messages
                  if (filtered.length === 0) return (
                    <div className="text-center py-10 text-sm text-slate-400">Ничего не найдено</div>
                  )
                  return filtered.map(msg => (
                    <MessageBubble
                      key={msg.id}
                      msg={msg}
                      isOwn={!msg.isSystem && msg.senderId === user?.id}
                      isEditing={editingMsgId === msg.id}
                      editText={editText}
                      isRead={isRead(msg)}
                      currentUserName={user?.name}
                      onContextMenu={e => {
                        if (msg.deletedAt || msg.isSystem || activeRoom?.type === 'notifications') return
                        e.preventDefault()
                        setCtxMenu({ type: 'message', x: e.clientX, y: e.clientY, msg })
                      }}
                      onEditTextChange={setEditText}
                      onSaveEdit={() => saveEdit(msg)}
                      onCancelEdit={() => setEditingMsgId(null)}
                      onReaction={emoji => toggleReaction(msg, emoji)}
                    />
                  ))
                })()}

                {/* Typing indicator */}
                {typingNames.length > 0 && (
                  <div className="flex items-center gap-2 px-1">
                    <TypingDots />
                    <span className="text-xs text-slate-400">
                      {typingNames.length === 1
                        ? `${typingNames[0].split(' ')[0]} печатает...`
                        : `${typingNames.map(n => n.split(' ')[0]).join(', ')} печатают...`}
                    </span>
                  </div>
                )}

                <div ref={messagesEndRef} />
              </div>

              {activeRoom?.type !== 'notifications' && (
                <div className="px-3 py-3 border-t border-slate-200 dark:border-slate-700 shrink-0">
                  {attachPreview && (
                    <div className="relative inline-block mb-2">
                      <img src={attachPreview} alt="превью" className="h-16 rounded-lg object-cover border border-slate-200 dark:border-slate-600" />
                      <button onClick={() => { setAttachment(null); setAttachPreview(null) }}
                        className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-slate-700 text-white flex items-center justify-center hover:bg-red-500 transition-colors">
                        <X size={10} />
                      </button>
                    </div>
                  )}
                  {/* @mention dropdown */}
                  {mentionQuery !== null && (() => {
                    const q = mentionQuery.toLowerCase()
                    const candidates = chatMembers
                      .filter(u => u.id !== user?.id && u.name.toLowerCase().includes(q))
                      .slice(0, 6)
                    if (candidates.length === 0) return null
                    return (
                      <div className="mb-1.5 bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl shadow-lg overflow-hidden">
                        {candidates.map(u => (
                          <button key={u.id} onMouseDown={e => { e.preventDefault(); insertMention(u) }}
                            className="w-full flex items-center gap-2 px-3 py-2 hover:bg-slate-50 dark:hover:bg-slate-600 transition-colors text-left">
                            <Avatar name={u.name} size={22} />
                            <span className="text-sm text-slate-800 dark:text-slate-200 truncate">{u.name}</span>
                          </button>
                        ))}
                      </div>
                    )
                  })()}
                  <div className="flex items-end gap-1.5">
                    <input ref={fileInputRef} type="file" accept="image/jpeg,image/png,image/webp,image/gif" className="hidden" onChange={handleFileSelect} />
                    <button onClick={() => fileInputRef.current?.click()}
                      className="p-2 rounded-xl text-slate-400 hover:text-brand-600 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors shrink-0">
                      <Paperclip size={16} />
                    </button>
                    <textarea ref={textareaRef} value={text} onChange={e => handleTextChange(e.target.value)} onKeyDown={handleKeyDown}
                      placeholder="Сообщение..." rows={1}
                      className="flex-1 resize-none rounded-xl px-3 py-2 text-sm bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-400 outline-none max-h-24 overflow-y-auto" />
                    <button onClick={() => void sendMessage()} disabled={(!text.trim() && !attachment) || sending}
                      className="p-2.5 rounded-xl bg-brand-600 hover:bg-brand-700 disabled:opacity-40 text-white transition-colors shrink-0">
                      {sending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
                    </button>
                  </div>
                  <p className="text-[10px] text-slate-400 mt-1.5">Enter — отправить · Shift+Enter — перенос · @ — упомянуть</p>
                </div>
              )}

              {activeRoom?.type === 'notifications' && (
                <div className="px-4 py-3 border-t border-slate-200 dark:border-slate-700 bg-amber-50 dark:bg-amber-900/10 shrink-0">
                  <p className="text-xs text-amber-700 dark:text-amber-400 text-center flex items-center justify-center gap-1.5">
                    <Bell size={12} /> Канал только для чтения
                  </p>
                </div>
              )}
            </>
          )}
        </div>
      )}

      {/* Toast notifications */}
      {toasts.length > 0 && (
        <div className="fixed top-4 right-4 z-[70] flex flex-col gap-2 w-72">
          {toasts.map(toast => (
            <ToastNotifCard
              key={toast.id}
              toast={toast}
              showText={settings.notifShowText !== false}
              onClose={() => setToasts(p => p.filter(t => t.id !== toast.id))}
              onClick={() => void openRoomById(toast.roomId)}
            />
          ))}
        </div>
      )}

      {/* Context menu */}
      {ctxMenu && (
        <ContextMenu menu={ctxMenu} currentUserId={user?.id ?? ''} pinnedIds={pinnedIds} mutedIds={mutedIds}
          onReaction={emoji => ctxMenu.type === 'message' && toggleReaction(ctxMenu.msg, emoji)}
          onEdit={() => ctxMenu.type === 'message' && startEdit(ctxMenu.msg)}
          onDelete={() => ctxMenu.type === 'message' && deleteMsg(ctxMenu.msg)}
          onTogglePin={() => ctxMenu.type === 'room' && togglePin(ctxMenu.room.id)}
          onToggleMute={() => ctxMenu.type === 'room' && toggleMute(ctxMenu.room.id)}
          onClose={() => setCtxMenu(null)}
        />
      )}
    </div>
  )
}

// ── ToastNotifCard ─────────────────────────────────────────────────────────

function ToastNotifCard({ toast, showText, onClose, onClick }: {
  toast: ToastNotif; showText: boolean; onClose: () => void; onClick: () => void
}) {
  useEffect(() => {
    const t = setTimeout(onClose, 4500)
    return () => clearTimeout(t)
  }, [onClose])

  return (
    <div
      onClick={onClick}
      className="flex items-start gap-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-2xl shadow-lg px-4 py-3 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/80 transition-colors"
    >
      <div className="shrink-0 mt-0.5 w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
        <MessageSquare size={15} className="text-brand-600 dark:text-brand-400" />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-semibold text-slate-800 dark:text-slate-100 truncate">{toast.roomName}</p>
        {showText ? (
          <p className="text-xs text-slate-500 dark:text-slate-400 truncate mt-0.5">
            {toast.senderName ? `${toast.senderName.split(' ')[0]}: ` : ''}{toast.text || 'Новое сообщение'}
          </p>
        ) : (
          <p className="text-xs text-slate-400 mt-0.5">Новое сообщение</p>
        )}
      </div>
      <button
        onClick={e => { e.stopPropagation(); onClose() }}
        className="shrink-0 text-slate-300 hover:text-slate-500 dark:text-slate-600 dark:hover:text-slate-400 transition-colors p-0.5 mt-0.5"
      >
        <X size={13} />
      </button>
    </div>
  )
}

// ── RoomRow ────────────────────────────────────────────────────────────────

function RoomRow({ room, isPinned, isMuted, isOnline, onClick, onMenuClick }: {
  room: ChatRoom; isPinned: boolean; isMuted: boolean; isOnline: boolean
  onClick: () => void; onMenuClick: (e: React.MouseEvent) => void
}) {
  const [hovered, setHovered] = useState(false)
  return (
    <div
      className="group relative flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700/50 cursor-pointer"
      onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {/* Avatar */}
      <div className="relative shrink-0">
        {room.type === 'general' ? (
          <div className="w-9 h-9 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
            <Users size={16} className="text-brand-600 dark:text-brand-400" />
          </div>
        ) : room.type === 'notifications' ? (
          <div className="w-9 h-9 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
            <Bell size={16} className="text-amber-600 dark:text-amber-400" />
          </div>
        ) : room.type === 'group' ? (
          <div className="w-9 h-9 rounded-full bg-violet-100 dark:bg-violet-900/30 flex items-center justify-center">
            <Users size={16} className="text-violet-600 dark:text-violet-400" />
          </div>
        ) : (
          <Avatar name={room.otherUserName ?? '?'} size={36} online={isOnline} />
        )}
        {Number(room.unreadCount) > 0 && (
          <span className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-red-500 text-white text-[9px] font-bold flex items-center justify-center">
            {room.unreadCount}
          </span>
        )}
      </div>

      {/* Text */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-1">
          {isPinned && <Pin size={10} className="text-brand-500 shrink-0" />}
          {isMuted && <BellOff size={10} className="text-slate-400 shrink-0" />}
          <p className={cn('text-sm font-medium truncate flex-1', Number(room.unreadCount) > 0 ? 'text-slate-900 dark:text-slate-100' : 'text-slate-700 dark:text-slate-300')}>
            {room.type === 'general' ? 'Общий чат' : room.type === 'notifications' ? 'Уведомления' : room.type === 'group' ? (room.name ?? 'Группа') : room.otherUserName}
          </p>
          {!hovered && room.lastMessageAt && (
            <span className="text-[10px] text-slate-400 shrink-0">{fmtTime(room.lastMessageAt)}</span>
          )}
        </div>
        {room.lastMessage && (
          <p className={cn('text-xs truncate mt-0.5', Number(room.unreadCount) > 0 ? 'text-slate-600 dark:text-slate-300 font-medium' : 'text-slate-400 dark:text-slate-500')}>
            {room.lastSender && room.type === 'general' ? `${room.lastSender.split(' ')[0]}: ` : ''}{room.lastMessage}
          </p>
        )}
      </div>

      {/* ⋮ button — appears on hover */}
      {hovered && (
        <button
          onClick={onMenuClick}
          className="shrink-0 w-7 h-7 flex items-center justify-center rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-500 transition-colors text-base leading-none"
          title="Действия"
        >
          ⋮
        </button>
      )}
    </div>
  )
}

// ── MessageBubble ──────────────────────────────────────────────────────────

function MessageBubble({ msg, isOwn, isEditing, editText, isRead, currentUserName, onContextMenu, onEditTextChange, onSaveEdit, onCancelEdit, onReaction }: {
  msg: ChatMessage; isOwn: boolean; isEditing: boolean; editText: string; isRead: boolean
  currentUserName?: string
  onContextMenu: (e: React.MouseEvent) => void
  onEditTextChange: (v: string) => void
  onSaveEdit: () => void; onCancelEdit: () => void
  onReaction: (emoji: string) => void
}) {
  const isDeleted = !!msg.deletedAt, isSystem = msg.isSystem
  return (
    <div className={cn('flex gap-2', isOwn && 'flex-row-reverse')} onContextMenu={onContextMenu}>
      {!isOwn && (isSystem ? <SystemAvatar size={24} /> : <Avatar name={msg.senderName} size={24} />)}
      <div className={cn('max-w-[80%]', isOwn && 'items-end flex flex-col')}>
        {!isOwn && !isDeleted && (() => {
          const roleLabels: Record<string, string> = {
            hotel_admin: 'Администратор', manager: 'Менеджер', housekeeper: 'Горничная',
            receptionist: 'Ресепшн', accountant: 'Бухгалтер', security: 'Охрана', technician: 'Техник',
          }
          const roleLabel = !isSystem && msg.senderRole ? roleLabels[msg.senderRole] : null
          return (
            <div className="group/name relative inline-block mb-0.5 ml-1 cursor-default">
              <p className="text-[10px] text-slate-500 dark:text-slate-400 font-medium">
                {isSystem ? msg.systemName ?? 'Система' : msg.senderName.split(' ')[0]}
              </p>
              {roleLabel && (
                <span className="absolute left-full top-0 ml-1.5 px-1.5 py-0.5 rounded bg-slate-700 dark:bg-slate-900 text-white text-[9px] whitespace-nowrap opacity-0 group-hover/name:opacity-100 transition-opacity z-10 pointer-events-none shadow-sm">
                  {roleLabel}
                </span>
              )}
            </div>
          )
        })()}

        {isDeleted ? (
          <p className="px-3 py-2 text-sm italic text-slate-400 dark:text-slate-500 bg-slate-100 dark:bg-slate-700/50 rounded-2xl">
            Сообщение удалено
          </p>
        ) : isEditing ? (
          <div className="w-48">
            <textarea value={editText} onChange={e => onEditTextChange(e.target.value)} autoFocus rows={2}
              onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); onSaveEdit() } if (e.key === 'Escape') onCancelEdit() }}
              className="w-full resize-none rounded-xl px-3 py-2 text-sm bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 outline-none border border-brand-400" />
            <div className="flex gap-1.5 mt-1">
              <button onClick={onSaveEdit} className="text-[11px] px-2 py-0.5 rounded bg-brand-600 text-white hover:bg-brand-700">Сохранить</button>
              <button onClick={onCancelEdit} className="text-[11px] px-2 py-0.5 rounded bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-300">Отмена</button>
            </div>
          </div>
        ) : (
          <div className={cn('rounded-2xl text-sm overflow-hidden',
            isSystem ? 'bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-tl-sm'
            : isOwn ? 'bg-brand-600 rounded-tr-sm' : 'bg-slate-100 dark:bg-slate-700 rounded-tl-sm')}>
            {msg.attachmentUrl && (
              <a href={msg.attachmentUrl} target="_blank" rel="noreferrer">
                <img src={msg.attachmentUrl} alt="вложение" className="max-w-full rounded-t-2xl block" style={{ maxHeight: 180, objectFit: 'cover', width: '100%' }} />
              </a>
            )}
            {msg.text && (
              <p className={cn('px-3 py-2', isSystem ? 'text-amber-900 dark:text-amber-200' : isOwn ? 'text-white' : 'text-slate-800 dark:text-slate-200')}>
                {renderWithMentions(msg.text, currentUserName, isOwn)}
              </p>
            )}
          </div>
        )}

        {/* Meta: time + edited + read receipt */}
        {!isDeleted && (
          <div className={cn('flex items-center gap-1 mt-0.5 mx-1', isOwn && 'flex-row-reverse')}>
            <p className="text-[10px] text-slate-400">{fmtTime(msg.createdAt)}</p>
            {msg.editedAt && <p className="text-[10px] text-slate-400">· изм.</p>}
            {isOwn && (
              <span className={cn('text-[11px] leading-none', isRead ? 'text-brand-400' : 'text-slate-300 dark:text-slate-600')}>
                {isRead ? '✓✓' : '✓'}
              </span>
            )}
          </div>
        )}

        {/* Reactions */}
        {!isDeleted && msg.reactions?.length > 0 && (
          <div className={cn('flex flex-wrap gap-1 mt-1', isOwn && 'justify-end')}>
            {(msg.reactions as ChatReaction[]).map(r => (
              <button key={r.emoji} onClick={() => onReaction(r.emoji)}
                className={cn('flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-xs transition-colors',
                  r.hasOwn
                    ? 'bg-brand-100 dark:bg-brand-900/40 border border-brand-400 text-brand-700 dark:text-brand-300'
                    : 'bg-slate-100 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-200')}>
                {r.emoji} <span className="text-[10px] font-medium">{r.count}</span>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

// ── ContextMenu ────────────────────────────────────────────────────────────

function ContextMenu({ menu, currentUserId, pinnedIds, mutedIds, onReaction, onEdit, onDelete, onTogglePin, onToggleMute, onClose }: {
  menu: CtxMenu; currentUserId: string; pinnedIds: string[]; mutedIds: string[]
  onReaction: (emoji: string) => void; onEdit: () => void; onDelete: () => void
  onTogglePin: () => void; onToggleMute: () => void; onClose: () => void
}) {
  const menuW = 190, menuH = menu.type === 'message' ? 160 : 90
  const x = Math.min(menu.x, window.innerWidth - menuW - 8)
  const y = Math.min(menu.y, window.innerHeight - menuH - 8)
  return (
    <div style={{ position: 'fixed', top: y, left: x, zIndex: 9999, minWidth: menuW }}
      className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-xl shadow-xl py-1"
      onClick={e => e.stopPropagation()}>
      {menu.type === 'message' && (
        <>
          <div className="flex justify-around px-2 py-1.5 border-b border-slate-100 dark:border-slate-700">
            {EMOJIS.map(e => (
              <button key={e} onClick={() => { onReaction(e); onClose() }}
                className="text-base hover:scale-125 transition-transform leading-none p-0.5">{e}</button>
            ))}
          </div>
          {menu.msg.senderId === currentUserId && (
            <button onClick={() => { onEdit(); onClose() }}
              className="w-full text-left px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 flex items-center gap-2">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
              Редактировать
            </button>
          )}
          {menu.msg.senderId === currentUserId && (
            <button onClick={() => { onDelete(); onClose() }}
              className="w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-2">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
              Удалить
            </button>
          )}
        </>
      )}
      {menu.type === 'room' && (
        <>
          <button onClick={() => { onTogglePin(); onClose() }}
            className="w-full text-left px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 flex items-center gap-2">
            <Pin size={14} />
            {pinnedIds.includes(menu.room.id) ? 'Открепить' : 'Закрепить сверху'}
          </button>
          <button onClick={() => { onToggleMute(); onClose() }}
            className="w-full text-left px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 flex items-center gap-2">
            {mutedIds.includes(menu.room.id) ? <><Bell size={14} /> Включить уведомления</> : <><BellOff size={14} /> Отключить уведомления</>}
          </button>
        </>
      )}
    </div>
  )
}

// ── Misc sub-components ───────────────────────────────────────────────────

function TypingDots() {
  return (
    <div className="flex gap-0.5 items-center">
      {[0, 1, 2].map(i => (
        <span key={i} className="w-1.5 h-1.5 rounded-full bg-slate-400 animate-bounce" style={{ animationDelay: `${i * 0.15}s` }} />
      ))}
    </div>
  )
}

function UserRow({ user, online, onClick }: { user: User; online: boolean; onClick: () => void }) {
  const roleLabels: Record<string, string> = {
    hotel_admin: 'Администратор', manager: 'Менеджер', housekeeper: 'Горничная',
    receptionist: 'Ресепшн', accountant: 'Бухгалтер', security: 'Охрана', technician: 'Техник',
  }
  return (
    <button onClick={onClick} className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700/50 text-left">
      <Avatar name={user.name} size={32} online={online} />
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{user.name}</p>
        <p className="text-xs text-slate-400 truncate">{roleLabels[user.role] ?? user.role}</p>
      </div>
    </button>
  )
}

function SettingsSection({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="px-4">
      <p className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">{title}</p>
      <div className="space-y-1">{children}</div>
    </div>
  )
}

function ToggleRow({ icon, label, checked, onChange }: {
  icon: React.ReactNode; label: string; checked: boolean; onChange: (v: boolean) => void
}) {
  return (
    <div className="flex items-center gap-3 py-2">
      <span className="text-slate-500 shrink-0">{icon}</span>
      <span className="flex-1 text-sm text-slate-700 dark:text-slate-300 leading-tight">{label}</span>
      <button onClick={() => onChange(!checked)}
        className={cn('relative w-10 h-5 rounded-full transition-colors shrink-0 overflow-hidden', checked ? 'bg-brand-600' : 'bg-slate-300 dark:bg-slate-600')}>
        <span className={cn('absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform', checked ? 'translate-x-5' : 'translate-x-0')} />
      </button>
    </div>
  )
}

// ── GroupInfoView ──────────────────────────────────────────────────────────

function GroupInfoView({ room, allMembers, currentUserId, saving, editName, onEditName, onAvatarClick, onSave }: {
  room: ChatRoom
  allMembers: { id: string; name: string; role: string }[]
  currentUserId: string
  saving: boolean
  editName: string
  onEditName: (v: string) => void
  onAvatarClick: () => void
  onSave: (patch: { name?: string; addMemberIds?: string[]; removeMemberIds?: string[] }) => void
}) {
  const roleLabels: Record<string, string> = {
    hotel_admin: 'Администратор', manager: 'Менеджер', housekeeper: 'Горничная',
    receptionist: 'Ресепшн', accountant: 'Бухгалтер', security: 'Охрана', technician: 'Техник',
  }
  const [addingMembers, setAddingMembers] = useState(false)
  const [selectedAdd, setSelectedAdd] = useState<string[]>([])

  // Current member ids from allMembers that are in this room (from memberNames we don't have IDs, so use a different approach)
  // We track removes locally until saved
  const [removedIds, setRemovedIds] = useState<string[]>([])

  const currentMemberIds = allMembers
    .filter(u => room.memberNames?.some(n => n === u.name) || u.id === currentUserId)
    .map(u => u.id)
    .filter(id => !removedIds.includes(id))

  const removableMemberIds = allMembers.filter(u =>
    (room.memberNames?.some(n => n === u.name) || u.id === currentUserId) && u.id !== currentUserId
  ).map(u => u.id)

  const notMembers = allMembers.filter(u =>
    u.id !== currentUserId &&
    !currentMemberIds.includes(u.id) &&
    !removedIds.includes(u.id)
  )

  const handleRemove = (userId: string) => {
    setRemovedIds(p => [...p, userId])
    onSave({ removeMemberIds: [userId] })
  }

  const handleAddMembers = () => {
    if (selectedAdd.length === 0) { setAddingMembers(false); return }
    onSave({ addMemberIds: selectedAdd })
    setSelectedAdd([])
    setAddingMembers(false)
  }

  return (
    <div className="flex-1 flex flex-col overflow-hidden">
      {/* Avatar + name */}
      <div className="flex flex-col items-center gap-3 px-4 pt-5 pb-4 border-b border-slate-100 dark:border-slate-700 shrink-0">
        <button onClick={onAvatarClick} className="relative group">
          {room.avatarUrl ? (
            <img src={room.avatarUrl} alt={room.name ?? ''} className="w-16 h-16 rounded-full object-cover" />
          ) : (
            <div className="w-16 h-16 rounded-full bg-violet-100 dark:bg-violet-900/30 flex items-center justify-center">
              <Users size={28} className="text-violet-600 dark:text-violet-400" />
            </div>
          )}
          <span className="absolute inset-0 rounded-full bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
          </span>
        </button>
        <div className="flex items-center gap-2 w-full max-w-[200px]">
          <input value={editName} onChange={e => onEditName(e.target.value)}
            className="flex-1 text-center text-sm font-semibold bg-transparent border-b border-slate-300 dark:border-slate-600 focus:border-brand-500 outline-none py-0.5 text-slate-800 dark:text-slate-100"
            placeholder="Название группы" />
          <button onClick={() => onSave({ name: editName })} disabled={!editName.trim() || saving}
            className="text-brand-600 hover:text-brand-700 disabled:opacity-30 transition-colors text-xs font-medium shrink-0">
            {saving ? <Loader2 size={12} className="animate-spin" /> : 'Сохранить'}
          </button>
        </div>
      </div>

      {/* Members list */}
      <div className="flex-1 overflow-y-auto">
        <div className="px-4 pt-3 pb-1 flex items-center justify-between">
          <p className="text-xs font-semibold text-slate-400 uppercase tracking-wide">
            Участники · {currentMemberIds.length}
          </p>
          <button onClick={() => { setAddingMembers(v => !v); setSelectedAdd([]) }}
            className="text-xs text-brand-600 hover:text-brand-700 font-medium flex items-center gap-1">
            <UserPlus size={12} /> Добавить
          </button>
        </div>

        {/* Add members panel */}
        {addingMembers && notMembers.length > 0 && (
          <div className="mx-3 mb-2 rounded-xl border border-slate-200 dark:border-slate-600 overflow-hidden">
            {notMembers.map(u => (
              <button key={u.id} onClick={() => setSelectedAdd(p => p.includes(u.id) ? p.filter(id => id !== u.id) : [...p, u.id])}
                className={cn('w-full flex items-center gap-2 px-3 py-2 text-left transition-colors border-b border-slate-100 dark:border-slate-700 last:border-0',
                  selectedAdd.includes(u.id) ? 'bg-brand-50 dark:bg-brand-900/20' : 'hover:bg-slate-50 dark:hover:bg-slate-700/50')}>
                <div className="relative shrink-0">
                  <Avatar name={u.name} size={28} />
                  {selectedAdd.includes(u.id) && (
                    <span className="absolute inset-0 rounded-full bg-brand-600/80 flex items-center justify-center text-white text-[10px] font-bold">✓</span>
                  )}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm text-slate-800 dark:text-slate-200 truncate">{u.name}</p>
                  <p className="text-xs text-slate-400">{roleLabels[u.role] ?? u.role}</p>
                </div>
              </button>
            ))}
            {selectedAdd.length > 0 && (
              <button onClick={handleAddMembers}
                className="w-full py-2 bg-brand-600 hover:bg-brand-700 text-white text-xs font-medium transition-colors flex items-center justify-center gap-1.5">
                {saving ? <Loader2 size={12} className="animate-spin" /> : null}
                Добавить {selectedAdd.length} чел.
              </button>
            )}
          </div>
        )}

        {/* Current members */}
        {allMembers.filter(u => currentMemberIds.includes(u.id)).map(u => (
          <div key={u.id} className="flex items-center gap-3 px-4 py-2.5 border-b border-slate-100 dark:border-slate-700/50">
            <Avatar name={u.name} size={32} />
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">
                {u.name} {u.id === currentUserId && <span className="text-xs text-slate-400 font-normal">(вы)</span>}
              </p>
              <p className="text-xs text-slate-400">{roleLabels[u.role] ?? u.role}</p>
            </div>
            {u.id !== currentUserId && (
              <button onClick={() => handleRemove(u.id)} title="Удалить из группы"
                className="shrink-0 p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors">
                <X size={14} />
              </button>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

function RoomSkeleton({ icon, bg, label }: { icon: React.ReactNode; bg: string; label: string }) {
  return (
    <div className="flex items-center gap-3 px-4 py-3 border-b border-slate-100 dark:border-slate-700/50 animate-pulse">
      <div className={cn('w-9 h-9 rounded-full flex items-center justify-center shrink-0', bg)}>{icon}</div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-slate-600 dark:text-slate-300">{label}</p>
        <div className="h-3 w-24 bg-slate-200 dark:bg-slate-600 rounded mt-1" />
      </div>
    </div>
  )
}