<script setup lang="ts">
import { Head, useForm } from "@inertiajs/vue3";
import AuthLayout from "../../Layouts/AuthLayout.vue";
import { useBuilderPrefix } from "../../composables/useBuilderPrefix";

defineOptions({ layout: AuthLayout });

import Button from "../../components/ui/Button.vue";
import Card from "../../components/ui/Card.vue";
import CardContent from "../../components/ui/CardContent.vue";
import CardDescription from "../../components/ui/CardDescription.vue";
import CardHeader from "../../components/ui/CardHeader.vue";
import CardTitle from "../../components/ui/CardTitle.vue";
import FormItem from "../../components/ui/FormItem.vue";
import FormLabel from "../../components/ui/FormLabel.vue";
import FormMessage from "../../components/ui/FormMessage.vue";
import Input from "../../components/ui/Input.vue";
import { useTranslations } from "../../composables/useTranslations";

const { t } = useTranslations();
const prefix = useBuilderPrefix();

const props = defineProps<{
  token: string;
  email: string;
}>();

const form = useForm({
  email: props.email,
  password: "",
  password_confirmation: "",
});

function submit() {
  form.post(`/${prefix}/invite/${props.token}`);
}
</script>

<template>
  <Head :title="t('builder.invite.set_password_title')" />

  <div class="flex min-h-screen items-center justify-center bg-muted/40">
    <Card class="w-full max-w-sm">
      <CardHeader>
        <CardTitle class="text-xl">{{
          t("builder.invite.set_password_title")
        }}</CardTitle>
        <CardDescription>
          {{ t("builder.invite.set_password_description") }}
          <span class="font-medium text-foreground">{{ email }}</span>
        </CardDescription>
      </CardHeader>

      <CardContent>
        <form class="space-y-4" @submit.prevent="submit">
          <FormItem>
            <FormLabel :error="!!form.errors.password" for="password">
              {{ t("builder.auth.password") }}
            </FormLabel>
            <Input
              id="password"
              v-model="form.password"
              type="password"
              name="password"
              autocomplete="new-password"
            />
            <FormMessage :message="form.errors.password" />
          </FormItem>

          <FormItem>
            <FormLabel
              :error="!!form.errors.password_confirmation"
              for="password_confirmation"
            >
              {{ t("builder.account.confirm_password") }}
            </FormLabel>
            <Input
              id="password_confirmation"
              v-model="form.password_confirmation"
              type="password"
              name="password_confirmation"
              autocomplete="new-password"
            />
            <FormMessage :message="form.errors.password_confirmation" />
          </FormItem>

          <Button type="submit" :disabled="form.processing" class="w-full">
            {{ t("builder.invite.set_password_button") }}
          </Button>
        </form>
      </CardContent>
    </Card>
  </div>
</template>
