<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTasksStore } from '../stores/tasks'

const route = useRoute()
const router = useRouter()
const store = useTasksStore()

const id = Number(route.params.id)
const original = ref(null)
const form = ref({ name: '', date: '', status: 'active' })
const submitting = ref(false)
const error = ref(null)

function toFormDate(iso) {
  if (!iso) return ''
  return iso.slice(0, 10)
}

function loadFromTask(task) {
  return {
    name: task.name,
    date: toFormDate(task.date),
    status: task.status,
  }
}

onMounted(async () => {
  store.fetchStatuses()
  try {
    const task = await store.get(id)
    original.value = task
    form.value = loadFromTask(task)
  } catch (e) {
    error.value = e.message
  }
})

async function onUpdate() {
  submitting.value = true
  error.value = null
  try {
    await store.update(id, {
      name: form.value.name,
      date: form.value.date || null,
      status: form.value.status,
    })
    router.push('/tasks/all')
  } catch (e) {
    error.value = e.message
  } finally {
    submitting.value = false
  }
}

function onAbort() {
  router.back()
}
</script>

<template>
  <form v-if="original" class="task-form" @submit.prevent="onUpdate">
    <div class="field">
      <label for="name">Name</label>
      <input id="name" v-model="form.name" type="text" required />
    </div>

    <div class="field">
      <label for="date">Datum</label>
      <input id="date" v-model="form.date" type="date" />
    </div>

    <div class="field">
      <label for="status">Status</label>
      <select id="status" v-model="form.status">
        <option v-for="key in store.availableStatuses" :key="key" :value="key">
          {{ key }}
        </option>
      </select>
    </div>

    <p v-if="error" class="error">{{ error }}</p>

    <div class="form-actions">
      <button type="submit" :disabled="submitting">Aktualisieren</button>
      <button type="button" @click="onAbort">Abbrechen</button>
    </div>
  </form>
  <p v-else-if="error" class="error">{{ error }}</p>
  <p v-else class="hint">Lädt…</p>
</template>

<style scoped>
.task-form {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.field label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.field input,
.field select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--breadcrumb-bg);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}

button[type='submit'] {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.error {
  color: #dc2626;
}

.hint {
  color: var(--text-muted);
}
</style>
