<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '#ui/types'
import { useStaffTime } from '~/composables/useStaffTime'

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  entry: { type: Object, default: null },
  defaultUserId: { type: String, default: null }
})

const emit = defineEmits(['update:modelValue', 'saved'])

// 💡 createEntry importieren
const { list, update, createEntry } = useStaffTime()
const { $dayjs } = useNuxtApp()
const toast = useToast()

const loading = ref(false)

const types = [
  { label: 'Arbeitszeit', value: 'work' },
  { label: 'Pause', value: 'pause' },
  { label: 'Urlaub', value: 'vacation' },
  { label: 'Krankheit', value: 'sick' },
  { label: 'Feiertag', value: 'holiday' },
  { label: 'Sonstiges', value: 'other' }
]

const state = reactive({
  start_date: '',
  start_time: '',
  end_date: '',
  end_time: '',
  type: 'work',
  description: ''
})

const schema = z.object({
  start_date: z.string().min(1, 'Datum erforderlich'),
  start_time: z.string().min(1, 'Zeit erforderlich'),
  type: z.string(),
  description: z.string().optional()
})

const isOpen = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const toDateStr = (dateStr: string) => dateStr ? $dayjs(dateStr).format('YYYY-MM-DD') : ''
const toTimeStr = (dateStr: string) => dateStr ? $dayjs(dateStr).format('HH:mm') : ''
const setDateFieldToToday = (field: 'start_date' | 'end_date') => {
  state[field] = $dayjs().format('YYYY-MM-DD')
}

watch(() => props.entry, (newVal) => {
  if (newVal) {
    // EDIT
    state.start_date = toDateStr(newVal.started_at)
    state.start_time = toTimeStr(newVal.started_at)
    state.end_date = newVal.stopped_at ? toDateStr(newVal.stopped_at) : ''
    state.end_time = newVal.stopped_at ? toTimeStr(newVal.stopped_at) : ''
    state.type = newVal.type || 'work'
    state.description = newVal.description || ''
  } else {
    // CREATE (Standardwerte: Heute)
    const now = $dayjs()
    state.start_date = now.format('YYYY-MM-DD')
    state.start_time = now.format('HH:mm')
    state.end_date = ''
    state.end_time = ''
    state.type = 'work'
    state.description = ''
  }
}, { immediate: true })

async function onSubmit(event: FormSubmitEvent<any>) {
  loading.value = true
  try {
    // 1. Datum und Zeit kombinieren
    const startIso = $dayjs(`${state.start_date} ${state.start_time}`).toISOString()

    let endIso = null
    if (state.end_date && state.end_time) {
      endIso = $dayjs(`${state.end_date} ${state.end_time}`).toISOString()

      if (!$dayjs(endIso).isAfter($dayjs(startIso))) {
        throw new Error("Endzeitpunkt muss nach dem Startzeitpunkt liegen.")
      }
    }

    if (props.entry) {
      // 🟢 UPDATE (Bearbeiten)
      await update(props.entry, {
        start: startIso,
        end: endIso,
        type: state.type,
        description: state.description
      })
      toast.add({ title: 'Eintrag aktualisiert', color: 'green' })
    } else {
      if (endIso) {
        const existingEntries = await list({
          user_id: props.defaultUserId
        })

        const newStart = $dayjs(startIso).valueOf()
        const newEnd = $dayjs(endIso).valueOf()
        const blockingStates = new Set(['draft', 'factual', 'submitted', 'approved'])

        const conflictingEntry = existingEntries.find(existingEntry => {
          if (!blockingStates.has(existingEntry.state) || !existingEntry.stopped_at) return false

          const existingStart = $dayjs(existingEntry.started_at).valueOf()
          const existingEnd = $dayjs(existingEntry.stopped_at).valueOf()

          if (!Number.isFinite(existingStart) || !Number.isFinite(existingEnd)) return false

          return newStart < existingEnd && existingStart < newEnd
        })

        if (conflictingEntry) {
          const conflictStart = $dayjs(conflictingEntry.started_at).format('DD.MM.YYYY HH:mm')
          const conflictEnd = $dayjs(conflictingEntry.stopped_at).format('DD.MM.YYYY HH:mm')
          throw new Error(`Überschneidung mit ${conflictStart} bis ${conflictEnd} (${conflictingEntry.state}).`)
        }
      }

      // 🟢 CREATE (Neu Erstellen)
      // 💡 HIER WAR DER FEHLER: Wir nutzen jetzt createEntry mit den Daten aus dem Formular
      await createEntry({
        start: startIso,   // Die eingegebene Startzeit
        end: endIso,       // Die eingegebene Endzeit (oder null)
        type: state.type,
        description: state.description,
        user_id: props.defaultUserId
      })

      toast.add({ title: 'Zeit manuell erfasst', color: 'green' })
    }

    emit('saved')
    isOpen.value = false
  } catch (error: any) {
    toast.add({ title: 'Fehler', description: error.message, color: 'error' })
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <UModal v-model:open="isOpen">
    <template #content>
      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
              {{ entry ? 'Eintrag bearbeiten' : 'Neue Zeit erfassen' }}
            </h3>
            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
          </div>
        </template>

        <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
          <UFormField label="Typ" name="type">
            <USelectMenu
              v-model="state.type"
              :items="types"
              value-key="value"
              label-key="label"
            />
          </UFormField>

          <div class="grid grid-cols-2 gap-4">
            <UFormField label="Start Datum" name="start_date">
              <div class="flex items-center gap-2">
                <UInput type="date" v-model="state.start_date" class="flex-1" />
                <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('start_date')" />
              </div>
            </UFormField>
            <UFormField label="Start Zeit" name="start_time">
              <UInput type="time" v-model="state.start_time" />
            </UFormField>
          </div>

          <div class="grid grid-cols-2 gap-4">
            <UFormField label="Ende Datum" name="end_date">
              <div class="flex items-center gap-2">
                <UInput type="date" v-model="state.end_date" class="flex-1" />
                <UButton color="gray" variant="soft" label="Heute" @click="setDateFieldToToday('end_date')" />
              </div>
            </UFormField>
            <UFormField label="Ende Zeit" name="end_time">
              <UInput type="time" v-model="state.end_time" />
            </UFormField>
          </div>
          <p class="text-xs text-gray-500 -mt-2">Leer lassen, wenn die Zeit noch läuft.</p>

          <UFormField label="Beschreibung / Notiz" name="description">
            <UTextarea v-model="state.description" placeholder="Was wurde gemacht?" />
          </UFormField>

          <div class="flex justify-end gap-2 pt-4">
            <UButton label="Abbrechen" color="gray" variant="ghost" @click="isOpen = false" />
            <UButton type="submit" label="Speichern" color="primary" :loading="loading" />
          </div>
        </UForm>
      </UCard>
    </template>
  </UModal>
</template>
