<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { api } from '@/api'
import { useRouter } from 'vue-router'

const router = useRouter()

// State
const loading = ref(true)
const error = ref('')
const activeTab = ref<'overview' | 'organizations' | 'modules'>('overview')

// Stats
const stats = ref({
  org_count: 0,
  user_count: 0,
  order_count: 0,
  timesheet_count: 0
})

// Organizations
const organizations = ref<any[]>([])
const selectedOrg = ref<any>(null)
const orgDetails = ref<any>(null)
const orgModules = ref<any[]>([])
const showOrgModal = ref(false)
const orgAction = ref<'details' | 'subscription' | 'modules'>('details')
const actionLoading = ref(false)
const actionMessage = ref('')

// Filter
const statusFilter = ref('all')
const searchQuery = ref('')

// Module definitions with pricing
const moduleDefinitions = [
  { id: 'core', name: 'Basis', description: 'Grundfunktionen', icon: '🏠', price: 0, included: true },
  { id: 'orders', name: 'Aufträge', description: 'Auftragsverwaltung', icon: '📋', price: 0, included: true },
  { id: 'availability', name: 'Verfügbarkeit', description: 'Einsatzplanung', icon: '🗓️', price: 0, included: true },
  { id: 'timesheets', name: 'Stundenzettel', description: 'Zeiterfassung', icon: '⏱️', price: 0, included: true },
  { id: 'users', name: 'Benutzer', description: 'Mitarbeiterverwaltung', icon: '👥', price: 0, included: true },
  { id: 'qualifications', name: 'Qualifikationen', description: '§34a Tracking', icon: '🎓', price: 19, included: false },
  { id: 'objects', name: 'Objekte', description: 'Standortverwaltung', icon: '🏢', price: 0, included: true },
  { id: 'shifts', name: 'Schichten', description: 'Dienstplanung', icon: '📅', price: 29, included: false },
  { id: 'patrols', name: 'Rundgänge', description: 'Kontrollgänge', icon: '📍', price: 29, included: false },
  { id: 'incidents', name: 'Vorfälle', description: 'Vorfallserfassung', icon: '🚨', price: 19, included: false },
  { id: 'vehicles', name: 'Fahrzeuge', description: 'Fuhrparkverwaltung', icon: '🚗', price: 19, included: false },
  { id: 'customers', name: 'Kunden', description: 'Kundenstamm', icon: '🤝', price: 0, included: true },
  { id: 'billing', name: 'Abrechnung', description: 'Rechnungserstellung', icon: '💰', price: 49, included: false },
  { id: 'documents', name: 'Dokumente', description: 'Dateiverwaltung', icon: '📁', price: 9, included: false },
  { id: 'partnerships', name: 'Partnerschaften', description: 'Subunternehmer', icon: '🤝', price: 39, included: false },
]

// Filtered organizations
const filteredOrganizations = computed(() => {
  let filtered = organizations.value
  
  if (statusFilter.value !== 'all') {
    filtered = filtered.filter(org => org.subscription_status === statusFilter.value)
  }
  
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(org => 
      org.name?.toLowerCase().includes(query) || 
      org.slug?.toLowerCase().includes(query)
    )
  }
  
  return filtered
})

onMounted(async () => {
  await loadDashboard()
})

async function loadDashboard() {
  loading.value = true
  error.value = ''
  
  try {
    const [dashRes, orgsRes] = await Promise.all([
      api.get<any>('/admin/dashboard'),
      api.get<any>('/admin/organizations')
    ])
    
    stats.value = dashRes.data.stats
    organizations.value = orgsRes.data.organizations
  } catch (e) {
    error.value = e instanceof Error ? e.message : 'Laden fehlgeschlagen'
    if (error.value.includes('Super-Admin')) {
      router.push('/')
    }
  } finally {
    loading.value = false
  }
}

async function openOrgModal(org: any, action: 'details' | 'subscription' | 'modules' = 'details') {
  selectedOrg.value = org
  orgAction.value = action
  showOrgModal.value = true
  actionMessage.value = ''
  
  try {
    const [detailsRes, modulesRes] = await Promise.all([
      api.get<any>(`/admin/organizations/${org.id}`),
      api.get<any>(`/admin/organizations/${org.id}/modules`)
    ])
    orgDetails.value = detailsRes.data
    orgModules.value = modulesRes.data.modules
  } catch (e) {
    console.error('Load org details failed:', e)
  }
}

function closeOrgModal() {
  showOrgModal.value = false
  selectedOrg.value = null
  orgDetails.value = null
  orgModules.value = []
}

// Subscription Actions
async function setOrgFree(reason: string = '') {
  if (!selectedOrg.value) return
  actionLoading.value = true
  
  try {
    await api.post(`/admin/organizations/${selectedOrg.value.id}/set-free`, { reason: reason || 'Freigestellt' })
    actionMessage.value = '✅ Organisation freigestellt'
    selectedOrg.value.subscription_status = 'free'
    await loadDashboard()
  } catch (e) {
    actionMessage.value = '❌ Fehler: ' + (e instanceof Error ? e.message : 'Unbekannt')
  } finally {
    actionLoading.value = false
  }
}

async function pauseOrg(reason: string = '') {
  if (!selectedOrg.value) return
  actionLoading.value = true
  
  try {
    await api.post(`/admin/organizations/${selectedOrg.value.id}/pause`, { reason: reason || 'Zahlung ausstehend' })
    actionMessage.value = '✅ Organisation pausiert'
    selectedOrg.value.subscription_status = 'paused'
    await loadDashboard()
  } catch (e) {
    actionMessage.value = '❌ Fehler: ' + (e instanceof Error ? e.message : 'Unbekannt')
  } finally {
    actionLoading.value = false
  }
}

async function activateOrg(days: number = 30, plan: string = 'business') {
  if (!selectedOrg.value) return
  actionLoading.value = true
  
  try {
    await api.post(`/admin/organizations/${selectedOrg.value.id}/activate`, { days, plan })
    actionMessage.value = `✅ Organisation aktiviert (${days} Tage ${plan})`
    selectedOrg.value.subscription_status = 'active'
    await loadDashboard()
  } catch (e) {
    actionMessage.value = '❌ Fehler: ' + (e instanceof Error ? e.message : 'Unbekannt')
  } finally {
    actionLoading.value = false
  }
}

async function extendTrial(days: number = 14) {
  if (!selectedOrg.value) return
  actionLoading.value = true
  
  try {
    await api.post(`/admin/organizations/${selectedOrg.value.id}/extend-trial`, { days })
    actionMessage.value = `✅ Trial um ${days} Tage verlängert`
    selectedOrg.value.subscription_status = 'trial'
    await loadDashboard()
  } catch (e) {
    actionMessage.value = '❌ Fehler: ' + (e instanceof Error ? e.message : 'Unbekannt')
  } finally {
    actionLoading.value = false
  }
}

async function removeFree() {
  if (!selectedOrg.value) return
  actionLoading.value = true
  
  try {
    await api.post(`/admin/organizations/${selectedOrg.value.id}/remove-free`, { set_trial_days: 14 })
    actionMessage.value = '✅ Freistellung aufgehoben'
    selectedOrg.value.subscription_status = 'trial'
    await loadDashboard()
  } catch (e) {
    actionMessage.value = '❌ Fehler: ' + (e instanceof Error ? e.message : 'Unbekannt')
  } finally {
    actionLoading.value = false
  }
}

// Module Actions
async function toggleModule(moduleId: string, enabled: boolean) {
  if (!selectedOrg.value) return
  
  try {
    await api.put(`/admin/organizations/${selectedOrg.value.id}/modules/${moduleId}`, { enabled })
    
    // Update local state
    const mod = orgModules.value.find(m => m.id === moduleId)
    if (mod) mod.enabled = enabled
    
    actionMessage.value = enabled ? `✅ ${moduleId} aktiviert` : `✅ ${moduleId} deaktiviert`
  } catch (e) {
    actionMessage.value = '❌ Fehler: ' + (e instanceof Error ? e.message : 'Unbekannt')
  }
}

async function impersonate(orgId: string) {
  if (!confirm('Als Chef dieser Organisation einloggen?')) return
  
  try {
    const res = await api.post<any>(`/admin/impersonate/${orgId}`)
    localStorage.setItem('accessToken', res.data.token)
    localStorage.setItem('impersonating', 'true')
    window.location.href = '/'
  } catch (e) {
    alert('Impersonation fehlgeschlagen')
  }
}

// Helpers
function formatDate(date: string) {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  })
}

function daysUntil(date: string) {
  if (!date) return null
  const diff = new Date(date).getTime() - Date.now()
  return Math.ceil(diff / (1000 * 60 * 60 * 24))
}

function getStatusBadge(status: string) {
  const badges: Record<string, string> = {
    free: 'bg-green-100 text-green-800',
    active: 'bg-blue-100 text-blue-800',
    trial: 'bg-yellow-100 text-yellow-800',
    paused: 'bg-red-100 text-red-800',
    expired: 'bg-gray-100 text-gray-800',
  }
  return badges[status] || badges.expired
}

function getStatusLabel(status: string) {
  const labels: Record<string, string> = {
    free: '🎁 Freigestellt',
    active: '✅ Aktiv',
    trial: '🧪 Trial',
    paused: '⏸️ Pausiert',
    expired: '❌ Abgelaufen',
  }
  return labels[status] || status
}

function getPlanBadge(plan: string) {
  const badges: Record<string, string> = {
    starter: 'bg-gray-100 text-gray-700',
    business: 'bg-purple-100 text-purple-700',
    enterprise: 'bg-yellow-100 text-yellow-700',
  }
  return badges[plan] || badges.starter
}
</script>

<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <!-- Header -->
    <header class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <span class="text-2xl">🛡️</span>
          <h1 class="text-xl font-bold text-gray-900 dark:text-white">
            SeCu Super-Admin Panel
          </h1>
        </div>
        <router-link to="/" class="btn btn-secondary text-sm">
          ← Zurück zur App
        </router-link>
      </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 py-8">
      <!-- Loading -->
      <div v-if="loading" class="text-center py-12">
        <p class="text-gray-500">Lädt...</p>
      </div>

      <!-- Error -->
      <div v-else-if="error" class="card bg-red-50 text-red-700 text-center">
        {{ error }}
      </div>

      <!-- Content -->
      <div v-else class="space-y-6">
        <!-- Tabs -->
        <div class="flex gap-2 border-b dark:border-gray-700 pb-4">
          <button 
            @click="activeTab = 'overview'"
            :class="['px-4 py-2 rounded-lg font-medium transition', 
              activeTab === 'overview' ? 'bg-purple-600 text-white' : 'bg-white dark:bg-gray-800 hover:bg-gray-100']"
          >
            📊 Übersicht
          </button>
          <button 
            @click="activeTab = 'organizations'"
            :class="['px-4 py-2 rounded-lg font-medium transition', 
              activeTab === 'organizations' ? 'bg-purple-600 text-white' : 'bg-white dark:bg-gray-800 hover:bg-gray-100']"
          >
            🏢 Organisationen
          </button>
          <button 
            @click="activeTab = 'modules'"
            :class="['px-4 py-2 rounded-lg font-medium transition', 
              activeTab === 'modules' ? 'bg-purple-600 text-white' : 'bg-white dark:bg-gray-800 hover:bg-gray-100']"
          >
            🧩 Modul-Preise
          </button>
        </div>

        <!-- Overview Tab -->
        <div v-if="activeTab === 'overview'" class="space-y-6">
          <!-- Stats -->
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="card text-center">
              <div class="text-3xl font-bold text-purple-600">{{ stats.org_count }}</div>
              <div class="text-sm text-gray-500">Organisationen</div>
            </div>
            <div class="card text-center">
              <div class="text-3xl font-bold text-green-600">{{ stats.user_count }}</div>
              <div class="text-sm text-gray-500">Benutzer</div>
            </div>
            <div class="card text-center">
              <div class="text-3xl font-bold text-blue-600">{{ stats.order_count }}</div>
              <div class="text-sm text-gray-500">Aufträge</div>
            </div>
            <div class="card text-center">
              <div class="text-3xl font-bold text-orange-600">{{ stats.timesheet_count }}</div>
              <div class="text-sm text-gray-500">Stundenzettel</div>
            </div>
          </div>

          <!-- Status Overview -->
          <div class="card">
            <h2 class="text-lg font-semibold mb-4">Subscription Status</h2>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
              <div class="p-4 rounded-lg bg-green-50 text-center">
                <div class="text-2xl font-bold text-green-600">
                  {{ organizations.filter(o => o.subscription_status === 'free').length }}
                </div>
                <div class="text-sm text-green-700">Freigestellt</div>
              </div>
              <div class="p-4 rounded-lg bg-blue-50 text-center">
                <div class="text-2xl font-bold text-blue-600">
                  {{ organizations.filter(o => o.subscription_status === 'active').length }}
                </div>
                <div class="text-sm text-blue-700">Aktiv</div>
              </div>
              <div class="p-4 rounded-lg bg-yellow-50 text-center">
                <div class="text-2xl font-bold text-yellow-600">
                  {{ organizations.filter(o => o.subscription_status === 'trial').length }}
                </div>
                <div class="text-sm text-yellow-700">Trial</div>
              </div>
              <div class="p-4 rounded-lg bg-red-50 text-center">
                <div class="text-2xl font-bold text-red-600">
                  {{ organizations.filter(o => o.subscription_status === 'paused').length }}
                </div>
                <div class="text-sm text-red-700">Pausiert</div>
              </div>
              <div class="p-4 rounded-lg bg-gray-100 text-center">
                <div class="text-2xl font-bold text-gray-600">
                  {{ organizations.filter(o => o.subscription_status === 'expired' || (!o.subscription_status)).length }}
                </div>
                <div class="text-sm text-gray-700">Abgelaufen</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Organizations Tab -->
        <div v-if="activeTab === 'organizations'" class="space-y-4">
          <!-- Filters -->
          <div class="card">
            <div class="flex flex-wrap gap-4">
              <div class="flex-1 min-w-[200px]">
                <input 
                  v-model="searchQuery"
                  type="text"
                  placeholder="🔍 Organisation suchen..."
                  class="input w-full"
                />
              </div>
              <select v-model="statusFilter" class="input w-40">
                <option value="all">Alle Status</option>
                <option value="free">🎁 Freigestellt</option>
                <option value="active">✅ Aktiv</option>
                <option value="trial">🧪 Trial</option>
                <option value="paused">⏸️ Pausiert</option>
              </select>
            </div>
          </div>

          <!-- Organizations Table -->
          <div class="card overflow-hidden">
            <div class="overflow-x-auto">
              <table class="w-full">
                <thead class="text-left text-sm text-gray-500 border-b dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
                  <tr>
                    <th class="px-4 py-3 font-medium">Organisation</th>
                    <th class="px-4 py-3 font-medium">Status</th>
                    <th class="px-4 py-3 font-medium">Plan</th>
                    <th class="px-4 py-3 font-medium">Läuft ab</th>
                    <th class="px-4 py-3 font-medium">Users</th>
                    <th class="px-4 py-3 font-medium">Aktionen</th>
                  </tr>
                </thead>
                <tbody class="divide-y dark:divide-gray-700">
                  <tr 
                    v-for="org in filteredOrganizations" 
                    :key="org.id" 
                    class="hover:bg-gray-50 dark:hover:bg-gray-800"
                  >
                    <td class="px-4 py-3">
                      <div class="font-medium text-gray-900 dark:text-white">{{ org.name }}</div>
                      <div class="text-sm text-gray-500">{{ org.slug }}</div>
                    </td>
                    <td class="px-4 py-3">
                      <span :class="['px-2 py-1 rounded-full text-xs font-medium', getStatusBadge(org.subscription_status)]">
                        {{ getStatusLabel(org.subscription_status) }}
                      </span>
                    </td>
                    <td class="px-4 py-3">
                      <span :class="['px-2 py-1 rounded text-xs font-medium', getPlanBadge(org.subscription_plan)]">
                        {{ org.subscription_plan || 'starter' }}
                      </span>
                    </td>
                    <td class="px-4 py-3 text-sm">
                      <template v-if="org.subscription_status === 'free'">
                        <span class="text-green-600">∞ Unbegrenzt</span>
                      </template>
                      <template v-else-if="org.subscription_status === 'trial'">
                        <span :class="daysUntil(org.trial_ends_at) <= 3 ? 'text-red-600' : 'text-yellow-600'">
                          {{ daysUntil(org.trial_ends_at) }} Tage
                        </span>
                      </template>
                      <template v-else-if="org.subscription_ends_at">
                        {{ formatDate(org.subscription_ends_at) }}
                      </template>
                      <template v-else>
                        -
                      </template>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500">
                      {{ org.user_count }}
                    </td>
                    <td class="px-4 py-3">
                      <div class="flex gap-2">
                        <button 
                          @click="openOrgModal(org, 'subscription')"
                          class="text-xs px-2 py-1 bg-purple-100 text-purple-700 rounded hover:bg-purple-200"
                        >
                          💳 Abo
                        </button>
                        <button 
                          @click="openOrgModal(org, 'modules')"
                          class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200"
                        >
                          🧩 Module
                        </button>
                        <button 
                          @click="openOrgModal(org, 'details')"
                          class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
                        >
                          👁️
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- Modules Tab -->
        <div v-if="activeTab === 'modules'" class="space-y-4">
          <div class="card">
            <h2 class="text-lg font-semibold mb-4">🧩 Standard-Module & Preise</h2>
            <p class="text-sm text-gray-500 mb-6">
              Diese Module können pro Organisation aktiviert/deaktiviert werden. Premium-Module kosten extra.
            </p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <div 
                v-for="mod in moduleDefinitions" 
                :key="mod.id"
                :class="['p-4 rounded-lg border-2', mod.included ? 'border-green-200 bg-green-50' : 'border-purple-200 bg-purple-50']"
              >
                <div class="flex items-start justify-between">
                  <div>
                    <span class="text-2xl">{{ mod.icon }}</span>
                    <h3 class="font-semibold mt-1">{{ mod.name }}</h3>
                    <p class="text-sm text-gray-600">{{ mod.description }}</p>
                  </div>
                  <div class="text-right">
                    <div v-if="mod.included" class="text-green-600 font-bold">
                      Inklusive
                    </div>
                    <div v-else class="text-purple-600 font-bold">
                      +{{ mod.price }}€/Mo
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- Organization Modal -->
    <div v-if="showOrgModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
        <div class="p-6">
          <!-- Header -->
          <div class="flex items-center justify-between mb-6">
            <div>
              <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                {{ selectedOrg?.name }}
              </h2>
              <p class="text-sm text-gray-500">{{ selectedOrg?.slug }}</p>
            </div>
            <button @click="closeOrgModal" class="text-gray-400 hover:text-gray-600 text-2xl">
              ✕
            </button>
          </div>

          <!-- Modal Tabs -->
          <div class="flex gap-2 mb-6 border-b pb-4">
            <button 
              @click="orgAction = 'details'"
              :class="['px-3 py-1.5 rounded text-sm font-medium', orgAction === 'details' ? 'bg-gray-900 text-white' : 'bg-gray-100']"
            >
              👁️ Details
            </button>
            <button 
              @click="orgAction = 'subscription'"
              :class="['px-3 py-1.5 rounded text-sm font-medium', orgAction === 'subscription' ? 'bg-gray-900 text-white' : 'bg-gray-100']"
            >
              💳 Subscription
            </button>
            <button 
              @click="orgAction = 'modules'"
              :class="['px-3 py-1.5 rounded text-sm font-medium', orgAction === 'modules' ? 'bg-gray-900 text-white' : 'bg-gray-100']"
            >
              🧩 Module
            </button>
          </div>

          <!-- Action Message -->
          <div v-if="actionMessage" class="mb-4 p-3 rounded-lg bg-gray-100 text-sm">
            {{ actionMessage }}
          </div>

          <!-- Details View -->
          <div v-if="orgAction === 'details' && orgDetails">
            <div class="grid grid-cols-3 gap-4 mb-6">
              <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-center">
                <div class="text-2xl font-bold">{{ orgDetails.users?.length || 0 }}</div>
                <div class="text-sm text-gray-500">Benutzer</div>
              </div>
              <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-center">
                <div class="text-2xl font-bold">{{ orgDetails.stats?.order_count || 0 }}</div>
                <div class="text-sm text-gray-500">Aufträge</div>
              </div>
              <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-center">
                <div class="text-2xl font-bold">{{ orgDetails.stats?.enabled_modules || 0 }}</div>
                <div class="text-sm text-gray-500">Module</div>
              </div>
            </div>

            <h3 class="font-semibold mb-3">Benutzer</h3>
            <div class="space-y-2 max-h-60 overflow-y-auto">
              <div 
                v-for="user in orgDetails.users" 
                :key="user.id"
                class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <div>
                  <div class="font-medium">{{ user.first_name }} {{ user.last_name }}</div>
                  <div class="text-sm text-gray-500">{{ user.email }} • {{ user.role }}</div>
                </div>
              </div>
            </div>

            <div class="mt-6 pt-4 border-t">
              <button 
                @click="impersonate(selectedOrg.id)"
                class="btn btn-secondary text-sm"
              >
                🎭 Als Chef einloggen
              </button>
            </div>
          </div>

          <!-- Subscription View -->
          <div v-if="orgAction === 'subscription'">
            <div class="mb-6 p-4 rounded-lg bg-gray-50">
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span class="text-gray-500">Status:</span>
                  <span :class="['ml-2 px-2 py-0.5 rounded text-xs font-medium', getStatusBadge(selectedOrg.subscription_status)]">
                    {{ getStatusLabel(selectedOrg.subscription_status) }}
                  </span>
                </div>
                <div>
                  <span class="text-gray-500">Plan:</span>
                  <span class="ml-2 font-medium">{{ selectedOrg.subscription_plan || 'starter' }}</span>
                </div>
                <div v-if="selectedOrg.trial_ends_at">
                  <span class="text-gray-500">Trial endet:</span>
                  <span class="ml-2">{{ formatDate(selectedOrg.trial_ends_at) }}</span>
                </div>
                <div v-if="selectedOrg.subscription_ends_at">
                  <span class="text-gray-500">Abo endet:</span>
                  <span class="ml-2">{{ formatDate(selectedOrg.subscription_ends_at) }}</span>
                </div>
              </div>
            </div>

            <h3 class="font-semibold mb-4">Aktionen</h3>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <!-- Set Free -->
              <button 
                @click="setOrgFree('Partner')"
                :disabled="actionLoading || selectedOrg.subscription_status === 'free'"
                class="p-4 rounded-lg border-2 border-green-200 bg-green-50 hover:bg-green-100 text-left disabled:opacity-50"
              >
                <div class="font-semibold text-green-700">🎁 Freistellen</div>
                <div class="text-sm text-green-600">Kostenlos, kein Ablauf</div>
              </button>

              <!-- Remove Free -->
              <button 
                @click="removeFree()"
                :disabled="actionLoading || selectedOrg.subscription_status !== 'free'"
                class="p-4 rounded-lg border-2 border-gray-200 bg-gray-50 hover:bg-gray-100 text-left disabled:opacity-50"
              >
                <div class="font-semibold text-gray-700">↩️ Freistellung aufheben</div>
                <div class="text-sm text-gray-600">Zurück zu Trial</div>
              </button>

              <!-- Activate -->
              <button 
                @click="activateOrg(30, 'business')"
                :disabled="actionLoading"
                class="p-4 rounded-lg border-2 border-blue-200 bg-blue-50 hover:bg-blue-100 text-left disabled:opacity-50"
              >
                <div class="font-semibold text-blue-700">✅ Aktivieren (30 Tage)</div>
                <div class="text-sm text-blue-600">Business Plan</div>
              </button>

              <!-- Activate 1 Year -->
              <button 
                @click="activateOrg(365, 'enterprise')"
                :disabled="actionLoading"
                class="p-4 rounded-lg border-2 border-purple-200 bg-purple-50 hover:bg-purple-100 text-left disabled:opacity-50"
              >
                <div class="font-semibold text-purple-700">⭐ Aktivieren (1 Jahr)</div>
                <div class="text-sm text-purple-600">Enterprise Plan</div>
              </button>

              <!-- Extend Trial -->
              <button 
                @click="extendTrial(14)"
                :disabled="actionLoading"
                class="p-4 rounded-lg border-2 border-yellow-200 bg-yellow-50 hover:bg-yellow-100 text-left disabled:opacity-50"
              >
                <div class="font-semibold text-yellow-700">⏰ Trial +14 Tage</div>
                <div class="text-sm text-yellow-600">Verlängern</div>
              </button>

              <!-- Pause -->
              <button 
                @click="pauseOrg('Zahlung ausstehend')"
                :disabled="actionLoading || selectedOrg.subscription_status === 'paused'"
                class="p-4 rounded-lg border-2 border-red-200 bg-red-50 hover:bg-red-100 text-left disabled:opacity-50"
              >
                <div class="font-semibold text-red-700">⏸️ Pausieren</div>
                <div class="text-sm text-red-600">Zugang sperren</div>
              </button>
            </div>
          </div>

          <!-- Modules View -->
          <div v-if="orgAction === 'modules'">
            <div class="space-y-3">
              <div 
                v-for="mod in moduleDefinitions" 
                :key="mod.id"
                class="flex items-center justify-between p-4 rounded-lg border bg-white dark:bg-gray-700"
              >
                <div class="flex items-center gap-3">
                  <span class="text-2xl">{{ mod.icon }}</span>
                  <div>
                    <div class="font-medium">{{ mod.name }}</div>
                    <div class="text-sm text-gray-500">{{ mod.description }}</div>
                  </div>
                </div>
                <div class="flex items-center gap-4">
                  <span v-if="mod.price > 0" class="text-sm text-purple-600 font-medium">
                    +{{ mod.price }}€
                  </span>
                  <span v-else class="text-sm text-green-600">
                    Inklusive
                  </span>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input 
                      type="checkbox"
                      :checked="orgModules.find(m => m.name === mod.id)?.enabled ?? mod.included"
                      @change="toggleModule(mod.id, ($event.target as HTMLInputElement).checked)"
                      class="sr-only peer"
                    >
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6;
}
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition;
}
.btn-primary {
  @apply bg-purple-600 text-white hover:bg-purple-700;
}
.btn-secondary {
  @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
}
.input {
  @apply border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-700;
}
</style>
