<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 { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, } from '@/components/ui/dropdown-menu'

defineOptions({
  layout: AppLayout,
})

// Form setup
const form = useForm<{
    name: string | '',
    description: string | '',
    sprint: number | null,
}>({
    name: '',
    description: '',
    sprint: null,
})

const toast = useToast();

const sprints = [
  { value: 1 },
  { value: 2 },
  { value: 3 }
]

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

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

</script>

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

    <p class="mb-6">Please fill-up the form to create new project</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>Project</Label>
          <Input v-model="form.name" type="text" placeholder="Enter project name" required />
            <div v-if="form.name" class="text-red-500 text-sm">
                {{ form.errors.name }}
            </div>
        </div>
        <div class="space-y-1">
            <Label>How many sprints?</Label>
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
                <Button
                    class="w-full bg-white dark:bg-neutral-900 dark:text-gray-100 text-gray-800 border rounded hover:bg-gray-50 flex justify-between items-center"
                >
                    <span>
                        {{ form.sprint ? sprints.find(s => s.value === form.sprint)?.value : 'Select number of sprints' }}
                    </span>
                    <svg
                        class="w-4 h-4 ml-2 text-neutral-500"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        >
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent side="bottom" align="start" class="bg-white text-gray-800 dark:bg-neutral-900 dark:text-gray-100 border rounded shadow-lg">
                <DropdownMenuItem
                    v-for="option in sprints"
                    :key="option.value"
                    class="text-gray-800 dark:text-gray-100 hover:bg-gray-50"
                    @click="form.sprint = option.value"
                >
                    {{ option.value }}
                </DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
            <div v-if="form.sprint" class="text-red-500 text-sm">
                {{ form.errors.sprint }}
            </div>
        </div>
      </div>

      <!-- Right Column -->
      <div class="space-y-4">
        <div class="space-y-1">
            <Label>Description</Label>
            <Input v-model="form.description" type="text" placeholder="Enter project description" required />
            <div v-if="form.description" class="text-red-500 text-sm">
                {{ form.errors.description }}
            </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 Project
        </Button>
      </div>
    </form>
  </div>
</template>