import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from "@tanstack/react-query";
import type { OrchestrationEvent, OrchestrationReadModel, WsWelcomePayload } from "@t3tools/contracts";
import { StatusBar } from "expo-status-bar";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  ActivityIndicator,
  Pressable,
  SafeAreaView,
  ScrollView,
  Text,
  TextInput,
  View,
} from "react-native";

import {
  createBackendProfileId,
  loadBackendState,
  normalizeBackendInput,
  saveBackendProfiles,
  setActiveBackendProfileId,
  type BackendProfile,
} from "./backendProfiles";
import { T3MobileClient } from "./t3MobileClient";
import type { TransportStatus } from "./wsTransport";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5_000,
      retry: 1,
    },
  },
});

type ThemeButtonVariant = "primary" | "ghost" | "danger";

function ThemeButton(props: {
  readonly label: string;
  readonly onPress: () => void;
  readonly disabled?: boolean;
  readonly variant?: ThemeButtonVariant;
}) {
  const { label, onPress, disabled = false, variant = "primary" } = props;
  const backgroundClassName =
    variant === "primary"
      ? "bg-blue-600"
      : variant === "danger"
        ? "bg-red-600"
        : "bg-slate-200";
  const textClassName = variant === "ghost" ? "text-slate-700" : "text-white";

  return (
    <Pressable
      className={`h-11 items-center justify-center rounded-xl px-4 ${backgroundClassName} ${disabled ? "opacity-50" : "opacity-100"}`}
      disabled={disabled}
      onPress={onPress}
    >
      <Text className={`text-sm font-semibold ${textClassName}`}>{label}</Text>
    </Pressable>
  );
}

function SectionCard(props: { readonly title: string; readonly children: React.ReactNode }) {
  return (
    <View className="gap-3 rounded-2xl border border-slate-200 bg-white p-4">
      <Text className="text-xs font-semibold uppercase tracking-[1.5px] text-slate-500">{props.title}</Text>
      {props.children}
    </View>
  );
}

function statusLabel(status: TransportStatus): string {
  if (status.state === "connected") return "Connected";
  if (status.state === "connecting") return "Connecting";
  if (status.state === "error") return "Connection Error";
  return "Disconnected";
}

function statusClassName(status: TransportStatus): string {
  if (status.state === "connected") return "bg-emerald-100 text-emerald-700";
  if (status.state === "connecting") return "bg-amber-100 text-amber-700";
  if (status.state === "error") return "bg-red-100 text-red-700";
  return "bg-slate-200 text-slate-700";
}

function formatDate(iso: string | null | undefined): string {
  if (!iso) return "-";

  const value = new Date(iso);
  if (Number.isNaN(value.getTime())) return "-";
  return value.toLocaleString();
}

function formatEventType(event: OrchestrationEvent): string {
  const eventRecord = event as Record<string, unknown>;
  if (typeof eventRecord.type === "string") return eventRecord.type;
  return "event";
}

function formatEventTimestamp(event: OrchestrationEvent): string {
  const eventRecord = event as Record<string, unknown>;
  if (typeof eventRecord.createdAt === "string") return formatDate(eventRecord.createdAt);
  return "";
}

function eventKey(event: OrchestrationEvent): string {
  const eventRecord = event as Record<string, unknown>;
  if (typeof eventRecord.eventId === "string") return eventRecord.eventId;
  if (typeof eventRecord.id === "string") return eventRecord.id;
  return `${formatEventType(event)}-${formatEventTimestamp(event)}`;
}

function AppContent() {
  const queryClient = useQueryClient();
  const cleanupRef = useRef<(() => void) | null>(null);

  const [profiles, setProfiles] = useState<BackendProfile[]>([]);
  const [activeProfileId, setActiveProfileId] = useState<string | null>(null);
  const [initialActiveProfileId, setInitialActiveProfileId] = useState<string | null>(null);
  const [loadingProfiles, setLoadingProfiles] = useState(true);

  const [wsUrlInput, setWsUrlInput] = useState("");
  const [authTokenInput, setAuthTokenInput] = useState("");

  const [client, setClient] = useState<T3MobileClient | null>(null);
  const [connectionStatus, setConnectionStatus] = useState<TransportStatus>({
    state: "disconnected",
  });
  const [welcome, setWelcome] = useState<WsWelcomePayload | null>(null);
  const [recentEvents, setRecentEvents] = useState<OrchestrationEvent[]>([]);
  const [uiError, setUiError] = useState<string | null>(null);

  const activeProfile = useMemo(
    () => profiles.find((profile) => profile.id === activeProfileId) ?? null,
    [activeProfileId, profiles],
  );

  const snapshotQuery = useQuery<OrchestrationReadModel>({
    queryKey: ["orchestration.snapshot", activeProfileId],
    queryFn: async () => {
      if (!client) {
        throw new Error("No active backend connection.");
      }
      return client.getSnapshot();
    },
    enabled: client !== null && activeProfileId !== null,
    refetchInterval: connectionStatus.state === "connected" ? 10_000 : false,
  });

  const disconnectFromBackend = useCallback(async () => {
    cleanupRef.current?.();
    cleanupRef.current = null;

    setClient(null);
    setActiveProfileId(null);
    setWelcome(null);
    setRecentEvents([]);
    setConnectionStatus({ state: "disconnected" });

    await setActiveBackendProfileId(null);
    queryClient.removeQueries({ queryKey: ["orchestration.snapshot"] });
  }, [queryClient]);

  const connectToProfile = useCallback(
    async (profile: BackendProfile) => {
      setUiError(null);
      cleanupRef.current?.();
      cleanupRef.current = null;

      setWelcome(null);
      setRecentEvents([]);
      setConnectionStatus({ state: "connecting" });

      const nextClient = new T3MobileClient({
        profile,
        onStatus: (status) => {
          setConnectionStatus(status);
        },
      });

      const unsubscribeWelcome = nextClient.onWelcome((payload) => {
        setWelcome(payload);
      });

      const unsubscribeDomainEvents = nextClient.onDomainEvent((event) => {
        setRecentEvents((current) => [event, ...current].slice(0, 60));
        void queryClient.invalidateQueries({ queryKey: ["orchestration.snapshot", profile.id] });
      });

      cleanupRef.current = () => {
        unsubscribeWelcome();
        unsubscribeDomainEvents();
        nextClient.dispose();
      };

      setClient(nextClient);
      setActiveProfileId(profile.id);
      await setActiveBackendProfileId(profile.id);

      const now = new Date().toISOString();
      setProfiles((current) => {
        const nextProfiles = current.map((candidate) =>
          candidate.id === profile.id ? { ...candidate, lastConnectedAt: now } : candidate,
        );
        void saveBackendProfiles(nextProfiles);
        return nextProfiles;
      });

      void queryClient.invalidateQueries({ queryKey: ["orchestration.snapshot", profile.id] });
    },
    [queryClient],
  );

  const saveAndConnectProfile = useCallback(async () => {
    try {
      setUiError(null);
      const normalized = normalizeBackendInput(wsUrlInput, authTokenInput);
      const now = new Date().toISOString();

      const existing = profiles.find(
        (profile) => profile.url === normalized.url && (profile.authToken ?? "") === (normalized.authToken ?? ""),
      );

      const profile: BackendProfile = existing
        ? {
            ...existing,
            name: normalized.name,
          }
        : {
            id: createBackendProfileId(),
            name: normalized.name,
            url: normalized.url,
            authToken: normalized.authToken,
            createdAt: now,
            lastConnectedAt: null,
          };

      const nextProfiles = existing
        ? profiles.map((candidate) => (candidate.id === existing.id ? profile : candidate))
        : [profile, ...profiles];

      setProfiles(nextProfiles);
      await saveBackendProfiles(nextProfiles);
      await connectToProfile(profile);

      setWsUrlInput("");
      setAuthTokenInput("");
    } catch (error) {
      setUiError(error instanceof Error ? error.message : "Unable to save backend profile.");
    }
  }, [authTokenInput, connectToProfile, profiles, wsUrlInput]);

  const removeProfile = useCallback(
    async (profileId: string) => {
      const nextProfiles = profiles.filter((profile) => profile.id !== profileId);
      setProfiles(nextProfiles);
      await saveBackendProfiles(nextProfiles);

      if (activeProfileId === profileId) {
        await disconnectFromBackend();
      }

      if (initialActiveProfileId === profileId) {
        setInitialActiveProfileId(null);
      }
    },
    [activeProfileId, disconnectFromBackend, initialActiveProfileId, profiles],
  );

  useEffect(() => {
    let cancelled = false;

    void (async () => {
      const state = await loadBackendState();
      if (cancelled) return;

      setProfiles(state.profiles);
      setInitialActiveProfileId(state.activeProfileId);
      setLoadingProfiles(false);
    })();

    return () => {
      cancelled = true;
      cleanupRef.current?.();
      cleanupRef.current = null;
    };
  }, []);

  useEffect(() => {
    if (loadingProfiles || !initialActiveProfileId) return;

    const profile = profiles.find((candidate) => candidate.id === initialActiveProfileId);
    setInitialActiveProfileId(null);

    if (profile) {
      void connectToProfile(profile);
    }
  }, [connectToProfile, initialActiveProfileId, loadingProfiles, profiles]);

  const snapshotError = snapshotQuery.error instanceof Error ? snapshotQuery.error.message : null;
  const snapshot = snapshotQuery.data;

  if (loadingProfiles) {
    return (
      <SafeAreaView className="flex-1 items-center justify-center bg-slate-100">
        <ActivityIndicator size="small" color="#334155" />
        <Text className="mt-3 text-sm text-slate-600">Loading servers...</Text>
      </SafeAreaView>
    );
  }

  if (client && activeProfile) {
    return (
      <SafeAreaView className="flex-1 bg-slate-100">
        <StatusBar />
        <ScrollView contentContainerStyle={{ padding: 16, gap: 14, paddingBottom: 40 }}>
          <View className="rounded-2xl border border-slate-200 bg-white p-4">
            <View className="flex-row items-start justify-between">
              <View className="max-w-[75%] gap-1">
                <Text className="text-xl font-semibold text-slate-900">T3 Code Mobile</Text>
                <Text className="text-xs text-slate-600">{activeProfile.name}</Text>
                <Text className="text-[11px] text-slate-500">{activeProfile.url}</Text>
              </View>
              <View className={`rounded-full px-3 py-1 ${statusClassName(connectionStatus)}`}>
                <Text className="text-xs font-semibold">{statusLabel(connectionStatus)}</Text>
              </View>
            </View>
            {connectionStatus.detail ? (
              <Text className="mt-3 text-[11px] text-slate-500">{connectionStatus.detail}</Text>
            ) : null}
            <View className="mt-4 flex-row gap-2">
              <View className="flex-1">
                <ThemeButton
                  label={snapshotQuery.isFetching ? "Refreshing..." : "Refresh Snapshot"}
                  onPress={() => {
                    void snapshotQuery.refetch();
                  }}
                  disabled={snapshotQuery.isFetching}
                />
              </View>
              <View className="flex-1">
                <ThemeButton label="Switch Server" variant="ghost" onPress={() => void disconnectFromBackend()} />
              </View>
            </View>
          </View>

          <SectionCard title="Session">
            <Text className="text-sm text-slate-700">Project: {welcome?.projectName ?? "Waiting for welcome event..."}</Text>
            <Text className="text-sm text-slate-700">Workspace: {welcome?.cwd ?? "-"}</Text>
            <Text className="text-sm text-slate-700">
              Bootstrap Thread: {welcome?.bootstrapThreadId ?? "not provided"}
            </Text>
          </SectionCard>

          <SectionCard title="Orchestration Snapshot">
            {snapshotQuery.isLoading ? (
              <View className="items-start gap-2">
                <ActivityIndicator size="small" color="#334155" />
                <Text className="text-sm text-slate-600">Loading snapshot...</Text>
              </View>
            ) : snapshotError ? (
              <Text className="text-sm text-red-700">{snapshotError}</Text>
            ) : snapshot ? (
              <View className="gap-2">
                <Text className="text-sm text-slate-700">Projects: {snapshot.projects.length}</Text>
                <Text className="text-sm text-slate-700">Threads: {snapshot.threads.length}</Text>
                <Text className="text-sm text-slate-700">Updated: {formatDate(snapshot.updatedAt)}</Text>
                <View className="mt-1 gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3">
                  {snapshot.projects.slice(0, 4).map((project) => (
                    <View key={project.id} className="gap-0.5">
                      <Text className="text-sm font-medium text-slate-800">{project.title}</Text>
                      <Text className="text-[11px] text-slate-500">{project.workspaceRoot}</Text>
                    </View>
                  ))}
                  {snapshot.projects.length === 0 ? (
                    <Text className="text-sm text-slate-500">No projects available.</Text>
                  ) : null}
                </View>
              </View>
            ) : (
              <Text className="text-sm text-slate-600">No snapshot data available.</Text>
            )}
          </SectionCard>

          <SectionCard title="Recent Domain Events">
            {recentEvents.length === 0 ? (
              <Text className="text-sm text-slate-500">No events received yet.</Text>
            ) : (
              <View className="gap-2">
                {recentEvents.slice(0, 25).map((event) => (
                  <View
                    key={eventKey(event)}
                    className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2"
                  >
                    <Text className="text-xs font-semibold uppercase text-slate-700">{formatEventType(event)}</Text>
                    <Text className="mt-1 text-[11px] text-slate-500">{formatEventTimestamp(event)}</Text>
                  </View>
                ))}
              </View>
            )}
          </SectionCard>
        </ScrollView>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView className="flex-1 bg-slate-100">
      <StatusBar />
      <ScrollView contentContainerStyle={{ padding: 16, gap: 14, paddingBottom: 40 }}>
        <View className="rounded-2xl border border-slate-200 bg-white p-4">
          <Text className="text-2xl font-semibold text-slate-900">Connect T3 Code</Text>
          <Text className="mt-2 text-sm leading-5 text-slate-600">
            Enter your websocket server URL and optional auth token. Saved servers appear below.
          </Text>

          <View className="mt-4 gap-3">
            <View className="gap-1.5">
              <Text className="text-xs font-semibold uppercase tracking-[1.4px] text-slate-500">Server URL</Text>
              <TextInput
                className="h-11 rounded-xl border border-slate-300 bg-white px-3 text-sm text-slate-900"
                autoCapitalize="none"
                autoCorrect={false}
                keyboardType="url"
                placeholder="ws://localhost:3773"
                placeholderTextColor="#94a3b8"
                value={wsUrlInput}
                onChangeText={setWsUrlInput}
              />
            </View>
            <View className="gap-1.5">
              <Text className="text-xs font-semibold uppercase tracking-[1.4px] text-slate-500">Auth Token (Optional)</Text>
              <TextInput
                className="h-11 rounded-xl border border-slate-300 bg-white px-3 text-sm text-slate-900"
                autoCapitalize="none"
                autoCorrect={false}
                placeholder="token"
                placeholderTextColor="#94a3b8"
                value={authTokenInput}
                onChangeText={setAuthTokenInput}
              />
            </View>
            <ThemeButton label="Save and Connect" onPress={() => void saveAndConnectProfile()} />
          </View>
          {uiError ? <Text className="mt-3 text-sm text-red-700">{uiError}</Text> : null}
        </View>

        <SectionCard title="Saved Backends">
          {profiles.length === 0 ? (
            <Text className="text-sm text-slate-500">No servers saved yet.</Text>
          ) : (
            <View className="gap-3">
              {profiles.map((profile) => (
                <View key={profile.id} className="gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3">
                  <View className="gap-1">
                    <Text className="text-sm font-semibold text-slate-900">{profile.name}</Text>
                    <Text className="text-[11px] text-slate-600">{profile.url}</Text>
                    <Text className="text-[11px] text-slate-500">
                      Token: {profile.authToken ? "configured" : "none"}
                    </Text>
                    <Text className="text-[11px] text-slate-500">
                      Last connected: {formatDate(profile.lastConnectedAt)}
                    </Text>
                  </View>
                  <View className="flex-row gap-2">
                    <View className="flex-1">
                      <ThemeButton
                        label="Connect"
                        onPress={() => {
                          void connectToProfile(profile);
                        }}
                      />
                    </View>
                    <View className="flex-1">
                      <ThemeButton
                        label="Delete"
                        variant="danger"
                        onPress={() => {
                          void removeProfile(profile.id);
                        }}
                      />
                    </View>
                  </View>
                </View>
              ))}
            </View>
          )}
        </SectionCard>
      </ScrollView>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AppContent />
    </QueryClientProvider>
  );
}