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

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";
import { useBuilderPrefix } from "../../composables/useBuilderPrefix";
import { sanitizeHtml } from "../../utils/sanitize";

interface SocialProvider {
  identifier: string;
  label: string;
  url: string;
  icon: string | null;
}

const { t } = useTranslations();
const prefix = useBuilderPrefix();
const page = usePage<{
  auth?: { socialProviders?: SocialProvider[] };
  flash?: { error?: string };
}>();

const socialProviders = computed(() => page.props.auth?.socialProviders ?? []);

const flashError = computed(() => page.props.flash?.error ?? null);

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

function submit() {
  form.post(`/${prefix}/login`);
}

function navigateTo(url: string) {
  window.location.href = url;
}
</script>

<template>
  <Head :title="t('builder.auth.login')" />

  <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.auth.title") }}</CardTitle>
        <CardDescription>{{ t("builder.auth.subtitle") }}</CardDescription>
      </CardHeader>

      <CardContent>
        <div
          v-if="flashError"
          class="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive"
        >
          {{ flashError }}
        </div>

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

          <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="current-password"
            />
            <FormMessage :message="form.errors.password" />
          </FormItem>

          <Button type="submit" :disabled="form.processing" class="w-full">
            {{ t("builder.auth.login") }}
          </Button>
        </form>

        <template v-if="socialProviders.length > 0">
          <div class="relative my-4">
            <div class="absolute inset-0 flex items-center">
              <span class="w-full border-t" />
            </div>
            <div class="relative flex justify-center text-xs uppercase">
              <span class="bg-background px-2 text-muted-foreground">
                {{ t("builder.auth.or_continue_with") }}
              </span>
            </div>
          </div>

          <div class="space-y-2">
            <Button
              v-for="provider in socialProviders"
              :key="provider.identifier"
              type="button"
              variant="outline"
              class="w-full"
              @click="navigateTo(provider.url)"
            >
              <!-- eslint-disable-next-line vue/no-v-html -->
              <span
                v-if="provider.icon"
                class="size-4 shrink-0"
                v-html="sanitizeHtml(provider.icon)"
              />
              {{ provider.label }}
            </Button>
          </div>
        </template>
      </CardContent>
    </Card>
  </div>
</template>
