<script setup lang="ts">
import { Check, Loader2, ShieldCheck } from 'lucide-vue-next'
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { toast } from 'vue-sonner'

import api from '@/services/api'

const { t } = useI18n()
const router = useRouter()

const loading = ref(false)
const form = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  agree: false,
})

const isValid = computed(() => {
  return form.value.username
    && form.value.email
    && form.value.password
    && form.value.password === form.value.confirmPassword
    && form.value.agree
})

async function handleRegister() {
  if (!form.value.username) {
    toast.error(t('auth.register.usernameRequired'))
    return
  }
  if (!form.value.email) {
    toast.error(t('auth.register.emailRequired'))
    return
  }
  if (!form.value.password) {
    toast.error(t('auth.register.passwordRequired'))
    return
  }
  if (form.value.password.length < 6) {
    toast.error(t('auth.register.passwordMinLength'))
    return
  }
  if (form.value.password !== form.value.confirmPassword) {
    toast.error(t('auth.register.passwordMismatch'))
    return
  }
  if (!form.value.agree) {
    toast.error(t('auth.register.agreeRequired'))
    return
  }

  loading.value = true
  try {
    await api.post('/auth/register', {
      username: form.value.username,
      email: form.value.email,
      password: form.value.password,
    })

    toast.success(t('auth.register.registerSuccess'))
    router.push('/login')
  }
  catch (error: any) {
    console.error('Registration failed:', error)
    toast.error(error.message || t('auth.register.registerFailed'))
  }
  finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="min-h-screen flex">
    <div class="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-primary/10 via-primary/5 to-background relative overflow-hidden">
      <div class="absolute inset-0">
        <div class="absolute top-20 left-20 w-72 h-72 bg-primary/20 rounded-full blur-3xl" />
        <div class="absolute bottom-20 right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
      </div>
      <div class="relative z-10 flex flex-col justify-center px-12">
        <div class="flex items-center gap-3 mb-8">
          <div class="size-12 rounded-xl bg-primary flex items-center justify-center">
            <ShieldCheck class="size-7 text-primary-foreground" />
          </div>
          <span class="text-2xl font-bold">{{ t('auth.register.platformName') }}</span>
        </div>
        <h1 class="text-4xl font-bold mb-4">
          {{ t('auth.register.heroTitle') }}
        </h1>
        <p class="text-lg text-muted-foreground mb-8">
          {{ t('auth.register.heroDesc') }}
        </p>
        <div class="space-y-4">
          <div class="flex items-center gap-3">
            <div class="size-8 rounded-full bg-primary/20 flex items-center justify-center">
              <Check class="size-4 text-primary" />
            </div>
            <span>{{ t('auth.register.feature1') }}</span>
          </div>
          <div class="flex items-center gap-3">
            <div class="size-8 rounded-full bg-primary/20 flex items-center justify-center">
              <Check class="size-4 text-primary" />
            </div>
            <span>{{ t('auth.register.feature2') }}</span>
          </div>
          <div class="flex items-center gap-3">
            <div class="size-8 rounded-full bg-primary/20 flex items-center justify-center">
              <Check class="size-4 text-primary" />
            </div>
            <span>{{ t('auth.register.feature3') }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="flex-1 flex items-center justify-center p-8">
      <div class="w-full max-w-md">
        <div class="text-center mb-8 lg:hidden">
          <div class="flex items-center justify-center gap-3 mb-4">
            <div class="size-10 rounded-xl bg-primary flex items-center justify-center">
              <ShieldCheck class="size-6 text-primary-foreground" />
            </div>
            <span class="text-xl font-bold">{{ t('auth.register.platformName') }}</span>
          </div>
        </div>

        <div class="mb-8">
          <h2 class="text-2xl font-bold mb-2">
            {{ t('auth.register.createAccount') }}
          </h2>
          <p class="text-muted-foreground">
            {{ t('auth.register.registerDesc') }}
          </p>
        </div>

        <form class="space-y-5" @submit.prevent="handleRegister">
          <div class="space-y-2">
            <UiLabel for="username">{{ t('auth.register.username') }}</UiLabel>
            <UiInput
              id="username"
              v-model="form.username"
              type="text"
              :placeholder="t('auth.register.usernamePlaceholder')"
              :disabled="loading"
            />
          </div>

          <div class="space-y-2">
            <UiLabel for="email">{{ t('auth.register.email') }}</UiLabel>
            <UiInput
              id="email"
              v-model="form.email"
              type="email"
              :placeholder="t('auth.register.emailPlaceholder')"
              :disabled="loading"
            />
          </div>

          <div class="space-y-2">
            <UiLabel for="password">{{ t('auth.register.password') }}</UiLabel>
            <UiInput
              id="password"
              v-model="form.password"
              type="password"
              :placeholder="t('auth.register.passwordPlaceholder')"
              :disabled="loading"
            />
          </div>

          <div class="space-y-2">
            <UiLabel for="confirmPassword">{{ t('auth.register.confirmPassword') }}</UiLabel>
            <UiInput
              id="confirmPassword"
              v-model="form.confirmPassword"
              type="password"
              :placeholder="t('auth.register.confirmPasswordPlaceholder')"
              :disabled="loading"
            />
          </div>

          <div class="flex items-start gap-2">
            <UiCheckbox
              id="agree"
              v-model:checked="form.agree"
            />
            <UiLabel for="agree" class="text-sm font-normal cursor-pointer leading-tight">
              {{ t('auth.register.agreeTerms') }}
              <a href="#" class="text-primary hover:underline">{{ t('auth.register.termsOfService') }}</a>
              {{ t('auth.register.and') }}
              <a href="#" class="text-primary hover:underline">{{ t('auth.register.privacyPolicy') }}</a>
            </UiLabel>
          </div>

          <UiButton
            type="submit"
            class="w-full"
            :disabled="loading || !isValid"
          >
            <Loader2 v-if="loading" class="mr-2 h-4 w-4 animate-spin" />
            {{ loading ? t('auth.register.registering') : t('auth.register.registerBtn') }}
          </UiButton>
        </form>

        <div class="mt-6 text-center text-sm text-muted-foreground">
          {{ t('auth.register.hasAccount') }}
          <router-link to="/login" class="text-primary hover:underline">
            {{ t('auth.register.loginNow') }}
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
