import { Text, ScrollView, Card, Separator, XStack } from "tamagui";
import React from "react";
import FormField from "@/components/ui/form";
import { InputField } from "@/components/ui/input";
import { useZForm } from "@/hooks/useZForm";
import { Link, router, Stack } from "expo-router";
import Button from "@/components/ui/button";
import ThemeSwitcher from "@/components/containers/theme-switcher";
import { useMutation } from "@tanstack/react-query";
import { z } from "zod";
import { ErrorAlert } from "@/components/ui/alert";
import { loginSchema } from "./schema";
import Icons from "@/components/ui/icons";
import tamaguiConfig from "@/tamagui.config";
import { useLoginMutation } from "./hooks";

export default function LoginPage() {
  const form = useZForm(loginSchema);
  const login = useLoginMutation();

  const onSubmit = form.handleSubmit((values) => {
    login.mutate(values);
  });

  return (
    <>
      <Stack.Screen
        options={{
          contentStyle: {
            width: "100%",
            maxWidth: tamaguiConfig.media.xs.maxWidth,
            marginHorizontal: "auto",
          },
          title: "Login",
          headerTitle: "",
          headerRight: () => (
            <ThemeSwitcher bg="$colorTransparent" $gtSm={{ mr: "$3" }} />
          ),
        }}
      />

      <ScrollView
        contentContainerStyle={{
          padding: "$4",
          pb: "$12",
          justifyContent: "center",
          flexGrow: 1,
        }}
      >
        <Card bordered p="$4" gap="$4">
          <Text fontSize="$9" mt="$4">
            Login
          </Text>

          <ErrorAlert error={login.error} />

          <FormField vertical label="Username/Email">
            <InputField
              form={form}
              name="username"
              onSubmitEditing={onSubmit}
            />
          </FormField>
          <FormField vertical label="Password">
            <InputField
              form={form}
              name="password"
              secureTextEntry
              onSubmitEditing={onSubmit}
            />
          </FormField>

          <Separator />

          <Button
            icon={<Icons name="login" size={16} />}
            onPress={onSubmit}
            isLoading={login.isPending}
          >
            Login
          </Button>

          <XStack justifyContent="space-between">
            <Text textAlign="center" fontSize="$4">
              Not registered yet?{" "}
              <Link href="/auth/register" asChild>
                <Text cursor="pointer" fontWeight="600">
                  Register Now.
                </Text>
              </Link>
            </Text>

            <Link href="/auth/reset-password" asChild>
              <Text cursor="pointer" fontWeight="600" fontSize="$4">
                Reset Password
              </Text>
            </Link>
          </XStack>

          <Separator w="100%" />

          <Button
            onPress={() => router.push("/server")}
            bg="$colorTransparent"
            icon={<Icons name="desktop-classic" size={16} />}
          >
            Change Server
          </Button>
        </Card>
      </ScrollView>
    </>
  );
}