<template>
  <UDashboardPanel id="organization">
    <template #header>
      <UDashboardNavbar :title="$t('organization.pageTitle')">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
      </UDashboardNavbar>
    </template>

    <template #body>
      <div class="flex flex-col gap-6 w-full lg:max-w-4xl mx-auto p-6">
        <template v-if="selectedOrganization">
          <!-- Organization Details Card -->
          <UCard>
            <template #header>
              <div class="flex items-center gap-3">
                <div class="flex items-center justify-center w-12 h-12 rounded-lg bg-primary/10">
                  <UIcon name="i-lucide-building-2" class="w-6 h-6 text-primary" />
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-highlighted">{{ selectedOrganization.name }}</h3>
                  <p class="text-sm text-muted mt-1">{{ $t('organization.current') }}</p>
                </div>
              </div>
            </template>

            <div class="space-y-4">
              <div>
                <label class="text-sm font-medium text-muted">{{ $t('organization.name') }}</label>
                <p class="text-base text-highlighted mt-1">{{ selectedOrganization.name }}</p>
              </div>

              <div>
                <label class="text-sm font-medium text-muted">{{ $t('organization.id') }}</label>
                <p class="text-base text-highlighted mt-1 font-mono text-sm">{{ selectedOrganization.id }}</p>
              </div>
            </div>
          </UCard>
        </template>

        <template v-else>
          <!-- No Organization Card -->
          <UCard>
            <template #header>
              <div class="flex items-center gap-3">
                <div class="flex items-center justify-center w-12 h-12 rounded-lg bg-warning/10">
                  <UIcon name="i-lucide-alert-triangle" class="w-6 h-6 text-warning" />
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-highlighted">{{ $t('organization.noOrganization') }}</h3>
                  <p class="text-sm text-muted mt-1">{{ $t('organization.noOrganizationDescription') }}</p>
                </div>
              </div>
            </template>
          </UCard>
        </template>
      </div>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
import { useUserStore } from '~~/stores/useUserStore'

definePageMeta({
  layout: 'default'
})

const { t: $t } = useI18n()
const userStore = useUserStore()

const { selectedOrganization } = storeToRefs(userStore)
</script>
