<script setup>
import {
  TAX_EVALUATION_PERIOD_OPTIONS,
  normalizeTaxEvaluationPeriod
} from "~/composables/useTaxEvaluation"

const auth = useAuthStore()
const toast = useToast()
const defaultFeatures = {
  objects: true,
  calendar: true,
  contacts: true,
  projects: true,
  vehicles: true,
  contracts: true,
  inventory: true,
  accounting: true,
  timeTracking: true,
  planningBoard: true,
  workingTimeTracking: true,
  dashboard: true,
  historyitems: true,
  tasks: true,
  wiki: true,
  files: true,
  createdletters: true,
  documentboxes: true,
  helpdesk: true,
  email: true,
  members: true,
  customers: true,
  vendors: true,
  contactsList: true,
  staffTime: true,
  createDocument: true,
  serialInvoice: true,
  incomingInvoices: true,
  outgoingsepamandates: true,
  costcentres: true,
  branches: true,
  teams: true,
  accounts: true,
  ownaccounts: true,
  banking: true,
  spaces: true,
  customerspaces: true,
  customerinventoryitems: true,
  inventoryitems: true,
  inventoryitemgroups: true,
  products: true,
  productcategories: true,
  services: true,
  servicecategories: true,
  memberrelations: true,
  staffProfiles: true,
  hourrates: true,
  projecttypes: true,
  contracttypes: true,
  plants: true,
  settingsNumberRanges: true,
  settingsEmailAccounts: true,
  settingsBanking: true,
  settingsTexttemplates: true,
  settingsTenant: true,
  export: true,
}
const featureOptions = [
  { key: "dashboard", label: "Dashboard" },
  { key: "historyitems", label: "Logbuch" },
  { key: "tasks", label: "Aufgaben" },
  { key: "planningBoard", label: "Plantafel" },
  { key: "wiki", label: "Wiki" },
  { key: "files", label: "Dateien" },
  { key: "createdletters", label: "Anschreiben" },
  { key: "documentboxes", label: "Boxen" },
  { key: "helpdesk", label: "Helpdesk" },
  { key: "email", label: "E-Mail" },
  { key: "members", label: "Mitglieder" },
  { key: "customers", label: "Kunden" },
  { key: "vendors", label: "Lieferanten" },
  { key: "contactsList", label: "Ansprechpartner" },
  { key: "staffTime", label: "Mitarbeiter: Zeiten" },
  { key: "createDocument", label: "Buchhaltung: Ausgangsbelege" },
  { key: "serialInvoice", label: "Buchhaltung: Serienvorlagen" },
  { key: "incomingInvoices", label: "Buchhaltung: Eingangsbelege" },
  { key: "outgoingsepamandates", label: "Buchhaltung: Ausgehende SEPA-Mandate" },
  { key: "costcentres", label: "Buchhaltung: Kostenstellen" },
  { key: "branches", label: "Stammdaten: Niederlassungen" },
  { key: "teams", label: "Mitarbeiter: Teams" },
  { key: "accounts", label: "Buchhaltung: Buchungskonten" },
  { key: "ownaccounts", label: "Buchhaltung: Zusätzliche Buchungskonten" },
  { key: "banking", label: "Buchhaltung: Bank" },
  { key: "spaces", label: "Lagerplätze" },
  { key: "customerspaces", label: "Kundenlagerplätze" },
  { key: "customerinventoryitems", label: "Kundeninventar" },
  { key: "inventoryitems", label: "Inventar" },
  { key: "inventoryitemgroups", label: "Inventargruppen" },
  { key: "products", label: "Stammdaten: Artikel" },
  { key: "productcategories", label: "Stammdaten: Artikelkategorien" },
  { key: "services", label: "Stammdaten: Leistungen" },
  { key: "servicecategories", label: "Stammdaten: Leistungskategorien" },
  { key: "memberrelations", label: "Stammdaten: Mitgliedsverhältnisse" },
  { key: "staffProfiles", label: "Mitarbeiter: Mitarbeiterprofile" },
  { key: "hourrates", label: "Stammdaten: Stundensätze" },
  { key: "projecttypes", label: "Stammdaten: Projekttypen" },
  { key: "contracttypes", label: "Stammdaten: Vertragstypen" },
  { key: "vehicles", label: "Stammdaten: Fahrzeuge" },
  { key: "projects", label: "Projekte" },
  { key: "contracts", label: "Verträge" },
  { key: "plants", label: "Objekte" },
  { key: "settingsNumberRanges", label: "Einstellungen: Nummernkreise" },
  { key: "settingsEmailAccounts", label: "Einstellungen: E-Mail Konten" },
  { key: "settingsBanking", label: "Einstellungen: Bankkonten" },
  { key: "settingsTexttemplates", label: "Einstellungen: Textvorlagen" },
  { key: "settingsTenant", label: "Einstellungen: Firmeneinstellungen" },
  { key: "export", label: "Einstellungen: Export" },
]

const itemInfo = ref({
  features: {},
  businessInfo: {},
  projectTypes: []
})

const canManageMcpTokens = computed(() => Boolean(auth.user?.is_admin || auth.hasPermission("mcp.tokens.write")))
const mcpTokens = ref([])
const mcpTokensLoading = ref(false)
const mcpTokenCreating = ref(false)
const mcpTokenDeletingId = ref(null)
const createdMcpToken = ref("")
const mcpTokenForm = reactive({
  name: "Codex MCP Token",
  expiresAt: ""
})
const telephonyTrunkLoading = ref(false)
const telephonyTrunkSaving = ref(false)
const telephonyTrunkApplying = ref(false)
const telephonyTrunkForm = reactive({
  enabled: false,
  registrar: "tel.t-online.de",
  sipUser: "",
  authUser: "",
  password: "",
  passwordConfigured: false,
  clearPassword: false,
  callerId: "",
  inboundExtension: "1001",
  outboundPrefix: "0",
  externalSignalingAddress: "",
  externalMediaAddress: "",
  localNetworks: "172.16.0.0/12,192.168.0.0/16,10.0.0.0/8"
})

const setupPage = async () => {
  itemInfo.value = auth.activeTenantData
  console.log(itemInfo.value)
}

const features = ref({ ...defaultFeatures, ...(auth.activeTenantData?.features || {}) })
const businessInfo = ref(auth.activeTenantData.businessInfo)
const accountChart = ref(auth.activeTenantData.accountChart || "skr03")
const taxEvaluationPeriod = ref(normalizeTaxEvaluationPeriod(auth.activeTenantData.taxEvaluationPeriod))
const accountChartOptions = [
  { label: "SKR 03", value: "skr03" },
  { label: "Verein", value: "verein" }
]

const updateTenant = async (newData) => {

  const res = await useNuxtApp().$api(`/api/tenant/other/${auth.activeTenant}`, {
    method: "PUT",
    body: {
      data: newData,
    }
  })

  if (res) {
    itemInfo.value = res
    auth.activeTenantData = res
    features.value = { ...defaultFeatures, ...(res?.features || {}) }
    taxEvaluationPeriod.value = normalizeTaxEvaluationPeriod(res?.taxEvaluationPeriod)
  }
}
const saveFeatures = async () => {
  await updateTenant({features: features.value})
}

const formatMcpTokenDate = (value) => {
  if (!value) return "Nie"

  return new Date(value).toLocaleString("de-DE", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit"
  })
}

const loadMcpTokens = async () => {
  if (!canManageMcpTokens.value) return

  mcpTokensLoading.value = true
  try {
    const res = await useNuxtApp().$api("/api/mcp/tokens")
    mcpTokens.value = res?.rows || []
  } catch (error) {
    toast.add({ title: "MCP Tokens konnten nicht geladen werden", color: "error" })
  } finally {
    mcpTokensLoading.value = false
  }
}

const loadTelephonyTrunk = async () => {
  telephonyTrunkLoading.value = true

  try {
    const res = await useNuxtApp().$api("/api/telephony/trunk-config")
    telephonyTrunkForm.enabled = Boolean(res?.enabled)
    telephonyTrunkForm.registrar = res?.registrar || "tel.t-online.de"
    telephonyTrunkForm.sipUser = res?.sipUser || ""
    telephonyTrunkForm.authUser = res?.authUser || ""
    telephonyTrunkForm.password = ""
    telephonyTrunkForm.passwordConfigured = Boolean(res?.passwordConfigured)
    telephonyTrunkForm.clearPassword = false
    telephonyTrunkForm.callerId = res?.callerId || ""
    telephonyTrunkForm.inboundExtension = res?.inboundExtension || "1001"
    telephonyTrunkForm.outboundPrefix = res?.outboundPrefix || "0"
    telephonyTrunkForm.externalSignalingAddress = res?.externalSignalingAddress || ""
    telephonyTrunkForm.externalMediaAddress = res?.externalMediaAddress || ""
    telephonyTrunkForm.localNetworks = res?.localNetworks || "172.16.0.0/12,192.168.0.0/16,10.0.0.0/8"
  } catch (error) {
    toast.add({ title: "Telefonie-Trunk konnte nicht geladen werden", color: "error" })
  } finally {
    telephonyTrunkLoading.value = false
  }
}

const saveTelephonyTrunk = async () => {
  if (telephonyTrunkForm.enabled && (!telephonyTrunkForm.sipUser?.trim() || (!telephonyTrunkForm.password?.trim() && !telephonyTrunkForm.passwordConfigured))) {
    toast.add({
      title: "Telekom-Zugang unvollständig",
      description: "Bitte gib mindestens SIP-ID und Kennwort an.",
      color: "orange"
    })
    return
  }

  telephonyTrunkSaving.value = true

  try {
    const res = await useNuxtApp().$api("/api/telephony/trunk-config", {
      method: "PUT",
      body: {
        enabled: telephonyTrunkForm.enabled,
        registrar: telephonyTrunkForm.registrar,
        sipUser: telephonyTrunkForm.sipUser,
        authUser: telephonyTrunkForm.authUser,
        password: telephonyTrunkForm.password,
        clearPassword: telephonyTrunkForm.clearPassword,
        callerId: telephonyTrunkForm.callerId,
        inboundExtension: telephonyTrunkForm.inboundExtension,
        outboundPrefix: telephonyTrunkForm.outboundPrefix,
        externalSignalingAddress: telephonyTrunkForm.externalSignalingAddress,
        externalMediaAddress: telephonyTrunkForm.externalMediaAddress,
        localNetworks: telephonyTrunkForm.localNetworks
      }
    })

    telephonyTrunkForm.password = ""
    telephonyTrunkForm.passwordConfigured = Boolean(res?.passwordConfigured)
    telephonyTrunkForm.clearPassword = false
    toast.add({ title: "Telefonie-Trunk gespeichert", color: "success" })
  } catch (error) {
    toast.add({
      title: "Telefonie-Trunk konnte nicht gespeichert werden",
      description: error?.data?.error || error?.message,
      color: "error"
    })
  } finally {
    telephonyTrunkSaving.value = false
  }
}

const applyTelephonyTrunk = async () => {
  telephonyTrunkApplying.value = true

  try {
    const res = await useNuxtApp().$api("/api/telephony/trunk-config/apply", {
      method: "POST"
    })

    toast.add({
      title: res?.warning ? "Trunk-Konfiguration geschrieben" : "Telefonie-Trunk angewendet",
      description: res?.warning || (res?.status?.registered ? "Telekom-Registration ist aktiv." : "Asterisk wurde neu geladen."),
      color: res?.warning ? "orange" : "success"
    })
  } catch (error) {
    toast.add({
      title: "Telefonie-Trunk konnte nicht angewendet werden",
      description: error?.data?.error || error?.message,
      color: "error"
    })
  } finally {
    telephonyTrunkApplying.value = false
  }
}

const createMcpToken = async () => {
  if (!mcpTokenForm.name?.trim()) {
    toast.add({ title: "Name fehlt", description: "Bitte gib einen Namen für den Token an.", color: "orange" })
    return
  }

  mcpTokenCreating.value = true
  createdMcpToken.value = ""

  try {
    const res = await useNuxtApp().$api("/api/mcp/tokens", {
      method: "POST",
      body: {
        name: mcpTokenForm.name.trim(),
        expiresAt: mcpTokenForm.expiresAt || null
      }
    })

    createdMcpToken.value = res?.token || ""
    toast.add({ title: "MCP Token erstellt", color: "success" })
    await loadMcpTokens()
  } catch (error) {
    toast.add({ title: "MCP Token konnte nicht erstellt werden", color: "error" })
  } finally {
    mcpTokenCreating.value = false
  }
}

const copyCreatedMcpToken = async () => {
  if (!createdMcpToken.value) return

  await navigator.clipboard.writeText(createdMcpToken.value)
  toast.add({ title: "Token kopiert", color: "success" })
}

const deactivateMcpToken = async (token) => {
  if (!token?.id || !confirm(`MCP Token "${token.name}" deaktivieren?`)) return

  mcpTokenDeletingId.value = token.id
  try {
    await useNuxtApp().$api(`/api/mcp/tokens/${token.id}`, {
      method: "DELETE"
    })
    toast.add({ title: "MCP Token deaktiviert", color: "success" })
    await loadMcpTokens()
  } catch (error) {
    toast.add({ title: "MCP Token konnte nicht deaktiviert werden", color: "error" })
  } finally {
    mcpTokenDeletingId.value = null
  }
}

setupPage()
onMounted(() => {
  loadMcpTokens()
  loadTelephonyTrunk()
})
</script>

<template>
  <UDashboardNavbar title="Firmeneinstellungen">

  </UDashboardNavbar>
  <UTabs
      class="p-5"
      :items="[
        {
          label: 'Dokubox'
        },{
          label: 'Rechnung & Kontakt'
        },{
          label: 'Integrationen'
        },{
          label: 'Funktionen'
        }
    ]"
  >
    <template #content="{item}">
      <div v-if="item.label === 'Dokubox'">
        <UAlert
            class="mt-5"
            title="DOKUBOX"
            color="neutral"
            variant="outline"
        >
          <template #description>
            <p>Die Dokubox ist eine E-Mail Inbox um deine Anhänge direkt als Dokumente zu importieren. Leite Deine E-Mails einfach an die folgende E-Mail Adresse weiter, diese ist für dein Unternehmen einzigartig. Die E-Mails werden dann alle 5 min abgerufen.</p>
            <br><br>
            <a
                v-if="itemInfo.id"
                :href="`mailto:${itemInfo.dokuboxkey}@fedeo-dokubox.de`"
            >
              {{itemInfo.dokuboxkey}}@fedeo-dokubox.de
            </a>
          </template>
        </UAlert>

      </div>
      <div v-if="item.label === 'Rechnung & Kontakt'">
          <UCard class="mt-5">
            <UForm class="w-1/2">
            <UFormField
                label="Firmenname:"
            >
              <UInput v-model="businessInfo.name"/>
            </UFormField>
            <UFormField
                label="Straße + Hausnummer:"
            >
              <UInput v-model="businessInfo.street"/>
            </UFormField>
            <UFormField
                label="PLZ + Ort"
                class="w-full"
            >
              <InputGroup class="w-full">
                <UInput v-model="businessInfo.zip"/>
                <UInput v-model="businessInfo.city" class="flex-auto"/>
              </InputGroup>
            </UFormField>
            <UButton
                class="mt-3"
                @click="updateTenant({businessInfo: businessInfo})"
            >
              Speichern
            </UButton>
            <UFormField
                label="Kontenrahmen:"
                class="mt-6"
            >
              <USelectMenu
                  v-model="accountChart"
                  :items="accountChartOptions"
                  label-key="label"
                  value-key="value"
              />
            </UFormField>
            <UButton
                class="mt-3"
                @click="updateTenant({accountChart: accountChart})"
            >
              Kontenrahmen speichern
            </UButton>
            <UFormField
                label="USt-Auswertung:"
                class="mt-6"
            >
              <USelectMenu
                  v-model="taxEvaluationPeriod"
                  :items="TAX_EVALUATION_PERIOD_OPTIONS"
                  label-key="label"
                  value-key="value"
              />
            </UFormField>
            <UButton
                class="mt-3"
                @click="updateTenant({taxEvaluationPeriod: taxEvaluationPeriod})"
            >
              Zeitraum speichern
            </UButton>
          </UForm>
        </UCard>

      </div>
      <div v-else-if="item.label === 'Integrationen'">
        <UCard class="mt-5">
          <div class="mb-8 space-y-6">
            <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
              <div>
                <h3 class="text-base font-semibold text-highlighted">Telefonie-Trunk</h3>
                <p class="text-sm text-muted">Konfiguriere den Telekom-Anschluss für externe Anrufe über Asterisk.</p>
              </div>
              <UBadge :color="telephonyTrunkForm.enabled ? 'success' : 'neutral'" variant="soft">
                {{ telephonyTrunkForm.enabled ? "Aktiv" : "Inaktiv" }}
              </UBadge>
            </div>

            <UAlert
                title="Telekom Zugangsdaten"
                color="neutral"
                variant="outline"
            >
              <template #description>
                <p class="text-sm">
                  Die SIP-ID ist meistens deine Rufnummer mit Vorwahl ohne Leerzeichen und Sonderzeichen.
                  Falls dein Anschluss die klassischen Zugangsdaten nutzt, kannst du den Auth-User aus
                  Anschlusskennung, Zugangsnummer, #, Mitbenutzernummer und @t-online.de bilden.
                </p>
              </template>
            </UAlert>

            <div class="grid gap-4 md:grid-cols-2">
              <UFormField label="Trunk aktivieren">
                <USwitch v-model="telephonyTrunkForm.enabled" />
              </UFormField>
              <UFormField label="Registrar">
                <UInput v-model="telephonyTrunkForm.registrar" placeholder="tel.t-online.de" />
              </UFormField>
              <UFormField label="SIP-ID / Rufnummer">
                <UInput v-model="telephonyTrunkForm.sipUser" placeholder="0301234567" />
              </UFormField>
              <UFormField label="Auth-User">
                <UInput v-model="telephonyTrunkForm.authUser" placeholder="Optional" />
              </UFormField>
              <UFormField :label="telephonyTrunkForm.passwordConfigured ? 'Kennwort ersetzen' : 'Kennwort'">
                <UInput
                    v-model="telephonyTrunkForm.password"
                    type="password"
                    :placeholder="telephonyTrunkForm.passwordConfigured ? 'Bereits gespeichert' : 'Persönliches Kennwort'"
                />
              </UFormField>
              <UFormField label="Gespeichertes Kennwort löschen">
                <USwitch
                    v-model="telephonyTrunkForm.clearPassword"
                    :disabled="!telephonyTrunkForm.passwordConfigured"
                />
              </UFormField>
              <UFormField label="Absendernummer">
                <UInput v-model="telephonyTrunkForm.callerId" placeholder="Optional, z. B. 0301234567" />
              </UFormField>
              <UFormField label="Eingehende Nebenstelle">
                <UInput v-model="telephonyTrunkForm.inboundExtension" placeholder="1001" />
              </UFormField>
              <UFormField label="Ausgehender Prefix">
                <UInput v-model="telephonyTrunkForm.outboundPrefix" placeholder="0" />
              </UFormField>
              <UFormField label="Öffentliche Signaling-Adresse">
                <UInput v-model="telephonyTrunkForm.externalSignalingAddress" placeholder="Öffentliche IP oder DNS-Name" />
              </UFormField>
              <UFormField label="Öffentliche Medien-Adresse">
                <UInput v-model="telephonyTrunkForm.externalMediaAddress" placeholder="Leer = Signaling-Adresse" />
              </UFormField>
              <UFormField label="Lokale Netze">
                <UInput v-model="telephonyTrunkForm.localNetworks" placeholder="172.16.0.0/12,192.168.0.0/16,10.0.0.0/8" />
              </UFormField>
            </div>

            <div class="flex flex-wrap gap-2">
              <UButton
                  icon="i-heroicons-arrow-path"
                  variant="outline"
                  :loading="telephonyTrunkLoading"
                  @click="loadTelephonyTrunk"
              >
                Laden
              </UButton>
              <UButton
                  icon="i-heroicons-check"
                  :loading="telephonyTrunkSaving"
                  @click="saveTelephonyTrunk"
              >
                Telefonie-Trunk speichern
              </UButton>
              <UButton
                  icon="i-heroicons-arrow-path-rounded-square"
                  color="primary"
                  variant="soft"
                  :loading="telephonyTrunkApplying"
                  @click="applyTelephonyTrunk"
              >
                In Asterisk anwenden
              </UButton>
            </div>
          </div>

          <USeparator class="mb-8" />

          <div class="space-y-6">
            <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
              <div>
                <h3 class="text-base font-semibold text-highlighted">MCP Tokens</h3>
                <p class="text-sm text-muted">Verwalte dauerhafte Tokens für Codex und andere MCP Clients.</p>
              </div>
              <UButton
                  icon="i-heroicons-arrow-path"
                  variant="outline"
                  :loading="mcpTokensLoading"
                  :disabled="!canManageMcpTokens"
                  @click="loadMcpTokens"
              >
                Aktualisieren
              </UButton>
            </div>

            <UAlert
                v-if="!canManageMcpTokens"
                title="Keine Berechtigung"
                description="Du benötigst Adminrechte oder die Berechtigung mcp.tokens.write."
                color="orange"
                variant="outline"
            />

            <div v-else class="space-y-6">
              <div class="grid gap-4 md:grid-cols-3">
                <UFormField label="Name" class="md:col-span-2">
                  <UInput v-model="mcpTokenForm.name" placeholder="z.B. Codex MCP Token" />
                </UFormField>
                <UFormField label="Ablaufdatum">
                  <UInput v-model="mcpTokenForm.expiresAt" type="date" />
                </UFormField>
              </div>

              <UButton
                  icon="i-heroicons-plus"
                  :loading="mcpTokenCreating"
                  @click="createMcpToken"
              >
                Token erstellen
              </UButton>

              <UAlert
                  v-if="createdMcpToken"
                  title="Token wurde erstellt"
                  description="Der Token wird nur jetzt vollständig angezeigt."
                  color="success"
                  variant="outline"
              >
                <template #description>
                  <div class="mt-3 space-y-3">
                    <UTextarea
                        :model-value="createdMcpToken"
                        readonly
                        autoresize
                    />
                    <UButton
                        icon="i-heroicons-clipboard-document"
                        variant="outline"
                        @click="copyCreatedMcpToken"
                    >
                      Token kopieren
                    </UButton>
                  </div>
                </template>
              </UAlert>

              <div class="overflow-x-auto rounded-md border border-default">
                <table class="min-w-full divide-y divide-default text-sm">
                  <thead class="bg-muted">
                  <tr>
                    <th class="px-4 py-3 text-left font-medium">Name</th>
                    <th class="px-4 py-3 text-left font-medium">Prefix</th>
                    <th class="px-4 py-3 text-left font-medium">Erstellt</th>
                    <th class="px-4 py-3 text-left font-medium">Zuletzt genutzt</th>
                    <th class="px-4 py-3 text-left font-medium">Läuft ab</th>
                    <th class="px-4 py-3 text-left font-medium">Status</th>
                    <th class="px-4 py-3 text-right font-medium">Aktion</th>
                  </tr>
                  </thead>
                  <tbody class="divide-y divide-default">
                  <tr v-if="!mcpTokensLoading && !mcpTokens.length">
                    <td colspan="7" class="px-4 py-6 text-center text-muted">Noch keine MCP Tokens vorhanden.</td>
                  </tr>
                  <tr v-for="token in mcpTokens" :key="token.id">
                    <td class="px-4 py-3">{{ token.name }}</td>
                    <td class="px-4 py-3 font-mono text-xs">{{ token.keyPrefix }}</td>
                    <td class="px-4 py-3">{{ formatMcpTokenDate(token.createdAt) }}</td>
                    <td class="px-4 py-3">{{ formatMcpTokenDate(token.lastUsedAt) }}</td>
                    <td class="px-4 py-3">{{ formatMcpTokenDate(token.expiresAt) }}</td>
                    <td class="px-4 py-3">
                      <UBadge :color="token.active ? 'success' : 'neutral'" variant="soft">
                        {{ token.active ? "Aktiv" : "Inaktiv" }}
                      </UBadge>
                    </td>
                    <td class="px-4 py-3 text-right">
                      <UButton
                          v-if="token.active"
                          icon="i-heroicons-archive-box"
                          color="error"
                          variant="ghost"
                          :loading="mcpTokenDeletingId === token.id"
                          @click="deactivateMcpToken(token)"
                      >
                        Deaktivieren
                      </UButton>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </UCard>
      </div>
      <div v-else-if="item.label === 'Funktionen'">
        <UCard class="mt-5">
          <UAlert
              title="Funktionen ausblenden"
              description="Nur Funktionen mit gesetztem Haken sind im Unternehmen verfügbar. Diese Einstellungen gelten für alle Mitarbeiter und sind unabhängig von Berechtigungen."
              color="error"
              variant="outline"
              class="mb-5"
          />
          <UCheckbox
              v-for="option in featureOptions"
              :key="option.key"
              :label="option.label"
              v-model="features[option.key]"
              @change="saveFeatures"
          />
        </UCard>
      </div>
    </template>
  </UTabs>
</template>

<style scoped>

</style>
