<script setup lang="ts">
// Banner shown at top of viewport when a partner admin is acting inside a
// specific customer org. Distinct color (indigo — partner mode is normal
// operating mode, not danger). Persistent until partner exits.

import type { PartnerTenantDoc } from '~/types/partner'

const partnerMode = usePartnerMode()
const router = useRouter()
const { partner, isPartnerStaff } = useMe()

// Real tenant list (shared key; gated to partner-staff so the layout-level
// banner doesn't 403 the partner endpoint for other users).
const { data: tenants } = useFetch<PartnerTenantDoc[]>('/api/partner/tenants', {
  key: 'partner-tenants',
  default: () => [],
  immediate: isPartnerStaff.value,
})

const activeCustomer = computed(() =>
  (tenants.value ?? []).find((c) => c._id === partnerMode.activeCustomerId.value) || null,
)

onMounted(() => partnerMode.hydrate())

function exit() {
  partnerMode.exit()
  router.push('/partner/customers')
}
</script>

<template>
  <div v-if="partnerMode.isActive.value && activeCustomer" class="banner">
    <span class="dot" />
    <div class="meta">
      <Mono>Partner view</Mono>
      <span class="text">managing <strong>{{ activeCustomer.name }}</strong> · actions are attributed to {{ partner?.name ?? 'your partner org' }} in the customer's audit log</span>
    </div>
    <button class="exit" @click="exit">
      <UiIcon name="logout" :size="12" />
      <span>Exit partner view</span>
    </button>
  </div>
</template>

<style scoped>
.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(to right, rgba(63, 107, 255, 0.18), rgba(63, 107, 255, 0.08));
  border-bottom: 1px solid rgba(63, 107, 255, 0.36);
  padding: 8px 16px;
  font-size: 12.5px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #4D8BE8;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(77, 139, 232, 0.18);
}

.meta { flex: 1; display: flex; align-items: center; gap: 12px; color: var(--text); min-width: 0; }
.text { color: var(--text-dim); }
.text strong { color: var(--text); font-weight: 600; }

.exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.exit:hover { background: var(--surface); }
</style>
