<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'
import { computed, watch, ref } from 'vue'

defineOptions({
  layout: AppLayout,
})

const props = defineProps<{
  projects: {
    data: { id: number; name: string; status: string; sprints: { id: number; name: string }[] }[]
  }
}>()

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

const toast = useToast();

const sprints = computed(() => {
  const project = props.projects.data.find(p => p.id === form.project_id)
  return project ? project.sprints.map(s => ({ value: s.id, label: s.name })) : []
})


const submit = () => {
    form.post('/product-backlogs/fus-create', {
    onSuccess: () => {
      toast.success('Functional user story backlog created successfully!')
      form.reset()
    },
    onError: () => {
      toast.error('Failed to create fucntional user story backlog. Please check the form.')
    },
  })
}

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

</script>

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

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

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

      <!-- Left Column -->
      <div class="space-y-4">
        <!-- Project Dropdown -->
        <div class="space-y-1">
          <Label>Project</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 class="text-left">
                    {{ form.project_id 
                        ? props.projects.data.find(p => p.id === form.project_id)?.name 
                        : 'Select a Project' }}
                </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="end" class="bg-white text-gray-800 dark:bg-neutral-900 dark:text-gray-100 border rounded shadow-lg">
              <DropdownMenuItem
                class="text-gray-800 dark:text-gray-100 hover:bg-gray-50"
                v-for="project in props.projects.data"
                :key="project.id"
                @click="form.project_id = project.id"
              >
                {{ project.name }} <span class="text-xs text-gray-500">({{ project.status }})</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <div v-if="form.errors.project_id" class="text-red-500 text-sm">
            {{ form.errors.project_id }}
          </div>
        </div>
        <div class="space-y-1">
            <Label>Functional User Story</Label>
            <Input v-model="form.name" type="text" placeholder="Enter functional user story name" required />
            <div v-if="form.name" class="text-red-500 text-sm">
                {{ form.errors.name }}
            </div>
        </div>
      </div>

      <!-- Right Column -->
      <div class="space-y-4">
        <div class="space-y-1">
            <Label>Assign which sprint?</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"
                    :class="{ 'opacity-50 cursor-not-allowed': !form.project_id }"
                    >
                    <span>
                        {{ form.sprint_id ? sprints.find(s => s.value === form.sprint_id)?.label : 'Select which sprints' }}
                    </span>
                    <svg
                        class="w-4 h-4 ml-2 text-gray-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_id = option.value"
                >
                    {{ option.label }}
                </DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
            <div v-if="form.sprint_id" class="text-red-500 text-sm">
                {{ form.errors.sprint_id }}
            </div>
        </div>
        <div class="space-y-1">
            <Label>Description</Label>
            <Input v-model="form.description" type="text" placeholder="Enter functional user story 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 FU
        </Button>
      </div>
    </form>
  </div>
</template>