shiftcraft/app/pages/schedules/new.vue

<template>
  <div class="max-w-xl mx-auto">
    <!-- Header -->
    <div class="mb-8 flex items-center gap-3">
      <NuxtLink to="/schedules">
        <UButton color="neutral" variant="ghost" icon="i-lucide-arrow-left" size="sm" />
      </NuxtLink>
      <div>
        <h1 class="text-2xl font-bold text-gray-900">Neuen Schichtplan erstellen</h1>
        <p class="text-gray-500 mt-1 text-sm">KI-gestützter Optimierer berechnet den besten Plan</p>
      </div>
    </div>

    <!-- Solving progress -->
    <div v-if="solvingRunId" class="bg-white rounded-2xl border border-gray-100 shadow-sm p-8 text-center">
      <div class="w-16 h-16 rounded-full bg-indigo-50 flex items-center justify-center mx-auto mb-4">
        <UIcon name="i-lucide-loader-2" class="w-8 h-8 text-indigo-600 animate-spin" />
      </div>
      <h2 class="font-bold text-gray-900 mb-2">Berechnung läuft...</h2>
      <p class="text-gray-500 text-sm mb-4">Der Schichtplan-Optimierer arbeitet. Dies kann einige Sekunden dauern.</p>
      <UProgress v-model="solveProgress" :max="100" class="mb-4" />
      <p class="text-xs text-gray-400">Status: {{ solveStatusLabel }}</p>
    </div>

    <!-- Input form -->
    <div v-else class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
      <div class="space-y-5">
        <UFormField label="Name des Schichtplans" required>
          <UInput
            v-model="form.name"
            placeholder="z.B. Schichtplan Juni 2026"
            class="w-full"
          />
        </UFormField>

        <div class="grid grid-cols-2 gap-4">
          <UFormField label="Start-Datum" required>
            <UInput v-model="form.period_start" type="date" class="w-full" />
          </UFormField>
          <UFormField label="End-Datum" required>
            <UInput v-model="form.period_end" type="date" class="w-full" />
          </UFormField>
        </div>

        <!-- Summary -->
        <div class="bg-gray-50 rounded-xl p-4 space-y-2 text-sm">
          <div class="flex items-center justify-between">
            <span class="text-gray-500">Mitarbeiter</span>
            <span class="font-medium text-gray-900">
              <span v-if="loadingStats" class="text-gray-400">...</span>
              <span v-else>{{ employeeCount }}</span>
            </span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-gray-500">Aktive Bedingungen</span>
            <span class="font-medium text-gray-900">
              <span v-if="loadingStats" class="text-gray-400">...</span>
              <span v-else>{{ constraintCount }}</span>
            </span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-gray-500">Schichtrahmen</span>
            <span class="font-medium" :class="hasFramework ? 'text-green-600' : 'text-red-600'">
              <span v-if="loadingStats" class="text-gray-400">...</span>
              <span v-else>{{ hasFramework ? 'Konfiguriert' : 'Fehlt!' }}</span>
            </span>
          </div>
        </div>

        <!-- Warnings -->
        <div v-if="!loadingStats && !hasFramework" class="bg-amber-50 border border-amber-200 rounded-xl p-4 text-sm">
          <div class="flex items-start gap-2">
            <UIcon name="i-lucide-alert-triangle" class="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />
            <p class="text-amber-700">
              Kein Schichtrahmen konfiguriert.
              <NuxtLink to="/settings/shifts" class="font-medium underline">Schichten einrichten →</NuxtLink>
            </p>
          </div>
        </div>

        <div v-if="!loadingStats && employeeCount === 0" class="bg-amber-50 border border-amber-200 rounded-xl p-4 text-sm">
          <div class="flex items-start gap-2">
            <UIcon name="i-lucide-alert-triangle" class="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />
            <p class="text-amber-700">
              Keine Mitarbeiter gefunden.
              <NuxtLink to="/employees" class="font-medium underline">Mitarbeiter hinzufügen →</NuxtLink>
            </p>
          </div>
        </div>

        <UButton
          color="primary"
          icon="i-lucide-calculator"
          class="w-full justify-center"
          size="lg"
          :loading="creating"
          :disabled="!canCreate"
          @click="createAndSolve"
        >
          Schichtplan berechnen
        </UButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ShiftFramework } from '~/shared/types/pocketbase'

definePageMeta({ layout: 'default', middleware: 'auth' })

const toast = useToast()
const { pb, authStore } = usePocketBase()
const orgStore = useOrg()

const creating = ref(false)
const loadingStats = ref(true)
const employeeCount = ref(0)
const constraintCount = ref(0)
const hasFramework = ref(false)
const solvingRunId = ref<string | null>(null)
const solveProgress = ref(10)
const solveStatus = ref('pending')

const today = new Date()
const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1)
const lastDayNextMonth = new Date(today.getFullYear(), today.getMonth() + 2, 0)

const form = reactive({
  name: `Schichtplan ${nextMonth.toLocaleString('de', { month: 'long', year: 'numeric' })}`,
  period_start: nextMonth.toISOString().slice(0, 10),
  period_end: lastDayNextMonth.toISOString().slice(0, 10),
})

const canCreate = computed(() =>
  !!form.name && !!form.period_start && !!form.period_end && !loadingStats.value && employeeCount.value > 0 && hasFramework.value
)

const solveStatusLabel = computed(() => {
  const map: Record<string, string> = { pending: 'Wird vorbereitet...', solving: 'Löser läuft...', solved: 'Abgeschlossen', infeasible: 'Keine Lösung gefunden', error: 'Fehler' }
  return map[solveStatus.value] ?? solveStatus.value
})

let pollInterval: ReturnType<typeof setInterval> | null = null

onMounted(async () => {
  const orgId = orgStore.orgId || (authStore.value.record?.org_id as string | undefined)
  if (orgId && !orgStore.org) await orgStore.fetchOrg(orgId)
  if (!orgId) { loadingStats.value = false; return }

  try {
    const [employees, constraints, frameworks] = await Promise.all([
      pb.collection('employees').getList(1, 1, { filter: `org_id = "${orgId}" && active = true` }),
      pb.collection('constraints').getList(1, 1, { filter: `org_id = "${orgId}" && active = true` }),
      pb.collection('shift_frameworks').getList(1, 1, { filter: `org_id = "${orgId}"` }),
    ])
    employeeCount.value = employees.totalItems
    constraintCount.value = constraints.totalItems
    hasFramework.value = frameworks.totalItems > 0
  } catch (err) {
    console.error('Stats load error', err)
  } finally {
    loadingStats.value = false
  }
})

onUnmounted(() => {
  if (pollInterval) clearInterval(pollInterval)
})

async function createAndSolve() {
  const orgId = orgStore.orgId || (authStore.value.record?.org_id as string | undefined)
  if (!orgId) return
  creating.value = true

  try {
    // Fetch snapshot data
    const [employees, constraints, frameworkResult] = await Promise.all([
      pb.collection('employees').getFullList({ filter: `org_id = "${orgId}" && active = true` }),
      pb.collection('constraints').getFullList({ filter: `org_id = "${orgId}" && active = true` }),
      pb.collection('shift_frameworks').getFirstListItem(`org_id = "${orgId}"`),
    ])

    const framework = frameworkResult as unknown as ShiftFramework

    // Create schedule run record
    const run = await pb.collection('schedule_runs').create({
      org_id: orgId,
      name: form.name,
      period_start: form.period_start,
      period_end: form.period_end,
      status: 'pending',
      framework_snapshot: { periods: framework.periods, shifts: framework.shifts },
      employees_snapshot: employees,
      constraints_snapshot: constraints.map((c: Record<string, unknown>) => ({
        id: c.id,
        constraint_json: c.constraint_json,
        hard: c.hard,
        weight: c.weight,
      })),
      created_by: authStore.value.record?.id,
    })

    solvingRunId.value = run.id
    solveProgress.value = 20

    // Call solve API
    $fetch('/api/schedules/solve', {
      method: 'POST',
      body: { run_id: run.id },
    }).catch((err) => {
      console.error('Solve error', err)
    })

    // Poll status
    pollInterval = setInterval(async () => {
      try {
        const updated = await pb.collection('schedule_runs').getOne(run.id)
        solveStatus.value = updated.status as string
        if (solveProgress.value < 80) solveProgress.value += 10

        if (updated.status === 'solved') {
          solveProgress.value = 100
          clearInterval(pollInterval!)
          await navigateTo(`/schedules/${run.id}`)
        } else if (updated.status === 'infeasible' || updated.status === 'error') {
          clearInterval(pollInterval!)
          toast.add({ color: 'warning', title: 'Berechnung abgeschlossen', description: updated.status === 'infeasible' ? 'Kein gültiger Plan gefunden.' : 'Fehler bei der Berechnung.' })
          await navigateTo(`/schedules/${run.id}`)
        }
      } catch (e) {
        console.error('Poll error', e)
      }
    }, 2000)
  } catch (err) {
    toast.add({ color: 'error', title: 'Fehler beim Erstellen', description: String(err) })
  } finally {
    creating.value = false
  }
}
</script>