import {
  Button,
  PasswordInput,
  TextInput,
  Flex,
  Anchor,
} from "@mantine/core";
import { Link } from "react-router";
import { useForm } from "@mantine/form";
import { toast } from "sonner";
import { useCoreFetcher } from "@/lib/features/useCoreFetcher";

export default function SigninForm() {
  const { trigger: signinTrigger, isLoading } = useCoreFetcher(
    "signin",
    "post",
    {
      onError: (error) =>
        toast.error(
          (error as any)?.message ?? "Signin Failed. Please try again.",
        ),
    },
  );

  const form = useForm({
    mode: "controlled",
    initialValues: { email: "", password: "" },
    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : "Invalid email"),
      password: (value) =>
        value.length < 4 ? "Password must be atleast 4 characters long" : null,
    },
  });

  const handleSubmit = async (data: { email: string; password: string }) => {
    await signinTrigger(data);
  };

  return (
    <form onSubmit={form.onSubmit(handleSubmit)}>
      <TextInput
        label="Registered Email"
        placeholder="Enter email address"
        key={form.key("email")}
        {...form.getInputProps("email")}
      />
      <PasswordInput
        mt="sm"
        label="Password"
        placeholder="Enter password"
        key={form.key("password")}
        type="password"
        {...form.getInputProps("password")}
      />
      <Flex justify="flex-end" mt={4}>
        <Anchor component={Link} to="/forgot-password" size="md" fw={500}>
          Forgot Password?
        </Anchor>
      </Flex>
      <Button
        type="submit"
        mt="sm"
        size="md"
        fullWidth
        loading={isLoading}
      >
        Sign In
      </Button>
    </form>
  );
}