import { View, Text, ScrollView } from "react-native";
import { Container } from "@/components/container";
{{#if (eq api "orpc")}}
import { useQuery } from "@tanstack/react-query";
import { orpc } from "@/utils/orpc";
{{/if}}
{{#if (eq api "trpc")}}
import { useQuery } from "@tanstack/react-query";
import { trpc } from "@/utils/trpc";
{{/if}}
{{#if (eq backend "convex")}}
import { useQuery } from "convex/react";
import { api } from "@{{ projectName }}/backend/convex/_generated/api.js";
{{/if}}

export default function Home() {
  {{#if (eq api "orpc")}}
  const healthCheck = useQuery(orpc.healthCheck.queryOptions());
  {{/if}}
  {{#if (eq api "trpc")}}
  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
  {{/if}}
  {{#if (eq backend "convex")}}
  const healthCheck = useQuery(api.healthCheck.get);
  {{/if}}

  return (
    <Container>
      <ScrollView className="py-4 flex-1">
        <Text className="font-mono text-foreground text-2xl font-bold mb-6">
          BETTER T STACK
        </Text>

        <View className="rounded-lg border border-foreground p-4">
          <Text className="mb-2 font-medium text-foreground">API Status</Text>
          <View className="flex-row items-center gap-2">
            <View
              className={`h-2.5 w-2.5 rounded-full ${
                {{#if (or (eq api "orpc") (eq api "trpc"))}}
                  healthCheck.data ? "bg-green-500" : "bg-red-500"
                {{else}}
                  healthCheck ? "bg-green-500" : "bg-red-500"
                {{/if}}
              }`}
            />
            <Text className="text-sm text-foreground">
              {{#if (eq api "orpc")}}
                {healthCheck.isLoading
                  ? "Checking..."
                  : healthCheck.data
                    ? "Connected"
                    : "Disconnected"}
              {{/if}}
              {{#if (eq api "trpc")}}
                {healthCheck.isLoading
                  ? "Checking..."
                  : healthCheck.data
                    ? "Connected"
                    : "Disconnected"}
              {{/if}}
              {{#if (eq backend "convex")}}
                {healthCheck === undefined
                  ? "Checking..."
                  : healthCheck === "OK"
                    ? "Connected"
                    : "Error"}
              {{/if}}
            </Text>
          </View>
        </View>
      </ScrollView>
    </Container>
  );
}