<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 { Frown } from "lucide-vue-next";

const authStore = useAuthStore();

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

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

const doLogin = async () => {
  await authStore.signIn(email.value, password.value);
};
</script>

<template>
  <div :class="cn('flex flex-col gap-6', props.class)">
    <Card>
      <CardHeader class="text-center">
        <CardTitle class="text-xl">Login</CardTitle>
        <CardDescription>Enter your email below to login</CardDescription>
      </CardHeader>
      <CardContent>
        <form autocomplete="off" @submit.prevent="doLogin">
          <FieldGroup>
            <Field>
              <FieldLabel for="email">Email</FieldLabel>
              <Input id="email" v-model="email" type="email" placeholder="m@example.com" required />
            </Field>
            <Field>
              <FieldLabel for="password">Password</FieldLabel>
              <Input id="password" v-model="password" type="password" required />
            </Field>
            <Field>
              <Button type="submit">Login</Button>
              <FieldDescription class="text-center">
                Don't have an account?
                <NuxtLink to="/auth/create-account">
                  <Button variant="link">Create account</Button>
                </NuxtLink>
              </FieldDescription>
            </Field>
            <Field v-if="authStore.lastError" variant="error">
              <FieldDescription class="text-destructive flex items-center gap-2">
                <Frown /> {{ authStore.lastError }}
              </FieldDescription>
            </Field>
          </FieldGroup>
        </form>
      </CardContent>
    </Card>
    <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>
