import { useEffect, useState } from 'react'
import { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query'
import { client, errorMessage } from '../../api/client'
import { useConfirm } from '../../components/Confirm'
import { Icon } from '../../components/Icon'
import { PAGE_SIZE, Pagination } from '../../components/Pagination'
import { useToasts } from '../../components/Toasts'
import { Badge, Input } from '../../components/ui'
import { formatTimeOnly, plural } from '../../lib/dates'

/** Jedna osoba na sali, tak jak zwraca `RoomPresenceService.ParticipantView`. */
type Participant = {
  identity: string
  name: string
  kind: 'SPEAKER' | 'PARTICIPANT' | 'OTHER'
  registrationId: number | null
  email: string | null
  joinedAt: string | null
  audio: boolean
  video: boolean
  screen: boolean
  chatMuted: boolean
  roomBanned: boolean
  /** Indywidualna zgoda prowadzacego na kamere. */
  cameraAllowed: boolean
  /** Indywidualna zgoda prowadzacego na udostepnienie ekranu. */
  screenAllowed: boolean
  /** Przyznany glos, z kolejki albo bez zgloszenia. */
  voiceGranted: boolean
}

type Presence = {
  source: 'LIVEKIT' | 'ATTENDANCE'
  total: number
  speakers: number
  participants: number
  others: number
  items: Participant[]
  page: number
  size: number
  totalPages: number
  totalElements: number
  banned: { registrationId: number; name: string; email: string }[]
  problem: string | null
  checkedAt: string
}

/**
 * Kto jest teraz na sali.
 *
 * ODPYTYWANIE, NIE WEBSOCKET
 * ------------------------------------------------------------------------
 * Wejscie i wyjscie z pokoju widzi serwer wideo, nie nasz backend: nie ma
 * zdarzenia, ktore moglibysmy rozeslac. Lista jest wiec pobierana co dziesiec
 * sekund. Dokladnosc do kilku sekund wystarcza, a jedno lekkie zapytanie na
 * prowadzacego nie obciaza niczego.
 *
 * USUNIECIE TO BLOKADA
 * ------------------------------------------------------------------------
 * Samo wyrzucenie nic nie daje, bo uczestnik wrocilby tym samym linkiem.
 * Dlatego "Usun z sali" blokuje zapis i wyrzuca polaczenie po stronie serwera.
 * Blokade zdejmuje sie z listy "Zablokowani" na dole karty. Operacja jest
 * odwracalna, wiec potwierdzenie nie jest oznaczone jako nieodwracalne.
 */
export function RoomParticipants({ webinarId, timezone }: { webinarId: string; timezone: string }) {
  const queryClient = useQueryClient()
  const confirm = useConfirm()
  const toasts = useToasts()

  const [search, setSearch] = useState('')
  const [query, setQuery] = useState('')
  const [page, setPage] = useState(0)
  const [showBanned, setShowBanned] = useState(false)
  const [busy, setBusy] = useState<string | null>(null)

  // wyszukiwanie po chwili bezruchu, zeby nie odpytywac serwera przy kazdej literze
  useEffect(() => {
    const timer = window.setTimeout(() => {
      setQuery(search.trim())
      // zmiana frazy cofa na pierwsza strone, tak jak kazdy filtr
      setPage(0)
    }, 300)
    return () => window.clearTimeout(timer)
  }, [search])

  const presence = useQuery({
    queryKey: ['room-presence', webinarId, query, page],
    queryFn: async () =>
      (
        await client.get<Presence>(`/admin/webinars/${webinarId}/room/participants`, {
          params: { q: query || undefined, page, size: PAGE_SIZE },
        })
      ).data,
    refetchInterval: 10_000,
    placeholderData: keepPreviousData,
  })

  const refresh = () => queryClient.invalidateQueries({ queryKey: ['room-presence', webinarId] })

  async function remove(participant: Participant) {
    const fromRegistration = participant.kind === 'PARTICIPANT'
    const ok = await confirm({
      title: `Usunąć ${participant.name} z sali?`,
      message: fromRegistration
        ? 'Uczestnik zostanie wyprowadzony ze spotkania i nie wejdzie ponownie swoim linkiem. '
          + 'Straci też możliwość pisania na czacie. Blokadę można zdjąć w tym panelu, '
          + 'na liście „Zablokowani”.'
        : 'To połączenie nie pochodzi z zapisu na webinar, więc nie da się go zablokować. '
          + 'Zostanie rozłączone, ale może wrócić, jeśli ma własny dostęp do serwera wideo.',
      confirmLabel: 'Usuń z sali',
    })
    if (!ok) return

    setBusy(participant.identity)
    try {
      const { data } = await client.post<{ banned: boolean; removedFromRoom: boolean }>(
        `/admin/webinars/${webinarId}/room/participants/remove`,
        { identity: participant.identity },
      )
      if (data.removedFromRoom) {
        toasts.success(`Usunięto z sali: ${participant.name}`)
      } else if (data.banned) {
        toasts.success(`Zablokowano: ${participant.name}. Przeglądarka tej osoby opuści salę.`)
      } else {
        toasts.success('Tej osoby nie było już na sali')
      }
      await refresh()
    } catch (error) {
      toasts.error(errorMessage(error, 'Nie udało się usunąć z sali'))
    } finally {
      setBusy(null)
    }
  }

  async function toggleChat(participant: Participant) {
    if (participant.registrationId === null) return
    setBusy(participant.identity)
    try {
      await client.post(
        `/admin/webinars/${webinarId}/interactions/participants/${participant.registrationId}/mute`,
        { value: !participant.chatMuted },
      )
      toasts.success(participant.chatMuted ? 'Przywrócono pisanie na czacie' : 'Zablokowano pisanie na czacie')
      await refresh()
    } catch (error) {
      toasts.error(errorMessage(error, 'Nie udało się zmienić wyciszenia'))
    } finally {
      setBusy(null)
    }
  }

  /**
   * Zgoda na kamere albo ekran dla jednej osoby.
   *
   * Bez okna potwierdzenia: to nie kasuje ani nie blokuje, a cofniecie jest
   * jednym kliknieciem i dziala od razu, bo uprawnienie zmienia serwer.
   */
  async function togglePublish(participant: Participant, what: 'camera' | 'screen') {
    if (participant.registrationId === null) return
    const next = what === 'camera' ? !participant.cameraAllowed : !participant.screenAllowed
    setBusy(participant.identity)
    try {
      await client.post(
        `/admin/webinars/${webinarId}/room/participants/${participant.registrationId}/publish`,
        { [what]: next },
      )
      toasts.success(
        what === 'camera'
          ? next
            ? `${participant.name} może włączyć kamerę`
            : `Wyłączono kamerę: ${participant.name}`
          : next
            ? `${participant.name} może udostępnić ekran`
            : `Wyłączono udostępnianie ekranu: ${participant.name}`,
      )
      await refresh()
    } catch (error) {
      toasts.error(errorMessage(error, 'Nie udało się zmienić uprawnień'))
    } finally {
      setBusy(null)
    }
  }

  /**
   * Glos bez zgloszenia. Idzie przez kolejke zgloszen, wiec uczestnik widzi
   * "Masz glos", mikrofon wlacza mu sie sam, a prowadzacy moze go odebrac
   * takze z karty "Zgloszenia do glosu".
   */
  async function toggleVoice(participant: Participant) {
    if (participant.registrationId === null) return
    const next = !participant.voiceGranted
    setBusy(participant.identity)
    try {
      await client.post(
        `/admin/webinars/${webinarId}/speak-requests/participants/${participant.registrationId}/voice`,
        { value: next },
      )
      toasts.success(next ? `${participant.name} ma głos` : `Odebrano głos: ${participant.name}`)
      await refresh()
    } catch (error) {
      toasts.error(errorMessage(error, 'Nie udało się zmienić głosu'))
    } finally {
      setBusy(null)
    }
  }

  async function unban(registrationId: number, name: string) {
    setBusy(`ban-${registrationId}`)
    try {
      await client.post(
        `/admin/webinars/${webinarId}/interactions/participants/${registrationId}/ban`,
        { value: false },
      )
      toasts.success(`Odblokowano: ${name}. Może ponownie wejść na salę.`)
      await refresh()
    } catch (error) {
      toasts.error(errorMessage(error, 'Nie udało się odblokować'))
    } finally {
      setBusy(null)
    }
  }

  const data = presence.data

  return (
    <section className="flex max-h-[70vh] min-h-0 flex-col overflow-hidden rounded-lg border border-slate-200 bg-white">
      <header className="border-b border-slate-200 px-4 py-3">
        <div className="flex items-center justify-between gap-2">
          <h2 className="text-sm font-semibold text-slate-900">Na sali</h2>
          <span className="hx-data text-sm font-semibold text-slate-900">
            {data ? data.total : '...'}
            <span className="ml-1 font-sans text-xs font-normal text-slate-500">
              {data ? plural(data.total, 'osoba', 'osoby', 'osób') : ''}
            </span>
          </span>
        </div>
        {data && (
          <p className="mt-0.5 text-xs text-slate-500">
            Prowadzący: <span className="hx-data">{data.speakers}</span>
            {' · '}Uczestnicy: <span className="hx-data">{data.participants}</span>
            {data.others > 0 && (
              <>
                {' · '}Spoza zapisu: <span className="hx-data">{data.others}</span>
              </>
            )}
          </p>
        )}
        <div className="relative mt-2">
          <Icon
            name="search"
            size={16}
            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
          />
          <Input
            type="search"
            value={search}
            onChange={(event) => setSearch(event.target.value)}
            placeholder="Szukaj po nazwisku lub adresie"
            aria-label="Szukaj osoby na sali"
            className="pl-9"
          />
        </div>
      </header>

      <div className="min-h-0 flex-1 overflow-y-auto">
        {data?.problem && <p className="bg-warn-50 px-4 py-2 text-xs text-warn-600">{data.problem}</p>}
        {data?.source === 'ATTENDANCE' && !data.problem && (
          <p className="bg-slate-50 px-4 py-2 text-xs text-slate-500">
            Lista według sygnałów obecności ze strony spotkania, odświeżanych co minutę.
          </p>
        )}

        {presence.isPending && <p className="py-6 text-center text-sm text-slate-400">Wczytywanie...</p>}
        {presence.isError && (
          <p className="py-6 text-center text-sm text-alarm-600">
            {errorMessage(presence.error, 'Nie udało się wczytać listy obecnych')}
          </p>
        )}
        {data && data.items.length === 0 && (
          <p className="py-6 text-center text-sm text-slate-400">
            {query ? 'Nikt na sali nie pasuje do wyszukiwania.' : 'Na sali nikogo jeszcze nie ma.'}
          </p>
        )}

        <ul className="divide-y divide-slate-100">
          {data?.items.map((participant) => (
            <li key={participant.identity} className="flex items-center gap-2 px-4 py-2 text-sm">
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-1.5">
                  <span className="truncate font-medium text-slate-800">{participant.name}</span>
                  {participant.kind === 'SPEAKER' && <Badge tone="brand">prowadzący</Badge>}
                  {participant.kind === 'OTHER' && <Badge tone="warn">spoza zapisu</Badge>}
                  {participant.chatMuted && <Badge tone="warn">bez czatu</Badge>}
                </div>
                <div className="flex flex-wrap items-center gap-x-2 text-xs text-slate-500">
                  {participant.email && <span className="truncate">{participant.email}</span>}
                  {participant.joinedAt && (
                    <span className="hx-data">od {formatTimeOnly(participant.joinedAt, timezone)}</span>
                  )}
                </div>
              </div>

              {/* co osoba NADAJE w tej chwili, nie co ma prawo nadawac */}
              <div className="flex shrink-0 items-center gap-1 text-slate-400">
                {participant.audio && (
                  <span title="Mówi (mikrofon włączony)" className="text-ok-600">
                    <Icon name="mic" size={14} />
                    <span className="sr-only">mikrofon włączony</span>
                  </span>
                )}
                {participant.video && (
                  <span title="Kamera włączona" className="text-ok-600">
                    <Icon name="video" size={14} />
                    <span className="sr-only">kamera włączona</span>
                  </span>
                )}
                {participant.screen && (
                  <span title="Udostępnia ekran" className="text-ok-600">
                    <Icon name="presentation" size={14} />
                    <span className="sr-only">udostępnia ekran</span>
                  </span>
                )}
              </div>

              {participant.kind !== 'SPEAKER' && (
                <div className="flex shrink-0 items-center gap-0.5">
                  {/*
                    Kamera i ekran tylko przy LiveKit: wylacznie tam serwer
                    egzekwuje osobno kazde zrodlo. Przy innych dostawcach
                    przycisk obiecywalby cos, czego nikt nie pilnuje.
                  */}
                  {/*
                    Glos dziala u kazdego dostawcy, bo to ta sama droga co
                    przyznanie z kolejki. Kamera i ekran tylko przy LiveKit.
                  */}
                  {participant.kind === 'PARTICIPANT' && (
                    <button
                      type="button"
                      disabled={busy === participant.identity}
                      onClick={() => void toggleVoice(participant)}
                      aria-pressed={participant.voiceGranted}
                      aria-label={
                        participant.voiceGranted
                          ? `Odbierz głos: ${participant.name}`
                          : `Daj głos bez zgłoszenia: ${participant.name}`
                      }
                      title={participant.voiceGranted ? 'Odbierz głos' : 'Daj głos bez zgłoszenia'}
                      className={`flex h-9 w-9 items-center justify-center rounded-md disabled:opacity-40 ${
                        participant.voiceGranted
                          ? 'bg-ok-50 text-ok-600 hover:bg-ok-50'
                          : 'text-slate-400 hover:bg-slate-100 hover:text-slate-700'
                      }`}
                    >
                      <Icon name={participant.voiceGranted ? 'mic' : 'mic-off'} size={16} />
                    </button>
                  )}
                  {participant.kind === 'PARTICIPANT' && data?.source === 'LIVEKIT' && (
                    <>
                      <button
                        type="button"
                        disabled={busy === participant.identity}
                        onClick={() => void togglePublish(participant, 'camera')}
                        aria-pressed={participant.cameraAllowed}
                        aria-label={
                          participant.cameraAllowed
                            ? `Odbierz kamerę: ${participant.name}`
                            : `Pozwól włączyć kamerę: ${participant.name}`
                        }
                        title={participant.cameraAllowed ? 'Odbierz kamerę' : 'Pozwól włączyć kamerę'}
                        className={`flex h-9 w-9 items-center justify-center rounded-md disabled:opacity-40 ${
                          participant.cameraAllowed
                            ? 'bg-ok-50 text-ok-600 hover:bg-ok-50'
                            : 'text-slate-400 hover:bg-slate-100 hover:text-slate-700'
                        }`}
                      >
                        <Icon name={participant.cameraAllowed ? 'video' : 'video-off'} size={16} />
                      </button>
                      <button
                        type="button"
                        disabled={busy === participant.identity}
                        onClick={() => void togglePublish(participant, 'screen')}
                        aria-pressed={participant.screenAllowed}
                        aria-label={
                          participant.screenAllowed
                            ? `Odbierz udostępnianie ekranu: ${participant.name}`
                            : `Pozwól udostępnić ekran: ${participant.name}`
                        }
                        title={participant.screenAllowed ? 'Odbierz udostępnianie ekranu' : 'Pozwól udostępnić ekran'}
                        className={`flex h-9 w-9 items-center justify-center rounded-md disabled:opacity-40 ${
                          participant.screenAllowed
                            ? 'bg-ok-50 text-ok-600 hover:bg-ok-50'
                            : 'text-slate-400 hover:bg-slate-100 hover:text-slate-700'
                        }`}
                      >
                        <Icon name="presentation" size={16} />
                      </button>
                    </>
                  )}
                  {participant.kind === 'PARTICIPANT' && (
                    <button
                      type="button"
                      disabled={busy === participant.identity}
                      onClick={() => void toggleChat(participant)}
                      aria-label={
                        participant.chatMuted
                          ? `Przywróć pisanie na czacie: ${participant.name}`
                          : `Zablokuj pisanie na czacie: ${participant.name}`
                      }
                      title={participant.chatMuted ? 'Przywróć pisanie na czacie' : 'Zablokuj pisanie na czacie'}
                      className="flex h-9 w-9 items-center justify-center rounded-md text-warn-600 hover:bg-warn-50 disabled:opacity-40"
                    >
                      <Icon name={participant.chatMuted ? 'message-square' : 'message-square-off'} size={16} />
                    </button>
                  )}
                  <button
                    type="button"
                    disabled={busy === participant.identity}
                    onClick={() => void remove(participant)}
                    aria-label={`Usuń z sali: ${participant.name}`}
                    title="Usuń z sali"
                    className="flex h-9 w-9 items-center justify-center rounded-md text-alarm-600 hover:bg-alarm-50 disabled:opacity-40"
                  >
                    <Icon name="user-off" size={16} />
                  </button>
                </div>
              )}
            </li>
          ))}
        </ul>

        {data && data.banned.length > 0 && (
          <div className="border-t border-slate-200">
            <button
              type="button"
              onClick={() => setShowBanned((value) => !value)}
              aria-expanded={showBanned}
              className="flex w-full items-center justify-between px-4 py-2.5 text-left text-xs font-medium text-slate-600 hover:bg-slate-50"
            >
              <span>
                Zablokowani: <span className="hx-data">{data.banned.length}</span>
              </span>
              <Icon name={showBanned ? 'chevron-up' : 'chevron-down'} size={14} />
            </button>
            {showBanned && (
              <ul className="divide-y divide-slate-100">
                {data.banned.map((person) => (
                  <li key={person.registrationId} className="flex items-center gap-2 px-4 py-2 text-sm">
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-slate-700">{person.name}</p>
                      <p className="truncate text-xs text-slate-500">{person.email}</p>
                    </div>
                    <button
                      type="button"
                      disabled={busy === `ban-${person.registrationId}`}
                      onClick={() => void unban(person.registrationId, person.name)}
                      className="flex min-h-9 shrink-0 items-center gap-1 rounded-md px-2 text-xs font-medium text-blue-700 hover:bg-blue-50 disabled:opacity-40"
                    >
                      <Icon name="user-plus" size={14} />
                      Odblokuj
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        )}
      </div>

      {data && data.totalPages > 1 && (
        <div className="border-t border-slate-200 px-3 py-2">
          <Pagination
            page={data.page}
            totalPages={data.totalPages}
            totalElements={data.totalElements}
            pageSize={data.size}
            onChange={setPage}
            itemLabel="osób"
          />
        </div>
      )}
    </section>
  )
}