<script setup lang="ts">
import { z } from 'zod'

useSeoMeta({
  title: 'Inscription - Wibx Tour Layer 2',
  description: 'Créez votre compte Wibx Tour et commencez à déployer des connexions réseau Layer 2 en quelques minutes'
})

const schema = z.object({
  firstName: z.string().min(2, 'Le prénom doit contenir au moins 2 caractères'),
  lastName: z.string().min(2, 'Le nom doit contenir au moins 2 caractères'),
  company: z.string().min(2, 'Le nom de l\'entreprise doit contenir au moins 2 caractères'),
  email: z.string().email('Email invalide'),
  password: z.string().min(8, 'Le mot de passe doit contenir au moins 8 caractères'),
  confirmPassword: z.string(),
  terms: z.boolean().refine(val => val === true, 'Vous devez accepter les conditions d\'utilisation')
}).refine((data) => data.password === data.confirmPassword, {
  message: 'Les mots de passe ne correspondent pas',
  path: ['confirmPassword']
})

type Schema = z.output<typeof schema>

const state = reactive({
  firstName: '',
  lastName: '',
  company: '',
  email: '',
  password: '',
  confirmPassword: '',
  terms: false
})

const pending = ref(false)
const success = ref(false)
const error = ref('')

async function onSubmit(_event: Schema) {
  try {
    pending.value = true
    error.value = ''

    // Simulation de l'inscription
    await new Promise(resolve => setTimeout(resolve, 1500))

    success.value = true

    // Redirection après succès
    setTimeout(() => {
      navigateTo('/login')
    }, 2000)
  } catch (_err) {
    error.value = 'Une erreur s\'est produite lors de l\'inscription'
  } finally {
    pending.value = false
  }
}
</script>

<template>
  <div class="min-h-screen flex">
    <!-- Left side - Form -->
    <div class="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8">
      <div class="max-w-md w-full space-y-8">
        <div class="text-center">
          <h1 class="text-3xl font-bold tracking-tight">
            Créer un compte
          </h1>
          <p class="mt-2 text-gray-600 dark:text-gray-400">
            Rejoignez Wibx Tour et déployez votre première connexion Layer 2
          </p>
        </div>

        <UAlert
          v-if="success"
          icon="i-lucide-check-circle"
          color="green"
          variant="soft"
          title="Compte créé avec succès !"
          description="Vous allez être redirigé vers la page de connexion..."
          class="mb-4"
        />

        <UAlert
          v-else-if="error"
          icon="i-lucide-alert-circle"
          color="red"
          variant="soft"
          :title="error"
          class="mb-4"
        />

        <UForm
          v-if="!success"
          :schema="schema"
          :state="state"
          class="space-y-6"
          @submit="onSubmit"
        >
          <div class="grid grid-cols-2 gap-4">
            <UFormGroup label="Prénom" name="firstName" required>
              <UInput
                v-model="state.firstName"
                placeholder="John"
                icon="i-lucide-user"
                size="lg"
              />
            </UFormGroup>

            <UFormGroup label="Nom" name="lastName" required>
              <UInput
                v-model="state.lastName"
                placeholder="Doe"
                icon="i-lucide-user"
                size="lg"
              />
            </UFormGroup>
          </div>

          <UFormGroup label="Entreprise" name="company" required>
            <UInput
              v-model="state.company"
              placeholder="Mon Entreprise"
              icon="i-lucide-building"
              size="lg"
            />
          </UFormGroup>

          <UFormGroup label="Email" name="email" required>
            <UInput
              v-model="state.email"
              type="email"
              placeholder="votre@email.com"
              icon="i-lucide-mail"
              size="lg"
            />
          </UFormGroup>

          <UFormGroup label="Mot de passe" name="password" required>
            <UInput
              v-model="state.password"
              type="password"
              placeholder="••••••••"
              icon="i-lucide-lock"
              size="lg"
            />
          </UFormGroup>

          <UFormGroup label="Confirmer le mot de passe" name="confirmPassword" required>
            <UInput
              v-model="state.confirmPassword"
              type="password"
              placeholder="••••••••"
              icon="i-lucide-lock"
              size="lg"
            />
          </UFormGroup>

          <UFormGroup name="terms" required>
            <UCheckbox
              v-model="state.terms"
              name="terms"
            >
              <template #label>
                <span class="text-sm">
                  J'accepte les
                  <ULink to="/terms" class="text-primary hover:text-primary-600">
                    conditions d'utilisation
                  </ULink>
                  et la
                  <ULink to="/privacy" class="text-primary hover:text-primary-600">
                    politique de confidentialité
                  </ULink>
                </span>
              </template>
            </UCheckbox>
          </UFormGroup>

          <UButton
            type="submit"
            :loading="pending"
            size="lg"
            block
          >
            Créer mon compte
          </UButton>
        </UForm>

        <div v-if="!success" class="text-center">
          <p class="text-sm text-gray-600 dark:text-gray-400">
            Déjà un compte ?
            <ULink
              to="/login"
              class="font-medium text-primary hover:text-primary-600"
            >
              Se connecter
            </ULink>
          </p>
        </div>

        <!-- Social Signup (Optional) -->
        <div v-if="!success" class="mt-6">
          <div class="relative">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-300 dark:border-gray-600" />
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-2 bg-white dark:bg-gray-900 text-gray-500">
                Ou s'inscrire avec
              </span>
            </div>
          </div>

          <div class="mt-6 grid grid-cols-2 gap-3">
            <UButton
              variant="outline"
              size="lg"
              block
            >
              <UIcon name="i-simple-icons-google" class="mr-2" />
              Google
            </UButton>

            <UButton
              variant="outline"
              size="lg"
              block
            >
              <UIcon name="i-simple-icons-github" class="mr-2" />
              GitHub
            </UButton>
          </div>
        </div>
      </div>
    </div>

    <!-- Right side - Benefits -->
    <div class="hidden lg:block relative flex-1">
      <div class="absolute inset-0 bg-gradient-to-br from-green-500 to-blue-600">
        <div class="flex items-center justify-center h-full p-12">
          <div class="text-center text-white">
            <div class="mb-8">
              <UIcon name="i-lucide-zap" size="80" class="mx-auto mb-4" />
              <h2 class="text-4xl font-bold mb-4">
                Commencez Gratuitement
              </h2>
              <p class="text-xl opacity-90">
                Déployez votre première connexion Layer 2 en 5 minutes
              </p>
            </div>

            <div class="space-y-6 text-left max-w-md">
              <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
                <div class="flex items-center mb-2">
                  <UIcon name="i-lucide-gift" class="mr-3 text-yellow-300" />
                  <span class="font-semibold">Offre de Lancement</span>
                </div>
                <p class="text-sm opacity-90">
                  Crédit de €100 offert pour vos premières connexions
                </p>
              </div>

              <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
                <div class="flex items-center mb-2">
                  <UIcon name="i-lucide-clock" class="mr-3 text-blue-300" />
                  <span class="font-semibold">Déploiement Instantané</span>
                </div>
                <p class="text-sm opacity-90">
                  Vos connexions Layer 2 prêtes en moins de 5 minutes
                </p>
              </div>

              <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
                <div class="flex items-center mb-2">
                  <UIcon name="i-lucide-shield" class="mr-3 text-green-300" />
                  <span class="font-semibold">Sécurité Enterprise</span>
                </div>
                <p class="text-sm opacity-90">
                  Connexions privées avec chiffrement de bout en bout
                </p>
              </div>

              <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
                <div class="flex items-center mb-2">
                  <UIcon name="i-lucide-headphones" class="mr-3 text-purple-300" />
                  <span class="font-semibold">Support 24/7</span>
                </div>
                <p class="text-sm opacity-90">
                  Équipe d'experts disponible en permanence
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template> 