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

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 (
      <ScreenShell>
        <AppHeader guestLabel="Гость" />
        <View style={{ flex: 1, padding: spacing.lg, justifyContent: "center", gap: spacing.md }}>
          <Text accessibilityRole="header" style={styles.title}>Чат</Text>
          <Text style={styles.text}>Чат с компанией доступен после авторизации. Отправьте сообщение на главной странице, чтобы войти.</Text>
          <Link href="/" style={styles.link}>На главную</Link>
        </View>
      </ScreenShell>
    );
  }

  return (
    <ScreenShell>
      <AppHeader />
      <View style={{ flex: 1, padding: spacing.lg, justifyContent: "center" }}>
        <Text accessibilityRole="header" style={styles.title}>Открываем чат…</Text>
        {chat.isLoading && <Loading />}
        {chat.error && <ErrorNotice error={chat.error} retry={() => void chat.refetch()} />}
      </View>
    </ScreenShell>
  );
}