<template>
  <div class="auth-shell" :class="{ 'auth-shell-split': hasNarrative }">
    <div class="bg-glow soft"></div>

    <!-- LEFT: Narrative (split mode only, hidden on mobile) -->
    <aside v-if="hasNarrative" class="auth-narrative">
      <slot name="narrative"></slot>
    </aside>

    <!-- RIGHT: Form -->
    <main class="auth-main">
      <div class="auth-main-inner">
        <!-- Legacy centered-card header (only when no narrative slot) -->
        <div class="mb-8 text-center" v-if="!hasNarrative && settingsLoaded">
          <div
            class="mb-4 inline-flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl"
          >
            <img :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
          </div>
          <h1 class="text-2xl font-bold">{{ siteName }}</h1>
          <p class="text-sm text-gray-500 dark:text-dark-400" v-if="siteSubtitle">{{ siteSubtitle }}</p>
        </div>

        <!-- Form content -->
        <slot />

        <!-- Footer link slot (e.g., "没有账户？注册") -->
        <div class="mt-6 text-center text-sm">
          <slot name="footer" />
        </div>

        <!-- Copyright (legacy mode only) -->
        <div class="mt-8 text-center text-xs text-gray-400 dark:text-dark-500" v-if="!hasNarrative">
          &copy; {{ currentYear }} {{ siteName }}. All rights reserved.
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, useSlots } from 'vue'
import { useAppStore } from '@/stores'
import { sanitizeUrl } from '@/utils/url'

const appStore = useAppStore()

const siteName = computed(() => appStore.siteName || 'Sub2API')
const siteLogo = computed(() => sanitizeUrl(appStore.siteLogo || '', { allowRelative: true, allowDataUrl: true }))
const siteSubtitle = computed(() => appStore.cachedPublicSettings?.site_subtitle || 'Subscription to API Conversion Platform')
const settingsLoaded = computed(() => appStore.publicSettingsLoaded)

const currentYear = computed(() => new Date().getFullYear())

const slots = useSlots()
const hasNarrative = computed(() => !!slots.narrative)

onMounted(() => {
  appStore.fetchPublicSettings()
})
</script>

<style scoped>
.text-gradient {
  @apply bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent;
}

.auth-shell {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.auth-shell-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .auth-shell-split {
    grid-template-columns: 1fr;
  }
  .auth-narrative {
    display: none;
  }
}
.auth-narrative {
  position: relative;
  padding: 48px 56px;
  background: linear-gradient(135deg, #0a0e1a 0%, #1e1b4b 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text-0);
  font-family: var(--font-sans);
}
.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  position: relative;
  z-index: 2;
}
.auth-main-inner {
  width: 100%;
  max-width: 420px;
}

/* Legacy-mode (no narrative slot) background — keep existing gradient decorative look */
.auth-shell:not(.auth-shell-split) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(to bottom right, #f9fafb, rgba(240,253,250,0.3), #f3f4f6);
}
:global(.dark) .auth-shell:not(.auth-shell-split) {
  background: linear-gradient(to bottom right, #020617, #0f172a, #020617);
}
</style>
