<template>
  <section id="member-access" class="conversion-section" aria-labelledby="member-title">
    <div class="conversion-card member-panel glass">
      <div class="member-copy">
        <p class="section-kicker mono">Member platform</p>
        <h2 id="member-title">{{ content.memberAccessCopy.heading }}</h2>
        <p>{{ content.memberAccessCopy.description }}</p>
        <p v-if="memberPanelCopy" class="member-state-copy">{{ memberPanelCopy }}</p>
      </div>

      <div class="member-actions action-card" aria-live="polite" aria-label="Titan Lab member actions">
        <div v-if="!auth.ready" class="member-loading">
          <span class="skeleton"></span>
          <span>Checking session...</span>
        </div>

        <template v-else-if="auth.authenticated">
          <RouterLink class="btn primary-action" :to="memberAction?.to || '/apps'">
            {{ memberAction?.label || "Open Services" }}
          </RouterLink>
          <RouterLink class="btn secondary" to="/account">Account</RouterLink>
          <button class="btn tertiary button-like" type="button" @click="doLogout">Sign Out</button>
          <p v-if="memberState.error" class="member-error">{{ memberState.error }}</p>
        </template>

        <template v-else>
          <div class="member-action-group">
            <button class="btn primary-action button-like" type="button" @click="doLogin">Sign In</button>
            <RouterLink class="btn secondary" to="/request-access">Register</RouterLink>
          </div>
          <a v-if="auth.resetUrl" class="member-reset" :href="auth.resetUrl" target="_blank" rel="noopener noreferrer">
            Trouble signing in? Reset password
          </a>
        </template>
      </div>

      <div class="member-service-row" aria-label="Member service access">
        <div v-for="service in content.memberServices" :key="service.name" class="member-service-item">
          <a
            v-if="isExternal(service.href)"
            class="member-service-link"
            :href="service.href"
            :aria-label="serviceTooltip(service)"
            :title="serviceTooltip(service)"
            target="_blank"
            rel="noopener noreferrer"
          >
            <span class="member-service-icon" aria-hidden="true">{{ service.icon }}</span>
          </a>
          <RouterLink
            v-else
            class="member-service-link"
            :to="service.href"
            :aria-label="serviceTooltip(service)"
            :title="serviceTooltip(service)"
          >
            <span class="member-service-icon" aria-hidden="true">{{ service.icon }}</span>
          </RouterLink>
          <span class="member-service-tooltip" aria-hidden="true">
            <strong>{{ service.name }}</strong>
            <span>{{ service.description }}</span>
          </span>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { RouterLink } from "vue-router";
import { auth, login, logout } from "../auth";

defineProps({
  content: Object,
  memberPanelCopy: String,
  memberAction: Object,
  memberState: Object,
});

function isExternal(href) {
  return typeof href === "string" && /^https?:\/\//.test(href);
}

function serviceTooltip(service) {
  return `${service.name}: ${service.description}`;
}

function doLogin() {
  login();
}

function doLogout() {
  logout();
}
</script>

<style scoped>
.conversion-section {
  box-sizing: border-box;
  display: grid;
  align-content: start;
  scroll-margin-top: 0;
  margin-top: 0;
  padding: clamp(54px, 7vh, 82px) 0;
}

.conversion-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  gap: 24px;
  align-items: center;
  padding: clamp(28px, 4vw, 42px);
}

.section-kicker {
  color: var(--accent-cyan);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

.conversion-card h2 {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: 0;
}

.conversion-card p {
  font-size: 17px;
  line-height: 1.65;
}

#member-access {
  padding-top: clamp(40px, 5vh, 64px);
  padding-bottom: clamp(34px, 5vh, 56px);
}

.member-panel {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 18px 28px;
  align-items: center;
  padding: clamp(22px, 3vw, 30px);
  border-radius: 18px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.045), rgba(5, 12, 28, 0.72)),
    rgba(255, 255, 255, 0.025);
}

.member-panel h2 {
  font-size: clamp(28px, 4vw, 42px);
}

.member-panel p {
  max-width: 740px;
  margin: 10px 0 0;
}

.member-copy {
  min-width: 0;
}

.member-service-row {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 7px;
  width: 100%;
  max-width: none;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.member-service-item {
  position: relative;
  flex: 0 0 auto;
}

.member-service-link {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(0, 229, 197, 0.22);
  background:
    linear-gradient(135deg, rgba(0, 229, 197, 0.08), rgba(120, 180, 255, 0.06)),
    rgba(255, 255, 255, 0.035);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.member-service-link:hover,
.member-service-link:focus-visible {
  border-color: rgba(0, 229, 197, 0.58);
  background:
    linear-gradient(135deg, rgba(0, 229, 197, 0.16), rgba(120, 180, 255, 0.12)),
    rgba(255, 255, 255, 0.055);
  transform: translateY(-2px);
}

.member-service-icon {
  font-size: 19px;
  line-height: 1;
}

.member-service-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: max-content;
  max-width: min(250px, 74vw);
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 229, 197, 0.22);
  background: rgba(4, 11, 24, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  visibility: hidden;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 140ms ease;
}

.member-service-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(0, 229, 197, 0.22);
  border-bottom: 1px solid rgba(0, 229, 197, 0.22);
  background: rgba(4, 11, 24, 0.96);
  transform: translate(-50%, -5px) rotate(45deg);
}

.member-service-tooltip strong {
  color: var(--text-strong);
}

.member-service-tooltip span {
  color: var(--text-muted);
}

.member-service-item:hover .member-service-tooltip,
.member-service-item:focus-within .member-service-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.member-state-copy {
  color: var(--text-muted);
}

.member-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  justify-self: end;
}

.member-action-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.action-card {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(5, 12, 28, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.member-action-group .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.primary-action {
  background: linear-gradient(135deg, rgba(0, 229, 197, 0.9), rgba(120, 180, 255, 0.82));
  color: #02141d;
}

.tertiary {
  background: transparent;
  color: var(--text-strong);
}

.button-like {
  cursor: pointer;
  font: inherit;
}

.member-loading {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
}

.skeleton {
  width: 96px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
}

.member-reset,
.member-error {
  width: 100%;
}

.member-reset {
  color: var(--accent-cyan);
  font-size: 15px;
  text-align: center;
}

.member-service-link:focus-visible {
  outline: 2px solid rgba(0, 229, 197, 0.75);
  outline-offset: 3px;
}

@media (max-width: 1080px) {
  .conversion-card,
  .member-panel {
    grid-template-columns: 1fr;
  }

  .conversion-section {
    min-height: auto;
  }

  .member-actions {
    justify-self: stretch;
    max-width: none;
  }
}

@media (max-width: 760px) {
  .conversion-section {
    margin-top: 0;
    padding: 50px 0;
  }

  .member-service-row {
    justify-content: flex-start;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .member-service-link {
    width: 34px;
    height: 34px;
  }

  .member-service-icon {
    font-size: 17px;
  }
}
</style>
