<script setup lang="ts">
import { Form, Link } from '@adonisjs/inertia/vue'
import { useForm } from '@inertiajs/vue3'
import EmptyLayout from '~/pages/layout/emptyLayout.vue'

defineOptions({ layout: EmptyLayout })

const form = useForm({
  name: '',
  email: '',
  password: '',
  passwordConfirmation: '',
})
</script>

<template>
  <div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gradient-to-br from-gray-100 to-gray-200">
    <div class="w-full max-w-md p-6 sm:p-8 bg-white rounded-lg shadow-lg">
      <div class="flex flex-col items-center justify-center mb-8">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Create Account</h1>
        <p class="text-sm text-gray-600 mt-2">Join PC Creator today</p>
      </div>

      <Form route="new_account.store" #default="{ processing, errors }">
        <div class="space-y-4 sm:space-y-6">
          <div>
            <label class="block">
              <span class="text-sm font-medium text-gray-700 mb-2 block">Full Name</span>
              <input
                v-model="form.name"
                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
                name="name"
                type="text"
                placeholder="Enter your full name"
              />
            </label>
          </div>

          <div>
            <label class="block">
              <span class="text-sm font-medium text-gray-700 mb-2 block">Email</span>
              <input
                v-model="form.email"
                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
                name="email"
                type="email"
                placeholder="Enter your email"
              />
            </label>
          </div>

          <div>
            <label class="block">
              <span class="text-sm font-medium text-gray-700 mb-2 block">Password</span>
              <input
                v-model="form.password"
                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
                name="password"
                type="password"
                placeholder="Enter your password"
              />
            </label>
          </div>

          <div>
            <label class="block">
              <span class="text-sm font-medium text-gray-700 mb-2 block">Confirm Password</span>
              <input
                v-model="form.passwordConfirmation"
                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
                name="passwordConfirmation"
                type="password"
                placeholder="Confirm your password"
              />
            </label>
          </div>

          <button
            type="submit"
            :disabled="processing"
            class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-6 sm:mt-8 text-base font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {{ processing ? 'Creating account...' : 'Sign Up' }}
          </button>

          <div class="text-center mt-4">
            <p class="text-sm text-gray-600">
              Already have an account?
              <Link route="session.create" class="text-indigo-600 hover:text-indigo-700 font-semibold">
                Login
              </Link>
            </p>
          </div>
        </div>
      </Form>
    </div>
  </div>
</template>
