Messenger/web/src/components/NewChatDialog.tsx

import { useEffect, useMemo, useRef, useState } from 'react'
import Avatar from './Avatar'
import { IconClose, IconSearch, IconUserPlus, IconUsers } from './icons'
import { api } from '../lib/api'
import { userTitle } from '../lib/format'
import type { Contact, User } from '../lib/types'

type DialogMode = 'dm' | 'group'

interface NewChatDialogProps {
  onClose: () => void
  onStartChat: (user: User) => Promise<void>
  onCreateGroup: (name: string, memberIds: number[]) => Promise<void>
  onContactsChanged: () => void
}

export default function NewChatDialog({
  onClose,
  onStartChat,
  onCreateGroup,
  onContactsChanged,
}: NewChatDialogProps) {
  const [mode, setMode] = useState<DialogMode>('dm')
  const [query, setQuery] = useState('')
  const [results, setResults] = useState<User[]>([])
  const [resultQuery, setResultQuery] = useState('')
  const [contacts, setContacts] = useState<Contact[]>([])
  const [loadingContacts, setLoadingContacts] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [busyId, setBusyId] = useState<number | null>(null)
  const [groupName, setGroupName] = useState('')
  const [selectedIds, setSelectedIds] = useState<Set<number>>(() => new Set())
  const [creating, setCreating] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    inputRef.current?.focus()
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') onClose()
    }
    window.addEventListener('keydown', onKeyDown)
    return () => window.removeEventListener('keydown', onKeyDown)
  }, [onClose])

  useEffect(() => {
    let cancelled = false
    api
      .listContacts()
      .then((list) => {
        if (!cancelled) setContacts(list)
      })
      .catch(() => {
        if (!cancelled) setContacts([])
      })
      .finally(() => {
        if (!cancelled) setLoadingContacts(false)
      })
    return () => {
      cancelled = true
    }
  }, [])

  useEffect(() => {
    const term = query.trim()
    if (term.length === 0) return
    let cancelled = false
    const timer = window.setTimeout(() => {
      api
        .searchUsers(term)
        .then((users) => {
          if (cancelled) return
          setResults(users)
          setResultQuery(term)
        })
        .catch(() => {
          if (cancelled) return
          setResults([])
          setResultQuery(term)
        })
    }, 250)
    return () => {
      cancelled = true
      window.clearTimeout(timer)
    }
  }, [query])

  const contactIds = useMemo(() => new Set(contacts.map((contact) => contact.user.id)), [contacts])
  const trimmed = query.trim()
  const searching = trimmed.length > 0 && resultQuery !== trimmed
  const list = trimmed.length > 0 ? results : contacts.map((contact) => contact.user)

  const runAction = async (user: User, action: () => Promise<void>) => {
    setBusyId(user.id)
    setError(null)
    try {
      await action()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Не удалось выполнить действие')
    } finally {
      setBusyId(null)
    }
  }

  const handleStart = (user: User) =>
    runAction(user, async () => {
      await onStartChat(user)
      onClose()
    })

  const handleAdd = (user: User) =>
    runAction(user, async () => {
      await api.addContact(user.id)
      setContacts((prev) =>
        prev.some((contact) => contact.user.id === user.id)
          ? prev
          : [...prev, { user, added_at: new Date().toISOString() }],
      )
      onContactsChanged()
    })

  const toggleMember = (userId: number) => {
    setSelectedIds((prev) => {
      const next = new Set(prev)
      if (next.has(userId)) next.delete(userId)
      else next.add(userId)
      return next
    })
  }

  const handleCreateGroup = async () => {
    const name = groupName.trim()
    if (!name || selectedIds.size === 0) return
    setCreating(true)
    setError(null)
    try {
      await onCreateGroup(name, [...selectedIds])
      onClose()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Не удалось создать группу')
    } finally {
      setCreating(false)
    }
  }

  const canCreate = groupName.trim().length > 0 && selectedIds.size > 0 && !creating

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 p-0 backdrop-blur-sm sm:items-center sm:p-6">
      <button type="button" aria-label="Закрыть" onClick={onClose} className="absolute inset-0 cursor-default" />
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="new-chat-title"
        className="relative flex max-h-[85vh] w-full max-w-md animate-rise flex-col overflow-hidden rounded-t-3xl border border-line bg-panel shadow-2xl sm:rounded-3xl"
      >
        <div className="flex items-center justify-between border-b border-line/80 px-5 py-4">
          <div>
            <h2 id="new-chat-title" className="font-display text-base font-semibold text-fg">
              Новый чат
            </h2>
            <p className="text-xs text-muted">
              {mode === 'dm' ? 'Найдите человека или выберите из контактов' : 'Соберите группу и добавьте участников'}
            </p>
          </div>
          <button
            type="button"
            onClick={onClose}
            aria-label="Закрыть"
            className="inline-flex h-9 w-9 items-center justify-center rounded-xl text-muted transition hover:bg-surface-2 hover:text-fg"
          >
            <IconClose className="h-5 w-5" />
          </button>
        </div>

        <div className="px-5 pt-4">
          <div className="mb-3 grid grid-cols-2 gap-1 rounded-xl border border-line bg-surface/60 p-1">
            {(['dm', 'group'] as const).map((value) => (
              <button
                key={value}
                type="button"
                onClick={() => setMode(value)}
                className={`rounded-lg px-3 py-1.5 text-xs font-semibold transition ${
                  mode === value ? 'bg-accent-ghost text-accent ring-1 ring-accent/30' : 'text-muted hover:text-fg'
                }`}
              >
                {value === 'dm' ? 'Личный чат' : 'Группа'}
              </button>
            ))}
          </div>

          {mode === 'group' && (
            <div className="relative mb-3">
              <IconUsers className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-faint" />
              <label htmlFor="group-name" className="sr-only">
                Название группы
              </label>
              <input
                id="group-name"
                type="text"
                value={groupName}
                onChange={(event) => setGroupName(event.target.value)}
                placeholder="Название группы"
                maxLength={80}
                className="w-full rounded-xl border border-line bg-surface/70 py-2.5 pr-3 pl-9 text-sm text-fg placeholder:text-faint focus:border-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/20"
              />
            </div>
          )}

          <div className="relative">
            <IconSearch className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-faint" />
            <label htmlFor="new-chat-search" className="sr-only">
              Поиск пользователей
            </label>
            <input
              id="new-chat-search"
              ref={inputRef}
              type="search"
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              placeholder="Имя или @username"
              className="w-full rounded-xl border border-line bg-surface/70 py-2.5 pr-3 pl-9 text-sm text-fg placeholder:text-faint focus:border-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/20"
            />
          </div>
          {error && <p className="mt-2 text-xs text-danger">{error}</p>}
        </div>

        <div className="scrollbar-slim flex-1 overflow-y-auto px-3 py-3">
          {(loadingContacts && trimmed.length === 0) || (searching && list.length === 0) ? (
            <div className="space-y-1.5 p-1">
              {[0, 1, 2].map((row) => (
                <div key={row} className="flex items-center gap-3 rounded-xl p-2.5">
                  <span className="h-10 w-10 animate-pulse-soft rounded-full bg-surface-2" />
                  <span className="h-3 w-1/2 animate-pulse-soft rounded-full bg-surface-2" />
                </div>
              ))}
            </div>
          ) : list.length === 0 ? (
            <div className="px-6 py-12 text-center text-sm text-muted">
              {trimmed.length > 0 ? 'Пользователи не найдены' : 'Список контактов пуст'}
            </div>
          ) : (
            <ul className="space-y-0.5">
              {list.map((user) => {
                const isContact = contactIds.has(user.id)
                const busy = busyId === user.id
                const selected = selectedIds.has(user.id)
                return (
                  <li key={user.id}>
                    <div
                      className={`flex items-center gap-3 rounded-xl px-2.5 py-2 transition ${
                        mode === 'group' && selected ? 'bg-accent-ghost ring-1 ring-accent/30' : 'hover:bg-surface-2/70'
                      }`}
                    >
                      {mode === 'group' && (
                        <button
                          type="button"
                          onClick={() => toggleMember(user.id)}
                          aria-pressed={selected}
                          aria-label={selected ? 'Убрать из группы' : 'Добавить в группу'}
                          className={`inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition ${
                            selected ? 'border-accent bg-accent text-white' : 'border-line bg-surface text-transparent'
                          }`}
                        >
                          <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" aria-hidden="true">
                            <path d="m5 12.5 4.5 4.5L19 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </button>
                      )}
                      <Avatar name={userTitle(user)} seed={user.id} size="md" />
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-sm font-semibold text-fg">{userTitle(user)}</p>
                        <p className="truncate text-xs text-muted">@{user.username}</p>
                      </div>
                      {mode === 'dm' && (
                        <>
                          {!isContact && (
                            <button
                              type="button"
                              onClick={() => void handleAdd(user)}
                              disabled={busy}
                              className="inline-flex items-center gap-1 rounded-lg border border-line px-2.5 py-1.5 text-xs font-medium text-muted transition hover:border-accent/50 hover:text-accent disabled:opacity-50"
                            >
                              <IconUserPlus className="h-4 w-4" />
                              Добавить
                            </button>
                          )}
                          <button
                            type="button"
                            onClick={() => void handleStart(user)}
                            disabled={busy}
                            className="rounded-lg bg-gradient-to-br from-accent to-accent-strong px-3 py-1.5 text-xs font-semibold text-white transition hover:brightness-110 disabled:opacity-50"
                          >
                            {busy ? '…' : 'Написать'}
                          </button>
                        </>
                      )}
                    </div>
                  </li>
                )
              })}
            </ul>
          )}
        </div>

        {mode === 'group' && (
          <div className="flex items-center justify-between gap-3 border-t border-line/80 px-5 py-3">
            <span className="text-xs text-muted">
              Выбрано: <span className="font-semibold text-fg">{selectedIds.size}</span>
            </span>
            <button
              type="button"
              onClick={() => void handleCreateGroup()}
              disabled={!canCreate}
              className="rounded-xl bg-gradient-to-br from-accent to-accent-strong px-4 py-2 text-sm font-semibold text-white transition enabled:hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-40"
            >
              {creating ? 'Создание…' : 'Создать группу'}
            </button>
          </div>
        )}
      </div>
    </div>
  )
}