<script lang="ts">
  import { Button } from '$lib/components/ui/button';
  import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
  } from '$lib/components/ui/card';
  import { Input } from '$lib/components/ui/input';
  import { Label } from '$lib/components/ui/label';
  import { ThemeToggle } from '$lib/components/ui/theme-toggle';
  import { LanguageToggle } from '$lib/components/ui/language-toggle';
  import type { ActionData, PageData } from './$types';
  import { signIn } from '@auth/sveltekit/client';
  import { languageStore } from '$lib/stores/language.svelte';

  let { form, data }: { form: ActionData; data: PageData } = $props();

  const t = $derived(languageStore.t);
</script>

<div class="min-h-screen flex items-center justify-center p-4">
  <div class="absolute top-4 right-4 flex items-center gap-1 sm:gap-2">
    <LanguageToggle />
    <ThemeToggle />
  </div>
  <Card class="w-full max-w-md">
    <CardHeader>
      <CardTitle class="text-2xl">{t.auth.createAccount}</CardTitle>
      <CardDescription>{t.auth.signUpPrompt}</CardDescription>
    </CardHeader>
    <CardContent class="space-y-4">
      {#if form?.error}
        <div
          class="bg-red-50 border border-red-200 text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300 px-4 py-3 rounded"
        >
          {form.error}
        </div>
      {/if}

      <form method="POST" class="space-y-4">
        <div class="space-y-2">
          <Label for="name">{t.form.name}</Label>
          <Input id="name" name="name" type="text" required value={form?.name || ''} />
        </div>

        <div class="space-y-2">
          <Label for="username">{t.form.username}</Label>
          <Input id="username" name="username" type="text" required value={form?.username || ''} />
        </div>

        <div class="space-y-2">
          <Label for="password">{t.form.password}</Label>
          <Input id="password" name="password" type="password" required minlength={8} />
        </div>

        <div class="space-y-2">
          <Label for="confirmPassword">{t.form.confirmPassword}</Label>
          <Input
            id="confirmPassword"
            name="confirmPassword"
            type="password"
            required
            minlength={8}
          />
        </div>

        <Button type="submit" class="w-full">{t.auth.signUp}</Button>
      </form>

      {#if data.oauthProviders.length > 0}
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <span class="w-full border-t"></span>
          </div>
          <div class="relative flex justify-center text-xs uppercase">
            <span class="bg-card px-2 text-muted-foreground">{t.auth.continueWith}</span>
          </div>
        </div>

        {#each data.oauthProviders as provider}
          <Button
            type="button"
            variant="outline"
            class="w-full"
            onclick={() => signIn(provider.id, { callbackUrl: '/dashboard' })}
          >
            {t.auth.signUp} with {provider.name}
          </Button>
        {/each}
      {/if}

      <div class="text-center text-sm text-muted-foreground">
        {t.auth.alreadyHaveAccount}
        <a href="/signin" class="text-primary hover:underline">{t.auth.signIn}</a>
      </div>
    </CardContent>
  </Card>
</div>
