<script setup lang="ts">
import CrmAuthLoginForm from "~~/app/components/workspace/auth/CrmAuthLoginForm.vue";
import { useMutation } from "@vue/apollo-composable";
import { LoginMutationDocument } from "~~/graphql/generated";

const phone = ref("");
const password = ref("");
const error = ref<string | null>(null);
const busy = ref(false);

const { mutate: doLogin } = useMutation(LoginMutationDocument);

async function submit() {
  error.value = null;
  busy.value = true;
  try {
    await doLogin({ phone: phone.value, password: password.value });
    await navigateTo("/", { replace: true });
  } catch (e: any) {
    error.value = e?.data?.message || e?.message || "Login failed";
  } finally {
    busy.value = false;
  }
}
</script>

<template>
  <div class="h-[100dvh] overflow-hidden bg-base-200/35">
    <CrmAuthLoginForm
      :phone="phone"
      :password="password"
      :error="error"
      :busy="busy"
      @update:phone="phone = $event"
      @update:password="password = $event"
      @submit="submit"
    />
  </div>
</template>
