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

const statusLabels = {
  open: "Открыт",
  waiting_for_company: "Ожидает ответа компании",
  waiting_for_client: "Ожидает вашего ответа",
  closed: "Закрыт",
};

export default function DialogsScreen() {
  const app = useApp();
  const router = useRouter();
  const [creating, setCreating] = useState(false);
  const [createError, setCreateError] = useState<unknown>();
  const dialogs = useInfiniteQuery({
    queryKey: ["dialogs"],
    queryFn: ({ pageParam }) => dialogApi.list(pageParam),
    initialPageParam: undefined as string | undefined,
    getNextPageParam: (page) => page.next_cursor ?? undefined,
    enabled: app.authStatus === "authenticated",
  });

  const createDialog = async () => {
    setCreating(true);
    setCreateError(undefined);
    try {
      const dialog = await dialogApi.create(crypto.randomUUID());
      router.push(`/dialogs/${dialog.dialog_id}`);
    } catch (error) {
      setCreateError(error);
    } finally {
      setCreating(false);
    }
  };

  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>;

  const items = dialogs.data?.pages.flatMap((page) => page.items) ?? [];
  return <ScrollView contentContainerStyle={styles.page}>
    <Header status={app.authStatus} realtime={app.realtimeState} onLogout={() => void app.signOut()} />
    <Text accessibilityRole="header" style={styles.title}>История диалогов</Text>
    <Button title={creating ? "Создание…" : "Новый диалог"} disabled={creating} onPress={() => void createDialog()} />
    {createError && <ErrorNotice error={createError} retry={() => void createDialog()} />}
    {dialogs.isLoading && <Loading />}
    {dialogs.error && <ErrorNotice error={dialogs.error} retry={() => void dialogs.refetch()} />}
    {!dialogs.isLoading && !items.length && <Text style={styles.muted}>Диалогов пока нет.</Text>}
    {items.map((dialog) => <View key={dialog.dialog_id} style={styles.card}>
        <Text style={styles.heading}>{statusLabels[dialog.status]}</Text>
        <Text style={styles.muted}>Диалог {dialog.dialog_id.slice(0, 8)}…</Text>
        <Link href={`/dialogs/${dialog.dialog_id}`} style={styles.link}>Открыть диалог</Link>
      </View>)}
    {dialogs.hasNextPage && <Button title="Показать ещё" secondary disabled={dialogs.isFetchingNextPage} onPress={() => void dialogs.fetchNextPage()} />}
  </ScrollView>;
}