<script setup lang="ts">
import { ref, computed } from 'vue'
import { useAuth } from './composables/useAuth'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Alert, AlertDescription } from '@/components/ui/alert'

const props = defineProps<{
  token: string
  onSuccess?: () => void
  onLogin?: () => void
}>()

const { completePasswordReset, isLoading, error } = useAuth()

const password = ref('')
const confirmPassword = ref('')
const completed = ref(false)

const passwordsMatch = computed(() => password.value === confirmPassword.value)

const isFormValid = computed(() => {
  return password.value.length >= 8 && passwordsMatch.value
})

const passwordError = computed(() => {
  if (confirmPassword.value && !passwordsMatch.value) {
    return 'Passwords do not match'
  }
  if (password.value && password.value.length < 8) {
    return 'Password must be at least 8 characters'
  }
  return null
})

async function handleSubmit() {
  if (!isFormValid.value) return

  const result = await completePasswordReset({
    token: props.token,
    new_password: password.value,
  })

  if (result.success) {
    completed.value = true
    props.onSuccess?.()
  }
}
</script>

<template>
  <Card class="w-full max-w-md">
    <CardHeader class="space-y-1">
      <CardTitle class="text-2xl font-bold">Set new password</CardTitle>
      <CardDescription>
        Enter your new password below
      </CardDescription>
    </CardHeader>

    <template v-if="!completed">
      <form @submit.prevent="handleSubmit">
        <CardContent class="space-y-4">
          <Alert v-if="error" variant="destructive">
            <AlertDescription>\{{ error }}</AlertDescription>
          </Alert>

          <div class="space-y-2">
            <Label for="password">New Password</Label>
            <Input
              id="password"
              v-model="password"
              type="password"
              placeholder="Enter your new password"
              autocomplete="new-password"
              required
            />
          </div>

          <div class="space-y-2">
            <Label for="confirmPassword">Confirm New Password</Label>
            <Input
              id="confirmPassword"
              v-model="confirmPassword"
              type="password"
              placeholder="Confirm your new password"
              autocomplete="new-password"
              required
              :class="{ 'border-destructive': passwordError }"
            />
            <p v-if="passwordError" class="text-sm text-destructive">
              \{{ passwordError }}
            </p>
          </div>
        </CardContent>

        <CardFooter>
          <Button
            type="submit"
            class="w-full"
            :disabled="!isFormValid || isLoading"
          >
            <span v-if="isLoading">Resetting...</span>
            <span v-else>Reset password</span>
          </Button>
        </CardFooter>
      </form>
    </template>

    <template v-else>
      <CardContent class="space-y-4">
        <Alert>
          <AlertDescription>
            Your password has been reset successfully. You can now sign in with your new password.
          </AlertDescription>
        </Alert>
      </CardContent>

      <CardFooter>
        <Button
          v-if="onLogin"
          type="button"
          class="w-full"
          @click="onLogin"
        >
          Sign in
        </Button>
      </CardFooter>
    </template>
  </Card>
</template>
