shiftcraft/app/pages/settings/billing.vue

<template>
  <div class="max-w-3xl">
    <!-- Header -->
    <div class="mb-8">
      <h1 class="text-2xl font-bold text-gray-900">Abonnement</h1>
      <p class="text-gray-500 mt-1 text-sm">Verwalten Sie Ihr ShiftCraft-Abonnement</p>
    </div>

    <!-- Settings nav -->
    <div class="flex gap-1 mb-6 border-b border-gray-100">
      <NuxtLink
        v-for="tab in settingsTabs"
        :key="tab.to"
        :to="tab.to"
        class="px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px"
        :class="$route.path === tab.to
          ? 'border-indigo-600 text-indigo-700'
          : 'border-transparent text-gray-500 hover:text-gray-700'"
      >
        {{ tab.label }}
      </NuxtLink>
    </div>

    <!-- Current plan card -->
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 mb-6">
      <div class="flex items-start justify-between mb-4">
        <div>
          <p class="text-sm text-gray-500 mb-1">Aktueller Plan</p>
          <h2 class="text-2xl font-bold text-gray-900">{{ currentPlanDetails.name }}</h2>
          <p class="text-gray-500 text-sm mt-1">{{ currentPlanDetails.description }}</p>
        </div>
        <div class="text-right">
          <span class="text-3xl font-bold text-gray-900">€{{ currentPlanDetails.price_eur_month }}</span>
          <span class="text-gray-400 text-sm">/Monat</span>
        </div>
      </div>

      <!-- Usage stats -->
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4 bg-gray-50 rounded-xl">
        <div class="text-center">
          <p class="text-lg font-bold text-gray-900">
            {{ employeeCount }}<span class="text-gray-400 text-sm font-normal"> / {{ employeeLimit === Infinity ? '∞' : employeeLimit }}</span>
          </p>
          <p class="text-xs text-gray-500">Mitarbeiter</p>
        </div>
        <div class="text-center">
          <p class="text-lg font-bold text-gray-900">
            {{ currentPlanDetails.solve_runs_per_month === Infinity ? '∞' : currentPlanDetails.solve_runs_per_month }}
          </p>
          <p class="text-xs text-gray-500">Schichtpläne/Monat</p>
        </div>
        <div class="text-center">
          <p class="text-lg font-bold text-gray-900">
            {{ currentPlanDetails.history_months === Infinity ? '∞' : currentPlanDetails.history_months }}
          </p>
          <p class="text-xs text-gray-500">Monate Verlauf</p>
        </div>
        <div class="text-center">
          <p class="text-lg font-bold" :class="currentPlanDetails.pdf_export ? 'text-green-600' : 'text-gray-400'">
            {{ currentPlanDetails.pdf_export ? 'Ja' : 'Nein' }}
          </p>
          <p class="text-xs text-gray-500">PDF/Excel Export</p>
        </div>
      </div>
    </div>

    <!-- Upgrade plans -->
    <div v-if="plan !== 'business'" class="space-y-4">
      <h3 class="font-bold text-gray-900">Upgraden Sie Ihren Plan</h3>
      <div class="grid sm:grid-cols-2 gap-4">
        <!-- Pro plan -->
        <div
          v-if="plan === 'free'"
          class="bg-gradient-to-br from-indigo-50 to-violet-50 rounded-2xl border-2 border-indigo-200 p-6"
        >
          <div class="flex items-center justify-between mb-3">
            <h4 class="font-bold text-indigo-900 text-lg">Pro</h4>
            <div class="text-right">
              <span class="text-2xl font-bold text-indigo-900">€29</span>
              <span class="text-indigo-600 text-sm">/Monat</span>
            </div>
          </div>
          <p class="text-indigo-700 text-sm mb-4">{{ PLAN_LIMITS.pro.description }}</p>
          <ul class="space-y-1.5 mb-5">
            <li v-for="f in PLAN_LIMITS.pro.features" :key="f" class="flex items-center gap-2 text-sm text-indigo-800">
              <UIcon name="i-lucide-check" class="w-4 h-4 text-indigo-600 shrink-0" />
              {{ f }}
            </li>
          </ul>
          <UButton color="primary" class="w-full justify-center" @click="upgrade('pro')">
            Auf Pro upgraden
          </UButton>
        </div>

        <!-- Business plan -->
        <div class="bg-gradient-to-br from-violet-50 to-purple-50 rounded-2xl border-2 border-violet-200 p-6">
          <div class="flex items-center justify-between mb-3">
            <h4 class="font-bold text-violet-900 text-lg">Business</h4>
            <div class="text-right">
              <span class="text-2xl font-bold text-violet-900">€99</span>
              <span class="text-violet-600 text-sm">/Monat</span>
            </div>
          </div>
          <p class="text-violet-700 text-sm mb-4">{{ PLAN_LIMITS.business.description }}</p>
          <ul class="space-y-1.5 mb-5">
            <li v-for="f in PLAN_LIMITS.business.features" :key="f" class="flex items-center gap-2 text-sm text-violet-800">
              <UIcon name="i-lucide-check" class="w-4 h-4 text-violet-600 shrink-0" />
              {{ f }}
            </li>
          </ul>
          <UButton color="secondary" class="w-full justify-center" style="background: #7c3aed; color: white" @click="upgrade('business')">
            Auf Business upgraden
          </UButton>
        </div>
      </div>

      <p class="text-xs text-gray-400 text-center">
        Upgrade-Funktion via Stripe — noch nicht vollständig integriert. Kontaktieren Sie uns für Enterprise-Pricing.
      </p>
    </div>

    <div v-else class="bg-green-50 border border-green-200 rounded-2xl p-4 flex items-center gap-3">
      <UIcon name="i-lucide-check-circle" class="w-5 h-5 text-green-600 shrink-0" />
      <p class="text-green-800 text-sm font-medium">Sie haben den Business-Plan — vollen Funktionsumfang freigeschaltet!</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PLAN_LIMITS } from '~/app/utils/planLimits'

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

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

const employeeCount = ref(0)
const employeeLimit = computed(() => limits.value.employee_limit)

const settingsTabs = [
  { to: '/settings/organization', label: 'Organisation' },
  { to: '/settings/shifts', label: 'Schichten' },
  { to: '/settings/billing', label: 'Abonnement' },
]

const currentPlanDetails = computed(() => PLAN_LIMITS[plan.value])

function upgrade(_planName: string) {
  toast.add({
    color: 'primary',
    title: 'Stripe-Integration',
    description: 'Upgrade-Link kommt bald. Kontaktieren Sie uns unter billing@shiftcraft.app',
  })
}

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

  try {
    const result = await pb.collection('employees').getList(1, 1, {
      filter: `org_id = "${orgId}" && active = true`,
    })
    employeeCount.value = result.totalItems
  } catch (err) {
    console.error('Failed to load employee count', err)
  }
})
</script>