<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import { Save, ArrowLeft } from 'lucide-vue-next';

const form = useForm({
    name: '',
    email: '',
    password: '',
    password_confirmation: '',
    role: 'user',
});

const submit = () => {
    form.post('/admin/users', {
        onFinish: () => form.reset('password', 'password_confirmation'),
    });
};
</script>

<template>
    <Head title="Add User" />
    <div class="max-w-3xl mx-auto space-y-6">
        <div class="flex items-center gap-4">
            <Link
                href="/admin/users"
                class="p-2 rounded-full hover:bg-white/10 transition-colors"
            >
                <ArrowLeft class="w-5 h-5 text-gray-400" />
            </Link>
            <div>
                <h1 class="text-3xl font-black italic tracking-tighter text-white uppercase">Add New User</h1>
                <p class="text-gray-400 text-sm">Create a new user account and assign a role.</p>
            </div>
        </div>

        <form @submit.prevent="submit" class="bg-[#0f172a] rounded-2xl border border-white/5 p-8 space-y-6 shadow-xl">
            <!-- Name -->
            <div>
                <label for="name" class="block text-sm font-bold text-gray-300 mb-2">Name</label>
                <input
                    id="name"
                    v-model="form.name"
                    type="text"
                    class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
                    required
                />
                <div v-if="form.errors.name" class="text-red-400 text-xs mt-1">{{ form.errors.name }}</div>
            </div>

            <!-- Email -->
            <div>
                <label for="email" class="block text-sm font-bold text-gray-300 mb-2">Email</label>
                <input
                    id="email"
                    v-model="form.email"
                    type="email"
                    class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
                    required
                />
                <div v-if="form.errors.email" class="text-red-400 text-xs mt-1">{{ form.errors.email }}</div>
            </div>

            <!-- Password -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="password" class="block text-sm font-bold text-gray-300 mb-2">Password</label>
                    <input
                        id="password"
                        v-model="form.password"
                        type="password"
                        class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
                        required
                    />
                    <div v-if="form.errors.password" class="text-red-400 text-xs mt-1">{{ form.errors.password }}</div>
                </div>
                <div>
                    <label for="password_confirmation" class="block text-sm font-bold text-gray-300 mb-2">Confirm Password</label>
                    <input
                        id="password_confirmation"
                        v-model="form.password_confirmation"
                        type="password"
                        class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
                        required
                    />
                </div>
            </div>

            <!-- Role -->
            <div>
                <label for="role" class="block text-sm font-bold text-gray-300 mb-2">Role</label>
                <select
                    id="role"
                    v-model="form.role"
                    class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition appearance-none"
                >
                    <option value="user">User</option>
                    <option value="mod">Moderator</option>
                    <option value="admin">Administrator</option>
                </select>
                <div v-if="form.errors.role" class="text-red-400 text-xs mt-1">{{ form.errors.role }}</div>
            </div>

            <div class="flex justify-end pt-4">
                <button
                    type="submit"
                    :disabled="form.processing"
                    class="group relative inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                    <Save class="w-5 h-5 relative z-10" />
                    <span class="relative z-10">Save User</span>
                </button>
            </div>
        </form>
    </div>
</template>
