<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue'
import { useForm, Head } from '@inertiajs/vue3'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { useToast } from 'vue-toastification'
import { Eye, EyeOff } from 'lucide-vue-next'
import { ref } from 'vue'

defineOptions({
  layout: AppLayout,
})

// Form setup
const form = useForm<{
    name: string | '',
    email: string | '',
    password: string | '',
}>({
    name: '',
    email: '',
    password: '',
})

const toast = useToast();

const showPassword = ref(false)

const submit = () => {
    form.post('/user-management/user-create', {
    onSuccess: () => {
      toast.success('Stakeholder created successfully!')
      form.reset()
    },
    onError: () => {
      toast.error('Failed to create stakeholder. Please check the form.')
    },
  })
}

const reset = () => {
  form.reset()
}

</script>

<template>
  <Head title="Create User" />
  <div class="p-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">Add Stakeholder</h1>
    </div>

    <p class="mb-6">Please fill-up the form to create new stakeholder</p>

    <form @submit.prevent="submit" class="grid grid-cols-2 gap-6">

      <!-- Left Column -->
      <div class="space-y-4">
        <div class="space-y-1">
          <Label>Stakeholder</Label>
          <Input v-model="form.name" type="text" placeholder="Enter stakeholder name" required />
            <div v-if="form.name" class="text-red-500 text-sm">
                {{ form.errors.name }}
            </div>
        </div>
        <div class="space-y-1 relative">
            <Label>Password</Label>
            <Input v-model="form.password" :type="showPassword ? 'text' : 'password'" placeholder="Enter stakeholder password" required />
            <button 
                type="button"
                class="absolute inset-y-9 right-0 flex items-center pr-3 text-neutral-400 dark:text-neutral-500"
                @click="showPassword = !showPassword"
                >
                <Eye v-if="!showPassword" class="w-5 h-5" />
                <EyeOff v-else class="w-5 h-5" />
            </button>
            <div v-if="form.password" class="text-red-500 text-sm">
                {{ form.errors.password }}
            </div>
        </div>
      </div>

      <!-- Right Column -->
      <div class="space-y-4">
        <div class="space-y-1">
            <Label>Email</Label>
            <Input v-model="form.email" type="email" placeholder="Enter stakeholder email" required />
            <div v-if="form.email" class="text-red-500 text-sm">
                {{ form.errors.email }}
            </div>
        </div>
      </div>

      <!-- Submit Button -->
      <div class="col-span-2 flex justify-end mt-4 space-x-2">
        <Button type="button" variant="outline" @click="reset()">
            Reset
        </Button>
        <Button type="submit" variant="default" :disabled="form.processing">
          Create Stakeholder
        </Button>
      </div>
    </form>
  </div>
</template>