import { useQuery } from "@tanstack/react-query";
import { Link, useRouter } from "expo-router";
import React, { useEffect, useRef } from "react";
import { ScrollView, Text } from "react-native";
import { useApp } from "../../src/app-context";
import { dialogApi } from "../../src/services";
import { ErrorNotice, Header, Loading, styles } from "../../src/ui";

export default function DialogsScreen() {
  const app = useApp();
  const router = useRouter();
  const requestKey = useRef(crypto.randomUUID());
  const chat = useQuery({
    queryKey: ["current-dialog", requestKey.current],
    queryFn: () => dialogApi.create(requestKey.current),
    enabled: app.authStatus === "authenticated",
  });

  useEffect(() => {
    if (chat.data) router.replace(`/dialogs/${chat.data.dialog_id}`);
  }, [chat.data, router]);

  if (app.authStatus !== "authenticated") return <ScrollView contentContainerStyle={styles.page}>
    <Header status={app.authStatus} realtime={app.realtimeState} />
    <Text accessibilityRole="header" style={styles.title}>Чат</Text>
    <Text style={styles.text}>Чат с компанией доступен после авторизации. Отправьте сообщение на главной странице, чтобы войти.</Text>
    <Link href="/" style={styles.link}>На главную</Link>
  </ScrollView>;

  return <ScrollView contentContainerStyle={styles.page}>
    <Header status={app.authStatus} realtime={app.realtimeState} onLogout={() => void app.signOut()} />
    <Text accessibilityRole="header" style={styles.title}>Чат</Text>
    {chat.isLoading && <Loading />}
    {chat.error && <ErrorNotice error={chat.error} retry={() => void chat.refetch()} />}
  </ScrollView>;
}