<script setup lang="ts">
import type { HTMLAttributes } from "vue";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

import { authClient } from "~~/shared/utils/auth-client";

const props = defineProps<{
  class?: HTMLAttributes["class"];
}>();

const name = ref("");
const email = ref("");
const password = ref("");
const confirmPassword = ref("");

const createAccount = async () => {
  await authClient.signUp.email({
    name: name.value,
    email: email.value,
    password: password.value,
    // callbackURL: "/",
  });
};
</script>

<template>
  <div :class="cn('flex flex-col gap-6', props.class)">
    <ClientOnly>
      <Card>
        <CardHeader class="text-center">
          <CardTitle class="text-xl">Create your account</CardTitle>
          <CardDescription>Enter your email below to create your account</CardDescription>
        </CardHeader>
        <CardContent>
          <form autocomplete="off" @submit.prevent="createAccount">
            <FieldGroup>
              <Field>
                <FieldLabel for="name">Full Name</FieldLabel>
                <Input id="name" v-model="name" type="text" placeholder="John Doe" required />
              </Field>
              <Field>
                <FieldLabel for="email">Email</FieldLabel>
                <Input id="email" v-model="email" type="email" placeholder="m@example.com" required />
              </Field>
              <Field>
                <Field class="grid grid-cols-2 gap-4">
                  <Field>
                    <FieldLabel for="password">Password</FieldLabel>
                    <Input id="password" v-model="password" type="password" required />
                  </Field>
                  <Field>
                    <FieldLabel for="confirm-password">Confirm Password</FieldLabel>
                    <Input id="confirm-password" v-model="confirmPassword" type="password" required />
                  </Field>
                </Field>
                <FieldDescription>Must be at least 8 characters long.</FieldDescription>
              </Field>
              <Field>
                <Button type="submit">Create Account</Button>
                <FieldDescription class="text-center">
                  Already have an account?
                  <NuxtLink to="/auth/login">
                    <Button variant="link">Log in</Button>
                  </NuxtLink>
                </FieldDescription>
              </Field>
            </FieldGroup>
          </form>
        </CardContent>
      </Card>
    </ClientOnly>
    <FieldDescription class="px-6 text-center">
      <NuxtLink to="/legal/terms-of-service"><Button variant="link">Terms of Service</Button></NuxtLink>
      <NuxtLink to="/legal/privacy-policy"><Button variant="link">Privacy Policy</Button></NuxtLink>
    </FieldDescription>
  </div>
</template>
