<script setup>
import deLocale from "@fullcalendar/core/locales/de"
import FullCalendar from "@fullcalendar/vue3"
import interactionPlugin from "@fullcalendar/interaction"
import resourceTimelinePlugin from "@fullcalendar/resource-timeline"
import { parseDate } from "@internationalized/date"
import { useDraggable } from "@vueuse/core"
import { expandRecurringEvent } from "~/utils/eventRecurrence"

const router = useRouter()
const route = useRoute()
const auth = useAuthStore()
const profileStore = useProfileStore()
const toast = useToast()
const { $api, $dayjs } = useNuxtApp()
const { create: createEvent } = useEntities("events")
const { list: listStaffTimeSpans, createEntry, update: updateStaffTimeEntry } = useStaffTime()

const allowedCalendarViews = ["resourceTimelineDay", "resourceTimelineWeek", "resourceTimelineMonth"]
const initialRouteDate = /^\d{4}-\d{2}-\d{2}$/.test(String(route.query.date || "")) ? String(route.query.date) : null
const initialRouteView = allowedCalendarViews.includes(String(route.query.view || "")) ? String(route.query.view) : null

const loading = ref(true)
const savingAbsence = ref(false)
const selectedType = ref("all")
const calendarRef = ref(null)
const calendarView = ref(initialRouteView || "resourceTimelineWeek")
const calendarCurrentDate = ref(initialRouteDate || $dayjs().format("YYYY-MM-DD"))
const calendarTitle = ref("")
const visibleRange = ref({
  from: $dayjs().startOf("month").format("YYYY-MM-DD"),
  to: $dayjs().endOf("month").format("YYYY-MM-DD")
})
const lastRangeKey = ref("")
const resources = ref([])
const events = ref([])
const profiles = ref([])
const inventoryitems = ref([])
const isDraftModeActive = ref(false)
const isFinalizeDraftsModalOpen = ref(false)
const finalizingDrafts = ref(false)
const savingQuickConfig = ref(false)
const isQuickConfigModalOpen = ref(false)
const quickConfigWindowEl = ref(null)
const profileDetailsWindowEl = ref(null)
const showQuickConfigEditor = ref(true)
const showQuickPresetManagement = ref(false)
const quickEntryConfig = reactive({
  name: "Quick-Eintrag",
  color: "#2563eb"
})
const newQuickPresetName = ref("")
const quickEntryColorOptions = [
  { label: "Blau", value: "#2563eb" },
  { label: "Grün", value: "#16a34a" },
  { label: "Orange", value: "#ea580c" },
  { label: "Rot", value: "#dc2626" },
  { label: "Pink", value: "#db2777" },
  { label: "Türkis", value: "#0f766e" },
  { label: "Grau", value: "#4b5563" },
  { label: "Schwarz", value: "#111827" }
]

const { style: quickConfigWindowStyle } = useDraggable(quickConfigWindowEl, {
  initialValue: { x: 120, y: 100 }
})

const { style: profileDetailsWindowStyle } = useDraggable(profileDetailsWindowEl, {
  initialValue: { x: 220, y: 120 }
})

const isAbsenceModalOpen = ref(false)
const isProfileDetailsModalOpen = ref(false)
const loadingProfileVacation = ref(false)
const selectedProfile = ref(null)
const selectedProfileVacationSummary = ref(null)
const profileVacationRequestId = ref(0)
const absenceForm = reactive({
  mode: "create",
  entry: null,
  userId: "",
  type: "vacation",
  startDate: $dayjs().format("YYYY-MM-DD"),
  endDate: $dayjs().format("YYYY-MM-DD"),
  description: ""
})

const setAbsenceDateToToday = (field) => {
  absenceForm[field] = $dayjs().format("YYYY-MM-DD")
}

const startDateValue = computed({
  get: () => {
    if (!absenceForm.startDate) return null

    try {
      return parseDate(absenceForm.startDate)
    } catch {
      return null
    }
  },
  set: (value) => {
    absenceForm.startDate = value ? value.toString() : ""
  }
})

const endDateValue = computed({
  get: () => {
    if (!absenceForm.endDate) return null

    try {
      return parseDate(absenceForm.endDate)
    } catch {
      return null
    }
  },
  set: (value) => {
    absenceForm.endDate = value ? value.toString() : ""
  }
})

const resourceTypeOptions = [
  { label: "Alle Ressourcen", value: "all" },
  { label: "Teams", value: "Team" },
  { label: "Profile", value: "Profile" },
  { label: "Inventarartikel", value: "Inventarartikel" }
]

const calendarViewOptions = [
  { label: "Tag", value: "resourceTimelineDay" },
  { label: "Woche", value: "resourceTimelineWeek" },
  { label: "Monat", value: "resourceTimelineMonth" }
]

const absenceTypeOptions = [
  { label: "Urlaub", value: "vacation" },
  { label: "Krank", value: "sick" }
]

const calendarPickerValue = computed({
  get: () => {
    if (!calendarCurrentDate.value) return null

    try {
      return parseDate(calendarCurrentDate.value)
    } catch {
      return null
    }
  },
  set: (value) => {
    calendarCurrentDate.value = value ? value.toString() : ""
    if (value) {
      const api = calendarRef.value?.getApi?.()
      api?.gotoDate(value.toString())
    }
  }
})

const profileOptions = computed(() =>
  profiles.value
    .filter((profile) => !profile.archived && profile.user_id)
    .map((profile) => ({
      label: profile.full_name || profile.fullName || [profile.first_name, profile.last_name].filter(Boolean).join(" ") || profile.email,
      value: profile.user_id
    }))
)

const absenceModalTitle = computed(() =>
  absenceForm.mode === "edit"
    ? (absenceForm.type === "sick" ? "Krankmeldung bearbeiten" : "Urlaub bearbeiten")
    : (absenceForm.type === "sick" ? "Krank eintragen" : "Urlaub eintragen")
)

const tenantCalendarConfig = computed(() =>
  auth.activeTenantData?.calendarConfig
  || profileStore.ownTenant?.calendarConfig
  || {}
)

const resolvedPlanningBoardConfig = computed(() => {
  const config = tenantCalendarConfig.value?.planningBoard || {}
  const normalizedStartTime = /^\d{2}:\d{2}$/.test(String(config.startTime || "")) ? String(config.startTime) : "06:00"
  const normalizedEndTime = /^\d{2}:\d{2}$/.test(String(config.endTime || "")) ? String(config.endTime) : "21:00"
  const normalizedSlotMinutes = Number(config.slotMinutes)
  const allowedSlotMinutes = [15, 30, 60, 120, 180]

  return {
    startTime: normalizedStartTime,
    endTime: normalizedEndTime,
    slotMinutes: allowedSlotMinutes.includes(normalizedSlotMinutes) ? normalizedSlotMinutes : 180
  }
})

const resolvedQuickEntryConfig = computed(() => {
  const config = tenantCalendarConfig.value?.quickEntry || {}

  return {
    name: config.name || "Quick-Eintrag",
    color: config.color || "#2563eb"
  }
})

const activeQuickEntryConfig = computed(() => ({
  name: quickEntryConfig.name?.trim() || resolvedQuickEntryConfig.value.name,
  color: quickEntryConfig.color || resolvedQuickEntryConfig.value.color
}))

const quickEntryPresets = computed(() => {
  const rawPresets = tenantCalendarConfig.value?.quickEntryPresets

  if (!Array.isArray(rawPresets)) return []

  return rawPresets
    .filter((preset) => preset?.name && preset?.color)
    .map((preset) => ({
      name: String(preset.name),
      color: String(preset.color)
    }))
})

const resourcesById = computed(() => new Map(resources.value.map((resource) => [resource.id, resource])))
const currentVacationYear = computed(() => $dayjs().year())
const selectedProfileTeamsLabel = computed(() =>
  (selectedProfile.value?.teams || [])
    .map((team) => team?.name)
    .filter(Boolean)
    .join(", ") || "Keine Teams zugeordnet"
)
const selectedProfileBranchesLabel = computed(() => {
  const profile = selectedProfile.value
  if (!profile) return "Keine Niederlassung"

  const labels = [
    profile.branch?.name,
    ...(profile.branches || []).map((branch) => branch?.name)
  ].filter(Boolean)

  return [...new Set(labels)].join(", ") || "Keine Niederlassung"
})
const selectedProfileVacationDaysTaken = computed(() =>
  Number(selectedProfileVacationSummary.value?.sumVacationDays || 0)
)
const selectedProfileAnnualLeaveDays = computed(() => {
  const value = selectedProfile.value?.annual_paid_leave_days
  return value === null || value === undefined || value === "" ? null : Number(value)
})
const selectedProfileRemainingVacationDays = computed(() => {
  if (selectedProfileAnnualLeaveDays.value === null) return null

  return Number((selectedProfileAnnualLeaveDays.value - selectedProfileVacationDaysTaken.value).toFixed(2))
})
const selectedProfileAvailabilityNote = computed(() =>
  selectedProfile.value?.availability_note?.trim() || "Keine Verfügbarkeitshinweise hinterlegt"
)

const visibleResources = computed(() => {
  if (selectedType.value === "all") return resources.value

  const visibleMap = new Map()

  resources.value
    .filter((resource) => resource.type === selectedType.value)
    .forEach((resource) => {
      let current = resource

      while (current) {
        visibleMap.set(current.id, current)
        current = current.parentId ? resourcesById.value.get(current.parentId) : null
      }
    })

  return resources.value.filter((resource) => visibleMap.has(resource.id))
})

const visibleResourceIds = computed(() => new Set(visibleResources.value.map((resource) => resource.id)))

const visibleEvents = computed(() => {
  if (selectedType.value === "all") return events.value

  return events.value.filter((event) =>
    (event.resourceIds || []).some((resourceId) => visibleResourceIds.value.has(resourceId))
  )
})

const visibleDraftEventIds = computed(() =>
  [...new Set(
    visibleEvents.value
      .filter((event) => event.state === "Entwurf" && event.entrytype === "event" && event.eventId)
      .map((event) => event.eventId)
  )]
)

const calendarOptions = computed(() => ({
  schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
  locale: deLocale,
  plugins: [resourceTimelinePlugin, interactionPlugin],
  initialView: calendarView.value,
  initialDate: calendarCurrentDate.value,
  headerToolbar: false,
  resourceAreaWidth: "280px",
  resourceGroupField: "type",
  resourceOrder: "type,title",
  resources: visibleResources.value,
  events: visibleEvents.value,
  nowIndicator: true,
  selectable: true,
  height: "calc(100vh - 250px)",
  slotMinWidth: 80,
  resourceAreaColumns: [
    {
      field: "title",
      headerContent: "Ressource"
    }
  ],
  resourceLabelDidMount(info) {
    const { resource } = info
    const isProfileResource = resource.extendedProps?.resourceKind === "profile" && resource.extendedProps?.profileId

    if (!isProfileResource) return

    info.el.classList.add("cursor-pointer")
    info.el.setAttribute("role", "button")
    info.el.setAttribute("tabindex", "0")
    info.el.setAttribute("title", "Mitarbeiterdetails öffnen")

    const openProfile = () => openProfileDetails(resource.extendedProps.profileId)
    const onKeydown = (event) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault()
        openProfile()
      }
    }

    info.el.addEventListener("click", openProfile)
    info.el.addEventListener("keydown", onKeydown)
  },
  views: {
    resourceTimelineDay: {
      type: "resourceTimeline",
      duration: { days: 1 },
      buttonText: "Tag",
      slotDuration: { minutes: resolvedPlanningBoardConfig.value.slotMinutes },
      snapDuration: { minutes: resolvedPlanningBoardConfig.value.slotMinutes },
      slotMinTime: `${resolvedPlanningBoardConfig.value.startTime}:00`,
      slotMaxTime: `${resolvedPlanningBoardConfig.value.endTime}:00`
    },
    resourceTimelineWeek: {
      type: "resourceTimeline",
      duration: { days: 7 },
      buttonText: "Woche",
      slotDuration: { minutes: resolvedPlanningBoardConfig.value.slotMinutes },
      snapDuration: { minutes: resolvedPlanningBoardConfig.value.slotMinutes },
      weekends: false,
      slotMinTime: `${resolvedPlanningBoardConfig.value.startTime}:00`,
      slotMaxTime: `${resolvedPlanningBoardConfig.value.endTime}:00`
    },
    resourceTimelineMonth: {
      type: "resourceTimeline",
      duration: { months: 1 },
      buttonText: "Monat"
    }
  },
  select(info) {
    createQuickEvent(info)
  },
  eventClick(info) {
    if (info.event.extendedProps.entrytype === "staff-absence") {
      openAbsenceModal(info.event.extendedProps.absenceType, {
        entry: info.event.extendedProps.absenceEntry,
        userId: info.event.extendedProps.absenceEntry?.user_id || "",
        startDate: $dayjs(info.event.extendedProps.absenceEntry?.started_at).format("YYYY-MM-DD"),
        endDate: $dayjs(info.event.extendedProps.absenceEntry?.stopped_at || info.event.extendedProps.absenceEntry?.started_at).format("YYYY-MM-DD"),
        description: info.event.extendedProps.absenceEntry?.description || ""
      })
      return
    }

    router.push({
      path: `/standardEntity/events/edit/${info.event.extendedProps.eventId}`,
      query: {
        returnTo: "plantafel",
        returnDate: calendarCurrentDate.value,
        returnView: calendarView.value
      }
    })
  },
  datesSet(info) {
    const nextFrom = $dayjs(info.start).format("YYYY-MM-DD")
    const nextTo = $dayjs(info.end).subtract(1, "day").format("YYYY-MM-DD")
    const nextKey = `${nextFrom}:${nextTo}`

    calendarView.value = info.view.type
    calendarCurrentDate.value = $dayjs(info.view.currentStart).format("YYYY-MM-DD")
    calendarTitle.value = info.view.title

    if (nextKey === lastRangeKey.value) return

    lastRangeKey.value = nextKey
    visibleRange.value = { from: nextFrom, to: nextTo }
    loadPlanningBoard()
  }
}))

function resolveEventColor(eventType) {
  return tenantCalendarConfig.value?.eventTypes?.find((item) => item.label === eventType)?.color || "#111827"
}

function resolveEventTitle(event, projectsById) {
  if (event.name) return event.name
  if (event.project && projectsById.has(event.project)) return projectsById.get(event.project).name
  return event.quick ? activeQuickEntryConfig.value.name : "Planung"
}

function resolveRenderedEventColor(event) {
  if (event?.quick) return event?.color || activeQuickEntryConfig.value.color
  return resolveEventColor(event.eventtype)
}

function resolveDisplayedEventTitle(event, projectsById) {
  const baseTitle = resolveEventTitle(event, projectsById)
  return event?.state === "Entwurf" ? `[Entwurf] ${baseTitle}` : baseTitle
}

function getProfileLabel(profile) {
  return profile?.full_name || profile?.fullName || [profile?.first_name, profile?.last_name].filter(Boolean).join(" ") || profile?.email || `Profil ${profile?.id || ""}`.trim()
}

function getAbsenceTitle(entry) {
  const baseLabel = entry.type === "sick" ? "Krank" : "Urlaub"
  return entry.description ? `${baseLabel}: ${entry.description}` : baseLabel
}

function getAbsenceColor(type) {
  return type === "sick" ? "#dc2626" : "#d97706"
}

function getTeamLabel(team) {
  if (!team) return "Team"
  return team.name
}

function getBranchResourceId(branchId) {
  return `B-${branchId}`
}

function getProfileResourceIds(profile) {
  const assignedTeams = Array.isArray(profile?.teams) ? profile.teams.filter((team) => team?.id) : []

  if (!assignedTeams.length) {
    return [`P-${profile.id}`]
  }

  return assignedTeams.map((team) => `T-${team.id}:P-${profile.id}`)
}

function normalizeSelectedResourceIds(resourceId) {
  if (!resourceId) return []

  if (resourceId.startsWith("T-") && resourceId.includes(":P-")) {
    return [`P-${resourceId.split(":P-")[1]}`]
  }

  if (resourceId.startsWith("T-")) {
    const teamId = Number(resourceId.replace("T-", ""))
    return profiles.value
      .filter((profile) => (profile.teams || []).some((team) => team?.id === teamId))
      .map((profile) => `P-${profile.id}`)
  }

  return [resourceId]
}

function buildResources({ profiles, inventoryitems }) {
  const branchResources = []
  const teamResources = []
  const profileResources = []
  const topLevelTeamGroupId = "TEAM-UNBOUND"

  profiles
    .filter((profile) => !profile.archived)
    .forEach((profile) => {
      const assignedTeams = Array.isArray(profile?.teams) ? profile.teams.filter((team) => team?.id) : []

      if (!assignedTeams.length) {
        profileResources.push({
          id: `P-${profile.id}`,
          type: "Profile",
          title: getProfileLabel(profile),
          resourceKind: "profile",
          profileId: profile.id
        })
        return
      }

      assignedTeams.forEach((team) => {
        if (team?.branch?.id) {
          const branchResourceId = getBranchResourceId(team.branch.id)

          if (!branchResources.find((resource) => resource.id === branchResourceId)) {
            branchResources.push({
              id: branchResourceId,
              type: "Niederlassung",
              title: team.branch.name
            })
          }
        }

        if (!team?.branch?.id && !branchResources.find((resource) => resource.id === topLevelTeamGroupId)) {
          branchResources.push({
            id: topLevelTeamGroupId,
            type: "Niederlassung",
            title: "Übergreifende Teams"
          })
        }

        if (!teamResources.find((resource) => resource.id === `T-${team.id}`)) {
          teamResources.push({
            id: `T-${team.id}`,
            type: "Team",
            title: getTeamLabel(team),
            parentId: team?.branch?.id ? getBranchResourceId(team.branch.id) : topLevelTeamGroupId
          })
        }

        profileResources.push({
          id: `T-${team.id}:P-${profile.id}`,
          parentId: `T-${team.id}`,
          type: "Profile",
          title: getProfileLabel(profile),
          resourceKind: "profile",
          profileId: profile.id
        })
      })
    })

  const inventoryResources = inventoryitems
    .filter((item) => !item.archived && item.usePlanning)
    .map((item) => ({
      id: `I-${item.id}`,
      type: "Inventarartikel",
      title: item.name
    }))

  return [...branchResources, ...teamResources, ...profileResources, ...inventoryResources]
}

function buildEvents({ rawEvents, projectsById }) {
  const mappedEvents = rawEvents
    .filter((event) => !event.archived)
    .flatMap((event) => {
      const resourceIds = [
        ...(profiles.value
          .filter((profile) => (event.profiles || []).includes(profile.id))
          .flatMap((profile) => getProfileResourceIds(profile))),
        ...(event.inventoryitems || []).map((itemId) => `I-${itemId}`)
      ]

      return expandRecurringEvent(
        event,
        `${visibleRange.value.from}T00:00:00`,
        `${visibleRange.value.to}T23:59:59`,
        (occurrenceStart, occurrenceEnd, occurrenceIndex) => ({
          title: resolveDisplayedEventTitle(event, projectsById),
          start: occurrenceStart.toISOString(),
          end: occurrenceEnd ? occurrenceEnd.toISOString() : null,
          resourceIds,
          color: event.color || null,
          state: event.state || "Final",
          backgroundColor: resolveRenderedEventColor(event),
          borderColor: resolveRenderedEventColor(event),
          textColor: "#ffffff",
          classNames: event.state === "Entwurf" ? ["planning-board-draft-event"] : [],
          entrytype: "event",
          eventId: event.id,
          occurrenceIndex
        })
      )
    })
    .filter((event) => event.resourceIds.length > 0)

  return mappedEvents
}

function buildAbsenceEvents(spansByUserId) {
  const profileByUserId = new Map(
    profiles.value
      .filter((profile) => profile.user_id)
      .map((profile) => [profile.user_id, profile])
  )

  return spansByUserId.flatMap(({ userId, spans }) => {
    const profile = profileByUserId.get(userId)
    if (!profile) return []

    return (spans || [])
      .filter((entry) => ["vacation", "sick"].includes(entry.type) && entry.state !== "rejected")
      .map((entry) => ({
        title: getAbsenceTitle(entry),
        start: $dayjs(entry.started_at).startOf("day").toISOString(),
        end: $dayjs(entry.stopped_at || entry.started_at).add(1, "day").startOf("day").toISOString(),
        resourceIds: getProfileResourceIds(profile),
        allDay: true,
        backgroundColor: getAbsenceColor(entry.type),
        borderColor: getAbsenceColor(entry.type),
        textColor: "#ffffff",
        entrytype: "staff-absence",
        absenceType: entry.type,
        absenceEntry: entry
      }))
  })
}

function resetAbsenceForm() {
  absenceForm.mode = "create"
  absenceForm.entry = null
  absenceForm.userId = profileOptions.value[0]?.value || ""
  absenceForm.type = "vacation"
  absenceForm.startDate = $dayjs().format("YYYY-MM-DD")
  absenceForm.endDate = $dayjs().format("YYYY-MM-DD")
  absenceForm.description = ""
}

function getCalendarApi() {
  return calendarRef.value?.getApi?.()
}

function changeCalendarView(view) {
  const api = getCalendarApi()
  if (!api || !view) return
  calendarView.value = view
  api.changeView(view)
}

function moveCalendar(direction) {
  const api = getCalendarApi()
  if (!api) return

  if (direction === "prev") api.prev()
  if (direction === "next") api.next()
}

function moveCalendarToday() {
  const api = getCalendarApi()
  if (!api) return
  api.today()
}

function formatProfileDate(value) {
  if (!value) return "Nicht hinterlegt"
  return $dayjs(value).isValid() ? $dayjs(value).format("DD.MM.YYYY") : "Nicht hinterlegt"
}

function formatProfileNumber(value) {
  if (value === null || value === undefined || value === "") return "Nicht hinterlegt"

  const numericValue = Number(value)
  return Number.isFinite(numericValue)
    ? new Intl.NumberFormat("de-DE", { minimumFractionDigits: 0, maximumFractionDigits: 2 }).format(numericValue)
    : String(value)
}

async function openProfileDetails(profileId) {
  const profile = profiles.value.find((item) => item.id === profileId)
  if (!profile) return

  selectedProfile.value = profile
  selectedProfileVacationSummary.value = null
  isProfileDetailsModalOpen.value = true

  const requestId = profileVacationRequestId.value + 1
  profileVacationRequestId.value = requestId

  if (!profile.user_id) {
    loadingProfileVacation.value = false
    return
  }

  loadingProfileVacation.value = true

  try {
    const from = `${currentVacationYear.value}-01-01`
    const to = `${currentVacationYear.value}-12-31`
    const response = await $api(`/api/staff/time/evaluation?${new URLSearchParams({
      from,
      to,
      targetUserId: profile.user_id
    }).toString()}`)

    if (profileVacationRequestId.value !== requestId) return

    selectedProfileVacationSummary.value = response?.summary || null
  } catch (error) {
    console.error("openProfileDetails failed", error)

    if (profileVacationRequestId.value !== requestId) return

    selectedProfileVacationSummary.value = null
    toast.add({
      title: "Resturlaub konnte nicht geladen werden",
      description: "Die Mitarbeiterdetails sind sichtbar, aber die Urlaubsauswertung konnte nicht abgerufen werden.",
      color: "orange"
    })
  } finally {
    if (profileVacationRequestId.value === requestId) {
      loadingProfileVacation.value = false
    }
  }
}

function openQuickConfig() {
  newQuickPresetName.value = quickEntryConfig.name
  showQuickConfigEditor.value = true
  showQuickPresetManagement.value = false
  isQuickConfigModalOpen.value = true
}

function applyQuickPreset(preset) {
  if (!preset) return
  quickEntryConfig.name = preset.name
  quickEntryConfig.color = preset.color
  newQuickPresetName.value = preset.name
}

watch(resolvedQuickEntryConfig, (config) => {
  if (!quickEntryConfig.name?.trim()) quickEntryConfig.name = config.name
  if (!quickEntryConfig.color) quickEntryConfig.color = config.color
}, { immediate: true })

async function persistQuickPresets(nextPresets) {
  if (savingQuickConfig.value) return

  savingQuickConfig.value = true

  try {
    const currentTenantData = auth.activeTenantData || {}
    const nextCalendarConfig = {
      ...(currentTenantData.calendarConfig || {}),
      quickEntryPresets: nextPresets
    }

    const updatedTenant = await $api(`/api/tenant/other/${auth.activeTenant}`, {
      method: "PUT",
      body: {
        data: {
          calendarConfig: nextCalendarConfig
        }
      }
    })

    auth.activeTenantData = updatedTenant
    profileStore.ownTenant = updatedTenant
  } catch (error) {
    console.error("persistQuickPresets failed", error)
    toast.add({
      title: "Vorlagen konnten nicht gespeichert werden",
      description: error?.message || "Bitte erneut versuchen.",
      color: "red"
    })
    throw error
  } finally {
    savingQuickConfig.value = false
  }
}

async function saveQuickPreset() {
  const presetName = newQuickPresetName.value?.trim() || quickEntryConfig.name?.trim()
  if (!presetName) {
    toast.add({ title: "Name fehlt", description: "Bitte einen Namen für die Vorlage angeben.", color: "orange" })
    return
  }

  const nextPresets = [
    ...quickEntryPresets.value.filter((preset) => preset.name !== presetName),
    {
      name: presetName,
      color: quickEntryConfig.color || "#2563eb"
    }
  ]

  await persistQuickPresets(nextPresets)
  toast.add({ title: "Vorlage gespeichert", color: "green" })
}

async function deleteQuickPreset(presetName) {
  const nextPresets = quickEntryPresets.value.filter((preset) => preset.name !== presetName)
  await persistQuickPresets(nextPresets)
  toast.add({ title: "Vorlage gelöscht", color: "green" })
}

async function createQuickEvent(info) {
  const resourceIds = normalizeSelectedResourceIds(info.resource?.id)

  const payload = {
    name: activeQuickEntryConfig.value.name,
    quick: true,
    state: isDraftModeActive.value ? "Entwurf" : "Final",
    color: activeQuickEntryConfig.value.color,
    startDate: info.startStr,
    endDate: info.endStr,
    profiles: resourceIds
      .filter((resourceId) => resourceId.startsWith("P-"))
      .map((resourceId) => resourceId.replace("P-", "")),
    inventoryitems: resourceIds
      .filter((resourceId) => resourceId.startsWith("I-"))
      .map((resourceId) => Number(resourceId.replace("I-", ""))),
    inventoryitemgroups: [],
    vehicles: [],
    notes: "",
    link: "",
    project: null,
    customer: null,
    vendor: null,
  }

  try {
    await createEvent(payload, true)
    toast.add({ title: "Quick-Eintrag angelegt", color: "green" })
    await loadPlanningBoard()
  } catch (error) {
    console.error("createQuickEvent failed", error)
    toast.add({
      title: "Quick-Eintrag konnte nicht angelegt werden",
      description: error?.message || "Bitte erneut versuchen.",
      color: "red"
    })
  }
}

function toggleDraftMode() {
  if (isDraftModeActive.value) {
    if (!visibleDraftEventIds.value.length) {
      isDraftModeActive.value = false
      toast.add({ title: "Entwurfsmodus deaktiviert", color: "green" })
      return
    }

    isFinalizeDraftsModalOpen.value = true
    return
  }

  isDraftModeActive.value = true
  toast.add({ title: "Entwurfsmodus aktiviert", description: "Neue Schichten werden als Entwurf angelegt.", color: "green" })
}

async function finalizeVisibleDrafts() {
  if (finalizingDrafts.value || !visibleDraftEventIds.value.length) return

  finalizingDrafts.value = true
  const draftCount = visibleDraftEventIds.value.length

  try {
    await Promise.all(
      visibleDraftEventIds.value.map((eventId) =>
        $api(`/api/resource/events/${eventId}`, {
          method: "PUT",
          body: { state: "Final" }
        })
      )
    )

    isDraftModeActive.value = false
    isFinalizeDraftsModalOpen.value = false
    toast.add({ title: "Entwürfe finalisiert", description: `${draftCount} Termine wurden finalisiert.`, color: "green" })
    await loadPlanningBoard()
  } catch (error) {
    console.error("finalizeVisibleDrafts failed", error)
    toast.add({
      title: "Entwürfe konnten nicht finalisiert werden",
      description: error?.message || "Bitte erneut versuchen.",
      color: "red"
    })
  } finally {
    finalizingDrafts.value = false
  }
}

function openAbsenceModal(type = "vacation", preset = {}) {
  absenceForm.mode = preset.entry ? "edit" : "create"
  absenceForm.entry = preset.entry || null
  absenceForm.type = type
  absenceForm.userId = preset.userId || profileOptions.value[0]?.value || ""
  absenceForm.startDate = preset.startDate || $dayjs().format("YYYY-MM-DD")
  absenceForm.endDate = preset.endDate || preset.startDate || $dayjs().format("YYYY-MM-DD")
  absenceForm.description = preset.description || ""
  isAbsenceModalOpen.value = true
}

async function saveAbsence() {
  if (!absenceForm.userId) {
    toast.add({ title: "Profil fehlt", description: "Bitte ein Profil auswählen.", color: "orange" })
    return
  }

  if (!absenceForm.startDate || !absenceForm.endDate) {
    toast.add({ title: "Zeitraum fehlt", description: "Bitte Start- und Enddatum angeben.", color: "orange" })
    return
  }

  if ($dayjs(absenceForm.endDate).isBefore($dayjs(absenceForm.startDate))) {
    toast.add({ title: "Zeitraum ungültig", description: "Das Enddatum muss am oder nach dem Startdatum liegen.", color: "orange" })
    return
  }

  savingAbsence.value = true

  try {
    const payload = {
      start: $dayjs(absenceForm.startDate).startOf("day").toISOString(),
      end: $dayjs(absenceForm.endDate).endOf("day").toISOString(),
      type: absenceForm.type,
      description: absenceForm.description || "",
      user_id: absenceForm.userId
    }

    if (absenceForm.mode === "edit" && absenceForm.entry) {
      await updateStaffTimeEntry(absenceForm.entry, payload)
      toast.add({ title: "Abwesenheit aktualisiert", color: "green" })
    } else {
      await createEntry(payload)
      toast.add({ title: absenceForm.type === "sick" ? "Krankmeldung eingetragen" : "Urlaub eingetragen", color: "green" })
    }

    isAbsenceModalOpen.value = false
    await loadPlanningBoard()
  } catch (error) {
    console.error("saveAbsence failed", error)
    toast.add({
      title: "Abwesenheit konnte nicht gespeichert werden",
      description: error?.message || "Bitte Eingaben prüfen und erneut versuchen.",
      color: "red"
    })
  } finally {
    savingAbsence.value = false
  }
}

async function loadPlanningBoard() {
  loading.value = true

  try {
    const [rawEvents, projects, profileResponse, inventoryItemRows] = await Promise.all([
      useEntities("events").select(),
      useEntities("projects").select(),
      useNuxtApp().$api("/api/tenant/profiles"),
      useEntities("inventoryitems").select()
    ])

    const profileRows = profileResponse?.data || []

    const absenceSpansByUserId = await Promise.all(
      (profileRows || [])
        .filter((profile) => profile.user_id)
        .map(async (profile) => ({
          userId: profile.user_id,
          spans: await listStaffTimeSpans({
            user_id: profile.user_id,
            from: visibleRange.value.from,
            to: visibleRange.value.to
          })
        }))
    )

    const projectsById = new Map((projects || []).map((project) => [project.id, project]))
    profiles.value = profileRows || []
    inventoryitems.value = inventoryItemRows || []

    if (!absenceForm.userId) {
      absenceForm.userId = profileOptions.value[0]?.value || ""
    }

    resources.value = buildResources({
      profiles: profiles.value,
      inventoryitems: inventoryitems.value
    })

    events.value = buildEvents({
      rawEvents: rawEvents || [],
      projectsById
    }).concat(buildAbsenceEvents(absenceSpansByUserId))
  } catch (error) {
    console.error("loadPlanningBoard failed", error)
    toast.add({
      title: "Plantafel konnte nicht geladen werden",
      description: "Die Ressourcen oder Planungen konnten nicht abgerufen werden.",
      color: "red"
    })
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  resetAbsenceForm()
  loadPlanningBoard()
})
</script>

<template>
  <div>
    <UDashboardNavbar title="Plantafel">
      <template #right>
        <UButton
          color="gray"
          variant="ghost"
          icon="i-heroicons-arrow-path"
          :loading="loading"
          @click="loadPlanningBoard"
        >
          Aktualisieren
        </UButton>
      </template>
    </UDashboardNavbar>

    <UDashboardToolbar>
      <template #left>
        <div class="flex flex-wrap items-center gap-3">
          <USelectMenu
            v-model="selectedType"
            :items="resourceTypeOptions"
            value-key="value"
            label-key="label"
            :clearable="false"
            class="min-w-[220px]"
          />
          <USelectMenu
            v-model="calendarView"
            :items="calendarViewOptions"
            value-key="value"
            label-key="label"
            :clearable="false"
            class="min-w-[160px]"
            @update:model-value="changeCalendarView"
          />
          <UPopover>
            <UButton
              color="neutral"
              variant="outline"
              icon="i-heroicons-calendar-days"
              class="min-w-[180px] justify-between"
            >
              {{ calendarCurrentDate ? $dayjs(calendarCurrentDate).format("DD.MM.YYYY") : "Datum wählen" }}
            </UButton>

            <template #content>
              <div class="p-2">
                <UCalendar v-model="calendarPickerValue" />
                <div class="flex justify-end border-t border-default pt-2">
                  <UButton color="neutral" variant="ghost" size="sm" @click="moveCalendarToday">
                    Heute
                  </UButton>
                </div>
              </div>
            </template>
          </UPopover>
          <div class="flex items-center gap-1">
            <UButton color="neutral" variant="ghost" icon="i-heroicons-chevron-left" @click="moveCalendar('prev')" />
            <UButton color="neutral" variant="ghost" icon="i-heroicons-chevron-right" @click="moveCalendar('next')" />
          </div>
          <span class="text-sm font-medium text-highlighted">
            {{ calendarTitle }}
          </span>
        </div>
      </template>
      <template #right>
        <div class="flex flex-wrap items-center gap-2">
          <UButton
            color="neutral"
            variant="outline"
            icon="i-heroicons-cog-6-tooth"
            @click="openQuickConfig"
          >
            Quick-Einträge
          </UButton>
          <UButton
            :color="isDraftModeActive ? 'amber' : 'neutral'"
            :variant="isDraftModeActive ? 'solid' : 'outline'"
            icon="i-heroicons-document-duplicate"
            @click="toggleDraftMode"
          >
            {{ isDraftModeActive ? "Entwurfsmodus aktiv" : "Entwurfsmodus" }}
          </UButton>
          <UButton
            color="amber"
            variant="soft"
            icon="i-heroicons-sun"
            @click="openAbsenceModal('vacation')"
          >
            Urlaub
          </UButton>
          <UButton
            color="error"
            variant="soft"
            icon="i-heroicons-heart"
            @click="openAbsenceModal('sick')"
          >
            Krank
          </UButton>
        </div>
      </template>
    </UDashboardToolbar>

    <UDashboardPanelContent class="p-5">
      <div v-if="loading" class="space-y-3">
        <USkeleton class="h-12 w-full" />
        <USkeleton class="h-[70vh] w-full" />
      </div>

      <UAlert
        v-else-if="visibleResources.length === 0"
        icon="i-heroicons-calendar-days"
        title="Keine planbaren Ressourcen vorhanden"
        description="Lege Profile an oder aktiviere die Plantafel-Nutzung bei Inventarartikeln, damit hier Ressourcen erscheinen."
      />

      <FullCalendar
        v-else
        ref="calendarRef"
        :options="calendarOptions"
      />
    </UDashboardPanelContent>

    <div
      v-if="isQuickConfigModalOpen"
      ref="quickConfigWindowEl"
      :style="quickConfigWindowStyle"
      class="fixed z-[999] flex h-[720px] w-[980px] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl resize dark:border-gray-800 dark:bg-gray-900"
    >
      <div class="flex cursor-move items-center justify-between border-b border-gray-200 bg-gray-50 p-3 select-none dark:border-gray-800 dark:bg-gray-800/50">
        <div class="flex items-center gap-3">
          <UIcon name="i-heroicons-cog-6-tooth" class="text-gray-500" />
          <div>
            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
              Quick-Einträge
            </h3>
            <p class="text-xs text-muted">
              Name und Farbe für neu gezogene Quick-Einträge in der Plantafel.
            </p>
          </div>
        </div>
        <UButton
          color="gray"
          variant="ghost"
          icon="i-heroicons-x-mark-20-solid"
          size="sm"
          @click="isQuickConfigModalOpen = false"
        />
      </div>

      <div class="flex-1 overflow-auto p-4">
        <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]">
          <div class="space-y-4">
            <div class="rounded border border-default p-3">
              <div class="space-y-3">
                <div>
                  <p class="text-sm font-medium text-highlighted">Vorlagen</p>
                  <p class="text-xs text-muted">Gespeicherte Kombinationen direkt für neue Quick-Einträge anwenden.</p>
                </div>

                <div v-if="quickEntryPresets.length" class="flex flex-wrap gap-2">
                  <button
                    v-for="preset in quickEntryPresets"
                    :key="preset.name"
                    type="button"
                    class="flex items-center gap-2 rounded border border-default px-2 py-1 text-xs transition hover:border-primary"
                    @click="applyQuickPreset(preset)"
                  >
                    <span
                      class="h-4 w-4 rounded-full border border-white/40"
                      :style="{ backgroundColor: preset.color }"
                    />
                    {{ preset.name }}
                  </button>
                </div>

                <p v-else class="text-sm text-muted">
                  Es sind noch keine Vorlagen gespeichert.
                </p>
              </div>
            </div>

            <div class="rounded border border-default p-3">
              <button
                type="button"
                class="flex w-full items-center justify-between text-left"
                @click="showQuickPresetManagement = !showQuickPresetManagement"
              >
                <div>
                  <p class="text-sm font-medium text-highlighted">Vorlagen verwalten</p>
                  <p class="text-xs text-muted">Tenantweite Vorlagen löschen oder aufräumen.</p>
                </div>
                <UIcon
                  :name="showQuickPresetManagement ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'"
                  class="text-muted"
                />
              </button>

              <div v-if="showQuickPresetManagement" class="mt-4 space-y-4 border-t border-default pt-4">
                <div v-if="quickEntryPresets.length" class="space-y-2">
                  <p class="text-xs font-medium text-muted">Gespeicherte Vorlagen</p>
                  <div
                    v-for="preset in quickEntryPresets"
                    :key="`${preset.name}-${preset.color}`"
                    class="flex items-center justify-between gap-3 rounded border border-default px-3 py-2"
                  >
                    <button
                      type="button"
                      class="flex min-w-0 items-center gap-2 text-left"
                      @click="applyQuickPreset(preset)"
                    >
                      <span
                        class="h-4 w-4 shrink-0 rounded-full border border-white/40"
                        :style="{ backgroundColor: preset.color }"
                      />
                      <span class="truncate text-sm">{{ preset.name }}</span>
                    </button>
                    <UButton
                      color="error"
                      variant="ghost"
                      icon="i-heroicons-trash"
                      @click="deleteQuickPreset(preset.name)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="rounded border border-default p-3">
            <button
              type="button"
              class="flex w-full items-center justify-between text-left"
              @click="showQuickConfigEditor = !showQuickConfigEditor"
            >
              <div>
                <p class="text-sm font-medium text-highlighted">Konfiguration</p>
                <p class="text-xs text-muted">Aktuellen Titel und Farbe für Quick-Einträge anpassen.</p>
              </div>
              <UIcon
                :name="showQuickConfigEditor ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'"
                class="text-muted"
              />
            </button>

            <div v-if="showQuickConfigEditor" class="mt-4 space-y-3 border-t border-default pt-4">
              <UFormField label="Titel">
                <UInput v-model="quickEntryConfig.name" class="w-full" />
              </UFormField>

              <UFormField label="Vorlagenname">
                <UInput v-model="newQuickPresetName" class="w-full" />
              </UFormField>

              <UFormField label="Farbe">
                <div class="space-y-3">
                  <div class="flex flex-wrap gap-2">
                    <button
                      v-for="option in quickEntryColorOptions"
                      :key="option.value"
                      type="button"
                      class="flex items-center gap-2 rounded border px-2 py-1 text-xs transition"
                      :class="quickEntryConfig.color === option.value ? 'border-primary ring-1 ring-primary' : 'border-default'"
                      @click="quickEntryConfig.color = option.value"
                    >
                      <span
                        class="h-4 w-4 rounded-full border border-white/40"
                        :style="{ backgroundColor: option.value }"
                      />
                      {{ option.label }}
                    </button>
                  </div>

                  <div class="flex items-center gap-3">
                    <input
                      v-model="quickEntryConfig.color"
                      type="color"
                      class="h-10 w-14 cursor-pointer rounded border border-default bg-transparent p-1"
                    >
                    <UInput v-model="quickEntryConfig.color" class="flex-1" />
                  </div>
                </div>
              </UFormField>

              <div class="rounded border border-default p-3">
                <div class="flex items-start justify-between gap-3">
                  <div>
                    <p class="text-xs text-muted">Vorschau</p>
                    <div class="mt-2 inline-flex rounded px-3 py-1 text-sm font-medium text-white" :style="{ backgroundColor: quickEntryConfig.color }">
                      {{ quickEntryConfig.name || "Quick-Eintrag" }}
                    </div>
                  </div>
                  <UButton
                    color="primary"
                    :loading="savingQuickConfig"
                    @click="saveQuickPreset"
                  >
                    Vorlage speichern
                  </UButton>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="absolute bottom-0 right-0 h-4 w-4 cursor-se-resize opacity-50">
        <UIcon name="i-heroicons-arrows-pointing-out" class="h-3 w-3 rotate-90 text-gray-400" />
      </div>
    </div>

    <UModal v-model:open="isFinalizeDraftsModalOpen">
      <template #content>
        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
          <template #header>
            <div class="flex items-center justify-between gap-3">
              <div>
                <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
                  Entwürfe finalisieren
                </h3>
                <p class="text-sm text-muted">
                  Beim Beenden des Entwurfsmodus können die aktuell sichtbaren Entwürfe finalisiert werden.
                </p>
              </div>
              <UButton
                color="gray"
                variant="ghost"
                icon="i-heroicons-x-mark-20-solid"
                class="-my-1"
                @click="isFinalizeDraftsModalOpen = false"
              />
            </div>
          </template>

          <div class="space-y-4">
            <UAlert
              color="amber"
              variant="soft"
              icon="i-heroicons-exclamation-triangle"
              :title="`${visibleDraftEventIds.length} sichtbare Entwürfe gefunden`"
              description="Diese Termine werden beim Finalisieren auf den Status Final gesetzt."
            />
          </div>

          <template #footer>
            <div class="flex justify-end gap-2">
              <UButton color="gray" variant="soft" @click="isFinalizeDraftsModalOpen = false">
                Abbrechen
              </UButton>
              <UButton color="primary" :loading="finalizingDrafts" @click="finalizeVisibleDrafts">
                Entwürfe finalisieren
              </UButton>
            </div>
          </template>
        </UCard>
      </template>
    </UModal>

    <UModal v-model:open="isAbsenceModalOpen">
      <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">
                {{ absenceModalTitle }}
              </h3>
              <UButton
                color="gray"
                variant="ghost"
                icon="i-heroicons-x-mark-20-solid"
                class="-my-1"
                @click="isAbsenceModalOpen = false"
              />
            </div>
          </template>

        <div class="space-y-4">
          <UFormField label="Profil">
            <USelectMenu
              v-model="absenceForm.userId"
              :items="profileOptions"
              value-key="value"
              label-key="label"
              class="w-full"
              :search-input="{ placeholder: 'Profil suchen...' }"
              :filter-fields="['label']"
            />
          </UFormField>

          <UFormField label="Typ">
            <USelectMenu
              v-model="absenceForm.type"
              :items="absenceTypeOptions"
              value-key="value"
              label-key="label"
              class="w-full"
            />
          </UFormField>

          <div class="grid grid-cols-2 gap-4">
            <UFormField label="Start">
              <div class="flex items-center gap-2">
                <UPopover>
                  <UButton
                    color="neutral"
                    variant="outline"
                    icon="i-heroicons-calendar-days"
                    class="min-w-0 flex-1 justify-between"
                  >
                    <span class="truncate text-left">
                      {{ absenceForm.startDate ? $dayjs(absenceForm.startDate).format("DD.MM.YYYY") : "Kein Datum" }}
                    </span>
                  </UButton>

                  <template #content>
                    <div class="p-2">
                      <UCalendar v-model="startDateValue" />
                      <div class="flex justify-end border-t border-default pt-2">
                        <UButton color="neutral" variant="ghost" size="sm" @click="setAbsenceDateToToday('startDate')">
                          Heute
                        </UButton>
                      </div>
                    </div>
                  </template>
                </UPopover>

                <UButton color="neutral" variant="soft" label="Heute" @click="setAbsenceDateToToday('startDate')" />
              </div>
            </UFormField>
            <UFormField label="Ende">
              <div class="flex items-center gap-2">
                <UPopover>
                  <UButton
                    color="neutral"
                    variant="outline"
                    icon="i-heroicons-calendar-days"
                    class="min-w-0 flex-1 justify-between"
                  >
                    <span class="truncate text-left">
                      {{ absenceForm.endDate ? $dayjs(absenceForm.endDate).format("DD.MM.YYYY") : "Kein Datum" }}
                    </span>
                  </UButton>

                  <template #content>
                    <div class="p-2">
                      <UCalendar v-model="endDateValue" />
                      <div class="flex justify-end border-t border-default pt-2">
                        <UButton color="neutral" variant="ghost" size="sm" @click="setAbsenceDateToToday('endDate')">
                          Heute
                        </UButton>
                      </div>
                    </div>
                  </template>
                </UPopover>

                <UButton color="neutral" variant="soft" label="Heute" @click="setAbsenceDateToToday('endDate')" />
              </div>
            </UFormField>
          </div>

          <UFormField label="Notiz">
            <UTextarea
              v-model="absenceForm.description"
              :placeholder="absenceForm.type === 'sick' ? 'z. B. Krankmeldung eingegangen' : 'z. B. Sommerurlaub'"
            />
          </UFormField>
        </div>

          <template #footer>
            <div class="flex justify-end gap-2">
              <UButton color="gray" variant="soft" @click="isAbsenceModalOpen = false">
                Abbrechen
              </UButton>
              <UButton color="primary" :loading="savingAbsence" @click="saveAbsence">
                Speichern
              </UButton>
            </div>
          </template>
        </UCard>
      </template>
    </UModal>

    <div
      v-if="isProfileDetailsModalOpen"
      ref="profileDetailsWindowEl"
      :style="profileDetailsWindowStyle"
      class="fixed z-[999] flex h-[760px] w-[980px] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl resize dark:border-gray-800 dark:bg-gray-900"
    >
      <div class="flex cursor-move items-center justify-between border-b border-gray-200 bg-gray-50 p-3 select-none dark:border-gray-800 dark:bg-gray-800/50">
        <div class="flex items-center gap-3">
          <UIcon name="i-heroicons-user-circle" class="text-gray-500" />
          <div>
            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
              {{ getProfileLabel(selectedProfile) }}
            </h3>
            <p class="text-xs text-muted">
              Mitarbeiterdetails
            </p>
          </div>
        </div>
        <UButton
          color="gray"
          variant="ghost"
          icon="i-heroicons-x-mark-20-solid"
          size="sm"
          @click="isProfileDetailsModalOpen = false"
        />
      </div>

      <div v-if="selectedProfile" class="flex-1 overflow-auto p-4">
        <div class="space-y-6">
          <div class="grid gap-4 md:grid-cols-2">
            <div class="rounded-lg border border-default p-4">
              <p class="text-xs font-medium uppercase tracking-wide text-muted">Kontakt</p>
              <dl class="mt-3 space-y-3 text-sm">
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">E-Mail</dt>
                  <dd class="text-right font-medium text-highlighted">{{ selectedProfile.email || "Nicht hinterlegt" }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Mobil</dt>
                  <dd class="text-right font-medium text-highlighted">{{ selectedProfile.mobile_tel || "Nicht hinterlegt" }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Festnetz</dt>
                  <dd class="text-right font-medium text-highlighted">{{ selectedProfile.fixed_tel || "Nicht hinterlegt" }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Geburtstag</dt>
                  <dd class="text-right font-medium text-highlighted">{{ formatProfileDate(selectedProfile.birthday) }}</dd>
                </div>
              </dl>
            </div>

            <div class="rounded-lg border border-default p-4">
              <p class="text-xs font-medium uppercase tracking-wide text-muted">Beschäftigung</p>
              <dl class="mt-3 space-y-3 text-sm">
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">MA-Nummer</dt>
                  <dd class="text-right font-medium text-highlighted">{{ selectedProfile.employee_number || "Nicht hinterlegt" }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Position</dt>
                  <dd class="text-right font-medium text-highlighted">{{ selectedProfile.position || "Nicht hinterlegt" }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Vertragsart</dt>
                  <dd class="text-right font-medium text-highlighted">{{ selectedProfile.contract_type || "Nicht hinterlegt" }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Eintrittsdatum</dt>
                  <dd class="text-right font-medium text-highlighted">{{ formatProfileDate(selectedProfile.entry_date) }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Wochenstunden</dt>
                  <dd class="text-right font-medium text-highlighted">{{ formatProfileNumber(selectedProfile.weekly_working_hours) }}</dd>
                </div>
              </dl>
            </div>
          </div>

          <div class="grid gap-4 md:grid-cols-2">
            <div class="rounded-lg border border-default p-4">
              <p class="text-xs font-medium uppercase tracking-wide text-muted">Zuordnung</p>
              <dl class="mt-3 space-y-3 text-sm">
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Niederlassung</dt>
                  <dd class="text-right font-medium text-highlighted">{{ selectedProfileBranchesLabel }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Teams</dt>
                  <dd class="text-right font-medium text-highlighted">{{ selectedProfileTeamsLabel }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Status</dt>
                  <dd class="text-right font-medium text-highlighted">{{ selectedProfile.active ? "Aktiv" : "Inaktiv" }}</dd>
                </div>
              </dl>
            </div>

            <div class="rounded-lg border border-default p-4">
              <div class="flex items-start justify-between gap-4">
                <div>
                  <p class="text-xs font-medium uppercase tracking-wide text-muted">Urlaub {{ currentVacationYear }}</p>
                  <p class="mt-1 text-sm text-muted">Anzeige auf Basis der aktuellen Zeitauswertung.</p>
                </div>
                <UBadge color="amber" variant="subtle">
                  Resturlaub
                </UBadge>
              </div>

              <div v-if="loadingProfileVacation" class="mt-4 space-y-2">
                <USkeleton class="h-6 w-full" />
                <USkeleton class="h-6 w-4/5" />
                <USkeleton class="h-6 w-3/5" />
              </div>

              <dl v-else class="mt-4 space-y-3 text-sm">
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Urlaubsanspruch</dt>
                  <dd class="text-right font-medium text-highlighted">{{ formatProfileNumber(selectedProfileAnnualLeaveDays) }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Bereits verplant/genehmigt</dt>
                  <dd class="text-right font-medium text-highlighted">{{ formatProfileNumber(selectedProfileVacationDaysTaken) }}</dd>
                </div>
                <div class="flex items-start justify-between gap-4">
                  <dt class="text-muted">Resturlaub</dt>
                  <dd class="text-right text-base font-semibold text-highlighted">
                    {{ selectedProfileRemainingVacationDays === null ? "Nicht hinterlegt" : formatProfileNumber(selectedProfileRemainingVacationDays) }}
                  </dd>
                </div>
              </dl>
            </div>
          </div>

          <div class="rounded-lg border border-default p-4">
            <div class="flex items-start justify-between gap-4">
              <div>
                <p class="text-xs font-medium uppercase tracking-wide text-muted">Verfügbarkeitshinweis</p>
                <p class="mt-1 text-sm text-muted">Z. B. bevorzugte Einsatzzeiten oder bekannte Einschränkungen.</p>
              </div>
              <UBadge color="sky" variant="subtle">
                Verfügbarkeit
              </UBadge>
            </div>
            <p class="mt-4 whitespace-pre-wrap text-sm font-medium text-highlighted">
              {{ selectedProfileAvailabilityNote }}
            </p>
          </div>
        </div>
      </div>

      <div class="flex justify-end gap-2 border-t border-gray-200 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-800/30">
        <UButton
          color="primary"
          variant="soft"
          icon="i-heroicons-pencil-square"
          @click="selectedProfile?.id && router.push(`/staff/profiles/${selectedProfile.id}`)"
        >
          Bearbeiten
        </UButton>
        <UButton color="gray" variant="soft" @click="isProfileDetailsModalOpen = false">
          Schließen
        </UButton>
      </div>

      <div class="absolute bottom-0 right-0 h-4 w-4 cursor-se-resize opacity-50">
        <UIcon name="i-heroicons-arrows-pointing-out" class="h-3 w-3 rotate-90 text-gray-400" />
      </div>
    </div>
  </div>
</template>

<style scoped>
:deep(.planning-board-draft-event) {
  opacity: 0.7;
}

:deep(.planning-board-draft-event .fc-timeline-event) {
  border-style: dashed;
}
</style>
