<script setup lang="ts">
// Right-side panel with full detail on a partner teammate. Three tabs:
//   • Access & role — what they can do, which customers they can enter
//   • Activity      — last 5 partner actions with timestamps + IPs
//   • Security      — MFA card, active sessions, API tokens, suspend callout

import { customers } from '~/data/customers'

export interface TeamMember {
  id: string
  name: string
  email: string
  role: string
  access: 'all' | 'specific' | 'none' | string
  mfa: string
  lastSeen: string
  isOwner?: boolean
}

const props = defineProps<{ member: TeamMember | null }>()
const emit = defineEmits<{ close: [] }>()

const tab = ref<'access' | 'activity' | 'security'>('access')

watch(
  () => props.member?.id,
  () => { tab.value = 'access' },
)

const tabs = computed(() => [
  { value: 'access', label: 'Access & role' },
  { value: 'activity', label: 'Activity', count: 5 },
  { value: 'security', label: 'Security' },
])

const recentActions = [
  { when: '12 min ago', action: 'entered customer', target: 'Acme Industries', ip: '92.43.118.4 · København' },
  { when: '1 h ago', action: 'invited user', target: 'magnus@acme.dk', ip: '92.43.118.4 · København' },
  { when: 'Yesterday', action: 'changed plan', target: 'Bygherre · Business → Business+', ip: '92.43.118.4 · København' },
  { when: '3 days ago', action: 'signed in', target: 'partner console', ip: '78.32.4.91 · København' },
  { when: '1 week ago', action: 'provisioned', target: 'Henriksen Revision · new customer', ip: '92.43.118.4 · København' },
]

function permissionsFor(role: string) {
  return [
    { l: 'View customer dashboards', allowed: true },
    { l: 'Enter customer as partner', allowed: role !== 'Billing' },
    { l: 'Provision new customers', allowed: role === 'Partner admin' || role === 'Sales' },
    { l: 'Change customer plans', allowed: role === 'Partner admin' || role === 'Sales' },
    { l: 'Manage partner billing', allowed: role === 'Partner admin' || role === 'Billing' },
    { l: 'Manage partner team', allowed: role === 'Partner admin' },
    { l: 'Edit partner branding', allowed: role === 'Partner admin' },
  ]
}

const isOwner = computed(() => !!props.member?.isOwner)

const accessText = computed(() => {
  if (!props.member) return ''
  if (props.member.access === 'all') return `all (${customers.length})`
  if (props.member.access === 'none') return 'no access'
  // Specific: just say first N customers
  return `${customers.length - 5} of ${customers.length}`
})
</script>

<template>
  <SidePanel
    :open="!!member"
    width="lg"
    eyebrow="Partner teammate"
    :title="member?.name || ''"
    @close="emit('close')"
  >
    <template #header>
      <!-- header handled by SidePanel slot defaults -->
    </template>

    <div v-if="member" class="profile-head">
      <Avatar :name="member.name" :size="48" />
      <div class="ph-meta">
        <div class="ph-name">{{ member.name }}</div>
        <Mono dim>{{ member.email }}</Mono>
      </div>
      <Badge :tone="member.role === 'Partner admin' ? 'invert' : 'neutral'">{{ member.role }}</Badge>
    </div>

    <div v-if="member" class="profile-stats">
      <div>
        <Eyebrow>Customer access</Eyebrow>
        <div class="ps-val">{{ accessText }}</div>
      </div>
      <div>
        <Eyebrow>MFA</Eyebrow>
        <div class="ps-val"><Badge tone="ok" dot>enabled</Badge></div>
      </div>
      <div>
        <Eyebrow>Last seen</Eyebrow>
        <div class="ps-val">{{ member.lastSeen }}</div>
      </div>
    </div>

    <div class="tabs-wrap">
      <Tabs v-model="tab" :items="tabs" />
    </div>

    <div v-if="member && tab === 'access'" class="tab-body">
      <div class="field">
        <Eyebrow>Role</Eyebrow>
        <div class="role-grid">
          <div
            v-for="r in ['Partner admin', 'Sales', 'Support', 'Billing']"
            :key="r"
            class="role-card"
            :class="{ selected: member.role === r }"
          >
            <span>{{ r }}</span>
            <Badge v-if="member.role === r" tone="invert">current</Badge>
          </div>
        </div>
      </div>

      <div>
        <Eyebrow>Customer access</Eyebrow>
        <div class="access-card">
          <div class="ac-head">
            <Mono dim>{{ accessText }}</Mono>
            <UiButton size="sm" variant="ghost">Change</UiButton>
          </div>
          <div class="ac-list">
            <div
              v-for="c in customers.slice(0, member.access === 'all' ? customers.length : 3)"
              :key="c.id"
              class="ac-row"
            >
              <UiIcon name="check" :size="11" :stroke-width="2.5" />
              <div class="cust-swatch" :style="{ background: c.brandColor }" />
              <span class="cust-name">{{ c.name }}</span>
              <Mono dim>{{ c.planLabel }}</Mono>
            </div>
          </div>
        </div>
      </div>

      <div>
        <Eyebrow>Permissions in {{ member.role }}</Eyebrow>
        <div class="perm-list">
          <div v-for="p in permissionsFor(member.role)" :key="p.l" class="perm-row">
            <UiIcon :name="p.allowed ? 'check' : 'x'" :size="12" :stroke-width="p.allowed ? 2.5 : 2" />
            <span :class="{ muted: !p.allowed }">{{ p.l }}</span>
          </div>
        </div>
      </div>
    </div>

    <div v-if="member && tab === 'activity'" class="tab-body">
      <div class="activity-list">
        <div v-for="(a, i) in recentActions" :key="i" class="activity-row">
          <div class="activity-icon">
            <UiIcon
              :name="a.action.startsWith('signed') ? 'shield' : a.action.startsWith('entered') ? 'arrowRight' : a.action.startsWith('invited') ? 'users' : a.action.startsWith('provisioned') ? 'plus' : 'brush'"
              :size="12"
            />
          </div>
          <div class="activity-meta">
            <div class="ar-top">
              <Mono dim>{{ a.action }}</Mono>
              <span>{{ a.target }}</span>
            </div>
            <Mono dim>{{ a.ip }}</Mono>
          </div>
          <Mono dim>{{ a.when }}</Mono>
        </div>
      </div>
    </div>

    <div v-if="member && tab === 'security'" class="tab-body">
      <div class="sec-row">
        <UiIcon name="shield" :size="16" />
        <div class="sec-meta">
          <div class="sec-label">MFA enabled</div>
          <Mono dim>TOTP · enrolled 12 Jan 2026</Mono>
        </div>
        <UiButton size="sm" variant="ghost">Reset</UiButton>
      </div>
      <div class="sec-row">
        <UiIcon name="device" :size="16" />
        <div class="sec-meta">
          <div class="sec-label">3 active sessions</div>
          <Mono dim>Chrome · macOS · København</Mono>
        </div>
        <UiButton size="sm" variant="ghost">View · sign out</UiButton>
      </div>
      <div class="sec-row">
        <UiIcon name="key" :size="16" />
        <div class="sec-meta">
          <div class="sec-label">API tokens</div>
          <Mono dim>1 personal token · last used 2 d ago</Mono>
        </div>
        <UiButton size="sm" variant="ghost">Manage</UiButton>
      </div>

      <div class="danger-callout">
        <UiIcon name="shield" :size="14" />
        <div class="dc-meta">
          <div class="dc-label">Suspend account</div>
          <p>Immediately revoke access. Sessions are terminated and the teammate cannot sign back in. Reversible.</p>
        </div>
        <UiButton size="sm" variant="secondary" :disabled="isOwner">Suspend</UiButton>
      </div>
    </div>

    <template #footer>
      <UiButton variant="danger" :disabled="isOwner">
        <template #leading><UiIcon name="trash" :size="14" /></template>
        Remove from team
      </UiButton>
      <div style="flex:1" />
      <UiButton variant="secondary">
        <template #leading><UiIcon name="refresh" :size="14" /></template>
        Reset password
      </UiButton>
      <UiButton variant="primary" @click="emit('close')">
        <template #leading><UiIcon name="check" :size="14" /></template>
        Save
      </UiButton>
    </template>
  </SidePanel>
</template>

<style scoped>
.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.ph-meta { flex: 1; min-width: 0; }
.ph-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.ps-val { font-size: 13px; font-weight: 500; margin-top: 4px; }

.tabs-wrap { margin: -2px -24px 0; padding: 0 24px; border-bottom: 1px solid var(--border); }

.tab-body { padding-top: 22px; display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 8px; }

.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.role-card.selected { border-color: var(--text); background: var(--bg); }

.access-card {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 8px;
}
.ac-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ac-list { display: flex; flex-direction: column; gap: 6px; }
.ac-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.ac-row :deep(svg) { color: var(--ok); }
.cust-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.cust-name { flex: 1; }

.perm-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.perm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  font-size: 13px;
}
.perm-row :deep(svg) { color: var(--ok); }
.perm-row .muted { color: var(--text-mute); }
.perm-row :deep(svg.muted) { color: var(--text-mute); }

.activity-list { display: flex; flex-direction: column; gap: 8px; }
.activity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.activity-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  flex-shrink: 0;
}
.activity-meta { flex: 1; min-width: 0; }
.ar-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ar-top span { font-size: 13px; }

.sec-row {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-row :deep(svg) { color: var(--text-mute); flex-shrink: 0; }
.sec-meta { flex: 1; }
.sec-label { font-size: 13px; font-weight: 500; }

.danger-callout {
  margin-top: 8px;
  padding: 14px;
  background: rgba(226, 48, 48, 0.06);
  border: 1px solid rgba(226, 48, 48, 0.22);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.danger-callout :deep(svg) { color: var(--bad); margin-top: 2px; flex-shrink: 0; }
.dc-meta { flex: 1; }
.dc-label { font-size: 13px; font-weight: 600; color: var(--bad); }
.dc-meta p { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 4px 0 0; }
</style>
